@megafon/ui-lk-vas 1.0.0-alpha.2 → 1.0.0-alpha.21

package/dist/es/components/Table/components/TableTr/TableTr.js

@@ -1,11 +1,14 @@
+import _extends from "@babel/runtime/helpers/extends";
 import * as React from 'react';
-import { cnCreate } from '@megafon/ui-helpers';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
 import "./TableTr.css";
 var cn = cnCreate('mfui-9-lkvas-table-tr');
 var TableTr = function TableTr(_ref) {
-  var children = _ref.children;
-  return /*#__PURE__*/React.createElement("tr", {
-    className: cn()
-  }, children);
+  var className = _ref.className,
+    dataAttrs = _ref.dataAttrs,
+    children = _ref.children;
+  return /*#__PURE__*/React.createElement("tr", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+    className: cn([className])
+  }), children);
 };
 export default TableTr;

package/dist/es/components/Table/contexts/TableContext.js

@@ -1,5 +1,8 @@
 import { createContext } from 'react';
 var TableContext = /*#__PURE__*/createContext({
-  scrollPosition: 'none'
+  scrollPosition: {
+    horizontal: 'none',
+    vertical: 'none'
+  }
 });
 export default TableContext;

package/dist/es/components/Table/helpers.d.ts

@@ -1,2 +1,2 @@
-import type { ScrollPositionType } from './types';
-export declare const calculateScrollPosition: (scrollLeft: number, deltaWidth: number) => ScrollPositionType;
+import type { ScrollPositionValueType } from './types';
+export declare const calculateScrollPosition: (scroll: number, delta: number) => ScrollPositionValueType;

package/dist/es/components/Table/helpers.js

@@ -1,11 +1,11 @@
-export var calculateScrollPosition = function calculateScrollPosition(scrollLeft, deltaWidth) {
-  if (deltaWidth === 0) {
+export var calculateScrollPosition = function calculateScrollPosition(scroll, delta) {
+  if (delta === 0) {
     return 'none';
   }
-  if (scrollLeft === 0) {
+  if (scroll === 0) {
     return 'start';
   }
-  if (scrollLeft === deltaWidth) {
+  if (scroll === delta) {
     return 'end';
   }
   return 'between';

package/dist/es/components/Table/types.d.ts

@@ -1 +1,5 @@
-export type ScrollPositionType = 'start' | 'between' | 'end' | 'none';
+export type ScrollPositionValueType = 'start' | 'between' | 'end' | 'none';
+export type ScrollPositionType = {
+    horizontal: ScrollPositionValueType;
+    vertical: ScrollPositionValueType;
+};

package/dist/lib/components/BottomBar/BottomBar.js

@@ -14,9 +14,9 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 var ArrowBackIcon = function ArrowBackIcon(props) {
   return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
-    viewBox: "0 0 40 20"
+    viewBox: "0 0 20 20"
   }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M36 11H7.8l5.6 5.6L12 18l-8-8 8-8 1.4 1.4L7.8 9H36z"
+    d: "M7.733 6.32a1 1 0 00-1.413-.053L3.488 8.892a1.503 1.503 0 000 2.216l2.832 2.625a1 1 0 001.36-1.466L6.312 11H16a1 1 0 000-2H6.313l1.366-1.267a1 1 0 00.054-1.413z"
   }));
 };
 var cn = (0, _uiHelpers.cnCreate)('mfui-9-lkvas-bottom-bar');

package/dist/lib/components/Cards/CardSmall/CardSmall.js

@@ -18,8 +18,7 @@ var CancelIcon = function CancelIcon(props) {
   return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
     viewBox: "0 0 20 20"
   }, props), /*#__PURE__*/React.createElement("path", {
-    className: "CancelIcon__st0",
-    d: "M10 8.8L6.2 5 5 6.2 8.8 10 5 13.8 6.2 15l3.8-3.8 3.8 3.8 1.2-1.2-3.8-3.8L15 6.2 13.8 5 10 8.8z"
+    d: "M5.762 5.76a1 1 0 011.415 0l2.795 2.79 2.788-2.785a1.001 1.001 0 011.415 1.414l-2.788 2.785 2.789 2.787a1 1 0 01-1.414 1.414l-2.79-2.787-2.796 2.794A1 1 0 115.76 12.76l2.796-2.794-2.795-2.792a1 1 0 010-1.414z"
   }));
 };
 var cn = (0, _uiHelpers.cnCreate)('mfui-9-lkvas-card-small');

package/dist/lib/components/Cards/components/_CardCell/CardCell.js

@@ -17,22 +17,23 @@ var EditIcon = function EditIcon(props) {
   return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
     viewBox: "0 0 20 20"
   }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M17.1 2.9c-1.2-1.2-3.2-1.2-4.5 0L3.5 12 2 17l1 1 5-1.5 9.1-9.1c.6-.6.9-1.4.9-2.3s-.3-1.6-.9-2.2zM7.5 15.5l-4.3 1.3-.1-.1 1.3-4.3L11 5.8l3 3-6.5 6.7zm8.9-8.8l-1.5 1.5-3-3 1.5-1.5c.8-.8 2.2-.8 3 0 .4.3.6.9.6 1.4 0 .6-.2 1.2-.6 1.6z"
