@alfalab/core-components-table 2.0.2 → 2.1.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 (132) hide show
  1. package/component.d.ts +3 -2
  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 +9 -4
  11. package/components/table/index.css +6 -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.d.ts +1 -1
  20. package/components/tcell/Component.js +6 -4
  21. package/components/tcell/index.css +15 -7
  22. package/components/tcell/index.js +1 -1
  23. package/components/texpandable-row/Component.js +2 -2
  24. package/components/texpandable-row/index.css +5 -5
  25. package/components/texpandable-row/index.js +1 -1
  26. package/components/thead/Component.js +2 -2
  27. package/components/thead/index.css +11 -8
  28. package/components/thead/index.js +1 -1
  29. package/components/thead-cell/Component.d.ts +1 -1
  30. package/components/thead-cell/Component.js +7 -3
  31. package/components/thead-cell/index.css +16 -8
  32. package/components/thead-cell/index.js +2 -1
  33. package/components/trow/Component.js +2 -2
  34. package/components/trow/index.css +8 -8
  35. package/components/trow/index.js +1 -1
  36. package/components/tsortable-head-cell/Component.js +3 -2
  37. package/components/tsortable-head-cell/index.css +9 -9
  38. package/components/tsortable-head-cell/index.js +2 -1
  39. package/components/tsortable-head-cell/sort-icon-asc.js +1 -1
  40. package/components/tsortable-head-cell/sort-icon-desc.js +1 -1
  41. package/components/tsortable-head-cell/sort-icon-unset.js +1 -1
  42. package/cssm/component.d.ts +3 -2
  43. package/cssm/components/table/Component.d.ts +8 -0
  44. package/cssm/components/table/Component.js +7 -2
  45. package/cssm/components/table-context/index.d.ts +1 -0
  46. package/cssm/components/table-context/index.js +1 -0
  47. package/cssm/components/tcell/Component.d.ts +1 -1
  48. package/cssm/components/tcell/Component.js +4 -2
  49. package/cssm/components/tcell/index.module.css +12 -4
  50. package/cssm/components/thead/index.module.css +5 -2
  51. package/cssm/components/thead-cell/Component.d.ts +1 -1
  52. package/cssm/components/thead-cell/Component.js +5 -1
  53. package/cssm/components/thead-cell/index.js +1 -0
  54. package/cssm/components/thead-cell/index.module.css +12 -4
  55. package/cssm/components/tsortable-head-cell/Component.js +1 -0
  56. package/cssm/components/tsortable-head-cell/index.js +1 -0
  57. package/esm/component.d.ts +3 -2
  58. package/esm/component.js +1 -1
  59. package/esm/components/index.js +1 -1
  60. package/esm/components/pagination/Component.js +2 -2
  61. package/esm/components/pagination/index.css +8 -8
  62. package/esm/components/pagination/index.js +1 -1
  63. package/esm/components/pagination/select-field/index.css +4 -4
  64. package/esm/components/pagination/select-field/index.js +2 -2
  65. package/esm/components/table/Component.d.ts +8 -0
  66. package/esm/components/table/Component.js +9 -4
  67. package/esm/components/table/index.css +6 -6
  68. package/esm/components/table/index.js +1 -1
  69. package/esm/components/table/utils.js +1 -1
  70. package/esm/components/table-context/index.d.ts +1 -0
  71. package/esm/components/table-context/index.js +1 -0
  72. package/esm/components/tbody/Component.js +2 -2
  73. package/esm/components/tbody/index.css +2 -2
  74. package/esm/components/tbody/index.js +1 -1
  75. package/esm/components/tcell/Component.d.ts +1 -1
  76. package/esm/components/tcell/Component.js +6 -4
  77. package/esm/components/tcell/index.css +15 -7
  78. package/esm/components/tcell/index.js +1 -1
  79. package/esm/components/texpandable-row/Component.js +2 -2
  80. package/esm/components/texpandable-row/index.css +5 -5
  81. package/esm/components/texpandable-row/index.js +1 -1
  82. package/esm/components/thead/Component.js +2 -2
  83. package/esm/components/thead/index.css +11 -8
  84. package/esm/components/thead/index.js +1 -1
  85. package/esm/components/thead-cell/Component.d.ts +1 -1
  86. package/esm/components/thead-cell/Component.js +8 -4
  87. package/esm/components/thead-cell/index.css +16 -8
  88. package/esm/components/thead-cell/index.js +2 -1
  89. package/esm/components/trow/Component.js +2 -2
  90. package/esm/components/trow/index.css +8 -8
  91. package/esm/components/trow/index.js +1 -1
  92. package/esm/components/tsortable-head-cell/Component.js +3 -2
  93. package/esm/components/tsortable-head-cell/index.css +9 -9
  94. package/esm/components/tsortable-head-cell/index.js +2 -1
  95. package/esm/components/tsortable-head-cell/sort-icon-asc.js +1 -1
  96. package/esm/components/tsortable-head-cell/sort-icon-desc.js +1 -1
  97. package/esm/components/tsortable-head-cell/sort-icon-unset.js +1 -1
  98. package/esm/index.js +1 -1
  99. package/esm/{tslib.es6-9eeb595d.d.ts → tslib.es6-9107aa60.d.ts} +0 -0
  100. package/esm/{tslib.es6-9eeb595d.js → tslib.es6-9107aa60.js} +0 -0
  101. package/index.js +1 -1
  102. package/modern/component.d.ts +3 -2
  103. package/modern/components/pagination/Component.js +1 -1
  104. package/modern/components/pagination/index.css +8 -8
  105. package/modern/components/pagination/select-field/index.css +4 -4
  106. package/modern/components/pagination/select-field/index.js +1 -1
  107. package/modern/components/table/Component.d.ts +8 -0
  108. package/modern/components/table/Component.js +8 -3
  109. package/modern/components/table/index.css +6 -6
  110. package/modern/components/table-context/index.d.ts +1 -0
  111. package/modern/components/table-context/index.js +1 -0
  112. package/modern/components/tbody/Component.js +1 -1
  113. package/modern/components/tbody/index.css +2 -2
  114. package/modern/components/tcell/Component.d.ts +1 -1
  115. package/modern/components/tcell/Component.js +5 -3
  116. package/modern/components/tcell/index.css +15 -7
  117. package/modern/components/texpandable-row/Component.js +1 -1
  118. package/modern/components/texpandable-row/index.css +5 -5
  119. package/modern/components/thead/Component.js +1 -1
  120. package/modern/components/thead/index.css +11 -8
  121. package/modern/components/thead-cell/Component.d.ts +1 -1
  122. package/modern/components/thead-cell/Component.js +9 -3
  123. package/modern/components/thead-cell/index.css +16 -8
  124. package/modern/components/thead-cell/index.js +1 -0
  125. package/modern/components/trow/Component.js +1 -1
  126. package/modern/components/trow/index.css +8 -8
  127. package/modern/components/tsortable-head-cell/Component.js +2 -1
  128. package/modern/components/tsortable-head-cell/index.css +9 -9
  129. package/modern/components/tsortable-head-cell/index.js +1 -0
  130. package/package.json +4 -4
  131. /package/{tslib.es6-f2bbdbee.d.ts → tslib.es6-1bdb4617.d.ts} +0 -0
  132. /package/{tslib.es6-f2bbdbee.js → tslib.es6-1bdb4617.js} +0 -0
