qbs-react-grid 2.2.3 → 2.2.5

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 (100) hide show
  1. package/dist/css/qbs-react-grid.css +1 -1
  2. package/dist/css/qbs-react-grid.min.css +1 -1
  3. package/dist/css/qbs-react-grid.min.css.map +1 -1
  4. package/es/Cell.js +1 -2
  5. package/es/Pagination.d.ts +0 -3
  6. package/es/Pagination.js +3 -8
  7. package/es/Table.d.ts +0 -3
  8. package/es/Table.js +12 -18
  9. package/es/index.d.ts +1 -1
  10. package/es/less/pagination.less +9 -9
  11. package/es/less/qbs-table.less +73 -205
  12. package/es/qbsTable/CustomTableCell.js +2 -13
  13. package/es/qbsTable/QbsTable.js +46 -124
  14. package/es/qbsTable/TableCardList.js +39 -52
  15. package/es/qbsTable/Toolbar.js +13 -62
  16. package/es/qbsTable/commontypes.d.ts +2 -30
  17. package/es/qbsTable/utilities/CardComponent.d.ts +0 -2
  18. package/es/qbsTable/utilities/CardComponent.js +3 -7
  19. package/es/qbsTable/utilities/CardMenuDropdown.d.ts +0 -2
  20. package/es/qbsTable/utilities/CardMenuDropdown.js +7 -7
  21. package/es/qbsTable/utilities/ColumShowHide.d.ts +0 -4
  22. package/es/qbsTable/utilities/ColumShowHide.js +6 -9
  23. package/es/qbsTable/utilities/SearchInput.d.ts +0 -1
  24. package/es/qbsTable/utilities/SearchInput.js +1 -3
  25. package/es/qbsTable/utilities/ToolTip.d.ts +1 -8
  26. package/es/qbsTable/utilities/ToolTip.js +31 -107
  27. package/es/qbsTable/utilities/empty.js +1 -1
  28. package/es/qbsTable/utilities/icons.d.ts +0 -3
  29. package/es/qbsTable/utilities/icons.js +1 -65
  30. package/es/qbsTable/utilities/tablecalc.d.ts +1 -1
  31. package/es/qbsTable/utilities/tablecalc.js +2 -7
  32. package/es/utils/useCellDescriptor.js +1 -0
  33. package/es/utils/useScrollListener.d.ts +0 -1
  34. package/es/utils/useScrollListener.js +3 -5
  35. package/lib/Cell.js +1 -2
  36. package/lib/Pagination.d.ts +0 -3
  37. package/lib/Pagination.js +3 -8
  38. package/lib/Table.d.ts +0 -3
  39. package/lib/Table.js +12 -18
  40. package/lib/index.d.ts +1 -1
  41. package/lib/less/pagination.less +9 -9
  42. package/lib/less/qbs-table.less +73 -205
  43. package/lib/qbsTable/CustomTableCell.js +2 -13
  44. package/lib/qbsTable/QbsTable.js +46 -124
  45. package/lib/qbsTable/TableCardList.js +39 -52
  46. package/lib/qbsTable/Toolbar.js +12 -61
  47. package/lib/qbsTable/commontypes.d.ts +2 -30
  48. package/lib/qbsTable/utilities/CardComponent.d.ts +0 -2
  49. package/lib/qbsTable/utilities/CardComponent.js +3 -7
  50. package/lib/qbsTable/utilities/CardMenuDropdown.d.ts +0 -2
  51. package/lib/qbsTable/utilities/CardMenuDropdown.js +5 -6
  52. package/lib/qbsTable/utilities/ColumShowHide.d.ts +0 -4
  53. package/lib/qbsTable/utilities/ColumShowHide.js +6 -9
  54. package/lib/qbsTable/utilities/SearchInput.d.ts +0 -1
  55. package/lib/qbsTable/utilities/SearchInput.js +1 -3
  56. package/lib/qbsTable/utilities/ToolTip.d.ts +1 -8
  57. package/lib/qbsTable/utilities/ToolTip.js +30 -107
  58. package/lib/qbsTable/utilities/empty.js +1 -1
  59. package/lib/qbsTable/utilities/icons.d.ts +0 -3
  60. package/lib/qbsTable/utilities/icons.js +3 -70
  61. package/lib/qbsTable/utilities/tablecalc.d.ts +1 -1
  62. package/lib/qbsTable/utilities/tablecalc.js +2 -7
  63. package/lib/utils/useCellDescriptor.js +1 -0
  64. package/lib/utils/useScrollListener.d.ts +0 -1
  65. package/lib/utils/useScrollListener.js +3 -5
  66. package/package.json +2 -2
  67. package/src/Cell.tsx +1 -3
  68. package/src/HeaderCell.tsx +1 -0
  69. package/src/Pagination.tsx +3 -10
  70. package/src/Table.tsx +10 -23
  71. package/src/customSelect.tsx +88 -88
  72. package/src/index.ts +1 -1
  73. package/src/less/pagination.less +9 -9
  74. package/src/less/qbs-table.less +73 -205
  75. package/src/qbsTable/CustomTableCell.tsx +9 -31
  76. package/src/qbsTable/QbsTable.tsx +25 -101
  77. package/src/qbsTable/TableCardList.tsx +19 -35
  78. package/src/qbsTable/Toolbar.tsx +11 -53
  79. package/src/qbsTable/commontypes.ts +1 -32
  80. package/src/qbsTable/utilities/CardComponent.tsx +2 -7
  81. package/src/qbsTable/utilities/CardMenuDropdown.tsx +6 -11
  82. package/src/qbsTable/utilities/ColumShowHide.tsx +6 -33
  83. package/src/qbsTable/utilities/SearchInput.tsx +1 -3
  84. package/src/qbsTable/utilities/ToolTip.tsx +27 -138
  85. package/src/qbsTable/utilities/empty.tsx +2 -2
  86. package/src/qbsTable/utilities/icons.tsx +1 -78
  87. package/src/qbsTable/utilities/tablecalc.ts +2 -8
  88. package/src/utils/useCellDescriptor.ts +1 -0
  89. package/src/utils/useScrollListener.ts +3 -13
  90. package/src/utils/useTableRows.ts +1 -1
  91. package/es/qbsTable/labels.d.ts +0 -48
  92. package/es/qbsTable/labels.js +0 -34
  93. package/es/qbsTable/utilities/VerticalDropDownMenu.d.ts +0 -13
  94. package/es/qbsTable/utilities/VerticalDropDownMenu.js +0 -166
  95. package/lib/qbsTable/labels.d.ts +0 -48
  96. package/lib/qbsTable/labels.js +0 -42
  97. package/lib/qbsTable/utilities/VerticalDropDownMenu.d.ts +0 -13
  98. package/lib/qbsTable/utilities/VerticalDropDownMenu.js +0 -174
  99. package/src/qbsTable/labels.ts +0 -58
  100. package/src/qbsTable/utilities/VerticalDropDownMenu.tsx +0 -187
