qbs-react-grid 2.2.4 → 2.2.6

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