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

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 (61) hide show
  1. package/dist/es/components/BottomBar/BottomBar.js +2 -2
  2. package/dist/es/components/Cards/CardSmall/CardSmall.js +1 -2
  3. package/dist/es/components/Cards/components/_CardCell/CardCell.js +5 -4
  4. package/dist/es/components/Charts/Chart/Chart.js +2 -2
  5. package/dist/es/components/Header/components/_HeaderButton/HeaderButton.css +1 -1
  6. package/dist/es/components/Header/components/_HeaderButton/HeaderButton.js +7 -13
  7. package/dist/es/components/Header/components/_HeaderLkSelect/HeaderLkSelect.js +1 -3
  8. package/dist/es/components/Table/Table.css +1 -1
  9. package/dist/es/components/Table/Table.d.ts +12 -1
  10. package/dist/es/components/Table/Table.js +31 -10
  11. package/dist/es/components/Table/components/TableBody/TableBody.d.ts +9 -1
  12. package/dist/es/components/Table/components/TableBody/TableBody.js +8 -5
  13. package/dist/es/components/Table/components/TableHead/TableHead.d.ts +9 -1
  14. package/dist/es/components/Table/components/TableHead/TableHead.js +8 -5
  15. package/dist/es/components/Table/components/TableSettings/TableSettings.d.ts +7 -0
  16. package/dist/es/components/Table/components/TableSettings/TableSettings.js +16 -7
  17. package/dist/es/components/Table/components/TableTd/TableTd.css +1 -1
  18. package/dist/es/components/Table/components/TableTd/TableTd.d.ts +10 -0
  19. package/dist/es/components/Table/components/TableTd/TableTd.js +14 -6
  20. package/dist/es/components/Table/components/TableTh/TableTh.css +1 -1
  21. package/dist/es/components/Table/components/TableTh/TableTh.d.ts +9 -1
  22. package/dist/es/components/Table/components/TableTh/TableTh.js +32 -8
  23. package/dist/es/components/Table/components/TableTooltip/TableTooltip.d.ts +2 -1
  24. package/dist/es/components/Table/components/TableTooltip/TableTooltip.js +4 -2
  25. package/dist/es/components/Table/components/TableTr/TableTr.d.ts +9 -1
  26. package/dist/es/components/Table/components/TableTr/TableTr.js +8 -5
  27. package/dist/es/components/Table/contexts/TableContext.js +4 -1
  28. package/dist/es/components/Table/helpers.d.ts +2 -2
  29. package/dist/es/components/Table/helpers.js +4 -4
  30. package/dist/es/components/Table/types.d.ts +5 -1
  31. package/dist/lib/components/BottomBar/BottomBar.js +2 -2
  32. package/dist/lib/components/Cards/CardSmall/CardSmall.js +1 -2
  33. package/dist/lib/components/Cards/components/_CardCell/CardCell.js +5 -4
  34. package/dist/lib/components/Charts/Chart/Chart.js +2 -2
  35. package/dist/lib/components/Header/components/_HeaderButton/HeaderButton.css +1 -1
  36. package/dist/lib/components/Header/components/_HeaderButton/HeaderButton.js +7 -13
  37. package/dist/lib/components/Header/components/_HeaderLkSelect/HeaderLkSelect.js +1 -3
  38. package/dist/lib/components/Table/Table.css +1 -1
  39. package/dist/lib/components/Table/Table.d.ts +12 -1
  40. package/dist/lib/components/Table/Table.js +30 -9
  41. package/dist/lib/components/Table/components/TableBody/TableBody.d.ts +9 -1
  42. package/dist/lib/components/Table/components/TableBody/TableBody.js +8 -4
  43. package/dist/lib/components/Table/components/TableHead/TableHead.d.ts +9 -1
  44. package/dist/lib/components/Table/components/TableHead/TableHead.js +8 -4
  45. package/dist/lib/components/Table/components/TableSettings/TableSettings.d.ts +7 -0
  46. package/dist/lib/components/Table/components/TableSettings/TableSettings.js +15 -6
  47. package/dist/lib/components/Table/components/TableTd/TableTd.css +1 -1
  48. package/dist/lib/components/Table/components/TableTd/TableTd.d.ts +10 -0
  49. package/dist/lib/components/Table/components/TableTd/TableTd.js +14 -6
  50. package/dist/lib/components/Table/components/TableTh/TableTh.css +1 -1
  51. package/dist/lib/components/Table/components/TableTh/TableTh.d.ts +9 -1
  52. package/dist/lib/components/Table/components/TableTh/TableTh.js +32 -8
  53. package/dist/lib/components/Table/components/TableTooltip/TableTooltip.d.ts +2 -1
  54. package/dist/lib/components/Table/components/TableTooltip/TableTooltip.js +4 -2
  55. package/dist/lib/components/Table/components/TableTr/TableTr.d.ts +9 -1
  56. package/dist/lib/components/Table/components/TableTr/TableTr.js +8 -4
  57. package/dist/lib/components/Table/contexts/TableContext.js +4 -1
  58. package/dist/lib/components/Table/helpers.d.ts +2 -2
  59. package/dist/lib/components/Table/helpers.js +4 -4
  60. package/dist/lib/components/Table/types.d.ts +5 -1
  61. package/package.json +5 -5
@@ -5,9 +5,9 @@ import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
5
5
  import "./BottomBar.css";
6
6
  var ArrowBackIcon = function ArrowBackIcon(props) {
7
7
  return /*#__PURE__*/React.createElement("svg", _extends({
8
- viewBox: "0 0 40 20"
8
+ viewBox: "0 0 20 20"
9
9
  }, props), /*#__PURE__*/React.createElement("path", {
10
- d: "M36 11H7.8l5.6 5.6L12 18l-8-8 8-8 1.4 1.4L7.8 9H36z"
10
+ d: "M7.733 6.32a1 1 0 00-1.413-.053L3.488 8.892a1.503 1.503 0 000 2.216l2.832 2.625a1 1 0 001.36-1.466L6.312 11H16a1 1 0 000-2H6.313l1.366-1.267a1 1 0 00.054-1.413z"
11
11
  }));
12
12
  };
13
13
  var cn = cnCreate('mfui-9-lkvas-bottom-bar');
@@ -9,8 +9,7 @@ var CancelIcon = function CancelIcon(props) {
9
9
  return /*#__PURE__*/React.createElement("svg", _extends({
10
10
  viewBox: "0 0 20 20"
11
11
  }, props), /*#__PURE__*/React.createElement("path", {
12
- className: "CancelIcon__st0",
13
- d: "M10 8.8L6.2 5 5 6.2 8.8 10 5 13.8 6.2 15l3.8-3.8 3.8 3.8 1.2-1.2-3.8-3.8L15 6.2 13.8 5 10 8.8z"
12
+ d: "M5.762 5.76a1 1 0 011.415 0l2.795 2.79 2.788-2.785a1.001 1.001 0 011.415 1.414l-2.788 2.785 2.789 2.787a1 1 0 01-1.414 1.414l-2.79-2.787-2.796 2.794A1 1 0 115.76 12.76l2.796-2.794-2.795-2.792a1 1 0 010-1.414z"
14
13
  }));
15
14
  };
16
15
  var cn = cnCreate('mfui-9-lkvas-card-small');
