@megafon/ui-lk-vas 0.7.14 → 0.9.0

package/dist/es/components/Table/Table.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-lkvas-table{border-radius:12px 12px 0 0;overflow:auto hidden;position:relative;z-index:1}.mfui-lkvas-table::-webkit-scrollbar{height:12px}.mfui-lkvas-table::-webkit-scrollbar,.mfui-lkvas-table::-webkit-scrollbar-track{background-color:var(--spbSky1);border-radius:100px}.mfui-lkvas-table::-webkit-scrollbar-thumb{background-color:var(--spbSky2);border-radius:100px}.mfui-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-lkvas-table{position:relative}.mfui-lkvas-table:after,.mfui-lkvas-table:before{height:18px;left:0;position:absolute;right:0;z-index:2}.mfui-lkvas-table:not(.mfui-lkvas-table_v-scroll_start):not(.mfui-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-lkvas-table_h-scroll_none:not(.mfui-lkvas-table_v-scroll_end):not(.mfui-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-lkvas-table__inner{border-radius:12px 12px 0 0;overflow:auto;position:relative;z-index:1}.mfui-lkvas-table__inner::-webkit-scrollbar{height:12px;width:12px}.mfui-lkvas-table__inner::-webkit-scrollbar,.mfui-lkvas-table__inner::-webkit-scrollbar-track{background-color:var(--spbSky1);border-radius:100px}.mfui-lkvas-table__inner::-webkit-scrollbar-thumb{background-color:var(--spbSky2);border-radius:100px}.mfui-lkvas-table__table{background-color:var(--base);border-collapse:collapse;border-spacing:0;border-width:0;width:100%}

package/dist/es/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/es/components/Table/Table.js

@@ -1,16 +1,23 @@
+import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import * as React from 'react';
-import { cnCreate } from '@megafon/ui-helpers';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
 import throttle from 'lodash.throttle';
 import TableContext from "./contexts/TableContext";
 import { calculateScrollPosition } from "./helpers";
 import "./Table.css";
 var cn = cnCreate('mfui-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 = _slicedToArray(_React$useState, 2),
     scrollPosition = _React$useState2[0],
     setScrollPosition = _React$useState2[1];
@@ -20,11 +27,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 = calculateScrollPosition(scrollLeft, deltaWidth);
-    setScrollPosition(position);
+    var deltaHeight = scrollHeight - clientHeight;
+    setScrollPosition({
+      horizontal: calculateScrollPosition(scrollLeft, deltaWidth),
+      vertical: calculateScrollPosition(scrollTop, deltaHeight)
+    });
   }, []);
   React.useEffect(function () {
     if (!tableRef.current) {
@@ -39,17 +52,25 @@ var Table = function Table(_ref) {
       observer.unobserve(tableNode);
     };
   }, [handleTableScroll]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: cn(),
+  return /*#__PURE__*/React.createElement("div", _extends({}, 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", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.inner), {
+    className: cn('inner'),
+    style: {
+      height: height
+    },
     ref: rootRef,
     onScroll: handleTableScroll
-  }, /*#__PURE__*/React.createElement(TableContext.Provider, {
+  }), /*#__PURE__*/React.createElement(TableContext.Provider, {
     value: {
       scrollPosition: scrollPosition
     }
   }, /*#__PURE__*/React.createElement("table", {
     className: cn('table'),
     ref: tableRef
-  }, children)));
+  }, children))));
 };
 export default Table;

package/dist/es/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/es/components/Table/components/TableBody/TableBody.js

@@ -1,10 +1,13 @@
+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';
 var cn = cnCreate('mfui-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", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+    className: cn([className])
+  }), children);
 };
 export default TableBody;

package/dist/es/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/es/components/Table/components/TableHead/TableHead.js

@@ -1,10 +1,13 @@
+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';
 var cn = cnCreate('mfui-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", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+    className: cn([className])
+  }), children);
 };
 export default TableHead;

package/dist/es/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/es/components/Table/components/TableSettings/TableSettings.js

@@ -2,21 +2,22 @@ import _extends from "@babel/runtime/helpers/extends";
 import "core-js/modules/es.array.map.js";
 import * as React from 'react';
 import { Tooltip } from '@megafon/ui-core';
