@desynova-digital/components 9.3.5 → 9.3.7

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 (5) hide show
  1. package/atoms/icon/icons.json +30 -0
  2. package/molecules/filter/filter.js +6 -3
  3. package/molecules/table/table-header.js +148 -11
  4. package/molecules/table/table.js +706 -137
  5. package/package.json +2 -2
package/atoms/icon/icons.json CHANGED
@@ -1,5 +1,35 @@
1
1
  {
2
2
  "icons": {
3
+ "right-arrow-chevron": {
4
+ "paths": [
5
+ "M3.33398 2L8.66732 6L3.33398 10"
6
+ ],
7
+ "width": 12,
8
+ "height": 12,
9
+ "strokeWidth": 1.5
10
+ },
11
+ "down-arrow-chevron": {
12
+ "paths": [
13
+ "M10 3.33594L6 8.66927L2 3.33594"
14
+ ],
15
+ "width": 12,
16
+ "height": 12,
17
+ "strokeWidth": 1.5
18
+ },
19
+ "filled-pin": {
20
+ "paths": [
21
+ "M11.8977 2.88488C12.1969 2.5848 11.8175 1.71827 11.0486 0.949485C10.2889 0.189597 9.43651 -0.188166 9.12662 0.0927162L9.12059 0.0869294L4.86194 3.91261C4.07459 3.22621 2.88396 3.24963 2.13394 3.99926C2.00772 4.12572 1.93657 4.29709 1.93657 4.47587C1.93657 4.65467 2.00769 4.82609 2.13394 4.95233L4.06593 6.88456L0.0956572 11.367C-0.0305468 11.5092 -0.0333415 11.7264 0.0960249 11.8722C0.235492 12.0292 0.475936 12.0436 0.633299 11.9039L5.10915 7.92825L5.30135 8.12022L6.29669 9.11582L7.04038 9.8595C7.16663 9.98571 7.33797 10.0566 7.51656 10.0566C7.69498 10.0566 7.86644 9.98556 7.99262 9.85909C8.74183 9.10942 8.76544 7.9181 8.07938 7.1307L11.8842 2.89285C11.8881 2.88947 11.8942 2.88871 11.8977 2.88488Z"
22
+ ],
23
+ "width": 12,
24
+ "height": 12
25
+ },
26
+ "stroke-pin": {
27
+ "paths": [
28
+ "M7.31789 6.851e-07C7.37433 -0.000100124 7.43024 0.0109251 7.48242 0.0324462C7.5346 0.0539672 7.58203 0.085562 7.62199 0.125424L11.8742 4.37779C11.9548 4.45834 12 4.56758 12 4.68147C12 4.79537 11.9548 4.9046 11.8742 4.98515C11.4619 5.39751 10.9534 5.49028 10.5831 5.49028C10.4311 5.49028 10.2953 5.47482 10.1879 5.45678L7.49571 8.14909C7.56658 8.43465 7.61257 8.72582 7.63316 9.01932C7.67267 9.62239 7.60567 10.4686 7.01465 11.0596C6.9341 11.1401 6.82487 11.1854 6.71098 11.1854C6.59708 11.1854 6.48785 11.1401 6.40731 11.0596L3.97708 8.63017L1.24361 11.3637C1.0761 11.5312 0.196444 12.1386 0.028931 11.9711C-0.138582 11.8036 0.46876 10.923 0.636273 10.7564L3.36974 8.02281L0.940373 5.59251C0.85985 5.51196 0.814615 5.40273 0.814615 5.28883C0.814615 5.17494 0.85985 5.0657 0.940373 4.98515C1.53139 4.39412 2.37755 4.32625 2.98059 4.36663C3.27409 4.38719 3.56525 4.43318 3.8508 4.50408L6.54304 1.81263C6.52056 1.68181 6.50907 1.54934 6.50867 1.4166C6.50867 1.0472 6.60145 0.538634 7.01465 0.125424C7.09515 0.0451282 7.20419 2.48411e-05 7.31789 6.851e-07ZM7.42269 1.81263V1.81435C7.4475 1.88992 7.45084 1.97089 7.43233 2.04825C7.41383 2.12561 7.37421 2.19631 7.31789 2.25247L4.28118 5.2884C4.22476 5.34459 4.15383 5.38398 4.07631 5.40218C3.9988 5.42039 3.91775 5.41669 3.84221 5.39149H3.84049L3.82847 5.38806C3.74674 5.36357 3.66423 5.3418 3.58106 5.32277C3.36496 5.27236 3.14523 5.23904 2.9239 5.22311C2.56138 5.19906 2.20574 5.22999 1.91453 5.35197L6.64784 10.0846C6.76896 9.79248 6.79989 9.43769 6.77584 9.07516C6.75395 8.76824 6.69865 8.46463 6.6109 8.16971L6.60746 8.15854C6.5821 8.08288 6.57831 8.0008 6.59651 7.92311C6.61472 7.84542 6.65421 7.77434 6.71055 7.71784L9.74812 4.68104C9.80661 4.62219 9.8809 4.58154 9.962 4.56401C10.0431 4.54648 10.1275 4.55282 10.2051 4.58225L10.2876 4.60115C10.3623 4.61576 10.4663 4.63036 10.5831 4.63036C10.681 4.63036 10.7807 4.62091 10.8778 4.596L7.40294 1.12194C7.37802 1.21901 7.36857 1.31952 7.36857 1.4166C7.36899 1.55008 7.3869 1.68294 7.42184 1.81177L7.42269 1.81263Z"
29
+ ],
30
+ "width": 12,
31
+ "height": 12
32
+ },
3
33
  "add": {
4
34
  "paths": [
5
35
  "M110 23 104 23 104 29 102 29 102 23 96 23 96 21 102 21 102 15 104 15 104 21 110 21 Z"
package/molecules/filter/filter.js CHANGED
@@ -30,7 +30,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
30
30
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
31
31
  function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
32
32
  function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
33
- var StyledFilterCompoment = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n position: relative;\n // width: 21px;\n // height: 62px;\n overflow: hidden;\n transition: width 0.6s ease;\n //z-index: 2;\n //width: 360px;\n overflow: visible;\n text-align: left;\n z-index: ", ";\n\n .filter-button {\n width: 30px;\n height: 30px;\n background: #121d28;\n border-radius: 50%;\n padding: 7px 7px;\n cursor: pointer;\n\n &.active,\n &:hover {\n path {\n transition: all 0.4s ease-out;\n }\n }\n\n &.active {\n path {\n fill: ", ";\n }\n }\n\n &:hover {\n path {\n fill: #fff;\n }\n }\n }\n\n .dashboard-filter-box {\n border-bottom: 1px #303f51 solid;\n padding: 4px 0px 0px 0;\n position: absolute;\n }\n\n .search-filter-list-box {\n display: flex;\n position: relative;\n /* padding: 10px 0px; */\n align-items: center;\n font-family: 'SFUIText-Medium';\n justify-content: flex-end;\n width: ", ";\n }\n\n .filter-message {\n font-size: 12px;\n font-family: 'SFUIText-Regular';\n color: #afb2ba;\n }\n span.chip-button {\n color: #fff;\n background: #303f51;\n color: #fff;\n margin: 5px;\n &:hover {\n color: ", ";\n }\n &.checked {\n background: ", ";\n color: #0c141d;\n &:hover {\n color: #0c141d;\n }\n }\n }\n\n .filter-list-box {\n & > span {\n color: rgb(99, 208, 199);\n font-size: 10px;\n margin-bottom: 0px;\n display: inline-block;\n }\n\n .list-holder {\n overflow: auto;\n a {\n top: 7px;\n }\n /* width */\n &::-webkit-scrollbar {\n width: 2px;\n height: 2px;\n }\n\n /* Track */\n &::-webkit-scrollbar-track {\n box-shadow: inset 0 0 5px #a6aab2;\n border-radius: 10px;\n }\n\n /* Handle */\n &::-webkit-scrollbar-thumb {\n background: ", ";\n border-radius: 10px;\n }\n\n /* Handle on hover */\n &::-webkit-scrollbar-thumb:hover {\n background: ", ";\n }\n\n & > div {\n // width: max-content;\n & > span {\n // margin-right: 5px;\n // background: ", ";\n // &:hover {\n // color: #fff;\n // }\n }\n }\n }\n }\n\n .filter-options-holder {\n margin-top: 5px;\n position: absolute;\n background: #182738;\n z-index: 2;\n font-family: 'SFUIText-Medium';\n padding: 15px;\n right: 0;\n ", "\n\n .filter-group-title {\n color: #afb2ba;\n font-size: 10px;\n padding-bottom: 10px;\n color: #ffffff;\n text-transform: uppercase;\n }\n\n .filter-group-item-list {\n margin: 0px -5px 0px;\n .ardp-date-picker {\n display: inline-block;\n .label-text {\n color: #cccccc;\n font-size: 12px;\n transition: all 0.5s ease-in-out;\n cursor: pointer;\n &:hover {\n color: #fff;\n }\n }\n\n &.checked {\n .label-text {\n color: ", ";\n }\n }\n\n .calendar {\n right: -7px;\n width: 330px;\n padding: 15px;\n }\n }\n }\n\n .filter-group {\n padding: 15px 0px 10px;\n border-bottom: 1px solid #303f51;\n &:first-child {\n padding: 0px 0px 10px;\n }\n }\n\n button.filter-group-item {\n background-color: transparent;\n border: none;\n margin-right: 12px;\n cursor: pointer;\n transition: all 0.5s ease-in-out;\n color: #cccccc;\n font-size: 12px;\n padding: 3px 0px;\n &:focus {\n outline: none;\n }\n\n &:hover {\n color: #fff;\n }\n\n &.checked {\n color: ", ";\n }\n }\n\n .action-btn {\n margin: 0px;\n pointer-events: auto;\n border-radius: 999rem;\n box-shadow: none;\n padding: 0.5rem 0.7rem;\n }\n }\n"])), function (_ref) {
33
+ var StyledFilterCompoment = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n position: relative;\n // width: 21px;\n // height: 62px;\n overflow: hidden;\n transition: width 0.6s ease;\n //z-index: 2;\n //width: 360px;\n overflow: visible;\n text-align: left;\n z-index: ", ";\n\n .filter-button {\n width: 30px;\n height: 30px;\n background: #121d28;\n border-radius: 50%;\n padding: 7px 7px;\n cursor: pointer;\n\n &.active,\n &:hover {\n path {\n transition: all 0.4s ease-out;\n }\n }\n\n &.active {\n path {\n fill: ", ";\n }\n }\n\n &:hover {\n path {\n fill: #fff;\n }\n }\n }\n\n .dashboard-filter-box {\n border-bottom: 1px #303f51 solid;\n padding: 4px 0px 0px 0;\n position: absolute;\n }\n\n .search-filter-list-box {\n display: flex;\n position: relative;\n /* padding: 10px 0px; */\n align-items: center;\n font-family: 'SFUIText-Medium';\n justify-content: flex-end;\n width: ", ";\n }\n\n .filter-message {\n font-size: 12px;\n font-family: 'SFUIText-Regular';\n color: #afb2ba;\n }\n span.chip-button {\n color: #fff;\n background: #303f51;\n color: #fff;\n margin: 5px;\n &:hover {\n color: ", ";\n }\n &.checked {\n background: ", ";\n color: #0c141d;\n &:hover {\n color: #0c141d;\n }\n }\n }\n\n .filter-list-box {\n & > span {\n color: rgb(99, 208, 199);\n font-size: 10px;\n margin-bottom: 0px;\n display: inline-block;\n }\n\n .list-holder {\n overflow: auto;\n a {\n top: 7px;\n }\n /* width */\n &::-webkit-scrollbar {\n width: 2px;\n height: 2px;\n }\n\n /* Track */\n &::-webkit-scrollbar-track {\n box-shadow: inset 0 0 5px #a6aab2;\n border-radius: 10px;\n }\n\n /* Handle */\n &::-webkit-scrollbar-thumb {\n background: ", ";\n border-radius: 10px;\n }\n\n /* Handle on hover */\n &::-webkit-scrollbar-thumb:hover {\n background: ", ";\n }\n\n & > div {\n // width: max-content;\n & > span {\n // margin-right: 5px;\n // background: ", ";\n // &:hover {\n // color: #fff;\n // }\n }\n }\n }\n }\n\n .filter-options-holder {\n margin-top: 5px;\n position: absolute;\n background: #182738;\n z-index: 2;\n font-family: 'SFUIText-Medium';\n padding: 15px;\n right: 0;\n ", "\n\n .filter-group-title {\n color: #afb2ba;\n font-size: 10px;\n padding-bottom: 10px;\n color: #ffffff;\n text-transform: uppercase;\n }\n\n .filter-group-item-list {\n margin: 0px -5px 0px;\n .ardp-date-picker {\n display: inline-block;\n .label-text {\n color: #cccccc;\n font-size: 12px;\n transition: all 0.5s ease-in-out;\n cursor: pointer;\n &:hover {\n color: #fff;\n }\n }\n\n &.checked {\n .label-text {\n color: ", ";\n }\n }\n\n .calendar {\n right: ", ";\n width: 330px;\n padding: 15px;\n }\n }\n }\n\n .filter-group {\n padding: 15px 0px 10px;\n border-bottom: 1px solid #303f51;\n &:first-child {\n padding: 0px 0px 10px;\n }\n }\n\n button.filter-group-item {\n background-color: transparent;\n border: none;\n margin-right: 12px;\n cursor: pointer;\n transition: all 0.5s ease-in-out;\n color: #cccccc;\n font-size: 12px;\n padding: 3px 0px;\n &:focus {\n outline: none;\n }\n\n &:hover {\n color: #fff;\n }\n\n &.checked {\n color: ", ";\n }\n }\n\n .action-btn {\n margin: 0px;\n pointer-events: auto;\n border-radius: 999rem;\n box-shadow: none;\n padding: 0.5rem 0.7rem;\n }\n }\n"])), function (_ref) {
34
34
  var isMenuOpen = _ref.isMenuOpen;
35
35
  return isMenuOpen ? "95" : "1";
36
36
  }, function (props) {
@@ -53,6 +53,9 @@ var StyledFilterCompoment = _styledComponents["default"].div(_templateObject ||
53
53
  return dashboardLayout ? "\n height: 80vh;\n max-height: 80vh;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n overflow-y: auto;\n\n > .filter-group {\n flex-shrink: 0;\n }\n\n > .filter-action-footer {\n position: sticky;\n bottom: -15px;\n z-index: 3;\n flex-shrink: 0;\n margin: auto -15px -15px !important;\n padding: 12px 15px 15px;\n justify-content: center;\n background: #182738;\n border-top: 1px solid #303f51;\n }\n " : "";
54
54
  }, function (props) {
55
55
  return _tokens.colors[props.theme].filter.lightthemeColor;
56
+ }, function (_ref4) {
57
+ var dashboardLayout = _ref4.dashboardLayout;
58
+ return dashboardLayout ? "auto" : "-7px";
56
59
  }, function (props) {
57
60
  return _tokens.colors[props.theme].filter.lightthemeColor;
58
61
  });
@@ -64,8 +67,8 @@ var ResetBtn = (0, _styledComponents["default"])(_button["default"])(_templateOb
64
67
  }, function (props) {
65
68
  return _tokens.colors[props.theme].filter.themeColor;
66
69
  });
67
- var OverlayStyles = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100vh;\n background-color: rgba(0, 0, 0, 0.3);\n z-index: ", ";\n display: block;\n"])), function (_ref4) {
68
- var isMenuOpen = _ref4.isMenuOpen;
70
+ var OverlayStyles = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100vh;\n background-color: rgba(0, 0, 0, 0.3);\n z-index: ", ";\n display: block;\n"])), function (_ref5) {
71
+ var isMenuOpen = _ref5.isMenuOpen;
69
72
  return isMenuOpen ? "94" : "0";
70
73
  });