@@ -8,22 +8,23 @@ var EditIcon = function EditIcon(props) {
8
8
  return /*#__PURE__*/React.createElement("svg", _extends({
9
9
  viewBox: "0 0 20 20"
10
10
  }, props), /*#__PURE__*/React.createElement("path", {
11
- d: "M17.1 2.9c-1.2-1.2-3.2-1.2-4.5 0L3.5 12 2 17l1 1 5-1.5 9.1-9.1c.6-.6.9-1.4.9-2.3s-.3-1.6-.9-2.2zM7.5 15.5l-4.3 1.3-.1-.1 1.3-4.3L11 5.8l3 3-6.5 6.7zm8.9-8.8l-1.5 1.5-3-3 1.5-1.5c.8-.8 2.2-.8 3 0 .4.3.6.9.6 1.4 0 .6-.2 1.2-.6 1.6z"
11
+ d: "M3 16.005a1 1 0 11.001 1.999A1 1 0 013 16.005zm12.646-8.213l-7.92 7.918a1.001 1.001 0 01-.706.293H4.499a.501.501 0 01-.5-.5v-2.52a1 1 0 01.292-.706l7.896-7.894 3.46 3.41zm-1.371-5.496a1.002 1.002 0 011.415 0l2.02 2.02a1 1 0 010 1.414l-1.357 1.355-3.46-3.409 1.382-1.38z"
12
12
  }));
13
13
  };
14
14
  var SettingsIcon = function SettingsIcon(props) {
15
15
  return /*#__PURE__*/React.createElement("svg", _extends({
16
16
  viewBox: "0 0 20 20"
17
17
  }, props), /*#__PURE__*/React.createElement("path", {
18
- d: "M10 13a3 3 0 113-3 3 3 0 01-3 3zm0-5a2 2 0 102 2 2 2 0 00-2-2zm1.37 10H8.63L8 16.89a1.3 1.3 0 00-1.54-.64l-1.19.37-1.9-1.94.37-1.19a1.3 1.3 0 00-.64-1.54L2 11.37V8.62L3.1 8a1.3 1.3 0 00.64-1.5l-.37-1.19 1.94-1.94 1.19.37A1.3 1.3 0 008 3.1L8.63 2h2.75L12 3.1a1.31 1.31 0 001.54.64l1.19-.37 1.94 1.94-.41 1.19A1.3 1.3 0 0016.9 8l1.1.58v2.75l-1.1.58a1.3 1.3 0 00-.64 1.54l.37 1.19-1.94 1.94-1.19-.37a1.31 1.31 0 00-1.54.64zm-2.14-1h1.54l.3-.57a2.3 2.3 0 012.73-1.13l.61.19 1.09-1.09-.19-.61a2.3 2.3 0 011.13-2.73l.57-.3V9.23l-.57-.3A2.3 2.3 0 0115.3 6.2l.19-.61-1.08-1.09-.61.19a2.3 2.3 0 01-2.73-1.13l-.3-.56H9.23l-.3.57a2.3 2.3 0 01-2.72 1.12l-.62-.19-1.08 1.09.19.61a2.3 2.3 0 01-1.13 2.73l-.57.3v1.54l.57.3a2.3 2.3 0 011.13 2.72l-.19.61 1.09 1.09.61-.19a2.3 2.3 0 012.73 1.13z"
18
+ fillRule: "evenodd",
19
+ clipRule: "evenodd",
20
+ d: "M6.622 2.182a1.434 1.434 0 011.296.09l.344.2a3.487 3.487 0 003.514.005l.322-.187a1.434 1.434 0 011.304-.085 8.474 8.474 0 011.688 1c.368.281.555.717.556 1.15v.4l.007.234a3.532 3.532 0 001.742 2.813l.314.183c.377.22.658.604.714 1.066.04.336.061.678.061 1.026l-.014.492c-.01.162-.023.324-.041.483a1.44 1.44 0 01-.714 1.074l-.345.2a3.486 3.486 0 00-1.725 3.014v.46c0 .432-.186.867-.555 1.148a8.477 8.477 0 01-1.644.98 1.434 1.434 0 01-1.31-.082l-.35-.204a3.486 3.486 0 00-3.516-.005l-.392.229a1.435 1.435 0 01-1.303.085 8.485 8.485 0 01-1.604-.935c-.378-.28-.57-.72-.57-1.159v-.498a3.531 3.531 0 00-1.75-3.047l-.399-.233a1.44 1.44 0 01-.715-1.082 8.75 8.75 0 01-.037-.456l-.013-.464c0-.33.02-.654.056-.972a1.44 1.44 0 01.714-1.074l.418-.243a3.485 3.485 0 001.718-2.782l.007-.232v-.479c0-.438.193-.879.57-1.159a8.478 8.478 0 011.652-.954zm3.364 4.886a3 3 0 100 6 3 3 0 000-6z"
19
21
  }));
20
22
  };
21
23
  var CancelIcon = function CancelIcon(props) {
22
24
  return /*#__PURE__*/React.createElement("svg", _extends({
23
25
  viewBox: "0 0 20 20"
24
26
  }, props), /*#__PURE__*/React.createElement("path", {
25
- className: "CancelIcon__st0",
26
- d: "M10 8.8L6.2 5 5 6.2 8.8 10 5 13.8 6.2 15l3.8-3.8 3.8 3.8 1.2-1.2-3.8-3.8L15 6.2 13.8 5 10 8.8z"
27
+ d: "M5.762 5.76a1 1 0 011.415 0l2.795 2.79 2.788-2.785a1.001 1.001 0 011.415 1.414l-2.788 2.785 2.789 2.787a1 1 0 01-1.414 1.414l-2.79-2.787-2.796 2.794A1 1 0 115.76 12.76l2.796-2.794-2.795-2.792a1 1 0 010-1.414z"
27
28
  }));
28
29
  };
29
30
  var cn = cnCreate('mfui-9-lkvas-card-cell');
@@ -12,9 +12,9 @@ var DownloadIcon = function DownloadIcon(props) {
12
12
  return /*#__PURE__*/React.createElement("svg", _extends({
13
13
  viewBox: "0 0 32 32"
14
14
  }, props), /*#__PURE__*/React.createElement("path", {
15
- d: "M15.04 5.99L14.97 17l-1.26-1.49-1.42 1.41L15.37 20h1.26l3.08-3.08-1.42-1.41-1.32 1.55.07-11.05-2-.02z"
15
+ d: "M26.4 14.507a1.6 1.6 0 011.601 1.6c0 1.5-.318 2.984-.93 4.363a11.295 11.295 0 01-2.625 3.67 12.08 12.08 0 01-3.888 2.427 12.67 12.67 0 01-9.115 0 12.083 12.083 0 01-3.888-2.427 11.295 11.295 0 01-2.625-3.67A10.75 10.75 0 014 16.107a1.6 1.6 0 113.2 0c0 1.048.22 2.09.653 3.065a8.097 8.097 0 001.884 2.63 8.881 8.881 0 002.86 1.78 9.453 9.453 0 003.403.631 9.45 9.45 0 003.402-.63 8.883 8.883 0 002.86-1.782 8.096 8.096 0 001.883-2.629 7.55 7.55 0 00.655-3.065 1.6 1.6 0 011.6-1.6z"
16
16
  }), /*#__PURE__*/React.createElement("path", {
17
- d: "M8 17H6a10 10 0 0020 0h-2a8 8 0 01-16 0z"
17
+ d: "M16 6.418a1.6 1.6 0 011.6 1.6v5.813l2.062-2.085a1.6 1.6 0 012.275 2.25l-4.231 4.278-.183.167a2.4 2.4 0 01-3.047 0l-.183-.167-4.23-4.278a1.6 1.6 0 112.275-2.25L14.4 13.83V8.018a1.6 1.6 0 011.6-1.6z"
18
18
  }));
19
19
  };