-import { cnCreate } from '@megafon/ui-helpers';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
 import DropdownItem from "../../../_DropdownItem/DropdownItem";
 import "./TableSettings.css";
 var cn = cnCreate('mfui-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", _extends({}, 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", _extends({}, 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')
@@ -30,11 +31,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, _extends({}, item, {
       key: item.id + item.title,
-      color: "white"
+      color: "white",
+      dataAttrs: {
+        root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.item
+      }
     }));
   })));
 };

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

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

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

@@ -1,18 +1,23 @@
+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 TableContext from "../../contexts/TableContext";
 import "./TableTd.css";
 var cn = cnCreate('mfui-lkvas-table-td');
 var TableTd = function TableTd(_ref) {
-  var pinned = _ref.pinned,
+  var className = _ref.className,
+    colSpan = _ref.colSpan,
+    pinned = _ref.pinned,
+    dataAttrs = _ref.dataAttrs,
     children = _ref.children;
   var _React$useContext = React.useContext(TableContext),
     scrollPosition = _React$useContext.scrollPosition;
-  return /*#__PURE__*/React.createElement("td", {
+  return /*#__PURE__*/React.createElement("td", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
       pinned: pinned,
-      scroll: pinned && scrollPosition
-    })
-  }, children);
+      scroll: pinned && scrollPosition.horizontal
+    }, [className]),
+    colSpan: colSpan
+  }), children);
 };
 export default TableTd;

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

@@ -16,6 +16,8 @@ interface ITooltip {
     onCloseButtonClick?: (e: React.SyntheticEvent<EventTarget, Event>) => void;
 }
 export interface ITableThProps {
+    /** Дополнительный класс корневого элемента */
+    className?: string;
     /** Фиксация ячейки во время горизонтальной прокрутки (только для первой и последней ячейки в строке) */
     pinned?: boolean;
     /** Показать элементы сортировки */

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

@@ -13,7 +13,8 @@ var InfoIcon = function InfoIcon(props) {
 };
 var cn = cnCreate('mfui-lkvas-table-th');
 var TableTh = function TableTh(_ref) {
-  var pinned = _ref.pinned,
+  var className = _ref.className,
+    pinned = _ref.pinned,
     _ref$showSorting = _ref.showSorting,
     showSorting = _ref$showSorting === void 0 ? false : _ref$showSorting,
     minWidth = _ref.minWidth,
@@ -58,8 +59,8 @@ var TableTh = function TableTh(_ref) {
   return /*#__PURE__*/React.createElement("th", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
       pinned: pinned,
-      scroll: pinned && scrollPosition
-    }),
+      scroll: pinned && scrollPosition.horizontal
+    }, [className]),
     style: {
       minWidth: minWidth,
       width: width

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

@@ -31,7 +31,8 @@ var TableTooltip = function TableTooltip(_ref) {
     placement: "bottom",
     fallbackPlacements: ['top', 'left', 'right'],
     triggerEvent: "click",
-    colorTheme: "blue"
+    colorTheme: "blue",
+    offset: "small"
   }));
 };
 export default TableTooltip;

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

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

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-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/Table/Table.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-lkvas-table{border-radius:12px 12px 0 0;overflow:auto hidden;position:relative;z-index:1}.mfui-lkvas-table::-webkit-scrollbar{height:12px}.mfui-lkvas-table::-webkit-scrollbar,.mfui-lkvas-table::-webkit-scrollbar-track{background-color:var(--spbSky1);border-radius:100px}.mfui-lkvas-table::-webkit-scrollbar-thumb{background-color:var(--spbSky2);border-radius:100px}.mfui-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-lkvas-table{position:relative}.mfui-lkvas-table:after,.mfui-lkvas-table:before{height:18px;left:0;position:absolute;right:0;z-index:2}.mfui-lkvas-table:not(.mfui-lkvas-table_v-scroll_start):not(.mfui-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-lkvas-table_h-scroll_none:not(.mfui-lkvas-table_v-scroll_end):not(.mfui-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-lkvas-table__inner{border-radius:12px 12px 0 0;overflow:auto;position:relative;z-index:1}.mfui-lkvas-table__inner::-webkit-scrollbar{height:12px;width:12px}.mfui-lkvas-table__inner::-webkit-scrollbar,.mfui-lkvas-table__inner::-webkit-scrollbar-track{background-color:var(--spbSky1);border-radius:100px}.mfui-lkvas-table__inner::-webkit-scrollbar-thumb{background-color:var(--spbSky2);border-radius:100px}.mfui-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-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-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-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-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.d.ts

@@ -1,8 +1,16 @@
 import * as React from 'react';
 import './TableTd.scss';
 export interface ITableTdProps {
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    /** Атрибут colSpan для тега td */
+    colSpan?: number;
     /** Фиксация ячейки во время горизонтальной прокрутки (только для первой и последней ячейки в строке) */
     pinned?: 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,28 @@ 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-lkvas-table-td');
 var TableTd = function TableTd(_ref) {
-  var pinned = _ref.pinned,
+  var className = _ref.className,
+    colSpan = _ref.colSpan,
+    pinned = _ref.pinned,
+    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
+    }, [className]),
+    colSpan: colSpan
+  }), children);
 };
 var _default = exports["default"] = TableTd;

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