@@ -1,4 +1,4 @@
1
- /* hash: pco7x */
1
+ /* hash: fq1w */
2
2
  :root {
3
3
  --color-light-bg-primary: #fff;
4
4
  --color-light-border-primary: #dbdee1;
@@ -14,10 +14,11 @@
14
14
  }
15
15
  :root {
16
16
  --gap-2xs: 4px;
17
+ --gap-s: 12px;
17
18
  --gap-m: 16px;
18
19
  --gap-2xl: 32px;
19
20
  }
20
- .table__component_z51xx {
21
+ .table__component_f3eyf {
21
22
  font-size: 12px;
22
23
  line-height: 16px;
23
24
  font-weight: 500;
@@ -28,18 +29,25 @@
28
29
  position: relative;
29
30
  text-align: left;
30
31
  color: var(--color-light-text-primary);
31
- padding: var(--gap-2xl) var(--gap-m) var(--gap-2xs);
32
+ padding: var(--gap-2xl) var(--gap-s) var(--gap-2xs);
32
33
  border-bottom: 1px solid var(--color-light-border-primary);
33
34
  background: var(--color-light-bg-primary);
34
35
  vertical-align: top;
35
- box-sizing: border-box;
36
+ box-sizing: border-box
36
37
  }
37
- .table__sortable_z51xx {
38
+ .table__component_f3eyf:first-child {
39
+ padding-left: var(--gap-m);
40
+ }
41
+ .table__component_f3eyf:last-child {
42
+ padding-right: var(--gap-m);
43
+ }
44
+ .table__sortable_f3eyf {
38
45
  cursor: pointer;
39
46
  }
40
- .table__sorted_z51xx {
47
+ .table__sorted_f3eyf {
41
48
  color: var(--color-light-text-primary);
42
49
  }
43
- .table__hidden_z51xx {
44
- display: none;
50
+ .table__compactHorizontal_f3eyf {
51
+ padding-left: 6px;
52
+ padding-right: 6px;
45
53
  }
@@ -2,9 +2,10 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- require('../../tslib.es6-f2bbdbee.js');
5
+ require('../../tslib.es6-1bdb4617.js');
6
6
  require('react');
7
7
  require('classnames');
8
+ require('../table-context/index.js');
8
9
  var components_theadCell_Component = require('./Component.js');
9
10
 
10
11
 
@@ -2,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var tslib_es6 = require('../../tslib.es6-f2bbdbee.js');
5
+ var tslib_es6 = require('../../tslib.es6-1bdb4617.js');
6
6
  var React = require('react');
7
7
  var cn = require('classnames');
8
8
 
@@ -11,7 +11,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
11
11
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
12
12
  var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
13
13
 
14
- var styles = {"component":"table__component_w3w3e","withoutBorder":"table__withoutBorder_w3w3e","clickable":"table__clickable_w3w3e","selected":"table__selected_w3w3e"};
14
+ var styles = {"component":"table__component_1oms6","withoutBorder":"table__withoutBorder_1oms6","clickable":"table__clickable_1oms6","selected":"table__selected_1oms6"};
15
15
  require('./index.css')
16
16
 
17
17
  var TRow = function (_a) {
@@ -1,4 +1,4 @@
1
- /* hash: s93ii */
1
+ /* hash: 19pqq */
2
2
  :root {
3
3
  --color-static-graphic-solitude: #e8f2fe;
4
4
  }
@@ -14,30 +14,30 @@
14
14
 
15
15
  /* Hard up */
16
16
  }
17
- .table__component_w3w3e {
17
+ .table__component_1oms6 {
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_w3w3e:first-child td {
24
+ .table__component_1oms6:first-child td {
25
25
  border-top: 0;
26
26
  }
27
- .table__withoutBorder_w3w3e {
27
+ .table__withoutBorder_1oms6 {
28
28
  td {
29
29
  border: none;
30
30
  }
31
31
  }
32
- .table__clickable_w3w3e {
32
+ .table__clickable_1oms6 {
33
33
  cursor: pointer
34
34
  }
35
- .table__clickable_w3w3e:hover {
35
+ .table__clickable_1oms6:hover {
36
36
  background-color: var(--color-light-bg-secondary);
37
37
  }
38
- .table__selected_w3w3e {
38
+ .table__selected_1oms6 {
39
39
  background-color: #f2f8ff /* нет цвета в палитре */
40
40
  }
41
- .table__selected_w3w3e:hover {
41
+ .table__selected_1oms6:hover {
42
42
  background-color: var(--color-static-graphic-solitude);
43
43
  }
@@ -2,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- require('../../tslib.es6-f2bbdbee.js');
5
+ require('../../tslib.es6-1bdb4617.js');
6
6
  require('react');
7
7
  require('classnames');
8
8
  var components_trow_Component = require('./Component.js');
@@ -2,9 +2,10 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var tslib_es6 = require('../../tslib.es6-f2bbdbee.js');
5
+ var tslib_es6 = require('../../tslib.es6-1bdb4617.js');
6
6
  var React = require('react');
7
7
  var cn = require('classnames');
8
+ require('../table-context/index.js');
8
9
  var components_theadCell_Component = require('../thead-cell/Component.js');
9
10
  var components_tsortableHeadCell_sortIconAsc = require('./sort-icon-asc.js');
10
11
  var components_tsortableHeadCell_sortIconDesc = require('./sort-icon-desc.js');
@@ -15,7 +16,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
15
16
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
16
17
  var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
17
18
 
18
- var styles = {"component":"table__component_ymiin","content":"table__content_ymiin","icon":"table__icon_ymiin","reverse":"table__reverse_ymiin","sorted":"table__sorted_ymiin"};
19
+ var styles = {"component":"table__component_1yjh7","content":"table__content_1yjh7","icon":"table__icon_1yjh7","reverse":"table__reverse_1yjh7","sorted":"table__sorted_1yjh7"};
19
20
  require('./index.css')
20
21
 
21
22
  var TSortableHeadCell = function (_a) {
@@ -1,4 +1,4 @@
1
- /* hash: jgk0c */
1
+ /* hash: 10x78 */
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_ymiin {
18
+ .table__component_1yjh7 {
19
19
  position: relative;
20
20
  }
21
- .table__content_ymiin {
21
+ .table__content_1yjh7 {
22
22
  display: flex;
23
23
  align-items: flex-start;
24
24
  }
25
- .table__icon_ymiin {
25
+ .table__icon_1yjh7 {
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_ymiin:hover {
38
+ .table__icon_1yjh7:hover {
39
39
  color: var(--color-light-graphic-primary);
40
40
  }
41
- .table__reverse_ymiin {
41
+ .table__reverse_1yjh7 {
42
42
  flex-direction: row-reverse
43
43
  }
44
- .table__reverse_ymiin .table__icon_ymiin {
44
+ .table__reverse_1yjh7 .table__icon_1yjh7 {
45
45
  margin-left: 0;
46
46
  margin-right: var(--gap-xs);
47
47
  }
48
- .table__sorted_ymiin {
48
+ .table__sorted_1yjh7 {
49
49
  color: var(--color-light-graphic-link)
50
50
  }
51
- .table__sorted_ymiin:hover {
51
+ .table__sorted_1yjh7:hover {
52
52
  color: var(--color-light-graphic-link);
53
53
  }
@@ -2,9 +2,10 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- require('../../tslib.es6-f2bbdbee.js');
5
+ require('../../tslib.es6-1bdb4617.js');
6
6
  require('react');
7
7
  require('classnames');
8
+ require('../table-context/index.js');
8
9
  require('../thead-cell/Component.js');
9
10
  var components_tsortableHeadCell_Component = require('./Component.js');
10
11
  require('./sort-icon-asc.js');
@@ -2,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var tslib_es6 = require('../../tslib.es6-f2bbdbee.js');
5
+ var tslib_es6 = require('../../tslib.es6-1bdb4617.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-f2bbdbee.js');
5
+ var tslib_es6 = require('../../tslib.es6-1bdb4617.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-f2bbdbee.js');
5
+ var tslib_es6 = require('../../tslib.es6-1bdb4617.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 }; }
@@ -1,6 +1,7 @@
1
1
  /// <reference types="react" />
2
2
  declare const Table: import("react").ForwardRefExoticComponent<import("react").TableHTMLAttributes<HTMLTableElement> & {
3
3
  compactView?: boolean | undefined;
4
+ compactHorizontal?: boolean | undefined;
4
5
  className?: string | undefined;
5
6
  children: import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>[];
6
7
  wrapper?: boolean | undefined;
@@ -9,9 +10,9 @@ declare const Table: import("react").ForwardRefExoticComponent<import("react").T
9
10
  } & import("react").RefAttributes<HTMLTableElement>> & {
10
11
  TBody: import("react").FC<import("./components/index").TBodyProps>;
11
12
  THead: import("react").FC<import("./components/index").THeadProps>;
12
- THeadCell: ({ children, className, dataTestId, style, width, textAlign, hidden, ...restProps }: import("./components/index").THeadCellProps) => JSX.Element;
13
+ THeadCell: ({ children, className, dataTestId, style, width, textAlign, hidden, ...restProps }: import("./components/index").THeadCellProps) => JSX.Element | null;
13
14
  TSortableHeadCell: ({ children, className, defaultIsSortedDesc, isSortedDesc, textAlign, onSort, ...restProps }: import("./components/index").TSortableHeadCellProps) => JSX.Element;
14
- TCell: ({ className, style, dataTestId, children, index, ...restProps }: import("./components/index").TCellProps) => JSX.Element;
15
+ TCell: ({ className, style, dataTestId, children, index, ...restProps }: import("./components/index").TCellProps) => JSX.Element | null;
15
16
  TRow: ({ children, className, selected, withoutBorder, dataTestId, ...restProps }: import("./components/index").TRowProps) => JSX.Element;
16
17
  TExpandableRow: ({ className, selected, expanded, defaultExpanded, onToggle, renderContent, ...restProps }: import("./components/index").TExpandableRowProps) => JSX.Element;
17
18
  Pagination: import("react").FC<import("packages/pagination/src").PaginationProps & {
@@ -6,6 +6,10 @@ type TableProps = TableHTMLAttributes<HTMLTableElement> & {
6
6
  * Компактный вид
7
7
  */
8
8
  compactView?: boolean;
9
+ /**
10
+ * Уменьшение горизонтальных паддингов
11
+ */
12
+ compactHorizontal?: boolean;
9
13
  /**
10
14
  * Дополнительный класс
11
15
  */
@@ -32,6 +36,10 @@ declare const Table: React.ForwardRefExoticComponent<React.TableHTMLAttributes<H
32
36
  * Компактный вид
33
37
  */
34
38
  compactView?: boolean | undefined;
39
+ /**
40
+ * Уменьшение горизонтальных паддингов
41
+ */
42
+ compactHorizontal?: boolean | undefined;
35
43
  /**
36
44
  * Дополнительный класс
37
45
  */
@@ -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.wrapper, wrapper = _d === void 0 ? true : _d, pagination = _a.pagination, dataTestId = _a.dataTestId, restProps = tslib_es6.__rest(_a, ["className", "children", "compactView", "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, restProps = tslib_es6.__rest(_a, ["className", "children", "compactView", "compactHorizontal", "wrapper", "pagination", "dataTestId"]);
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 ({
@@ -30,7 +30,12 @@ var Table = React.forwardRef(function (_a, ref) {
30
30
  index: index,
31
31
  }); });
32
32
  }, [children]);
33
- return (React__default['default'].createElement(components_tableContext_index.TableContext.Provider, { value: { columnsConfiguration: columnsConfiguration, compactView: compactView, wrapperRef: wrapperRef } },
33
+ return (React__default['default'].createElement(components_tableContext_index.TableContext.Provider, { value: {
34
+ columnsConfiguration: columnsConfiguration,
35
+ compactView: compactView,
36
+ compactHorizontal: compactHorizontal,
37
+ wrapperRef: wrapperRef,
38
+ } },
34
39
  React__default['default'].createElement("div", { ref: wrapperRef, className: cn__default['default'](styles__default['default'].component, className, (_b = {},
35
40
  _b[styles__default['default'].wrapper] = wrapper,
36
41
  _b[styles__default['default'].hasPagination] = !!pagination,
@@ -11,6 +11,7 @@ type ColumnConfiguration = {
11
11
  type TableContextType = {
12
12
  columnsConfiguration: ColumnConfiguration[];
13
13
  compactView: boolean;
14
+ compactHorizontal: boolean;
14
15
  wrapperRef: RefObject<HTMLDivElement>;
15
16
  };
16
17
  declare const DEFAULT_TABLE_CONTEXT: TableContextType;
@@ -11,6 +11,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
11
11
  var DEFAULT_TABLE_CONTEXT = {
12
12
  columnsConfiguration: [],
13
13
  compactView: false,
14
+ compactHorizontal: false,
14
15
  wrapperRef: { current: null },
15
16
  };
16
17
  var TableContext = React__default['default'].createContext(DEFAULT_TABLE_CONTEXT);
@@ -14,5 +14,5 @@ type TCellProps = TdHTMLAttributes<HTMLTableCellElement> & {
14
14
  */
15
15
  index?: number;
16
16
  };
17
- declare const TCell: ({ className, style, dataTestId, children, index, ...restProps }: TCellProps) => JSX.Element;
17
+ declare const TCell: ({ className, style, dataTestId, children, index, ...restProps }: TCellProps) => JSX.Element | null;
18
18
  export { TCellProps, TCell };
@@ -16,12 +16,14 @@ var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
16
16
 
17
17
  var TCell = function (_a) {
18
18
  var className = _a.className, style = _a.style, dataTestId = _a.dataTestId, children = _a.children, index = _a.index, restProps = tslib_es6.__rest(_a, ["className", "style", "dataTestId", "children", "index"]);
19
- var _b = React.useContext(components_tableContext_index.TableContext), columnsConfiguration = _b.columnsConfiguration, compactView = _b.compactView;
19
+ var _b = React.useContext(components_tableContext_index.TableContext), columnsConfiguration = _b.columnsConfiguration, compactView = _b.compactView, compactHorizontal = _b.compactHorizontal;
20
20
  var column = index === undefined ? null : columnsConfiguration[index];
21
21
  var width = column === null || column === void 0 ? void 0 : column.width;
22
22
  var textAlign = column === null || column === void 0 ? void 0 : column.textAlign;
23
23
  var hidden = (column === null || column === void 0 ? void 0 : column.hidden) || false;
24
- return (React__default['default'].createElement("td", tslib_es6.__assign({ className: cn__default['default'](styles__default['default'].component, className, hidden && styles__default['default'].hidden, compactView && styles__default['default'].compact), style: tslib_es6.__assign(tslib_es6.__assign({}, style), { width: width, textAlign: textAlign }), "data-test-id": dataTestId }, restProps), children));
24
+ if (hidden)
25
+ return null;
26
+ return (React__default['default'].createElement("td", tslib_es6.__assign({ className: cn__default['default'](styles__default['default'].component, className, compactView && styles__default['default'].compact, compactHorizontal && styles__default['default'].compactHorizontal), style: tslib_es6.__assign(tslib_es6.__assign({}, style), { width: width, textAlign: textAlign }), "data-test-id": dataTestId }, restProps), children));
25
27
  };
26
28
 
27
29
  exports.TCell = TCell;
@@ -12,6 +12,7 @@
12
12
  }
13
13
  :root {
14
14
  --gap-xs: 8px;
15
+ --gap-s: 12px;
15
16
  --gap-m: 16px;
16
17
  --gap-xl: 24px;
17
18
  }
@@ -21,14 +22,21 @@
21
22
  font-weight: 400;
22
23
 
23
24
  color: var(--color-light-text-primary);
24
- padding: var(--gap-xl) var(--gap-m);
25
+ padding: var(--gap-xl) var(--gap-s);
25
26
  height: 72px;
26
27
  border-top: 1px solid var(--color-light-border-primary);
27
28
  vertical-align: top;
28
- box-sizing: border-box;
29
+ box-sizing: border-box
29
30
  }
30
- .hidden {
31
- display: none;
31
+ .component:first-child {
32
+ padding-left: var(--gap-m);
33
+ }
34
+ .component:last-child {
35
+ padding-right: var(--gap-m);
36
+ }
37
+ .compactHorizontal {
38
+ padding-left: 6px;
39
+ padding-right: 6px;
32
40
  }
33
41
  .compact {
34
42
  padding-top: var(--gap-xs);
@@ -9,6 +9,9 @@
9
9
 
10
10
  /* Hard up */
11
11
  }
12
+ :root {
13
+ --gap-xs: 8px;
14
+ }
12
15
  .component {
13
16
  position: relative;
14
17
  width: 100%;
@@ -22,8 +25,8 @@
22
25
 
23
26
  width: 1px;
24
27
  right: 0;
25
- top: 12px;
26
- bottom: 8px;
28
+ top: var(--gap-xs);
29
+ bottom: var(--gap-xs);
27
30
  background-color: var(--color-light-graphic-quaternary);
28
31
  }
29
32
  .component th:after {
@@ -23,5 +23,5 @@ type THeadCellProps = ThHTMLAttributes<HTMLHeadingElement> & {
23
23
  */
24
24
  dataTestId?: string;
25
25
  };
26
- declare const THeadCell: ({ children, className, dataTestId, style, width, textAlign, hidden, ...restProps }: THeadCellProps) => JSX.Element;
26
+ declare const THeadCell: ({ children, className, dataTestId, style, width, textAlign, hidden, ...restProps }: THeadCellProps) => JSX.Element | null;
27
27
  export { THeadCellProps, THeadCell };
@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
5
5
  var tslib_es6 = require('../../tslib.es6-ce870b46.js');
6
6
  var React = require('react');
7
7
  var cn = require('classnames');
8
+ var components_tableContext_index = require('../table-context/index.js');
8
9
  var styles = require('./index.module.css');
9
10
 
10
11
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -15,7 +16,10 @@ var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
15
16
 
16
17
  var THeadCell = function (_a) {
17
18
  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"]);
18
- return (React__default['default'].createElement("th", tslib_es6.__assign({ className: cn__default['default'](styles__default['default'].component, className, hidden && styles__default['default'].hidden), style: tslib_es6.__assign(tslib_es6.__assign({}, style), { width: width, textAlign: textAlign }), "data-test-id": dataTestId }, restProps), children));
19
+ var compactHorizontal = React.useContext(components_tableContext_index.TableContext).compactHorizontal;
20
+ if (hidden)
21
+ 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));
19
23
  };
20
24
 
21
25
  exports.THeadCell = THeadCell;
@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
5
5
  require('../../tslib.es6-ce870b46.js');
6
6
  require('react');
7
7
  require('classnames');
8
+ require('../table-context/index.js');
8
9
  require('./index.module.css');
9
10
  var components_theadCell_Component = require('./Component.js');
10
11
 
@@ -13,6 +13,7 @@
13
13
  }
14
14
  :root {
15
15
  --gap-2xs: 4px;
16
+ --gap-s: 12px;
16
17
  --gap-m: 16px;
17
18
  --gap-2xl: 32px;
18
19
  }
@@ -27,18 +28,25 @@
27
28
  position: relative;
28
29
  text-align: left;
29
30
  color: var(--color-light-text-primary);
30
- padding: var(--gap-2xl) var(--gap-m) var(--gap-2xs);
31
+ padding: var(--gap-2xl) var(--gap-s) var(--gap-2xs);
31
32
  border-bottom: 1px solid var(--color-light-border-primary);
32
33
  background: var(--color-light-bg-primary);
33
34
  vertical-align: top;
34
- box-sizing: border-box;
35
+ box-sizing: border-box
35
36
  }
37
+ .component:first-child {
38
+ padding-left: var(--gap-m);
39
+ }
40
+ .component:last-child {
41
+ padding-right: var(--gap-m);
42
+ }
36
43
  .sortable {
37
44
  cursor: pointer;
38
45
  }
39
46
  .sorted {
40
47
  color: var(--color-light-text-primary);
41
48
  }
42
- .hidden {
43
- display: none;
49
+ .compactHorizontal {
50
+ padding-left: 6px;
51
+ padding-right: 6px;
44
52
  }
@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
5
5
  var tslib_es6 = require('../../tslib.es6-ce870b46.js');
6
6
  var React = require('react');
7
7
  var cn = require('classnames');
8
+ require('../table-context/index.js');
8
9
  require('../thead-cell/index.module.css');
9
10
  var components_theadCell_Component = require('../thead-cell/Component.js');
10
11
  var styles = require('./index.module.css');
@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
5
5
  require('../../tslib.es6-ce870b46.js');
6
6
  require('react');
7
7
  require('classnames');
8
+ require('../table-context/index.js');
8
9
  require('../thead-cell/index.module.css');
9
10
  require('../thead-cell/Component.js');
10
11
  require('./index.module.css');
@@ -1,6 +1,7 @@
1
1
  /// <reference types="react" />
2
2
  declare const Table: import("react").ForwardRefExoticComponent<import("react").TableHTMLAttributes<HTMLTableElement> & {
3
3
  compactView?: boolean | undefined;
4
+ compactHorizontal?: boolean | undefined;
4
5
  className?: string | undefined;
5
6
  children: import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>[];
6
7
  wrapper?: boolean | undefined;
@@ -9,9 +10,9 @@ declare const Table: import("react").ForwardRefExoticComponent<import("react").T
9
10
  } & import("react").RefAttributes<HTMLTableElement>> & {
10
11
  TBody: import("react").FC<import("./components/index").TBodyProps>;
11
12
  THead: import("react").FC<import("./components/index").THeadProps>;
12
- THeadCell: ({ children, className, dataTestId, style, width, textAlign, hidden, ...restProps }: import("./components/index").THeadCellProps) => JSX.Element;
13
+ THeadCell: ({ children, className, dataTestId, style, width, textAlign, hidden, ...restProps }: import("./components/index").THeadCellProps) => JSX.Element | null;
13
14
  TSortableHeadCell: ({ children, className, defaultIsSortedDesc, isSortedDesc, textAlign, onSort, ...restProps }: import("./components/index").TSortableHeadCellProps) => JSX.Element;
14
- TCell: ({ className, style, dataTestId, children, index, ...restProps }: import("./components/index").TCellProps) => JSX.Element;
15
+ TCell: ({ className, style, dataTestId, children, index, ...restProps }: import("./components/index").TCellProps) => JSX.Element | null;
15
16
  TRow: ({ children, className, selected, withoutBorder, dataTestId, ...restProps }: import("./components/index").TRowProps) => JSX.Element;
16
17
  TExpandableRow: ({ className, selected, expanded, defaultExpanded, onToggle, renderContent, ...restProps }: import("./components/index").TExpandableRowProps) => JSX.Element;
17
18
  Pagination: import("react").FC<import("packages/pagination/src").PaginationProps & {
package/esm/component.js CHANGED
@@ -1,4 +1,4 @@
1
- import './tslib.es6-9eeb595d.js';
1
+ import './tslib.es6-9107aa60.js';
2
2
  import 'react';
3
3
  import 'classnames';
4
4
  import { THead } from './components/thead/Component.js';
@@ -1,4 +1,4 @@
1
- import '../tslib.es6-9eeb595d.js';
1
+ import '../tslib.es6-9107aa60.js';
2
2
  import 'react';
3
3
  import 'classnames';
4
4
  export { THead } from './thead/Component.js';
@@ -1,4 +1,4 @@
1
- import { _ as __rest, a as __assign } from '../../tslib.es6-9eeb595d.js';
1
+ import { _ as __rest, a as __assign } from '../../tslib.es6-9107aa60.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 { Pagination as Pagination$1 } from '@alfalab/core-components-pagination/
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_4l81f","pagesWrapper":"table__pagesWrapper_4l81f","tag":"table__tag_4l81f","tagActive":"table__tagActive_4l81f","menu":"table__menu_4l81f","option":"table__option_4l81f"};
10
+ var styles = {"component":"table__component_11zz1","pagesWrapper":"table__pagesWrapper_11zz1","tag":"table__tag_11zz1","tagActive":"table__tagActive_11zz1","menu":"table__menu_11zz1","option":"table__option_11zz1"};
11
11
  require('./index.css')
12
12
 
13
13
  var Pagination = function (_a) {
@@ -1,4 +1,4 @@
1
- /* hash: 14y9a */
1
+ /* hash: 1uahs */
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_4l81f {
20
+ .table__component_11zz1 {
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_4l81f {
29
+ .table__pagesWrapper_11zz1 {
30
30
  display: flex;
31
31
  }
32
- .table__tag_4l81f.table__tag_4l81f {
32
+ .table__tag_11zz1.table__tag_11zz1 {
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_4l81f.table__tag_4l81f:last-child {
38
+ .table__tag_11zz1.table__tag_11zz1:last-child {
39
39
  margin-right: 0;
40
40
  }
41
- .table__tag_4l81f.table__tag_4l81f.table__tagActive_4l81f {
41
+ .table__tag_11zz1.table__tag_11zz1.table__tagActive_11zz1 {
42
42
  cursor: default;
43
43
  }
44
- .table__menu_4l81f {
44
+ .table__menu_11zz1 {
45
45
  margin: var(--gap-2xs) 0;
46
46
  }
47
- .table__option_4l81f {
47
+ .table__option_11zz1 {
48
48
  min-width: 208px;
49
49
  }
@@ -1,4 +1,4 @@
1
- import '../../tslib.es6-9eeb595d.js';
1
+ import '../../tslib.es6-9107aa60.js';
2
2
  import 'react';
3
3
  import 'classnames';
4
4
  import '../table-context/index.js';
@@ -1,4 +1,4 @@
1
- /* hash: 1j6q7 */
1
+ /* hash: 9huni */
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_jk58l svg {
13
+ .table__field_1gyw8 svg {
14
14
  width: 18px;
15
15
  height: 18px;
16
16
  }
17
- .table__open_jk58l,
18
- .table__open_jk58l:hover {
17
+ .table__open_1gyw8,
18
+ .table__open_1gyw8:hover {
19
19
  background-color: var(--color-light-specialbg-component-shade-7);
20
20
  }