71
74
  var UserIdDropdown = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n border-bottom: 1px solid #999999;\n\n .tags {\n padding-bottom: 2px;\n }\n input:focus {\n outline: none;\n }\n\n .input-filter {\n background: transparent;\n font-family: \"SFUIText-Medium\";\n position: relative;\n width: 100%;\n display: block;\n border: none;\n color: #999999;\n }\n .user-dropdown {\n background-color: rgb(18, 29, 41);\n margin-top: 5px;\n border: 1px solid rgb(153, 153, 153);\n max-height: 200px;\n overflow: auto;\n position: absolute;\n width: 92%;\n z-index: 2;\n cursor: pointer;\n }\n\n .dropdown-options {\n font-family: SFUIText-Regular;\n font-size: 13px;\n line-height: normal;\n color: rgb(204, 204, 204);\n padding: 7px;\n :hover {\n background-color: ", ";\n color: rgb(255, 255, 255);\n }\n &.active {\n background-color: ", ";\n color: rgb(255, 255, 255);\n :hover {\n background-color: rgb(18, 29, 41);\n color: rgb(204, 204, 204);\n }\n }\n }\n"])), function (props) {
package/molecules/table/table-header.js CHANGED
@@ -1,18 +1,103 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ var _typeof = require("@babel/runtime/helpers/typeof");
4
5
  Object.defineProperty(exports, "__esModule", {
5
6
  value: true
6
7
  });