@@ -16,6 +16,8 @@ interface ITooltip {
     onCloseButtonClick?: (e: React.SyntheticEvent<EventTarget, Event>) => void;
 }
 export interface ITableThProps {
+    /** Дополнительный класс корневого элемента */
+    className?: string;
     /** Фиксация ячейки во время горизонтальной прокрутки (только для первой и последней ячейки в строке) */
     pinned?: boolean;
     /** Показать элементы сортировки */

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

@@ -22,7 +22,8 @@ var InfoIcon = function InfoIcon(props) {
 };
 var cn = (0, _uiHelpers.cnCreate)('mfui-lkvas-table-th');
 var TableTh = function TableTh(_ref) {
-  var pinned = _ref.pinned,
+  var className = _ref.className,
+    pinned = _ref.pinned,
     _ref$showSorting = _ref.showSorting,
     showSorting = _ref$showSorting === void 0 ? false : _ref$showSorting,
     minWidth = _ref.minWidth,
@@ -67,8 +68,8 @@ var TableTh = function TableTh(_ref) {
   return /*#__PURE__*/React.createElement("th", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
       pinned: pinned,
-      scroll: pinned && scrollPosition
-    }),
+      scroll: pinned && scrollPosition.horizontal
+    }, [className]),
     style: {
       minWidth: minWidth,
       width: width

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

@@ -39,7 +39,8 @@ var TableTooltip = function TableTooltip(_ref) {
     placement: "bottom",
     fallbackPlacements: ['top', 'left', 'right'],
     triggerEvent: "click",
-    colorTheme: "blue"
+    colorTheme: "blue",
+    offset: "small"
   }));
 };
 var _default = exports["default"] = TableTooltip;

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

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

package/dist/lib/components/Table/components/TableTr/TableTr.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-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", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+    className: cn([className])
+  }), children);
 };
 var _default = exports["default"] = TableTr;

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

@@ -6,6 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = void 0;
 var _react = require("react");
 var TableContext = /*#__PURE__*/(0, _react.createContext)({
-  scrollPosition: 'none'
+  scrollPosition: {
+    horizontal: 'none',
+    vertical: 'none'
+  }
 });
 var _default = exports["default"] = TableContext;

package/dist/lib/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/lib/components/Table/helpers.js

@@ -4,14 +4,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.calculateScrollPosition = void 0;
-var calculateScrollPosition = exports.calculateScrollPosition = function calculateScrollPosition(scrollLeft, deltaWidth) {
-  if (deltaWidth === 0) {
+var calculateScrollPosition = exports.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/lib/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/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@megafon/ui-lk-vas",
-    "version": "0.7.14",
+    "version": "0.9.0",
     "files": [
         "dist"
     ],
@@ -77,11 +77,11 @@
         "typescript": "^5.3.3"
     },
     "dependencies": {
-        "@megafon/ui-core": "^8.13.2",
+        "@megafon/ui-core": "^8.14.1",
         "@megafon/ui-helpers": "^4.0.2",
         "@megafon/ui-icons": "^3.12.1",
         "chart.js": "4.0.1",
         "lodash.throttle": "^4.1.1"
     },
-    "gitHead": "4f9585b11b9adfe177e8e56d6030490f6b35b243"
+    "gitHead": "2a821bd292e85f988223419cf69b8a86bbc6709f"
 }