20
20
  var cn = cnCreate('mfui-9-lkvas-chart');
@@ -1 +1 @@
1
- h1,h2,h3,h4,h5{margin:0}.mfui-9-lkvas-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:none;border-radius:52px;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--content);cursor:pointer;display:inline-block;font-weight:400;height:40px;max-width:100%;min-width:100%;outline:none;overflow:hidden;padding:0;text-align:left;text-decoration:none;-webkit-transition:background-color .3s,color .3s;transition:background-color .3s,color .3s;vertical-align:top;-webkit-tap-highlight-color:rgba(0,0,0,0)}.mfui-9-lkvas-button_color_green{background-color:var(--brandGreen);color:var(--stcWhite)}@media (pointer:fine){.mfui-9-lkvas-button_color_green:hover{background-color:var(--buttonHoverGreen)}}.mfui-9-lkvas-button_color_green:active{background-color:var(--brandGreen)}.mfui-9-lkvas-button_color_green-soft{background-color:var(--brandGreen20)}@media (pointer:fine){.mfui-9-lkvas-button_color_green-soft:hover{background-color:var(--buttonHoverGreenSoft)}}.mfui-9-lkvas-button_color_green-soft:active{background-color:var(--brandGreen20)}.mfui-9-lkvas-button__inner{display:-webkit-box;display:-ms-flexbox;display:flex;gap:8px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;height:inherit;padding:0 8px;width:100%}.mfui-9-lkvas-button__support-svg{-ms-flex-negative:0;flex-shrink:0;height:32px;width:32px;fill:currentColor}.mfui-9-lkvas-button__profile-svg{-ms-flex-negative:0;flex-shrink:0;height:20px;width:20px;fill:currentColor}.mfui-9-lkvas-button__text{margin:0 4px 0 8px;overflow:hidden}.mfui-9-lkvas-button_has-icon .mfui-9-lkvas-button__text{margin-left:4px}.mfui-9-lkvas-button__title{font-size:15px;font-weight:500;line-height:18px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mfui-9-lkvas-button__subtitle{font-size:12px;line-height:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mfui-9-lkvas-button__arrow{-ms-flex-negative:0;background-color:var(--stcWhite);border-radius:50%;flex-shrink:0;height:24px;-webkit-transition:rotate .3s;transition:rotate .3s;width:24px}.mfui-9-lkvas-button_opened .mfui-9-lkvas-button__arrow{rotate:-180deg}.mfui-9-lkvas-button__arrow-svg{height:100%;width:100%;fill:var(--content)}
1
+ h1,h2,h3,h4,h5{margin:0}.mfui-9-lkvas-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:none;border-radius:52px;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--content);cursor:pointer;display:inline-block;font-weight:400;height:40px;max-width:100%;min-width:100%;outline:none;overflow:hidden;padding:0;text-align:left;text-decoration:none;-webkit-transition:background-color .3s,color .3s;transition:background-color .3s,color .3s;vertical-align:top;-webkit-tap-highlight-color:rgba(0,0,0,0)}.mfui-9-lkvas-button_color_green{background-color:var(--brandGreen);color:var(--stcWhite)}@media (pointer:fine){.mfui-9-lkvas-button_color_green:hover{background-color:var(--buttonHoverGreen)}}.mfui-9-lkvas-button_color_green:active{background-color:var(--brandGreen)}.mfui-9-lkvas-button_color_green-soft{background-color:var(--brandGreen20)}@media (pointer:fine){.mfui-9-lkvas-button_color_green-soft:hover{background-color:var(--buttonHoverGreenSoft)}}.mfui-9-lkvas-button_color_green-soft:active{background-color:var(--brandGreen20)}.mfui-9-lkvas-button__inner{display:-webkit-box;display:-ms-flexbox;display:flex;gap:8px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;height:inherit;padding:0 8px;width:100%}.mfui-9-lkvas-button__support-svg{-ms-flex-negative:0;flex-shrink:0;height:32px;width:32px;fill:currentColor}.mfui-9-lkvas-button__profile-svg{-ms-flex-negative:0;flex-shrink:0;height:20px;width:20px;fill:currentColor}.mfui-9-lkvas-button__text{margin:0 4px 0 8px;overflow:hidden}.mfui-9-lkvas-button_has-icon .mfui-9-lkvas-button__text{margin-left:4px}.mfui-9-lkvas-button__title{font-size:15px;font-weight:500;line-height:18px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mfui-9-lkvas-button__subtitle{font-size:12px;line-height:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mfui-9-lkvas-button__arrow{-ms-flex-negative:0;background-color:var(--stcWhite);border-radius:50%;flex-shrink:0;height:24px;-webkit-transition:rotate .3s;transition:rotate .3s;width:24px}.mfui-9-lkvas-button_opened .mfui-9-lkvas-button__arrow{rotate:-180deg}.mfui-9-lkvas-button__arrow-svg{height:100%;width:100%;fill:var(--stcBlack)}
@@ -6,31 +6,25 @@ var ProfileIcon = function ProfileIcon(props) {
6
6
  return /*#__PURE__*/React.createElement("svg", _extends({
7
7
  viewBox: "0 0 20 20"
8
8
  }, props), /*#__PURE__*/React.createElement("path", {
9
- d: "M5.22 18h9.55L16 13.47A8.28 8.28 0 0010 11a8.302 8.302 0 00-6 2.5L5.22 18zM14 6a4 4 0 10-8 0 4 4 0 008 0z"
9
+ d: "M15.034 9c.552 0 1.004.45.963 1-.334 4.5-2.892 8-5.997 8-3.106 0-5.664-3.5-5.997-8-.041-.55.41-1 .962-1h10.069zM10 2a3.008 3.008 0 013.017 3c0 1.657-1.35 3-3.017 3a3.008 3.008 0 01-3.017-3c0-1.657 1.35-3 3.017-3z"
10
10
  }));
11
11
  };
12
12
  var SupportIcon = function SupportIcon(props) {
13
13
  return /*#__PURE__*/React.createElement("svg", _extends({
14
14
  viewBox: "0 0 32 32"
15
15
  }, props), /*#__PURE__*/React.createElement("path", {
16
- d: "M26.71 11.65h-1.53A8.43 8.43 0 0016.76 4h-1.52A8.18 8.18 0 007 11.65H5.29A3.22 3.22 0 002 14.94V18a3.19 3.19 0 003.29 3.29H9v-8.64A7.56 7.56 0 019.19 11 19.33 19.33 0 0019 13.65h4.24L23 21.82c0 1.87-.56 3.84-2.06 4.12A3.5 3.5 0 0017.5 23h-2a3.5 3.5 0 000 7h2a3.5 3.5 0 003.15-2c2.64 0 4.35-2.45 4.35-6.15v-.56h1.69A3.19 3.19 0 0030 18v-3.06a3.22 3.22 0 00-3.29-3.29zM7 19.29H5.29A1.3 1.3 0 014 18v-3.06a1.3 1.3 0 011.29-1.29H7zm12-7.65a17.31 17.31 0 01-9.09-2.55A6 6 0 0115.24 6h1.53a6.44 6.44 0 016.4 5.65zM17.5 28h-2a1.5 1.5 0 010-3h2a1.5 1.5 0 010 3zM28 18a1.3 1.3 0 01-1.29 1.29h-1.64l.14-5.65h1.5a1.3 1.3 0 011.29 1.3z"
17
- }), /*#__PURE__*/React.createElement("circle", {
18
- cx: 12.5,
19
- cy: 16.5,
20
- r: 1.5
21
- }), /*#__PURE__*/React.createElement("circle", {
22
- cx: 19.5,
23
- cy: 16.5,
24
- r: 1.5
16
+ fillRule: "evenodd",
17
+ clipRule: "evenodd",
18
+ d: "M15.992 5c3.588 0 6.514 1.616 6.681 3.644a2.699 2.699 0 011.32 2.325v1.257h1.34l.273.014A2.685 2.685 0 0128 14.922v3.976c0 1.396-1.05 2.545-2.395 2.683l-.272.013H23.98v1.347c0 2.242-1.799 4.059-4.017 4.059h-4.537c-1.105 0-2-.906-2-2.022a2.01 2.01 0 012-2.022h1.333c1.104 0 2 .905 2 2.022 0 .236-.042.463-.116.674h1.32c1.482 0 2.683-1.214 2.684-2.711v-5c0-.067.013-.132.031-.194v-2.064c-.741-.346-1.303-1.1-1.43-1.982-.119-.812-.308-1.546-.556-2.154-1.208.682-2.867 1.105-4.699 1.105-1.875 0-3.57-.442-4.785-1.153-.258.637-.45 1.417-.566 2.283-.113.84-.64 1.558-1.34 1.897v5.915H6.667l-.272-.013C5.05 21.443 4 20.294 4 18.898v-3.976a2.685 2.685 0 012.395-2.682l.272-.014h1.325v-1.257A2.7 2.7 0 019.31 8.644C9.476 6.616 12.404 5 15.992 5z"
19
+ }), /*#__PURE__*/React.createElement("path", {
20
+ d: "M13.328 16.207a1.34 1.34 0 011.334 1.347 1.34 1.34 0 01-1.334 1.346 1.34 1.34 0 01-1.333-1.346 1.34 1.34 0 011.333-1.347zm5.335 0a1.34 1.34 0 011.333 1.347 1.34 1.34 0 01-1.333 1.346 1.34 1.34 0 01-1.334-1.346 1.34 1.34 0 011.334-1.347z"
25
21
  }));
26
22
  };
27
23
  var ArrowIcon = function ArrowIcon(props) {
28
24
  return /*#__PURE__*/React.createElement("svg", _extends({
29
25
  viewBox: "0 0 20 20"
30
26
  }, props), /*#__PURE__*/React.createElement("path", {
31
- d: "M6 8h8l-4 5z",
32
- fillRule: "evenodd",
33
- clipRule: "evenodd"
27
+ d: "M10.465 11.798a.609.609 0 01-.907 0L7.187 9.25c-.41-.44-.1-1.25.476-1.25h4.679c.575 0 .879.811.47 1.25l-2.347 2.548z"
34
28
  }));
35
29
  };
36
30
  var cn = cnCreate('mfui-9-lkvas-button');
@@ -9,9 +9,7 @@ var ArrowIcon = function ArrowIcon(props) {
9
9
  return /*#__PURE__*/React.createElement("svg", _extends({
10
10
  viewBox: "0 0 20 20"
11
11
  }, props), /*#__PURE__*/React.createElement("path", {
12
- d: "M6 8h8l-4 5z",
13
- fillRule: "evenodd",
14
- clipRule: "evenodd"
12
+ d: "M10.465 11.798a.609.609 0 01-.907 0L7.187 9.25c-.41-.44-.1-1.25.476-1.25h4.679c.575 0 .879.811.47 1.25l-2.347 2.548z"
15
13
  }));
16
14
  };
17
15
  var cn = cnCreate('mfui-9-lkvas-lk-select');
@@ -1 +1 @@
1
- h1,h2,h3,h4,h5{margin:0}.mfui-9-lkvas-table{border-radius:12px 12px 0 0;overflow:auto hidden;position:relative;z-index:1}.mfui-9-lkvas-table::-webkit-scrollbar{height:12px}.mfui-9-lkvas-table::-webkit-scrollbar,.mfui-9-lkvas-table::-webkit-scrollbar-track{background-color:var(--spbSky1);border-radius:100px}.mfui-9-lkvas-table::-webkit-scrollbar-thumb{background-color:var(--spbSky2);border-radius:100px}.mfui-9-lkvas-table__table{background-color:var(--base);border-collapse:collapse;border-spacing:0;border-width:0;width:100%}
1
+ h1,h2,h3,h4,h5{margin:0}.mfui-9-lkvas-table{position:relative}.mfui-9-lkvas-table:after,.mfui-9-lkvas-table:before{height:18px;left:0;position:absolute;right:0;z-index:2}.mfui-9-lkvas-table:not(.mfui-9-lkvas-table_v-scroll_start):not(.mfui-9-lkvas-table_v-scroll_none):before{background:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,.04)),color-stop(49.5%,rgba(0,0,0,.01)),to(hsla(0,0%,100%,0)));background:linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.01) 49.5%,hsla(0,0%,100%,0));content:"";top:0}.mfui-9-lkvas-table_h-scroll_none:not(.mfui-9-lkvas-table_v-scroll_end):not(.mfui-9-lkvas-table_v-scroll_none):after{background:-webkit-gradient(linear,left bottom,left top,from(rgba(0,0,0,.04)),color-stop(49.5%,rgba(0,0,0,.01)),to(hsla(0,0%,100%,0)));background:linear-gradient(0deg,rgba(0,0,0,.04),rgba(0,0,0,.01) 49.5%,hsla(0,0%,100%,0));bottom:0;content:""}.mfui-9-lkvas-table__inner{border-radius:12px 12px 0 0;overflow:auto;position:relative;z-index:1}.mfui-9-lkvas-table__inner::-webkit-scrollbar{height:12px;width:12px}.mfui-9-lkvas-table__inner::-webkit-scrollbar,.mfui-9-lkvas-table__inner::-webkit-scrollbar-track{background-color:var(--spbSky1);border-radius:100px}.mfui-9-lkvas-table__inner::-webkit-scrollbar-thumb{background-color:var(--spbSky2);border-radius:100px}.mfui-9-lkvas-table__table{background-color:var(--base);border-collapse:collapse;border-spacing:0;border-width:0;width:100%}
@@ -1,4 +1,15 @@
1
1
  import * as React from 'react';