@@ -6,9 +6,7 @@ import ColumnGroup from '../ColumnGroup';
6
6
  import HeaderCell from '../HeaderCell';
7
7
  import Pagination from '../Pagination';
8
8
  import Table from '../Table';
9
- import isRTL from '../utils/isRTL';
10
9
  import useResponsiveStore from '../utils/useResponsiveStore';
11
- import { mergeLabels } from './labels';
12
10
  import { ActionCell, CheckCell, CustomRowStatus, CustomTableCell, ExpandCell } from './CustomTableCell';
13
11
  import ToolBar from './Toolbar';
14
12
  import CardComponent from './utilities/CardComponent';
@@ -24,7 +22,6 @@ import { SettingsIcon } from './utilities/icons';
24
22
  import '../../dist/css/qbs-react-grid.css';
25
23
  var CHECKBOX_LINE_HEIGHT = '36px';
26
24
  var COLUMN_WIDTH = 250;
27
- var REFRESH_KEY = 0;
28
25
  var QbsTable = function QbsTable(_ref) {
29
26
  var _Object$keys;
30
27
  var handleColumnSort = _ref.handleColumnSort,
@@ -55,7 +52,7 @@ var QbsTable = function QbsTable(_ref) {
55
52
  _ref$height = _ref.height,
56
53
  height = _ref$height === void 0 ? 630 : _ref$height,
57
54
  onExpandChange = _ref.onExpandChange,
58
- propsWordWrap = _ref.wordWrap,
55
+ wordWrap = _ref.wordWrap,
59
56
  _ref$dataRowKey = _ref.dataRowKey,
60
57
  dataRowKey = _ref$dataRowKey === void 0 ? 'id' : _ref$dataRowKey,
61
58
  defaultExpandAllRows = _ref.defaultExpandAllRows,
@@ -67,7 +64,6 @@ var QbsTable = function QbsTable(_ref) {
67
64
  _ref$actionProps = _ref.actionProps,
68
65
  actionProps = _ref$actionProps === void 0 ? [] : _ref$actionProps,
69
66
  theme = _ref.theme,
70
- rtlProp = _ref.rtl,
71
67
  handleMenuActions = _ref.handleMenuActions,
72
68
  onRowClick = _ref.onRowClick,
73
69
  expandedRowKeys = _ref.expandedRowKeys,
@@ -110,31 +106,7 @@ var QbsTable = function QbsTable(_ref) {
110
106
  _ref$isCustomTableCar = _ref.isCustomTableCardView,
111
107
  isCustomTableCardView = _ref$isCustomTableCar === void 0 ? false : _ref$isCustomTableCar,
112
108
  handleTableCardView = _ref.handleTableCardView,
113
- handleCustomCardLoader = _ref.handleCustomCardLoader,
114
- hasMoreData = _ref.hasMoreData,
115
- loadMoreData = _ref.loadMoreData,
116
- infiniteLoading = _ref.infiniteLoading,
117
- _ref$infiniteScroll = _ref.infiniteScroll,
118
- infiniteScroll = _ref$infiniteScroll === void 0 ? false : _ref$infiniteScroll,
119
- propsViewMode = _ref.viewMode,
120
- _ref$rowViewToggle = _ref.rowViewToggle,
121
- rowViewToggle = _ref$rowViewToggle === void 0 ? false : _ref$rowViewToggle,
122
- _ref$defaultRowView = _ref.defaultRowView,
123
- defaultRowView = _ref$defaultRowView === void 0 ? true : _ref$defaultRowView,
124
- _ref$fullWidthView = _ref.fullWidthView,
125
- fullWidthView = _ref$fullWidthView === void 0 ? false : _ref$fullWidthView,
126
- setTableFullView = _ref.setTableFullView,
127
- setRowViewToggle = _ref.setRowViewToggle,
128
- _ref$dropType = _ref.dropType,
129
- dropType = _ref$dropType === void 0 ? 'horizondal' : _ref$dropType,
130
- rowHeight = _ref.rowHeight,
131
- isFullScreen = _ref.isFullScreen,
132
- _ref$showHeader = _ref.showHeader,
133
- showHeader = _ref$showHeader === void 0 ? true : _ref$showHeader,
134
- labelsProp = _ref.labels;
135
- var labels = useMemo(function () {
136
- return mergeLabels(labelsProp);
137
- }, [labelsProp]);
109
+ handleCustomCardLoader = _ref.handleCustomCardLoader;
138
110
  var _useState = useState(false),
139
111
  loading = _useState[0],
140
112
  setLoading = _useState[1];
@@ -145,10 +117,9 @@ var QbsTable = function QbsTable(_ref) {
145
117
  checkedKeys = _useState3[0],
146
118
  setCheckedKeys = _useState3[1];
147
119
  var dataTheme = useMemo(function () {
148
- var _ref2;
149
- return (_ref2 = theme != null ? theme : typeof localStorage !== 'undefined' ? localStorage.getItem('theme') : null) != null ? _ref2 : 'light';
120
+ var _localStorage$getItem;
121
+ return (_localStorage$getItem = localStorage.getItem('theme')) != null ? _localStorage$getItem : theme;
150
122
  }, [theme]);
151
- var rtl = rtlProp != null ? rtlProp : isRTL();
152
123
  var _useState4 = useState(false),
153
124
  isOpen = _useState4[0],
154
125
  setIsOpen = _useState4[1];
@@ -158,13 +129,6 @@ var QbsTable = function QbsTable(_ref) {
158
129
  setTableViewToggle = _useState5[1];
159
130
  var isMobile = useResponsiveStore();
160
131
  var tableBodyRef = useRef(null);
161
- var wheelWrapperRef = useRef(null);
162
- var _useState6 = useState(propsViewMode != null ? propsViewMode : 'expanded'),
163
- viewMode = _useState6[0],
164
- setViewMode = _useState6[1];
165
- var _useState7 = useState(propsWordWrap != null ? propsWordWrap : false),
166
- wordWrap = _useState7[0],
167
- setWordWrap = _useState7[1];
168
132
  var handleSortColumn = useCallback(function (sortColumn, sortType) {
169
133
  setLoading(true);
170
134
  setTimeout(function () {
@@ -204,6 +168,12 @@ var QbsTable = function QbsTable(_ref) {
204
168
  handleChecked(updatedKeys);
205
169
  }
206
170
  }, [checkedKeys]);
171
+ var rowKeyField = dataRowKey != null ? dataRowKey : 'id';
172
+ var getRowClassName = useCallback(function (rowData) {
173
+ if (!selection) return '';
174
+ var key = rowData === null || rowData === void 0 ? void 0 : rowData[rowKeyField];
175
+ return key !== undefined && checkedKeys !== null && checkedKeys !== void 0 && checkedKeys.includes(key) ? 'qbs-table-row-checked' : '';
176
+ }, [selection, checkedKeys, rowKeyField]);
207
177
  var handleToggle = useCallback(function (columnName) {
208
178
  var lastVisibleColumn = null;
209
179
  var visibleCount = 0;
@@ -234,7 +204,6 @@ var QbsTable = function QbsTable(_ref) {
234
204
  }, [columns]);
235
205
  var handleColumnWidth = useCallback(function (newWidth, dataKey) {
236
206
  if (newWidth === undefined || dataKey === undefined) return;
237
- REFRESH_KEY = REFRESH_KEY + 1;
238
207
  setColumns(function (prevColumns) {
239
208
  return prevColumns.map(function (column) {
240
209
  return column.field === dataKey ? _extends({}, column, {
@@ -254,21 +223,14 @@ var QbsTable = function QbsTable(_ref) {
254
223
  });
255
224
  }
256
225
  }, [wordWrap]);
257
- useEffect(function () {
258
- if (!defaultRowView) {
259
- setWordWrap('break-word');
260
- } else {
261
- setWordWrap(false);
262
- }
263
- REFRESH_KEY = REFRESH_KEY + 1;
264
- }, [defaultRowView]);
265
226
  var onReorder = useCallback(function (columns) {
266
227
  setColumns(columns);
267
228
  }, []);
268
229
 
269
230
  // useEffect(() => {
270
231
  // }, [columns]);
271
- var handleClear = function handleClear(_ref3) {
232
+
233
+ var handleClear = function handleClear(_ref2) {
272
234
  setCheckedKeys([]);
273
235
  handleChecked([]);
274
236
  };
@@ -297,25 +259,12 @@ var QbsTable = function QbsTable(_ref) {
297
259
  searchPlaceholder: searchPlaceholder,
298
260
  setTableViewToggle: setTableViewToggle,
299
261
  tableViewToggle: tableViewToggle,
300
- enableTableToggle: enableTableToggle,
301
- rowViewToggle: rowViewToggle,
302
- defaultRowView: defaultRowView,
303
- fullWidthView: fullWidthView,
304
- setTableFullView: setTableFullView,
305
- setRowViewToggle: setRowViewToggle,
306
- isFullScreen: isFullScreen,
307
- labels: labels
262
+ enableTableToggle: enableTableToggle
308
263
  };
309
- useEffect(function () {
310
- if (!dataTheme || typeof document === 'undefined') return;
311
- document.body.setAttribute('data-theme', dataTheme === 'dark' ? 'dark' : 'light');
312
- document.documentElement.dataset.theme = dataTheme;
313
- }, [dataTheme]);
314
264
  var themeToggle = useMemo(function () {
315
- return typeof document !== 'undefined' ? document.getElementById('themeToggle') : null;
265
+ return document.getElementById('themeToggle');
316
266
  }, []);
317
267
  useEffect(function () {
318
- if (theme || typeof document === 'undefined') return;
319
268
  var handleThemeToggle = function handleThemeToggle() {
320
269
  if (themeToggle !== null && themeToggle !== void 0 && themeToggle.checked) {
321
270
  document.body.setAttribute('data-theme', 'dark');
@@ -337,8 +286,9 @@ var QbsTable = function QbsTable(_ref) {
337
286
  themeToggle === null || themeToggle === void 0 ? void 0 : themeToggle.removeEventListener('change', handleThemeToggle);
338
287
  document.removeEventListener('DOMContentLoaded', handleDOMContentLoaded);
339
288
  };
340
- }, [theme, themeToggle]);
289
+ }, [themeToggle]);
341
290
  var handleExpanded = useCallback(function (rowData) {
291
+ console.log(rowData);
342
292
  var keyValue = dataRowKey;
343
293
  var key = rowData[keyValue];
344
294
  var nextExpandedRowKeys = new Set(expandedRowKeys);
@@ -513,26 +463,26 @@ var QbsTable = function QbsTable(_ref) {
513
463
  // [columns, dataTheme]
514
464
  // );
515
465
  var columnsRendered = useMemo(function () {
516
- return (columns != null ? columns : []).map(function (_ref4) {
517
- var title = _ref4.title,
518
- field = _ref4.field,
519
- resizable = _ref4.resizable,
520
- sortable = _ref4.sortable,
521
- colWidth = _ref4.colWidth,
522
- align = _ref4.align,
523
- grouped = _ref4.grouped,
524
- groupHeader = _ref4.groupHeader,
525
- fixed = _ref4.fixed,
526
- children = _ref4.children,
527
- customCell = _ref4.customCell,
528
- renderCell = _ref4.renderCell,
529
- isVisible = _ref4.isVisible,
530
- link = _ref4.link,
531
- getPath = _ref4.getPath,
532
- rowClick = _ref4.rowClick,
533
- sortKey = _ref4.sortKey,
534
- type = _ref4.type,
535
- hideLink = _ref4.hideLink;
466
+ return (columns != null ? columns : []).map(function (_ref3) {
467
+ var title = _ref3.title,
468
+ field = _ref3.field,
469
+ resizable = _ref3.resizable,
470
+ sortable = _ref3.sortable,
471
+ colWidth = _ref3.colWidth,
472
+ align = _ref3.align,
473
+ grouped = _ref3.grouped,
474
+ groupHeader = _ref3.groupHeader,
475
+ fixed = _ref3.fixed,
476
+ children = _ref3.children,
477
+ customCell = _ref3.customCell,
478
+ renderCell = _ref3.renderCell,
479
+ isVisible = _ref3.isVisible,
480
+ link = _ref3.link,
481
+ getPath = _ref3.getPath,
482
+ rowClick = _ref3.rowClick,
483
+ sortKey = _ref3.sortKey,
484
+ type = _ref3.type,
485
+ hideLink = _ref3.hideLink;
536
486
  return isVisible ? grouped ? /*#__PURE__*/React.createElement(ColumnGroup, {
537
487
  header: groupHeader,
538
488
  fixed: fixed,
@@ -600,51 +550,33 @@ var QbsTable = function QbsTable(_ref) {
600
550
  },
601
551
  // ✅ Fix: Type assertion to ReactElement[]
602
552
  [columns, dataTheme]);
603
- var handleInfiniteScroll = function handleInfiniteScroll(scroll) {
604
- if (!infiniteScroll) return;
605
- var wrapper = wheelWrapperRef.current;
606
- if (!wrapper || !hasMoreData || infiniteLoading) return;
607
- var scrollTop = wrapper.scrollTop,
608
- clientHeight = wrapper.clientHeight;
609
- var scrollHeight = Math.abs(scroll) + (height - headerHeight);
610
- // Trigger fetch when user scrolls within 100px of bottom
611
- if (scrollTop + clientHeight >= scrollHeight - 70) {
612
- loadMoreData === null || loadMoreData === void 0 ? void 0 : loadMoreData(); // fetch next page here
613
- }
614
- };
615
553
  return /*#__PURE__*/React.createElement("div", {
616
554
  className: "qbs-table " + classes.tableContainerClass,
617
- "data-theme": dataTheme,
618
- dir: rtl ? 'rtl' : 'ltr'
555
+ "data-theme": dataTheme
619
556
  }, toolbar && /*#__PURE__*/React.createElement(ToolBar, toolbarProps), /*#__PURE__*/React.createElement("div", {
620
557
  className: "qbs-table-border-wrap"
621
558
  }, tableViewToggle ? /*#__PURE__*/React.createElement(Table, {
622
559
  height: autoHeight ? undefined : height,
623
- key: tableKey + REFRESH_KEY,
560
+ key: tableKey,
624
561
  tableKey: tableKey,
625
562
  data: data,
626
- rtl: rtl,
627
563
  tableBodyRef: tableBodyRef,
628
564
  dataTheme: dataTheme,
629
565
  wordWrap: wordWrap,
630
- wheelWrapperRef: wheelWrapperRef,
631
- rowHeight: rowHeight,
632
566
  autoHeight: autoHeight,
633
- handleInfiniteScroll: handleInfiniteScroll,
634
567
  sortColumn: sortColumn,
635
568
  style: {
636
569
  position: 'relative'
637
570
  },
638
571
  sortType: sortType,
639
572
  onSortColumn: handleSortColumn,
640
- infiniteLoading: infiniteLoading,
641
573
  onRowClick: onRowClick,
642
574
  tableBodyHeight: tableBodyHeight,
643
575
  cellBordered: cellBordered,
644
576
  bordered: bordered,
645
577
  renderEmpty: function renderEmpty(info) {
646
578
  return _renderEmpty ? _renderEmpty(info) : /*#__PURE__*/React.createElement(NoData, {
647
- title: emptyTitle != null ? emptyTitle : labels.noDataFound,
579
+ title: emptyTitle != null ? emptyTitle : 'No Data Found',
648
580
  subtitle: emptySubTitle
649
581
  });
650
582
  },
@@ -653,11 +585,12 @@ var QbsTable = function QbsTable(_ref) {
653
585
  headerHeight: headerHeight,
654
586
  rowExpandedHeight: rowExpandedHeight,
655
587
  loading: isLoading != null ? isLoading : loading,
656
- showHeader: showHeader,
588
+ showHeader: true,
657
589
  defaultChecked: true,
658
590
  expandedRowKeys: expandedRowKeys,
659
591
  onExpandChange: onExpandChange,
660
592
  rowKey: dataRowKey != null ? dataRowKey : 'id',
593
+ rowClassName: selection ? getRowClassName : undefined,
661
594
  defaultExpandAllRows: defaultExpandAllRows,
662
595
  shouldUpdateScroll: shouldUpdateScroll,
663
596
  renderRowExpanded: function renderRowExpanded(rowData) {
@@ -746,12 +679,9 @@ var QbsTable = function QbsTable(_ref) {
746
679
  onReorder: onReorder,
747
680
  isOpen: isOpen,
748
681
  tableHeight: height,
749
- viewMode: viewMode,
750
- setViewMode: setViewMode,
751
682
  setIsOpen: setIsOpen,
752
683
  handleResetColumns: handleResetColumns,
753
- handleColumnToggle: handleColumnToggle,
754
- labels: labels
684
+ handleColumnToggle: handleColumnToggle
755
685
  })), /*#__PURE__*/React.createElement(Cell, null)), actionProps && (actionProps === null || actionProps === void 0 ? void 0 : actionProps.length) > 0 && /*#__PURE__*/React.createElement(Column, {
756
686
  width: 40,
757
687
  fixed: "right"
@@ -765,17 +695,12 @@ var QbsTable = function QbsTable(_ref) {
765
695
  onToggle: handleToggle,
766
696
  tableHeight: height,
767
697
  onReorder: onReorder,
768
- viewMode: viewMode,
769
- setViewMode: setViewMode,
770
698
  isOpen: isOpen,
771
699
  setIsOpen: setIsOpen,
772
700
  handleResetColumns: handleResetColumns,
773
- handleColumnToggle: handleColumnToggle,
774
- labels: labels
701
+ handleColumnToggle: handleColumnToggle
775
702
  })), /*#__PURE__*/React.createElement(ActionCell, {
776
703
  tableBodyRef: tableBodyRef,
777
- dropType: dropType,
778
- wheelWrapperRef: wheelWrapperRef,
779
704
  actionProps: actionProps,
780
705
  className: classes.cellClass + " " + classes.actionCellClass,
781
706
  handleMenuActions: handleMenuActions,
@@ -790,7 +715,7 @@ var QbsTable = function QbsTable(_ref) {
790
715
  }, ((data === null || data === void 0 ? void 0 : data.length) === 0 || !data) && !isLoading && /*#__PURE__*/React.createElement("div", {
791
716
  className: "flex flex-col gap-2 p-2 mt-6 card-empty-container"
792
717
  }, /*#__PURE__*/React.createElement(NoData, {
793
- title: emptyTitle != null ? emptyTitle : labels.noDataFound,
718
+ title: emptyTitle != null ? emptyTitle : 'No Data Found',
794
719
  subtitle: emptySubTitle
795
720
  })), isLoading ? handleCustomCardLoader ? /*#__PURE__*/React.createElement(React.Fragment, null, handleCustomCardLoader()) : /*#__PURE__*/React.createElement("div", {
796
721
  className: "flex flex-col gap-2 p-2"
@@ -805,13 +730,10 @@ var QbsTable = function QbsTable(_ref) {
805
730
  childDetailHeading: childDetailHeading,
806
731
  columns: columns,
807
732
  tableBodyRef: tableBodyRef,
808
- actionProps: actionProps,
809
- labels: labels
733
+ actionProps: actionProps
810
734
  }));
811
735
  })), /*#__PURE__*/React.createElement("div", null, pagination && (data === null || data === void 0 ? void 0 : data.length) > 0 && /*#__PURE__*/React.createElement(Pagination, {
812
- paginationProps: paginationProps,
813
- labels: labels,
814
- dataTheme: dataTheme
736
+ paginationProps: paginationProps
815
737
  }))));
816
738
  };
817
739
  export default QbsTable;
@@ -6,7 +6,6 @@ import ColumnGroup from '../ColumnGroup';
6
6
  import HeaderCell from '../HeaderCell';
7
7
  import Pagination from '../Pagination';
8
8
  import Table from '../Table';
9
- import { mergeLabels } from './labels';
10
9
  import { ActionCell, CheckCell, CustomRowStatus, CustomTableCell, ExpandCell } from './CustomTableCell';
11
10
  import ToolBar from './Toolbar';
12
11
  import ColumToggle from './utilities/ColumShowHide';
@@ -92,13 +91,7 @@ var QbsTable = function QbsTable(_ref) {
92
91
  _renderEmpty = _ref.renderEmpty,
93
92
  autoHeight = _ref.autoHeight,
94
93
  emptySubTitle = _ref.emptySubTitle,
95
- emptyTitle = _ref.emptyTitle,
96
- _ref$dropType = _ref.dropType,
97
- dropType = _ref$dropType === void 0 ? 'horizontal' : _ref$dropType,
98
- labelsProp = _ref.labels;
99
- var labels = useMemo(function () {
100
- return mergeLabels(labelsProp);
101
- }, [labelsProp]);
94
+ emptyTitle = _ref.emptyTitle;
102
95
  var _useState = useState(false),
103
96
  loading = _useState[0],
104
97
  setLoading = _useState[1];
@@ -109,15 +102,14 @@ var QbsTable = function QbsTable(_ref) {
109
102
  checkedKeys = _useState3[0],
110
103
  setCheckedKeys = _useState3[1];
111
104
  var dataTheme = useMemo(function () {
112
- var _ref2;
113
- return (_ref2 = theme != null ? theme : typeof localStorage !== 'undefined' ? localStorage.getItem('theme') : null) != null ? _ref2 : 'light';
105
+ var _localStorage$getItem;
106
+ return (_localStorage$getItem = localStorage.getItem('theme')) != null ? _localStorage$getItem : theme;
114
107
  }, [theme]);
115
108
  var _useState4 = useState(false),
116
109
  isOpen = _useState4[0],
117
110
  setIsOpen = _useState4[1];
118
111
  var prevColumns = useRef(null);
119
112
  var tableBodyRef = useRef(null);
120
- var wheelWrapperRef = useRef(null);
121
113
  var handleSortColumn = useCallback(function (sortColumn, sortType) {
122
114
  setLoading(true);
123
115
  setTimeout(function () {
@@ -157,6 +149,12 @@ var QbsTable = function QbsTable(_ref) {
157
149
  handleChecked(updatedKeys);
158
150
  }
159
151
  }, [checkedKeys]);
152
+ var rowKeyField = dataRowKey != null ? dataRowKey : 'id';
153
+ var getRowClassName = useCallback(function (rowData) {
154
+ if (!selection) return '';
155
+ var key = rowData === null || rowData === void 0 ? void 0 : rowData[rowKeyField];
156
+ return key !== undefined && checkedKeys !== null && checkedKeys !== void 0 && checkedKeys.includes(key) ? 'qbs-table-row-checked' : '';
157
+ }, [selection, checkedKeys, rowKeyField]);
160
158
  var handleToggle = useCallback(function (columnName) {
161
159
  var lastVisibleColumn = null;
162
160
  var visibleCount = 0;
@@ -213,7 +211,7 @@ var QbsTable = function QbsTable(_ref) {
213
211
  // useEffect(() => {
214
212
  // }, [columns]);
215
213
 
216
- var handleClear = function handleClear(_ref3) {
214
+ var handleClear = function handleClear(_ref2) {
217
215
  setCheckedKeys([]);
218
216
  handleChecked([]);
219
217
  };
@@ -239,19 +237,12 @@ var QbsTable = function QbsTable(_ref) {
239
237
  onSelect: handleClear,
240
238
  handleColumnToggle: handleColumnToggle,
241
239
  dataLength: data === null || data === void 0 ? void 0 : data.length,
242
- searchPlaceholder: searchPlaceholder,
243
- labels: labels
240
+ searchPlaceholder: searchPlaceholder
244
241
  };
245
- useEffect(function () {
246
- if (!dataTheme || typeof document === 'undefined') return;
247
- document.body.setAttribute('data-theme', dataTheme === 'dark' ? 'dark' : 'light');
248
- document.documentElement.dataset.theme = dataTheme;
249
- }, [dataTheme]);
250
242
  var themeToggle = useMemo(function () {
251
- return typeof document !== 'undefined' ? document.getElementById('themeToggle') : null;
243
+ return document.getElementById('themeToggle');
252
244
  }, []);
253
245
  useEffect(function () {
254
- if (theme || typeof document === 'undefined') return;
255
246
  var handleThemeToggle = function handleThemeToggle() {
256
247
  if (themeToggle !== null && themeToggle !== void 0 && themeToggle.checked) {
257
248
  document.body.setAttribute('data-theme', 'dark');
@@ -273,8 +264,9 @@ var QbsTable = function QbsTable(_ref) {
273
264
  themeToggle === null || themeToggle === void 0 ? void 0 : themeToggle.removeEventListener('change', handleThemeToggle);
274
265
  document.removeEventListener('DOMContentLoaded', handleDOMContentLoaded);
275
266
  };
276
- }, [theme, themeToggle]);
267
+ }, [themeToggle]);
277
268
  var handleExpanded = useCallback(function (rowData) {
269
+ console.log(rowData);
278
270
  var keyValue = dataRowKey;
279
271
  var key = rowData[keyValue];
280
272
  var nextExpandedRowKeys = new Set(expandedRowKeys);
@@ -333,26 +325,26 @@ var QbsTable = function QbsTable(_ref) {
333
325
  }) ? true : false;
334
326
  };
335
327
  var columnsRendered = useMemo(function () {
336
- return (columns != null ? columns : []).map(function (_ref4) {
337
- var title = _ref4.title,
338
- field = _ref4.field,
339
- resizable = _ref4.resizable,
340
- sortable = _ref4.sortable,
341
- colWidth = _ref4.colWidth,
342
- align = _ref4.align,
343
- grouped = _ref4.grouped,
344
- groupHeader = _ref4.groupHeader,
345
- fixed = _ref4.fixed,
346
- children = _ref4.children,
347
- customCell = _ref4.customCell,
348
- renderCell = _ref4.renderCell,
349
- isVisible = _ref4.isVisible,
350
- link = _ref4.link,
351
- getPath = _ref4.getPath,
352
- rowClick = _ref4.rowClick,
353
- sortKey = _ref4.sortKey,
354
- type = _ref4.type,
355
- hideLink = _ref4.hideLink;
328
+ return (columns != null ? columns : []).map(function (_ref3) {
329
+ var title = _ref3.title,
330
+ field = _ref3.field,
331
+ resizable = _ref3.resizable,
332
+ sortable = _ref3.sortable,
333
+ colWidth = _ref3.colWidth,
334
+ align = _ref3.align,
335
+ grouped = _ref3.grouped,
336
+ groupHeader = _ref3.groupHeader,
337
+ fixed = _ref3.fixed,
338
+ children = _ref3.children,
339
+ customCell = _ref3.customCell,
340
+ renderCell = _ref3.renderCell,
341
+ isVisible = _ref3.isVisible,
342
+ link = _ref3.link,
343
+ getPath = _ref3.getPath,
344
+ rowClick = _ref3.rowClick,
345
+ sortKey = _ref3.sortKey,
346
+ type = _ref3.type,
347
+ hideLink = _ref3.hideLink;
356
348
  return /*#__PURE__*/React.createElement(React.Fragment, null, isVisible && /*#__PURE__*/React.createElement(React.Fragment, null, grouped ? /*#__PURE__*/React.createElement(ColumnGroup, {
357
349
  header: groupHeader,
358
350
  fixed: fixed,
@@ -432,7 +424,6 @@ var QbsTable = function QbsTable(_ref) {
432
424
  wordWrap: wordWrap,
433
425
  autoHeight: autoHeight,
434
426
  sortColumn: sortColumn,
435
- wheelWrapperRef: wheelWrapperRef,
436
427
  style: {
437
428
  position: 'relative'
438
429
  },
@@ -444,7 +435,7 @@ var QbsTable = function QbsTable(_ref) {
444
435
  bordered: bordered,
445
436
  renderEmpty: function renderEmpty(info) {
446
437
  return _renderEmpty ? _renderEmpty(info) : /*#__PURE__*/React.createElement(NoData, {
447
- title: emptyTitle != null ? emptyTitle : labels.noDataFound,
438
+ title: emptyTitle != null ? emptyTitle : 'No Data Found',
448
439
  subtitle: emptySubTitle
449
440
  });
450
441
  },
@@ -458,6 +449,7 @@ var QbsTable = function QbsTable(_ref) {
458
449
  expandedRowKeys: expandedRowKeys,
459
450
  onExpandChange: onExpandChange,
460
451
  rowKey: dataRowKey != null ? dataRowKey : 'id',
452
+ rowClassName: selection ? getRowClassName : undefined,
461
453
  defaultExpandAllRows: defaultExpandAllRows,
462
454
  shouldUpdateScroll: shouldUpdateScroll,
463
455
  renderRowExpanded: function renderRowExpanded(rowData) {
@@ -548,8 +540,7 @@ var QbsTable = function QbsTable(_ref) {
548
540
  tableHeight: height,
549
541
  setIsOpen: setIsOpen,
550
542
  handleResetColumns: handleResetColumns,
551
- handleColumnToggle: handleColumnToggle,
552
- labels: labels
543
+ handleColumnToggle: handleColumnToggle
553
544
  })), /*#__PURE__*/React.createElement(Cell, null)), actionProps && (actionProps === null || actionProps === void 0 ? void 0 : actionProps.length) > 0 && /*#__PURE__*/React.createElement(Column, {
554
545
  width: 40,
555
546
  fixed: "right"
@@ -566,19 +557,15 @@ var QbsTable = function QbsTable(_ref) {
566
557
  isOpen: isOpen,
567
558
  setIsOpen: setIsOpen,
568
559
  handleResetColumns: handleResetColumns,
569
- handleColumnToggle: handleColumnToggle,
570
- labels: labels
560
+ handleColumnToggle: handleColumnToggle
571
561
  })), /*#__PURE__*/React.createElement(ActionCell, {
572
562
  tableBodyRef: tableBodyRef,
573
563
  actionProps: actionProps,
574
- dropType: dropType,
575
564
  className: classes.cellClass + " " + classes.actionCellClass,
576
565
  handleMenuActions: handleMenuActions,
577
566
  dataTheme: dataTheme
578
567
  }))), /*#__PURE__*/React.createElement("div", null, pagination && (data === null || data === void 0 ? void 0 : data.length) > 0 && /*#__PURE__*/React.createElement(Pagination, {
579
- paginationProps: paginationProps,
580
- labels: labels,
581
- dataTheme: dataTheme
568
+ paginationProps: paginationProps
582
569
  }))));
583
570
  };
584
571
  export default QbsTable;