7
8
  exports["default"] = void 0;
8
9
  var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
9
- var _react = _interopRequireDefault(require("react"));
10
+ var _react = _interopRequireWildcard(require("react"));
10
11
  var _propTypes = _interopRequireDefault(require("prop-types"));
11
12
  var _styledComponents = _interopRequireDefault(require("styled-components"));
12
13
  var _tokens = require("@desynova-digital/tokens");
14
+ var _icon = _interopRequireDefault(require("../../atoms/icon"));
13
15
  var _tableColumn = _interopRequireDefault(require("./table-column"));
14
- var _templateObject, _templateObject2, _templateObject3, _templateObject4;
16
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
17
+ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
18
+ /**
19
+ * Smallest width (px) a column can be dragged down to.
20
+ */
21
+ var MIN_COLUMN_WIDTH = 60;
22
+
23
+ /**
24
+ * Columns that own a fixed layout slot and must not be resized by the user.
25
+ */
26
+ var NON_RESIZABLE_FIELDS = ["extra_columns", "rowChecked"];
27
+ var isFixedWidthColumn = function isFixedWidthColumn(column) {
28
+ return NON_RESIZABLE_FIELDS.includes(column.field) || column.type === "action_icon";
29
+ };
15
30
  var _TableHeader = function TableHeader(props) {
31
+ var stopDragRef = (0, _react.useRef)(null);
32
+ (0, _react.useEffect)(function () {
33
+ return function () {
34
+ if (stopDragRef.current) {
35
+ stopDragRef.current();
36
+ }
37
+ };
38
+ }, []);
39
+
40
+ /**
41
+ * Starts a resize drag on the column whose handle was pressed.
42
+ */
43
+ var startResize = (0, _react.useCallback)(function (event, column) {
44
+ var headerCell = event.currentTarget.closest("th");
45
+ if (!headerCell) {
46
+ return;
47
+ }
48
+ event.preventDefault();
49
+ event.stopPropagation();
50
+ var startX = event.clientX;
51
+ var startWidth = headerCell.getBoundingClientRect().width;
52
+ var currentWidth = Math.round(startWidth);
53
+ var frame = null;
54
+ var applyWidth = function applyWidth(clientX) {
55
+ frame = null;
56
+ var nextWidth = Math.max(MIN_COLUMN_WIDTH, Math.round(startWidth + (clientX - startX)));
57
+ if (nextWidth === currentWidth) {
58
+ return;
59
+ }
60
+ currentWidth = nextWidth;
61
+ props.onColumnResize(column.field, nextWidth);
62
+ };
63
+ var handleMouseMove = function handleMouseMove(moveEvent) {
64
+ var clientX = moveEvent.clientX;
65
+ if (frame !== null) {
66
+ return;
67
+ }
68
+ frame = window.requestAnimationFrame(function () {
69
+ return applyWidth(clientX);
70
+ });
71
+ };
72
+ var stopDrag = function stopDrag() {
73
+ if (frame !== null) {
74
+ window.cancelAnimationFrame(frame);
75
+ frame = null;
76
+ }
77
+ document.removeEventListener("mousemove", handleMouseMove);
78
+ document.removeEventListener("mouseup", handleMouseUp);
79
+ document.body.style.cursor = "";
80
+ document.body.style.userSelect = "";
81
+ stopDragRef.current = null;
82
+ };
83
+ function handleMouseUp() {
84
+ stopDrag();
85
+ props.onColumnResizeEnd(column.field, currentWidth);
86
+ }
87
+ document.addEventListener("mousemove", handleMouseMove);
88
+ document.addEventListener("mouseup", handleMouseUp);
89
+ document.body.style.cursor = "col-resize";
90
+ document.body.style.userSelect = "none";
91
+ stopDragRef.current = stopDrag;
92
+ }, [props.onColumnResize, props.onColumnResizeEnd]);
93
+ var renderFiller = function renderFiller(key) {
94
+ return /*#__PURE__*/_react["default"].createElement(_TableHeader.Cell, {
95
+ key: key,
96
+ theme: props.theme,
97
+ column: {},
98
+ displayAs: props.displayAs
99
+ });
100
+ };
16
101
  var cells = props.columns.map(function (column, index) {
17
102
  var sortIndicator;
18
103
  if (column.sort) {
@@ -22,34 +107,66 @@ var _TableHeader = function TableHeader(props) {
22
107
  onClick: props.onSort(column)
23
108
  }, icon);
24
109
  }
110
+ var filler = index === props.fillerColumnIndex ? renderFiller("header-filler") : null;
25
111
  if (props.selectedColumns.indexOf(column.field) > -1) {
26
- return /*#__PURE__*/_react["default"].createElement(_TableHeader.Cell, {
112
+ var isResizable = props.resizableColumns && !isFixedWidthColumn(column);
113
+ var pinned = props.getPinnedPlacement(column);
114
+ var showPinIcon = !!pinned && pinned.side === "left" && !pinned.structural;
115
+ return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, {
116
+ key: "row-header-" + index + column.key
117
+ }, filler, /*#__PURE__*/_react["default"].createElement(_TableHeader.Cell, {
27
118
  theme: props.theme,
28
- key: "row-header-" + index + column.key,
29
119
  column: column,
30
- displayAs: props.displayAs
31
- }, column.title, sortIndicator);
120
+ displayAs: props.displayAs,
121
+ className: props.getColumnClassName(column),
122
+ style: props.getColumnStyle(column)
123
+ }, showPinIcon && /*#__PURE__*/_react["default"].createElement(_TableHeader.PinIcon, null, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
124
+ name: "filled-pin",
125
+ width: 10,
126
+ height: 10,
127
+ color: _tokens.colors[props.theme].label.text
128
+ })), column.title, sortIndicator, isResizable && /*#__PURE__*/_react["default"].createElement(_TableHeader.ResizeHandle, {
129
+ className: "table-header-resize-handle",
130
+ onMouseDown: function onMouseDown(event) {
131
+ return startResize(event, column);
132
+ }
133
+ })));
32
134
  }