2
2
  import './Table.scss';
3
- declare const Table: React.FC<React.PropsWithChildren>;
3
+ export interface ITable {
4
+ /** Дополнительный класс корневого элемента */
5
+ className?: string;
6
+ /** Высота таблицы */
7
+ height?: string;
8
+ /** Дополнительные data атрибуты к внутренним элементам */
9
+ dataAttrs?: {
10
+ root?: Record<string, string>;
11
+ inner?: Record<string, string>;
12
+ };
13
+ }
14
+ declare const Table: React.FC<React.PropsWithChildren<ITable>>;
4
15
  export default Table;
@@ -1,16 +1,23 @@
1
+ import _extends from "@babel/runtime/helpers/extends";
1
2
  import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
2
3
  import * as React from 'react';
3
- import { cnCreate } from '@megafon/ui-helpers';
4
+ import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
4
5
  import throttle from 'lodash.throttle';
5
6
  import TableContext from "./contexts/TableContext";
6
7
  import { calculateScrollPosition } from "./helpers";
7
8
  import "./Table.css";
8
9
  var cn = cnCreate('mfui-9-lkvas-table');
9
10
  var Table = function Table(_ref) {
10
- var children = _ref.children;
11
+ var className = _ref.className,
12
+ height = _ref.height,
13
+ dataAttrs = _ref.dataAttrs,
14
+ children = _ref.children;
11
15
  var rootRef = React.useRef(null);
12
16
  var tableRef = React.useRef(null);
13
- var _React$useState = React.useState('none'),
17
+ var _React$useState = React.useState({
18
+ horizontal: 'none',
19
+ vertical: 'none'
20
+ }),
14
21
  _React$useState2 = _slicedToArray(_React$useState, 2),
15
22
  scrollPosition = _React$useState2[0],
16
23
  setScrollPosition = _React$useState2[1];
@@ -20,11 +27,17 @@ var Table = function Table(_ref) {
20
27
  return;
21
28
  }
22
29
  var scrollWidth = rootNode.scrollWidth,
30
+ scrollHeight = rootNode.scrollHeight,
23
31
  clientWidth = rootNode.clientWidth,
24
- scrollLeft = rootNode.scrollLeft;
32
+ clientHeight = rootNode.clientHeight,
33
+ scrollLeft = rootNode.scrollLeft,
34
+ scrollTop = rootNode.scrollTop;
25
35
  var deltaWidth = scrollWidth - clientWidth;
26
- var position = calculateScrollPosition(scrollLeft, deltaWidth);
27
- setScrollPosition(position);
36
+ var deltaHeight = scrollHeight - clientHeight;
37
+ setScrollPosition({
38
+ horizontal: calculateScrollPosition(scrollLeft, deltaWidth),
39
+ vertical: calculateScrollPosition(scrollTop, deltaHeight)
40
+ });
28
41
  }, []);