+    d: "M3 16.005a1 1 0 11.001 1.999A1 1 0 013 16.005zm12.646-8.213l-7.92 7.918a1.001 1.001 0 01-.706.293H4.499a.501.501 0 01-.5-.5v-2.52a1 1 0 01.292-.706l7.896-7.894 3.46 3.41zm-1.371-5.496a1.002 1.002 0 011.415 0l2.02 2.02a1 1 0 010 1.414l-1.357 1.355-3.46-3.409 1.382-1.38z"
   }));
 };
 var SettingsIcon = function SettingsIcon(props) {
   return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
     viewBox: "0 0 20 20"
   }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M10 13a3 3 0 113-3 3 3 0 01-3 3zm0-5a2 2 0 102 2 2 2 0 00-2-2zm1.37 10H8.63L8 16.89a1.3 1.3 0 00-1.54-.64l-1.19.37-1.9-1.94.37-1.19a1.3 1.3 0 00-.64-1.54L2 11.37V8.62L3.1 8a1.3 1.3 0 00.64-1.5l-.37-1.19 1.94-1.94 1.19.37A1.3 1.3 0 008 3.1L8.63 2h2.75L12 3.1a1.31 1.31 0 001.54.64l1.19-.37 1.94 1.94-.41 1.19A1.3 1.3 0 0016.9 8l1.1.58v2.75l-1.1.58a1.3 1.3 0 00-.64 1.54l.37 1.19-1.94 1.94-1.19-.37a1.31 1.31 0 00-1.54.64zm-2.14-1h1.54l.3-.57a2.3 2.3 0 012.73-1.13l.61.19 1.09-1.09-.19-.61a2.3 2.3 0 011.13-2.73l.57-.3V9.23l-.57-.3A2.3 2.3 0 0115.3 6.2l.19-.61-1.08-1.09-.61.19a2.3 2.3 0 01-2.73-1.13l-.3-.56H9.23l-.3.57a2.3 2.3 0 01-2.72 1.12l-.62-.19-1.08 1.09.19.61a2.3 2.3 0 01-1.13 2.73l-.57.3v1.54l.57.3a2.3 2.3 0 011.13 2.72l-.19.61 1.09 1.09.61-.19a2.3 2.3 0 012.73 1.13z"
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M6.622 2.182a1.434 1.434 0 011.296.09l.344.2a3.487 3.487 0 003.514.005l.322-.187a1.434 1.434 0 011.304-.085 8.474 8.474 0 011.688 1c.368.281.555.717.556 1.15v.4l.007.234a3.532 3.532 0 001.742 2.813l.314.183c.377.22.658.604.714 1.066.04.336.061.678.061 1.026l-.014.492c-.01.162-.023.324-.041.483a1.44 1.44 0 01-.714 1.074l-.345.2a3.486 3.486 0 00-1.725 3.014v.46c0 .432-.186.867-.555 1.148a8.477 8.477 0 01-1.644.98 1.434 1.434 0 01-1.31-.082l-.35-.204a3.486 3.486 0 00-3.516-.005l-.392.229a1.435 1.435 0 01-1.303.085 8.485 8.485 0 01-1.604-.935c-.378-.28-.57-.72-.57-1.159v-.498a3.531 3.531 0 00-1.75-3.047l-.399-.233a1.44 1.44 0 01-.715-1.082 8.75 8.75 0 01-.037-.456l-.013-.464c0-.33.02-.654.056-.972a1.44 1.44 0 01.714-1.074l.418-.243a3.485 3.485 0 001.718-2.782l.007-.232v-.479c0-.438.193-.879.57-1.159a8.478 8.478 0 011.652-.954zm3.364 4.886a3 3 0 100 6 3 3 0 000-6z"
   }));
 };
 var CancelIcon = function CancelIcon(props) {
   return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
     viewBox: "0 0 20 20"
   }, props), /*#__PURE__*/React.createElement("path", {
-    className: "CancelIcon__st0",
-    d: "M10 8.8L6.2 5 5 6.2 8.8 10 5 13.8 6.2 15l3.8-3.8 3.8 3.8 1.2-1.2-3.8-3.8L15 6.2 13.8 5 10 8.8z"
+    d: "M5.762 5.76a1 1 0 011.415 0l2.795 2.79 2.788-2.785a1.001 1.001 0 011.415 1.414l-2.788 2.785 2.789 2.787a1 1 0 01-1.414 1.414l-2.79-2.787-2.796 2.794A1 1 0 115.76 12.76l2.796-2.794-2.795-2.792a1 1 0 010-1.414z"
   }));
 };
 var cn = (0, _uiHelpers.cnCreate)('mfui-9-lkvas-card-cell');

package/dist/lib/components/Charts/Chart/Chart.js

@@ -21,9 +21,9 @@ var DownloadIcon = function DownloadIcon(props) {
   return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
     viewBox: "0 0 32 32"
   }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M15.04 5.99L14.97 17l-1.26-1.49-1.42 1.41L15.37 20h1.26l3.08-3.08-1.42-1.41-1.32 1.55.07-11.05-2-.02z"
+    d: "M26.4 14.507a1.6 1.6 0 011.601 1.6c0 1.5-.318 2.984-.93 4.363a11.295 11.295 0 01-2.625 3.67 12.08 12.08 0 01-3.888 2.427 12.67 12.67 0 01-9.115 0 12.083 12.083 0 01-3.888-2.427 11.295 11.295 0 01-2.625-3.67A10.75 10.75 0 014 16.107a1.6 1.6 0 113.2 0c0 1.048.22 2.09.653 3.065a8.097 8.097 0 001.884 2.63 8.881 8.881 0 002.86 1.78 9.453 9.453 0 003.403.631 9.45 9.45 0 003.402-.63 8.883 8.883 0 002.86-1.782 8.096 8.096 0 001.883-2.629 7.55 7.55 0 00.655-3.065 1.6 1.6 0 011.6-1.6z"
   }), /*#__PURE__*/React.createElement("path", {
-    d: "M8 17H6a10 10 0 0020 0h-2a8 8 0 01-16 0z"
+    d: "M16 6.418a1.6 1.6 0 011.6 1.6v5.813l2.062-2.085a1.6 1.6 0 012.275 2.25l-4.231 4.278-.183.167a2.4 2.4 0 01-3.047 0l-.183-.167-4.23-4.278a1.6 1.6 0 112.275-2.25L14.4 13.83V8.018a1.6 1.6 0 011.6-1.6z"
   }));
 };
 var cn = (0, _uiHelpers.cnCreate)('mfui-9-lkvas-chart');

