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

package/cjs/components/Kebab/Kebab.md

@@ -0,0 +1,306 @@
+### Базовый пример
+
+```jsx harmony
+import { ToolPencilLineIcon16Regular } from '@skbkontur/icons/icons/ToolPencilLineIcon/ToolPencilLineIcon16Regular';
+import { TrashCanIcon16Regular } from '@skbkontur/icons/icons/TrashCanIcon/TrashCanIcon16Regular';
+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={<ToolPencilLineIcon16Regular />} onClick={() => Toast.push('Отредактировано')}>
+        Редактировать
+      </MenuItem>
+      <MenuItem icon={<TrashCanIcon16Regular />} 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 { ToolPencilLineIcon16Regular } from '@skbkontur/icons/icons/ToolPencilLineIcon/ToolPencilLineIcon16Regular';
+import { TrashCanIcon16Regular } from '@skbkontur/icons/icons/TrashCanIcon/TrashCanIcon16Regular';
+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={<ToolPencilLineIcon16Regular />} onClick={() => Toast.push('Отредактировано')}>
+        Редактировать
+      </MenuItem>
+      <MenuItem icon={<TrashCanIcon16Regular />} onClick={() => Toast.push('Удалено')}>
+        Удалить
+      </MenuItem>
+    </Kebab>
+  </div>
+);
+
+<Gapped>
+  <Card title="Маленький кебаб" size="small" />
+  <Card title="Средний кебаб" size="medium" />
+  <Card title="Большой кебаб" size="large" />
+</Gapped>
+```
+
+### Кебаб-меню с выпадашкой слева
+
+```jsx harmony
+import { ToolPencilLineIcon16Regular } from '@skbkontur/icons/icons/ToolPencilLineIcon/ToolPencilLineIcon16Regular';
+import { TrashCanIcon16Regular } from '@skbkontur/icons/icons/TrashCanIcon/TrashCanIcon16Regular';
+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={<ToolPencilLineIcon16Regular />} onClick={() => Toast.push('Отредактировано')}>
+        Редактировать
+      </MenuItem>
+      <MenuItem icon={<TrashCanIcon16Regular />} onClick={() => Toast.push('Удалено')}>
+        Удалить
+      </MenuItem>
+    </Kebab>
+  </div>
+);
+
+<Card title="С выпадашкой слева" />
+```
+
+### Кастомное действие при открытии
+
+```jsx harmony
+import { ToolPencilLineIcon16Regular } from '@skbkontur/icons/icons/ToolPencilLineIcon/ToolPencilLineIcon16Regular';
+import { TrashCanIcon16Regular } from '@skbkontur/icons/icons/TrashCanIcon/TrashCanIcon16Regular';
+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={<ToolPencilLineIcon16Regular />} onClick={() => Toast.push('Отредактировано')}>
+        Редактировать
+      </MenuItem>
+      <MenuItem icon={<TrashCanIcon16Regular />} onClick={() => Toast.push('Удалено')}>
+        Удалить
+      </MenuItem>
+    </Kebab>
+  </div>
+);
+
+<Card title="С кастомным действием" />
+```
+
+### Иконка и автовыравнивание
+
+```jsx harmony
+import { Button, MenuHeader, MenuItem, MenuSeparator, Kebab } from '@skbkontur/react-ui';
+import { CheckAIcon16Regular } from '@skbkontur/icons/icons/CheckAIcon/CheckAIcon16Regular';
+
+<Kebab>
+  <MenuHeader>MenuHeader</MenuHeader>
+  <MenuItem icon={<CheckAIcon16Regular />}>MenuItem1</MenuItem>
+  <MenuItem icon={<CheckAIcon16Regular />}>MenuItem2</MenuItem>
+  <MenuItem>MenuItem3</MenuItem>
+</Kebab>;
+```
+
+### Иконка и отключенное автовыравнивание
+
+```jsx harmony
+import { Button, MenuHeader, MenuItem, MenuSeparator, Kebab } from '@skbkontur/react-ui';
+import { CheckAIcon16Regular } from '@skbkontur/icons/icons/CheckAIcon/CheckAIcon16Regular';
+
+<Kebab preventIconsOffset>
+  <MenuHeader>MenuHeader</MenuHeader>
+  <MenuItem icon={<CheckAIcon16Regular />}>MenuItem1</MenuItem>
+  <MenuItem icon={<CheckAIcon16Regular />}>MenuItem2</MenuItem>
+  <MenuItem>MenuItem3</MenuItem>
+</Kebab>
+```
+
+### Отключенное кебаб-меню
+
+```jsx harmony
+import { ToolPencilLineIcon16Regular } from '@skbkontur/icons/icons/ToolPencilLineIcon/ToolPencilLineIcon16Regular';
+import { TrashCanIcon16Regular } from '@skbkontur/icons/icons/TrashCanIcon/TrashCanIcon16Regular';
+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={<ToolPencilLineIcon16Regular />} onClick={() => Toast.push('Отредактировано')}>
+        Редактировать
+      </MenuItem>
+      <MenuItem icon={<TrashCanIcon16Regular />} onClick={() => Toast.push('Удалено')}>
+        Удалить
+      </MenuItem>
+    </Kebab>
+  </div>
+);
+
+<Card title="Не нажимается :(" />
+```
+
+### Отключенная анимация
+
+```jsx harmony
+import { ToolPencilLineIcon16Regular } from '@skbkontur/icons/icons/ToolPencilLineIcon/ToolPencilLineIcon16Regular';
+import { TrashCanIcon16Regular } from '@skbkontur/icons/icons/TrashCanIcon/TrashCanIcon16Regular';
+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={<ToolPencilLineIcon16Regular />} onClick={() => Toast.push('Отредактировано')}>
+        Редактировать
+      </MenuItem>
+      <MenuItem icon={<TrashCanIcon16Regular />} onClick={() => Toast.push('Удалено')}>
+        Удалить
+      </MenuItem>
+    </Kebab>
+  </div>
+);
+
+<Card title="Без анимации" />
+```
+
+### Высота
+
+```jsx harmony
+import { ToolPencilLineIcon16Regular } from '@skbkontur/icons/icons/ToolPencilLineIcon/ToolPencilLineIcon16Regular';
+import { TrashCanIcon16Regular } from '@skbkontur/icons/icons/TrashCanIcon/TrashCanIcon16Regular';
+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/cjs/components/Kebab/Kebab.styles.d.ts

@@ -1,6 +1,5 @@
-import type { Emotion } from '@emotion/css/types/create-instance';
 import type { Theme } from '../../lib/theming/Theme';
-export declare const getStyles: (emotion: Emotion) => {
+export declare const styles: {
     kebab(t: Theme): string;
     kebabSmall(t: Theme): string;
     kebabMedium(t: Theme): string;

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

@@ -1,84 +1,81 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.getStyles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.styles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
 
-var _Emotion = require("../../lib/theming/Emotion");var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
 
+var styles = exports.styles = (0, _Emotion.memoizeStyle)({
+  kebab: function kebab(t) {
+    return (0, _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\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    "])),
 
-var getStyles = exports.getStyles = function getStyles(emotion) {return (
-    (0, _Emotion.memoizeStyle)({
-      kebab: function kebab(t) {
-        return emotion.css(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\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.kebabBorder,
+    t.kebabBorderRadius,
 
-        t.kebabBorderRadius,
 
 
 
+    t.kebabBackground,
 
-        t.kebabBackground,
 
+    t.kebabBackgroundHover,
 
-        t.kebabBackgroundHover,
 
 
+    t.kebabBackgroundActive);
 
-        t.kebabBackgroundActive);
 
+  },
 
-      },
+  kebabSmall: function kebabSmall(t) {
+    return (0, _Emotion.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n      width: ", ";\n      height: ", ";\n    "])),
+    t.kebabSizeSmall,
+    t.kebabSizeSmall);
 
-      kebabSmall: function kebabSmall(t) {
-        return emotion.css(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n        width: ", ";\n        height: ", ";\n      "])),
-        t.kebabSizeSmall,
-        t.kebabSizeSmall);
+  },
 
-      },
+  kebabMedium: function kebabMedium(t) {
+    return (0, _Emotion.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["\n      width: ", ";\n      height: ", ";\n    "])),
+    t.kebabSizeMedium,
+    t.kebabSizeMedium);
 
-      kebabMedium: function kebabMedium(t) {
-        return emotion.css(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["\n        width: ", ";\n        height: ", ";\n      "])),
-        t.kebabSizeMedium,
-        t.kebabSizeMedium);
+  },
 
-      },
+  kebabLarge: function kebabLarge(t) {
+    return (0, _Emotion.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["\n      width: ", ";\n      height: ", ";\n    "])),
+    t.kebabSizeLarge,
+    t.kebabSizeLarge);
 
-      kebabLarge: function kebabLarge(t) {
-        return emotion.css(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["\n        width: ", ";\n        height: ", ";\n      "])),
-        t.kebabSizeLarge,
-        t.kebabSizeLarge);
+  },
 
-      },
+  focused: function focused(t) {
+    return (0, _Emotion.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2.default)(["\n      background: ", ";\n      border-color: ", ";\n    "])),
+    t.kebabBackgroundHover,
+    t.borderColorFocus);
 
-      focused: function focused(t) {
-        return emotion.css(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2.default)(["\n        background: ", ";\n        border-color: ", ";\n      "])),
-        t.kebabBackgroundHover,
-        t.borderColorFocus);
+  },
 
-      },
+  opened: function opened(t) {
+    return (0, _Emotion.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2.default)(["\n      background: ", " !important; // override kebab:hover style\n      cursor: default;\n    "])),
+    t.kebabBackgroundActive);
 
-      opened: function opened(t) {
-        return emotion.css(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2.default)(["\n        background: ", " !important; // override kebab:hover style\n        cursor: default;\n      "])),
-        t.kebabBackgroundActive);
 
+  },
 
-      },
+  disabled: function disabled() {
+    return (0, _Emotion.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2.default)(["\n      cursor: default;\n\n      &:hover {\n        background: none;\n      }\n    "])));
 
-      disabled: function disabled() {
-        return emotion.css(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2.default)(["\n        cursor: default;\n\n        &:hover {\n          background: none;\n        }\n      "])));
 
 
 
 
 
+  },
 
-      },
+  menu: function menu(t) {
+    return (0, _Emotion.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteralLoose2.default)(["\n      overflow: hidden;\n      border-radius: ", ";\n    "])),
 
-      menu: function menu(t) {
-        return emotion.css(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteralLoose2.default)(["\n        overflow: hidden;\n        border-radius: ", ";\n      "])),
+    t.popupBorderRadius);
 
-        t.popupBorderRadius);
-
-      }
-    }));};
+  }
+});

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

@@ -1 +1 @@
-{"version":3,"names":["_Emotion","require","_templateObject","_templateObject2","_templateObject3","_templateObject4","_templateObject5","_templateObject6","_templateObject7","_templateObject8","getStyles","exports","emotion","memoizeStyle","kebab","t","css","_taggedTemplateLiteralLoose2","default","kebabBorder","kebabBorderRadius","kebabBackground","kebabBackgroundHover","kebabBackgroundActive","kebabSmall","kebabSizeSmall","kebabMedium","kebabSizeMedium","kebabLarge","kebabSizeLarge","focused","borderColorFocus","opened","disabled","menu","popupBorderRadius"],"sources":["Kebab.styles.ts"],"sourcesContent":["import type { Emotion } from '@emotion/css/types/create-instance';\n\nimport { memoizeStyle } from '../../lib/theming/Emotion';\nimport type { Theme } from '../../lib/theming/Theme';\n\nexport const getStyles = (emotion: Emotion) =>\n  memoizeStyle({\n    kebab(t: Theme) {\n      return emotion.css`\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\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    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    menu(t: Theme) {\n      return emotion.css`\n        overflow: hidden;\n        border-radius: ${t.popupBorderRadius};\n      `;\n    },\n  });\n"],"mappings":";;AAEA,IAAAA,QAAA,GAAAC,OAAA,8BAAyD,IAAAC,eAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA;;;AAGlD,IAAMC,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAG,SAAZA,SAASA,CAAIE,OAAgB;IACxC,IAAAC,qBAAY,EAAC;MACXC,KAAK,WAAAA,MAACC,CAAQ,EAAE;QACd,OAAOH,OAAO,CAACI,GAAG,CAAAd,eAAA,KAAAA,eAAA,OAAAe,4BAAA,CAAAC,OAAA;;;;;QAKNH,CAAC,CAACI,WAAW;;QAENJ,CAAC,CAACK,iBAAiB;;;;;QAKtBL,CAAC,CAACM,eAAe;;;QAGfN,CAAC,CAACO,oBAAoB;;;;QAItBP,CAAC,CAACQ,qBAAqB;;;MAG3C,CAAC;;MAEDC,UAAU,WAAAA,WAACT,CAAQ,EAAE;QACnB,OAAOH,OAAO,CAACI,GAAG,CAAAb,gBAAA,KAAAA,gBAAA,OAAAc,4BAAA,CAAAC,OAAA;QACPH,CAAC,CAACU,cAAc;QACfV,CAAC,CAACU,cAAc;;MAE9B,CAAC;;MAEDC,WAAW,WAAAA,YAACX,CAAQ,EAAE;QACpB,OAAOH,OAAO,CAACI,GAAG,CAAAZ,gBAAA,KAAAA,gBAAA,OAAAa,4BAAA,CAAAC,OAAA;QACPH,CAAC,CAACY,eAAe;QAChBZ,CAAC,CAACY,eAAe;;MAE/B,CAAC;;MAEDC,UAAU,WAAAA,WAACb,CAAQ,EAAE;QACnB,OAAOH,OAAO,CAACI,GAAG,CAAAX,gBAAA,KAAAA,gBAAA,OAAAY,4BAAA,CAAAC,OAAA;QACPH,CAAC,CAACc,cAAc;QACfd,CAAC,CAACc,cAAc;;MAE9B,CAAC;;MAEDC,OAAO,WAAAA,QAACf,CAAQ,EAAE;QAChB,OAAOH,OAAO,CAACI,GAAG,CAAAV,gBAAA,KAAAA,gBAAA,OAAAW,4BAAA,CAAAC,OAAA;QACFH,CAAC,CAACO,oBAAoB;QACpBP,CAAC,CAACgB,gBAAgB;;MAEtC,CAAC;;MAEDC,MAAM,WAAAA,OAACjB,CAAQ,EAAE;QACf,OAAOH,OAAO,CAACI,GAAG,CAAAT,gBAAA,KAAAA,gBAAA,OAAAU,4BAAA,CAAAC,OAAA;QACFH,CAAC,CAACQ,qBAAqB;;;MAGzC,CAAC;;MAEDU,QAAQ,WAAAA,SAAA,EAAG;QACT,OAAOrB,OAAO,CAACI,GAAG,CAAAR,gBAAA,KAAAA,gBAAA,OAAAS,4BAAA,CAAAC,OAAA;;;;;;;MAOpB,CAAC;;MAEDgB,IAAI,WAAAA,KAACnB,CAAQ,EAAE;QACb,OAAOH,OAAO,CAACI,GAAG,CAAAP,gBAAA,KAAAA,gBAAA,OAAAQ,4BAAA,CAAAC,OAAA;;QAECH,CAAC,CAACoB,iBAAiB;;MAExC;IACF,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["_Emotion","require","_templateObject","_templateObject2","_templateObject3","_templateObject4","_templateObject5","_templateObject6","_templateObject7","_templateObject8","styles","exports","memoizeStyle","kebab","t","css","_taggedTemplateLiteralLoose2","default","kebabBorder","kebabBorderRadius","kebabBackground","kebabBackgroundHover","kebabBackgroundActive","kebabSmall","kebabSizeSmall","kebabMedium","kebabSizeMedium","kebabLarge","kebabSizeLarge","focused","borderColorFocus","opened","disabled","menu","popupBorderRadius"],"sources":["Kebab.styles.ts"],"sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport type { Theme } from '../../lib/theming/Theme';\n\nexport const styles = memoizeStyle({\n  kebab(t: Theme) {\n    return css`\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\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 css`\n      width: ${t.kebabSizeSmall};\n      height: ${t.kebabSizeSmall};\n    `;\n  },\n\n  kebabMedium(t: Theme) {\n    return css`\n      width: ${t.kebabSizeMedium};\n      height: ${t.kebabSizeMedium};\n    `;\n  },\n\n  kebabLarge(t: Theme) {\n    return css`\n      width: ${t.kebabSizeLarge};\n      height: ${t.kebabSizeLarge};\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.kebabBackgroundActive} !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  menu(t: Theme) {\n    return css`\n      overflow: hidden;\n      border-radius: ${t.popupBorderRadius};\n    `;\n  },\n});\n"],"mappings":"oRAAA,IAAAA,QAAA,GAAAC,OAAA,8BAA8D,IAAAC,eAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA;;;AAGvD,IAAMC,MAAM,GAAAC,OAAA,CAAAD,MAAA,GAAG,IAAAE,qBAAY,EAAC;EACjCC,KAAK,WAAAA,MAACC,CAAQ,EAAE;IACd,WAAOC,YAAG,EAAAb,eAAA,KAAAA,eAAA,OAAAc,4BAAA,CAAAC,OAAA;;;;;IAKEH,CAAC,CAACI,WAAW;;IAENJ,CAAC,CAACK,iBAAiB;;;;;IAKtBL,CAAC,CAACM,eAAe;;;IAGfN,CAAC,CAACO,oBAAoB;;;;IAItBP,CAAC,CAACQ,qBAAqB;;;EAG3C,CAAC;;EAEDC,UAAU,WAAAA,WAACT,CAAQ,EAAE;IACnB,WAAOC,YAAG,EAAAZ,gBAAA,KAAAA,gBAAA,OAAAa,4BAAA,CAAAC,OAAA;IACCH,CAAC,CAACU,cAAc;IACfV,CAAC,CAACU,cAAc;;EAE9B,CAAC;;EAEDC,WAAW,WAAAA,YAACX,CAAQ,EAAE;IACpB,WAAOC,YAAG,EAAAX,gBAAA,KAAAA,gBAAA,OAAAY,4BAAA,CAAAC,OAAA;IACCH,CAAC,CAACY,eAAe;IAChBZ,CAAC,CAACY,eAAe;;EAE/B,CAAC;;EAEDC,UAAU,WAAAA,WAACb,CAAQ,EAAE;IACnB,WAAOC,YAAG,EAAAV,gBAAA,KAAAA,gBAAA,OAAAW,4BAAA,CAAAC,OAAA;IACCH,CAAC,CAACc,cAAc;IACfd,CAAC,CAACc,cAAc;;EAE9B,CAAC;;EAEDC,OAAO,WAAAA,QAACf,CAAQ,EAAE;IAChB,WAAOC,YAAG,EAAAT,gBAAA,KAAAA,gBAAA,OAAAU,4BAAA,CAAAC,OAAA;IACMH,CAAC,CAACO,oBAAoB;IACpBP,CAAC,CAACgB,gBAAgB;;EAEtC,CAAC;;EAEDC,MAAM,WAAAA,OAACjB,CAAQ,EAAE;IACf,WAAOC,YAAG,EAAAR,gBAAA,KAAAA,gBAAA,OAAAS,4BAAA,CAAAC,OAAA;IACMH,CAAC,CAACQ,qBAAqB;;;EAGzC,CAAC;;EAEDU,QAAQ,WAAAA,SAAA,EAAG;IACT,WAAOjB,YAAG,EAAAP,gBAAA,KAAAA,gBAAA,OAAAQ,4BAAA,CAAAC,OAAA;;;;;;;EAOZ,CAAC;;EAEDgB,IAAI,WAAAA,KAACnB,CAAQ,EAAE;IACb,WAAOC,YAAG,EAAAN,gBAAA,KAAAA,gBAAA,OAAAO,4BAAA,CAAAC,OAAA;;IAESH,CAAC,CAACoB,iBAAiB;;EAExC;AACF,CAAC,CAAC","ignoreList":[]}