29
42
  React.useEffect(function () {
30
43
  if (!tableRef.current) {
@@ -39,17 +52,25 @@ var Table = function Table(_ref) {
39
52
  observer.unobserve(tableNode);
40
53
  };
41
54
  }, [handleTableScroll]);
42
- return /*#__PURE__*/React.createElement("div", {
43
- className: cn(),
55
+ return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
56
+ className: cn({
57
+ 'v-scroll': scrollPosition.vertical,
58
+ 'h-scroll': scrollPosition.horizontal
59
+ }, [className])
60
+ }), /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.inner), {
61
+ className: cn('inner'),
62
+ style: {
63
+ height: height
64
+ },
44
65
  ref: rootRef,
45
66
  onScroll: handleTableScroll
46
- }, /*#__PURE__*/React.createElement(TableContext.Provider, {
67
+ }), /*#__PURE__*/React.createElement(TableContext.Provider, {
47
68
  value: {
48
69
  scrollPosition: scrollPosition
49
70
  }
50
71
  }, /*#__PURE__*/React.createElement("table", {
51
72
  className: cn('table'),
52
73
  ref: tableRef
53
- }, children)));
74
+ }, children))));
54
75
  };
55
76
  export default Table;
@@ -1,3 +1,11 @@
1
1
  import * as React from 'react';
2
- declare const TableBody: React.FC<React.PropsWithChildren>;
2
+ export interface ITableBody {
3
+ /** Дополнительный класс корневого элемента */
4
+ className?: string;
5
+ /** Дополнительные data атрибуты к внутренним элементам */
6
+ dataAttrs?: {
7
+ root?: Record<string, string>;
8
+ };
9
+ }
10
+ declare const TableBody: React.FC<React.PropsWithChildren<ITableBody>>;
3
11
  export default TableBody;
@@ -1,10 +1,13 @@
1
+ import _extends from "@babel/runtime/helpers/extends";
1
2
  import * as React from 'react';
2
- import { cnCreate } from '@megafon/ui-helpers';
3
+ import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
3
4
  var cn = cnCreate('mfui-9-lkvas-table-body');
4
5
  var TableBody = function TableBody(_ref) {
5
- var children = _ref.children;
6
- return /*#__PURE__*/React.createElement("tbody", {
7
- className: cn()
8
- }, children);
6
+ var className = _ref.className,
7
+ dataAttrs = _ref.dataAttrs,
8
+ children = _ref.children;
9
+ return /*#__PURE__*/React.createElement("tbody", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
10
+ className: cn([className])
11
+ }), children);
9
12
  };
10
13
  export default TableBody;
@@ -1,3 +1,11 @@
1
1
  import * as React from 'react';
2
- declare const TableHead: React.FC<React.PropsWithChildren>;
2
+ export interface ITableHead {
3
+ /** Дополнительный класс корневого элемента */
4
+ className?: string;
5
+ /** Дополнительные data атрибуты к внутренним элементам */
6
+ dataAttrs?: {
7
+ root?: Record<string, string>;
8
+ };
9
+ }
10
+ declare const TableHead: React.FC<React.PropsWithChildren<ITableHead>>;
3
11
  export default TableHead;
@@ -1,10 +1,13 @@
1
+ import _extends from "@babel/runtime/helpers/extends";
1
2
  import * as React from 'react';
2
- import { cnCreate } from '@megafon/ui-helpers';
3
+ import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
3
4
  var cn = cnCreate('mfui-9-lkvas-table-head');
4
5
  var TableHead = function TableHead(_ref) {
5
- var children = _ref.children;
6
- return /*#__PURE__*/React.createElement("thead", {
7
- className: cn()
8
- }, children);
6
+ var className = _ref.className,
7
+ dataAttrs = _ref.dataAttrs,
8
+ children = _ref.children;
9
+ return /*#__PURE__*/React.createElement("thead", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
10
+ className: cn([className])
11
+ }), children);
9
12
  };
10
13
  export default TableHead;
@@ -11,6 +11,13 @@ export interface ITableSettingsProps {
11
11
  root?: string;
12
12
  tooltip?: string;
13
13
  };
14
+ /** Дополнительные data атрибуты к внутренним элементам */
15
+ dataAttrs?: {
16
+ root?: Record<string, string>;
17
+ dots?: Record<string, string>;
18
+ tooltip?: Record<string, string>;
19
+ item?: Record<string, string>;
20
+ };
14
21
  }
15
22
  declare const TableSettings: React.FC<React.PropsWithChildren<ITableSettingsProps>>;
16
23
  export default TableSettings;
@@ -2,21 +2,22 @@ import _extends from "@babel/runtime/helpers/extends";
2
2
  import "core-js/modules/es.array.map.js";
3
3
  import * as React from 'react';
4
4
  import { Tooltip } from '@megafon/ui-core';