package/dist/lib/components/Header/components/_HeaderButton/HeaderButton.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-9-lkvas-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:none;border-radius:52px;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--content);cursor:pointer;display:inline-block;font-weight:400;height:40px;max-width:100%;min-width:100%;outline:none;overflow:hidden;padding:0;text-align:left;text-decoration:none;-webkit-transition:background-color .3s,color .3s;transition:background-color .3s,color .3s;vertical-align:top;-webkit-tap-highlight-color:rgba(0,0,0,0)}.mfui-9-lkvas-button_color_green{background-color:var(--brandGreen);color:var(--stcWhite)}@media (pointer:fine){.mfui-9-lkvas-button_color_green:hover{background-color:var(--buttonHoverGreen)}}.mfui-9-lkvas-button_color_green:active{background-color:var(--brandGreen)}.mfui-9-lkvas-button_color_green-soft{background-color:var(--brandGreen20)}@media (pointer:fine){.mfui-9-lkvas-button_color_green-soft:hover{background-color:var(--buttonHoverGreenSoft)}}.mfui-9-lkvas-button_color_green-soft:active{background-color:var(--brandGreen20)}.mfui-9-lkvas-button__inner{display:-webkit-box;display:-ms-flexbox;display:flex;gap:8px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;height:inherit;padding:0 8px;width:100%}.mfui-9-lkvas-button__support-svg{-ms-flex-negative:0;flex-shrink:0;height:32px;width:32px;fill:currentColor}.mfui-9-lkvas-button__profile-svg{-ms-flex-negative:0;flex-shrink:0;height:20px;width:20px;fill:currentColor}.mfui-9-lkvas-button__text{margin:0 4px 0 8px;overflow:hidden}.mfui-9-lkvas-button_has-icon .mfui-9-lkvas-button__text{margin-left:4px}.mfui-9-lkvas-button__title{font-size:15px;font-weight:500;line-height:18px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mfui-9-lkvas-button__subtitle{font-size:12px;line-height:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mfui-9-lkvas-button__arrow{-ms-flex-negative:0;background-color:var(--stcWhite);border-radius:50%;flex-shrink:0;height:24px;-webkit-transition:rotate .3s;transition:rotate .3s;width:24px}.mfui-9-lkvas-button_opened .mfui-9-lkvas-button__arrow{rotate:-180deg}.mfui-9-lkvas-button__arrow-svg{height:100%;width:100%;fill:var(--content)}
+h1,h2,h3,h4,h5{margin:0}.mfui-9-lkvas-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:none;border-radius:52px;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--content);cursor:pointer;display:inline-block;font-weight:400;height:40px;max-width:100%;min-width:100%;outline:none;overflow:hidden;padding:0;text-align:left;text-decoration:none;-webkit-transition:background-color .3s,color .3s;transition:background-color .3s,color .3s;vertical-align:top;-webkit-tap-highlight-color:rgba(0,0,0,0)}.mfui-9-lkvas-button_color_green{background-color:var(--brandGreen);color:var(--stcWhite)}@media (pointer:fine){.mfui-9-lkvas-button_color_green:hover{background-color:var(--buttonHoverGreen)}}.mfui-9-lkvas-button_color_green:active{background-color:var(--brandGreen)}.mfui-9-lkvas-button_color_green-soft{background-color:var(--brandGreen20)}@media (pointer:fine){.mfui-9-lkvas-button_color_green-soft:hover{background-color:var(--buttonHoverGreenSoft)}}.mfui-9-lkvas-button_color_green-soft:active{background-color:var(--brandGreen20)}.mfui-9-lkvas-button__inner{display:-webkit-box;display:-ms-flexbox;display:flex;gap:8px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;height:inherit;padding:0 8px;width:100%}.mfui-9-lkvas-button__support-svg{-ms-flex-negative:0;flex-shrink:0;height:32px;width:32px;fill:currentColor}.mfui-9-lkvas-button__profile-svg{-ms-flex-negative:0;flex-shrink:0;height:20px;width:20px;fill:currentColor}.mfui-9-lkvas-button__text{margin:0 4px 0 8px;overflow:hidden}.mfui-9-lkvas-button_has-icon .mfui-9-lkvas-button__text{margin-left:4px}.mfui-9-lkvas-button__title{font-size:15px;font-weight:500;line-height:18px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mfui-9-lkvas-button__subtitle{font-size:12px;line-height:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mfui-9-lkvas-button__arrow{-ms-flex-negative:0;background-color:var(--stcWhite);border-radius:50%;flex-shrink:0;height:24px;-webkit-transition:rotate .3s;transition:rotate .3s;width:24px}.mfui-9-lkvas-button_opened .mfui-9-lkvas-button__arrow{rotate:-180deg}.mfui-9-lkvas-button__arrow-svg{height:100%;width:100%;fill:var(--stcBlack)}

package/dist/lib/components/Header/components/_HeaderButton/HeaderButton.js

@@ -15,31 +15,25 @@ var ProfileIcon = function ProfileIcon(props) {
   return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
     viewBox: "0 0 20 20"
   }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M5.22 18h9.55L16 13.47A8.28 8.28 0 0010 11a8.302 8.302 0 00-6 2.5L5.22 18zM14 6a4 4 0 10-8 0 4 4 0 008 0z"
+    d: "M15.034 9c.552 0 1.004.45.963 1-.334 4.5-2.892 8-5.997 8-3.106 0-5.664-3.5-5.997-8-.041-.55.41-1 .962-1h10.069zM10 2a3.008 3.008 0 013.017 3c0 1.657-1.35 3-3.017 3a3.008 3.008 0 01-3.017-3c0-1.657 1.35-3 3.017-3z"
   }));
 };
 var SupportIcon = function SupportIcon(props) {
   return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
     viewBox: "0 0 32 32"
   }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M26.71 11.65h-1.53A8.43 8.43 0 0016.76 4h-1.52A8.18 8.18 0 007 11.65H5.29A3.22 3.22 0 002 14.94V18a3.19 3.19 0 003.29 3.29H9v-8.64A7.56 7.56 0 019.19 11 19.33 19.33 0 0019 13.65h4.24L23 21.82c0 1.87-.56 3.84-2.06 4.12A3.5 3.5 0 0017.5 23h-2a3.5 3.5 0 000 7h2a3.5 3.5 0 003.15-2c2.64 0 4.35-2.45 4.35-6.15v-.56h1.69A3.19 3.19 0 0030 18v-3.06a3.22 3.22 0 00-3.29-3.29zM7 19.29H5.29A1.3 1.3 0 014 18v-3.06a1.3 1.3 0 011.29-1.29H7zm12-7.65a17.31 17.31 0 01-9.09-2.55A6 6 0 0115.24 6h1.53a6.44 6.44 0 016.4 5.65zM17.5 28h-2a1.5 1.5 0 010-3h2a1.5 1.5 0 010 3zM28 18a1.3 1.3 0 01-1.29 1.29h-1.64l.14-5.65h1.5a1.3 1.3 0 011.29 1.3z"
