@helpdice/ui 1.3.6 → 1.3.8

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.
package/dist/index.js CHANGED
@@ -23391,7 +23391,7 @@ var PopoverComponent = function PopoverComponent(_ref) {
23391
23391
  PopoverComponent.displayName = 'Popover';
23392
23392
  var Popover = withScale(PopoverComponent);
23393
23393
 
23394
- var _excluded$n = ["children", "line", "showTitle", "className", "onClick", "disableAutoClose"];
23394
+ var _excluded$n = ["children", "line", "showTitle", "className", "onClick", "selected", "disableAutoClose"];
23395
23395
  var PopoverItemComponent = function PopoverItemComponent(_ref) {
23396
23396
  var children = _ref.children,
23397
23397
  _ref$line = _ref.line,
@@ -23401,6 +23401,8 @@ var PopoverItemComponent = function PopoverItemComponent(_ref) {
23401
23401
  _ref$className = _ref.className,
23402
23402
  className = _ref$className === undefined ? '' : _ref$className,
23403
23403
  onClick = _ref.onClick,
23404
+ _ref$selected = _ref.selected,
23405
+ selected = _ref$selected === undefined ? false : _ref$selected,
23404
23406
  _ref$disableAutoClose = _ref.disableAutoClose,
23405
23407
  disableAutoClose = _ref$disableAutoClose === undefined ? false : _ref$disableAutoClose,
23406
23408
  props = _objectWithoutProperties(_ref, _excluded$n);
@@ -23424,6 +23426,9 @@ var PopoverItemComponent = function PopoverItemComponent(_ref) {
23424
23426
  onItemClick(event);
23425
23427
  };
23426
23428
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", _extends({
23429
+ style: {
23430
+ backgroundColor: selected ? '#efefef' : ''
23431
+ },
23427
23432
  onClick: clickHandler
23428
23433
  }, props, {
23429
23434
  className: _JSXStyle.dynamic([["190621384", [theme.palette.accents_5, SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0.5), SCALES.pr(0.75), SCALES.pb(0.5), SCALES.pl(0.75), hasHandler ? 'pointer' : 'default', theme.palette.foreground, theme.palette.border, SCALES.height(0.0625), SCALES.mt(0.35), SCALES.mr(0), SCALES.mb(0.35), SCALES.ml(0), SCALES.width(1, '100%'), SCALES.font(0.925), theme.palette.foreground]]]) + " " + (props && props.className != null && props.className || classes || "")
@@ -42206,9 +42211,9 @@ var TableHead = function TableHead(props) {
42206
42211
  });
42207
42212
  };
