@skbkontur/react-ui 0.0.0-0b8a8f7a39 → 0.0.0-151f385a39

package/components/Kebab/Kebab.d.ts

@@ -1,36 +1,33 @@
 import React from 'react';
+import { PopupMenuProps } from '../../internal/PopupMenu';
 import { Nullable } from '../../typings/utility-types';
-import { PopupPosition } from '../../internal/Popup';
+import { PopupPositionsType } from '../../internal/Popup';
 import { CommonProps } from '../../internal/CommonWrapper';
-export interface KebabProps extends CommonProps {
+export interface KebabProps extends CommonProps, Pick<PopupMenuProps, 'onOpen' | 'onClose'> {
     disabled?: boolean;
-    /**
-     * Функция вызываемая при закрытии выпадашки
-     * @default () => undefined
-     */
-    onClose: () => void;
-    /**
-     * Функция вызываемая при открытии выпадашки
-     * @default () => undefined
-     */
-    onOpen: () => void;
     size: 'small' | 'medium' | 'large';
     /**
-     * Список позиций доступных для расположения выпадашки
-     * Если во всех позициях выпадашка вылезает за пределы `viewport`, будет использоваться первая из этого списка
+     * Список позиций доступных для расположения выпадашки.
+     *
+     * Если во всех позициях выпадашка вылезает за пределы `viewport`, будет использована первая из этого списка.
+     *
+     * **Возможные значения**: `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: PopupPosition[];
+    positions: PopupPositionsType[];
     menuMaxHeight?: number | string;
     /**
      * Не показывать анимацию
      */
     disableAnimations: boolean;
+    /**
+     * Кастомная иконка
+     */
+    icon?: React.ReactNode;
 }
 export interface KebabState {
     anchor: Nullable<HTMLElement>;
     focusedByTab: boolean;
-    opened: boolean;
 }
 export declare class Kebab extends React.Component<KebabProps, KebabState> {
     static __KONTUR_REACT_UI__: string;
@@ -41,13 +38,14 @@ export declare class Kebab extends React.Component<KebabProps, KebabState> {
         positions: string[];
         size: string;
         disableAnimations: boolean;
+        icon: JSX.Element;
     };
     state: {
-        opened: boolean;
         focusedByTab: boolean;
         anchor: null;
     };
     private theme;
+    private setRootNode;
     private listener;
     componentDidMount(): void;
     componentWillUnmount(): void;

package/components/Kebab/Kebab.md

@@ -1,45 +1,278 @@
-```jsx harmony
-import EditIcon from '@skbkontur/react-icons/Edit';
-import TrashIcon from '@skbkontur/react-icons/Trash';
-import { Gapped, MenuItem } from '@skbkontur/react-ui';
-
-let style = {
-  alignItems: 'center',
-  background: 'white',
-  border: '1px solid #dfdede',
-  color: '#333',
-  display: 'flex',
-  justifyContent: 'space-between',
-  padding: '0 20px',
-  width: 250,
-};
-
-let Card = ({ name, post }) => (
-  <div style={style}>
-    <div>
-      <h3>{name}</h3>
-      <p style={{ color: 'gray' }}>{post}</p>
-    </div>
-
-    <Kebab size="large">
-      <MenuItem icon={<EditIcon />} onClick={() => Toast.push('Nope')}>
-        Редактировать
-      </MenuItem>
-      <MenuItem icon={<TrashIcon />} onClick={() => Toast.push('Nope')}>
-        Удалить
-      </MenuItem>
-    </Kebab>
-  </div>
-);
-
-<Gapped gap={-1} wrap>
-  <Gapped gap={-1}>
-    <Card name="Баранова Анастасия" post="SEO GazPro" />
-    <Card name="Слуцкий Антон" post="Junior Front-Back Developer" />
-  </Gapped>
-  <Gapped gap={-1}>
-    <Card name="Иванов Иван" post="Head Ivan Co" />
-    <Card name="Сашка Егоров" post="KungFu Master" />
-  </Gapped>
-</Gapped>;
-```
+Базовый пример кебаб-меню.
+
+```jsx harmony
+import EditIcon from '@skbkontur/react-icons/Edit';
+import TrashIcon from '@skbkontur/react-icons/Trash';
+import { Gapped, MenuItem, Toast } from '@skbkontur/react-ui';
+
+let style = {
+  alignItems: 'center',
+  border: '1px solid #dfdede',
+  display: 'flex',
+  justifyContent: 'space-between',
+  padding: '0 20px',
+  width: 250,
+};
+
+let Card = ({ name, post }) => (
+  <div style={style}>
+    <div>
+      <h3>{name}</h3>
+      <p style={{ color: 'gray' }}>{post}</p>
+    </div>
+
+    <Kebab size="large">
+      <MenuItem icon={<EditIcon />} onClick={() => Toast.push('Отредактировано')}>
+        Редактировать
+      </MenuItem>
+      <MenuItem icon={<TrashIcon />} onClick={() => Toast.push('Удалено')}>
+        Удалить
+      </MenuItem>
+    </Kebab>
+  </div>
+);
+
+<Gapped gap={-1} wrap>
+  <Gapped gap={-1}>
+    <Card name="Баранова Анастасия" post="SEO GazPro" />
+    <Card name="Слуцкий Антон" post="Junior Front-Back Developer" />
+  </Gapped>
+  <Gapped gap={-1}>
+    <Card name="Иванов Иван" post="Head Ivan Co" />
+    <Card name="Сашка Егоров" post="KungFu Master" />
+  </Gapped>
+</Gapped>;
+```
+
+Различные размеры кебаб-меню.
+
+```jsx harmony
+import EditIcon from '@skbkontur/react-icons/Edit';
+import TrashIcon from '@skbkontur/react-icons/Trash';
+import { Gapped, MenuItem, Toast} from '@skbkontur/react-ui';
+
+let style = {
+  alignItems: 'center',
+  border: '1px solid #dfdede',
+  display: 'flex',
+  justifyContent: 'space-between',
+  padding: '0 20px',
+  width: 230,
+};
+
+let Card = ({ title, size }) => (
+  <div style={style}>
+    <div>
+      <h3>{title}</h3>
+    </div>
+
+    <Kebab size={size}>
+      <MenuItem icon={<EditIcon />} onClick={() => Toast.push('Отредактировано')}>
+        Редактировать
+      </MenuItem>
+      <MenuItem icon={<TrashIcon />} onClick={() => Toast.push('Удалено')}>
+        Удалить
+      </MenuItem>
+    </Kebab>
+  </div>
+);
+
+<Gapped>
+  <Card title="Маленький кебаб" size="small" />
+  <Card title="Средний кебаб" size="medium" />
+  <Card title="Большой кебаб" size="large" />
+</Gapped>
+```
+
+Кебаб-меню с выпадашкой слева.
+
+```jsx harmony
+import EditIcon from '@skbkontur/react-icons/Edit';
+import TrashIcon from '@skbkontur/react-icons/Trash';
+import { MenuItem, Toast } from '@skbkontur/react-ui';
+
+let style = {
+  alignItems: 'center',
+  border: '1px solid #dfdede',
+  display: 'flex',
+  justifyContent: 'space-between',
+  padding: '0 20px',
+  width: 250,
+};
+
+
+let Card = ({ title }) => (
+  <div style={style}>
+    <div>
+      <h3>{title}</h3>
+    </div>
+
+    <Kebab positions={['left middle']} size="large">
+      <MenuItem icon={<EditIcon />} onClick={() => Toast.push('Отредактировано')}>
+        Редактировать
+      </MenuItem>
+      <MenuItem icon={<TrashIcon />} onClick={() => Toast.push('Удалено')}>
+        Удалить
+      </MenuItem>
+    </Kebab>
+  </div>
+);
+
+<Card title="С выпадашкой слева" />
+```
+
+С кастомным действием при открытии.
+
+```jsx harmony
+import EditIcon from '@skbkontur/react-icons/Edit';
+import TrashIcon from '@skbkontur/react-icons/Trash';
+import { MenuItem, Toast } from '@skbkontur/react-ui';
+
+let style = {
+  alignItems: 'center',
+  border: '1px solid #dfdede',
+  display: 'flex',
+  justifyContent: 'space-between',
+  padding: '0 20px',
+  width: 250,
+};
+
+let Card = ({ title }) => (
+  <div style={style}>
+    <div>
+      <h3>{title}</h3>
+    </div>
+
+    <Kebab
+      onOpen={() => Toast.push('Кебаб-меню открылось!')}
+      size="large"
+      >
+      <MenuItem icon={<EditIcon />} onClick={() => Toast.push('Отредактировано')}>
+        Редактировать
+      </MenuItem>
+      <MenuItem icon={<TrashIcon />} onClick={() => Toast.push('Удалено')}>
+        Удалить
+      </MenuItem>
+    </Kebab>
+  </div>
+);
+
+<Card title="С кастомным действием" />
+```
+
+Отключенное кебаб-меню.
+
+```jsx harmony
+import EditIcon from '@skbkontur/react-icons/Edit';
+import TrashIcon from '@skbkontur/react-icons/Trash';
+import { MenuItem, Toast } from '@skbkontur/react-ui';
+
+let style = {
+  alignItems: 'center',
+  border: '1px solid #dfdede',
+  display: 'flex',
+  justifyContent: 'space-between',
+  padding: '0 20px',
+  width: 250,
+};
+
+let Card = ({ title }) => (
+  <div style={style}>
+    <div>
+      <h3>{title}</h3>
+    </div>
+
+    <Kebab disabled size="large">
+      <MenuItem icon={<EditIcon />} onClick={() => Toast.push('Отредактировано')}>
+        Редактировать
+      </MenuItem>
+      <MenuItem icon={<TrashIcon />} onClick={() => Toast.push('Удалено')}>
+        Удалить
+      </MenuItem>
+    </Kebab>
+  </div>
+);
+
+<Card title="Не нажимается :(" />
+```
+
+Кебаб-меню с отключенной анимацией.
+
+```jsx harmony
+import EditIcon from '@skbkontur/react-icons/Edit';
+import TrashIcon from '@skbkontur/react-icons/Trash';
+import { MenuItem, Toast } from '@skbkontur/react-ui';
+
+let style = {
+  alignItems: 'center',
+  border: '1px solid #dfdede',
+  display: 'flex',
+  justifyContent: 'space-between',
+  padding: '0 20px',
+  width: 250,
+};
+
+let Card = ({ title }) => (
+  <div style={style}>
+    <div>
+      <h3>{title}</h3>
+    </div>
+
+    <Kebab disableAnimations size="large">
+      <MenuItem icon={<EditIcon />} onClick={() => Toast.push('Отредактировано')}>
+        Редактировать
+      </MenuItem>
+      <MenuItem icon={<TrashIcon />} onClick={() => Toast.push('Удалено')}>
+        Удалить
+      </MenuItem>
+    </Kebab>
+  </div>
+);
+
+<Card title="Без анимации" />
+```
+
+Кебаб-меню с заданной высотой.
+
+```jsx harmony
+import EditIcon from '@skbkontur/react-icons/Edit';
+import TrashIcon from '@skbkontur/react-icons/Trash';
+import { MenuItem, Toast } from '@skbkontur/react-ui';
+
+let style = {
+  alignItems: 'center',
+  border: '1px solid #dfdede',
+  display: 'flex',
+  justifyContent: 'space-between',
+  padding: '0 20px',
+  width: 250,
+};
+
+let Card = ({ title }) => (
+  <div style={style}>
+    <div>
+      <h3>{title}</h3>
+    </div>
+
+    <Kebab
+      menuMaxHeight="100px"
+      size="large"
+      >
+      <MenuItem>
+        Действие
+      </MenuItem>
+      <MenuItem>
+        И ещё одно
+      </MenuItem>
+      <MenuItem>
+        Ещё действие
+      </MenuItem>
+      <MenuItem>
+        И последнее действие
+      </MenuItem>
+    </Kebab>
+  </div>
+);
+
+<Card title="С заданной высотой" />
+```

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

@@ -1,32 +1,34 @@
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
 
-import { css, cssName, memoizeStyle } from "../../../lib/theming/Emotion";
-var styles = {
+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      ", "& {\n        background: ", ";\n        border-color: ", ";\n      }\n    "])), cssName(styles.kebab(t)), t.kebabBackgroundHover, t.borderColorFocus);
+    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      ", "& {\n        background: ", ";\n        cursor: default;\n      }\n    "])), cssName(styles.kebab(t)), t.kebabBackgroundHover);
+    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      background: ", " !important; // override kebab:hover style\n      cursor: default;\n    "])), t.kebabBackgroundHover);
   },
-  disabled: function disabled(t) {
-    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      ", "& {\n        cursor: default;\n\n        &:hover {\n          background: none;\n        }\n      }\n    "])), cssName(styles.kebab(t)));
+  disabled: function disabled() {
+    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      cursor: default;\n\n      &:hover {\n        background: none;\n      }\n    "])));
   },
-  iconsmall: function iconsmall(t) {
-    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      ", " & {\n        margin-top: 1px;\n        margin-left: 0.8124px;\n      }\n    "])), cssName(styles.kebab(t)));
+  icon: function icon() {
+    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      color: #757575;\n      line-height: 1;\n    "])));
   },
-  iconmedium: function iconmedium(t) {
-    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      ", " & {\n        margin-top: -2px;\n        margin-left: 0.5px;\n      }\n    "])), cssName(styles.kebab(t)));
+  iconsmall: function iconsmall() {
+    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      margin-top: 2px;\n      font-size: 14px;\n    "])));
   },
-  iconlarge: function iconlarge(t) {
-    return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      ", " & {\n        margin-top: -4px;\n        margin-left: 0.5px;\n      }\n    "])), cssName(styles.kebab(t)));
+  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(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n      overflow: hidden;\n      border-radius: ", ";\n    "])), t.popupBorderRadius);
+    return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n      overflow: hidden;\n      border-radius: ", ";\n    "])), t.popupBorderRadius);
   }
-};
-export var jsStyles = memoizeStyle(styles);
+});

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

@@ -1 +1 @@
-{"version":3,"sources":["Kebab.styles.ts"],"names":["css","cssName","memoizeStyle","styles","kebab","t","kebabBorder","kebabBorderRadius","kebabBackground","kebabBackgroundHover","focused","borderColorFocus","opened","disabled","iconsmall","iconmedium","iconlarge","menu","popupBorderRadius","jsStyles"],"mappings":"kPAAA,SAASA,GAAT,EAAcC,OAAd,EAAuBC,YAAvB,QAA2C,2BAA3C;;;AAGA,IAAMC,MAAM,GAAG;AACbC,EAAAA,KADa,iBACPC,CADO,EACG;AACd,WAAOL,GAAP;;;AAGYK,IAAAA,CAAC,CAACC,WAHd;;AAKmBD,IAAAA,CAAC,CAACE,iBALrB;;;;;;;AAYgBF,IAAAA,CAAC,CAACG,eAZlB;;;AAekBH,IAAAA,CAAC,CAACI,oBAfpB;;;AAkBD,GApBY;;AAsBbC,EAAAA,OAtBa,mBAsBLL,CAtBK,EAsBK;AAChB,WAAOL,GAAP;AACIC,IAAAA,OAAO,CAACE,MAAM,CAACC,KAAP,CAAaC,CAAb,CAAD,CADX;AAEkBA,IAAAA,CAAC,CAACI,oBAFpB;AAGoBJ,IAAAA,CAAC,CAACM,gBAHtB;;;AAMD,GA7BY;;AA+BbC,EAAAA,MA/Ba,kBA+BNP,CA/BM,EA+BI;AACf,WAAOL,GAAP;AACIC,IAAAA,OAAO,CAACE,MAAM,CAACC,KAAP,CAAaC,CAAb,CAAD,CADX;AAEkBA,IAAAA,CAAC,CAACI,oBAFpB;;;;AAMD,GAtCY;;AAwCbI,EAAAA,QAxCa,oBAwCJR,CAxCI,EAwCM;AACjB,WAAOL,GAAP;AACIC,IAAAA,OAAO,CAACE,MAAM,CAACC,KAAP,CAAaC,CAAb,CAAD,CADX;;;;;;;;AASD,GAlDY;;AAoDbS,EAAAA,SApDa,qBAoDHT,CApDG,EAoDO;AAClB,WAAOL,GAAP;AACIC,IAAAA,OAAO,CAACE,MAAM,CAACC,KAAP,CAAaC,CAAb,CAAD,CADX;;;;;AAMD,GA3DY;;AA6DbU,EAAAA,UA7Da,sBA6DFV,CA7DE,EA6DQ;AACnB,WAAOL,GAAP;AACIC,IAAAA,OAAO,CAACE,MAAM,CAACC,KAAP,CAAaC,CAAb,CAAD,CADX;;;;;AAMD,GApEY;;AAsEbW,EAAAA,SAtEa,qBAsEHX,CAtEG,EAsEO;AAClB,WAAOL,GAAP;AACIC,IAAAA,OAAO,CAACE,MAAM,CAACC,KAAP,CAAaC,CAAb,CAAD,CADX;;;;;AAMD,GA7EY;;AA+EbY,EAAAA,IA/Ea,gBA+ERZ,CA/EQ,EA+EE;AACb,WAAOL,GAAP;;AAEmBK,IAAAA,CAAC,CAACa,iBAFrB;;AAID,GApFY,EAAf;;;AAuFA,OAAO,IAAMC,QAAQ,GAAGjB,YAAY,CAACC,MAAD,CAA7B","sourcesContent":["import { css, cssName, memoizeStyle } from '../../lib/theming/Emotion';\r\nimport { Theme } from '../../lib/theming/Theme';\r\n\r\nconst styles = {\r\n  kebab(t: Theme) {\r\n    return css`\r\n      display: inline-block;\r\n      text-align: center;\r\n      border: ${t.kebabBorder};\r\n      box-sizing: border-box;\r\n      border-radius: ${t.kebabBorderRadius};\r\n      user-select: none;\r\n      cursor: pointer;\r\n      outline: 0;\r\n      transition: background 0.12s ease-out;\r\n      width: 26px;\r\n      height: 26px;\r\n      background: ${t.kebabBackground};\r\n\r\n      &:hover {\r\n        background: ${t.kebabBackgroundHover};\r\n      }\r\n    `;\r\n  },\r\n\r\n  focused(t: Theme) {\r\n    return css`\r\n      ${cssName(styles.kebab(t))}& {\r\n        background: ${t.kebabBackgroundHover};\r\n        border-color: ${t.borderColorFocus};\r\n      }\r\n    `;\r\n  },\r\n\r\n  opened(t: Theme) {\r\n    return css`\r\n      ${cssName(styles.kebab(t))}& {\r\n        background: ${t.kebabBackgroundHover};\r\n        cursor: default;\r\n      }\r\n    `;\r\n  },\r\n\r\n  disabled(t: Theme) {\r\n    return css`\r\n      ${cssName(styles.kebab(t))}& {\r\n        cursor: default;\r\n\r\n        &:hover {\r\n          background: none;\r\n        }\r\n      }\r\n    `;\r\n  },\r\n\r\n  iconsmall(t: Theme) {\r\n    return css`\r\n      ${cssName(styles.kebab(t))} & {\r\n        margin-top: 1px;\r\n        margin-left: 0.8124px;\r\n      }\r\n    `;\r\n  },\r\n\r\n  iconmedium(t: Theme) {\r\n    return css`\r\n      ${cssName(styles.kebab(t))} & {\r\n        margin-top: -2px;\r\n        margin-left: 0.5px;\r\n      }\r\n    `;\r\n  },\r\n\r\n  iconlarge(t: Theme) {\r\n    return css`\r\n      ${cssName(styles.kebab(t))} & {\r\n        margin-top: -4px;\r\n        margin-left: 0.5px;\r\n      }\r\n    `;\r\n  },\r\n\r\n  menu(t: Theme) {\r\n    return css`\r\n      overflow: hidden;\r\n      border-radius: ${t.popupBorderRadius};\r\n    `;\r\n  },\r\n};\r\n\r\nexport const jsStyles = memoizeStyle(styles);\r\n"]}
+{"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"]}

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

@@ -1,11 +1,12 @@
 import { Theme } from '../../lib/theming/Theme';
-export declare const jsStyles: {
+export declare const styles: {
     kebab(t: Theme): string;
     focused(t: Theme): string;
     opened(t: Theme): string;
-    disabled(t: Theme): string;
-    iconsmall(t: Theme): string;
-    iconmedium(t: Theme): string;
-    iconlarge(t: Theme): string;
+    disabled(): string;
+    icon(): string;
+    iconsmall(): string;
+    iconmedium(): string;
+    iconlarge(): string;
     menu(t: Theme): string;
 };

package/components/Kebab/__stories__/Kebab.items/Kebab.items.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Kebab.items.tsx"],"names":["defaultItemsList","text","action","manyItemsList"],"mappings":"AAAA,OAAO,IAAMA,gBAAgB,GAAG;AAC9B;AACEC,EAAAA,IAAI,EAAE,OADR;AAEEC,EAAAA,MAAM,EAAE,OAFV,EAD8B;;AAK9B;AACED,EAAAA,IAAI,EAAE,QADR;AAEEC,EAAAA,MAAM,EAAE,QAFV,EAL8B;;AAS9B;AACED,EAAAA,IAAI,EAAE,KADR;AAEEC,EAAAA,MAAM,EAAE,KAFV,EAT8B,CAAzB;;;;AAeP,OAAO,IAAMC,aAAa,GAAG;AAC3B;AACEF,EAAAA,IAAI,EAAE,MADR;AAEEC,EAAAA,MAAM,EAAE,MAFV,EAD2B;;AAK3B;AACED,EAAAA,IAAI,EAAE,QADR;AAEEC,EAAAA,MAAM,EAAE,QAFV,EAL2B;;AAS3B;AACED,EAAAA,IAAI,EAAE,aADR;AAEEC,EAAAA,MAAM,EAAE,aAFV,EAT2B;;AAa3B;AACED,EAAAA,IAAI,EAAE,OADR;AAEEC,EAAAA,MAAM,EAAE,OAFV,EAb2B;;AAiB3B;AACED,EAAAA,IAAI,EAAE,UADR;AAEEC,EAAAA,MAAM,EAAE,UAFV,EAjB2B;;AAqB3B;AACED,EAAAA,IAAI,EAAE,SADR;AAEEC,EAAAA,MAAM,EAAE,SAFV,EArB2B;;AAyB3B;AACED,EAAAA,IAAI,EAAE,MADR;AAEEC,EAAAA,MAAM,EAAE,MAFV,EAzB2B;;AA6B3B;AACED,EAAAA,IAAI,EAAE,aADR;AAEEC,EAAAA,MAAM,EAAE,aAFV,EA7B2B;;AAiC3B;AACED,EAAAA,IAAI,EAAE,YADR;AAEEC,EAAAA,MAAM,EAAE,YAFV,EAjC2B,CAAtB","sourcesContent":["export const defaultItemsList = [\r\n  {\r\n    text: 'First',\r\n    action: 'First',\r\n  },\r\n  {\r\n    text: 'Second',\r\n    action: 'Second',\r\n  },\r\n  {\r\n    text: 'Uno',\r\n    action: 'Uno',\r\n  },\r\n];\r\n\r\nexport const manyItemsList = [\r\n  {\r\n    text: 'Edit',\r\n    action: 'Edit',\r\n  },\r\n  {\r\n    text: 'Remove',\r\n    action: 'Remove',\r\n  },\r\n  {\r\n    text: 'Communicate',\r\n    action: 'Communicate',\r\n  },\r\n  {\r\n    text: 'Grade',\r\n    action: 'Grade',\r\n  },\r\n  {\r\n    text: 'Dispatch',\r\n    action: 'Dispatch',\r\n  },\r\n  {\r\n    text: 'Disable',\r\n    action: 'Disable',\r\n  },\r\n  {\r\n    text: 'Rate',\r\n    action: 'Rate',\r\n  },\r\n  {\r\n    text: 'Collaborate',\r\n    action: 'Collaborate',\r\n  },\r\n  {\r\n    text: 'Contribute',\r\n    action: 'Contribute',\r\n  },\r\n];\r\n"]}
+{"version":3,"sources":["Kebab.items.tsx"],"names":["defaultItemsList","text","action","manyItemsList"],"mappings":"AAAA,OAAO,IAAMA,gBAAgB,GAAG;AAC9B;AACEC,EAAAA,IAAI,EAAE,OADR;AAEEC,EAAAA,MAAM,EAAE,OAFV,EAD8B;;AAK9B;AACED,EAAAA,IAAI,EAAE,QADR;AAEEC,EAAAA,MAAM,EAAE,QAFV,EAL8B;;AAS9B;AACED,EAAAA,IAAI,EAAE,KADR;AAEEC,EAAAA,MAAM,EAAE,KAFV,EAT8B,CAAzB;;;;AAeP,OAAO,IAAMC,aAAa,GAAG;AAC3B;AACEF,EAAAA,IAAI,EAAE,MADR;AAEEC,EAAAA,MAAM,EAAE,MAFV,EAD2B;;AAK3B;AACED,EAAAA,IAAI,EAAE,QADR;AAEEC,EAAAA,MAAM,EAAE,QAFV,EAL2B;;AAS3B;AACED,EAAAA,IAAI,EAAE,aADR;AAEEC,EAAAA,MAAM,EAAE,aAFV,EAT2B;;AAa3B;AACED,EAAAA,IAAI,EAAE,OADR;AAEEC,EAAAA,MAAM,EAAE,OAFV,EAb2B;;AAiB3B;AACED,EAAAA,IAAI,EAAE,UADR;AAEEC,EAAAA,MAAM,EAAE,UAFV,EAjB2B;;AAqB3B;AACED,EAAAA,IAAI,EAAE,SADR;AAEEC,EAAAA,MAAM,EAAE,SAFV,EArB2B;;AAyB3B;AACED,EAAAA,IAAI,EAAE,MADR;AAEEC,EAAAA,MAAM,EAAE,MAFV,EAzB2B;;AA6B3B;AACED,EAAAA,IAAI,EAAE,aADR;AAEEC,EAAAA,MAAM,EAAE,aAFV,EA7B2B;;AAiC3B;AACED,EAAAA,IAAI,EAAE,YADR;AAEEC,EAAAA,MAAM,EAAE,YAFV,EAjC2B,CAAtB","sourcesContent":["export const defaultItemsList = [\n  {\n    text: 'First',\n    action: 'First',\n  },\n  {\n    text: 'Second',\n    action: 'Second',\n  },\n  {\n    text: 'Uno',\n    action: 'Uno',\n  },\n];\n\nexport const manyItemsList = [\n  {\n    text: 'Edit',\n    action: 'Edit',\n  },\n  {\n    text: 'Remove',\n    action: 'Remove',\n  },\n  {\n    text: 'Communicate',\n    action: 'Communicate',\n  },\n  {\n    text: 'Grade',\n    action: 'Grade',\n  },\n  {\n    text: 'Dispatch',\n    action: 'Dispatch',\n  },\n  {\n    text: 'Disable',\n    action: 'Disable',\n  },\n  {\n    text: 'Rate',\n    action: 'Rate',\n  },\n  {\n    text: 'Collaborate',\n    action: 'Collaborate',\n  },\n  {\n    text: 'Contribute',\n    action: 'Contribute',\n  },\n];\n"]}

package/components/Kebab/index/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAd","sourcesContent":["export * from './Kebab';\r\n"]}
+{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAd","sourcesContent":["export * from './Kebab';\n"]}

package/components/Link/Link/Link.js

@@ -1,23 +1,25 @@
 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 _class, _class2, _temp;
+
 import React from 'react';
 import PropTypes from 'prop-types';
-import cn from 'classnames';
-import { tabListener } from "../../../lib/events/tabListener";
+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 { jsStyles } from "../Link.styles";
-/**
- * Стандартная ссылка.
- * Интерфес пропсов наследуется от `React.AnchorHTMLAttributes<HTMLAnchorElement>`.
- * Все свойства передаются в элемент `<a>`.
- * `className` и `style` не поддерживаются
- */
-
-export var Link = /*#__PURE__*/function (_React$Component) {
+import { cx } from "../../../lib/theming/Emotion";
+import { rootNode } from "../../../lib/rootNode/rootNodeDecorator";
+import { styles } from "../Link.styles";
+export
+/**
+* Элемент ссылки из HTML.
+*/
+var Link = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(Link, _React$Component);
 
   function Link() {
@@ -31,10 +33,9 @@ export var Link = /*#__PURE__*/function (_React$Component) {
     _this.state = {
       focusedByTab: false
     };
-    _this.theme = void 0;
 
     _this.renderMain = function (props) {
-      var _cn;
+      var _cx;
 
       var disabled = props.disabled,
           href = props.href,
@@ -44,17 +45,17 @@ export var Link = /*#__PURE__*/function (_React$Component) {
           _button = props._button,
           _buttonOpened = props._buttonOpened,
           relOrigin = props.rel,
-          rest = _objectWithoutPropertiesLoose(props, ["disabled", "href", "icon", "use", "loading", "_button", "_buttonOpened", "rel"]);
+          rest = _objectWithoutPropertiesLoose(props, _excluded);
 
       var iconElement = null;
 
       if (icon) {
         iconElement = /*#__PURE__*/React.createElement("span", {
-          className: jsStyles.icon(_this.theme)
+          className: styles.icon(_this.theme)
         }, loading ? /*#__PURE__*/React.createElement(Spinner, {
           caption: null,
           dimmed: true,
-          type: "mini"
+          inline: true
         }) : icon);
       }
 
@@ -62,7 +63,7 @@ export var Link = /*#__PURE__*/function (_React$Component) {
 
       if (_button) {
         arrow = /*#__PURE__*/React.createElement("span", {
-          className: jsStyles.arrow()
+          className: styles.arrow()
         });
       }
 
@@ -72,20 +73,16 @@ export var Link = /*#__PURE__*/function (_React$Component) {
         rel = "noopener" + (isExternalLink(href) ? ' noreferrer' : '');
       }
 
+      var focused = !disabled && _this.state.focusedByTab;
       var linkProps = {
-        className: cn((_cn = {}, _cn[jsStyles.root(_this.theme)] = true, _cn[jsStyles.disabled(_this.theme)] = !!disabled || !!loading, _cn[jsStyles.button(_this.theme)] = !!_button, _cn[jsStyles.buttonOpened()] = !!_buttonOpened, _cn[jsStyles.focus(_this.theme)] = !disabled && _this.state.focusedByTab, _cn[jsStyles.useDefault(_this.theme)] = use === 'default', _cn[jsStyles.useSuccess(_this.theme)] = use === 'success', _cn[jsStyles.useDanger(_this.theme)] = use === 'danger', _cn[jsStyles.useGrayed(_this.theme)] = use === 'grayed', _cn)),
+        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)),
         href: href,
         rel: rel,
         onClick: _this._handleClick,
         onFocus: _this._handleFocus,
         onBlur: _this._handleBlur,
-        tabIndex: _this.props.tabIndex
+        tabIndex: disabled || loading ? -1 : _this.props.tabIndex
       };
-
-      if (disabled) {
-        props.tabIndex = -1;
-      }
-
       return /*#__PURE__*/React.createElement("a", _extends({}, rest, linkProps), iconElement, _this.props.children, arrow);
     };
 
@@ -93,8 +90,8 @@ export var Link = /*#__PURE__*/function (_React$Component) {
       if (!_this.props.disabled) {
         // focus event fires before keyDown eventlistener
         // so we should check tabPressed in async way
-        process.nextTick(function () {
-          if (tabListener.isTabPressed) {
+        requestAnimationFrame(function () {
+          if (keyListener.isTabPressed) {
             _this.setState({
               focusedByTab: true
             });
@@ -113,13 +110,14 @@ export var Link = /*#__PURE__*/function (_React$Component) {
       var _this$props = _this.props,
           href = _this$props.href,
           onClick = _this$props.onClick,
-          disabled = _this$props.disabled;
+          disabled = _this$props.disabled,
+          loading = _this$props.loading;
 
       if (!href) {
         event.preventDefault();
       }
 
-      if (onClick && !disabled) {
+      if (onClick && !disabled && !loading) {
         onClick(event);
       }
     };
@@ -134,20 +132,19 @@ export var Link = /*#__PURE__*/function (_React$Component) {
 
     return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
       _this2.theme = theme;
-      return /*#__PURE__*/React.createElement(CommonWrapper, _this2.props, _this2.renderMain);
+      return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
+        rootNodeRef: _this2.setRootNode
+      }, _this2.props), _this2.renderMain);
     });
   };
 
   return Link;
-}(React.Component);
-Link.__KONTUR_REACT_UI__ = 'Link';
-Link.propTypes = {
+}(React.Component), _class2.__KONTUR_REACT_UI__ = 'Link', _class2.propTypes = {
   disabled: PropTypes.bool,
   href: PropTypes.string,
   icon: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   use: PropTypes.oneOf(['default', 'success', 'danger', 'grayed'])
-};
-Link.defaultProps = {
+}, _class2.defaultProps = {
   href: '',
   use: 'default'
-};
+}, _temp)) || _class;