-  }), /*#__PURE__*/React.createElement("circle", {
-    cx: 12.5,
-    cy: 16.5,
-    r: 1.5
-  }), /*#__PURE__*/React.createElement("circle", {
-    cx: 19.5,
-    cy: 16.5,
-    r: 1.5
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M15.992 5c3.588 0 6.514 1.616 6.681 3.644a2.699 2.699 0 011.32 2.325v1.257h1.34l.273.014A2.685 2.685 0 0128 14.922v3.976c0 1.396-1.05 2.545-2.395 2.683l-.272.013H23.98v1.347c0 2.242-1.799 4.059-4.017 4.059h-4.537c-1.105 0-2-.906-2-2.022a2.01 2.01 0 012-2.022h1.333c1.104 0 2 .905 2 2.022 0 .236-.042.463-.116.674h1.32c1.482 0 2.683-1.214 2.684-2.711v-5c0-.067.013-.132.031-.194v-2.064c-.741-.346-1.303-1.1-1.43-1.982-.119-.812-.308-1.546-.556-2.154-1.208.682-2.867 1.105-4.699 1.105-1.875 0-3.57-.442-4.785-1.153-.258.637-.45 1.417-.566 2.283-.113.84-.64 1.558-1.34 1.897v5.915H6.667l-.272-.013C5.05 21.443 4 20.294 4 18.898v-3.976a2.685 2.685 0 012.395-2.682l.272-.014h1.325v-1.257A2.7 2.7 0 019.31 8.644C9.476 6.616 12.404 5 15.992 5z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M13.328 16.207a1.34 1.34 0 011.334 1.347 1.34 1.34 0 01-1.334 1.346 1.34 1.34 0 01-1.333-1.346 1.34 1.34 0 011.333-1.347zm5.335 0a1.34 1.34 0 011.333 1.347 1.34 1.34 0 01-1.333 1.346 1.34 1.34 0 01-1.334-1.346 1.34 1.34 0 011.334-1.347z"
   }));
 };
 var ArrowIcon = function ArrowIcon(props) {
   return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
     viewBox: "0 0 20 20"
   }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M6 8h8l-4 5z",
-    fillRule: "evenodd",
-    clipRule: "evenodd"
+    d: "M10.465 11.798a.609.609 0 01-.907 0L7.187 9.25c-.41-.44-.1-1.25.476-1.25h4.679c.575 0 .879.811.47 1.25l-2.347 2.548z"
   }));
 };
 var cn = (0, _uiHelpers.cnCreate)('mfui-9-lkvas-button');

package/dist/lib/components/Header/components/_HeaderLkSelect/HeaderLkSelect.js

@@ -18,9 +18,7 @@ var ArrowIcon = function ArrowIcon(props) {
   return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
     viewBox: "0 0 20 20"
   }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M6 8h8l-4 5z",
-    fillRule: "evenodd",
-    clipRule: "evenodd"
+    d: "M10.465 11.798a.609.609 0 01-.907 0L7.187 9.25c-.41-.44-.1-1.25.476-1.25h4.679c.575 0 .879.811.47 1.25l-2.347 2.548z"
   }));
 };
 var cn = (0, _uiHelpers.cnCreate)('mfui-9-lkvas-lk-select');