5
- import { cnCreate } from '@megafon/ui-helpers';
5
+ import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
6
6
  import DropdownItem from "../../../_DropdownItem/DropdownItem";
7
7
  import "./TableSettings.css";
8
8
  var cn = cnCreate('mfui-9-lkvas-table-settings');
9
9
  var TableSettings = function TableSettings(_ref) {
10
10
  var className = _ref.className,
11
11
  items = _ref.items,
12
- classes = _ref.classes;
12
+ classes = _ref.classes,
13
+ dataAttrs = _ref.dataAttrs;
13
14
  var triggerRef = React.useRef(null);
14
- return /*#__PURE__*/React.createElement("div", {
15
+ return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
15
16
  className: cn([className, classes === null || classes === void 0 ? void 0 : classes.root])
16
- }, /*#__PURE__*/React.createElement("div", {
17
+ }), /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.dots), {
17
18
  className: cn('dots'),
18
19
  ref: triggerRef
19
- }, /*#__PURE__*/React.createElement("div", {
20
+ }), /*#__PURE__*/React.createElement("div", {
20
21
  className: cn('dots-inner')
21
22
  }, /*#__PURE__*/React.createElement("div", {
22
23
  className: cn('dot')
@@ -30,11 +31,19 @@ var TableSettings = function TableSettings(_ref) {
30
31
  placement: "left",
31
32
  fallbackPlacements: ['right'],
32
33
  triggerEvent: "click",
33
- colorTheme: "blue"
34
+ colorTheme: "blue",
35
+ strategy: "fixed",
36
+ offset: "small",
37
+ dataAttrs: {
38
+ root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.tooltip
39
+ }
34
40
  }, items.map(function (item) {
35
41
  return /*#__PURE__*/React.createElement(DropdownItem, _extends({}, item, {
36
42
  key: item.id + item.title,
37
- color: "white"
43
+ color: "white",
44
+ dataAttrs: {
45
+ root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.item
46
+ }
38
47
  }));
39
48
  })));
40
49
  };
@@ -1 +1 @@
1
- h1,h2,h3,h4,h5{margin:0}.mfui-9-lkvas-table-td{background-color:var(--base);font-size:15px;font-weight:400;line-height:24px;padding:12px}.mfui-9-lkvas-table-td_pinned:first-child{left:0;position:sticky}.mfui-9-lkvas-table-td_pinned:first-child:not(.mfui-9-lkvas-table-td_scroll_start,.mfui-9-lkvas-table-td_scroll_none):after{background:-webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.04)),color-stop(49.5%,rgba(0,0,0,.01)),to(hsla(0,0%,100%,0)));background:linear-gradient(90deg,rgba(0,0,0,.04),rgba(0,0,0,.01) 49.5%,hsla(0,0%,100%,0));bottom:0;content:"";position:absolute;right:-18px;top:0;width:18px}.mfui-9-lkvas-table-td_pinned:last-child{position:sticky;right:0}.mfui-9-lkvas-table-td_pinned:last-child:not(.mfui-9-lkvas-table-td_scroll_end,.mfui-9-lkvas-table-td_scroll_none):after{background:-webkit-gradient(linear,right top,left top,from(rgba(0,0,0,.04)),color-stop(49.5%,rgba(0,0,0,.01)),to(hsla(0,0%,100%,0)));background:linear-gradient(270deg,rgba(0,0,0,.04),rgba(0,0,0,.01) 49.5%,hsla(0,0%,100%,0));bottom:0;content:"";left:-18px;position:absolute;top:0;width:18px}
1
+ h1,h2,h3,h4,h5{margin:0}.mfui-9-lkvas-table-td{background-color:var(--base);font-size:15px;font-weight:400;line-height:24px;padding:12px}.mfui-9-lkvas-table-td_pinned:first-child{left:0;position:sticky}.mfui-9-lkvas-table-td_pinned:first-child:not(.mfui-9-lkvas-table-td_scroll_start,.mfui-9-lkvas-table-td_scroll_none):after{background:-webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.04)),color-stop(49.5%,rgba(0,0,0,.01)),to(hsla(0,0%,100%,0)));background:linear-gradient(90deg,rgba(0,0,0,.04),rgba(0,0,0,.01) 49.5%,hsla(0,0%,100%,0));bottom:0;content:"";position:absolute;right:-18px;top:0;width:18px}.mfui-9-lkvas-table-td_pinned:last-child{position:sticky;right:0}.mfui-9-lkvas-table-td_pinned:last-child:not(.mfui-9-lkvas-table-td_scroll_end,.mfui-9-lkvas-table-td_scroll_none):after{background:-webkit-gradient(linear,right top,left top,from(rgba(0,0,0,.04)),color-stop(49.5%,rgba(0,0,0,.01)),to(hsla(0,0%,100%,0)));background:linear-gradient(270deg,rgba(0,0,0,.04),rgba(0,0,0,.01) 49.5%,hsla(0,0%,100%,0));bottom:0;content:"";left:-18px;position:absolute;top:0;width:18px}.mfui-9-lkvas-table-td_active{background-color:var(--spbSky0)}
@@ -1,8 +1,18 @@
1
1
  import * as React from 'react';
2
2
  import './TableTd.scss';
3
3
  export interface ITableTdProps {
4
+ /** Дополнительный класс корневого элемента */
5
+ className?: string;
6
+ /** Атрибут colSpan для тега td */
7
+ colSpan?: number;
4
8
  /** Фиксация ячейки во время горизонтальной прокрутки (только для первой и последней ячейки в строке) */
5
9
  pinned?: boolean;
10
+ /** Сделать активной отсортированную ячейку */
11
+ isSortActive?: boolean;
12
+ /** Дополнительные data атрибуты к внутренним элементам */
13
+ dataAttrs?: {
14
+ root?: Record<string, string>;
15
+ };
6
16
  }
7
17
  declare const TableTd: React.FC<React.PropsWithChildren<ITableTdProps>>;
8
18
  export default TableTd;
@@ -1,18 +1,26 @@
1
+ import _extends from "@babel/runtime/helpers/extends";
1
2
  import * as React from 'react';
2
- import { cnCreate } from '@megafon/ui-helpers';
3
+ import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
3
4
  import TableContext from "../../contexts/TableContext";
4
5
  import "./TableTd.css";
5
6
  var cn = cnCreate('mfui-9-lkvas-table-td');
6
7
  var TableTd = function TableTd(_ref) {
7
- var pinned = _ref.pinned,
8
+ var className = _ref.className,
9
+ colSpan = _ref.colSpan,
10
+ pinned = _ref.pinned,
11
+ _ref$isSortActive = _ref.isSortActive,
12
+ isSortActive = _ref$isSortActive === void 0 ? false : _ref$isSortActive,
13
+ dataAttrs = _ref.dataAttrs,
8
14
  children = _ref.children;
9
15
  var _React$useContext = React.useContext(TableContext),
10
16
  scrollPosition = _React$useContext.scrollPosition;
11
- return /*#__PURE__*/React.createElement("td", {
17
+ return /*#__PURE__*/React.createElement("td", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
12
18
  className: cn({
13
19
  pinned: pinned,
14
- scroll: pinned && scrollPosition
15
- })
16
- }, children);
20
+ scroll: pinned && scrollPosition.horizontal,
21
+ active: isSortActive
22
+ }, [className]),
23
+ colSpan: colSpan
24
+ }), children);
17
25
  };
