@alfalab/core-components-table 2.0.1 → 2.1.0

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-0ae67909.d.ts → tslib.es6-dea1ac34.d.ts} +0 -0
  100. package/esm/{tslib.es6-0ae67909.js → tslib.es6-dea1ac34.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 +2 -2
  131. /package/{tslib.es6-586ed3f2.d.ts → tslib.es6-c1240170.d.ts} +0 -0
  132. /package/{tslib.es6-586ed3f2.js → tslib.es6-c1240170.js} +0 -0
@@ -1,9 +1,9 @@
1
- import { _ as __rest, a as __assign } from '../../../tslib.es6-0ae67909.js';
1
+ import { _ as __rest, a as __assign } from '../../../tslib.es6-dea1ac34.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_ars7b","open":"table__open_ars7b"};
6
+ var styles = {"field":"table__field_1p8qs","open":"table__open_1p8qs"};
7
7
  require('./index.css')
8
8
 
9
9
  var CustomSelectField = function (_a) {
@@ -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
  */
@@ -1,4 +1,4 @@
1
- import { _ as __rest, a as __assign } from '../../tslib.es6-0ae67909.js';
1
+ import { _ as __rest, a as __assign } from '../../tslib.es6-dea1ac34.js';
2
2
  import React, { forwardRef, useRef, useMemo } from 'react';
3
3
  import cn from 'classnames';
4
4
  import '../thead/Component.js';
@@ -6,12 +6,12 @@ import '../../utils.js';
6
6
  import { findAllHeadCellsProps } from './utils.js';
7
7
  import { TableContext } from '../table-context/index.js';
8
8
 
9
- var styles = {"component":"table__component_4s4hq","wrapper":"table__wrapper_4s4hq","hasPagination":"table__hasPagination_4s4hq","table":"table__table_4s4hq"};
9
+ var styles = {"component":"table__component_l3byt","wrapper":"table__wrapper_l3byt","hasPagination":"table__hasPagination_l3byt","table":"table__table_l3byt"};
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.wrapper, wrapper = _d === void 0 ? true : _d, pagination = _a.pagination, dataTestId = _a.dataTestId, restProps = __rest(_a, ["className", "children", "compactView", "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, restProps = __rest(_a, ["className", "children", "compactView", "compactHorizontal", "wrapper", "pagination", "dataTestId"]);
15
15
  var wrapperRef = useRef(null);
16
16
  var columnsConfiguration = useMemo(function () {
17
17
  return findAllHeadCellsProps(children).map(function (columnProps, index) { return ({
@@ -21,7 +21,12 @@ var Table = forwardRef(function (_a, ref) {
21
21
  index: index,
22
22
  }); });
23
23
  }, [children]);
24
- return (React.createElement(TableContext.Provider, { value: { columnsConfiguration: columnsConfiguration, compactView: compactView, wrapperRef: wrapperRef } },
24
+ return (React.createElement(TableContext.Provider, { value: {
25
+ columnsConfiguration: columnsConfiguration,
26
+ compactView: compactView,
27
+ compactHorizontal: compactHorizontal,
28
+ wrapperRef: wrapperRef,
29
+ } },
25
30
  React.createElement("div", { ref: wrapperRef, className: cn(styles.component, className, (_b = {},
26
31
  _b[styles.wrapper] = wrapper,
27
32
  _b[styles.hasPagination] = !!pagination,
@@ -1,4 +1,4 @@
1
- /* hash: u2zkc */
1
+ /* hash: 90lbl */
2
2
  :root {
3
3
  --color-light-bg-primary: #fff;
4
4
  }
@@ -18,26 +18,26 @@
18
18
  :root {
19
19
  --border-radius-m: 8px;
20
20
  }
21
- .table__component_4s4hq {
21
+ .table__component_l3byt {
22
22
  box-sizing: border-box;
23
23
  }
24
- .table__wrapper_4s4hq {
24
+ .table__wrapper_l3byt {
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_4s4hq {
31
+ .table__hasPagination_l3byt {
32
32
  padding-bottom: 0;
33
33
  }
34
- .table__table_4s4hq {
34
+ .table__table_l3byt {
35
35
  width: 100%;
36
36
  border-collapse: collapse;
37
37
  box-sizing: border-box
38
38
 
39
39
  /* TODO: Хак для выравнивания чекбокса */
40
40
  }
41
- .table__table_4s4hq td:first-child label > *[class^='box'], .table__table_4s4hq th:first-child label > *[class^='box'] {
41
+ .table__table_l3byt td:first-child label > *[class^='box'], .table__table_l3byt th:first-child label > *[class^='box'] {
42
42
  margin-top: 0;
43
43
  }
@@ -1,4 +1,4 @@
1
- import '../../tslib.es6-0ae67909.js';
1
+ import '../../tslib.es6-dea1ac34.js';
2
2
  import 'react';
3
3
  import 'classnames';
4
4
  import '../thead/Component.js';
@@ -1,4 +1,4 @@
1
- import '../../tslib.es6-0ae67909.js';
1
+ import '../../tslib.es6-dea1ac34.js';
2
2
  import React from 'react';
3
3
  import 'classnames';
4
4
  import { THead } from '../thead/Component.js';
@@ -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;
@@ -3,6 +3,7 @@ import React from 'react';
3
3
  var DEFAULT_TABLE_CONTEXT = {
4
4
  columnsConfiguration: [],
5
5
  compactView: false,
6
+ compactHorizontal: false,
6
7
  wrapperRef: { current: null },
7
8
  };
8
9
  var TableContext = React.createContext(DEFAULT_TABLE_CONTEXT);
@@ -1,8 +1,8 @@
1
- import { _ as __rest, a as __assign } from '../../tslib.es6-0ae67909.js';
1
+ import { _ as __rest, a as __assign } from '../../tslib.es6-dea1ac34.js';
2
2
  import React from 'react';
3
3
  import cn from 'classnames';
4
4
 
5
- var styles = {"component":"table__component_32md3"};
5
+ var styles = {"component":"table__component_f6c8l"};
6
6
  require('./index.css')
7
7
 
8
8
  var TBody = function (_a) {
@@ -1,4 +1,4 @@
1
- /* hash: 1vtaa */
1
+ /* hash: 1oo8d */
2
2
  :root {
3
3
 
4
4
  /* Hard */
@@ -7,7 +7,7 @@
7
7
 
8
8
  /* Hard up */
9
9
  }
10
- .table__component_32md3 {
10
+ .table__component_f6c8l {
11
11
  width: 100%;
12
12
  box-sizing: border-box;
13
13
  }
@@ -1,4 +1,4 @@
1
- import '../../tslib.es6-0ae67909.js';
1
+ import '../../tslib.es6-dea1ac34.js';
2
2
  import 'react';
3
3
  import 'classnames';
4
4
  export { TBody } from './Component.js';
@@ -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 };
@@ -1,19 +1,21 @@
1
- import { _ as __rest, a as __assign } from '../../tslib.es6-0ae67909.js';
1
+ import { _ as __rest, a as __assign } from '../../tslib.es6-dea1ac34.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_c9gau","hidden":"table__hidden_c9gau","compact":"table__compact_c9gau"};
6
+ var styles = {"component":"table__component_ym8vu","compactHorizontal":"table__compactHorizontal_ym8vu","compact":"table__compact_ym8vu"};
7
7
  require('./index.css')
8
8
 
9
9
  var TCell = function (_a) {
10
10
  var className = _a.className, style = _a.style, dataTestId = _a.dataTestId, children = _a.children, index = _a.index, restProps = __rest(_a, ["className", "style", "dataTestId", "children", "index"]);
11
- var _b = useContext(TableContext), columnsConfiguration = _b.columnsConfiguration, compactView = _b.compactView;
11
+ var _b = useContext(TableContext), columnsConfiguration = _b.columnsConfiguration, compactView = _b.compactView, compactHorizontal = _b.compactHorizontal;
12
12
  var column = index === undefined ? null : columnsConfiguration[index];
13
13
  var width = column === null || column === void 0 ? void 0 : column.width;
14
14
  var textAlign = column === null || column === void 0 ? void 0 : column.textAlign;
15
15
  var hidden = (column === null || column === void 0 ? void 0 : column.hidden) || false;
16
- return (React.createElement("td", __assign({ className: cn(styles.component, className, hidden && styles.hidden, compactView && styles.compact), style: __assign(__assign({}, style), { width: width, textAlign: textAlign }), "data-test-id": dataTestId }, restProps), children));
16
+ if (hidden)
17
+ return null;
18
+ return (React.createElement("td", __assign({ className: cn(styles.component, className, compactView && styles.compact, compactHorizontal && styles.compactHorizontal), style: __assign(__assign({}, style), { width: width, textAlign: textAlign }), "data-test-id": dataTestId }, restProps), children));
17
19
  };
18
20
 
19
21
  export { TCell };
@@ -1,4 +1,4 @@
1
- /* hash: s41sg */
1
+ /* hash: 61dh2 */
2
2
  :root {
3
3
  --color-light-border-primary: #dbdee1;
4
4
  --color-light-text-primary: #0b1f35;
@@ -13,25 +13,33 @@
13
13
  }
14
14
  :root {
15
15
  --gap-xs: 8px;
16
+ --gap-s: 12px;
16
17
  --gap-m: 16px;
17
18
  --gap-xl: 24px;
18
19
  }
19
- .table__component_c9gau {
20
+ .table__component_ym8vu {
20
21
  font-size: 14px;
21
22
  line-height: 20px;
22
23
  font-weight: 400;
23
24
 
24
25
  color: var(--color-light-text-primary);
25
- padding: var(--gap-xl) var(--gap-m);
26
+ padding: var(--gap-xl) var(--gap-s);
26
27
  height: 72px;
27
28
  border-top: 1px solid var(--color-light-border-primary);
28
29
  vertical-align: top;
29
- box-sizing: border-box;
30
+ box-sizing: border-box
30
31
  }
31
- .table__hidden_c9gau {
32
- display: none;
32
+ .table__component_ym8vu:first-child {
33
+ padding-left: var(--gap-m);
34
+ }
35
+ .table__component_ym8vu:last-child {
36
+ padding-right: var(--gap-m);
37
+ }
38
+ .table__compactHorizontal_ym8vu {
39
+ padding-left: 6px;
40
+ padding-right: 6px;
33
41
  }
34
- .table__compact_c9gau {
42
+ .table__compact_ym8vu {
35
43
  padding-top: var(--gap-xs);
36
44
  padding-bottom: var(--gap-xs);
37
45
 
@@ -1,4 +1,4 @@
1
- import '../../tslib.es6-0ae67909.js';
1
+ import '../../tslib.es6-dea1ac34.js';
2
2
  import 'react';
3
3
  import 'classnames';
4
4
  import '../table-context/index.js';
@@ -1,9 +1,9 @@
1
- import { _ as __rest, a as __assign } from '../../tslib.es6-0ae67909.js';
1
+ import { _ as __rest, a as __assign } from '../../tslib.es6-dea1ac34.js';
2
2
  import React, { useState } from 'react';
3
3
  import cn from 'classnames';
4
4
  import { TRow } from '../trow/Component.js';
5
5
 
6
- var styles = {"row":"table__row_1nsou","selected":"table__selected_1nsou","expanded":"table__expanded_1nsou","expandable":"table__expandable_1nsou"};
6
+ var styles = {"row":"table__row_4j42w","selected":"table__selected_4j42w","expanded":"table__expanded_4j42w","expandable":"table__expandable_4j42w"};
7
7
  require('./index.css')
8
8
 
9
9
  var TExpandableRow = function (_a) {
@@ -1,4 +1,4 @@
1
- /* hash: hdygj */
1
+ /* hash: 1xwa7 */
2
2
  :root {
3
3
 
4
4
  /* Hard */
@@ -7,16 +7,16 @@
7
7
 
8
8
  /* Hard up */
9
9
  }
10
- .table__row_1nsou {
10
+ .table__row_4j42w {
11
11
  cursor: pointer;
12
12
  }
13
- .table__selected_1nsou.table__expanded_1nsou {
13
+ .table__selected_4j42w.table__expanded_4j42w {
14
14
  background-color: inherit;
15
15
  }
16
- .table__expanded_1nsou:hover {
16
+ .table__expanded_4j42w:hover {
17
17
  background-color: inherit;
18
18
  }
19
- .table__expandable_1nsou td {
19
+ .table__expandable_4j42w td {
20
20
  margin: 0;
21
21
  padding-top: 0;
22
22
  padding-bottom: 0;
@@ -1,4 +1,4 @@
1
- import '../../tslib.es6-0ae67909.js';
1
+ import '../../tslib.es6-dea1ac34.js';
2
2
  import 'react';
3
3
  import 'classnames';
4
4
  import '../trow/Component.js';
@@ -1,8 +1,8 @@
1
- import { _ as __rest, a as __assign } from '../../tslib.es6-0ae67909.js';
1
+ import { _ as __rest, a as __assign } from '../../tslib.es6-dea1ac34.js';
2
2
  import React from 'react';
3
3
  import cn from 'classnames';
4
4
 
5
- var styles = {"component":"table__component_pdjmp","row":"table__row_pdjmp"};
5
+ var styles = {"component":"table__component_9m0bu","row":"table__row_9m0bu"};
6
6
  require('./index.css')
7
7
 
8
8
  var THead = function (_a) {
@@ -1,4 +1,4 @@
1
- /* hash: j41lj */
1
+ /* hash: 11mtw */
2
2
  :root {
3
3
  --color-light-graphic-quaternary: #dbdee1;
4
4
  }
@@ -10,12 +10,15 @@
10
10
 
11
11
  /* Hard up */
12
12
  }
13
- .table__component_pdjmp {
13
+ :root {
14
+ --gap-xs: 8px;
15
+ }
16
+ .table__component_9m0bu {
14
17
  position: relative;
15
18
  width: 100%;
16
19
  box-sizing: border-box
17
20
  }
18
- .table__component_pdjmp th:not(:last-child):not(:empty):after {
21
+ .table__component_9m0bu th:not(:last-child):not(:empty):after {
19
22
  transition: opacity 0.2s;
20
23
  position: absolute;
21
24
  content: '';
@@ -23,16 +26,16 @@
23
26
 
24
27
  width: 1px;
25
28
  right: 0;
26
- top: 12px;
27
- bottom: 8px;
29
+ top: var(--gap-xs);
30
+ bottom: var(--gap-xs);
28
31
  background-color: var(--color-light-graphic-quaternary);
29
32
  }
30
- .table__component_pdjmp th:after {
33
+ .table__component_9m0bu th:after {
31
34
  opacity: 0;
32
35
  }
33
- .table__component_pdjmp:hover th:after {
36
+ .table__component_9m0bu:hover th:after {
34
37
  opacity: 1;
35
38
  }
36
- .table__row_pdjmp {
39
+ .table__row_9m0bu {
37
40
  height: 72px;
38
41
  }
@@ -1,4 +1,4 @@
1
- import '../../tslib.es6-0ae67909.js';
1
+ import '../../tslib.es6-dea1ac34.js';
2
2
  import 'react';
3
3
  import 'classnames';
4
4
  export { THead } from './Component.js';
@@ -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 };
@@ -1,13 +1,17 @@
1
- import { _ as __rest, a as __assign } from '../../tslib.es6-0ae67909.js';
2
- import React from 'react';
1
+ import { _ as __rest, a as __assign } from '../../tslib.es6-dea1ac34.js';
2
+ import React, { useContext } from 'react';
3
3
  import cn from 'classnames';
4
+ import { TableContext } from '../table-context/index.js';
4
5
 
5
- var styles = {"component":"table__component_17xez","sortable":"table__sortable_17xez","sorted":"table__sorted_17xez","hidden":"table__hidden_17xez"};
6
+ var styles = {"component":"table__component_1shkg","sortable":"table__sortable_1shkg","sorted":"table__sorted_1shkg","compactHorizontal":"table__compactHorizontal_1shkg"};
6
7
  require('./index.css')
7
8
 
8
9
  var THeadCell = function (_a) {
9
10
  var children = _a.children, className = _a.className, dataTestId = _a.dataTestId, style = _a.style, width = _a.width, textAlign = _a.textAlign, hidden = _a.hidden, restProps = __rest(_a, ["children", "className", "dataTestId", "style", "width", "textAlign", "hidden"]);
10
- return (React.createElement("th", __assign({ className: cn(styles.component, className, hidden && styles.hidden), style: __assign(__assign({}, style), { width: width, textAlign: textAlign }), "data-test-id": dataTestId }, restProps), children));
11
+ var compactHorizontal = useContext(TableContext).compactHorizontal;
12
+ if (hidden)
13
+ return null;
14
+ return (React.createElement("th", __assign({ className: cn(styles.component, className, compactHorizontal && styles.compactHorizontal), style: __assign(__assign({}, style), { width: width, textAlign: textAlign }), "data-test-id": dataTestId }, restProps), children));
11
15
  };
12
16
 
13
17
  export { THeadCell };
@@ -1,4 +1,4 @@
1
- /* hash: c99kn */
1
+ /* hash: dfz4y */
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_17xez {
21
+ .table__component_1shkg {
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_17xez {
38
+ .table__component_1shkg:first-child {
39
+ padding-left: var(--gap-m);
40
+ }
41
+ .table__component_1shkg:last-child {
42
+ padding-right: var(--gap-m);
43
+ }
44
+ .table__sortable_1shkg {
38
45
  cursor: pointer;
39
46
  }
40
- .table__sorted_17xez {
47
+ .table__sorted_1shkg {
41
48
  color: var(--color-light-text-primary);
42
49
  }
43
- .table__hidden_17xez {
44
- display: none;
50
+ .table__compactHorizontal_1shkg {
51
+ padding-left: 6px;
52
+ padding-right: 6px;
45
53
  }
@@ -1,4 +1,5 @@
1
- import '../../tslib.es6-0ae67909.js';
1
+ import '../../tslib.es6-dea1ac34.js';
2
2
  import 'react';
3
3
  import 'classnames';
4
+ import '../table-context/index.js';
4
5
  export { THeadCell } from './Component.js';
@@ -1,8 +1,8 @@
1
- import { _ as __rest, a as __assign } from '../../tslib.es6-0ae67909.js';
1
+ import { _ as __rest, a as __assign } from '../../tslib.es6-dea1ac34.js';
2
2
  import React from 'react';
3
3
  import cn from 'classnames';
4
4
 
5
- var styles = {"component":"table__component_ifo54","withoutBorder":"table__withoutBorder_ifo54","clickable":"table__clickable_ifo54","selected":"table__selected_ifo54"};
5
+ var styles = {"component":"table__component_14sgq","withoutBorder":"table__withoutBorder_14sgq","clickable":"table__clickable_14sgq","selected":"table__selected_14sgq"};
6
6
  require('./index.css')
7
7
 
8
8
  var TRow = function (_a) {
@@ -1,4 +1,4 @@
1
- /* hash: 18gnu */
1
+ /* hash: mdzjf */
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_ifo54 {
17
+ .table__component_14sgq {
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_ifo54:first-child td {
24
+ .table__component_14sgq:first-child td {
25
25
  border-top: 0;
26
26
  }
27
- .table__withoutBorder_ifo54 {
27
+ .table__withoutBorder_14sgq {
28
28
  td {
29
29
  border: none;
30
30
  }
31
31
  }
32
- .table__clickable_ifo54 {
32
+ .table__clickable_14sgq {
33
33
  cursor: pointer
34
34
  }
35
- .table__clickable_ifo54:hover {
35
+ .table__clickable_14sgq:hover {
36
36
  background-color: var(--color-light-bg-secondary);
37
37
  }
38
- .table__selected_ifo54 {
38
+ .table__selected_14sgq {
39
39
  background-color: #f2f8ff /* нет цвета в палитре */
40
40
  }
41
- .table__selected_ifo54:hover {
41
+ .table__selected_14sgq:hover {
42
42
  background-color: var(--color-static-graphic-solitude);
43
43
  }
@@ -1,4 +1,4 @@
1
- import '../../tslib.es6-0ae67909.js';
1
+ import '../../tslib.es6-dea1ac34.js';
2
2
  import 'react';
3
3
  import 'classnames';
4
4
  export { TRow } from './Component.js';
@@ -1,12 +1,13 @@
1
- import { _ as __rest, a as __assign } from '../../tslib.es6-0ae67909.js';
1
+ import { _ as __rest, a as __assign } from '../../tslib.es6-dea1ac34.js';
2
2
  import React, { useMemo } from 'react';
3
3
  import cn from 'classnames';
4
+ import '../table-context/index.js';
4
5
  import { THeadCell } from '../thead-cell/Component.js';
5
6
  import { SortIconAsc } from './sort-icon-asc.js';
6
7
  import { SortIconDesc } from './sort-icon-desc.js';
7
8
  import { SortIconUnset } from './sort-icon-unset.js';
8
9
 
9
- var styles = {"component":"table__component_15ph6","content":"table__content_15ph6","icon":"table__icon_15ph6","reverse":"table__reverse_15ph6","sorted":"table__sorted_15ph6"};
10
+ var styles = {"component":"table__component_1m0on","content":"table__content_1m0on","icon":"table__icon_1m0on","reverse":"table__reverse_1m0on","sorted":"table__sorted_1m0on"};
10
11
  require('./index.css')
11
12
 
12
13
  var TSortableHeadCell = function (_a) {
@@ -1,4 +1,4 @@
1
- /* hash: 15mgp */
1
+ /* hash: 1dsz1 */
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_15ph6 {
18
+ .table__component_1m0on {
19
19
  position: relative;
20
20
  }
21
- .table__content_15ph6 {
21
+ .table__content_1m0on {
22
22
  display: flex;
23
23
  align-items: flex-start;
24
24
  }
25
- .table__icon_15ph6 {
25
+ .table__icon_1m0on {
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_15ph6:hover {
38
+ .table__icon_1m0on:hover {
39
39
  color: var(--color-light-graphic-primary);
40
40
  }
41
- .table__reverse_15ph6 {
41
+ .table__reverse_1m0on {
42
42
  flex-direction: row-reverse
43
43
  }
44
- .table__reverse_15ph6 .table__icon_15ph6 {
44
+ .table__reverse_1m0on .table__icon_1m0on {
45
45
  margin-left: 0;
46
46
  margin-right: var(--gap-xs);
47
47
  }
48
- .table__sorted_15ph6 {
48
+ .table__sorted_1m0on {
49
49
  color: var(--color-light-graphic-link)
50
50
  }
51
- .table__sorted_15ph6:hover {
51
+ .table__sorted_1m0on:hover {
52
52
  color: var(--color-light-graphic-link);
53
53
  }
@@ -1,6 +1,7 @@
1
- import '../../tslib.es6-0ae67909.js';
1
+ import '../../tslib.es6-dea1ac34.js';
2
2
  import 'react';
3
3
  import 'classnames';
4
+ import '../table-context/index.js';
4
5
  import '../thead-cell/Component.js';
5
6
  export { TSortableHeadCell } from './Component.js';
6
7
  import './sort-icon-asc.js';
@@ -1,4 +1,4 @@
1
- import { a as __assign } from '../../tslib.es6-0ae67909.js';
1
+ import { a as __assign } from '../../tslib.es6-dea1ac34.js';
2
2
  import React from 'react';
3
3
 
4
4
  var SortIconAsc = function (props) { return (React.createElement("svg", __assign({ width: '18', height: '18', viewBox: '0 0 18 18', fill: 'currentColor', xmlns: 'http://www.w3.org/2000/svg', focusable: 'false', role: 'img' }, props),
@@ -1,4 +1,4 @@
1
- import { a as __assign } from '../../tslib.es6-0ae67909.js';
1
+ import { a as __assign } from '../../tslib.es6-dea1ac34.js';
2
2
  import React from 'react';
3
3
 
4
4
  var SortIconDesc = function (props) { return (React.createElement("svg", __assign({ width: '18', height: '18', viewBox: '0 0 18 18', fill: 'currentColor', xmlns: 'http://www.w3.org/2000/svg', focusable: 'false', role: 'img' }, props),
@@ -1,4 +1,4 @@
1
- import { a as __assign } from '../../tslib.es6-0ae67909.js';
1
+ import { a as __assign } from '../../tslib.es6-dea1ac34.js';
2
2
  import React from 'react';
3
3
 
4
4
  var SortIconUnset = function (props) { return (React.createElement("svg", __assign({ width: '18', height: '18', viewBox: '0 0 18 18', fill: 'currentColor', xmlns: 'http://www.w3.org/2000/svg', focusable: 'false', role: 'img' }, props),
package/esm/index.js CHANGED
@@ -1,4 +1,4 @@
1
- import './tslib.es6-0ae67909.js';
1
+ import './tslib.es6-dea1ac34.js';
2
2
  import 'react';
3
3
  import 'classnames';
4
4
  import './components/thead/Component.js';