package/dist/lib/components/Table/Table.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-9-lkvas-table{border-radius:12px 12px 0 0;overflow:auto hidden;position:relative;z-index:1}.mfui-9-lkvas-table::-webkit-scrollbar{height:12px}.mfui-9-lkvas-table::-webkit-scrollbar,.mfui-9-lkvas-table::-webkit-scrollbar-track{background-color:var(--spbSky1);border-radius:100px}.mfui-9-lkvas-table::-webkit-scrollbar-thumb{background-color:var(--spbSky2);border-radius:100px}.mfui-9-lkvas-table__table{background-color:var(--base);border-collapse:collapse;border-spacing:0;border-width:0;width:100%}
+h1,h2,h3,h4,h5{margin:0}.mfui-9-lkvas-table{position:relative}.mfui-9-lkvas-table:after,.mfui-9-lkvas-table:before{height:18px;left:0;position:absolute;right:0;z-index:2}.mfui-9-lkvas-table:not(.mfui-9-lkvas-table_v-scroll_start):not(.mfui-9-lkvas-table_v-scroll_none):before{background:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,.04)),color-stop(49.5%,rgba(0,0,0,.01)),to(hsla(0,0%,100%,0)));background:linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.01) 49.5%,hsla(0,0%,100%,0));content:"";top:0}.mfui-9-lkvas-table_h-scroll_none:not(.mfui-9-lkvas-table_v-scroll_end):not(.mfui-9-lkvas-table_v-scroll_none):after{background:-webkit-gradient(linear,left bottom,left top,from(rgba(0,0,0,.04)),color-stop(49.5%,rgba(0,0,0,.01)),to(hsla(0,0%,100%,0)));background:linear-gradient(0deg,rgba(0,0,0,.04),rgba(0,0,0,.01) 49.5%,hsla(0,0%,100%,0));bottom:0;content:""}.mfui-9-lkvas-table__inner{border-radius:12px 12px 0 0;overflow:auto;position:relative;z-index:1}.mfui-9-lkvas-table__inner::-webkit-scrollbar{height:12px;width:12px}.mfui-9-lkvas-table__inner::-webkit-scrollbar,.mfui-9-lkvas-table__inner::-webkit-scrollbar-track{background-color:var(--spbSky1);border-radius:100px}.mfui-9-lkvas-table__inner::-webkit-scrollbar-thumb{background-color:var(--spbSky2);border-radius:100px}.mfui-9-lkvas-table__table{background-color:var(--base);border-collapse:collapse;border-spacing:0;border-width:0;width:100%}

package/dist/lib/components/Table/Table.d.ts

@@ -1,4 +1,15 @@
 import * as React from 'react';
 import './Table.scss';
-declare const Table: React.FC<React.PropsWithChildren>;
+export interface ITable {
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    /** Высота таблицы */
+    height?: string;
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        inner?: Record<string, string>;
+    };
+}
+declare const Table: React.FC<React.PropsWithChildren<ITable>>;
 export default Table;

package/dist/lib/components/Table/Table.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var React = _interopRequireWildcard(require("react"));
 var _uiHelpers = require("@megafon/ui-helpers");
@@ -16,10 +17,16 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 var cn = (0, _uiHelpers.cnCreate)('mfui-9-lkvas-table');
 var Table = function Table(_ref) {
-  var children = _ref.children;
+  var className = _ref.className,
+    height = _ref.height,
+    dataAttrs = _ref.dataAttrs,
+    children = _ref.children;
   var rootRef = React.useRef(null);
   var tableRef = React.useRef(null);
-  var _React$useState = React.useState('none'),
+  var _React$useState = React.useState({
+      horizontal: 'none',
+      vertical: 'none'
+    }),
     _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
     scrollPosition = _React$useState2[0],
     setScrollPosition = _React$useState2[1];
@@ -29,11 +36,17 @@ var Table = function Table(_ref) {
       return;
     }
     var scrollWidth = rootNode.scrollWidth,
+      scrollHeight = rootNode.scrollHeight,
       clientWidth = rootNode.clientWidth,
-      scrollLeft = rootNode.scrollLeft;
+      clientHeight = rootNode.clientHeight,
+      scrollLeft = rootNode.scrollLeft,
+      scrollTop = rootNode.scrollTop;
     var deltaWidth = scrollWidth - clientWidth;
-    var position = (0, _helpers.calculateScrollPosition)(scrollLeft, deltaWidth);
-    setScrollPosition(position);
+    var deltaHeight = scrollHeight - clientHeight;
+    setScrollPosition({
+      horizontal: (0, _helpers.calculateScrollPosition)(scrollLeft, deltaWidth),
+      vertical: (0, _helpers.calculateScrollPosition)(scrollTop, deltaHeight)
+    });
   }, []);
   React.useEffect(function () {
     if (!tableRef.current) {
@@ -48,17 +61,25 @@ var Table = function Table(_ref) {
       observer.unobserve(tableNode);
     };
   }, [handleTableScroll]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: cn(),
+  return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+    className: cn({
+      'v-scroll': scrollPosition.vertical,
+      'h-scroll': scrollPosition.horizontal
+    }, [className])
+  }), /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.inner), {
+    className: cn('inner'),
+    style: {
+      height: height
+    },
     ref: rootRef,
     onScroll: handleTableScroll
-  }, /*#__PURE__*/React.createElement(_TableContext["default"].Provider, {
+  }), /*#__PURE__*/React.createElement(_TableContext["default"].Provider, {
     value: {
       scrollPosition: scrollPosition
     }
   }, /*#__PURE__*/React.createElement("table", {
     className: cn('table'),
     ref: tableRef
-  }, children)));
+  }, children))));
 };
 var _default = exports["default"] = Table;

package/dist/lib/components/Table/components/TableBody/TableBody.d.ts