18
26
  export default TableTd;
@@ -1 +1 @@
1
- h1,h2,h3,h4,h5{margin:0}.mfui-9-lkvas-table-th{background-color:var(--spbSky0);color:var(--spbSky3);font-size:15px;font-weight:500;line-height:24px;padding:16px 12px;text-align:left}.mfui-9-lkvas-table-th:first-child{border-radius:12px 0 0 12px}.mfui-9-lkvas-table-th:last-child{border-radius:0 12px 12px 0}.mfui-9-lkvas-table-th__inner{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;gap:4px;position:relative;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mfui-9-lkvas-table-th_pinned:first-child{left:0;position:sticky;z-index:1}.mfui-9-lkvas-table-th_pinned:first-child:not(.mfui-9-lkvas-table-th_scroll_start,.mfui-9-lkvas-table-th_scroll_none):after{background:-webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.04)),color-stop(49.5%,rgba(0,0,0,.01)),to(hsla(0,0%,100%,0)));background:linear-gradient(90deg,rgba(0,0,0,.04),rgba(0,0,0,.01) 49.5%,hsla(0,0%,100%,0));bottom:0;content:"";position:absolute;right:-18px;top:0;width:18px}.mfui-9-lkvas-table-th_pinned:last-child{position:sticky;right:0;z-index:1}.mfui-9-lkvas-table-th_pinned:last-child:not(.mfui-9-lkvas-table-th_scroll_end,.mfui-9-lkvas-table-th_scroll_none):after{background:-webkit-gradient(linear,right top,left top,from(rgba(0,0,0,.04)),color-stop(49.5%,rgba(0,0,0,.01)),to(hsla(0,0%,100%,0)));background:linear-gradient(270deg,rgba(0,0,0,.04),rgba(0,0,0,.01) 49.5%,hsla(0,0%,100%,0));bottom:0;content:"";left:-18px;position:absolute;top:0;width:18px}.mfui-9-lkvas-table-th__sorting{display:-webkit-box;display:-ms-flexbox;display:flex;left:100%;position:absolute;top:50%;translate:4px -50%;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:4px;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.mfui-9-lkvas-table-th__sorting-down,.mfui-9-lkvas-table-th__sorting-up{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;cursor:pointer;height:20px;justify-content:center;width:20px}.mfui-9-lkvas-table-th__sorting-down:after,.mfui-9-lkvas-table-th__sorting-up:after{border-left:3px solid transparent;border-right:3px solid transparent;content:"";height:0;width:0}.mfui-9-lkvas-table-th__sorting-up{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.mfui-9-lkvas-table-th__sorting-up:after{border-bottom:4px solid var(--spbSky3)}.mfui-9-lkvas-table-th__sorting-up:hover:after{border-bottom-color:var(--content)}.mfui-9-lkvas-table-th__sorting-down{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.mfui-9-lkvas-table-th__sorting-down:after{border-top:4px solid var(--spbSky3);content:""}.mfui-9-lkvas-table-th__sorting-down:hover:after{border-top-color:var(--content)}.mfui-9-lkvas-table-th__notice-icon{cursor:pointer;display:block;height:24px;width:24px;fill:var(--spbSky3)}
1
+ h1,h2,h3,h4,h5{margin:0}.mfui-9-lkvas-table-th{background-color:var(--spbSky0);color:var(--spbSky3);font-size:15px;font-weight:500;line-height:24px;padding:16px 12px;text-align:left}.mfui-9-lkvas-table-th:first-child{border-radius:12px 0 0 12px}.mfui-9-lkvas-table-th:last-child{border-radius:0 12px 12px 0}.mfui-9-lkvas-table-th__inner{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;gap:4px;position:relative;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mfui-9-lkvas-table-th_pinned:first-child{left:0;position:sticky;z-index:1}.mfui-9-lkvas-table-th_pinned:first-child:not(.mfui-9-lkvas-table-th_scroll_start,.mfui-9-lkvas-table-th_scroll_none):after{background:-webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.04)),color-stop(49.5%,rgba(0,0,0,.01)),to(hsla(0,0%,100%,0)));background:linear-gradient(90deg,rgba(0,0,0,.04),rgba(0,0,0,.01) 49.5%,hsla(0,0%,100%,0));bottom:0;content:"";position:absolute;right:-18px;top:0;width:18px}.mfui-9-lkvas-table-th_pinned:last-child{position:sticky;right:0;z-index:1}.mfui-9-lkvas-table-th_pinned:last-child:not(.mfui-9-lkvas-table-th_scroll_end,.mfui-9-lkvas-table-th_scroll_none):after{background:-webkit-gradient(linear,right top,left top,from(rgba(0,0,0,.04)),color-stop(49.5%,rgba(0,0,0,.01)),to(hsla(0,0%,100%,0)));background:linear-gradient(270deg,rgba(0,0,0,.04),rgba(0,0,0,.01) 49.5%,hsla(0,0%,100%,0));bottom:0;content:"";left:-18px;position:absolute;top:0;width:18px}.mfui-9-lkvas-table-th__sorting{display:-webkit-box;display:-ms-flexbox;display:flex;left:100%;position:absolute;top:50%;translate:4px -50%;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:4px;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.mfui-9-lkvas-table-th__sorting-down,.mfui-9-lkvas-table-th__sorting-up{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;cursor:pointer;height:20px;justify-content:center;width:20px}.mfui-9-lkvas-table-th__sorting-down:after,.mfui-9-lkvas-table-th__sorting-up:after{border-left:3px solid transparent;border-right:3px solid transparent;content:"";height:0;width:0}.mfui-9-lkvas-table-th__sorting-up{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.mfui-9-lkvas-table-th__sorting-up:after{border-bottom:4px solid var(--spbSky3)}.mfui-9-lkvas-table-th__sorting-up:hover:after,.mfui-9-lkvas-table-th__sorting-up_current:after{border-bottom-color:var(--content)}.mfui-9-lkvas-table-th__sorting-down{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.mfui-9-lkvas-table-th__sorting-down:after{border-top:4px solid var(--spbSky3);content:""}.mfui-9-lkvas-table-th__sorting-down:hover:after,.mfui-9-lkvas-table-th__sorting-down_current:after{border-top-color:var(--content)}.mfui-9-lkvas-table-th__notice-icon{cursor:pointer;display:block;height:24px;width:24px;fill:var(--spbSky3)}.mfui-9-lkvas-table-th_active{background-color:var(--spbSky1)}
@@ -5,21 +5,29 @@ interface ITooltip {
5
5
  /** Заголовок тултипа */
6
6
  title: string;
7
7
  /** Текст тултипа */
8
- text: string;
8
+ text?: string;
9
9
  /** Текст кнопки тултипа */
10
10
  buttonText?: string;
11
11
  /** Отобразить кнопку закрытия тултипа */
12
12
  hasCloseButton?: boolean;
13
+ /** Дополнительный контент */
14
+ additionalContent?: React.ReactNode;
13
15
  /** Обработчик клика по кнопке тултипа */
14
16
  onButtonClick?: (e: React.SyntheticEvent<EventTarget, Event>) => void;
15
17
  /** Обработчик клика по кнопке закрытия тултипа */
16
18
  onCloseButtonClick?: (e: React.SyntheticEvent<EventTarget, Event>) => void;
17
19
  }
18
20
  export interface ITableThProps {
21
+ /** Дополнительный класс корневого элемента */
22
+ className?: string;
19
23
  /** Фиксация ячейки во время горизонтальной прокрутки (только для первой и последней ячейки в строке) */
20
24
  pinned?: boolean;
21
25
  /** Показать элементы сортировки */
22
26
  showSorting?: boolean;
27
+ /** Сделать активной отсортированную ячейку */
28
+ isSortActive?: boolean;
29
+ /** Текущий тип сортировки */
30
+ currentSortType?: SortType;
23
31
  /** Минимальная ширина ячейки */
24
32
  minWidth?: string;
25
33
  /** Ширина ячейки */
@@ -1,4 +1,14 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
+ import "core-js/modules/es.symbol.js";
3
+ import "core-js/modules/es.array.index-of.js";
4
+ var __rest = this && this.__rest || function (s, e) {
5
+ var t = {};
6
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
7
+ if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
8
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
9
+ }
10
+ return t;
11
+ };
2
12
  import * as React from 'react';
3
13
  import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
4
14
  import TableContext from "../../contexts/TableContext";
@@ -8,14 +18,21 @@ var InfoIcon = function InfoIcon(props) {
8
18
  return /*#__PURE__*/React.createElement("svg", _extends({
9
19
  viewBox: "0 0 32 32"
10
20
  }, props), /*#__PURE__*/React.createElement("path", {
11
- d: "M16 4C9.4 4 4 9.4 4 16s5.4 12 12 12 12-5.4 12-12S22.6 4 16 4zm1 18h-2v-8h2v8zm0-10h-2v-2h2v2z"
21
+ fillRule: "evenodd",
22
+ clipRule: "evenodd",
23
+ d: "M16 4c6.627 0 12 5.373 12 12s-5.373 12-12 12S4 22.627 4 16 9.373 4 16 4zm0 9.25c-.78 0-1.412.633-1.412 1.412v7.059a1.412 1.412 0 102.824 0v-7.059c0-.78-.632-1.412-1.412-1.412zm-.144-4.477a1.412 1.412 0 100 2.824 1.412 1.412 0 000-2.824z"
12
24
  }));
13
25
  };
14
26
  var cn = cnCreate('mfui-9-lkvas-table-th');
15
27
  var TableTh = function TableTh(_ref) {
16
- var pinned = _ref.pinned,
28
+ var className = _ref.className,
29
+ pinned = _ref.pinned,
17
30
  _ref$showSorting = _ref.showSorting,
18
31
  showSorting = _ref$showSorting === void 0 ? false : _ref$showSorting,
32
+ _ref$isSortActive = _ref.isSortActive,
33
+ isSortActive = _ref$isSortActive === void 0 ? false : _ref$isSortActive,
34
+ _ref$currentSortType = _ref.currentSortType,
35
+ currentSortType = _ref$currentSortType === void 0 ? 'up' : _ref$currentSortType,
19
36
  minWidth = _ref.minWidth,
20
37
  width = _ref.width,
21
38
  infoTooltip = _ref.infoTooltip,
@@ -36,11 +53,15 @@ var TableTh = function TableTh(_ref) {
36
53
  return /*#__PURE__*/React.createElement("div", {
37
54
  className: cn('sorting')
38
55
  }, /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.sortingUp), {
39
- className: cn('sorting-up'),
56
+ className: cn('sorting-up', {
57
+ current: isSortActive && currentSortType === 'up'
58
+ }),
40
59
  onClick: handleSort('up'),
41
60
  role: "presentation"
42
61
  })), /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.sortingDown), {
43
- className: cn('sorting-down'),
62
+ className: cn('sorting-down', {
63
+ current: isSortActive && currentSortType === 'down'
64
+ }),
44
65
  onClick: handleSort('down'),
45
66
  role: "presentation"
46
67
  })));