package/cjs/components/Link/Link.d.ts

@@ -49,15 +49,9 @@ export declare class Link<C extends ButtonLinkAllowedValues = typeof LINK_DEFAUL
     static defaultProps: DefaultProps;
     private getProps;
     state: LinkState;
-    private globalObject;
-    private cx;
-    private emotion;
-    private styles;
     private theme;
     getRootNode: TGetRootNode;
     private setRootNode;
-    private keyListener;
-    componentDidMount(): void;
     render(): JSX.Element;
     private getTabIndex;
     private getRel;

package/cjs/components/Link/Link.js

@@ -1,7 +1,5 @@
 "use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.LinkDataTids = exports.Link = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
-
-
-var _RenderEnvironmentContext = require("../../lib/theming/RenderEnvironmentContext");
+var _globalObject = require("@skbkontur/global-object");
 
 
 var _Mixins = require("../../lib/styles/Mixins");
@@ -12,6 +10,7 @@ var _ThemeContext = require("../../lib/theming/ThemeContext");
 var _utils = require("../../lib/utils");
 
 var _CommonWrapper = require("../../internal/CommonWrapper");
+var _Emotion = require("../../lib/theming/Emotion");
 
 var _rootNode = require("../../lib/rootNode");
 
@@ -118,26 +117,6 @@ Link = exports.Link = (0, _rootNode.rootNode)(_class = (_Link = /*#__PURE__*/fun
 
 
 
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
 
     getTabIndex = function (_ref)
 
@@ -153,7 +132,7 @@ Link = exports.Link = (0, _rootNode.rootNode)(_class = (_Link = /*#__PURE__*/fun
       if (isAnchorProps(_this.props)) {
         var _this$props = _this.props,rel = _this$props.rel,href = _this$props.href;
         if (!rel && href) {
-          return "noopener" + ((0, _utils.isExternalLink)(href, _this.globalObject) ? ' noreferrer' : '');
+          return "noopener" + ((0, _utils.isExternalLink)(href) ? ' noreferrer' : '');
         }
         return rel;
       }
@@ -161,7 +140,7 @@ Link = exports.Link = (0, _rootNode.rootNode)(_class = (_Link = /*#__PURE__*/fun
       return undefined;
     };_this.
 
-    renderMain = function (props) {var _this$cx;
+    renderMain = function (props) {var _cx;
       var
         disabled =
 
@@ -181,7 +160,7 @@ Link = exports.Link = (0, _rootNode.rootNode)(_class = (_Link = /*#__PURE__*/fun
 
       var arrow = null;
       if (_button) {
-        arrow = /*#__PURE__*/_react.default.createElement("span", { className: _this.styles.arrow() });
+        arrow = /*#__PURE__*/_react.default.createElement("span", { className: _Link2.styles.arrow() });
       }
 
       var isFocused = !disabled && (_this.state.focusedByTab || focused);
@@ -194,41 +173,41 @@ Link = exports.Link = (0, _rootNode.rootNode)(_class = (_Link = /*#__PURE__*/fun
       var getUseStyles = function getUseStyles() {
         switch (use) {
           case 'default':
-            return _this.styles.default(_this.theme);
+            return _Link2.styles.default(_this.theme);
           case 'danger':
-            return _this.styles.danger(_this.theme);
+            return _Link2.styles.danger(_this.theme);
           case 'success':
-            return _this.styles.success(_this.theme);
+            return _Link2.styles.success(_this.theme);
           case 'grayed':
-            return _this.styles.grayed(_this.theme);
+            return _Link2.styles.grayed(_this.theme);
         }
       };
       var getUseLineFocusStyles = function getUseLineFocusStyles() {
         switch (use) {
           case 'default':
-            return _this.styles.lineFocus(_this.theme);
+            return _Link2.styles.lineFocus(_this.theme);
           case 'danger':
-            return _this.styles.lineFocusDanger(_this.theme);
+            return _Link2.styles.lineFocusDanger(_this.theme);
           case 'success':
-            return _this.styles.lineFocusSuccess(_this.theme);
+            return _Link2.styles.lineFocusSuccess(_this.theme);
           case 'grayed':
-            return _this.styles.lineFocusGrayed(_this.theme);
+            return _Link2.styles.lineFocusGrayed(_this.theme);
         }
       };
       var rootProps = (0, _extends2.default)({},
       rest, {
-        className: _this.cx((_this$cx = {}, _this$cx[
-        _this.styles.root(_this.theme)] = true, _this$cx[
-        (0, _Mixins.resetButton)(_this.emotion)] = Root === 'button', _this$cx[
-        _this.styles.focus(_this.theme)] = isFocused, _this$cx[
-        _this.styles.disabled(_this.theme)] = disabled || loading, _this$cx[
-        getUseStyles()] = true, _this$cx[
-        _this.styles.useGrayedFocus(_this.theme)] = use === 'grayed' && focused, _this$cx[
-        _this.styles.button(_this.theme)] = !!_button, _this$cx[
-        _this.styles.buttonOpened(_this.theme)] = !!_buttonOpened, _this$cx[
-        _this.styles.warning(_this.theme)] = warning, _this$cx[
-        _this.styles.error(_this.theme)] = error, _this$cx[
-        getUseLineFocusStyles()] = isFocused, _this$cx)
+        className: (0, _Emotion.cx)((_cx = {}, _cx[
+        _Link2.styles.root(_this.theme)] = true, _cx[
+        (0, _Mixins.resetButton)()] = Root === 'button', _cx[
+        _Link2.styles.focus(_this.theme)] = isFocused, _cx[
+        _Link2.styles.disabled(_this.theme)] = disabled || loading, _cx[
+        getUseStyles()] = true, _cx[
+        _Link2.styles.useGrayedFocus(_this.theme)] = use === 'grayed' && focused, _cx[
+        _Link2.styles.button(_this.theme)] = !!_button, _cx[
+        _Link2.styles.buttonOpened(_this.theme)] = !!_buttonOpened, _cx[
+        _Link2.styles.warning(_this.theme)] = warning, _cx[
+        _Link2.styles.error(_this.theme)] = error, _cx[
+        getUseLineFocusStyles()] = isFocused, _cx)
         ),
         onClick: _this.handleClick,
         onFocus: _this.handleFocus,
@@ -251,8 +230,8 @@ Link = exports.Link = (0, _rootNode.rootNode)(_class = (_Link = /*#__PURE__*/fun
       if (!_this.props.disabled) {
         // focus event fires before keyDown eventlistener
         // so we should check tabPressed in async way
-        _this.globalObject.requestAnimationFrame == null || _this.globalObject.requestAnimationFrame(function () {
-          if (_this.keyListener.isTabPressed) {
+        _globalObject.globalObject.requestAnimationFrame == null || _globalObject.globalObject.requestAnimationFrame(function () {
+          if (_keyListener.keyListener.isTabPressed) {
             _this.setState({ focusedByTab: true });
           }
         });
@@ -274,7 +253,7 @@ Link = exports.Link = (0, _rootNode.rootNode)(_class = (_Link = /*#__PURE__*/fun
       if (onClick && !disabled && !loading) {
         onClick(event);
       }
-    };return _this;}(0, _inheritsLoose2.default)(Link, _React$Component);var _proto = Link.prototype;_proto.componentDidMount = function componentDidMount() {this.keyListener = new _keyListener.KeyListener(this.globalObject);};_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_RenderEnvironmentContext.RenderEnvironmentContext.Consumer, null, function (_ref2) {var globalObject = _ref2.globalObject,emotion = _ref2.emotion;_this2.globalObject = globalObject;_this2.cx = emotion.cx;_this2.emotion = emotion;_this2.styles = (0, _Link2.getStyles)(emotion);return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = _this2.props.theme ? _ThemeFactory.ThemeFactory.create(_this2.props.theme, theme) : theme;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: _this2.setRootNode }, _this2.getProps()), _this2.renderMain);});});};return Link;}(_react.default.Component), _Link.__KONTUR_REACT_UI__ = 'Link', _Link.displayName = 'Link', _Link.defaultProps = { use: 'default', component: LINK_DEFAULT_COMPONENT }, _Link)) || _class;
+    };return _this;}(0, _inheritsLoose2.default)(Link, _React$Component);var _proto = Link.prototype;_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = _this2.props.theme ? _ThemeFactory.ThemeFactory.create(_this2.props.theme, theme) : theme;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: _this2.setRootNode }, _this2.getProps()), _this2.renderMain);});};return Link;}(_react.default.Component), _Link.__KONTUR_REACT_UI__ = 'Link', _Link.displayName = 'Link', _Link.defaultProps = { use: 'default', component: LINK_DEFAULT_COMPONENT }, _Link)) || _class;
 
 
 var isAnchorProps = function isAnchorProps(props) {