@@ -1,3 +1,11 @@
 import * as React from 'react';
-declare const TableBody: React.FC<React.PropsWithChildren>;
+export interface ITableBody {
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+    };
+}
+declare const TableBody: React.FC<React.PropsWithChildren<ITableBody>>;
 export default TableBody;

package/dist/lib/components/Table/components/TableBody/TableBody.js

@@ -5,15 +5,19 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _uiHelpers = require("@megafon/ui-helpers");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 var cn = (0, _uiHelpers.cnCreate)('mfui-9-lkvas-table-body');
 var TableBody = function TableBody(_ref) {
-  var children = _ref.children;
-  return /*#__PURE__*/React.createElement("tbody", {
-    className: cn()
-  }, children);
+  var className = _ref.className,
+    dataAttrs = _ref.dataAttrs,
+    children = _ref.children;
+  return /*#__PURE__*/React.createElement("tbody", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+    className: cn([className])
+  }), children);
 };
 var _default = exports["default"] = TableBody;

package/dist/lib/components/Table/components/TableHead/TableHead.d.ts

@@ -1,3 +1,11 @@
 import * as React from 'react';
-declare const TableHead: React.FC<React.PropsWithChildren>;
+export interface ITableHead {
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+    };
+}
+declare const TableHead: React.FC<React.PropsWithChildren<ITableHead>>;
 export default TableHead;

package/dist/lib/components/Table/components/TableHead/TableHead.js

@@ -5,15 +5,19 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _uiHelpers = require("@megafon/ui-helpers");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 var cn = (0, _uiHelpers.cnCreate)('mfui-9-lkvas-table-head');
 var TableHead = function TableHead(_ref) {
-  var children = _ref.children;
-  return /*#__PURE__*/React.createElement("thead", {
-    className: cn()
-  }, children);
+  var className = _ref.className,
+    dataAttrs = _ref.dataAttrs,
+    children = _ref.children;
+  return /*#__PURE__*/React.createElement("thead", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+    className: cn([className])
+  }), children);
 };
 var _default = exports["default"] = TableHead;

package/dist/lib/components/Table/components/TableSettings/TableSettings.d.ts

@@ -11,6 +11,13 @@ export interface ITableSettingsProps {
         root?: string;
         tooltip?: string;
     };
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        dots?: Record<string, string>;
+        tooltip?: Record<string, string>;
+        item?: Record<string, string>;
+    };
 }
 declare const TableSettings: React.FC<React.PropsWithChildren<ITableSettingsProps>>;
 export default TableSettings;

package/dist/lib/components/Table/components/TableSettings/TableSettings.js

@@ -18,14 +18,15 @@ var cn = (0, _uiHelpers.cnCreate)('mfui-9-lkvas-table-settings');
 var TableSettings = function TableSettings(_ref) {
   var className = _ref.className,
     items = _ref.items,
-    classes = _ref.classes;
+    classes = _ref.classes,
+    dataAttrs = _ref.dataAttrs;
   var triggerRef = React.useRef(null);
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn([className, classes === null || classes === void 0 ? void 0 : classes.root])
-  }, /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.dots), {
     className: cn('dots'),
     ref: triggerRef
-  }, /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React.createElement("div", {
     className: cn('dots-inner')
   }, /*#__PURE__*/React.createElement("div", {
     className: cn('dot')
@@ -39,11 +40,19 @@ var TableSettings = function TableSettings(_ref) {
     placement: "left",
     fallbackPlacements: ['right'],
     triggerEvent: "click",
-    colorTheme: "blue"
+    colorTheme: "blue",
+    strategy: "fixed",
+    offset: "small",
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.tooltip
+    }
   }, items.map(function (item) {
     return /*#__PURE__*/React.createElement(_DropdownItem["default"], (0, _extends2["default"])({}, item, {
       key: item.id + item.title,
-      color: "white"
+      color: "white",
+      dataAttrs: {
+        root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.item
+      }
     }));
   })));
 };

package/dist/lib/components/Table/components/TableTd/TableTd.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-9-lkvas-table-td{background-color:var(--base);font-size:15px;font-weight:400;line-height:24px;padding:12px}.mfui-9-lkvas-table-td_pinned:first-child{left:0;position:sticky}.mfui-9-lkvas-table-td_pinned:first-child:not(.mfui-9-lkvas-table-td_scroll_start,.mfui-9-lkvas-table-td_scroll_none):after{background:-webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.04)),color-stop(49.5%,rgba(0,0,0,.01)),to(hsla(0,0%,100%,0)));background:linear-gradient(90deg,rgba(0,0,0,.04),rgba(0,0,0,.01) 49.5%,hsla(0,0%,100%,0));bottom:0;content:"";position:absolute;right:-18px;top:0;width:18px}.mfui-9-lkvas-table-td_pinned:last-child{position:sticky;right:0}.mfui-9-lkvas-table-td_pinned:last-child:not(.mfui-9-lkvas-table-td_scroll_end,.mfui-9-lkvas-table-td_scroll_none):after{background:-webkit-gradient(linear,right top,left top,from(rgba(0,0,0,.04)),color-stop(49.5%,rgba(0,0,0,.01)),to(hsla(0,0%,100%,0)));background:linear-gradient(270deg,rgba(0,0,0,.04),rgba(0,0,0,.01) 49.5%,hsla(0,0%,100%,0));bottom:0;content:"";left:-18px;position:absolute;top:0;width:18px}
+h1,h2,h3,h4,h5{margin:0}.mfui-9-lkvas-table-td{background-color:var(--base);font-size:15px;font-weight:400;line-height:24px;padding:12px}.mfui-9-lkvas-table-td_pinned:first-child{left:0;position:sticky}.mfui-9-lkvas-table-td_pinned:first-child:not(.mfui-9-lkvas-table-td_scroll_start,.mfui-9-lkvas-table-td_scroll_none):after{background:-webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.04)),color-stop(49.5%,rgba(0,0,0,.01)),to(hsla(0,0%,100%,0)));background:linear-gradient(90deg,rgba(0,0,0,.04),rgba(0,0,0,.01) 49.5%,hsla(0,0%,100%,0));bottom:0;content:"";position:absolute;right:-18px;top:0;width:18px}.mfui-9-lkvas-table-td_pinned:last-child{position:sticky;right:0}.mfui-9-lkvas-table-td_pinned:last-child:not(.mfui-9-lkvas-table-td_scroll_end,.mfui-9-lkvas-table-td_scroll_none):after{background:-webkit-gradient(linear,right top,left top,from(rgba(0,0,0,.04)),color-stop(49.5%,rgba(0,0,0,.01)),to(hsla(0,0%,100%,0)));background:linear-gradient(270deg,rgba(0,0,0,.04),rgba(0,0,0,.01) 49.5%,hsla(0,0%,100%,0));bottom:0;content:"";left:-18px;position:absolute;top:0;width:18px}.mfui-9-lkvas-table-td_active{background-color:var(--spbSky0)}