42208
42213
  return /*#__PURE__*/React.createElement(React.Fragment, null, colgroup, /*#__PURE__*/React.createElement("thead", {
42209
- className: _JSXStyle.dynamic([["3728881297", [theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
42214
+ className: _JSXStyle.dynamic([["318735310", [stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
42210
42215
  }, /*#__PURE__*/React.createElement("tr", {
42211
- className: _JSXStyle.dynamic([["3728881297", [theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
42216
+ className: _JSXStyle.dynamic([["318735310", [stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
42212
42217
  }, columns.map(function (column, index) {
42213
42218
  return /*#__PURE__*/React.createElement("th", {
42214
42219
  style: {
@@ -42220,23 +42225,23 @@ var TableHead = function TableHead(props) {
42220
42225
  },
42221
42226
  key: "table-th-".concat(column.prop.toString(), "-").concat(index),
42222
42227
  "data-column": column.label,
42223
- className: _JSXStyle.dynamic([["3728881297", [theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]]) + " " + (column.className || "")
42228
+ className: _JSXStyle.dynamic([["318735310", [stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]]) + " " + (column.className || "")
42224
42229
  }, /*#__PURE__*/React.createElement("div", {
42225
- className: _JSXStyle.dynamic([["3728881297", [theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]]) + " " + "thead-box"
42230
+ className: _JSXStyle.dynamic([["318735310", [stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]]) + " " + "thead-box"
42226
42231
  }, column.label, /*#__PURE__*/React.createElement("br", {
42227
- className: _JSXStyle.dynamic([["3728881297", [theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
42232
+ className: _JSXStyle.dynamic([["318735310", [stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
42228
42233
  }), /*#__PURE__*/React.createElement("span", {
42229
42234
  style: {
42230
42235
  textAlign: 'center'
42231
42236
  },
42232
- className: _JSXStyle.dynamic([["3728881297", [theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
42237
+ className: _JSXStyle.dynamic([["318735310", [stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
42233
42238
  }, column.text)));
42234
42239
  })), showFilters && /*#__PURE__*/React.createElement("tr", {
42235
- className: _JSXStyle.dynamic([["3728881297", [theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
42240
+ className: _JSXStyle.dynamic([["318735310", [stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
42236
42241
  }, generateFilterInputs())), /*#__PURE__*/React.createElement(_JSXStyle, {
42237
- id: "3728881297",
42238
- dynamic: [theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]
42239
- }, "thead.__jsx-style-dynamic-selector{border-collapse:separate;border-spacing:0;font-size:inherit;}th.__jsx-style-dynamic-selector{padding:0 0.5em;font-size:calc(0.75 * var(--table-font-size));font-weight:normal;text-align:left;-webkit-letter-spacing:0;-moz-letter-spacing:0;-ms-letter-spacing:0;letter-spacing:0;vertical-align:middle;min-height:calc(2.5 * var(--table-font-size));color:".concat(theme.palette.accents_5, ";background:").concat(theme.palette.accents_1, ";border-bottom:1px solid ").concat(theme.palette.border, ";border-top:1px solid ").concat(theme.palette.border, ";border-radius:0;").concat(stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", ";}th.__jsx-style-dynamic-selector:nth-child(1){border-bottom:1px solid ").concat(theme.palette.border, ";border-left:1px solid ").concat(theme.palette.border, ";border-top:1px solid ").concat(theme.palette.border, ";border-top-left-radius:").concat(theme.layout.radius, ";border-bottom-left-radius:").concat(theme.layout.radius, ";}th.__jsx-style-dynamic-selector:last-child{border-bottom:1px solid ").concat(theme.palette.border, ";border-right:1px solid ").concat(theme.palette.border, ";border-top:1px solid ").concat(theme.palette.border, ";border-top-right-radius:").concat(theme.layout.radius, ";border-bottom-right-radius:").concat(theme.layout.radius, ";}.thead-box.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-align:center;min-height:calc(2.5 * var(--table-font-size));text-transform:uppercase;}")));
42242
+ id: "318735310",
42243
+ dynamic: [stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]
42244
+ }, "thead.__jsx-style-dynamic-selector{border-collapse:separate;border-spacing:0;font-size:inherit;".concat(stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", ";}th.__jsx-style-dynamic-selector{padding:0 0.5em;font-size:calc(0.75 * var(--table-font-size));font-weight:normal;text-align:left;-webkit-letter-spacing:0;-moz-letter-spacing:0;-ms-letter-spacing:0;letter-spacing:0;vertical-align:middle;min-height:calc(2.5 * var(--table-font-size));color:").concat(theme.palette.accents_5, ";background:").concat(theme.palette.accents_1, ";border-bottom:1px solid ").concat(theme.palette.border, ";border-top:1px solid ").concat(theme.palette.border, ";border-radius:0;").concat(stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", ";}th.__jsx-style-dynamic-selector:nth-child(1){border-bottom:1px solid ").concat(theme.palette.border, ";border-left:1px solid ").concat(theme.palette.border, ";border-top:1px solid ").concat(theme.palette.border, ";border-top-left-radius:").concat(theme.layout.radius, ";border-bottom-left-radius:").concat(theme.layout.radius, ";}th.__jsx-style-dynamic-selector:last-child{border-bottom:1px solid ").concat(theme.palette.border, ";border-right:1px solid ").concat(theme.palette.border, ";border-top:1px solid ").concat(theme.palette.border, ";border-top-right-radius:").concat(theme.layout.radius, ";border-bottom-right-radius:").concat(theme.layout.radius, ";}.thead-box.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-align:center;min-height:calc(2.5 * var(--table-font-size));text-transform:uppercase;}")));
42240
42245
  };
42241
42246
  TableHead.displayName = 'TableHead';
42242
42247
 
@@ -42260,7 +42265,7 @@ var TableCell = function TableCell(_ref) {
42260
42265
  color: "".concat(column === null || column === undefined ? undefined : column.color),
42261
42266
  whiteSpace: column !== null && column !== undefined && column.noWrap ? 'nowrap' : 'normal'
42262
42267
  }, currentRowValue === null || currentRowValue === undefined ? undefined : currentRowValue.style),
42263
- "data-column": column.label,
42268
+ "data-column": String(column.label).toLowerCase(),
42264
42269
  key: "row-td-".concat(index, "-").concat(column.prop.toString()),
42265
42270
  onClick: function onClick() {
42266
42271
  return onCellClick && onCellClick(currentRowValue, rowIndex, index);
@@ -42910,11 +42915,11 @@ function DataTable(_ref) {
42910
42915
  React.useEffect(function () {
42911
42916
  cols.forEach(function (col) {
42912
42917
  if (hideColumn.includes(col.name)) {
42913
- document.querySelectorAll("[data-column=\"".concat(col.name, "\"]")).forEach(function (el) {
42914
- el.style.display = 'none';
42918
+ document.querySelectorAll("[data-column=\"".concat(String(col.name).toLowerCase(), "\"]")).forEach(function (el) {
42919
+ el.style.display = 'none !important';
42915
42920
  });
42916
42921
  } else {
42917
- document.querySelectorAll("[data-column=\"".concat(col.name, "\"]")).forEach(function (el) {
42922
+ document.querySelectorAll("[data-column=\"".concat(String(col.name).toLowerCase(), "\"]")).forEach(function (el) {
42918
42923
  el.style.display = '';
42919
42924
  });
42920
42925
  }
@@ -42970,15 +42975,15 @@ function DataTable(_ref) {
42970
42975
  // };
42971
42976
 
42972
42977
  var COLUMNS = cols.filter(function (col) {
42973
- return !hideColumn.includes(col.name);
42978
+ return !hideColumn.includes(String(col.name).toLowerCase());
42974
42979
  });
42975
42980
  var content = function content() {
42976
42981
  return /*#__PURE__*/React.createElement(React.Fragment, null, cols.map(function (option, index) {
42977
42982
  var colunqid = _.uniqueId("".concat(option.name, "-").concat(index));
42983
+ var isSelected = !hideColumn.includes(option.name);
42978
42984
  return /*#__PURE__*/React.createElement(Popover.Item, {
42979
- key: colunqid
42980
- // selected={!hideColumn.includes(option.name as never)}
42981
- ,
42985
+ selected: isSelected,
42986
+ key: colunqid,
42982
42987
  onClick: function onClick(e) {
42983
42988
  return handleHideColumnClick(e, option.name);
42984
42989
  }
@@ -42986,6 +42991,7 @@ function DataTable(_ref) {
42986
42991
  }));
42987
42992
  };
42988
42993
  return /*#__PURE__*/React.createElement(GridContainer, {
42994
+ className: "helpdice-ui-data-table-container",
42989
42995
  direction: "column"
42990
42996
  }, /*#__PURE__*/React.createElement(Grid.Container, {
42991
42997
  style: {
@@ -43084,6 +43090,7 @@ function DataTable(_ref) {
43084
43090
  py: 0.4,
43085
43091
  type: "dark"
43086
43092
  }, /*#__PURE__*/React.createElement(Popover, {
43093
+ disableItemsAutoClose: true,
43087
43094
  placement: "bottomEnd",
43088
43095
  child: content
43089
43096
  }, /*#__PURE__*/React.createElement(Button, {
@@ -43116,10 +43123,10 @@ function DataTable(_ref) {
43116
43123
  onDragLeave: onDragLeave,
43117
43124
  onDrop: onDrop,
43118
43125
  id: TABLE_ID,
43126
+ className: "helpdice-ui-table-container",
43119
43127
  style: _objectSpread2({
43120
- overflow: 'auto',
43121
43128
  position: 'relative',
43122
- height: 'calc(100vh - 8.5rem)',
43129
+ overflowY: 'auto',
43123
43130
  maxWidth: 'calc(100vw - 1rem)',
43124
43131
  width: sideMenu ? 'calc(100vw - 17.2rem)' : 'inherit !important'
43125
43132
  }, style)
@@ -43275,7 +43282,7 @@ var TableBody = function TableBody(_ref) {
43275
43282
  })))));
43276
43283
  }
43277
43284
  return /*#__PURE__*/React.createElement("tbody", {
43278
- className: _JSXStyle.dynamic([["1422656197", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]])
43285
+ className: _JSXStyle.dynamic([["1229207510", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]])
43279
43286
  }, data.map(function (row, index) {
43280
43287
  var _row$table, _row$table2, _row$table3, _row$table4, _row$table5;
43281
43288
  var qid = _.uniqueId();
@@ -43283,21 +43290,21 @@ var TableBody = function TableBody(_ref) {
43283
43290
  var uid = _.uniqueId();
43284
43291
  return /*#__PURE__*/React.createElement("tr", {
43285
43292
  key: uid,
43286
- className: _JSXStyle.dynamic([["1422656197", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]])
43293
+ className: _JSXStyle.dynamic([["1229207510", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]])
43287
43294
  }, /*#__PURE__*/React.createElement("td", {
43288
43295
  colSpan: columns.length,
43289
- className: _JSXStyle.dynamic([["1422656197", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]])
43296
+ className: _JSXStyle.dynamic([["1229207510", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]])
43290
43297
  }, "\u2003"));
43291
43298
  }
43292
43299
  return /*#__PURE__*/React.createElement(React.Fragment, null, renderRow(columns, row, index), (row === null || row === undefined ? undefined : row.table) && /*#__PURE__*/React.createElement("tr", {
43293
43300
  key: qid,
43294
- className: _JSXStyle.dynamic([["1422656197", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]])
43301
+ className: _JSXStyle.dynamic([["1229207510", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]])
43295
43302
  }, /*#__PURE__*/React.createElement("td", {
43296
43303
  style: {
43297
43304
  padding: '1rem'
43298
43305
  },
43299
43306
  colSpan: columns.length,
43300
- className: _JSXStyle.dynamic([["1422656197", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]])
43307
+ className: _JSXStyle.dynamic([["1229207510", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]])
43301
43308
  }, /*#__PURE__*/React.createElement(DataTable$1, {
43302
43309
  readOnly: true,
43303
43310
  stickyHeader: false,
@@ -43325,9 +43332,9 @@ var TableBody = function TableBody(_ref) {
43325
43332
  // </tr>
43326
43333
  // )
43327
43334
  }), /*#__PURE__*/React.createElement(_JSXStyle, {
43328
- id: "1422656197",
43335
+ id: "1229207510",
43329
43336
  dynamic: [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]
43330
- }, "tr.__jsx-style-dynamic-selector{-webkit-transition:background-color 0.25s ease;transition:background-color 0.25s ease;font-size:inherit;}tr.hover.__jsx-style-dynamic-selector:hover{background-color:".concat(theme.palette.accents_1, ";}tr.draggable.__jsx-style-dynamic-selector:hover{border:2px dashed #dfdfdf;margin:3px;}tr.__jsx-style-dynamic-selector td{padding:0 0.5em;border-bottom:1px solid ").concat(theme.palette.border, ";color:").concat(theme.palette.accents_6, ";font-size:calc(0.875 * var(--table-font-size));text-align:left;}tr.__jsx-style-dynamic-selector .cell{min-height:calc(3.125 * var(--table-font-size));display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-flex-flow:row wrap;-ms-flex-flow:row wrap;flex-flow:row wrap;}")));
43337
+ }, "tbody.__jsx-style-dynamic-selector{display:block;overflow-y:auto;max-height:calc(100vh - 10rem);}tr.__jsx-style-dynamic-selector{-webkit-transition:background-color 0.25s ease;transition:background-color 0.25s ease;font-size:inherit;}tr.hover.__jsx-style-dynamic-selector:hover{background-color:".concat(theme.palette.accents_1, ";}tr.draggable.__jsx-style-dynamic-selector:hover{border:2px dashed #dfdfdf;margin:3px;}tr.__jsx-style-dynamic-selector td{padding:0 0.5em;border-bottom:1px solid ").concat(theme.palette.border, ";color:").concat(theme.palette.accents_6, ";font-size:calc(0.875 * var(--table-font-size));text-align:left;}tr.__jsx-style-dynamic-selector .cell{min-height:calc(3.125 * var(--table-font-size));display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-flex-flow:row wrap;-ms-flex-flow:row wrap;flex-flow:row wrap;}")));
43331
43338
  };
43332
43339
  TableBody.displayName = 'TableBody';
43333
43340
 
@@ -43463,7 +43470,7 @@ function TableComponent(tableProps) {
43463
43470
  }, /*#__PURE__*/React.createElement("table", _extends({
43464
43471
  ref: ref
43465
43472
  }, props, {
43466
- className: _JSXStyle.dynamic([["2132340556", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]]) + " " + (props && props.className != null && props.className || className || "")
43473
+ className: _JSXStyle.dynamic([["864348448", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]]) + " " + (props && props.className != null && props.className || className || "")
43467
43474
  }), /*#__PURE__*/React.createElement(TableHead, {
43468
43475
  stickyHeader: stickyHeader,
43469
43476
  columns: columns,
@@ -43480,11 +43487,8 @@ function TableComponent(tableProps) {
43480
43487
  rowDraggable: rowDraggable,
43481
43488
  readOnly: readOnly,
43482
43489
  onSelected: onSelected
43483
- }), children, /*#__PURE__*/React.createElement(_JSXStyle, {
43484
- id: "2132340556",
43485
- dynamic: [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]
43486
- }, "table.__jsx-style-dynamic-selector{border-collapse:separate;border-spacing:0;--table-font-size:".concat(SCALES.font(1), ";font-size:var(--table-font-size);width:").concat(SCALES.width(1, '100%'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}")), dataLength && viewLength && onPageChange ? /*#__PURE__*/React.createElement("tfoot", {
43487
- className: _JSXStyle.dynamic([["2132340556", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]])
43490
+ }), children, dataLength && viewLength && onPageChange ? /*#__PURE__*/React.createElement("tfoot", {
43491
+ className: _JSXStyle.dynamic([["864348448", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]])
43488
43492
  }, /*#__PURE__*/React.createElement(Pagination, {
43489
43493
  onChange: function onChange(pageNumber) {
43490
43494
  // Get the range for the current page
@@ -43495,7 +43499,10 @@ function TableComponent(tableProps) {
43495
43499
  },
43496
43500
  limit: 5,
43497
43501
  count: Number(dataLength / viewLength)
43498
- }, /*#__PURE__*/React.createElement(Pagination.Next, null, /*#__PURE__*/React.createElement(ChevronRight$1, null)), /*#__PURE__*/React.createElement(Pagination.Previous, null, /*#__PURE__*/React.createElement(ChevronLeft$1, null)))) : null));
43502
+ }, /*#__PURE__*/React.createElement(Pagination.Next, null, /*#__PURE__*/React.createElement(ChevronRight$1, null)), /*#__PURE__*/React.createElement(Pagination.Previous, null, /*#__PURE__*/React.createElement(ChevronLeft$1, null)))) : null, /*#__PURE__*/React.createElement(_JSXStyle, {
43503
+ id: "864348448",
43504
+ dynamic: [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]
43505
+ }, "table.__jsx-style-dynamic-selector{border-collapse:separate;border-spacing:0;--table-font-size:".concat(SCALES.font(1), ";font-size:var(--table-font-size);width:").concat(SCALES.width(1, '100%'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}tfoot.__jsx-style-dynamic-selector{bottom:0;z-index:2;background-color:#fff;}"))));
43499
43506
  }
43500
43507
  TableComponent.displayName = 'Table';
43501
43508
  TableComponent.Column = TableColumn;
@@ -1806,7 +1806,7 @@ var PopoverComponent = function PopoverComponent(_ref) {
1806
1806
  PopoverComponent.displayName = 'Popover';
1807
1807
  var Popover = withScale(PopoverComponent);
1808
1808
 
1809
- var _excluded = ["children", "line", "showTitle", "className", "onClick", "disableAutoClose"];
1809
+ var _excluded = ["children", "line", "showTitle", "className", "onClick", "selected", "disableAutoClose"];
1810
1810
  var PopoverItemComponent = function PopoverItemComponent(_ref) {
1811
1811
  var children = _ref.children,
1812
1812
  _ref$line = _ref.line,
@@ -1816,6 +1816,8 @@ var PopoverItemComponent = function PopoverItemComponent(_ref) {
1816
1816
  _ref$className = _ref.className,
1817
1817
  className = _ref$className === undefined ? '' : _ref$className,
1818
1818
  onClick = _ref.onClick,
1819
+ _ref$selected = _ref.selected,
1820
+ selected = _ref$selected === undefined ? false : _ref$selected,
1819
1821
  _ref$disableAutoClose = _ref.disableAutoClose,
1820
1822
  disableAutoClose = _ref$disableAutoClose === undefined ? false : _ref$disableAutoClose,
1821
1823
  props = _objectWithoutProperties(_ref, _excluded);
@@ -1839,6 +1841,9 @@ var PopoverItemComponent = function PopoverItemComponent(_ref) {
1839
1841
  onItemClick(event);
1840
1842
  };
1841
1843
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", _extends({
1844
+ style: {
1845
+ backgroundColor: selected ? '#efefef' : ''
1846
+ },
1842
1847
  onClick: clickHandler
1843
1848
  }, props, {
1844
1849
  className: _JSXStyle.dynamic([["190621384", [theme.palette.accents_5, SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0.5), SCALES.pr(0.75), SCALES.pb(0.5), SCALES.pl(0.75), hasHandler ? 'pointer' : 'default', theme.palette.foreground, theme.palette.border, SCALES.height(0.0625), SCALES.mt(0.35), SCALES.mr(0), SCALES.mb(0.35), SCALES.ml(0), SCALES.width(1, '100%'), SCALES.font(0.925), theme.palette.foreground]]]) + " " + (props && props.className != null && props.className || classes || "")
@@ -3,6 +3,7 @@ interface Props {
3
3
  line?: boolean;
4
4
  showTitle?: boolean;
5
5
  disableAutoClose?: boolean;
6
+ selected?: boolean;
6
7
  onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
7
8
  }
8
9
  type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
@@ -19969,9 +19969,9 @@ var TableHead = function TableHead(props) {
19969
19969
  });
19970
19970
  };
19971
19971
  return /*#__PURE__*/React.createElement(React.Fragment, null, colgroup, /*#__PURE__*/React.createElement("thead", {
19972
- className: _JSXStyle.dynamic([["3728881297", [theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
19972
+ className: _JSXStyle.dynamic([["318735310", [stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
19973
19973
  }, /*#__PURE__*/React.createElement("tr", {
19974
- className: _JSXStyle.dynamic([["3728881297", [theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
19974
+ className: _JSXStyle.dynamic([["318735310", [stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
19975
19975
  }, columns.map(function (column, index) {
19976
19976
  return /*#__PURE__*/React.createElement("th", {
19977
19977
  style: {
@@ -19983,23 +19983,23 @@ var TableHead = function TableHead(props) {
19983
19983
  },
19984
19984
  key: "table-th-".concat(column.prop.toString(), "-").concat(index),
19985
19985
  "data-column": column.label,
19986
- className: _JSXStyle.dynamic([["3728881297", [theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]]) + " " + (column.className || "")
19986
+ className: _JSXStyle.dynamic([["318735310", [stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]]) + " " + (column.className || "")
19987
19987
  }, /*#__PURE__*/React.createElement("div", {
19988
- className: _JSXStyle.dynamic([["3728881297", [theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]]) + " " + "thead-box"
19988
+ className: _JSXStyle.dynamic([["318735310", [stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]]) + " " + "thead-box"
19989
19989
  }, column.label, /*#__PURE__*/React.createElement("br", {
19990
- className: _JSXStyle.dynamic([["3728881297", [theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
19990
+ className: _JSXStyle.dynamic([["318735310", [stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
19991
19991
  }), /*#__PURE__*/React.createElement("span", {
19992
19992
  style: {
19993
19993
  textAlign: 'center'
19994
19994
  },
19995
- className: _JSXStyle.dynamic([["3728881297", [theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
19995
+ className: _JSXStyle.dynamic([["318735310", [stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
19996
19996
  }, column.text)));
19997
19997
  })), showFilters && /*#__PURE__*/React.createElement("tr", {
19998
- className: _JSXStyle.dynamic([["3728881297", [theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
19998
+ className: _JSXStyle.dynamic([["318735310", [stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
19999
19999
  }, generateFilterInputs())), /*#__PURE__*/React.createElement(_JSXStyle, {
20000
- id: "3728881297",
20001
- dynamic: [theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]
20002
- }, "thead.__jsx-style-dynamic-selector{border-collapse:separate;border-spacing:0;font-size:inherit;}th.__jsx-style-dynamic-selector{padding:0 0.5em;font-size:calc(0.75 * var(--table-font-size));font-weight:normal;text-align:left;-webkit-letter-spacing:0;-moz-letter-spacing:0;-ms-letter-spacing:0;letter-spacing:0;vertical-align:middle;min-height:calc(2.5 * var(--table-font-size));color:".concat(theme.palette.accents_5, ";background:").concat(theme.palette.accents_1, ";border-bottom:1px solid ").concat(theme.palette.border, ";border-top:1px solid ").concat(theme.palette.border, ";border-radius:0;").concat(stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", ";}th.__jsx-style-dynamic-selector:nth-child(1){border-bottom:1px solid ").concat(theme.palette.border, ";border-left:1px solid ").concat(theme.palette.border, ";border-top:1px solid ").concat(theme.palette.border, ";border-top-left-radius:").concat(theme.layout.radius, ";border-bottom-left-radius:").concat(theme.layout.radius, ";}th.__jsx-style-dynamic-selector:last-child{border-bottom:1px solid ").concat(theme.palette.border, ";border-right:1px solid ").concat(theme.palette.border, ";border-top:1px solid ").concat(theme.palette.border, ";border-top-right-radius:").concat(theme.layout.radius, ";border-bottom-right-radius:").concat(theme.layout.radius, ";}.thead-box.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-align:center;min-height:calc(2.5 * var(--table-font-size));text-transform:uppercase;}")));
20000
+ id: "318735310",
20001
+ dynamic: [stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]
20002
+ }, "thead.__jsx-style-dynamic-selector{border-collapse:separate;border-spacing:0;font-size:inherit;".concat(stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", ";}th.__jsx-style-dynamic-selector{padding:0 0.5em;font-size:calc(0.75 * var(--table-font-size));font-weight:normal;text-align:left;-webkit-letter-spacing:0;-moz-letter-spacing:0;-ms-letter-spacing:0;letter-spacing:0;vertical-align:middle;min-height:calc(2.5 * var(--table-font-size));color:").concat(theme.palette.accents_5, ";background:").concat(theme.palette.accents_1, ";border-bottom:1px solid ").concat(theme.palette.border, ";border-top:1px solid ").concat(theme.palette.border, ";border-radius:0;").concat(stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", ";}th.__jsx-style-dynamic-selector:nth-child(1){border-bottom:1px solid ").concat(theme.palette.border, ";border-left:1px solid ").concat(theme.palette.border, ";border-top:1px solid ").concat(theme.palette.border, ";border-top-left-radius:").concat(theme.layout.radius, ";border-bottom-left-radius:").concat(theme.layout.radius, ";}th.__jsx-style-dynamic-selector:last-child{border-bottom:1px solid ").concat(theme.palette.border, ";border-right:1px solid ").concat(theme.palette.border, ";border-top:1px solid ").concat(theme.palette.border, ";border-top-right-radius:").concat(theme.layout.radius, ";border-bottom-right-radius:").concat(theme.layout.radius, ";}.thead-box.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-align:center;min-height:calc(2.5 * var(--table-font-size));text-transform:uppercase;}")));
20003
20003
  };
20004
20004
  TableHead.displayName = 'TableHead';
20005
20005
 
@@ -20023,7 +20023,7 @@ var TableCell = function TableCell(_ref) {
20023
20023
  color: "".concat(column === null || column === undefined ? undefined : column.color),
20024
20024
  whiteSpace: column !== null && column !== undefined && column.noWrap ? 'nowrap' : 'normal'
20025
20025
  }, currentRowValue === null || currentRowValue === undefined ? undefined : currentRowValue.style),
20026
- "data-column": column.label,
20026
+ "data-column": String(column.label).toLowerCase(),
20027
20027
  key: "row-td-".concat(index, "-").concat(column.prop.toString()),
20028
20028
  onClick: function onClick() {
20029
20029
  return onCellClick && onCellClick(currentRowValue, rowIndex, index);
@@ -31488,7 +31488,7 @@ var PopoverComponent = function PopoverComponent(_ref) {
31488
31488
  PopoverComponent.displayName = 'Popover';
31489
31489
  var Popover = withScale(PopoverComponent);
31490
31490
 
31491
- var _excluded$5 = ["children", "line", "showTitle", "className", "onClick", "disableAutoClose"];
31491
+ var _excluded$5 = ["children", "line", "showTitle", "className", "onClick", "selected", "disableAutoClose"];
31492
31492
  var PopoverItemComponent = function PopoverItemComponent(_ref) {
31493
31493
  var children = _ref.children,
31494
31494
  _ref$line = _ref.line,
@@ -31498,6 +31498,8 @@ var PopoverItemComponent = function PopoverItemComponent(_ref) {
31498
31498
  _ref$className = _ref.className,
31499
31499
  className = _ref$className === undefined ? '' : _ref$className,
31500
31500
  onClick = _ref.onClick,
31501
+ _ref$selected = _ref.selected,
31502
+ selected = _ref$selected === undefined ? false : _ref$selected,
31501
31503
  _ref$disableAutoClose = _ref.disableAutoClose,
31502
31504
  disableAutoClose = _ref$disableAutoClose === undefined ? false : _ref$disableAutoClose,
31503
31505
  props = _objectWithoutProperties(_ref, _excluded$5);
@@ -31521,6 +31523,9 @@ var PopoverItemComponent = function PopoverItemComponent(_ref) {
31521
31523
  onItemClick(event);
31522
31524
  };
31523
31525
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", _extends({
31526
+ style: {
31527
+ backgroundColor: selected ? '#efefef' : ''
31528
+ },
31524
31529
  onClick: clickHandler
31525
31530
  }, props, {
31526
31531
  className: _JSXStyle.dynamic([["190621384", [theme.palette.accents_5, SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0.5), SCALES.pr(0.75), SCALES.pb(0.5), SCALES.pl(0.75), hasHandler ? 'pointer' : 'default', theme.palette.foreground, theme.palette.border, SCALES.height(0.0625), SCALES.mt(0.35), SCALES.mr(0), SCALES.mb(0.35), SCALES.ml(0), SCALES.width(1, '100%'), SCALES.font(0.925), theme.palette.foreground]]]) + " " + (props && props.className != null && props.className || classes || "")
@@ -31613,11 +31618,11 @@ function DataTable(_ref) {
31613
31618
  React.useEffect(function () {
31614
31619
  cols.forEach(function (col) {
31615
31620
  if (hideColumn.includes(col.name)) {
31616
- document.querySelectorAll("[data-column=\"".concat(col.name, "\"]")).forEach(function (el) {
31617
- el.style.display = 'none';
31621
+ document.querySelectorAll("[data-column=\"".concat(String(col.name).toLowerCase(), "\"]")).forEach(function (el) {
31622
+ el.style.display = 'none !important';
31618
31623
  });
31619
31624
  } else {
31620
- document.querySelectorAll("[data-column=\"".concat(col.name, "\"]")).forEach(function (el) {
31625
+ document.querySelectorAll("[data-column=\"".concat(String(col.name).toLowerCase(), "\"]")).forEach(function (el) {
31621
31626
  el.style.display = '';
31622
31627
  });
31623
31628
  }
@@ -31673,15 +31678,15 @@ function DataTable(_ref) {
31673
31678
  // };
31674
31679
 
31675
31680
  var COLUMNS = cols.filter(function (col) {
31676
- return !hideColumn.includes(col.name);
31681
+ return !hideColumn.includes(String(col.name).toLowerCase());
31677
31682
  });
31678
31683
  var content = function content() {
31679
31684
  return /*#__PURE__*/React.createElement(React.Fragment, null, cols.map(function (option, index) {
31680
31685
  var colunqid = _.uniqueId("".concat(option.name, "-").concat(index));
31686
+ var isSelected = !hideColumn.includes(option.name);
31681
31687
  return /*#__PURE__*/React.createElement(Popover.Item, {
31682
- key: colunqid
31683
- // selected={!hideColumn.includes(option.name as never)}
31684
- ,
31688
+ selected: isSelected,
31689
+ key: colunqid,
31685
31690
  onClick: function onClick(e) {
31686
31691
  return handleHideColumnClick(e, option.name);
31687
31692
  }
@@ -31689,6 +31694,7 @@ function DataTable(_ref) {
31689
31694
  }));
31690
31695
  };
31691
31696
  return /*#__PURE__*/React.createElement(GridContainer, {
31697
+ className: "helpdice-ui-data-table-container",
31692
31698
  direction: "column"
31693
31699
  }, /*#__PURE__*/React.createElement(Grid.Container, {
31694
31700
  style: {
@@ -31787,6 +31793,7 @@ function DataTable(_ref) {
31787
31793
  py: 0.4,
31788
31794
  type: "dark"
31789
31795
  }, /*#__PURE__*/React.createElement(Popover, {
31796
+ disableItemsAutoClose: true,
31790
31797
  placement: "bottomEnd",
31791
31798
  child: content
31792
31799
  }, /*#__PURE__*/React.createElement(Button, {
@@ -31819,10 +31826,10 @@ function DataTable(_ref) {
31819
31826
  onDragLeave: onDragLeave,
31820
31827
  onDrop: onDrop,
31821
31828
  id: TABLE_ID,
31829
+ className: "helpdice-ui-table-container",
31822
31830
  style: _objectSpread2({
31823
- overflow: 'auto',
31824
31831
  position: 'relative',
31825
- height: 'calc(100vh - 8.5rem)',
31832
+ overflowY: 'auto',
31826
31833
  maxWidth: 'calc(100vw - 1rem)',
31827
31834
  width: sideMenu ? 'calc(100vw - 17.2rem)' : 'inherit !important'
31828
31835
  }, style)
@@ -31978,7 +31985,7 @@ var TableBody = function TableBody(_ref) {
31978
31985
  })))));
31979
31986
  }
31980
31987
  return /*#__PURE__*/React.createElement("tbody", {
31981
- className: _JSXStyle.dynamic([["1422656197", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]])
31988
+ className: _JSXStyle.dynamic([["1229207510", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]])
31982
31989
  }, data.map(function (row, index) {
31983
31990
  var _row$table, _row$table2, _row$table3, _row$table4, _row$table5;
31984
31991
  var qid = _.uniqueId();
@@ -31986,21 +31993,21 @@ var TableBody = function TableBody(_ref) {
31986
31993
  var uid = _.uniqueId();
31987
31994
  return /*#__PURE__*/React.createElement("tr", {
31988
31995
  key: uid,
31989
- className: _JSXStyle.dynamic([["1422656197", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]])
31996
+ className: _JSXStyle.dynamic([["1229207510", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]])
31990
31997
  }, /*#__PURE__*/React.createElement("td", {
31991
31998
  colSpan: columns.length,
31992
- className: _JSXStyle.dynamic([["1422656197", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]])
31999
+ className: _JSXStyle.dynamic([["1229207510", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]])
31993
32000
  }, "\u2003"));
31994
32001
  }
31995
32002
  return /*#__PURE__*/React.createElement(React.Fragment, null, renderRow(columns, row, index), (row === null || row === undefined ? undefined : row.table) && /*#__PURE__*/React.createElement("tr", {
31996
32003
  key: qid,
31997
- className: _JSXStyle.dynamic([["1422656197", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]])
32004
+ className: _JSXStyle.dynamic([["1229207510", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]])
31998
32005
  }, /*#__PURE__*/React.createElement("td", {
31999
32006
  style: {
32000
32007
  padding: '1rem'
32001
32008
  },
32002
32009
  colSpan: columns.length,
32003
- className: _JSXStyle.dynamic([["1422656197", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]])
32010
+ className: _JSXStyle.dynamic([["1229207510", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]])
32004
32011
  }, /*#__PURE__*/React.createElement(DataTable$1, {
32005
32012
  readOnly: true,
32006
32013
  stickyHeader: false,
@@ -32028,9 +32035,9 @@ var TableBody = function TableBody(_ref) {
32028
32035
  // </tr>
32029
32036
  // )
32030
32037
  }), /*#__PURE__*/React.createElement(_JSXStyle, {
32031
- id: "1422656197",
32038
+ id: "1229207510",
32032
32039
  dynamic: [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]
32033
- }, "tr.__jsx-style-dynamic-selector{-webkit-transition:background-color 0.25s ease;transition:background-color 0.25s ease;font-size:inherit;}tr.hover.__jsx-style-dynamic-selector:hover{background-color:".concat(theme.palette.accents_1, ";}tr.draggable.__jsx-style-dynamic-selector:hover{border:2px dashed #dfdfdf;margin:3px;}tr.__jsx-style-dynamic-selector td{padding:0 0.5em;border-bottom:1px solid ").concat(theme.palette.border, ";color:").concat(theme.palette.accents_6, ";font-size:calc(0.875 * var(--table-font-size));text-align:left;}tr.__jsx-style-dynamic-selector .cell{min-height:calc(3.125 * var(--table-font-size));display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-flex-flow:row wrap;-ms-flex-flow:row wrap;flex-flow:row wrap;}")));
32040
+ }, "tbody.__jsx-style-dynamic-selector{display:block;overflow-y:auto;max-height:calc(100vh - 10rem);}tr.__jsx-style-dynamic-selector{-webkit-transition:background-color 0.25s ease;transition:background-color 0.25s ease;font-size:inherit;}tr.hover.__jsx-style-dynamic-selector:hover{background-color:".concat(theme.palette.accents_1, ";}tr.draggable.__jsx-style-dynamic-selector:hover{border:2px dashed #dfdfdf;margin:3px;}tr.__jsx-style-dynamic-selector td{padding:0 0.5em;border-bottom:1px solid ").concat(theme.palette.border, ";color:").concat(theme.palette.accents_6, ";font-size:calc(0.875 * var(--table-font-size));text-align:left;}tr.__jsx-style-dynamic-selector .cell{min-height:calc(3.125 * var(--table-font-size));display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-flex-flow:row wrap;-ms-flex-flow:row wrap;flex-flow:row wrap;}")));
32034
32041
  };
32035
32042
  TableBody.displayName = 'TableBody';
32036
32043
 
@@ -32516,7 +32523,7 @@ function TableComponent(tableProps) {
32516
32523
  }, /*#__PURE__*/React.createElement("table", _extends({
32517
32524
  ref: ref
32518
32525
  }, props, {
32519
- className: _JSXStyle.dynamic([["2132340556", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]]) + " " + (props && props.className != null && props.className || className || "")
32526
+ className: _JSXStyle.dynamic([["864348448", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]]) + " " + (props && props.className != null && props.className || className || "")
32520
32527
  }), /*#__PURE__*/React.createElement(TableHead, {
32521
32528
  stickyHeader: stickyHeader,
32522
32529
  columns: columns,
@@ -32533,11 +32540,8 @@ function TableComponent(tableProps) {
32533
32540
  rowDraggable: rowDraggable,
32534
32541
  readOnly: readOnly,
32535
32542
  onSelected: onSelected
32536
- }), children, /*#__PURE__*/React.createElement(_JSXStyle, {
32537
- id: "2132340556",
32538
- dynamic: [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]
32539
- }, "table.__jsx-style-dynamic-selector{border-collapse:separate;border-spacing:0;--table-font-size:".concat(SCALES.font(1), ";font-size:var(--table-font-size);width:").concat(SCALES.width(1, '100%'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}")), dataLength && viewLength && onPageChange ? /*#__PURE__*/React.createElement("tfoot", {
32540
- className: _JSXStyle.dynamic([["2132340556", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]])
32543
+ }), children, dataLength && viewLength && onPageChange ? /*#__PURE__*/React.createElement("tfoot", {
32544
+ className: _JSXStyle.dynamic([["864348448", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]])
32541
32545
  }, /*#__PURE__*/React.createElement(Pagination, {
32542
32546
  onChange: function onChange(pageNumber) {
32543
32547
  // Get the range for the current page
@@ -32548,7 +32552,10 @@ function TableComponent(tableProps) {
32548
32552
  },
32549
32553
  limit: 5,
32550
32554
  count: Number(dataLength / viewLength)
32551
- }, /*#__PURE__*/React.createElement(Pagination.Next, null, /*#__PURE__*/React.createElement(ChevronRight$1, null)), /*#__PURE__*/React.createElement(Pagination.Previous, null, /*#__PURE__*/React.createElement(ChevronLeft$1, null)))) : null));
32555
+ }, /*#__PURE__*/React.createElement(Pagination.Next, null, /*#__PURE__*/React.createElement(ChevronRight$1, null)), /*#__PURE__*/React.createElement(Pagination.Previous, null, /*#__PURE__*/React.createElement(ChevronLeft$1, null)))) : null, /*#__PURE__*/React.createElement(_JSXStyle, {
32556
+ id: "864348448",
32557
+ dynamic: [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]
32558
+ }, "table.__jsx-style-dynamic-selector{border-collapse:separate;border-spacing:0;--table-font-size:".concat(SCALES.font(1), ";font-size:var(--table-font-size);width:").concat(SCALES.width(1, '100%'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}tfoot.__jsx-style-dynamic-selector{bottom:0;z-index:2;background-color:#fff;}"))));
32552
32559
  }
32553
32560
  TableComponent.displayName = 'Table';
32554
32561
  TableComponent.Column = TableColumn;
@@ -3,6 +3,7 @@ interface Props {
3
3
  line?: boolean;
4
4
  showTitle?: boolean;
5
5
  disableAutoClose?: boolean;
6
+ selected?: boolean;
6
7
  onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
7
8
  }
8
9
  type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
@@ -1,6 +1,6 @@
1
1
  import _extends from "@babel/runtime/helpers/esm/extends";
2
2
  import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
3
- var _excluded = ["children", "line", "showTitle", "className", "onClick", "disableAutoClose"];
3
+ var _excluded = ["children", "line", "showTitle", "className", "onClick", "selected", "disableAutoClose"];
4
4
  import _JSXStyle from "../styled-jsx.es.js";
5
5
  import React from 'react';
6
6
  import useTheme from '../use-theme';
@@ -16,6 +16,8 @@ var PopoverItemComponent = function PopoverItemComponent(_ref) {
16
16
  _ref$className = _ref.className,
17
17
  className = _ref$className === void 0 ? '' : _ref$className,
18
18
  onClick = _ref.onClick,
19
+ _ref$selected = _ref.selected,
20
+ selected = _ref$selected === void 0 ? false : _ref$selected,
19
21
  _ref$disableAutoClose = _ref.disableAutoClose,
20
22
  disableAutoClose = _ref$disableAutoClose === void 0 ? false : _ref$disableAutoClose,
21
23
  props = _objectWithoutProperties(_ref, _excluded);
@@ -39,6 +41,9 @@ var PopoverItemComponent = function PopoverItemComponent(_ref) {
39
41
  onItemClick(event);
40
42
  };
41
43
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", _extends({
44
+ style: {
45
+ backgroundColor: selected ? '#efefef' : ''
46
+ },
42
47
  onClick: clickHandler
43
48
  }, props, {
44
49
  className: _JSXStyle.dynamic([["190621384", [theme.palette.accents_5, SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0.5), SCALES.pr(0.75), SCALES.pb(0.5), SCALES.pl(0.75), hasHandler ? 'pointer' : 'default', theme.palette.foreground, theme.palette.border, SCALES.height(0.0625), SCALES.mt(0.35), SCALES.mr(0), SCALES.mb(0.35), SCALES.ml(0), SCALES.width(1, '100%'), SCALES.font(0.925), theme.palette.foreground]]]) + " " + (props && props.className != null && props.className || classes || "")
@@ -86,11 +86,11 @@ function DataTable(_ref) {
86
86
  useEffect(function () {
87
87
  cols.forEach(function (col) {
88
88
  if (hideColumn.includes(col.name)) {
89
- document.querySelectorAll("[data-column=\"".concat(col.name, "\"]")).forEach(function (el) {
90
- el.style.display = 'none';
89
+ document.querySelectorAll("[data-column=\"".concat(String(col.name).toLowerCase(), "\"]")).forEach(function (el) {
90
+ el.style.display = 'none !important';
91
91
  });
92
92
  } else {
93
- document.querySelectorAll("[data-column=\"".concat(col.name, "\"]")).forEach(function (el) {
93
+ document.querySelectorAll("[data-column=\"".concat(String(col.name).toLowerCase(), "\"]")).forEach(function (el) {
94
94
  el.style.display = '';
95
95
  });
96
96
  }
@@ -146,15 +146,15 @@ function DataTable(_ref) {
146
146
  // };
147
147
 
148
148
  var COLUMNS = cols.filter(function (col) {
149
- return !hideColumn.includes(col.name);
149
+ return !hideColumn.includes(String(col.name).toLowerCase());
150
150
  });
151
151
  var content = function content() {
152
152
  return /*#__PURE__*/React.createElement(React.Fragment, null, cols.map(function (option, index) {
153
153
  var colunqid = _.uniqueId("".concat(option.name, "-").concat(index));
154
+ var isSelected = !hideColumn.includes(option.name);
154
155
  return /*#__PURE__*/React.createElement(Popover.Item, {
155
- key: colunqid
156
- // selected={!hideColumn.includes(option.name as never)}
157
- ,
156
+ selected: isSelected,
157
+ key: colunqid,
158
158
  onClick: function onClick(e) {
159
159
  return handleHideColumnClick(e, option.name);
160
160
  }
@@ -162,6 +162,7 @@ function DataTable(_ref) {
162
162
  }));
163
163
  };
164
164
  return /*#__PURE__*/React.createElement(Container, {
165
+ className: "helpdice-ui-data-table-container",
165
166
  direction: "column"
166
167
  }, /*#__PURE__*/React.createElement(Grid.Container, {
167
168
  style: {
@@ -260,6 +261,7 @@ function DataTable(_ref) {
260
261
  py: 0.4,
261
262
  type: "dark"
262
263
  }, /*#__PURE__*/React.createElement(Popover, {
264
+ disableItemsAutoClose: true,
263
265
  placement: "bottomEnd",
264
266
  child: content
265
267
  }, /*#__PURE__*/React.createElement(Button, {
@@ -292,10 +294,10 @@ function DataTable(_ref) {
292
294
  onDragLeave: onDragLeave,
293
295
  onDrop: onDrop,
294
296
  id: TABLE_ID,
297
+ className: "helpdice-ui-table-container",
295
298
  style: _extends({
296
- overflow: 'auto',
297
299
  position: 'relative',
298
- height: 'calc(100vh - 8.5rem)',
300
+ overflowY: 'auto',
299
301
  maxWidth: 'calc(100vw - 1rem)',
300
302
  width: sideMenu ? 'calc(100vw - 17.2rem)' : 'inherit !important'
301
303
  }, style)
@@ -125,7 +125,7 @@ var TableBody = function TableBody(_ref) {
125
125
  })))));
126
126
  }
127
127
  return /*#__PURE__*/React.createElement("tbody", {
128
- className: _JSXStyle.dynamic([["1422656197", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]])
128
+ className: _JSXStyle.dynamic([["1229207510", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]])
129
129
  }, data.map(function (row, index) {
130
130
  var _row$table, _row$table2, _row$table3, _row$table4, _row$table5;
131
131
  var qid = _.uniqueId();
@@ -133,21 +133,21 @@ var TableBody = function TableBody(_ref) {
133
133
  var uid = _.uniqueId();
134
134
  return /*#__PURE__*/React.createElement("tr", {
135
135
  key: uid,
136
- className: _JSXStyle.dynamic([["1422656197", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]])
136
+ className: _JSXStyle.dynamic([["1229207510", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]])
137
137
  }, /*#__PURE__*/React.createElement("td", {
138
138
  colSpan: columns.length,
139
- className: _JSXStyle.dynamic([["1422656197", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]])
139
+ className: _JSXStyle.dynamic([["1229207510", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]])
140
140
  }, "\u2003"));
141
141
  }
142
142
  return /*#__PURE__*/React.createElement(React.Fragment, null, renderRow(columns, row, index), (row === null || row === void 0 ? void 0 : row.table) && /*#__PURE__*/React.createElement("tr", {
143
143
  key: qid,
144
- className: _JSXStyle.dynamic([["1422656197", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]])
144
+ className: _JSXStyle.dynamic([["1229207510", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]])
145
145
  }, /*#__PURE__*/React.createElement("td", {
146
146
  style: {
147
147
  padding: '1rem'
148
148
  },
149
149
  colSpan: columns.length,
150
- className: _JSXStyle.dynamic([["1422656197", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]])
150
+ className: _JSXStyle.dynamic([["1229207510", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]])
151
151
  }, /*#__PURE__*/React.createElement(DataTable, {
152
152
  readOnly: true,
153
153
  stickyHeader: false,
@@ -175,9 +175,9 @@ var TableBody = function TableBody(_ref) {
175
175
  // </tr>
176
176
  // )
177
177
  }), /*#__PURE__*/React.createElement(_JSXStyle, {
178
- id: "1422656197",
178
+ id: "1229207510",
179
179
  dynamic: [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]
180
- }, "tr.__jsx-style-dynamic-selector{-webkit-transition:background-color 0.25s ease;transition:background-color 0.25s ease;font-size:inherit;}tr.hover.__jsx-style-dynamic-selector:hover{background-color:".concat(theme.palette.accents_1, ";}tr.draggable.__jsx-style-dynamic-selector:hover{border:2px dashed #dfdfdf;margin:3px;}tr.__jsx-style-dynamic-selector td{padding:0 0.5em;border-bottom:1px solid ").concat(theme.palette.border, ";color:").concat(theme.palette.accents_6, ";font-size:calc(0.875 * var(--table-font-size));text-align:left;}tr.__jsx-style-dynamic-selector .cell{min-height:calc(3.125 * var(--table-font-size));display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-flex-flow:row wrap;-ms-flex-flow:row wrap;flex-flow:row wrap;}")));
180
+ }, "tbody.__jsx-style-dynamic-selector{display:block;overflow-y:auto;max-height:calc(100vh - 10rem);}tr.__jsx-style-dynamic-selector{-webkit-transition:background-color 0.25s ease;transition:background-color 0.25s ease;font-size:inherit;}tr.hover.__jsx-style-dynamic-selector:hover{background-color:".concat(theme.palette.accents_1, ";}tr.draggable.__jsx-style-dynamic-selector:hover{border:2px dashed #dfdfdf;margin:3px;}tr.__jsx-style-dynamic-selector td{padding:0 0.5em;border-bottom:1px solid ").concat(theme.palette.border, ";color:").concat(theme.palette.accents_6, ";font-size:calc(0.875 * var(--table-font-size));text-align:left;}tr.__jsx-style-dynamic-selector .cell{min-height:calc(3.125 * var(--table-font-size));display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-flex-flow:row wrap;-ms-flex-flow:row wrap;flex-flow:row wrap;}")));
181
181
  };
182
182
  TableBody.displayName = 'TableBody';
183
183
  export default TableBody;
@@ -20,7 +20,7 @@ var TableCell = function TableCell(_ref) {
20
20
  color: "".concat(column === null || column === void 0 ? void 0 : column.color),
21
21
  whiteSpace: column !== null && column !== void 0 && column.noWrap ? 'nowrap' : 'normal'
22
22
  }, currentRowValue === null || currentRowValue === void 0 ? void 0 : currentRowValue.style),
23
- "data-column": column.label,
23
+ "data-column": String(column.label).toLowerCase(),
24
24
  key: "row-td-".concat(index, "-").concat(column.prop.toString()),
25
25
  onClick: function onClick() {
26
26
  return onCellClick && onCellClick(currentRowValue, rowIndex, index);
@@ -123,9 +123,9 @@ var TableHead = function TableHead(props) {
123
123
  });
124
124
  };
125
125
  return /*#__PURE__*/React.createElement(React.Fragment, null, colgroup, /*#__PURE__*/React.createElement("thead", {
126
- className: _JSXStyle.dynamic([["3728881297", [theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
126
+ className: _JSXStyle.dynamic([["318735310", [stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
127
127
  }, /*#__PURE__*/React.createElement("tr", {
128
- className: _JSXStyle.dynamic([["3728881297", [theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
128
+ className: _JSXStyle.dynamic([["318735310", [stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
129
129
  }, columns.map(function (column, index) {
130
130
  return /*#__PURE__*/React.createElement("th", {
131
131
  style: {
@@ -137,23 +137,23 @@ var TableHead = function TableHead(props) {
137
137
  },
138
138
  key: "table-th-".concat(column.prop.toString(), "-").concat(index),
139
139
  "data-column": column.label,
140
- className: _JSXStyle.dynamic([["3728881297", [theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]]) + " " + (column.className || "")
140
+ className: _JSXStyle.dynamic([["318735310", [stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]]) + " " + (column.className || "")
141
141
  }, /*#__PURE__*/React.createElement("div", {
142
- className: _JSXStyle.dynamic([["3728881297", [theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]]) + " " + "thead-box"
142
+ className: _JSXStyle.dynamic([["318735310", [stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]]) + " " + "thead-box"
143
143
  }, column.label, /*#__PURE__*/React.createElement("br", {
144
- className: _JSXStyle.dynamic([["3728881297", [theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
144
+ className: _JSXStyle.dynamic([["318735310", [stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
145
145
  }), /*#__PURE__*/React.createElement("span", {
146
146
  style: {
147
147
  textAlign: 'center'
148
148
  },
149
- className: _JSXStyle.dynamic([["3728881297", [theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
149
+ className: _JSXStyle.dynamic([["318735310", [stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
150
150
  }, column.text)));
151
151
  })), showFilters && /*#__PURE__*/React.createElement("tr", {
152
- className: _JSXStyle.dynamic([["3728881297", [theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
152
+ className: _JSXStyle.dynamic([["318735310", [stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
153
153
  }, generateFilterInputs())), /*#__PURE__*/React.createElement(_JSXStyle, {
154
- id: "3728881297",
155
- dynamic: [theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]
156
- }, "thead.__jsx-style-dynamic-selector{border-collapse:separate;border-spacing:0;font-size:inherit;}th.__jsx-style-dynamic-selector{padding:0 0.5em;font-size:calc(0.75 * var(--table-font-size));font-weight:normal;text-align:left;-webkit-letter-spacing:0;-moz-letter-spacing:0;-ms-letter-spacing:0;letter-spacing:0;vertical-align:middle;min-height:calc(2.5 * var(--table-font-size));color:".concat(theme.palette.accents_5, ";background:").concat(theme.palette.accents_1, ";border-bottom:1px solid ").concat(theme.palette.border, ";border-top:1px solid ").concat(theme.palette.border, ";border-radius:0;").concat(stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", ";}th.__jsx-style-dynamic-selector:nth-child(1){border-bottom:1px solid ").concat(theme.palette.border, ";border-left:1px solid ").concat(theme.palette.border, ";border-top:1px solid ").concat(theme.palette.border, ";border-top-left-radius:").concat(theme.layout.radius, ";border-bottom-left-radius:").concat(theme.layout.radius, ";}th.__jsx-style-dynamic-selector:last-child{border-bottom:1px solid ").concat(theme.palette.border, ";border-right:1px solid ").concat(theme.palette.border, ";border-top:1px solid ").concat(theme.palette.border, ";border-top-right-radius:").concat(theme.layout.radius, ";border-bottom-right-radius:").concat(theme.layout.radius, ";}.thead-box.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-align:center;min-height:calc(2.5 * var(--table-font-size));text-transform:uppercase;}")));
154
+ id: "318735310",
155
+ dynamic: [stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]
156
+ }, "thead.__jsx-style-dynamic-selector{border-collapse:separate;border-spacing:0;font-size:inherit;".concat(stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", ";}th.__jsx-style-dynamic-selector{padding:0 0.5em;font-size:calc(0.75 * var(--table-font-size));font-weight:normal;text-align:left;-webkit-letter-spacing:0;-moz-letter-spacing:0;-ms-letter-spacing:0;letter-spacing:0;vertical-align:middle;min-height:calc(2.5 * var(--table-font-size));color:").concat(theme.palette.accents_5, ";background:").concat(theme.palette.accents_1, ";border-bottom:1px solid ").concat(theme.palette.border, ";border-top:1px solid ").concat(theme.palette.border, ";border-radius:0;").concat(stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", ";}th.__jsx-style-dynamic-selector:nth-child(1){border-bottom:1px solid ").concat(theme.palette.border, ";border-left:1px solid ").concat(theme.palette.border, ";border-top:1px solid ").concat(theme.palette.border, ";border-top-left-radius:").concat(theme.layout.radius, ";border-bottom-left-radius:").concat(theme.layout.radius, ";}th.__jsx-style-dynamic-selector:last-child{border-bottom:1px solid ").concat(theme.palette.border, ";border-right:1px solid ").concat(theme.palette.border, ";border-top:1px solid ").concat(theme.palette.border, ";border-top-right-radius:").concat(theme.layout.radius, ";border-bottom-right-radius:").concat(theme.layout.radius, ";}.thead-box.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-align:center;min-height:calc(2.5 * var(--table-font-size));text-transform:uppercase;}")));
157
157
  };
158
158
  TableHead.displayName = 'TableHead';
159
159
  export default TableHead;
@@ -106,7 +106,7 @@ function TableComponent(tableProps) {
106
106
  }, /*#__PURE__*/React.createElement("table", _extends({
107
107
  ref: ref
108
108
  }, props, {
109
- className: _JSXStyle.dynamic([["2132340556", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]]) + " " + (props && props.className != null && props.className || className || "")
109
+ className: _JSXStyle.dynamic([["864348448", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]]) + " " + (props && props.className != null && props.className || className || "")
110
110
  }), /*#__PURE__*/React.createElement(TableHead, {
111
111
  stickyHeader: stickyHeader,
112
112
  columns: columns,
@@ -123,11 +123,8 @@ function TableComponent(tableProps) {
123
123
  rowDraggable: rowDraggable,
124
124
  readOnly: readOnly,
125
125
  onSelected: onSelected
126
- }), children, /*#__PURE__*/React.createElement(_JSXStyle, {
127
- id: "2132340556",
128
- dynamic: [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]
129
- }, "table.__jsx-style-dynamic-selector{border-collapse:separate;border-spacing:0;--table-font-size:".concat(SCALES.font(1), ";font-size:var(--table-font-size);width:").concat(SCALES.width(1, '100%'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}")), dataLength && viewLength && onPageChange ? /*#__PURE__*/React.createElement("tfoot", {
130
- className: _JSXStyle.dynamic([["2132340556", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]])
126
+ }), children, dataLength && viewLength && onPageChange ? /*#__PURE__*/React.createElement("tfoot", {
127
+ className: _JSXStyle.dynamic([["864348448", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]])
131
128
  }, /*#__PURE__*/React.createElement(Pagination, {
132
129
  onChange: function onChange(pageNumber) {
133
130
  // Get the range for the current page
@@ -138,7 +135,10 @@ function TableComponent(tableProps) {
138
135
  },
139
136
  limit: 5,
140
137
  count: Number(dataLength / viewLength)
141
- }, /*#__PURE__*/React.createElement(Pagination.Next, null, /*#__PURE__*/React.createElement(ChevronRight, null)), /*#__PURE__*/React.createElement(Pagination.Previous, null, /*#__PURE__*/React.createElement(ChevronLeft, null)))) : null));
138
+ }, /*#__PURE__*/React.createElement(Pagination.Next, null, /*#__PURE__*/React.createElement(ChevronRight, null)), /*#__PURE__*/React.createElement(Pagination.Previous, null, /*#__PURE__*/React.createElement(ChevronLeft, null)))) : null, /*#__PURE__*/React.createElement(_JSXStyle, {
139
+ id: "864348448",
140
+ dynamic: [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]
141
+ }, "table.__jsx-style-dynamic-selector{border-collapse:separate;border-spacing:0;--table-font-size:".concat(SCALES.font(1), ";font-size:var(--table-font-size);width:").concat(SCALES.width(1, '100%'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}tfoot.__jsx-style-dynamic-selector{bottom:0;z-index:2;background-color:#fff;}"))));
142
142
  }
143
143
  TableComponent.displayName = 'Table';
144
144
  TableComponent.Column = TableColumn;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@helpdice/ui",
3
- "version": "1.3.6",
3
+ "version": "1.3.8",
4
4
  "main": "dist/index.js",
5
5
  "types": "esm/index.d.ts",
6
6
  "unpkg": "dist/index.min.js",