135
+ return filler;
33
136
  });
34
137
  return /*#__PURE__*/_react["default"].createElement(_TableHeader.Element, null, /*#__PURE__*/_react["default"].createElement(_TableHeader.Row, {
35
138
  theme: props.theme
36
- }, cells));
139
+ }, cells, props.fillerColumnIndex >= props.columns.length && renderFiller("header-filler-end")));
37
140
  };
38
141
  _TableHeader.Element = _styledComponents["default"].thead(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])([""])));
39
142
  _TableHeader.Row = _styledComponents["default"].tr(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n color: ", ";\n"])), function (props) {
40
143
  return _tokens.colors[props.theme].table.thColor;
41
144
  });
42
- _TableHeader.Cell = _styledComponents["default"].th(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n font-family: \"SFUIText-Medium\";\n font-size: 12px;\n padding: 7px 14px;\n border-bottom: ", "px\n solid ", ";\n text-align: left;\n vertical-align: bottom;\n line-height: 2;\n cursor: ", ";\n"])), function (props) {
145
+ _TableHeader.Cell = _styledComponents["default"].th(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n font-family: \"SFUIText-Medium\";\n font-size: 12px;\n padding: 7px 14px;\n border-bottom: ", "px\n solid ", ";\n text-align: left;\n vertical-align: bottom;\n line-height: 2;\n cursor: ", ";\n position: relative;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n &.pinned-column {\n background: ", ";\n z-index: 1;\n }\n\n &.pinned-left-edge {\n box-shadow: 6px 0 8px -6px rgba(0, 0, 0, 0.55);\n }\n\n &.pinned-right-edge {\n box-shadow: -6px 0 8px -6px rgba(0, 0, 0, 0.55);\n }\n\n &:hover .table-header-resize-handle {\n border-right-color: ", ";\n }\n"])), function (props) {
43
146
  return props.displayAs === "extraDetails" ? "1" : "2";
44
147
  }, function (props) {
45
148
  return _tokens.colors[props.theme].table.border;
46
149
  }, function (props) {
47
150
  return props.column.sortable || props.column.sort ? "pointer" : "auto";
151
+ }, function (props) {
152
+ return _tokens.colors[props.theme].card.background;
153
+ }, function (props) {
154
+ return _tokens.colors[props.theme].table.border;
48
155
  });