package/dist/lib/components/Table/components/TableTd/TableTd.d.ts

@@ -1,8 +1,18 @@
 import * as React from 'react';
 import './TableTd.scss';
 export interface ITableTdProps {
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    /** Атрибут colSpan для тега td */
+    colSpan?: number;
     /** Фиксация ячейки во время горизонтальной прокрутки (только для первой и последней ячейки в строке) */
     pinned?: boolean;
+    /** Сделать активной отсортированную ячейку */
+    isSortActive?: boolean;
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+    };
 }
 declare const TableTd: React.FC<React.PropsWithChildren<ITableTdProps>>;
 export default TableTd;

package/dist/lib/components/Table/components/TableTd/TableTd.js

@@ -5,23 +5,31 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _uiHelpers = require("@megafon/ui-helpers");
 var _TableContext = _interopRequireDefault(require("../../contexts/TableContext"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 var cn = (0, _uiHelpers.cnCreate)('mfui-9-lkvas-table-td');
 var TableTd = function TableTd(_ref) {
-  var pinned = _ref.pinned,
+  var className = _ref.className,
+    colSpan = _ref.colSpan,
+    pinned = _ref.pinned,
+    _ref$isSortActive = _ref.isSortActive,
+    isSortActive = _ref$isSortActive === void 0 ? false : _ref$isSortActive,
+    dataAttrs = _ref.dataAttrs,
     children = _ref.children;
   var _React$useContext = React.useContext(_TableContext["default"]),
     scrollPosition = _React$useContext.scrollPosition;
-  return /*#__PURE__*/React.createElement("td", {
+  return /*#__PURE__*/React.createElement("td", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
       pinned: pinned,
-      scroll: pinned && scrollPosition
-    })
-  }, children);
+      scroll: pinned && scrollPosition.horizontal,
+      active: isSortActive
+    }, [className]),
+    colSpan: colSpan
+  }), children);
 };
 var _default = exports["default"] = TableTd;

