@alfalab/core-components-table 2.1.15 → 2.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (122) hide show
  1. package/component.d.ts +1 -0
  2. package/component.js +1 -1
  3. package/components/index.js +1 -1
  4. package/components/pagination/Component.js +2 -2
  5. package/components/pagination/index.css +8 -8
  6. package/components/pagination/index.js +1 -1
  7. package/components/pagination/select-field/index.css +4 -4
  8. package/components/pagination/select-field/index.js +2 -2
  9. package/components/table/Component.d.ts +8 -0
  10. package/components/table/Component.js +5 -3
  11. package/components/table/index.css +9 -6
  12. package/components/table/index.js +1 -1
  13. package/components/table/utils.js +1 -1
  14. package/components/table-context/index.d.ts +1 -0
  15. package/components/table-context/index.js +1 -0
  16. package/components/tbody/Component.js +2 -2
  17. package/components/tbody/index.css +2 -2
  18. package/components/tbody/index.js +1 -1
  19. package/components/tcell/Component.js +2 -2
  20. package/components/tcell/index.css +6 -6
  21. package/components/tcell/index.js +1 -1
  22. package/components/texpandable-row/Component.js +2 -2
  23. package/components/texpandable-row/index.css +5 -5
  24. package/components/texpandable-row/index.js +1 -1
  25. package/components/thead/Component.js +2 -2
  26. package/components/thead/index.css +6 -6
  27. package/components/thead/index.js +1 -1
  28. package/components/thead-cell/Component.js +7 -4
  29. package/components/thead-cell/index.css +14 -7
  30. package/components/thead-cell/index.js +1 -1
  31. package/components/trow/Component.js +2 -2
  32. package/components/trow/index.css +8 -8
  33. package/components/trow/index.js +1 -1
  34. package/components/tsortable-head-cell/Component.js +2 -2
  35. package/components/tsortable-head-cell/index.css +9 -9
  36. package/components/tsortable-head-cell/index.js +1 -1
  37. package/components/tsortable-head-cell/sort-icon-asc.js +1 -1
  38. package/components/tsortable-head-cell/sort-icon-desc.js +1 -1
  39. package/components/tsortable-head-cell/sort-icon-unset.js +1 -1
  40. package/cssm/component.d.ts +1 -0
  41. package/cssm/components/table/Component.d.ts +8 -0
  42. package/cssm/components/table/Component.js +3 -1
  43. package/cssm/components/table/index.module.css +3 -0
  44. package/cssm/components/table-context/index.d.ts +1 -0
  45. package/cssm/components/table-context/index.js +1 -0
  46. package/cssm/components/thead-cell/Component.js +5 -2
  47. package/cssm/components/thead-cell/index.module.css +7 -0
  48. package/esm/component.d.ts +1 -0
  49. package/esm/component.js +1 -1
  50. package/esm/components/index.js +1 -1
  51. package/esm/components/pagination/Component.js +2 -2
  52. package/esm/components/pagination/index.css +8 -8
  53. package/esm/components/pagination/index.js +1 -1
  54. package/esm/components/pagination/select-field/index.css +4 -4
  55. package/esm/components/pagination/select-field/index.js +2 -2
  56. package/esm/components/table/Component.d.ts +8 -0
  57. package/esm/components/table/Component.js +5 -3
  58. package/esm/components/table/index.css +9 -6
  59. package/esm/components/table/index.js +1 -1
  60. package/esm/components/table/utils.js +1 -1
  61. package/esm/components/table-context/index.d.ts +1 -0
  62. package/esm/components/table-context/index.js +1 -0
  63. package/esm/components/tbody/Component.js +2 -2
  64. package/esm/components/tbody/index.css +2 -2
  65. package/esm/components/tbody/index.js +1 -1
  66. package/esm/components/tcell/Component.js +2 -2
  67. package/esm/components/tcell/index.css +6 -6
  68. package/esm/components/tcell/index.js +1 -1
  69. package/esm/components/texpandable-row/Component.js +2 -2
  70. package/esm/components/texpandable-row/index.css +5 -5
  71. package/esm/components/texpandable-row/index.js +1 -1
  72. package/esm/components/thead/Component.js +2 -2
  73. package/esm/components/thead/index.css +6 -6
  74. package/esm/components/thead/index.js +1 -1
  75. package/esm/components/thead-cell/Component.js +7 -4
  76. package/esm/components/thead-cell/index.css +14 -7
  77. package/esm/components/thead-cell/index.js +1 -1
  78. package/esm/components/trow/Component.js +2 -2
  79. package/esm/components/trow/index.css +8 -8
  80. package/esm/components/trow/index.js +1 -1
  81. package/esm/components/tsortable-head-cell/Component.js +2 -2
  82. package/esm/components/tsortable-head-cell/index.css +9 -9
  83. package/esm/components/tsortable-head-cell/index.js +1 -1
  84. package/esm/components/tsortable-head-cell/sort-icon-asc.js +1 -1
  85. package/esm/components/tsortable-head-cell/sort-icon-desc.js +1 -1
  86. package/esm/components/tsortable-head-cell/sort-icon-unset.js +1 -1
  87. package/esm/index.js +1 -1
  88. package/esm/{tslib.es6-0b627ed6.d.ts → tslib.es6-73de7bd1.d.ts} +0 -0
  89. package/esm/{tslib.es6-0b627ed6.js → tslib.es6-73de7bd1.js} +0 -0
  90. package/index.js +1 -1
  91. package/modern/component.d.ts +1 -0
  92. package/modern/components/pagination/Component.js +2 -2
  93. package/modern/components/pagination/index.css +8 -8
  94. package/modern/components/pagination/select-field/index.css +4 -4
  95. package/modern/components/pagination/select-field/index.js +1 -1
  96. package/modern/components/table/Component.d.ts +8 -0
  97. package/modern/components/table/Component.js +4 -2
  98. package/modern/components/table/index.css +9 -6
  99. package/modern/components/table/utils.js +2 -2
  100. package/modern/components/table-context/index.d.ts +1 -0
  101. package/modern/components/table-context/index.js +1 -0
  102. package/modern/components/tbody/Component.js +1 -1
  103. package/modern/components/tbody/index.css +2 -2
  104. package/modern/components/tcell/Component.js +1 -1
  105. package/modern/components/tcell/index.css +6 -6
  106. package/modern/components/texpandable-row/Component.js +1 -1
  107. package/modern/components/texpandable-row/index.css +5 -5
  108. package/modern/components/thead/Component.js +1 -1
  109. package/modern/components/thead/index.css +6 -6
  110. package/modern/components/thead-cell/Component.js +5 -3
  111. package/modern/components/thead-cell/index.css +14 -7
  112. package/modern/components/trow/Component.js +1 -1
  113. package/modern/components/trow/index.css +8 -8
  114. package/modern/components/tsortable-head-cell/Component.js +1 -1
  115. package/modern/components/tsortable-head-cell/index.css +9 -9
  116. package/modern/components/tsortable-head-cell/sort-icon-asc.js +1 -1
  117. package/modern/components/tsortable-head-cell/sort-icon-desc.js +1 -1
  118. package/modern/components/tsortable-head-cell/sort-icon-unset.js +1 -1
  119. package/package.json +4 -4
  120. package/send-stats.js +1 -1
  121. /package/{tslib.es6-7aeefe28.d.ts → tslib.es6-4a0b0964.d.ts} +0 -0
  122. /package/{tslib.es6-7aeefe28.js → tslib.es6-4a0b0964.js} +0 -0
