@helpdice/ui 1.2.7 → 1.2.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
@@ -2,6 +2,8 @@
2
2
 
3
3
  var React = require('react');
4
4
  var reactDom = require('react-dom');
5
+ var Select$1 = require('components/select');
6
+ var Input$1 = require('components/input');
5
7
  var require$$0 = require('react-is');
6
8
  var isEqual = require('react-fast-compare');
7
9
 
@@ -24878,6 +24880,113 @@ var SpinnerComponent = function SpinnerComponent(_ref) {
24878
24880
  SpinnerComponent.displayName = 'Spinner';
24879
24881
  var Spinner = withScale(SpinnerComponent);
24880
24882
 
24883
+ var makeColgroup = function makeColgroup(width, columns) {
24884
+ var unsetWidthCount = columns.filter(function (c) {
24885
+ return !c.width;
24886
+ }).length;
24887
+ var customWidthTotal = columns.reduce(function (pre, current) {
24888
+ return current.width ? pre + current.width : pre;
24889
+ }, 0);
24890
+ var averageWidth = (width - customWidthTotal) / unsetWidthCount;
24891
+ if (averageWidth <= 0) return /*#__PURE__*/React.createElement("colgroup", null);
24892
+ return /*#__PURE__*/React.createElement("colgroup", null, columns.map(function (column, index) {
24893
+ return /*#__PURE__*/React.createElement("col", {
24894
+ key: "colgroup-".concat(index),
24895
+ width: column.width || averageWidth
24896
+ });
24897
+ }));
24898
+ };
24899
+ var TableHead = function TableHead(props) {
24900
+ var theme = useTheme();
24901
+ var _ref = props,
24902
+ columns = _ref.columns,
24903
+ width = _ref.width;
24904
+ var isScalableWidth = React.useMemo(function () {
24905
+ return columns.find(function (item) {
24906
+ return !!item.width;
24907
+ });
24908
+ }, [columns]);
24909
+ var colgroup = React.useMemo(function () {
24910
+ if (!isScalableWidth) return /*#__PURE__*/React.createElement("colgroup", null);
24911
+ return makeColgroup(width, columns);
24912
+ }, [isScalableWidth, width]);
24913
+ return /*#__PURE__*/React.createElement(React.Fragment, null, colgroup, /*#__PURE__*/React.createElement("thead", {
24914
+ className: _JSXStyle.dynamic([["134865897", [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]]])
24915
+ }, /*#__PURE__*/React.createElement("tr", {
24916
+ className: _JSXStyle.dynamic([["134865897", [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]]])
24917
+ }, columns.map(function (column, index) {
24918
+ return /*#__PURE__*/React.createElement("th", {
24919
+ style: {
24920
+ // textAlign: `${column?.align} !important`,
24921
+ // paddingLeft: '0.3rem',
24922
+ // paddingRight: '0.3rem',
24923
+ // color: `${column?.color}`,
24924
+ whiteSpace: column !== null && column !== undefined && column.noWrap ? 'nowrap' : 'normal'
24925
+ },
24926
+ key: "table-th-".concat(column.prop.toString(), "-").concat(index),
24927
+ "data-column": column.label,
24928
+ className: _JSXStyle.dynamic([["134865897", [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 || "")
24929
+ }, /*#__PURE__*/React.createElement("div", {
24930
+ className: _JSXStyle.dynamic([["134865897", [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]]]) + " " + "thead-box"
24931
+ }, column.label, /*#__PURE__*/React.createElement("br", {
24932
+ className: _JSXStyle.dynamic([["134865897", [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]]])
24933
+ }), /*#__PURE__*/React.createElement("span", {
24934
+ style: {
24935
+ textAlign: 'center'
24936
+ },
24937
+ className: _JSXStyle.dynamic([["134865897", [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]]])
24938
+ }, column.text)));
24939
+ }))), /*#__PURE__*/React.createElement(_JSXStyle, {
24940
+ id: "134865897",
24941
+ dynamic: [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]
24942
+ }, "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;}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;}")));
24943
+ };
24944
+ TableHead.displayName = 'TableHead';
24945
+
24946
+ var TableCell = function TableCell(_ref) {
24947
+ var columns = _ref.columns,
24948
+ row = _ref.row,
24949
+ rowIndex = _ref.rowIndex,
24950
+ emptyText = _ref.emptyText,
24951
+ onCellClick = _ref.onCellClick;
24952
+ /* eslint-disable react/jsx-no-useless-fragment */
24953
+ return /*#__PURE__*/React.createElement(React.Fragment, null, columns.map(function (column, index) {
24954
+ var currentRowValue = row[column.prop];
24955
+ var cellValue = currentRowValue || emptyText;
24956
+ var shouldBeRenderElement = column.renderHandler(currentRowValue, row, rowIndex);
24957
+ return /*#__PURE__*/React.createElement("td", {
24958
+ style: _objectSpread2({
24959
+ fontSize: "".concat(column === null || column === undefined ? undefined : column.fontSize),
24960
+ textAlign: "".concat(column === null || column === undefined ? undefined : column.align, " !important"),
24961
+ paddingLeft: '0.3rem',
24962
+ paddingRight: '0.3rem',
24963
+ color: "".concat(column === null || column === undefined ? undefined : column.color),
24964
+ whiteSpace: column !== null && column !== undefined && column.noWrap ? 'nowrap' : 'normal'
24965
+ }, currentRowValue === null || currentRowValue === undefined ? undefined : currentRowValue.style),
24966
+ "data-column": column.label,
24967
+ key: "row-td-".concat(index, "-").concat(column.prop.toString()),
24968
+ onClick: function onClick() {
24969
+ return onCellClick && onCellClick(currentRowValue, rowIndex, index);
24970
+ },
24971
+ className: column.className
24972
+ }, /*#__PURE__*/React.createElement("div", {
24973
+ className: "cell"
24974
+ }, shouldBeRenderElement ? shouldBeRenderElement : cellValue));
24975
+ }));
24976
+ /* eslint-enable */
24977
+ };
24978
+
24979
+ /* "use client" */
24980
+
24981
+ var defaultContext$2 = {
24982
+ columns: [],
24983
+ updateColumn: function updateColumn() {}
24984
+ };
24985
+ var TableContext = /*#__PURE__*/React.createContext(defaultContext$2);
24986
+ var useTableContext = function useTableContext() {
24987
+ return React.useContext(TableContext);
24988
+ };
24989
+
24881
24990
  var lodash$1 = {exports: {}};
24882
24991
 
24883
24992
  /**
@@ -42090,187 +42199,6 @@ function requireLodash () {
42090
42199
  var lodashExports = requireLodash();
42091
42200
  var _ = /*@__PURE__*/getDefaultExportFromCjs(lodashExports);
42092
42201
 
42093
- var makeColgroup = function makeColgroup(width, columns) {
42094
- var unsetWidthCount = columns.filter(function (c) {
42095
- return !c.width;
42096
- }).length;
42097
- var customWidthTotal = columns.reduce(function (pre, current) {
42098
- return current.width ? pre + current.width : pre;
42099
- }, 0);
42100
- var averageWidth = (width - customWidthTotal) / unsetWidthCount;
42101
- if (averageWidth <= 0) return /*#__PURE__*/React.createElement("colgroup", null);
42102
- return /*#__PURE__*/React.createElement("colgroup", null, columns.map(function (column, index) {
42103
- return /*#__PURE__*/React.createElement("col", {
42104
- key: "colgroup-".concat(index),
42105
- width: column.width || averageWidth
42106
- });
42107
- }));
42108
- };
42109
- var TableHead = function TableHead(props) {
42110
- var theme = useTheme();
42111
- var _React$useState = React.useState({}),
42112
- _React$useState2 = _slicedToArray(_React$useState, 2),
42113
- filters = _React$useState2[0],
42114
- setFilters = _React$useState2[1];
42115
- var _ref = props,
42116
- columns = _ref.columns,
42117
- width = _ref.width,
42118
- onFilters = _ref.onFilters,
42119
- showFilters = _ref.showFilters;
42120
- var isScalableWidth = React.useMemo(function () {
42121
- return columns.find(function (item) {
42122
- return !!item.width;
42123
- });
42124
- }, [columns]);
42125
- var colgroup = React.useMemo(function () {
42126
- if (!isScalableWidth) return /*#__PURE__*/React.createElement("colgroup", null);
42127
- return makeColgroup(width, columns);
42128
- }, [isScalableWidth, width]);
42129
- var handleFilterChange = function handleFilterChange(name, value) {
42130
- setFilters(function (prevFilters) {
42131
- var updatedFilters = _objectSpread2(_objectSpread2({}, prevFilters), {}, _defineProperty$1({}, name, value));
42132
- // Call onFiltersChange to propagate filter changes to the parent
42133
- if (onFilters) {
42134
- onFilters(updatedFilters);
42135
- }
42136
- return updatedFilters;
42137
- });
42138
- };
42139
- var generateFilterInputs = function generateFilterInputs() {
42140
- return columns.map(function (col) {
42141
- var _String, _filters$filterName;
42142
- var Header = col.label,
42143
- accessor = col.filter,
42144
- options = col.options;
42145
- var filterName = (_String = String(col === null || col === undefined ? undefined : col.label)) === null || _String === undefined ? undefined : _String.replace(' ', '_').toLowerCase();
42146
- var unq_accessor = _.uniqueId(filterName);
42147
- return /*#__PURE__*/React.createElement("th", {
42148
- style: {
42149
- margin: '3px'
42150
- },
42151
- "data-column": Header,
42152
- key: unq_accessor
42153
- }, accessor === 'fixed' && /*#__PURE__*/React.createElement(Select, {
42154
- key: unq_accessor,
42155
- name: filterName,
42156
- value: (_filters$filterName = filters[filterName]) !== null && _filters$filterName !== undefined ? _filters$filterName : 'All',
42157
- onChange: function onChange(newValue) {
42158
- return handleFilterChange(filterName, newValue);
42159
- }
42160
- }, /*#__PURE__*/React.createElement(Select.Option, {
42161
- value: "All"
42162
- }, "All ", Header), options ? options.map(function (option) {
42163
- return /*#__PURE__*/React.createElement(Select.Option, {
42164
- value: option.value
42165
- }, option.name);
42166
- }) : null), accessor === 'date' && /*#__PURE__*/React.createElement(Input, {
42167
- id: "filter-date-".concat(filterName),
42168
- htmlType: "date",
42169
- name: filterName,
42170
- value: filters[filterName],
42171
- onChange: function onChange(e) {
42172
- return handleFilterChange(filterName, e.target.value);
42173
- }
42174
- }), accessor === 'search' && /*#__PURE__*/React.createElement("th", {
42175
- "data-column": Header
42176
- }, /*#__PURE__*/React.createElement(Input, {
42177
- id: "filter-search-".concat(filterName),
42178
- htmlType: "text"
42179
- // ref={filterRefs.current[filterName]} // Dynamically set ref}
42180
- ,
42181
- name: filterName,
42182
- style: {
42183
- height: 30,
42184
- minWidth: 160
42185
- },
42186
- value: filters[filterName],
42187
- onChange: function onChange(e) {
42188
- return handleFilterChange(filterName, e.target.value);
42189
- },
42190
- placeholder: "Search...",
42191
- fullWidth: true
42192
- })));
42193
- });
42194
- };
42195
- return /*#__PURE__*/React.createElement(React.Fragment, null, colgroup, /*#__PURE__*/React.createElement("thead", {
42196
- className: _JSXStyle.dynamic([["134865897", [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]]])
42197
- }, /*#__PURE__*/React.createElement("tr", {
42198
- className: _JSXStyle.dynamic([["134865897", [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]]])
42199
- }, columns.map(function (column, index) {
42200
- return /*#__PURE__*/React.createElement("th", {
42201
- style: {
42202
- // textAlign: `${column?.align} !important`,
42203
- // paddingLeft: '0.3rem',
42204
- // paddingRight: '0.3rem',
42205
- // color: `${column?.color}`,
42206
- whiteSpace: column !== null && column !== undefined && column.noWrap ? 'nowrap' : 'normal'
42207
- },
42208
- key: "table-th-".concat(column.prop.toString(), "-").concat(index),
42209
- "data-column": column.label,
42210
- className: _JSXStyle.dynamic([["134865897", [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 || "")
42211
- }, /*#__PURE__*/React.createElement("div", {
42212
- className: _JSXStyle.dynamic([["134865897", [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]]]) + " " + "thead-box"
42213
- }, column.label, /*#__PURE__*/React.createElement("br", {
42214
- className: _JSXStyle.dynamic([["134865897", [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]]])
42215
- }), /*#__PURE__*/React.createElement("span", {
42216
- style: {
42217
- textAlign: 'center'
42218
- },
42219
- className: _JSXStyle.dynamic([["134865897", [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]]])
42220
- }, column.text)));
42221
- })), showFilters && /*#__PURE__*/React.createElement("tr", {
42222
- className: _JSXStyle.dynamic([["134865897", [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
- }, generateFilterInputs())), /*#__PURE__*/React.createElement(_JSXStyle, {
42224
- id: "134865897",
42225
- dynamic: [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]
42226
- }, "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;}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;}")));
42227
- };
42228
- TableHead.displayName = 'TableHead';
42229
-
42230
- var TableCell = function TableCell(_ref) {
42231
- var columns = _ref.columns,
42232
- row = _ref.row,
42233
- rowIndex = _ref.rowIndex,
42234
- emptyText = _ref.emptyText,
42235
- onCellClick = _ref.onCellClick;
42236
- /* eslint-disable react/jsx-no-useless-fragment */
42237
- return /*#__PURE__*/React.createElement(React.Fragment, null, columns.map(function (column, index) {
42238
- var currentRowValue = row[column.prop];
42239
- var cellValue = currentRowValue || emptyText;
42240
- var shouldBeRenderElement = column.renderHandler(currentRowValue, row, rowIndex);
42241
- return /*#__PURE__*/React.createElement("td", {
42242
- style: _objectSpread2({
42243
- fontSize: "".concat(column === null || column === undefined ? undefined : column.fontSize),
42244
- textAlign: "".concat(column === null || column === undefined ? undefined : column.align, " !important"),
42245
- paddingLeft: '0.3rem',
42246
- paddingRight: '0.3rem',
42247
- color: "".concat(column === null || column === undefined ? undefined : column.color),
42248
- whiteSpace: column !== null && column !== undefined && column.noWrap ? 'nowrap' : 'normal'
42249
- }, currentRowValue === null || currentRowValue === undefined ? undefined : currentRowValue.style),
42250
- "data-column": column.label,
42251
- key: "row-td-".concat(index, "-").concat(column.prop.toString()),
42252
- onClick: function onClick() {
42253
- return onCellClick && onCellClick(currentRowValue, rowIndex, index);
42254
- },
42255
- className: column.className
42256
- }, /*#__PURE__*/React.createElement("div", {
42257
- className: "cell"
42258
- }, shouldBeRenderElement ? shouldBeRenderElement : cellValue));
42259
- }));
42260
- /* eslint-enable */
42261
- };
42262
-
42263
- /* "use client" */
42264
-
42265
- var defaultContext$2 = {
42266
- columns: [],
42267
- updateColumn: function updateColumn() {}
42268
- };
42269
- var TableContext = /*#__PURE__*/React.createContext(defaultContext$2);
42270
- var useTableContext = function useTableContext() {
42271
- return React.useContext(TableContext);
42272
- };
42273
-
42274
42202
  var TableBody = function TableBody(_ref) {
42275
42203
  var data = _ref.data,
42276
42204
  emptyText = _ref.emptyText,
@@ -42525,6 +42453,10 @@ function TableComponent(tableProps) {
42525
42453
  updateColumn: updateColumn
42526
42454
  };
42527
42455
  }, [columns]);
42456
+ var _React$useState = React.useState({}),
42457
+ _React$useState2 = _slicedToArray(_React$useState, 2),
42458
+ filters = _React$useState2[0],
42459
+ setFilters = _React$useState2[1];
42528
42460
  React.useEffect(function () {
42529
42461
  if (typeof customData === 'undefined') return;
42530
42462
  setData(customData);
@@ -42532,16 +42464,82 @@ function TableComponent(tableProps) {
42532
42464
  useResize(function () {
42533
42465
  return updateShape();
42534
42466
  });
42467
+ var handleFilterChange = function handleFilterChange(name, value) {
42468
+ setFilters(function (prevFilters) {
42469
+ var updatedFilters = _objectSpread2(_objectSpread2({}, prevFilters), {}, _defineProperty$1({}, name, value));
42470
+ // Call onFiltersChange to propagate filter changes to the parent
42471
+ if (onFilters) {
42472
+ onFilters(updatedFilters);
42473
+ }
42474
+ return updatedFilters;
42475
+ });
42476
+ };
42477
+ var generateFilterInputs = function generateFilterInputs() {
42478
+ return columns.map(function (col) {
42479
+ var _String, _filters$filterName;
42480
+ var Header = col.label,
42481
+ accessor = col.filter,
42482
+ options = col.options;
42483
+ var filterName = (_String = String(col === null || col === undefined ? undefined : col.label)) === null || _String === undefined ? undefined : _String.replace(' ', '_').toLowerCase();
42484
+ var unq_accessor = _.uniqueId(filterName);
42485
+ return /*#__PURE__*/React.createElement("div", {
42486
+ style: {
42487
+ margin: '3px'
42488
+ },
42489
+ "data-column": Header,
42490
+ key: unq_accessor
42491
+ }, accessor === 'fixed' && /*#__PURE__*/React.createElement(Select$1, {
42492
+ key: unq_accessor,
42493
+ name: filterName,
42494
+ value: (_filters$filterName = filters[filterName]) !== null && _filters$filterName !== undefined ? _filters$filterName : 'All',
42495
+ onChange: function onChange(newValue) {
42496
+ return handleFilterChange(filterName, newValue);
42497
+ }
42498
+ }, /*#__PURE__*/React.createElement(Select$1.Option, {
42499
+ value: "All"
42500
+ }, "All ", Header), options ? options.map(function (option) {
42501
+ return /*#__PURE__*/React.createElement(Select$1.Option, {
42502
+ value: option.value
42503
+ }, option.name);
42504
+ }) : null), accessor === 'date' && /*#__PURE__*/React.createElement(Input$1, {
42505
+ id: "filter-date-".concat(filterName),
42506
+ htmlType: "date",
42507
+ name: filterName,
42508
+ value: filters[filterName],
42509
+ onChange: function onChange(e) {
42510
+ return handleFilterChange(filterName, e.target.value);
42511
+ }
42512
+ }), accessor === 'search' && /*#__PURE__*/React.createElement(Input$1, {
42513
+ id: "filter-search-".concat(filterName),
42514
+ htmlType: "text",
42515
+ autoComplete: "off",
42516
+ name: filterName,
42517
+ style: {
42518
+ height: 30,
42519
+ minWidth: 160
42520
+ },
42521
+ value: filters[filterName],
42522
+ onChange: function onChange(e) {
42523
+ return handleFilterChange(filterName, e.target.value);
42524
+ },
42525
+ placeholder: "Search...",
42526
+ fullWidth: true
42527
+ }));
42528
+ });
42529
+ };
42535
42530
  return /*#__PURE__*/React.createElement(TableContext.Provider, {
42536
42531
  value: contextValue
42537
- }, /*#__PURE__*/React.createElement("table", _extends({
42532
+ }, showFilters && /*#__PURE__*/React.createElement("div", {
42533
+ style: {
42534
+ display: 'flex',
42535
+ gap: 6
42536
+ }
42537
+ }, generateFilterInputs()), /*#__PURE__*/React.createElement("table", _extends({
42538
42538
  ref: ref
42539
42539
  }, props, {
42540
42540
  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 || "")
42541
42541
  }), /*#__PURE__*/React.createElement(TableHead, {
42542
42542
  columns: columns,
42543
- onFilters: onFilters,
42544
- showFilters: showFilters,
42545
42543
  width: width
42546
42544
  }), /*#__PURE__*/React.createElement(TableBody, {
42547
42545
  data: data,