@skbkontur/react-ui 0.0.0-69a6fa606f → 0.0.0-6fbd9fadb2

package/components/Kebab/Kebab.d.ts

@@ -1,11 +1,12 @@
-import React from 'react';
+import React, { AriaAttributes } from 'react';
 import { PopupMenuProps } from '../../internal/PopupMenu';
 import { Nullable } from '../../typings/utility-types';
 import { PopupPositionsType } from '../../internal/Popup';
 import { CommonProps } from '../../internal/CommonWrapper';
-export interface KebabProps extends CommonProps, Pick<PopupMenuProps, 'onOpen' | 'onClose'> {
+import { SizeProp } from '../../lib/types/props';
+export interface KebabProps extends Pick<AriaAttributes, 'aria-label'>, Pick<PopupMenuProps, 'onOpen' | 'onClose' | 'popupMenuId' | 'preventIconsOffset'>, CommonProps {
     disabled?: boolean;
-    size: 'small' | 'medium' | 'large';
+    size?: SizeProp;
     /**
      * Список позиций доступных для расположения выпадашки.
      *
@@ -14,37 +15,38 @@ export interface KebabProps extends CommonProps, Pick<PopupMenuProps, 'onOpen' |
      * **Возможные значения**: `top left`, `top center`, `top right`, `right top`, `right middle`, `right bottom`, `bottom left`, `bottom center`, `bottom right`, `left top`, `left middle`, `left bottom`
      * @default ['bottom left', 'bottom right', 'top left', 'top right']
      */
-    positions: PopupPositionsType[];
+    positions?: PopupPositionsType[];
     menuMaxHeight?: number | string;
     /**
      * Не показывать анимацию
      */
-    disableAnimations: boolean;
+    disableAnimations?: boolean;
     /**
      * Кастомная иконка
      */
     icon?: React.ReactNode;
+    /**
+     * Атрибут для указания id элемента(-ов), описывающих его
+     */
+    'aria-describedby'?: AriaAttributes['aria-describedby'];
 }
+export declare const KebabDataTids: {
+    readonly caption: "Kebab__caption";
+};
 export interface KebabState {
     anchor: Nullable<HTMLElement>;
     focusedByTab: boolean;
 }
+declare type DefaultProps = Required<Pick<KebabProps, 'onOpen' | 'onClose' | 'positions' | 'size' | 'disableAnimations'>>;
 export declare class Kebab extends React.Component<KebabProps, KebabState> {
     static __KONTUR_REACT_UI__: string;
+    static displayName: string;
     static propTypes: {};
-    static defaultProps: {
-        onOpen: () => undefined;
-        onClose: () => undefined;
-        positions: string[];
-        size: string;
-        disableAnimations: boolean;
-        icon: JSX.Element;
-    };
-    state: {
-        focusedByTab: boolean;
-        anchor: null;
-    };
+    static defaultProps: DefaultProps;
+    private getProps;
+    state: KebabState;
     private theme;
+    private emotion;
     private setRootNode;
     private listener;
     componentDidMount(): void;
@@ -57,4 +59,6 @@ export declare class Kebab extends React.Component<KebabProps, KebabState> {
     private handleFocus;
     private handleBlur;
     private renderIcon;
+    private renderIcon2022;
 }
+export {};

package/components/Kebab/Kebab.md

@@ -160,6 +160,34 @@ let Card = ({ title }) => (
 <Card title="С кастомным действием" />
 ```
 
+С иконками и включенным по-умолчанию автоматическим выравниванием текста.
+
+```jsx harmony
+import { Button, MenuHeader, MenuItem, MenuSeparator, Kebab } from '@skbkontur/react-ui';
+import OkIcon from '@skbkontur/react-icons/Ok';
+
+<Kebab>
+  <MenuHeader>MenuHeader</MenuHeader>
+  <MenuItem icon={<OkIcon />}>MenuItem1</MenuItem>
+  <MenuItem icon={<OkIcon />}>MenuItem2</MenuItem>
+  <MenuItem>MenuItem3</MenuItem>
+</Kebab>;
+```
+
+С иконками и отключенным автоматическим выравниванием текста.
+
+```jsx harmony
+import { Button, MenuHeader, MenuItem, MenuSeparator, Kebab } from '@skbkontur/react-ui';
+import OkIcon from '@skbkontur/react-icons/Ok';
+
+<Kebab preventIconsOffset>
+  <MenuHeader>MenuHeader</MenuHeader>
+  <MenuItem icon={<OkIcon />}>MenuItem1</MenuItem>
+  <MenuItem icon={<OkIcon />}>MenuItem2</MenuItem>
+  <MenuItem>MenuItem3</MenuItem>
+</Kebab>
+```
+
 Отключенное кебаб-меню.
 
 ```jsx harmony

package/components/Kebab/Kebab.styles/Kebab.styles.js

@@ -1,34 +1,48 @@
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
 
-import { css, memoizeStyle } from "../../../lib/theming/Emotion";
-export var styles = memoizeStyle({
-  kebab: function kebab(t) {
-    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      display: inline-block;\n      text-align: center;\n      border: ", ";\n      box-sizing: border-box;\n      border-radius: ", ";\n      user-select: none;\n      cursor: pointer;\n      outline: 0;\n      transition: background 0.12s ease-out;\n      width: 26px;\n      height: 26px;\n      background: ", ";\n\n      &:hover {\n        background: ", ";\n      }\n    "])), t.kebabBorder, t.kebabBorderRadius, t.kebabBackground, t.kebabBackgroundHover);
-  },
-  focused: function focused(t) {
-    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      background: ", ";\n      border-color: ", ";\n    "])), t.kebabBackgroundHover, t.borderColorFocus);
-  },
-  opened: function opened(t) {
-    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      background: ", " !important; // override kebab:hover style\n      cursor: default;\n    "])), t.kebabBackgroundHover);
-  },
-  disabled: function disabled() {
-    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      cursor: default;\n\n      &:hover {\n        background: none;\n      }\n    "])));
-  },
-  icon: function icon() {
-    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      color: #757575;\n      line-height: 1;\n    "])));
-  },
-  iconsmall: function iconsmall() {
-    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      margin-top: 2px;\n      font-size: 14px;\n    "])));
-  },
-  iconmedium: function iconmedium() {
-    return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      margin-top: -1px;\n      margin-left: 0.5px;\n      font-size: 18px;\n    "])));
-  },
-  iconlarge: function iconlarge() {
-    return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n      margin-top: -2px;\n      margin-left: 1px;\n      font-size: 20px;\n    "])));
-  },
-  menu: function menu(t) {
-    return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n      overflow: hidden;\n      border-radius: ", ";\n    "])), t.popupBorderRadius);
-  }
-});
+import { memoizeStyle } from "../../../lib/theming/Emotion";
+export var getStyles = function getStyles(emotion) {
+  return memoizeStyle({
+    kebab: function kebab(t) {
+      return emotion.css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n        display: inline-block;\n        text-align: center;\n        border: ", ";\n        box-sizing: border-box;\n        border-radius: ", ";\n        user-select: none;\n        cursor: pointer;\n        outline: 0;\n        transition: background 0.12s ease-out;\n        background: ", ";\n\n        &:hover {\n          background: ", ";\n        }\n\n        &:active {\n          background: ", ";\n        }\n      "])), t.kebabBorder, t.kebabBorderRadius, t.kebabBackground, t.kebabBackgroundHover, t.kebabBackgroundActive);
+    },
+    kebabSmall: function kebabSmall(t) {
+      return emotion.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n        width: ", ";\n        height: ", ";\n      "])), t.kebabSizeSmall, t.kebabSizeSmall);
+    },
+    kebabMedium: function kebabMedium(t) {
+      return emotion.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n        width: ", ";\n        height: ", ";\n      "])), t.kebabSizeMedium, t.kebabSizeMedium);
+    },
+    kebabLarge: function kebabLarge(t) {
+      return emotion.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n        width: ", ";\n        height: ", ";\n      "])), t.kebabSizeLarge, t.kebabSizeLarge);
+    },
+    kebab2022: function kebab2022() {
+      return emotion.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n      "])));
+    },
+    focused: function focused(t) {
+      return emotion.css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n        background: ", ";\n        border-color: ", ";\n      "])), t.kebabBackgroundHover, t.borderColorFocus);
+    },
+    opened: function opened(t) {
+      return emotion.css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n        background: ", " !important; // override kebab:hover style\n        cursor: default;\n      "])), t.kebabBackgroundActive);
+    },
+    disabled: function disabled() {
+      return emotion.css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n        cursor: default;\n\n        &:hover {\n          background: none;\n        }\n      "])));
+    },
+    icon: function icon(t) {
+      return emotion.css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n        color: ", ";\n        line-height: 1;\n      "])), t.kebabIconColor);
+    },
+    iconsmall: function iconsmall(t) {
+      return emotion.css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n        margin-top: 2px;\n        font-size: ", ";\n      "])), t.kebabIconSizeSmall);
+    },
+    iconmedium: function iconmedium(t) {
+      return emotion.css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n        margin-top: -1px;\n        margin-left: 0.5px;\n        font-size: ", ";\n      "])), t.kebabIconSizeMedium);
+    },
+    iconlarge: function iconlarge(t) {
+      return emotion.css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n        margin-top: -2px;\n        margin-left: 1px;\n        font-size: ", ";\n      "])), t.kebabIconSizeLarge);
+    },
+    menu: function menu(t) {
+      return emotion.css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n        overflow: hidden;\n        border-radius: ", ";\n      "])), t.popupBorderRadius);
+    }
+  });
+};

package/components/Kebab/Kebab.styles/Kebab.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Kebab.styles.ts"],"names":["css","memoizeStyle","styles","kebab","t","kebabBorder","kebabBorderRadius","kebabBackground","kebabBackgroundHover","focused","borderColorFocus","opened","disabled","icon","iconsmall","iconmedium","iconlarge","menu","popupBorderRadius"],"mappings":"oQAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;;AAGA,OAAO,IAAMC,MAAM,GAAGD,YAAY,CAAC;AACjCE,EAAAA,KADiC,iBAC3BC,CAD2B,EACjB;AACd,WAAOJ,GAAP;;;AAGYI,IAAAA,CAAC,CAACC,WAHd;;AAKmBD,IAAAA,CAAC,CAACE,iBALrB;;;;;;;AAYgBF,IAAAA,CAAC,CAACG,eAZlB;;;AAekBH,IAAAA,CAAC,CAACI,oBAfpB;;;AAkBD,GApBgC;;AAsBjCC,EAAAA,OAtBiC,mBAsBzBL,CAtByB,EAsBf;AAChB,WAAOJ,GAAP;AACgBI,IAAAA,CAAC,CAACI,oBADlB;AAEkBJ,IAAAA,CAAC,CAACM,gBAFpB;;AAID,GA3BgC;;AA6BjCC,EAAAA,MA7BiC,kBA6B1BP,CA7B0B,EA6BhB;AACf,WAAOJ,GAAP;AACgBI,IAAAA,CAAC,CAACI,oBADlB;;;AAID,GAlCgC;;AAoCjCI,EAAAA,QApCiC,sBAoCtB;AACT,WAAOZ,GAAP;;;;;;;AAOD,GA5CgC;;AA8CjCa,EAAAA,IA9CiC,kBA8C1B;AACL,WAAOb,GAAP;;;;AAID,GAnDgC;;AAqDjCc,EAAAA,SArDiC,uBAqDrB;AACV,WAAOd,GAAP;;;;AAID,GA1DgC;;AA4DjCe,EAAAA,UA5DiC,wBA4DpB;AACX,WAAOf,GAAP;;;;;AAKD,GAlEgC;;AAoEjCgB,EAAAA,SApEiC,uBAoErB;AACV,WAAOhB,GAAP;;;;;AAKD,GA1EgC;;AA4EjCiB,EAAAA,IA5EiC,gBA4E5Bb,CA5E4B,EA4ElB;AACb,WAAOJ,GAAP;;AAEmBI,IAAAA,CAAC,CAACc,iBAFrB;;AAID,GAjFgC,EAAD,CAA3B","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const styles = memoizeStyle({\n  kebab(t: Theme) {\n    return css`\n      display: inline-block;\n      text-align: center;\n      border: ${t.kebabBorder};\n      box-sizing: border-box;\n      border-radius: ${t.kebabBorderRadius};\n      user-select: none;\n      cursor: pointer;\n      outline: 0;\n      transition: background 0.12s ease-out;\n      width: 26px;\n      height: 26px;\n      background: ${t.kebabBackground};\n\n      &:hover {\n        background: ${t.kebabBackgroundHover};\n      }\n    `;\n  },\n\n  focused(t: Theme) {\n    return css`\n      background: ${t.kebabBackgroundHover};\n      border-color: ${t.borderColorFocus};\n    `;\n  },\n\n  opened(t: Theme) {\n    return css`\n      background: ${t.kebabBackgroundHover} !important; // override kebab:hover style\n      cursor: default;\n    `;\n  },\n\n  disabled() {\n    return css`\n      cursor: default;\n\n      &:hover {\n        background: none;\n      }\n    `;\n  },\n\n  icon() {\n    return css`\n      color: #757575;\n      line-height: 1;\n    `;\n  },\n\n  iconsmall() {\n    return css`\n      margin-top: 2px;\n      font-size: 14px;\n    `;\n  },\n\n  iconmedium() {\n    return css`\n      margin-top: -1px;\n      margin-left: 0.5px;\n      font-size: 18px;\n    `;\n  },\n\n  iconlarge() {\n    return css`\n      margin-top: -2px;\n      margin-left: 1px;\n      font-size: 20px;\n    `;\n  },\n\n  menu(t: Theme) {\n    return css`\n      overflow: hidden;\n      border-radius: ${t.popupBorderRadius};\n    `;\n  },\n});\n"]}
+{"version":3,"sources":["Kebab.styles.ts"],"names":["memoizeStyle","getStyles","emotion","kebab","t","css","kebabBorder","kebabBorderRadius","kebabBackground","kebabBackgroundHover","kebabBackgroundActive","kebabSmall","kebabSizeSmall","kebabMedium","kebabSizeMedium","kebabLarge","kebabSizeLarge","kebab2022","focused","borderColorFocus","opened","disabled","icon","kebabIconColor","iconsmall","kebabIconSizeSmall","iconmedium","kebabIconSizeMedium","iconlarge","kebabIconSizeLarge","menu","popupBorderRadius"],"mappings":";;AAEA,SAASA,YAAT,QAA6B,2BAA7B;;;AAGA,OAAO,IAAMC,SAAS,GAAG,SAAZA,SAAY,CAACC,OAAD;AACvBF,IAAAA,YAAY,CAAC;AACXG,MAAAA,KADW,iBACLC,CADK,EACK;AACd,eAAOF,OAAO,CAACG,GAAf;;;AAGYD,QAAAA,CAAC,CAACE,WAHd;;AAKmBF,QAAAA,CAAC,CAACG,iBALrB;;;;;AAUgBH,QAAAA,CAAC,CAACI,eAVlB;;;AAakBJ,QAAAA,CAAC,CAACK,oBAbpB;;;;AAiBkBL,QAAAA,CAAC,CAACM,qBAjBpB;;;AAoBD,OAtBU;;AAwBXC,MAAAA,UAxBW,sBAwBAP,CAxBA,EAwBU;AACnB,eAAOF,OAAO,CAACG,GAAf;AACWD,QAAAA,CAAC,CAACQ,cADb;AAEYR,QAAAA,CAAC,CAACQ,cAFd;;AAID,OA7BU;;AA+BXC,MAAAA,WA/BW,uBA+BCT,CA/BD,EA+BW;AACpB,eAAOF,OAAO,CAACG,GAAf;AACWD,QAAAA,CAAC,CAACU,eADb;AAEYV,QAAAA,CAAC,CAACU,eAFd;;AAID,OApCU;;AAsCXC,MAAAA,UAtCW,sBAsCAX,CAtCA,EAsCU;AACnB,eAAOF,OAAO,CAACG,GAAf;AACWD,QAAAA,CAAC,CAACY,cADb;AAEYZ,QAAAA,CAAC,CAACY,cAFd;;AAID,OA3CU;;AA6CXC,MAAAA,SA7CW,uBA6CC;AACV,eAAOf,OAAO,CAACG,GAAf;;;;;AAKD,OAnDU;;AAqDXa,MAAAA,OArDW,mBAqDHd,CArDG,EAqDO;AAChB,eAAOF,OAAO,CAACG,GAAf;AACgBD,QAAAA,CAAC,CAACK,oBADlB;AAEkBL,QAAAA,CAAC,CAACe,gBAFpB;;AAID,OA1DU;;AA4DXC,MAAAA,MA5DW,kBA4DJhB,CA5DI,EA4DM;AACf,eAAOF,OAAO,CAACG,GAAf;AACgBD,QAAAA,CAAC,CAACM,qBADlB;;;AAID,OAjEU;;AAmEXW,MAAAA,QAnEW,sBAmEA;AACT,eAAOnB,OAAO,CAACG,GAAf;;;;;;;AAOD,OA3EU;;AA6EXiB,MAAAA,IA7EW,gBA6ENlB,CA7EM,EA6EI;AACb,eAAOF,OAAO,CAACG,GAAf;AACWD,QAAAA,CAAC,CAACmB,cADb;;;AAID,OAlFU;;AAoFXC,MAAAA,SApFW,qBAoFDpB,CApFC,EAoFS;AAClB,eAAOF,OAAO,CAACG,GAAf;;AAEeD,QAAAA,CAAC,CAACqB,kBAFjB;;AAID,OAzFU;;AA2FXC,MAAAA,UA3FW,sBA2FAtB,CA3FA,EA2FU;AACnB,eAAOF,OAAO,CAACG,GAAf;;;AAGeD,QAAAA,CAAC,CAACuB,mBAHjB;;AAKD,OAjGU;;AAmGXC,MAAAA,SAnGW,qBAmGDxB,CAnGC,EAmGS;AAClB,eAAOF,OAAO,CAACG,GAAf;;;AAGeD,QAAAA,CAAC,CAACyB,kBAHjB;;AAKD,OAzGU;;AA2GXC,MAAAA,IA3GW,gBA2GN1B,CA3GM,EA2GI;AACb,eAAOF,OAAO,CAACG,GAAf;;AAEmBD,QAAAA,CAAC,CAAC2B,iBAFrB;;AAID,OAhHU,EAAD,CADW,GAAlB","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const getStyles = (emotion: Emotion) =>\n  memoizeStyle({\n    kebab(t: Theme) {\n      return emotion.css`\n        display: inline-block;\n        text-align: center;\n        border: ${t.kebabBorder};\n        box-sizing: border-box;\n        border-radius: ${t.kebabBorderRadius};\n        user-select: none;\n        cursor: pointer;\n        outline: 0;\n        transition: background 0.12s ease-out;\n        background: ${t.kebabBackground};\n\n        &:hover {\n          background: ${t.kebabBackgroundHover};\n        }\n\n        &:active {\n          background: ${t.kebabBackgroundActive};\n        }\n      `;\n    },\n\n    kebabSmall(t: Theme) {\n      return emotion.css`\n        width: ${t.kebabSizeSmall};\n        height: ${t.kebabSizeSmall};\n      `;\n    },\n\n    kebabMedium(t: Theme) {\n      return emotion.css`\n        width: ${t.kebabSizeMedium};\n        height: ${t.kebabSizeMedium};\n      `;\n    },\n\n    kebabLarge(t: Theme) {\n      return emotion.css`\n        width: ${t.kebabSizeLarge};\n        height: ${t.kebabSizeLarge};\n      `;\n    },\n\n    kebab2022() {\n      return emotion.css`\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n      `;\n    },\n\n    focused(t: Theme) {\n      return emotion.css`\n        background: ${t.kebabBackgroundHover};\n        border-color: ${t.borderColorFocus};\n      `;\n    },\n\n    opened(t: Theme) {\n      return emotion.css`\n        background: ${t.kebabBackgroundActive} !important; // override kebab:hover style\n        cursor: default;\n      `;\n    },\n\n    disabled() {\n      return emotion.css`\n        cursor: default;\n\n        &:hover {\n          background: none;\n        }\n      `;\n    },\n\n    icon(t: Theme) {\n      return emotion.css`\n        color: ${t.kebabIconColor};\n        line-height: 1;\n      `;\n    },\n\n    iconsmall(t: Theme) {\n      return emotion.css`\n        margin-top: 2px;\n        font-size: ${t.kebabIconSizeSmall};\n      `;\n    },\n\n    iconmedium(t: Theme) {\n      return emotion.css`\n        margin-top: -1px;\n        margin-left: 0.5px;\n        font-size: ${t.kebabIconSizeMedium};\n      `;\n    },\n\n    iconlarge(t: Theme) {\n      return emotion.css`\n        margin-top: -2px;\n        margin-left: 1px;\n        font-size: ${t.kebabIconSizeLarge};\n      `;\n    },\n\n    menu(t: Theme) {\n      return emotion.css`\n        overflow: hidden;\n        border-radius: ${t.popupBorderRadius};\n      `;\n    },\n  });\n"]}

package/components/Kebab/Kebab.styles.d.ts

@@ -1,12 +1,17 @@
+import type { Emotion } from '@emotion/css/create-instance';
 import { Theme } from '../../lib/theming/Theme';
-export declare const styles: {
+export declare const getStyles: (emotion: Emotion) => {
     kebab(t: Theme): string;
+    kebabSmall(t: Theme): string;
+    kebabMedium(t: Theme): string;
+    kebabLarge(t: Theme): string;
+    kebab2022(): string;
     focused(t: Theme): string;
     opened(t: Theme): string;
     disabled(): string;
-    icon(): string;
-    iconsmall(): string;
-    iconmedium(): string;
-    iconlarge(): string;
+    icon(t: Theme): string;
+    iconsmall(t: Theme): string;
+    iconmedium(t: Theme): string;
+    iconlarge(t: Theme): string;
     menu(t: Theme): string;
 };

package/components/Kebab/KebabIcon/KebabIcon.js

@@ -0,0 +1,17 @@
+/* eslint-disable react/display-name */
+import React from 'react';
+import { iconSizer } from "../../../internal/icons2022/iconSizer";
+import { UiMenuDotsThreeVIcon16Light } from "../../../internal/icons2022/UiMenuDotsThreeVIcon/UiMenuDotsThreeVIcon16Light";
+import { UiMenuDotsThreeVIcon20Regular } from "../../../internal/icons2022/UiMenuDotsThreeVIcon/UiMenuDotsThreeVIcon20Regular";
+import { UiMenuDotsThreeVIcon24Regular } from "../../../internal/icons2022/UiMenuDotsThreeVIcon/UiMenuDotsThreeVIcon24Regular";
+export var KebabIcon = iconSizer({
+  small: function small() {
+    return /*#__PURE__*/React.createElement(UiMenuDotsThreeVIcon16Light, null);
+  },
+  medium: function medium() {
+    return /*#__PURE__*/React.createElement(UiMenuDotsThreeVIcon20Regular, null);
+  },
+  large: function large() {
+    return /*#__PURE__*/React.createElement(UiMenuDotsThreeVIcon24Regular, null);
+  }
+}, 'KebabIcon');

package/components/Kebab/KebabIcon/KebabIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["KebabIcon.tsx"],"names":["React","iconSizer","UiMenuDotsThreeVIcon16Light","UiMenuDotsThreeVIcon20Regular","UiMenuDotsThreeVIcon24Regular","KebabIcon","small","medium","large"],"mappings":"AAAA;AACA,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,SAASC,SAAT,QAA0B,oCAA1B;AACA,SAASC,2BAAT,QAA4C,2EAA5C;AACA,SAASC,6BAAT,QAA8C,6EAA9C;AACA,SAASC,6BAAT,QAA8C,6EAA9C;;AAEA,OAAO,IAAMC,SAAS,GAAGJ,SAAS;AAChC;AACEK,EAAAA,KAAK,EAAE,sCAAM,oBAAC,2BAAD,OAAN,EADT;AAEEC,EAAAA,MAAM,EAAE,uCAAM,oBAAC,6BAAD,OAAN,EAFV;AAGEC,EAAAA,KAAK,EAAE,sCAAM,oBAAC,6BAAD,OAAN,EAHT,EADgC;;AAMhC,WANgC,CAA3B","sourcesContent":["/* eslint-disable react/display-name */\nimport React from 'react';\n\nimport { iconSizer } from '../../internal/icons2022/iconSizer';\nimport { UiMenuDotsThreeVIcon16Light } from '../../internal/icons2022/UiMenuDotsThreeVIcon/UiMenuDotsThreeVIcon16Light';\nimport { UiMenuDotsThreeVIcon20Regular } from '../../internal/icons2022/UiMenuDotsThreeVIcon/UiMenuDotsThreeVIcon20Regular';\nimport { UiMenuDotsThreeVIcon24Regular } from '../../internal/icons2022/UiMenuDotsThreeVIcon/UiMenuDotsThreeVIcon24Regular';\n\nexport const KebabIcon = iconSizer(\n  {\n    small: () => <UiMenuDotsThreeVIcon16Light />,\n    medium: () => <UiMenuDotsThreeVIcon20Regular />,\n    large: () => <UiMenuDotsThreeVIcon24Regular />,\n  },\n  'KebabIcon',\n);\n"]}

package/components/Kebab/KebabIcon/package.json

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

package/components/Kebab/KebabIcon.d.ts

@@ -0,0 +1,3 @@
+export declare const KebabIcon: import("../../lib/forwardRefAndName").ReactUIIconWithRef<SVGSVGElement, Omit<import("../../internal/icons2022/BaseIcon").IconProps, "size"> & {
+    size?: number | "small" | "medium" | "large" | undefined;
+}>;

package/components/Link/Link/Link.js

@@ -1,28 +1,34 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
-var _excluded = ["disabled", "href", "icon", "use", "loading", "_button", "_buttonOpened", "rel"];
+var _excluded = ["disabled", "href", "icon", "rightIcon", "use", "loading", "_button", "_buttonOpened", "rel", "as", "focused"];
 
 var _class, _class2, _temp;
 
 import React from 'react';
 import PropTypes from 'prop-types';
+import { globalObject } from '@skbkontur/global-object';
 import { keyListener } from "../../../lib/events/keyListener";
-import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { isExternalLink } from "../../../lib/utils";
-import { Spinner } from "../../Spinner";
 import { CommonWrapper } from "../../../internal/CommonWrapper";
-import { cx } from "../../../lib/theming/Emotion";
-import { rootNode } from "../../../lib/rootNode/rootNodeDecorator";
-import { styles } from "../Link.styles";
+import { EmotionConsumer } from "../../../lib/theming/Emotion";
+import { rootNode } from "../../../lib/rootNode";
+import { createPropsGetter } from "../../../lib/createPropsGetter";
+import { ThemeFactory } from "../../../lib/theming/ThemeFactory";
+import { isDarkTheme, isTheme2022 } from "../../../lib/theming/ThemeHelpers";
+import { isIE11 } from "../../../lib/client";
+import { getFullReactUIFlagsContext, ReactUIFeatureFlagsContext } from "../../../lib/featureFlagsContext";
+import { ThemeConsumer } from "../../../lib/theming/ThemeContext";
+import { getStyles, globalClasses } from "../Link.styles";
+import { LinkIcon } from "../LinkIcon";
 export var LinkDataTids = {
   root: 'Link__root'
 };
+export
 /**
- * Элемент ссылки из HTML.
- */
-
-export var Link = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
+* Элемент ссылки из HTML.
+*/
+var Link = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(Link, _React$Component);
 
   function Link() {
@@ -33,35 +39,29 @@ export var Link = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_R
     }
 
     _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
+    _this.getProps = createPropsGetter(Link.defaultProps);
     _this.state = {
       focusedByTab: false
     };
 
     _this.renderMain = function (props) {
-      var _cx;
-
       var disabled = props.disabled,
           href = props.href,
           icon = props.icon,
+          rightIcon = props.rightIcon,
           use = props.use,
           loading = props.loading,
           _button = props._button,
           _buttonOpened = props._buttonOpened,
           relOrigin = props.rel,
+          Component = props.as,
+          _props$focused = props.focused,
+          focused = _props$focused === void 0 ? false : _props$focused,
           rest = _objectWithoutPropertiesLoose(props, _excluded);
 
-      var iconElement = null;
-
-      if (icon) {
-        iconElement = /*#__PURE__*/React.createElement("span", {
-          className: styles.icon(_this.theme)
-        }, loading ? /*#__PURE__*/React.createElement(Spinner, {
-          caption: null,
-          dimmed: true,
-          inline: true
-        }) : icon);
-      }
+      var _isTheme2022 = isTheme2022(_this.theme);
 
+      var styles = getStyles(_this.emotion);
       var arrow = null;
 
       if (_button) {
@@ -76,26 +76,50 @@ export var Link = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_R
         rel = "noopener" + (isExternalLink(href) ? ' noreferrer' : '');
       }
 
-      var focused = !disabled && _this.state.focusedByTab;
+      var isFocused = !disabled && (_this.state.focusedByTab || focused);
+      var leftIconElement = icon && /*#__PURE__*/React.createElement(LinkIcon, {
+        icon: icon,
+        loading: loading,
+        position: "left"
+      });
+      var rightIconElement = rightIcon && /*#__PURE__*/React.createElement(LinkIcon, {
+        hasBothIcons: !!icon && !!rightIcon,
+        icon: rightIcon,
+        loading: loading,
+        position: "right"
+      });
       var linkProps = {
-        className: cx((_cx = {}, _cx[styles.root(_this.theme)] = true, _cx[styles.button(_this.theme)] = !!_button, _cx[styles.buttonOpened(_this.theme)] = !!_buttonOpened, _cx[styles.useDefault(_this.theme)] = use === 'default', _cx[styles.useSuccess(_this.theme)] = use === 'success', _cx[styles.useDanger(_this.theme)] = use === 'danger', _cx[styles.useGrayed(_this.theme)] = use === 'grayed', _cx[styles.useGrayedFocus(_this.theme)] = use === 'grayed' && focused, _cx[styles.focus(_this.theme)] = focused, _cx[styles.disabled(_this.theme)] = !!disabled || !!loading, _cx)),
+        className: _this.emotion.cx(styles.useRoot(), use === 'default' && styles.useDefault(_this.theme), use === 'success' && styles.useSuccess(_this.theme), use === 'danger' && styles.useDanger(_this.theme), use === 'grayed' && styles.useGrayed(_this.theme), !!_button && styles.button(_this.theme), !!_buttonOpened && styles.buttonOpened(_this.theme), _this.getLinkClassName(isFocused, Boolean(disabled || loading), _isTheme2022)),
         href: href,
         rel: rel,
-        onClick: _this._handleClick,
-        onFocus: _this._handleFocus,
-        onBlur: _this._handleBlur,
+        onClick: _this.handleClick,
+        onFocus: _this.handleFocus,
+        onBlur: _this.handleBlur,
         tabIndex: disabled || loading ? -1 : _this.props.tabIndex
       };
-      return /*#__PURE__*/React.createElement("a", _extends({
+      var child = _this.props.children;
+
+      if (_isTheme2022) {
+        var _this$emotion$cx, _this$emotion$cx2; // lineTextWrapper нужен для реализации transition у подчеркивания
+
+
+        child = /*#__PURE__*/React.createElement("span", {
+          className: _this.emotion.cx(globalClasses.textWrapper, styles.lineTextWrapper(_this.theme), (_this$emotion$cx = {}, _this$emotion$cx[styles.lineTextWrapperFocused(_this.theme)] = isFocused, _this$emotion$cx))
+        }, /*#__PURE__*/React.createElement("span", {
+          className: _this.emotion.cx(globalClasses.text, (_this$emotion$cx2 = {}, _this$emotion$cx2[styles.lineText(_this.theme)] = !isIE11, _this$emotion$cx2[styles.lineTextIE11(_this.theme)] = isIE11, _this$emotion$cx2))
+        }, _this.props.children));
+      }
+
+      return /*#__PURE__*/React.createElement(Component, _extends({
         "data-tid": LinkDataTids.root
-      }, rest, linkProps), iconElement, _this.props.children, arrow);
+      }, rest, linkProps), leftIconElement, child, rightIconElement, arrow);
     };
 
-    _this._handleFocus = function (event) {
+    _this.handleFocus = function () {
       if (!_this.props.disabled) {
         // focus event fires before keyDown eventlistener
         // so we should check tabPressed in async way
-        requestAnimationFrame(function () {
+        globalObject.requestAnimationFrame == null ? void 0 : globalObject.requestAnimationFrame(function () {
           if (keyListener.isTabPressed) {
             _this.setState({
               focusedByTab: true
@@ -105,19 +129,20 @@ export var Link = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_R
       }
     };
 
-    _this._handleBlur = function () {
+    _this.handleBlur = function () {
       _this.setState({
         focusedByTab: false
       });
     };
 
-    _this._handleClick = function (event) {
+    _this.handleClick = function (event) {
       var _this$props = _this.props,
-          href = _this$props.href,
           onClick = _this$props.onClick,
           disabled = _this$props.disabled,
           loading = _this$props.loading;
 
+      var href = _this.getProps().href;
+
       if (!href) {
         event.preventDefault();
       }
@@ -135,21 +160,38 @@ export var Link = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_R
   _proto.render = function render() {
     var _this2 = this;
 
-    return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
-      _this2.theme = theme;
-      return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
-        rootNodeRef: _this2.setRootNode
-      }, _this2.props), _this2.renderMain);
+    return /*#__PURE__*/React.createElement(ReactUIFeatureFlagsContext.Consumer, null, function (flags) {
+      _this2.linkFocusOutline = getFullReactUIFlagsContext(flags).linkFocusOutline;
+      return /*#__PURE__*/React.createElement(EmotionConsumer, null, function (emotion) {
+        _this2.emotion = emotion;
+        return /*#__PURE__*/React.createElement(ThemeConsumer, null, function (theme) {
+          _this2.theme = _this2.props.theme ? ThemeFactory.create(_this2.props.theme, theme) : theme;
+          return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
+            rootNodeRef: _this2.setRootNode
+          }, _this2.getProps()), _this2.renderMain);
+        });
+      });
     });
   };
 
+  _proto.getLinkClassName = function getLinkClassName(focused, disabled, _isTheme2022) {
+    var _this$getProps = this.getProps(),
+        use = _this$getProps.use;
+
+    var isBorderBottom = parseInt(this.theme.linkLineBorderBottomWidth) > 0;
+    var isFocused = focused && !disabled;
+    var styles = getStyles(this.emotion);
+    return !isBorderBottom ? this.emotion.cx(styles.root(this.theme), isFocused && styles.focus(this.theme), disabled && styles.disabled(this.theme), use === 'grayed' && focused && styles.useGrayedFocus(this.theme)) : this.emotion.cx(styles.lineRoot(), disabled && styles.disabled(this.theme), disabled && _isTheme2022 && isDarkTheme(this.theme) && styles.disabledDark22Theme(this.theme), isFocused && use === 'default' && styles.lineFocus(this.theme), isFocused && use === 'success' && styles.lineFocusSuccess(this.theme), isFocused && use === 'danger' && styles.lineFocusDanger(this.theme), isFocused && use === 'grayed' && styles.lineFocusGrayed(this.theme), isFocused && _isTheme2022 && this.linkFocusOutline && styles.focus2022(this.theme));
+  };
+
   return Link;
-}(React.Component), _class2.__KONTUR_REACT_UI__ = 'Link', _class2.propTypes = {
+}(React.Component), _class2.__KONTUR_REACT_UI__ = 'Link', _class2.displayName = 'Link', _class2.propTypes = {
   disabled: PropTypes.bool,
   href: PropTypes.string,
-  icon: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  icon: PropTypes.node,
   use: PropTypes.oneOf(['default', 'success', 'danger', 'grayed'])
 }, _class2.defaultProps = {
   href: '',
-  use: 'default'
+  use: 'default',
+  as: 'a'
 }, _temp)) || _class;

package/components/Link/Link/Link.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Link.tsx"],"names":["React","PropTypes","keyListener","ThemeContext","isExternalLink","Spinner","CommonWrapper","cx","rootNode","styles","LinkDataTids","root","Link","state","focusedByTab","renderMain","props","disabled","href","icon","use","loading","_button","_buttonOpened","relOrigin","rel","rest","iconElement","theme","arrow","focused","linkProps","className","button","buttonOpened","useDefault","useSuccess","useDanger","useGrayed","useGrayedFocus","focus","onClick","_handleClick","onFocus","_handleFocus","onBlur","_handleBlur","tabIndex","children","event","requestAnimationFrame","isTabPressed","setState","preventDefault","render","setRootNode","Component","__KONTUR_REACT_UI__","propTypes","bool","string","oneOfType","node","oneOf","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { Override } from '../../typings/utility-types';\nimport { keyListener } from '../../lib/events/keyListener';\nimport { Theme } from '../../lib/theming/Theme';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { isExternalLink } from '../../lib/utils';\nimport { Spinner } from '../Spinner';\nimport { CommonWrapper, CommonProps, CommonWrapperRestProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode/rootNodeDecorator';\n\nimport { styles } from './Link.styles';\n\nexport interface LinkProps\n  extends CommonProps,\n    Override<\n      React.AnchorHTMLAttributes<HTMLAnchorElement>,\n      {\n        /**\n         * Отключенное состояние.\n         */\n        disabled?: boolean;\n        /**\n         * HTML-атрибут `href`.\n         */\n        href?: string;\n        /**\n         * Добавляет ссылке иконку.\n         */\n        icon?: React.ReactElement<any>;\n        /**\n         * Тема ссылки.\n         */\n        use?: 'default' | 'success' | 'danger' | 'grayed';\n        /**\n         * @ignore\n         */\n        _button?: boolean;\n        /**\n         * @ignore\n         */\n        _buttonOpened?: boolean;\n        /**\n         * HTML-атрибут `tabindex`.\n         */\n        tabIndex?: number;\n        /**\n         * Переводит ссылку в состояние загрузки.\n         */\n        loading?: boolean;\n        /**\n         * HTML-событие `onclick`.\n         */\n        onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;\n      }\n    > {}\n\nexport interface LinkState {\n  focusedByTab: boolean;\n}\n\nexport const LinkDataTids = {\n  root: 'Link__root',\n} as const;\n\n/**\n * Элемент ссылки из HTML.\n */\n@rootNode\nexport class Link extends React.Component<LinkProps, LinkState> {\n  public static __KONTUR_REACT_UI__ = 'Link';\n\n  public static propTypes = {\n    disabled: PropTypes.bool,\n\n    href: PropTypes.string,\n\n    icon: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n\n    use: PropTypes.oneOf(['default', 'success', 'danger', 'grayed']),\n  };\n\n  public static defaultProps = {\n    href: '',\n    use: 'default',\n  };\n\n  public state = {\n    focusedByTab: false,\n  };\n\n  private theme!: Theme;\n  private setRootNode!: TSetRootNode;\n\n  public render(): JSX.Element {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return (\n            <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n              {this.renderMain}\n            </CommonWrapper>\n          );\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  private renderMain = (props: CommonWrapperRestProps<LinkProps>) => {\n    const { disabled, href, icon, use, loading, _button, _buttonOpened, rel: relOrigin, ...rest } = props;\n\n    let iconElement = null;\n    if (icon) {\n      iconElement = (\n        <span className={styles.icon(this.theme)}>{loading ? <Spinner caption={null} dimmed inline /> : icon}</span>\n      );\n    }\n\n    let arrow = null;\n    if (_button) {\n      arrow = <span className={styles.arrow()} />;\n    }\n\n    let rel = relOrigin;\n    if (typeof rel === 'undefined' && href) {\n      rel = `noopener${isExternalLink(href) ? ' noreferrer' : ''}`;\n    }\n\n    const focused = !disabled && this.state.focusedByTab;\n\n    const linkProps = {\n      className: cx({\n        [styles.root(this.theme)]: true,\n        [styles.button(this.theme)]: !!_button,\n        [styles.buttonOpened(this.theme)]: !!_buttonOpened,\n        [styles.useDefault(this.theme)]: use === 'default',\n        [styles.useSuccess(this.theme)]: use === 'success',\n        [styles.useDanger(this.theme)]: use === 'danger',\n        [styles.useGrayed(this.theme)]: use === 'grayed',\n        [styles.useGrayedFocus(this.theme)]: use === 'grayed' && focused,\n        [styles.focus(this.theme)]: focused,\n        [styles.disabled(this.theme)]: !!disabled || !!loading,\n      }),\n      href,\n      rel,\n      onClick: this._handleClick,\n      onFocus: this._handleFocus,\n      onBlur: this._handleBlur,\n      tabIndex: disabled || loading ? -1 : this.props.tabIndex,\n    };\n\n    return (\n      <a data-tid={LinkDataTids.root} {...rest} {...linkProps}>\n        {iconElement}\n        {this.props.children}\n        {arrow}\n      </a>\n    );\n  };\n\n  private _handleFocus = (event: React.FocusEvent<HTMLAnchorElement>) => {\n    if (!this.props.disabled) {\n      // focus event fires before keyDown eventlistener\n      // so we should check tabPressed in async way\n      requestAnimationFrame(() => {\n        if (keyListener.isTabPressed) {\n          this.setState({ focusedByTab: true });\n        }\n      });\n    }\n  };\n\n  private _handleBlur = () => {\n    this.setState({ focusedByTab: false });\n  };\n\n  private _handleClick = (event: React.MouseEvent<HTMLAnchorElement>) => {\n    const { href, onClick, disabled, loading } = this.props;\n    if (!href) {\n      event.preventDefault();\n    }\n    if (onClick && !disabled && !loading) {\n      onClick(event);\n    }\n  };\n}\n"]}
+{"version":3,"sources":["Link.tsx"],"names":["React","PropTypes","globalObject","keyListener","isExternalLink","CommonWrapper","EmotionConsumer","rootNode","createPropsGetter","ThemeFactory","isDarkTheme","isTheme2022","isIE11","getFullReactUIFlagsContext","ReactUIFeatureFlagsContext","ThemeConsumer","getStyles","globalClasses","LinkIcon","LinkDataTids","root","Link","getProps","defaultProps","state","focusedByTab","renderMain","props","disabled","href","icon","rightIcon","use","loading","_button","_buttonOpened","relOrigin","rel","Component","as","focused","rest","_isTheme2022","theme","styles","emotion","arrow","isFocused","leftIconElement","rightIconElement","linkProps","className","cx","useRoot","useDefault","useSuccess","useDanger","useGrayed","button","buttonOpened","getLinkClassName","Boolean","onClick","handleClick","onFocus","handleFocus","onBlur","handleBlur","tabIndex","child","children","textWrapper","lineTextWrapper","lineTextWrapperFocused","text","lineText","lineTextIE11","requestAnimationFrame","isTabPressed","setState","event","preventDefault","render","flags","linkFocusOutline","create","setRootNode","isBorderBottom","parseInt","linkLineBorderBottomWidth","focus","useGrayedFocus","lineRoot","disabledDark22Theme","lineFocus","lineFocusSuccess","lineFocusDanger","lineFocusGrayed","focus2022","__KONTUR_REACT_UI__","displayName","propTypes","bool","string","node","oneOf"],"mappings":"+XAAA,OAAOA,KAAP,MAAsC,OAAtC;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,SAASC,YAAT,QAA6B,0BAA7B;;;;AAIA,SAASC,WAAT,QAA4B,8BAA5B;;AAEA,SAASC,cAAT,QAA+B,iBAA/B;AACA,SAAsBC,aAAtB,QAAmE,8BAAnE;AACA,SAASC,eAAT,QAAgC,2BAAhC;AACA,SAASC,QAAT,QAAuC,oBAAvC;AACA,SAASC,iBAAT,QAAoD,6BAApD;AACA,SAASC,YAAT,QAA6B,gCAA7B;AACA,SAASC,WAAT,EAAsBC,WAAtB,QAAyC,gCAAzC;AACA,SAASC,MAAT,QAAuB,kBAAvB;AACA,SAASC,0BAAT,EAAqCC,0BAArC,QAAuE,+BAAvE;AACA,SAASC,aAAT,QAA8B,gCAA9B;;AAEA,SAASC,SAAT,EAAoBC,aAApB,QAAyC,eAAzC;AACA,SAASC,QAAT,QAAyB,YAAzB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsEA,OAAO,IAAMC,YAAY,GAAG;AAC1BC,EAAAA,IAAI,EAAE,YADoB,EAArB;;;;;;;;;;AAWP,OAJA;AACA;AACA,GAEA,IAAaC,IAAb,GADCd,QACD;;;;;;;;;;;;;;;;;;AAoBUe,IAAAA,QApBV,GAoBqBd,iBAAiB,CAACa,IAAI,CAACE,YAAN,CApBtC;;AAsBSC,IAAAA,KAtBT,GAsB4B;AACxBC,MAAAA,YAAY,EAAE,KADU,EAtB5B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4DUC,IAAAA,UA5DV,GA4DuB,UAACC,KAAD,EAAyD;AAC5E;AACEC,MAAAA,QADF;;;;;;;;;;;;AAaID,MAAAA,KAbJ,CACEC,QADF,CAEEC,IAFF,GAaIF,KAbJ,CAEEE,IAFF,CAGEC,IAHF,GAaIH,KAbJ,CAGEG,IAHF,CAIEC,SAJF,GAaIJ,KAbJ,CAIEI,SAJF,CAKEC,GALF,GAaIL,KAbJ,CAKEK,GALF,CAMEC,OANF,GAaIN,KAbJ,CAMEM,OANF,CAOEC,OAPF,GAaIP,KAbJ,CAOEO,OAPF,CAQEC,aARF,GAaIR,KAbJ,CAQEQ,aARF,CASOC,SATP,GAaIT,KAbJ,CASEU,GATF,CAUMC,SAVN,GAaIX,KAbJ,CAUEY,EAVF,kBAaIZ,KAbJ,CAWEa,OAXF,CAWEA,OAXF,+BAWY,KAXZ,kBAYKC,IAZL,iCAaId,KAbJ;AAcA,UAAMe,YAAY,GAAG/B,WAAW,CAAC,MAAKgC,KAAN,CAAhC;AACA,UAAMC,MAAM,GAAG5B,SAAS,CAAC,MAAK6B,OAAN,CAAxB;;AAEA,UAAIC,KAAK,GAAG,IAAZ;AACA,UAAIZ,OAAJ,EAAa;AACXY,QAAAA,KAAK,gBAAG,8BAAM,SAAS,EAAEF,MAAM,CAACE,KAAP,EAAjB,GAAR;AACD;;AAED,UAAIT,GAAG,GAAGD,SAAV;AACA,UAAI,OAAOC,GAAP,KAAe,WAAf,IAA8BR,IAAlC,EAAwC;AACtCQ,QAAAA,GAAG,iBAAcjC,cAAc,CAACyB,IAAD,CAAd,GAAuB,aAAvB,GAAuC,EAArD,CAAH;AACD;;AAED,UAAMkB,SAAS,GAAG,CAACnB,QAAD,KAAc,MAAKJ,KAAL,CAAWC,YAAX,IAA2Be,OAAzC,CAAlB;;AAEA,UAAMQ,eAAe,GAAGlB,IAAI,iBAAI,oBAAC,QAAD,IAAU,IAAI,EAAEA,IAAhB,EAAsB,OAAO,EAAEG,OAA/B,EAAwC,QAAQ,EAAC,MAAjD,GAAhC;AACA,UAAMgB,gBAAgB,GAAGlB,SAAS;AAChC,0BAAC,QAAD,IAAU,YAAY,EAAE,CAAC,CAACD,IAAF,IAAU,CAAC,CAACC,SAApC,EAA+C,IAAI,EAAEA,SAArD,EAAgE,OAAO,EAAEE,OAAzE,EAAkF,QAAQ,EAAC,OAA3F,GADF;;;AAIA,UAAMiB,SAAS,GAAG;AAChBC,QAAAA,SAAS,EAAE,MAAKN,OAAL,CAAaO,EAAb;AACTR,QAAAA,MAAM,CAACS,OAAP,EADS;AAETrB,QAAAA,GAAG,KAAK,SAAR,IAAqBY,MAAM,CAACU,UAAP,CAAkB,MAAKX,KAAvB,CAFZ;AAGTX,QAAAA,GAAG,KAAK,SAAR,IAAqBY,MAAM,CAACW,UAAP,CAAkB,MAAKZ,KAAvB,CAHZ;AAITX,QAAAA,GAAG,KAAK,QAAR,IAAoBY,MAAM,CAACY,SAAP,CAAiB,MAAKb,KAAtB,CAJX;AAKTX,QAAAA,GAAG,KAAK,QAAR,IAAoBY,MAAM,CAACa,SAAP,CAAiB,MAAKd,KAAtB,CALX;AAMT,SAAC,CAACT,OAAF,IAAaU,MAAM,CAACc,MAAP,CAAc,MAAKf,KAAnB,CANJ;AAOT,SAAC,CAACR,aAAF,IAAmBS,MAAM,CAACe,YAAP,CAAoB,MAAKhB,KAAzB,CAPV;AAQT,cAAKiB,gBAAL,CAAsBb,SAAtB,EAAiCc,OAAO,CAACjC,QAAQ,IAAIK,OAAb,CAAxC,EAA+DS,YAA/D,CARS,CADK;;AAWhBb,QAAAA,IAAI,EAAJA,IAXgB;AAYhBQ,QAAAA,GAAG,EAAHA,GAZgB;AAahByB,QAAAA,OAAO,EAAE,MAAKC,WAbE;AAchBC,QAAAA,OAAO,EAAE,MAAKC,WAdE;AAehBC,QAAAA,MAAM,EAAE,MAAKC,UAfG;AAgBhBC,QAAAA,QAAQ,EAAExC,QAAQ,IAAIK,OAAZ,GAAsB,CAAC,CAAvB,GAA2B,MAAKN,KAAL,CAAWyC,QAhBhC,EAAlB;;;AAmBA,UAAIC,KAAK,GAAG,MAAK1C,KAAL,CAAW2C,QAAvB;AACA,UAAI5B,YAAJ,EAAkB;AAChB;AACA2B,QAAAA,KAAK;AACH;AACE,UAAA,SAAS,EAAE,MAAKxB,OAAL,CAAaO,EAAb,CAAgBnC,aAAa,CAACsD,WAA9B,EAA2C3B,MAAM,CAAC4B,eAAP,CAAuB,MAAK7B,KAA5B,CAA3C;AACRC,UAAAA,MAAM,CAAC6B,sBAAP,CAA8B,MAAK9B,KAAnC,CADQ,IACoCI,SADpC,oBADb;;;AAKE;AACE,UAAA,SAAS,EAAE,MAAKF,OAAL,CAAaO,EAAb,CAAgBnC,aAAa,CAACyD,IAA9B;AACR9B,UAAAA,MAAM,CAAC+B,QAAP,CAAgB,MAAKhC,KAArB,CADQ,IACsB,CAAC/B,MADvB;AAERgC,UAAAA,MAAM,CAACgC,YAAP,CAAoB,MAAKjC,KAAzB,CAFQ,IAE0B/B,MAF1B,qBADb;;;AAMG,cAAKe,KAAL,CAAW2C,QANd,CALF,CADF;;;;AAgBD;;AAED;AACE,4BAAC,SAAD,aAAW,YAAUnD,YAAY,CAACC,IAAlC,IAA4CqB,IAA5C,EAAsDS,SAAtD;AACGF,QAAAA,eADH;AAEGqB,QAAAA,KAFH;AAGGpB,QAAAA,gBAHH;AAIGH,QAAAA,KAJH,CADF;;;AAQD,KA/IH;;AAiJUmB,IAAAA,WAjJV,GAiJwB,YAAM;AAC1B,UAAI,CAAC,MAAKtC,KAAL,CAAWC,QAAhB,EAA0B;AACxB;AACA;AACA1B,QAAAA,YAAY,CAAC2E,qBAAb,oBAAA3E,YAAY,CAAC2E,qBAAb,CAAqC,YAAM;AACzC,cAAI1E,WAAW,CAAC2E,YAAhB,EAA8B;AAC5B,kBAAKC,QAAL,CAAc,EAAEtD,YAAY,EAAE,IAAhB,EAAd;AACD;AACF,SAJD;AAKD;AACF,KA3JH;;AA6JU0C,IAAAA,UA7JV,GA6JuB,YAAM;AACzB,YAAKY,QAAL,CAAc,EAAEtD,YAAY,EAAE,KAAhB,EAAd;AACD,KA/JH;;AAiKUsC,IAAAA,WAjKV,GAiKwB,UAACiB,KAAD,EAAgD;AACpE,wBAAuC,MAAKrD,KAA5C,CAAQmC,OAAR,eAAQA,OAAR,CAAiBlC,QAAjB,eAAiBA,QAAjB,CAA2BK,OAA3B,eAA2BA,OAA3B;AACA,UAAMJ,IAAI,GAAG,MAAKP,QAAL,GAAgBO,IAA7B;AACA,UAAI,CAACA,IAAL,EAAW;AACTmD,QAAAA,KAAK,CAACC,cAAN;AACD;AACD,UAAInB,OAAO,IAAI,CAAClC,QAAZ,IAAwB,CAACK,OAA7B,EAAsC;AACpC6B,QAAAA,OAAO,CAACkB,KAAD,CAAP;AACD;AACF,KA1KH,kDA+BSE,MA/BT,GA+BE,kBAA6B,mBAC3B,oBACE,oBAAC,0BAAD,CAA4B,QAA5B,QACG,UAACC,KAAD,EAAW,CACV,MAAI,CAACC,gBAAL,GAAwBvE,0BAA0B,CAACsE,KAAD,CAA1B,CAAkCC,gBAA1D,CACA,oBACE,oBAAC,eAAD,QACG,UAACvC,OAAD,EAAa,CACZ,MAAI,CAACA,OAAL,GAAeA,OAAf,CACA,oBACE,oBAAC,aAAD,QACG,UAACF,KAAD,EAAW,CACV,MAAI,CAACA,KAAL,GAAa,MAAI,CAAChB,KAAL,CAAWgB,KAAX,GAAmBlC,YAAY,CAAC4E,MAAb,CAAoB,MAAI,CAAC1D,KAAL,CAAWgB,KAA/B,EAA+CA,KAA/C,CAAnB,GAA2EA,KAAxF,CACA,oBACE,oBAAC,aAAD,aAAe,WAAW,EAAE,MAAI,CAAC2C,WAAjC,IAAkD,MAAI,CAAChE,QAAL,EAAlD,GACG,MAAI,CAACI,UADR,CADF,CAKD,CARH,CADF,CAYD,CAfH,CADF,CAmBD,CAtBH,CADF,CA0BD,CA1DH;;AA4KUkC,EAAAA,gBA5KV,GA4KE,0BAAyBpB,OAAzB,EAA2CZ,QAA3C,EAA8Dc,YAA9D,EAA6F;AAC3F,yBAAgB,KAAKpB,QAAL,EAAhB,CAAQU,GAAR,kBAAQA,GAAR;AACA,QAAMuD,cAAc,GAAGC,QAAQ,CAAC,KAAK7C,KAAL,CAAW8C,yBAAZ,CAAR,GAAiD,CAAxE;AACA,QAAM1C,SAAS,GAAGP,OAAO,IAAI,CAACZ,QAA9B;AACA,QAAMgB,MAAM,GAAG5B,SAAS,CAAC,KAAK6B,OAAN,CAAxB;;AAEA,WAAO,CAAC0C,cAAD;AACH,SAAK1C,OAAL,CAAaO,EAAb;AACER,IAAAA,MAAM,CAACxB,IAAP,CAAY,KAAKuB,KAAjB,CADF;AAEEI,IAAAA,SAAS,IAAIH,MAAM,CAAC8C,KAAP,CAAa,KAAK/C,KAAlB,CAFf;AAGEf,IAAAA,QAAQ,IAAIgB,MAAM,CAAChB,QAAP,CAAgB,KAAKe,KAArB,CAHd;AAIEX,IAAAA,GAAG,KAAK,QAAR,IAAoBQ,OAApB,IAA+BI,MAAM,CAAC+C,cAAP,CAAsB,KAAKhD,KAA3B,CAJjC,CADG;;AAOH,SAAKE,OAAL,CAAaO,EAAb;AACER,IAAAA,MAAM,CAACgD,QAAP,EADF;AAEEhE,IAAAA,QAAQ,IAAIgB,MAAM,CAAChB,QAAP,CAAgB,KAAKe,KAArB,CAFd;AAGEf,IAAAA,QAAQ,IAAIc,YAAZ,IAA4BhC,WAAW,CAAC,KAAKiC,KAAN,CAAvC,IAAuDC,MAAM,CAACiD,mBAAP,CAA2B,KAAKlD,KAAhC,CAHzD;AAIEI,IAAAA,SAAS,IAAIf,GAAG,KAAK,SAArB,IAAkCY,MAAM,CAACkD,SAAP,CAAiB,KAAKnD,KAAtB,CAJpC;AAKEI,IAAAA,SAAS,IAAIf,GAAG,KAAK,SAArB,IAAkCY,MAAM,CAACmD,gBAAP,CAAwB,KAAKpD,KAA7B,CALpC;AAMEI,IAAAA,SAAS,IAAIf,GAAG,KAAK,QAArB,IAAiCY,MAAM,CAACoD,eAAP,CAAuB,KAAKrD,KAA5B,CANnC;AAOEI,IAAAA,SAAS,IAAIf,GAAG,KAAK,QAArB,IAAiCY,MAAM,CAACqD,eAAP,CAAuB,KAAKtD,KAA5B,CAPnC;AAQEI,IAAAA,SAAS,IAAIL,YAAb,IAA6B,KAAK0C,gBAAlC,IAAsDxC,MAAM,CAACsD,SAAP,CAAiB,KAAKvD,KAAtB,CARxD,CAPJ;;AAiBD,GAnMH,eAA0B3C,KAAK,CAACsC,SAAhC,WACgB6D,mBADhB,GACsC,MADtC,UAEgBC,WAFhB,GAE8B,MAF9B,UAIgBC,SAJhB,GAI4B,EACxBzE,QAAQ,EAAE3B,SAAS,CAACqG,IADI,EAGxBzE,IAAI,EAAE5B,SAAS,CAACsG,MAHQ,EAKxBzE,IAAI,EAAE7B,SAAS,CAACuG,IALQ,EAOxBxE,GAAG,EAAE/B,SAAS,CAACwG,KAAV,CAAgB,CAAC,SAAD,EAAY,SAAZ,EAAuB,QAAvB,EAAiC,QAAjC,CAAhB,CAPmB,EAJ5B,UAcgBlF,YAdhB,GAc6C,EACzCM,IAAI,EAAE,EADmC,EAEzCG,GAAG,EAAE,SAFoC,EAGzCO,EAAE,EAAE,GAHqC,EAd7C","sourcesContent":["import React, { AriaAttributes } from 'react';\nimport PropTypes from 'prop-types';\nimport { globalObject } from '@skbkontur/global-object';\nimport type { Emotion } from '@emotion/css/create-instance';\n\nimport { Override } from '../../typings/utility-types';\nimport { keyListener } from '../../lib/events/keyListener';\nimport { Theme, ThemeIn } from '../../lib/theming/Theme';\nimport { isExternalLink } from '../../lib/utils';\nimport { CommonProps, CommonWrapper, CommonWrapperRestProps } from '../../internal/CommonWrapper';\nimport { EmotionConsumer } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { createPropsGetter, DefaultizedProps } from '../../lib/createPropsGetter';\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { isDarkTheme, isTheme2022 } from '../../lib/theming/ThemeHelpers';\nimport { isIE11 } from '../../lib/client';\nimport { getFullReactUIFlagsContext, ReactUIFeatureFlagsContext } from '../../lib/featureFlagsContext';\nimport { ThemeConsumer } from '../../lib/theming/ThemeContext';\n\nimport { getStyles, globalClasses } from './Link.styles';\nimport { LinkIcon } from './LinkIcon';\n\nexport interface LinkProps\n  extends Pick<AriaAttributes, 'aria-label'>,\n    CommonProps,\n    Override<\n      React.AnchorHTMLAttributes<HTMLAnchorElement>,\n      {\n        /**\n         * Отключенное состояние.\n         */\n        disabled?: boolean;\n        /**\n         * HTML-атрибут `href`.\n         */\n        href?: string;\n        /**\n         * Добавляет ссылке иконку слева.\n         */\n        icon?: React.ReactElement;\n        /**\n         * Добавляет ссылке иконку справа.\n         */\n        rightIcon?: React.ReactElement;\n        /**\n         * Тема ссылки.\n         */\n        use?: 'default' | 'success' | 'danger' | 'grayed';\n        /**\n         * @ignore\n         */\n        _button?: boolean;\n        /**\n         * @ignore\n         */\n        _buttonOpened?: boolean;\n        /**\n         * HTML-атрибут `tabindex`.\n         */\n        tabIndex?: number;\n        /**\n         * Переводит ссылку в состояние загрузки.\n         */\n        loading?: boolean;\n        /**\n         * HTML-событие `onclick`.\n         */\n        onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;\n\n        /**\n         * Обычный объект с переменными темы.\n         * Он будет объединён с темой из контекста.\n         */\n        theme?: ThemeIn;\n        /**\n         * Компонент, используемый в качестве корневого узла.\n         * @ignore\n         */\n        as?: React.ElementType | keyof React.ReactHTML;\n        /**\n         * @ignore\n         */\n        focused?: boolean;\n      }\n    > {}\n\nexport interface LinkState {\n  focusedByTab: boolean;\n}\n\nexport const LinkDataTids = {\n  root: 'Link__root',\n} as const;\n\ntype DefaultProps = Required<Pick<LinkProps, 'href' | 'use' | 'as'>>;\ntype DefaultizedLinkProps = DefaultizedProps<LinkProps, DefaultProps>;\n\n/**\n * Элемент ссылки из HTML.\n */\n@rootNode\nexport class Link extends React.Component<LinkProps, LinkState> {\n  public static __KONTUR_REACT_UI__ = 'Link';\n  public static displayName = 'Link';\n\n  public static propTypes = {\n    disabled: PropTypes.bool,\n\n    href: PropTypes.string,\n\n    icon: PropTypes.node,\n\n    use: PropTypes.oneOf(['default', 'success', 'danger', 'grayed']),\n  };\n\n  public static defaultProps: DefaultProps = {\n    href: '',\n    use: 'default',\n    as: 'a',\n  };\n\n  private getProps = createPropsGetter(Link.defaultProps);\n\n  public state: LinkState = {\n    focusedByTab: false,\n  };\n\n  private theme!: Theme;\n  private emotion!: Emotion;\n  private setRootNode!: TSetRootNode;\n  private linkFocusOutline?: boolean;\n\n  public render(): JSX.Element {\n    return (\n      <ReactUIFeatureFlagsContext.Consumer>\n        {(flags) => {\n          this.linkFocusOutline = getFullReactUIFlagsContext(flags).linkFocusOutline;\n          return (\n            <EmotionConsumer>\n              {(emotion) => {\n                this.emotion = emotion;\n                return (\n                  <ThemeConsumer>\n                    {(theme) => {\n                      this.theme = this.props.theme ? ThemeFactory.create(this.props.theme as Theme, theme) : theme;\n                      return (\n                        <CommonWrapper rootNodeRef={this.setRootNode} {...this.getProps()}>\n                          {this.renderMain}\n                        </CommonWrapper>\n                      );\n                    }}\n                  </ThemeConsumer>\n                );\n              }}\n            </EmotionConsumer>\n          );\n        }}\n      </ReactUIFeatureFlagsContext.Consumer>\n    );\n  }\n\n  private renderMain = (props: CommonWrapperRestProps<DefaultizedLinkProps>) => {\n    const {\n      disabled,\n      href,\n      icon,\n      rightIcon,\n      use,\n      loading,\n      _button,\n      _buttonOpened,\n      rel: relOrigin,\n      as: Component,\n      focused = false,\n      ...rest\n    } = props;\n    const _isTheme2022 = isTheme2022(this.theme);\n    const styles = getStyles(this.emotion);\n\n    let arrow = null;\n    if (_button) {\n      arrow = <span className={styles.arrow()} />;\n    }\n\n    let rel = relOrigin;\n    if (typeof rel === 'undefined' && href) {\n      rel = `noopener${isExternalLink(href) ? ' noreferrer' : ''}`;\n    }\n\n    const isFocused = !disabled && (this.state.focusedByTab || focused);\n\n    const leftIconElement = icon && <LinkIcon icon={icon} loading={loading} position=\"left\" />;\n    const rightIconElement = rightIcon && (\n      <LinkIcon hasBothIcons={!!icon && !!rightIcon} icon={rightIcon} loading={loading} position=\"right\" />\n    );\n\n    const linkProps = {\n      className: this.emotion.cx(\n        styles.useRoot(),\n        use === 'default' && styles.useDefault(this.theme),\n        use === 'success' && styles.useSuccess(this.theme),\n        use === 'danger' && styles.useDanger(this.theme),\n        use === 'grayed' && styles.useGrayed(this.theme),\n        !!_button && styles.button(this.theme),\n        !!_buttonOpened && styles.buttonOpened(this.theme),\n        this.getLinkClassName(isFocused, Boolean(disabled || loading), _isTheme2022),\n      ),\n      href,\n      rel,\n      onClick: this.handleClick,\n      onFocus: this.handleFocus,\n      onBlur: this.handleBlur,\n      tabIndex: disabled || loading ? -1 : this.props.tabIndex,\n    };\n\n    let child = this.props.children;\n    if (_isTheme2022) {\n      // lineTextWrapper нужен для реализации transition у подчеркивания\n      child = (\n        <span\n          className={this.emotion.cx(globalClasses.textWrapper, styles.lineTextWrapper(this.theme), {\n            [styles.lineTextWrapperFocused(this.theme)]: isFocused,\n          })}\n        >\n          <span\n            className={this.emotion.cx(globalClasses.text, {\n              [styles.lineText(this.theme)]: !isIE11,\n              [styles.lineTextIE11(this.theme)]: isIE11,\n            })}\n          >\n            {this.props.children}\n          </span>\n        </span>\n      );\n    }\n\n    return (\n      <Component data-tid={LinkDataTids.root} {...rest} {...linkProps}>\n        {leftIconElement}\n        {child}\n        {rightIconElement}\n        {arrow}\n      </Component>\n    );\n  };\n\n  private handleFocus = () => {\n    if (!this.props.disabled) {\n      // focus event fires before keyDown eventlistener\n      // so we should check tabPressed in async way\n      globalObject.requestAnimationFrame?.(() => {\n        if (keyListener.isTabPressed) {\n          this.setState({ focusedByTab: true });\n        }\n      });\n    }\n  };\n\n  private handleBlur = () => {\n    this.setState({ focusedByTab: false });\n  };\n\n  private handleClick = (event: React.MouseEvent<HTMLAnchorElement>) => {\n    const { onClick, disabled, loading } = this.props;\n    const href = this.getProps().href;\n    if (!href) {\n      event.preventDefault();\n    }\n    if (onClick && !disabled && !loading) {\n      onClick(event);\n    }\n  };\n\n  private getLinkClassName(focused: boolean, disabled: boolean, _isTheme2022: boolean): string {\n    const { use } = this.getProps();\n    const isBorderBottom = parseInt(this.theme.linkLineBorderBottomWidth) > 0;\n    const isFocused = focused && !disabled;\n    const styles = getStyles(this.emotion);\n\n    return !isBorderBottom\n      ? this.emotion.cx(\n          styles.root(this.theme),\n          isFocused && styles.focus(this.theme),\n          disabled && styles.disabled(this.theme),\n          use === 'grayed' && focused && styles.useGrayedFocus(this.theme),\n        )\n      : this.emotion.cx(\n          styles.lineRoot(),\n          disabled && styles.disabled(this.theme),\n          disabled && _isTheme2022 && isDarkTheme(this.theme) && styles.disabledDark22Theme(this.theme),\n          isFocused && use === 'default' && styles.lineFocus(this.theme),\n          isFocused && use === 'success' && styles.lineFocusSuccess(this.theme),\n          isFocused && use === 'danger' && styles.lineFocusDanger(this.theme),\n          isFocused && use === 'grayed' && styles.lineFocusGrayed(this.theme),\n          isFocused && _isTheme2022 && this.linkFocusOutline && styles.focus2022(this.theme),\n        );\n  }\n}\n"]}