@helpdice/ui 1.4.2 → 1.4.4

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 (12) hide show
  1. package/dist/index.js +21 -14
  2. package/dist/table/index.js +21 -14
  3. package/dist/table/table-column.d.ts +2 -1
  4. package/dist/table/table-types.d.ts +3 -2
  5. package/esm/table/data-table.js +3 -1
  6. package/esm/table/table-body.js +3 -3
  7. package/esm/table/table-column.d.ts +2 -1
  8. package/esm/table/table-column.js +3 -1
  9. package/esm/table/table-head.js +6 -3
  10. package/esm/table/table-types.d.ts +3 -2
  11. package/esm/table/table.js +4 -2
  12. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -2,8 +2,6 @@
2
2
 
3
3
  var React = require('react');
4
4
  var reactDom = require('react-dom');
5
- var Button$1 = require('components/button');
6
- var Tooltip$1 = require('components/tooltip');
7
5
  var require$$0 = require('react-is');
8
6
  var isEqual = require('react-fast-compare');
9
7
 
@@ -42219,18 +42217,21 @@ var TableHead = function TableHead(props) {
42219
42217
  return /*#__PURE__*/React.createElement(React.Fragment, null, colgroup, /*#__PURE__*/React.createElement("thead", {
42220
42218
  className: _JSXStyle.dynamic([["2156261549", [stickyHeader && "\n position: sticky;\n top: 0;\n z-index: 1;\n ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, 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]]])
42221
42219
  }, /*#__PURE__*/React.createElement("tr", {
42220
+ style: {
42221
+ backgroundColor: '#fff'
42222
+ },
42222
42223
  className: _JSXStyle.dynamic([["2156261549", [stickyHeader && "\n position: sticky;\n top: 0;\n z-index: 1;\n ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, 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]]])
42223
42224
  }, columns.map(function (column, index) {
42224
42225
  var _String2;
42225
42226
  var dataName = (_String2 = String(column === null || column === undefined ? undefined : column.label)) === null || _String2 === undefined ? undefined : _String2.replace(' ', '_').toLowerCase();
42226
42227
  return /*#__PURE__*/React.createElement("th", {
42227
- style: {
42228
+ style: _objectSpread2({
42228
42229
  // textAlign: `${column?.align} !important`,
42229
42230
  // paddingLeft: '0.3rem',
42230
42231
  // paddingRight: '0.3rem',
42231
- // color: `${column?.color}`,
42232
+ color: "".concat(column !== null && column !== undefined && column.color ? column === null || column === undefined ? undefined : column.color : '#fff'),
42232
42233
  whiteSpace: column !== null && column !== undefined && column.noWrap ? 'nowrap' : 'normal'
42233
- },
42234
+ }, column === null || column === undefined ? undefined : column.style),
42234
42235
  key: "table-th-".concat(column.prop.toString(), "-").concat(index),
42235
42236
  "data-column": dataName,
42236
42237
  className: _JSXStyle.dynamic([["2156261549", [stickyHeader && "\n position: sticky;\n top: 0;\n z-index: 1;\n ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, 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 || "")
@@ -43032,7 +43033,8 @@ function DataTable(_ref) {
43032
43033
  style: {
43033
43034
  display: 'flex',
43034
43035
  alignItems: 'center',
43035
- gap: '1rem'
43036
+ gap: '1rem',
43037
+ fontSize: 'larger'
43036
43038
  }
43037
43039
  }, children && /*#__PURE__*/React.createElement(Button, {
43038
43040
  auto: true,
@@ -43186,6 +43188,7 @@ function DataTable(_ref) {
43186
43188
  }
43187
43189
  }, COLUMNS.map(function (column, index) {
43188
43190
  return /*#__PURE__*/React.createElement(Table.Column, {
43191
+ style: column === null || column === undefined ? undefined : column.style,
43189
43192
  options: column === null || column === undefined ? undefined : column.options,
43190
43193
  fontSize: column === null || column === undefined ? undefined : column.fontSize,
43191
43194
  key: "".concat(column.id, "-").concat(index),
@@ -43294,7 +43297,7 @@ var TableBody = function TableBody(_ref) {
43294
43297
  }
43295
43298
  }
43296
43299
  },
43297
- className: _JSXStyle.dynamic([["2019708038", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]]) + " " + (useClasses("".concat(rowDraggable ? 'draggable' : 'hover', " ").concat(className)) || "")
43300
+ className: _JSXStyle.dynamic([["787902152", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]]) + " " + (useClasses("".concat(rowDraggable ? 'draggable' : 'hover', " ").concat(className)) || "")
43298
43301
  }, /*#__PURE__*/React.createElement(TableCell, {
43299
43302
  columns: cols,
43300
43303
  row: rw,
@@ -43302,9 +43305,9 @@ var TableBody = function TableBody(_ref) {
43302
43305
  emptyText: emptyText,
43303
43306
  onCellClick: onCell
43304
43307
  })), /*#__PURE__*/React.createElement(_JSXStyle, {
43305
- id: "2019708038",
43308
+ id: "787902152",
43306
43309
  dynamic: [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]
43307
- }, "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;}")));
43310
+ }, "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(2.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;}")));
43308
43311
  }
43309
43312
  if ((data === null || data === undefined ? undefined : data.length) === 0) {
43310
43313
  return /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
@@ -43383,6 +43386,7 @@ var TableColumn = function TableColumn(columnProps) {
43383
43386
  options = _ref.options,
43384
43387
  noWrap = _ref.noWrap,
43385
43388
  align = _ref.align,
43389
+ style = _ref.style,
43386
43390
  _ref$fontSize = _ref.fontSize,
43387
43391
  fontSize = _ref$fontSize === undefined ? 'smaller' : _ref$fontSize,
43388
43392
  _ref$className = _ref.className,
@@ -43405,9 +43409,10 @@ var TableColumn = function TableColumn(columnProps) {
43405
43409
  align: align,
43406
43410
  fontSize: fontSize,
43407
43411
  className: className,
43412
+ style: style,
43408
43413
  renderHandler: function renderHandler() {}
43409
43414
  });
43410
- }, [children, noWrap, fontSize, align, filter, options, label, prop, width, className, renderHandler]);
43415
+ }, [children, noWrap, style, fontSize, align, filter, options, label, prop, width, className, renderHandler]);
43411
43416
  return null;
43412
43417
  };
43413
43418
  TableColumn.displayName = 'TableColumn';
@@ -43539,25 +43544,27 @@ function TableComponent(tableProps) {
43539
43544
  margin: '10px'
43540
43545
  },
43541
43546
  className: _JSXStyle.dynamic([["1971279331", [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)]]])
43542
- }, /*#__PURE__*/React.createElement(Tooltip$1, {
43547
+ }, /*#__PURE__*/React.createElement(Tooltip, {
43543
43548
  text: "Previous"
43544
- }, /*#__PURE__*/React.createElement(Button$1, {
43549
+ }, /*#__PURE__*/React.createElement(Button, {
43545
43550
  disabled: !previousCursor,
43546
43551
  onClick: function onClick() {
43547
43552
  return onPreviousPage && onPreviousPage(previousCursor);
43548
43553
  },
43549
43554
  auto: true,
43550
43555
  px: 0.6,
43556
+ scale: 2 / 3,
43551
43557
  iconRight: /*#__PURE__*/React.createElement(ChevronLeft$1, null)
43552
- })), /*#__PURE__*/React.createElement(Tooltip$1, {
43558
+ })), /*#__PURE__*/React.createElement(Tooltip, {
43553
43559
  text: "Next"
43554
- }, /*#__PURE__*/React.createElement(Button$1, {
43560
+ }, /*#__PURE__*/React.createElement(Button, {
43555
43561
  disabled: !nextCursor,
43556
43562
  onClick: function onClick() {
43557
43563
  return onNextPage && onNextPage(nextCursor);
43558
43564
  },
43559
43565
  auto: true,
43560
43566
  px: 0.6,
43567
+ scale: 2 / 3,
43561
43568
  iconRight: /*#__PURE__*/React.createElement(ChevronRight$1, null)
43562
43569
  }))))) : dataLength && viewLength && onPageChange ? /*#__PURE__*/React.createElement("tfoot", {
43563
43570
  className: _JSXStyle.dynamic([["1971279331", [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)]]])
package/dist/table/index.js CHANGED
@@ -4,8 +4,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var React = require('react');
6
6
  var reactDom = require('react-dom');
7
- var Button$1 = require('components/button');
8
- var Tooltip$1 = require('components/tooltip');
9
7
 
10
8
  function _interopNamespaceDefault(e) {
11
9
  var n = Object.create(null);
@@ -19977,18 +19975,21 @@ var TableHead = function TableHead(props) {
19977
19975
  return /*#__PURE__*/React.createElement(React.Fragment, null, colgroup, /*#__PURE__*/React.createElement("thead", {
19978
19976
  className: _JSXStyle.dynamic([["2156261549", [stickyHeader && "\n position: sticky;\n top: 0;\n z-index: 1;\n ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, 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]]])
19979
19977
  }, /*#__PURE__*/React.createElement("tr", {
19978
+ style: {
19979
+ backgroundColor: '#fff'
19980
+ },
19980
19981
  className: _JSXStyle.dynamic([["2156261549", [stickyHeader && "\n position: sticky;\n top: 0;\n z-index: 1;\n ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, 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]]])
19981
19982
  }, columns.map(function (column, index) {
19982
19983
  var _String2;
19983
19984
  var dataName = (_String2 = String(column === null || column === undefined ? undefined : column.label)) === null || _String2 === undefined ? undefined : _String2.replace(' ', '_').toLowerCase();
19984
19985
  return /*#__PURE__*/React.createElement("th", {
19985
- style: {
19986
+ style: _objectSpread2({
19986
19987
  // textAlign: `${column?.align} !important`,
19987
19988
  // paddingLeft: '0.3rem',
19988
19989
  // paddingRight: '0.3rem',
19989
- // color: `${column?.color}`,
19990
+ color: "".concat(column !== null && column !== undefined && column.color ? column === null || column === undefined ? undefined : column.color : '#fff'),
19990
19991
  whiteSpace: column !== null && column !== undefined && column.noWrap ? 'nowrap' : 'normal'
19991
- },
19992
+ }, column === null || column === undefined ? undefined : column.style),
19992
19993
  key: "table-th-".concat(column.prop.toString(), "-").concat(index),
19993
19994
  "data-column": dataName,
19994
19995
  className: _JSXStyle.dynamic([["2156261549", [stickyHeader && "\n position: sticky;\n top: 0;\n z-index: 1;\n ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, 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 || "")
@@ -31735,7 +31736,8 @@ function DataTable(_ref) {
31735
31736
  style: {
31736
31737
  display: 'flex',
31737
31738
  alignItems: 'center',
31738
- gap: '1rem'
31739
+ gap: '1rem',
31740
+ fontSize: 'larger'
31739
31741
  }
31740
31742
  }, children && /*#__PURE__*/React.createElement(Button, {
31741
31743
  auto: true,
@@ -31889,6 +31891,7 @@ function DataTable(_ref) {
31889
31891
  }
31890
31892
  }, COLUMNS.map(function (column, index) {
31891
31893
  return /*#__PURE__*/React.createElement(Table.Column, {
31894
+ style: column === null || column === undefined ? undefined : column.style,
31892
31895
  options: column === null || column === undefined ? undefined : column.options,
31893
31896
  fontSize: column === null || column === undefined ? undefined : column.fontSize,
31894
31897
  key: "".concat(column.id, "-").concat(index),
@@ -31997,7 +32000,7 @@ var TableBody = function TableBody(_ref) {
31997
32000
  }
31998
32001
  }
31999
32002
  },
32000
- className: _JSXStyle.dynamic([["2019708038", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]]) + " " + (useClasses("".concat(rowDraggable ? 'draggable' : 'hover', " ").concat(className)) || "")
32003
+ className: _JSXStyle.dynamic([["787902152", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]]) + " " + (useClasses("".concat(rowDraggable ? 'draggable' : 'hover', " ").concat(className)) || "")
32001
32004
  }, /*#__PURE__*/React.createElement(TableCell, {
32002
32005
  columns: cols,
32003
32006
  row: rw,
@@ -32005,9 +32008,9 @@ var TableBody = function TableBody(_ref) {
32005
32008
  emptyText: emptyText,
32006
32009
  onCellClick: onCell
32007
32010
  })), /*#__PURE__*/React.createElement(_JSXStyle, {
32008
- id: "2019708038",
32011
+ id: "787902152",
32009
32012
  dynamic: [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]
32010
- }, "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;}")));
32013
+ }, "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(2.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;}")));
32011
32014
  }
32012
32015
  if ((data === null || data === undefined ? undefined : data.length) === 0) {
32013
32016
  return /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
@@ -32129,6 +32132,7 @@ var TableColumn = function TableColumn(columnProps) {
32129
32132
  options = _ref.options,
32130
32133
  noWrap = _ref.noWrap,
32131
32134
  align = _ref.align,
32135
+ style = _ref.style,
32132
32136
  _ref$fontSize = _ref.fontSize,
32133
32137
  fontSize = _ref$fontSize === undefined ? 'smaller' : _ref$fontSize,
32134
32138
  _ref$className = _ref.className,
@@ -32151,9 +32155,10 @@ var TableColumn = function TableColumn(columnProps) {
32151
32155
  align: align,
32152
32156
  fontSize: fontSize,
32153
32157
  className: className,
32158
+ style: style,
32154
32159
  renderHandler: function renderHandler() {}
32155
32160
  });
32156
- }, [children, noWrap, fontSize, align, filter, options, label, prop, width, className, renderHandler]);
32161
+ }, [children, noWrap, style, fontSize, align, filter, options, label, prop, width, className, renderHandler]);
32157
32162
  return null;
32158
32163
  };
32159
32164
  TableColumn.displayName = 'TableColumn';
@@ -32592,25 +32597,27 @@ function TableComponent(tableProps) {
32592
32597
  margin: '10px'
32593
32598
  },
32594
32599
  className: _JSXStyle.dynamic([["1971279331", [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)]]])
32595
- }, /*#__PURE__*/React.createElement(Tooltip$1, {
32600
+ }, /*#__PURE__*/React.createElement(Tooltip, {
32596
32601
  text: "Previous"
32597
- }, /*#__PURE__*/React.createElement(Button$1, {
32602
+ }, /*#__PURE__*/React.createElement(Button, {
32598
32603
  disabled: !previousCursor,
32599
32604
  onClick: function onClick() {
32600
32605
  return onPreviousPage && onPreviousPage(previousCursor);
32601
32606
  },
32602
32607
  auto: true,
32603
32608
  px: 0.6,
32609
+ scale: 2 / 3,
32604
32610
  iconRight: /*#__PURE__*/React.createElement(ChevronLeft$1, null)
32605
- })), /*#__PURE__*/React.createElement(Tooltip$1, {
32611
+ })), /*#__PURE__*/React.createElement(Tooltip, {
32606
32612
  text: "Next"
32607
- }, /*#__PURE__*/React.createElement(Button$1, {
32613
+ }, /*#__PURE__*/React.createElement(Button, {
32608
32614
  disabled: !nextCursor,
32609
32615
  onClick: function onClick() {
32610
32616
  return onNextPage && onNextPage(nextCursor);
32611
32617
  },
32612
32618
  auto: true,
32613
32619
  px: 0.6,
32620
+ scale: 2 / 3,
32614
32621
  iconRight: /*#__PURE__*/React.createElement(ChevronRight$1, null)
32615
32622
  }))))) : dataLength && viewLength && onPageChange ? /*#__PURE__*/React.createElement("tfoot", {
32616
32623
  className: _JSXStyle.dynamic([["1971279331", [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)]]])
package/dist/table/table-column.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import React from 'react';
1
+ import React, { CSSProperties } from 'react';
2
2
  import { TableColumnRender, TableDataItemBase } from './table-types';
3
3
  export type TableColumnProps<TableDataItem extends TableDataItemBase> = {
4
4
  prop: keyof TableDataItem;
@@ -9,6 +9,7 @@ export type TableColumnProps<TableDataItem extends TableDataItemBase> = {
9
9
  className?: string;
10
10
  noWrap?: boolean;
11
11
  align?: string;
12
+ style?: CSSProperties;
12
13
  fontSize?: string | number;
13
14
  render?: TableColumnRender<TableDataItem>;
14
15
  };
package/dist/table/table-types.d.ts CHANGED
@@ -1,14 +1,15 @@
1
- import React from 'react';
1
+ import React, { CSSProperties } from 'react';
2
2
  export type TableDataItemBase = Record<string, any>;
3
3
  export type TableColumnRender<Item extends TableDataItemBase> = (value: Item[keyof Item], rowData: Item, rowIndex: number) => JSX.Element | void;
4
4
  export type TableAbstractColumn<TableDataItem> = {
5
+ style: CSSProperties | undefined;
5
6
  prop: keyof TableDataItem;
6
7
  label: React.ReactNode | string;
7
8
  text?: React.ReactNode | string;
8
9
  filter?: string;
9
10
  className: string;
10
11
  width?: number;
11
- align?: string;
12
+ align?: any;
12
13
  color?: string;
13
14
  noWrap?: boolean;
14
15
  fontSize?: string | number;
package/esm/table/data-table.js CHANGED
@@ -192,7 +192,8 @@ function DataTable(_ref) {
192
192
  style: {
193
193
  display: 'flex',
194
194
  alignItems: 'center',
195
- gap: '1rem'
195
+ gap: '1rem',
196
+ fontSize: 'larger'
196
197
  }
197
198
  }, children && /*#__PURE__*/React.createElement(Button, {
198
199
  auto: true,
@@ -346,6 +347,7 @@ function DataTable(_ref) {
346
347
  }
347
348
  }, COLUMNS.map(function (column, index) {
348
349
  return /*#__PURE__*/React.createElement(Table.Column, {
350
+ style: column === null || column === void 0 ? void 0 : column.style,
349
351
  options: column === null || column === void 0 ? void 0 : column.options,
350
352
  fontSize: column === null || column === void 0 ? void 0 : column.fontSize,
351
353
  key: "".concat(column.id, "-").concat(index),
package/esm/table/table-body.js CHANGED
@@ -104,7 +104,7 @@ var TableBody = function TableBody(_ref) {
104
104
  }
105
105
  }
106
106
  },
107
- className: _JSXStyle.dynamic([["2019708038", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]]) + " " + (useClasses("".concat(rowDraggable ? 'draggable' : 'hover', " ").concat(className)) || "")
107
+ className: _JSXStyle.dynamic([["787902152", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]]) + " " + (useClasses("".concat(rowDraggable ? 'draggable' : 'hover', " ").concat(className)) || "")
108
108
  }, /*#__PURE__*/React.createElement(TableCell, {
109
109
  columns: cols,
110
110
  row: rw,
@@ -112,9 +112,9 @@ var TableBody = function TableBody(_ref) {
112
112
  emptyText: emptyText,
113
113
  onCellClick: onCell
114
114
  })), /*#__PURE__*/React.createElement(_JSXStyle, {
115
- id: "2019708038",
115
+ id: "787902152",
116
116
  dynamic: [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]
117
- }, "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;}")));
117
+ }, "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(2.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;}")));
118
118
  }
119
119
  if ((data === null || data === void 0 ? void 0 : data.length) === 0) {
120
120
  return /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
package/esm/table/table-column.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import React from 'react';
1
+ import React, { CSSProperties } from 'react';
2
2
  import { TableColumnRender, TableDataItemBase } from './table-types';
3
3
  export type TableColumnProps<TableDataItem extends TableDataItemBase> = {
4
4
  prop: keyof TableDataItem;
@@ -9,6 +9,7 @@ export type TableColumnProps<TableDataItem extends TableDataItemBase> = {
9
9
  className?: string;
10
10
  noWrap?: boolean;
11
11
  align?: string;
12
+ style?: CSSProperties;
12
13
  fontSize?: string | number;
13
14
  render?: TableColumnRender<TableDataItem>;
14
15
  };
package/esm/table/table-column.js CHANGED
@@ -13,6 +13,7 @@ var TableColumn = function TableColumn(columnProps) {
13
13
  options = _ref.options,
14
14
  noWrap = _ref.noWrap,
15
15
  align = _ref.align,
16
+ style = _ref.style,
16
17
  _ref$fontSize = _ref.fontSize,
17
18
  fontSize = _ref$fontSize === void 0 ? 'smaller' : _ref$fontSize,
18
19
  _ref$className = _ref.className,
@@ -35,9 +36,10 @@ var TableColumn = function TableColumn(columnProps) {
35
36
  align: align,
36
37
  fontSize: fontSize,
37
38
  className: className,
39
+ style: style,
38
40
  renderHandler: function renderHandler() {}
39
41
  });
40
- }, [children, noWrap, fontSize, align, filter, options, label, prop, width, className, renderHandler]);
42
+ }, [children, noWrap, style, fontSize, align, filter, options, label, prop, width, className, renderHandler]);
41
43
  return null;
42
44
  };
43
45
  TableColumn.displayName = 'TableColumn';
package/esm/table/table-head.js CHANGED
@@ -129,18 +129,21 @@ var TableHead = function TableHead(props) {
129
129
  return /*#__PURE__*/React.createElement(React.Fragment, null, colgroup, /*#__PURE__*/React.createElement("thead", {
130
130
  className: _JSXStyle.dynamic([["2156261549", [stickyHeader && "\n position: sticky;\n top: 0;\n z-index: 1;\n ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, 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]]])
131
131
  }, /*#__PURE__*/React.createElement("tr", {
132
+ style: {
133
+ backgroundColor: '#fff'
134
+ },
132
135
  className: _JSXStyle.dynamic([["2156261549", [stickyHeader && "\n position: sticky;\n top: 0;\n z-index: 1;\n ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, 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]]])
133
136
  }, columns.map(function (column, index) {
134
137
  var _String2;
135
138
  var dataName = (_String2 = String(column === null || column === void 0 ? void 0 : column.label)) === null || _String2 === void 0 ? void 0 : _String2.replace(' ', '_').toLowerCase();
136
139
  return /*#__PURE__*/React.createElement("th", {
137
- style: {
140
+ style: _extends({
138
141
  // textAlign: `${column?.align} !important`,
139
142
  // paddingLeft: '0.3rem',
140
143
  // paddingRight: '0.3rem',
141
- // color: `${column?.color}`,
144
+ color: "".concat(column !== null && column !== void 0 && column.color ? column === null || column === void 0 ? void 0 : column.color : '#fff'),
142
145
  whiteSpace: column !== null && column !== void 0 && column.noWrap ? 'nowrap' : 'normal'
143
- },
146
+ }, column === null || column === void 0 ? void 0 : column.style),
144
147
  key: "table-th-".concat(column.prop.toString(), "-").concat(index),
145
148
  "data-column": dataName,
146
149
  className: _JSXStyle.dynamic([["2156261549", [stickyHeader && "\n position: sticky;\n top: 0;\n z-index: 1;\n ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, 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 || "")
package/esm/table/table-types.d.ts CHANGED
@@ -1,14 +1,15 @@
1
- import React from 'react';
1
+ import React, { CSSProperties } from 'react';
2
2
  export type TableDataItemBase = Record<string, any>;
3
3
  export type TableColumnRender<Item extends TableDataItemBase> = (value: Item[keyof Item], rowData: Item, rowIndex: number) => JSX.Element | void;
4
4
  export type TableAbstractColumn<TableDataItem> = {
5
+ style: CSSProperties | undefined;
5
6
  prop: keyof TableDataItem;
6
7
  label: React.ReactNode | string;
7
8
  text?: React.ReactNode | string;
8
9
  filter?: string;
9
10
  className: string;
10
11
  width?: number;
11
- align?: string;
12
+ align?: any;
12
13
  color?: string;
13
14
  noWrap?: boolean;
14
15
  fontSize?: string | number;
package/esm/table/table.js CHANGED
@@ -16,8 +16,8 @@ import useScale, { withScale } from '../use-scale';
16
16
  import TableColumn from './table-column';
17
17
  import { ChevronLeft, ChevronRight } from '@helpdice/icons';
18
18
  import Pagination from '../pagination';
19
- import Button from 'components/button';
20
- import Tooltip from 'components/tooltip';
19
+ import Button from '../button';
20
+ import Tooltip from '../tooltip';
21
21
  function TableComponent(tableProps) {
22
22
  /* eslint-disable @typescript-eslint/no-unused-vars */
23
23
  var _ref = tableProps,
@@ -154,6 +154,7 @@ function TableComponent(tableProps) {
154
154
  },
155
155
  auto: true,
156
156
  px: 0.6,
157
+ scale: 2 / 3,
157
158
  iconRight: /*#__PURE__*/React.createElement(ChevronLeft, null)
158
159
  })), /*#__PURE__*/React.createElement(Tooltip, {
159
160
  text: "Next"
@@ -164,6 +165,7 @@ function TableComponent(tableProps) {
164
165
  },
165
166
  auto: true,
166
167
  px: 0.6,
168
+ scale: 2 / 3,
167
169
  iconRight: /*#__PURE__*/React.createElement(ChevronRight, null)
168
170
  }))))) : dataLength && viewLength && onPageChange ? /*#__PURE__*/React.createElement("tfoot", {
169
171
  className: _JSXStyle.dynamic([["1971279331", [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)]]])
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@helpdice/ui",
3
- "version": "1.4.2",
3
+ "version": "1.4.4",
4
4
  "main": "dist/index.js",
5
5
  "types": "esm/index.d.ts",
6
6
  "unpkg": "dist/index.min.js",