@@ -49,17 +70,20 @@ var TableTh = function TableTh(_ref) {
49
70
  if (!infoTooltip) {
50
71
  return null;
51
72
  }
52
- return /*#__PURE__*/React.createElement(TableTooltip, _extends({}, infoTooltip, {
73
+ var additionalContent = infoTooltip.additionalContent,
74
+ restProps = __rest(infoTooltip, ["additionalContent"]);
75
+ return /*#__PURE__*/React.createElement(TableTooltip, _extends({}, restProps, {
53
76
  trigger: /*#__PURE__*/React.createElement(InfoIcon, {
54
77
  className: cn('notice-icon')
55
78
  })
56
- }));
79
+ }), !!additionalContent && additionalContent);
57
80
  };
58
81
  return /*#__PURE__*/React.createElement("th", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
59
82
  className: cn({
60
83
  pinned: pinned,
61
- scroll: pinned && scrollPosition
62
- }),
84
+ scroll: pinned && scrollPosition.horizontal,
85
+ active: isSortActive
86
+ }, [className]),
63
87
  style: {
64
88
  minWidth: minWidth,
65
89
  width: width
@@ -8,7 +8,7 @@ export interface ITableTooltipProps {
8
8
  /** Заголовок */
9
9
  title: string;
10
10
  /** Текст */
11
- text: string;
11
+ text?: string;
12
12
  /** Текст кнопки */
13
13
  buttonText?: string;
14
14
  /** Отобразить кнопку закрытия */
@@ -18,6 +18,7 @@ export interface ITableTooltipProps {
18
18
  root?: string;
19
19
  tooltip?: string;
20
20
  };
21
+ children?: React.ReactNode;
21
22
  /** Обработчик клика по кнопке */
22
23
  onButtonClick?: (e: React.SyntheticEvent<EventTarget, Event>) => void;
23
24
  /** Обработчик клика по кнопке закрытия */
@@ -11,6 +11,7 @@ var TableTooltip = function TableTooltip(_ref) {
11
11
  buttonText = _ref.buttonText,
12
12
  hasCloseButton = _ref.hasCloseButton,
13
13
  classes = _ref.classes,
14
+ children = _ref.children,
14
15
  onButtonClick = _ref.onButtonClick,
15
16
  onCloseButtonClick = _ref.onCloseButtonClick;
16
17
  var triggerRef = React.useRef(null);
@@ -31,7 +32,8 @@ var TableTooltip = function TableTooltip(_ref) {
31
32
  placement: "bottom",
32
33
  fallbackPlacements: ['top', 'left', 'right'],
33
34
  triggerEvent: "click",
34
- colorTheme: "blue"
35
- }));
35
+ colorTheme: "blue",
36
+ offset: "small"
37
+ }, children));
36
38
  };
37
39
  export default TableTooltip;
@@ -1,4 +1,12 @@
1
1
  import * as React from 'react';
2
2
  import './TableTr.scss';
3
- declare const TableTr: React.FC<React.PropsWithChildren>;
3
+ export interface ITableTr {
4
+ /** Дополнительный класс корневого элемента */
5
+ className?: string;
6
+ /** Дополнительные data атрибуты к внутренним элементам */
7
+ dataAttrs?: {
8
+ root?: Record<string, string>;
9
+ };
10
+ }
11
+ declare const TableTr: React.FC<React.PropsWithChildren<ITableTr>>;
4
12
  export default TableTr;