@@ -1,4 +1,4 @@
1
- /* hash: 1icu0 */
1
+ /* hash: 2hq9o */
2
2
  :root {
3
3
  --color-static-graphic-solitude: #e8f2fe;
4
4
  }
@@ -14,28 +14,28 @@
14
14
 
15
15
  /* Hard up */
16
16
  }
17
- .table__component_1cywl {
17
+ .table__component_1lnh8 {
18
18
  padding-top: 1px;
19
19
  width: 100%;
20
20
  transition: background-color 0.2s;
21
21
  box-sizing: border-box;
22
22
  background: var(--color-light-bg-primary)
23
23
  }
24
- .table__component_1cywl:first-child td {
24
+ .table__component_1lnh8:first-child td {
25
25
  border-top: 0;
26
26
  }
27
- .table__withoutBorder_1cywl td {
27
+ .table__withoutBorder_1lnh8 td {
28
28
  border: none;
29
29
  }
30
- .table__clickable_1cywl {
30
+ .table__clickable_1lnh8 {
31
31
  cursor: pointer
32
32
  }
33
- .table__clickable_1cywl:hover {
33
+ .table__clickable_1lnh8:hover {
34
34
  background-color: var(--color-light-bg-secondary);
35
35
  }
36
- .table__selected_1cywl {
36
+ .table__selected_1lnh8 {
37
37
  background-color: #f2f8ff /* нет цвета в палитре */
38
38
  }
39
- .table__selected_1cywl:hover {
39
+ .table__selected_1lnh8:hover {
40
40
  background-color: var(--color-static-graphic-solitude);
41
41
  }
@@ -2,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- require('../../tslib.es6-7aeefe28.js');
5
+ require('../../tslib.es6-4a0b0964.js');
6
6
  require('react');
7
7
  require('classnames');
8
8
  var components_trow_Component = require('./Component.js');
@@ -2,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var tslib_es6 = require('../../tslib.es6-7aeefe28.js');
5
+ var tslib_es6 = require('../../tslib.es6-4a0b0964.js');
6
6
  var React = require('react');
7
7
  var cn = require('classnames');
8
8
  require('../table-context/index.js');
@@ -16,7 +16,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
16
16
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
17
17
  var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
18
18
 
19
- var styles = {"component":"table__component_101i8","content":"table__content_101i8","icon":"table__icon_101i8","reverse":"table__reverse_101i8","sorted":"table__sorted_101i8"};
19
+ var styles = {"component":"table__component_1nfod","content":"table__content_1nfod","icon":"table__icon_1nfod","reverse":"table__reverse_1nfod","sorted":"table__sorted_1nfod"};
20
20
  require('./index.css')
21
21
 
22
22
  var TSortableHeadCell = function (_a) {
@@ -1,4 +1,4 @@
1
- /* hash: 7jkg0 */
1
+ /* hash: zv250 */
2
2
  :root {
3
3
  --color-light-graphic-link: #007aff;
4
4
  --color-light-graphic-primary: #0b1f35;
@@ -15,14 +15,14 @@
15
15
  :root {
16
16
  --gap-xs: 8px;
17
17
  }
18
- .table__component_101i8 {
18
+ .table__component_1nfod {
19
19
  position: relative;
20
20
  }
21
- .table__content_101i8 {
21
+ .table__content_1nfod {
22
22
  display: flex;
23
23
  align-items: flex-start;
24
24
  }
25
- .table__icon_101i8 {
25
+ .table__icon_1nfod {
26
26
  cursor: pointer;
27
27
  margin-left: var(--gap-xs);
28
28
 
@@ -35,19 +35,19 @@
35
35
  transition: color 0.2s ease;
36
36
  flex-shrink: 0
37
37
  }
38
- .table__icon_101i8:hover {
38
+ .table__icon_1nfod:hover {
39
39
  color: var(--color-light-graphic-primary);
40
40
  }
41
- .table__reverse_101i8 {
41
+ .table__reverse_1nfod {
42
42
  flex-direction: row-reverse
43
43
  }
44
- .table__reverse_101i8 .table__icon_101i8 {
44
+ .table__reverse_1nfod .table__icon_1nfod {
45
45
  margin-left: 0;
46
46
  margin-right: var(--gap-xs);
47
47
  }
48
- .table__sorted_101i8 {
48
+ .table__sorted_1nfod {
49
49
  color: var(--color-light-graphic-link)
50
50
  }
51
- .table__sorted_101i8:hover {
51
+ .table__sorted_1nfod:hover {
52
52
  color: var(--color-light-graphic-link);
53
53
  }
@@ -2,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- require('../../tslib.es6-7aeefe28.js');
5
+ require('../../tslib.es6-4a0b0964.js');
6
6
  require('react');
7
7
  require('classnames');
8
8
  require('../table-context/index.js');
@@ -2,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var tslib_es6 = require('../../tslib.es6-7aeefe28.js');
5
+ var tslib_es6 = require('../../tslib.es6-4a0b0964.js');
6
6
  var React = require('react');
7
7
 
8
8
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -2,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var tslib_es6 = require('../../tslib.es6-7aeefe28.js');
5
+ var tslib_es6 = require('../../tslib.es6-4a0b0964.js');
6
6
  var React = require('react');
7
7
 
8
8
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -2,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var tslib_es6 = require('../../tslib.es6-7aeefe28.js');
5
+ var tslib_es6 = require('../../tslib.es6-4a0b0964.js');
6
6
  var React = require('react');
7
7
 
8
8
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -7,6 +7,7 @@ declare const Table: import("react").ForwardRefExoticComponent<import("react").T
7
7
  wrapper?: boolean | undefined;
8
8
  pagination?: import("react").ReactNode;
9
9
  dataTestId?: string | undefined;
10
+ stickyHeader?: boolean | undefined;
10
11
  } & import("react").RefAttributes<HTMLTableElement>> & {
11
12
  TBody: import("react").FC<import("./components/index").TBodyProps>;
12
13
  THead: import("react").FC<import("./components/index").THeadProps>;
@@ -30,6 +30,10 @@ type TableProps = TableHTMLAttributes<HTMLTableElement> & {
30
30
  * Идентификатор для систем автоматизированного тестирования
31
31
  */
32
32
  dataTestId?: string;
33
+ /**
34
+ * Если true то заголовок будет фиксироваться при скроле
35
+ */
36
+ stickyHeader?: boolean;
33
37
  };
34
38
  declare const Table: React.ForwardRefExoticComponent<React.TableHTMLAttributes<HTMLTableElement> & {
35
39
  /**
@@ -60,5 +64,9 @@ declare const Table: React.ForwardRefExoticComponent<React.TableHTMLAttributes<H
60
64
  * Идентификатор для систем автоматизированного тестирования
61
65
  */
62
66
  dataTestId?: string | undefined;
67
+ /**
68
+ * Если true то заголовок будет фиксироваться при скроле
69
+ */
70
+ stickyHeader?: boolean | undefined;
63
71
  } & React.RefAttributes<HTMLTableElement>>;
64
72
  export { TableProps, Table };
@@ -20,7 +20,7 @@ var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
20
20
 
21
21
  var Table = React.forwardRef(function (_a, ref) {
22
22
  var _b;
23
- var className = _a.className, children = _a.children, _c = _a.compactView, compactView = _c === void 0 ? false : _c, _d = _a.compactHorizontal, compactHorizontal = _d === void 0 ? false : _d, _e = _a.wrapper, wrapper = _e === void 0 ? true : _e, pagination = _a.pagination, dataTestId = _a.dataTestId, restProps = tslib_es6.__rest(_a, ["className", "children", "compactView", "compactHorizontal", "wrapper", "pagination", "dataTestId"]);
23
+ var className = _a.className, children = _a.children, _c = _a.compactView, compactView = _c === void 0 ? false : _c, _d = _a.compactHorizontal, compactHorizontal = _d === void 0 ? false : _d, _e = _a.wrapper, wrapper = _e === void 0 ? true : _e, pagination = _a.pagination, dataTestId = _a.dataTestId, _f = _a.stickyHeader, stickyHeader = _f === void 0 ? false : _f, restProps = tslib_es6.__rest(_a, ["className", "children", "compactView", "compactHorizontal", "wrapper", "pagination", "dataTestId", "stickyHeader"]);
24
24
  var wrapperRef = React.useRef(null);
25
25
  var columnsConfiguration = React.useMemo(function () {
26
26
  return components_table_utils.findAllHeadCellsProps(children).map(function (columnProps, index) { return ({
@@ -32,6 +32,7 @@ var Table = React.forwardRef(function (_a, ref) {
32
32
  }, [children]);
33
33
  /* eslint-disable react/jsx-no-constructed-context-values */
34
34
  return (React__default['default'].createElement(components_tableContext_index.TableContext.Provider, { value: {
35
+ stickyHeader: stickyHeader,
35
36
  columnsConfiguration: columnsConfiguration,
36
37
  compactView: compactView,
37
38
  compactHorizontal: compactHorizontal,
@@ -40,6 +41,7 @@ var Table = React.forwardRef(function (_a, ref) {
40
41
  React__default['default'].createElement("div", { ref: wrapperRef, className: cn__default['default'](styles__default['default'].component, className, (_b = {},
41
42
  _b[styles__default['default'].wrapper] = wrapper,
42
43
  _b[styles__default['default'].hasPagination] = !!pagination,
44
+ _b[styles__default['default'].stickyHeader] = stickyHeader,
43
45
  _b)), "data-test-id": dataTestId },
44
46
  React__default['default'].createElement("table", tslib_es6.__assign({ ref: ref, className: styles__default['default'].table }, restProps), children),
45
47
  pagination)));
@@ -27,6 +27,9 @@
27
27
  border-radius: var(--border-radius-m);
28
28
  overflow: auto;
29
29
  }
30
+ .stickyHeader {
31
+ max-height: 100%;
32
+ }
30
33
  .hasPagination {
31
34
  padding-bottom: 0;
32
35
  }
@@ -10,6 +10,7 @@ type ColumnConfiguration = {
10
10
  };
11
11
  type TableContextType = {
12
12
  columnsConfiguration: ColumnConfiguration[];
13
+ stickyHeader: boolean;
13
14
  compactView: boolean;
14
15
  compactHorizontal: boolean;
15
16
  wrapperRef: RefObject<HTMLDivElement>;
@@ -11,6 +11,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
11
11
  var DEFAULT_TABLE_CONTEXT = {
12
12
  columnsConfiguration: [],
13
13
  compactView: false,
14
+ stickyHeader: false,
14
15
  compactHorizontal: false,
15
16
  wrapperRef: { current: null },
16
17
  };
@@ -15,11 +15,14 @@ var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
15
15
  var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
16
16
 
17
17
  var THeadCell = function (_a) {
18
+ var _b;
18
19
  var children = _a.children, className = _a.className, dataTestId = _a.dataTestId, style = _a.style, width = _a.width, textAlign = _a.textAlign, hidden = _a.hidden, restProps = tslib_es6.__rest(_a, ["children", "className", "dataTestId", "style", "width", "textAlign", "hidden"]);
19
- var compactHorizontal = React.useContext(components_tableContext_index.TableContext).compactHorizontal;
20
+ var _c = React.useContext(components_tableContext_index.TableContext), compactHorizontal = _c.compactHorizontal, stickyHeader = _c.stickyHeader;
20
21
  if (hidden)
21
22
  return null;
22
- return (React__default['default'].createElement("th", tslib_es6.__assign({ className: cn__default['default'](styles__default['default'].component, className, compactHorizontal && styles__default['default'].compactHorizontal), style: tslib_es6.__assign(tslib_es6.__assign({}, style), { width: width, textAlign: textAlign }), "data-test-id": dataTestId }, restProps), children));
23
+ return (React__default['default'].createElement("th", tslib_es6.__assign({ className: cn__default['default'](styles__default['default'].component, className, compactHorizontal && styles__default['default'].compactHorizontal, (_b = {},
24
+ _b[styles__default['default'].stickyHeader] = stickyHeader,
25
+ _b)), style: tslib_es6.__assign(tslib_es6.__assign({}, style), { width: width, textAlign: textAlign }), "data-test-id": dataTestId }, restProps), children));
23
26
  };
24
27
 
25
28
  exports.THeadCell = THeadCell;
@@ -46,6 +46,13 @@
46
46
  .sorted {
47
47
  color: var(--color-light-text-primary);
48
48
  }
49
+ .stickyHeader {
50
+ top: 0;
51
+ position: sticky;
52
+ box-shadow: inset 0 -1px 0 0 rgba(11, 31, 53, 0.16);
53
+ border: none;
54
+ z-index: 1;
55
+ }
49
56
  .compactHorizontal {
50
57
  padding-left: 6px;
51
58
  padding-right: 6px;
@@ -7,6 +7,7 @@ declare const Table: import("react").ForwardRefExoticComponent<import("react").T
7
7
  wrapper?: boolean | undefined;
8
8
  pagination?: import("react").ReactNode;
9
9
  dataTestId?: string | undefined;
10
+ stickyHeader?: boolean | undefined;
10
11
  } & import("react").RefAttributes<HTMLTableElement>> & {
11
12
  TBody: import("react").FC<import("./components/index").TBodyProps>;
12
13
  THead: import("react").FC<import("./components/index").THeadProps>;
package/esm/component.js CHANGED
@@ -1,4 +1,4 @@
1
- import './tslib.es6-0b627ed6.js';
1
+ import './tslib.es6-73de7bd1.js';
2
2
  import 'react';
3
3
  import 'classnames';
4
4
  import './components/table-context/index.js';
@@ -1,4 +1,4 @@
1
- import '../tslib.es6-0b627ed6.js';
1
+ import '../tslib.es6-73de7bd1.js';
2
2
  import 'react';
3
3
  import 'classnames';
4
4
  import './table-context/index.js';
@@ -1,4 +1,4 @@
1
- import { _ as __rest, a as __assign } from '../../tslib.es6-0b627ed6.js';
1
+ import { _ as __rest, a as __assign } from '../../tslib.es6-73de7bd1.js';
2
2
  import React, { useContext, useMemo, useCallback } from 'react';
3
3
  import cn from 'classnames';
4
4
  import { TableContext } from '../table-context/index.js';
@@ -7,7 +7,7 @@ import { Select } from '@alfalab/core-components-select/esm';
7
7
  import '@alfalab/core-components-button/esm';
8
8
  import { CustomSelectField } from './select-field/index.js';
9
9
 
10
- var styles = {"component":"table__component_s5an6","pagesWrapper":"table__pagesWrapper_s5an6","tag":"table__tag_s5an6","tagActive":"table__tagActive_s5an6","menu":"table__menu_s5an6","option":"table__option_s5an6"};
10
+ var styles = {"component":"table__component_1xtw6","pagesWrapper":"table__pagesWrapper_1xtw6","tag":"table__tag_1xtw6","tagActive":"table__tagActive_1xtw6","menu":"table__menu_1xtw6","option":"table__option_1xtw6"};
11
11
  require('./index.css')
12
12
 
13
13
  var Pagination = function (_a) {
@@ -1,4 +1,4 @@
1
- /* hash: t4a06 */
1
+ /* hash: 1hrhe */
2
2
  :root {
3
3
  --color-light-border-primary: #dbdee1;
4
4
  }
@@ -17,7 +17,7 @@
17
17
  --gap-xl: 24px;
18
18
  --gap-2xl: 32px;
19
19
  }
20
- .table__component_s5an6 {
20
+ .table__component_1xtw6 {
21
21
  display: flex;
22
22
  justify-content: space-between;
23
23
  align-items: flex-start;
@@ -26,24 +26,24 @@
26
26
  border-top: 1px solid var(--color-light-border-primary);
27
27
  box-sizing: border-box;
28
28
  }
29
- .table__pagesWrapper_s5an6 {
29
+ .table__pagesWrapper_1xtw6 {
30
30
  display: flex;
31
31
  }
32
- .table__tag_s5an6.table__tag_s5an6 {
32
+ .table__tag_1xtw6.table__tag_1xtw6 {
33
33
  flex-shrink: 0;
34
34
  margin-right: var(--gap-xs);
35
35
  padding: 0 var(--gap-xs);
36
36
  min-width: 32px
37
37
  }
38
- .table__tag_s5an6.table__tag_s5an6:last-child {
38
+ .table__tag_1xtw6.table__tag_1xtw6:last-child {
39
39
  margin-right: 0;
40
40
  }
41
- .table__tag_s5an6.table__tag_s5an6.table__tagActive_s5an6 {
41
+ .table__tag_1xtw6.table__tag_1xtw6.table__tagActive_1xtw6 {
42
42
  cursor: default;
43
43
  }
44
- .table__menu_s5an6 {
44
+ .table__menu_1xtw6 {
45
45
  margin: var(--gap-2xs) 0;
46
46
  }
47
- .table__option_s5an6 {
47
+ .table__option_1xtw6 {
48
48
  min-width: 208px;
49
49
  }
@@ -1,4 +1,4 @@
1
- import '../../tslib.es6-0b627ed6.js';
1
+ import '../../tslib.es6-73de7bd1.js';
2
2
  import 'react';
3
3
  import 'classnames';
4
4
  import '../table-context/index.js';
@@ -1,4 +1,4 @@
1
- /* hash: 17iw2 */
1
+ /* hash: 1vzyb */
2
2
  :root {
3
3
  --color-light-specialbg-component-shade-7: rgba(10, 29, 49, 0.1351);
4
4
  }
@@ -10,11 +10,11 @@
10
10
 
11
11
  /* Hard up */
12
12
  }
13
- .table__field_1747u svg {
13
+ .table__field_drpc1 svg {
14
14
  width: 18px;
15
15
  height: 18px;
16
16
  }
17
- .table__open_1747u,
18
- .table__open_1747u:hover {
17
+ .table__open_drpc1,
18
+ .table__open_drpc1:hover {
19
19
  background-color: var(--color-light-specialbg-component-shade-7);
20
20
  }
@@ -1,9 +1,9 @@
1
- import { _ as __rest, a as __assign } from '../../../tslib.es6-0b627ed6.js';
1
+ import { _ as __rest, a as __assign } from '../../../tslib.es6-73de7bd1.js';
2
2
  import React from 'react';
3
3
  import cn from 'classnames';
4
4
  import { Button } from '@alfalab/core-components-button/esm';
5
5
 
6
- var styles = {"field":"table__field_1747u","open":"table__open_1747u"};
6
+ var styles = {"field":"table__field_drpc1","open":"table__open_drpc1"};
7
7
  require('./index.css')
8
8
 
9
9
  var CustomSelectField = function (_a) {
@@ -30,6 +30,10 @@ type TableProps = TableHTMLAttributes<HTMLTableElement> & {
30
30
  * Идентификатор для систем автоматизированного тестирования
31
31
  */
32
32
  dataTestId?: string;
33
+ /**
34
+ * Если true то заголовок будет фиксироваться при скроле
35
+ */
36
+ stickyHeader?: boolean;
33
37
  };
34
38
  declare const Table: React.ForwardRefExoticComponent<React.TableHTMLAttributes<HTMLTableElement> & {
35
39
  /**
@@ -60,5 +64,9 @@ declare const Table: React.ForwardRefExoticComponent<React.TableHTMLAttributes<H
60
64
  * Идентификатор для систем автоматизированного тестирования
61
65
  */
62
66
  dataTestId?: string | undefined;
67
+ /**
68
+ * Если true то заголовок будет фиксироваться при скроле
69
+ */
70
+ stickyHeader?: boolean | undefined;
63
71
  } & React.RefAttributes<HTMLTableElement>>;
64
72
  export { TableProps, Table };
@@ -1,4 +1,4 @@
1
- import { _ as __rest, a as __assign } from '../../tslib.es6-0b627ed6.js';
1
+ import { _ as __rest, a as __assign } from '../../tslib.es6-73de7bd1.js';
2
2
  import React, { forwardRef, useRef, useMemo } from 'react';
3
3
  import cn from 'classnames';
4
4
  import { TableContext } from '../table-context/index.js';
@@ -6,12 +6,12 @@ import '../../utils.js';
6
6
  import '../thead/Component.js';
7
7
  import { findAllHeadCellsProps } from './utils.js';
8
8
 
9
- var styles = {"component":"table__component_ek6bj","wrapper":"table__wrapper_ek6bj","hasPagination":"table__hasPagination_ek6bj","table":"table__table_ek6bj"};
9
+ var styles = {"component":"table__component_11ycg","wrapper":"table__wrapper_11ycg","stickyHeader":"table__stickyHeader_11ycg","hasPagination":"table__hasPagination_11ycg","table":"table__table_11ycg"};
10
10
  require('./index.css')
11
11
 
12
12
  var Table = forwardRef(function (_a, ref) {
13
13
  var _b;
14
- var className = _a.className, children = _a.children, _c = _a.compactView, compactView = _c === void 0 ? false : _c, _d = _a.compactHorizontal, compactHorizontal = _d === void 0 ? false : _d, _e = _a.wrapper, wrapper = _e === void 0 ? true : _e, pagination = _a.pagination, dataTestId = _a.dataTestId, restProps = __rest(_a, ["className", "children", "compactView", "compactHorizontal", "wrapper", "pagination", "dataTestId"]);
14
+ var className = _a.className, children = _a.children, _c = _a.compactView, compactView = _c === void 0 ? false : _c, _d = _a.compactHorizontal, compactHorizontal = _d === void 0 ? false : _d, _e = _a.wrapper, wrapper = _e === void 0 ? true : _e, pagination = _a.pagination, dataTestId = _a.dataTestId, _f = _a.stickyHeader, stickyHeader = _f === void 0 ? false : _f, restProps = __rest(_a, ["className", "children", "compactView", "compactHorizontal", "wrapper", "pagination", "dataTestId", "stickyHeader"]);
15
15
  var wrapperRef = useRef(null);
16
16
  var columnsConfiguration = useMemo(function () {
17
17
  return findAllHeadCellsProps(children).map(function (columnProps, index) { return ({
@@ -23,6 +23,7 @@ var Table = forwardRef(function (_a, ref) {
23
23
  }, [children]);
24
24
  /* eslint-disable react/jsx-no-constructed-context-values */
25
25
  return (React.createElement(TableContext.Provider, { value: {
26
+ stickyHeader: stickyHeader,
26
27
  columnsConfiguration: columnsConfiguration,
27
28
  compactView: compactView,
28
29
  compactHorizontal: compactHorizontal,
@@ -31,6 +32,7 @@ var Table = forwardRef(function (_a, ref) {
31
32
  React.createElement("div", { ref: wrapperRef, className: cn(styles.component, className, (_b = {},
32
33
  _b[styles.wrapper] = wrapper,
33
34
  _b[styles.hasPagination] = !!pagination,
35
+ _b[styles.stickyHeader] = stickyHeader,
34
36
  _b)), "data-test-id": dataTestId },
35
37
  React.createElement("table", __assign({ ref: ref, className: styles.table }, restProps), children),
36
38
  pagination)));
@@ -1,4 +1,4 @@
1
- /* hash: 1anmq */
1
+ /* hash: 1u3sg */
2
2
  :root {
3
3
  --color-light-bg-primary: #fff;
4
4
  }
@@ -18,26 +18,29 @@
18
18
  :root {
19
19
  --border-radius-m: 8px;
20
20
  }
21
- .table__component_ek6bj {
21
+ .table__component_11ycg {
22
22
  box-sizing: border-box;
23
23
  }
24
- .table__wrapper_ek6bj {
24
+ .table__wrapper_11ycg {
25
25
  padding: 0 var(--gap-m) var(--gap-m);
26
26
  background: var(--color-light-bg-primary);
27
27
  box-shadow: var(--shadow-xs-hard);
28
28
  border-radius: var(--border-radius-m);
29
29
  overflow: auto;
30
30
  }
31
- .table__hasPagination_ek6bj {
31
+ .table__stickyHeader_11ycg {
32
+ max-height: 100%;
33
+ }
34
+ .table__hasPagination_11ycg {
32
35
  padding-bottom: 0;
33
36
  }
34
- .table__table_ek6bj {
37
+ .table__table_11ycg {
35
38
  width: 100%;
36
39
  border-collapse: collapse;
37
40
  box-sizing: border-box
38
41
 
39
42
  /* TODO: Хак для выравнивания чекбокса */
40
43
  }
41
- .table__table_ek6bj td:first-child label > *[class^='box'], .table__table_ek6bj th:first-child label > *[class^='box'] {
44
+ .table__table_11ycg td:first-child label > *[class^='box'], .table__table_11ycg th:first-child label > *[class^='box'] {
42
45
  margin-top: 0;
43
46
  }
@@ -1,4 +1,4 @@
1
- import '../../tslib.es6-0b627ed6.js';
1
+ import '../../tslib.es6-73de7bd1.js';
2
2
  import 'react';
3
3
  import 'classnames';
4
4
  import '../table-context/index.js';
@@ -1,4 +1,4 @@
1
- import '../../tslib.es6-0b627ed6.js';
1
+ import '../../tslib.es6-73de7bd1.js';
2
2
  import React from 'react';
3
3
  import 'classnames';
4
4
  import { isChildInstanceOf } from '../../utils.js';
@@ -10,6 +10,7 @@ type ColumnConfiguration = {
10
10
  };
11
11
  type TableContextType = {
12
12
  columnsConfiguration: ColumnConfiguration[];
13
+ stickyHeader: boolean;
13
14
  compactView: boolean;
14
15
  compactHorizontal: boolean;
15
16
  wrapperRef: RefObject<HTMLDivElement>;
@@ -3,6 +3,7 @@ import React from 'react';
3
3
  var DEFAULT_TABLE_CONTEXT = {
4
4
  columnsConfiguration: [],
5
5
  compactView: false,
6
+ stickyHeader: false,
6
7
  compactHorizontal: false,
7
8
  wrapperRef: { current: null },
8
9
  };
@@ -1,8 +1,8 @@
1
- import { _ as __rest, a as __assign } from '../../tslib.es6-0b627ed6.js';
1
+ import { _ as __rest, a as __assign } from '../../tslib.es6-73de7bd1.js';
2
2
  import React from 'react';
3
3
  import cn from 'classnames';
4
4
 
5
- var styles = {"component":"table__component_15gn4"};
5
+ var styles = {"component":"table__component_12qeu"};
6
6
  require('./index.css')
7
7
 
8
8
  var TBody = function (_a) {
@@ -1,4 +1,4 @@
1
- /* hash: j1nrt */
1
+ /* hash: 1vj3r */
2
2
  :root {
3
3
 
4
4
  /* Hard */
@@ -7,7 +7,7 @@
7
7
 
8
8
  /* Hard up */
9
9
  }
10
- .table__component_15gn4 {
10
+ .table__component_12qeu {
11
11
  width: 100%;
12
12
  box-sizing: border-box;
13
13
  }
@@ -1,4 +1,4 @@
1
- import '../../tslib.es6-0b627ed6.js';
1
+ import '../../tslib.es6-73de7bd1.js';
2
2
  import 'react';
3
3
  import 'classnames';
4
4
  export { TBody } from './Component.js';
@@ -1,9 +1,9 @@
1
- import { _ as __rest, a as __assign } from '../../tslib.es6-0b627ed6.js';
1
+ import { _ as __rest, a as __assign } from '../../tslib.es6-73de7bd1.js';
2
2
  import React, { useContext } from 'react';
3
3
  import cn from 'classnames';
4
4
  import { TableContext } from '../table-context/index.js';
5
5
 
6
- var styles = {"component":"table__component_rcnyn","compactHorizontal":"table__compactHorizontal_rcnyn","compact":"table__compact_rcnyn"};
6
+ var styles = {"component":"table__component_1018l","compactHorizontal":"table__compactHorizontal_1018l","compact":"table__compact_1018l"};
7
7
  require('./index.css')
8
8
 
9
9
  var TCell = function (_a) {
@@ -1,4 +1,4 @@
1
- /* hash: 15hdv */
1
+ /* hash: 1l689 */
2
2
  :root {
3
3
  --color-light-border-primary: #dbdee1;
4
4
  --color-light-text-primary: #0b1f35;
@@ -17,7 +17,7 @@
17
17
  --gap-m: 16px;
18
18
  --gap-xl: 24px;
19
19
  }
20
- .table__component_rcnyn {
20
+ .table__component_1018l {
21
21
  font-size: 14px;
22
22
  line-height: 20px;
23
23
  font-weight: 400;
@@ -29,17 +29,17 @@
29
29
  vertical-align: top;
30
30
  box-sizing: border-box
31
31
  }
32
- .table__component_rcnyn:first-child {
32
+ .table__component_1018l:first-child {
33
33
  padding-left: var(--gap-m);
34
34
  }
35
- .table__component_rcnyn:last-child {
35
+ .table__component_1018l:last-child {
36
36
  padding-right: var(--gap-m);
37
37
  }
38
- .table__compactHorizontal_rcnyn {
38
+ .table__compactHorizontal_1018l {
39
39
  padding-left: 6px;
40
40
  padding-right: 6px;
41
41
  }
42
- .table__compact_rcnyn {
42
+ .table__compact_1018l {
43
43
  padding-top: var(--gap-xs);
44
44
  padding-bottom: var(--gap-xs);
45
45
 
@@ -1,4 +1,4 @@
1
- import '../../tslib.es6-0b627ed6.js';
1
+ import '../../tslib.es6-73de7bd1.js';
2
2
  import 'react';
3
3
  import 'classnames';
4
4
  import '../table-context/index.js';