49
- _TableHeader.SortIndicator = _styledComponents["default"].span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n padding-left: 8px;\n"])));
156
+ _TableHeader.ResizeHandle = _styledComponents["default"].span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n width: 8px;\n border-right: 2px solid transparent;\n cursor: col-resize;\n"])));
157
+ _TableHeader.PinIcon = _styledComponents["default"].span(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n display: inline-flex;\n align-items: center;\n margin-right: 6px;\n vertical-align: middle;\n position: relative;\n top: -1px;\n opacity: 0.5;\n"])));
158
+ _TableHeader.SortIndicator = _styledComponents["default"].span(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n padding-left: 8px;\n"])));
50
159
  _TableHeader.propTypes = {
51
160
  columns: _propTypes["default"].arrayOf(_tableColumn["default"]),
52
- onSort: _propTypes["default"].func
161
+ onSort: _propTypes["default"].func,
162
+ resizableColumns: _propTypes["default"].bool,
163
+ getColumnWidth: _propTypes["default"].func,
164
+ getColumnStyle: _propTypes["default"].func,
165
+ getColumnClassName: _propTypes["default"].func,
166
+ getPinnedPlacement: _propTypes["default"].func,
167
+ fillerColumnIndex: _propTypes["default"].number,
168
+ onColumnResize: _propTypes["default"].func,
169
+ onColumnResizeEnd: _propTypes["default"].func
53
170
  };
54
171
  _TableHeader.defaultProps = {
55
172
  onSort: function onSort(column) {
@@ -57,6 +174,26 @@ _TableHeader.defaultProps = {
57
174
  return null;
58
175
  };
59
176
  },
60
- theme: "light"
177
+ theme: "light",
178
+ resizableColumns: false,
179
+ getColumnWidth: function getColumnWidth() {
180
+ return undefined;
181
+ },
182
+ getColumnStyle: function getColumnStyle() {
183
+ return undefined;
184
+ },
185
+ getColumnClassName: function getColumnClassName() {
186
+ return undefined;
187
+ },
188
+ getPinnedPlacement: function getPinnedPlacement() {
189
+ return undefined;
190
+ },
191
+ fillerColumnIndex: -1,
192
+ onColumnResize: function onColumnResize() {
193
+ return null;
194
+ },
195
+ onColumnResizeEnd: function onColumnResizeEnd() {
196
+ return null;
197
+ }
61
198
  };
62
199
  var _default = exports["default"] = _TableHeader;