package/dist/lib/components/Table/components/TableTh/TableTh.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-9-lkvas-table-th{background-color:var(--spbSky0);color:var(--spbSky3);font-size:15px;font-weight:500;line-height:24px;padding:16px 12px;text-align:left}.mfui-9-lkvas-table-th:first-child{border-radius:12px 0 0 12px}.mfui-9-lkvas-table-th:last-child{border-radius:0 12px 12px 0}.mfui-9-lkvas-table-th__inner{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;gap:4px;position:relative;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mfui-9-lkvas-table-th_pinned:first-child{left:0;position:sticky;z-index:1}.mfui-9-lkvas-table-th_pinned:first-child:not(.mfui-9-lkvas-table-th_scroll_start,.mfui-9-lkvas-table-th_scroll_none):after{background:-webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.04)),color-stop(49.5%,rgba(0,0,0,.01)),to(hsla(0,0%,100%,0)));background:linear-gradient(90deg,rgba(0,0,0,.04),rgba(0,0,0,.01) 49.5%,hsla(0,0%,100%,0));bottom:0;content:"";position:absolute;right:-18px;top:0;width:18px}.mfui-9-lkvas-table-th_pinned:last-child{position:sticky;right:0;z-index:1}.mfui-9-lkvas-table-th_pinned:last-child:not(.mfui-9-lkvas-table-th_scroll_end,.mfui-9-lkvas-table-th_scroll_none):after{background:-webkit-gradient(linear,right top,left top,from(rgba(0,0,0,.04)),color-stop(49.5%,rgba(0,0,0,.01)),to(hsla(0,0%,100%,0)));background:linear-gradient(270deg,rgba(0,0,0,.04),rgba(0,0,0,.01) 49.5%,hsla(0,0%,100%,0));bottom:0;content:"";left:-18px;position:absolute;top:0;width:18px}.mfui-9-lkvas-table-th__sorting{display:-webkit-box;display:-ms-flexbox;display:flex;left:100%;position:absolute;top:50%;translate:4px -50%;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:4px;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.mfui-9-lkvas-table-th__sorting-down,.mfui-9-lkvas-table-th__sorting-up{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;cursor:pointer;height:20px;justify-content:center;width:20px}.mfui-9-lkvas-table-th__sorting-down:after,.mfui-9-lkvas-table-th__sorting-up:after{border-left:3px solid transparent;border-right:3px solid transparent;content:"";height:0;width:0}.mfui-9-lkvas-table-th__sorting-up{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.mfui-9-lkvas-table-th__sorting-up:after{border-bottom:4px solid var(--spbSky3)}.mfui-9-lkvas-table-th__sorting-up:hover:after{border-bottom-color:var(--content)}.mfui-9-lkvas-table-th__sorting-down{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.mfui-9-lkvas-table-th__sorting-down:after{border-top:4px solid var(--spbSky3);content:""}.mfui-9-lkvas-table-th__sorting-down:hover:after{border-top-color:var(--content)}.mfui-9-lkvas-table-th__notice-icon{cursor:pointer;display:block;height:24px;width:24px;fill:var(--spbSky3)}
+h1,h2,h3,h4,h5{margin:0}.mfui-9-lkvas-table-th{background-color:var(--spbSky0);color:var(--spbSky3);font-size:15px;font-weight:500;line-height:24px;padding:16px 12px;text-align:left}.mfui-9-lkvas-table-th:first-child{border-radius:12px 0 0 12px}.mfui-9-lkvas-table-th:last-child{border-radius:0 12px 12px 0}.mfui-9-lkvas-table-th__inner{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;gap:4px;position:relative;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mfui-9-lkvas-table-th_pinned:first-child{left:0;position:sticky;z-index:1}.mfui-9-lkvas-table-th_pinned:first-child:not(.mfui-9-lkvas-table-th_scroll_start,.mfui-9-lkvas-table-th_scroll_none):after{background:-webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.04)),color-stop(49.5%,rgba(0,0,0,.01)),to(hsla(0,0%,100%,0)));background:linear-gradient(90deg,rgba(0,0,0,.04),rgba(0,0,0,.01) 49.5%,hsla(0,0%,100%,0));bottom:0;content:"";position:absolute;right:-18px;top:0;width:18px}.mfui-9-lkvas-table-th_pinned:last-child{position:sticky;right:0;z-index:1}.mfui-9-lkvas-table-th_pinned:last-child:not(.mfui-9-lkvas-table-th_scroll_end,.mfui-9-lkvas-table-th_scroll_none):after{background:-webkit-gradient(linear,right top,left top,from(rgba(0,0,0,.04)),color-stop(49.5%,rgba(0,0,0,.01)),to(hsla(0,0%,100%,0)));background:linear-gradient(270deg,rgba(0,0,0,.04),rgba(0,0,0,.01) 49.5%,hsla(0,0%,100%,0));bottom:0;content:"";left:-18px;position:absolute;top:0;width:18px}.mfui-9-lkvas-table-th__sorting{display:-webkit-box;display:-ms-flexbox;display:flex;left:100%;position:absolute;top:50%;translate:4px -50%;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:4px;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.mfui-9-lkvas-table-th__sorting-down,.mfui-9-lkvas-table-th__sorting-up{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;cursor:pointer;height:20px;justify-content:center;width:20px}.mfui-9-lkvas-table-th__sorting-down:after,.mfui-9-lkvas-table-th__sorting-up:after{border-left:3px solid transparent;border-right:3px solid transparent;content:"";height:0;width:0}.mfui-9-lkvas-table-th__sorting-up{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.mfui-9-lkvas-table-th__sorting-up:after{border-bottom:4px solid var(--spbSky3)}.mfui-9-lkvas-table-th__sorting-up:hover:after,.mfui-9-lkvas-table-th__sorting-up_current:after{border-bottom-color:var(--content)}.mfui-9-lkvas-table-th__sorting-down{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.mfui-9-lkvas-table-th__sorting-down:after{border-top:4px solid var(--spbSky3);content:""}.mfui-9-lkvas-table-th__sorting-down:hover:after,.mfui-9-lkvas-table-th__sorting-down_current:after{border-top-color:var(--content)}.mfui-9-lkvas-table-th__notice-icon{cursor:pointer;display:block;height:24px;width:24px;fill:var(--spbSky3)}.mfui-9-lkvas-table-th_active{background-color:var(--spbSky1)}

package/dist/lib/components/Table/components/TableTh/TableTh.d.ts

@@ -5,21 +5,29 @@ interface ITooltip {
     /** Заголовок тултипа */
     title: string;
     /** Текст тултипа */
-    text: string;
+    text?: string;
     /** Текст кнопки тултипа */
     buttonText?: string;
     /** Отобразить кнопку закрытия тултипа */
     hasCloseButton?: boolean;
+    /** Дополнительный контент */
+    additionalContent?: React.ReactNode;
     /** Обработчик клика по кнопке тултипа */
     onButtonClick?: (e: React.SyntheticEvent<EventTarget, Event>) => void;
     /** Обработчик клика по кнопке закрытия тултипа */
     onCloseButtonClick?: (e: React.SyntheticEvent<EventTarget, Event>) => void;
 }
 export interface ITableThProps {
+    /** Дополнительный класс корневого элемента */
+    className?: string;
     /** Фиксация ячейки во время горизонтальной прокрутки (только для первой и последней ячейки в строке) */
     pinned?: boolean;
     /** Показать элементы сортировки */
     showSorting?: boolean;
+    /** Сделать активной отсортированную ячейку */
+    isSortActive?: boolean;
+    /** Текущий тип сортировки */
+    currentSortType?: SortType;
     /** Минимальная ширина ячейки */
     minWidth?: string;
     /** Ширина ячейки */