pixelize-design-library 2.3.1-beta.1 → 2.3.1-beta.10

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 (324) hide show
  1. package/.claude/settings.local.json +21 -1
  2. package/dist/Components/Accordion/Accordion.js +26 -5
  3. package/dist/Components/KanbanBoard/AccountCard.js +17 -14
  4. package/dist/Components/KanbanBoard/KanbanBoard.js +93 -78
  5. package/dist/Components/NavigationBar/NavigationBar.js +4 -4
  6. package/dist/Components/ProfilePhotoViewer/ProfilePhotoViewer.d.ts +1 -1
  7. package/dist/Components/ProfilePhotoViewer/ProfilePhotoViewer.js +42 -24
  8. package/dist/Components/ProfilePhotoViewer/ProfilePhotoViewerProps.d.ts +2 -0
  9. package/dist/Components/SearchSelect/SearchSelect.js +53 -21
  10. package/dist/Components/Table/Table.d.ts +1 -1
  11. package/dist/Components/Table/Table.js +143 -28
  12. package/dist/Components/Table/TableProps.d.ts +9 -1
  13. package/dist/Components/Table/{Components → components}/TableActions.d.ts +2 -2
  14. package/dist/Components/Table/{Components → components}/TableActions.js +5 -4
  15. package/dist/Components/Table/{Components → components}/TableBody.js +84 -18
  16. package/dist/Components/Table/{Components → components}/TableHeader.js +5 -9
  17. package/dist/Components/Table/hooks/useTable.d.ts +1 -1
  18. package/dist/Components/Table/hooks/useTable.js +8 -7
  19. package/dist/Components/Table/settings/TableSettings.d.ts +3 -2
  20. package/dist/Components/Table/settings/TableSettings.js +30 -6
  21. package/dist/Components/Timeline/Timeline.d.ts +1 -1
  22. package/dist/Components/Timeline/Timeline.js +145 -78
  23. package/dist/Components/Toaster/Toaster.js +40 -20
  24. package/dist/Utils/table.d.ts +6 -1
  25. package/dist/Utils/table.js +47 -27
  26. package/package.json +1 -1
  27. package/dist/App.d.ts +0 -4
  28. package/dist/App.js +0 -131
  29. package/dist/Components/Table/CompactSelect.d.ts +0 -15
  30. package/dist/Components/Table/CompactSelect.js +0 -69
  31. package/dist/Components/Table/Components/ActiveFilters.d.ts +0 -9
  32. package/dist/Components/Table/Components/ActiveFilters.js +0 -132
  33. package/dist/Components/Table/Components/TableFilters.d.ts +0 -7
  34. package/dist/Components/Table/Components/TableFilters.js +0 -89
  35. package/dist/Components/Table/Components/useDebounce.d.ts +0 -2
  36. package/dist/Components/Table/Components/useDebounce.js +0 -28
  37. package/dist/Components/Table/Components/useTable.d.ts +0 -47
  38. package/dist/Components/Table/Components/useTable.js +0 -219
  39. package/dist/Components/Table/LeftFilterPane.d.ts +0 -36
  40. package/dist/Components/Table/LeftFilterPane.js +0 -273
  41. package/dist/Components/Table/SelectOperationControls.d.ts +0 -8
  42. package/dist/Components/Table/SelectOperationControls.js +0 -15
  43. package/dist/Components/Table/TableSettings/ManageColumns.d.ts +0 -12
  44. package/dist/Components/Table/TableSettings/ManageColumns.js +0 -166
  45. package/dist/Components/Table/TableSettings/ManageColumns.test.d.ts +0 -1
  46. package/dist/Components/Table/TableSettings/ManageColumns.test.js +0 -146
  47. package/dist/Components/Table/TableSettings/TableFilters.d.ts +0 -10
  48. package/dist/Components/Table/TableSettings/TableFilters.js +0 -69
  49. package/dist/Components/Table/TableSettings/TableFilters.test.d.ts +0 -1
  50. package/dist/Components/Table/TableSettings/TableFilters.test.js +0 -109
  51. package/dist/Components/Table/TableSettings/TableSettings.d.ts +0 -8
  52. package/dist/Components/Table/TableSettings/TableSettings.js +0 -141
  53. package/dist/Components/Table/TableToDo.d.ts +0 -2
  54. package/dist/Components/Table/TableToDo.js +0 -291
  55. package/dist/Components/Table/TextOperationControls.d.ts +0 -12
  56. package/dist/Components/Table/TextOperationControls.js +0 -29
  57. package/dist/Layout.d.ts +0 -3
  58. package/dist/Layout.js +0 -292
  59. package/dist/Pages/TInput.d.ts +0 -3
  60. package/dist/Pages/TInput.js +0 -56
  61. package/dist/Pages/accordion.d.ts +0 -3
  62. package/dist/Pages/accordion.js +0 -42
  63. package/dist/Pages/alertdialog.d.ts +0 -3
  64. package/dist/Pages/alertdialog.js +0 -54
  65. package/dist/Pages/button.d.ts +0 -3
  66. package/dist/Pages/button.js +0 -46
  67. package/dist/Pages/card.d.ts +0 -3
  68. package/dist/Pages/card.js +0 -117
  69. package/dist/Pages/chart.d.ts +0 -4
  70. package/dist/Pages/chart.js +0 -40
  71. package/dist/Pages/checkbox.d.ts +0 -3
  72. package/dist/Pages/checkbox.js +0 -12
  73. package/dist/Pages/contactForm.d.ts +0 -3
  74. package/dist/Pages/contactForm.js +0 -16
  75. package/dist/Pages/datePick.d.ts +0 -3
  76. package/dist/Pages/datePick.js +0 -88
  77. package/dist/Pages/drawer.d.ts +0 -3
  78. package/dist/Pages/drawer.js +0 -58
  79. package/dist/Pages/dropdown.d.ts +0 -3
  80. package/dist/Pages/dropdown.js +0 -24
  81. package/dist/Pages/editor.d.ts +0 -3
  82. package/dist/Pages/editor.js +0 -14
  83. package/dist/Pages/feedback.d.ts +0 -2
  84. package/dist/Pages/feedback.js +0 -15
  85. package/dist/Pages/fileUpload.d.ts +0 -2
  86. package/dist/Pages/fileUpload.js +0 -82
  87. package/dist/Pages/input.d.ts +0 -3
  88. package/dist/Pages/input.js +0 -92
  89. package/dist/Pages/kanbanboard.d.ts +0 -3
  90. package/dist/Pages/kanbanboard.js +0 -224
  91. package/dist/Pages/modal.d.ts +0 -3
  92. package/dist/Pages/modal.js +0 -65
  93. package/dist/Pages/multiSelect.d.ts +0 -3
  94. package/dist/Pages/multiSelect.js +0 -55
  95. package/dist/Pages/noteArea.d.ts +0 -3
  96. package/dist/Pages/noteArea.js +0 -59
  97. package/dist/Pages/notification.d.ts +0 -3
  98. package/dist/Pages/notification.js +0 -25
  99. package/dist/Pages/numberInput.d.ts +0 -3
  100. package/dist/Pages/numberInput.js +0 -49
  101. package/dist/Pages/photoViewer.d.ts +0 -3
  102. package/dist/Pages/photoViewer.js +0 -12
  103. package/dist/Pages/pinInputs.d.ts +0 -3
  104. package/dist/Pages/pinInputs.js +0 -12
  105. package/dist/Pages/productCaard.d.ts +0 -3
  106. package/dist/Pages/productCaard.js +0 -311
  107. package/dist/Pages/productDetailCard.d.ts +0 -3
  108. package/dist/Pages/productDetailCard.js +0 -78
  109. package/dist/Pages/productFilter.d.ts +0 -3
  110. package/dist/Pages/productFilter.js +0 -202
  111. package/dist/Pages/progressbar.d.ts +0 -3
  112. package/dist/Pages/progressbar.js +0 -12
  113. package/dist/Pages/radioButton.d.ts +0 -3
  114. package/dist/Pages/radioButton.js +0 -54
  115. package/dist/Pages/search.d.ts +0 -3
  116. package/dist/Pages/search.js +0 -54
  117. package/dist/Pages/searchSelect.d.ts +0 -3
  118. package/dist/Pages/searchSelect.js +0 -133
  119. package/dist/Pages/select.d.ts +0 -3
  120. package/dist/Pages/select.js +0 -53
  121. package/dist/Pages/selectSearch.d.ts +0 -3
  122. package/dist/Pages/selectSearch.js +0 -103
  123. package/dist/Pages/skeleton.d.ts +0 -3
  124. package/dist/Pages/skeleton.js +0 -22
  125. package/dist/Pages/switch.d.ts +0 -3
  126. package/dist/Pages/switch.js +0 -50
  127. package/dist/Pages/table.d.ts +0 -3
  128. package/dist/Pages/table.js +0 -174
  129. package/dist/Pages/textArea.d.ts +0 -3
  130. package/dist/Pages/textArea.js +0 -15
  131. package/dist/Pages/timeline.d.ts +0 -3
  132. package/dist/Pages/timeline.js +0 -74
  133. package/dist/Pages/tooltip.d.ts +0 -3
  134. package/dist/Pages/tooltip.js +0 -12
  135. package/dist/Pages/toster.d.ts +0 -3
  136. package/dist/Pages/toster.js +0 -68
  137. package/dist/Pages/verifyEmail.d.ts +0 -3
  138. package/dist/Pages/verifyEmail.js +0 -18
  139. package/dist/Theme/Dark/palette.d.ts +0 -370
  140. package/dist/Theme/Dark/palette.js +0 -372
  141. package/dist/bootstrap.d.ts +0 -1
  142. package/dist/bootstrap.js +0 -14
  143. package/dist/components-v2/AlertDialog/AlertDialog.d.ts +0 -23
  144. package/dist/components-v2/AlertDialog/AlertDialog.js +0 -98
  145. package/dist/components-v2/Breadcrumbs/Breadcrumbs.d.ts +0 -14
  146. package/dist/components-v2/Breadcrumbs/Breadcrumbs.js +0 -66
  147. package/dist/components-v2/Charts/AreaChart.d.ts +0 -23
  148. package/dist/components-v2/Charts/AreaChart.js +0 -63
  149. package/dist/components-v2/Charts/BarChart.d.ts +0 -25
  150. package/dist/components-v2/Charts/BarChart.js +0 -57
  151. package/dist/components-v2/Charts/LineChart.d.ts +0 -23
  152. package/dist/components-v2/Charts/LineChart.js +0 -55
  153. package/dist/components-v2/Charts/PieChart.d.ts +0 -15
  154. package/dist/components-v2/Charts/PieChart.js +0 -54
  155. package/dist/components-v2/Charts/PolarChart.d.ts +0 -14
  156. package/dist/components-v2/Charts/PolarChart.js +0 -54
  157. package/dist/components-v2/Charts/chartOptions.d.ts +0 -7
  158. package/dist/components-v2/Charts/chartOptions.js +0 -41
  159. package/dist/components-v2/Charts/useChartTheme.d.ts +0 -22
  160. package/dist/components-v2/Charts/useChartTheme.js +0 -106
  161. package/dist/components-v2/ContactForm/ContactForm.d.ts +0 -25
  162. package/dist/components-v2/ContactForm/ContactForm.js +0 -116
  163. package/dist/components-v2/DatePicker/Calendar.d.ts +0 -19
  164. package/dist/components-v2/DatePicker/Calendar.js +0 -212
  165. package/dist/components-v2/DatePicker/DatePicker.d.ts +0 -46
  166. package/dist/components-v2/DatePicker/DatePicker.js +0 -189
  167. package/dist/components-v2/DatePicker/TimePicker.d.ts +0 -12
  168. package/dist/components-v2/DatePicker/TimePicker.js +0 -105
  169. package/dist/components-v2/DatePicker/utils.d.ts +0 -31
  170. package/dist/components-v2/DatePicker/utils.js +0 -109
  171. package/dist/components-v2/Drawer/Drawer.d.ts +0 -27
  172. package/dist/components-v2/Drawer/Drawer.js +0 -132
  173. package/dist/components-v2/FeedbackForm/FeedbackForm.d.ts +0 -26
  174. package/dist/components-v2/FeedbackForm/FeedbackForm.js +0 -112
  175. package/dist/components-v2/FileUploader/FileUploader.d.ts +0 -28
  176. package/dist/components-v2/FileUploader/FileUploader.js +0 -127
  177. package/dist/components-v2/Input/TextInput.d.ts +0 -41
  178. package/dist/components-v2/Input/TextInput.js +0 -169
  179. package/dist/components-v2/KanbanBoard/KanbanBoard.d.ts +0 -39
  180. package/dist/components-v2/KanbanBoard/KanbanBoard.js +0 -101
  181. package/dist/components-v2/Layout/AppLayout.d.ts +0 -22
  182. package/dist/components-v2/Layout/AppLayout.js +0 -53
  183. package/dist/components-v2/Loading/Loading.d.ts +0 -19
  184. package/dist/components-v2/Loading/Loading.js +0 -55
  185. package/dist/components-v2/Modal/Modal.d.ts +0 -30
  186. package/dist/components-v2/Modal/Modal.js +0 -82
  187. package/dist/components-v2/NavigationBar/NavigationBar.d.ts +0 -47
  188. package/dist/components-v2/NavigationBar/NavigationBar.js +0 -148
  189. package/dist/components-v2/Notification/Notification.d.ts +0 -22
  190. package/dist/components-v2/Notification/Notification.js +0 -113
  191. package/dist/components-v2/NumberInput/NumberInput.d.ts +0 -37
  192. package/dist/components-v2/NumberInput/NumberInput.js +0 -210
  193. package/dist/components-v2/PinInput/PinInput.d.ts +0 -26
  194. package/dist/components-v2/PinInput/PinInput.js +0 -138
  195. package/dist/components-v2/ProfilePhotoViewer/ProfilePhotoViewer.d.ts +0 -18
  196. package/dist/components-v2/ProfilePhotoViewer/ProfilePhotoViewer.js +0 -91
  197. package/dist/components-v2/Select/Select.d.ts +0 -41
  198. package/dist/components-v2/Select/Select.js +0 -284
  199. package/dist/components-v2/Sidebar/Sidebar.d.ts +0 -41
  200. package/dist/components-v2/Sidebar/Sidebar.js +0 -182
  201. package/dist/components-v2/Slider/Slider.d.ts +0 -18
  202. package/dist/components-v2/Slider/Slider.js +0 -101
  203. package/dist/components-v2/Table/Table.d.ts +0 -7
  204. package/dist/components-v2/Table/Table.js +0 -172
  205. package/dist/components-v2/Table/TableProps.d.ts +0 -139
  206. package/dist/components-v2/Table/TableProps.js +0 -9
  207. package/dist/components-v2/Table/components/ActiveFilters.d.ts +0 -10
  208. package/dist/components-v2/Table/components/ActiveFilters.js +0 -70
  209. package/dist/components-v2/Table/components/BulkActionBar.d.ts +0 -11
  210. package/dist/components-v2/Table/components/BulkActionBar.js +0 -92
  211. package/dist/components-v2/Table/components/ColumnResizeHandle.d.ts +0 -7
  212. package/dist/components-v2/Table/components/ColumnResizeHandle.js +0 -41
  213. package/dist/components-v2/Table/components/Pagination.d.ts +0 -11
  214. package/dist/components-v2/Table/components/Pagination.js +0 -92
  215. package/dist/components-v2/Table/components/TableBody.d.ts +0 -23
  216. package/dist/components-v2/Table/components/TableBody.js +0 -69
  217. package/dist/components-v2/Table/components/TableCell.d.ts +0 -14
  218. package/dist/components-v2/Table/components/TableCell.js +0 -63
  219. package/dist/components-v2/Table/components/TableEmptyState.d.ts +0 -12
  220. package/dist/components-v2/Table/components/TableEmptyState.js +0 -55
  221. package/dist/components-v2/Table/components/TableErrorState.d.ts +0 -6
  222. package/dist/components-v2/Table/components/TableErrorState.js +0 -52
  223. package/dist/components-v2/Table/components/TableHeader.d.ts +0 -21
  224. package/dist/components-v2/Table/components/TableHeader.js +0 -94
  225. package/dist/components-v2/Table/components/TableRow.d.ts +0 -20
  226. package/dist/components-v2/Table/components/TableRow.js +0 -64
  227. package/dist/components-v2/Table/components/TableSearch.d.ts +0 -8
  228. package/dist/components-v2/Table/components/TableSearch.js +0 -47
  229. package/dist/components-v2/Table/filters/FilterChips.d.ts +0 -6
  230. package/dist/components-v2/Table/filters/FilterChips.js +0 -9
  231. package/dist/components-v2/Table/filters/LeftFilterPane.d.ts +0 -17
  232. package/dist/components-v2/Table/filters/LeftFilterPane.js +0 -105
  233. package/dist/components-v2/Table/filters/TableFilters.d.ts +0 -12
  234. package/dist/components-v2/Table/filters/TableFilters.js +0 -127
  235. package/dist/components-v2/Table/hooks/useColumnResize.d.ts +0 -15
  236. package/dist/components-v2/Table/hooks/useColumnResize.js +0 -104
  237. package/dist/components-v2/Table/hooks/useTable.d.ts +0 -58
  238. package/dist/components-v2/Table/hooks/useTable.js +0 -254
  239. package/dist/components-v2/Table/hooks/useTableKeyboard.d.ts +0 -25
  240. package/dist/components-v2/Table/hooks/useTableKeyboard.js +0 -112
  241. package/dist/components-v2/Table/hooks/useVirtualScroll.d.ts +0 -29
  242. package/dist/components-v2/Table/hooks/useVirtualScroll.js +0 -83
  243. package/dist/components-v2/Table/settings/ManageColumns.d.ts +0 -12
  244. package/dist/components-v2/Table/settings/ManageColumns.js +0 -59
  245. package/dist/components-v2/Table/settings/TableSettings.d.ts +0 -12
  246. package/dist/components-v2/Table/settings/TableSettings.js +0 -57
  247. package/dist/components-v2/Table/utils/filterUtils.d.ts +0 -7
  248. package/dist/components-v2/Table/utils/filterUtils.js +0 -149
  249. package/dist/components-v2/Table/utils/sortUtils.d.ts +0 -6
  250. package/dist/components-v2/Table/utils/sortUtils.js +0 -65
  251. package/dist/components-v2/Tag/Tag.d.ts +0 -15
  252. package/dist/components-v2/Tag/Tag.js +0 -87
  253. package/dist/components-v2/Timeline/Timeline.d.ts +0 -18
  254. package/dist/components-v2/Timeline/Timeline.js +0 -76
  255. package/dist/components-v2/Toaster/Toaster.d.ts +0 -61
  256. package/dist/components-v2/Toaster/Toaster.js +0 -63
  257. package/dist/components-v2/Toggle/Toggle.d.ts +0 -28
  258. package/dist/components-v2/Toggle/Toggle.js +0 -90
  259. package/dist/components-v2/ui/accordion.d.ts +0 -12
  260. package/dist/components-v2/ui/accordion.js +0 -104
  261. package/dist/components-v2/ui/alert.d.ts +0 -18
  262. package/dist/components-v2/ui/alert.js +0 -99
  263. package/dist/components-v2/ui/avatar.d.ts +0 -12
  264. package/dist/components-v2/ui/avatar.js +0 -80
  265. package/dist/components-v2/ui/badge.d.ts +0 -10
  266. package/dist/components-v2/ui/badge.js +0 -76
  267. package/dist/components-v2/ui/button.d.ts +0 -18
  268. package/dist/components-v2/ui/button.js +0 -97
  269. package/dist/components-v2/ui/checkbox.d.ts +0 -15
  270. package/dist/components-v2/ui/checkbox.js +0 -86
  271. package/dist/components-v2/ui/dialog.d.ts +0 -30
  272. package/dist/components-v2/ui/dialog.js +0 -115
  273. package/dist/components-v2/ui/dropdown-menu.d.ts +0 -26
  274. package/dist/components-v2/ui/dropdown-menu.js +0 -121
  275. package/dist/components-v2/ui/field.d.ts +0 -32
  276. package/dist/components-v2/ui/field.js +0 -62
  277. package/dist/components-v2/ui/form-field.d.ts +0 -25
  278. package/dist/components-v2/ui/form-field.js +0 -96
  279. package/dist/components-v2/ui/input.d.ts +0 -9
  280. package/dist/components-v2/ui/input.js +0 -73
  281. package/dist/components-v2/ui/label.d.ts +0 -10
  282. package/dist/components-v2/ui/label.js +0 -70
  283. package/dist/components-v2/ui/popover.d.ts +0 -9
  284. package/dist/components-v2/ui/popover.js +0 -60
  285. package/dist/components-v2/ui/progress.d.ts +0 -12
  286. package/dist/components-v2/ui/progress.js +0 -75
  287. package/dist/components-v2/ui/radio-group.d.ts +0 -17
  288. package/dist/components-v2/ui/radio-group.js +0 -91
  289. package/dist/components-v2/ui/select.d.ts +0 -24
  290. package/dist/components-v2/ui/select.js +0 -122
  291. package/dist/components-v2/ui/separator.d.ts +0 -5
  292. package/dist/components-v2/ui/separator.js +0 -55
  293. package/dist/components-v2/ui/skeleton.d.ts +0 -9
  294. package/dist/components-v2/ui/skeleton.js +0 -68
  295. package/dist/components-v2/ui/spinner.d.ts +0 -16
  296. package/dist/components-v2/ui/spinner.js +0 -64
  297. package/dist/components-v2/ui/switch.d.ts +0 -10
  298. package/dist/components-v2/ui/switch.js +0 -81
  299. package/dist/components-v2/ui/tabs.d.ts +0 -13
  300. package/dist/components-v2/ui/tabs.js +0 -95
  301. package/dist/components-v2/ui/textarea.d.ts +0 -10
  302. package/dist/components-v2/ui/textarea.js +0 -96
  303. package/dist/components-v2/ui/tooltip.d.ts +0 -17
  304. package/dist/components-v2/ui/tooltip.js +0 -75
  305. package/dist/lib/utils.d.ts +0 -2
  306. package/dist/lib/utils.js +0 -8
  307. package/dist/theme-v2/ThemeProvider.d.ts +0 -19
  308. package/dist/theme-v2/ThemeProvider.js +0 -149
  309. package/dist/theme-v2/dark.css +0 -47
  310. package/dist/theme-v2/tokens.css +0 -72
  311. /package/dist/Components/Table/{Components → components}/HeaderActions.d.ts +0 -0
  312. /package/dist/Components/Table/{Components → components}/HeaderActions.js +0 -0
  313. /package/dist/Components/Table/{Components → components}/Pagination.d.ts +0 -0
  314. /package/dist/Components/Table/{Components → components}/Pagination.js +0 -0
  315. /package/dist/Components/Table/{Components → components}/TableBody.d.ts +0 -0
  316. /package/dist/Components/Table/{Components → components}/TableBody.virtualize.test.d.ts +0 -0
  317. /package/dist/Components/Table/{Components → components}/TableBody.virtualize.test.js +0 -0
  318. /package/dist/Components/Table/{Components → components}/TableGroupRow.d.ts +0 -0
  319. /package/dist/Components/Table/{Components → components}/TableGroupRow.js +0 -0
  320. /package/dist/Components/Table/{Components → components}/TableHeader.d.ts +0 -0
  321. /package/dist/Components/Table/{Components → components}/TableLoading.d.ts +0 -0
  322. /package/dist/Components/Table/{Components → components}/TableLoading.js +0 -0
  323. /package/dist/Components/Table/{Components → components}/TableSearch.d.ts +0 -0
  324. /package/dist/Components/Table/{Components → components}/TableSearch.js +0 -0
package/dist/Components/SearchSelect/SearchSelect.js CHANGED
@@ -90,19 +90,26 @@ var SearchSelect = function (_a) {
90
90
  var _y = (0, react_1.useState)(true), hasMore = _y[0], setHasMore = _y[1];
91
91
  var inputRef = (0, react_1.useRef)(null);
92
92
  var containerRef = (0, react_1.useRef)(null);
93
+ var controlRef = (0, react_1.useRef)(null);
94
+ var _z = (0, react_1.useState)({ top: 0, left: 0, width: 0 }), dropdownPos = _z[0], setDropdownPos = _z[1];
93
95
  var scrollTimeoutRef = (0, react_1.useRef)(null);
94
- var _z = (0, react_1.useState)(false), focused = _z[0], setFocused = _z[1];
95
- var _0 = (0, react_1.useState)(false), customSelectOpen = _0[0], setCustomSelectOpen = _0[1];
96
+ var _0 = (0, react_1.useState)(false), focused = _0[0], setFocused = _0[1];
97
+ var _1 = (0, react_1.useState)(false), customSelectOpen = _1[0], setCustomSelectOpen = _1[1];
96
98
  var customSelectRef = (0, react_1.useRef)(null);
97
- var _1 = (0, react_1.useState)({
99
+ var _2 = (0, react_1.useState)({
98
100
  top: 0,
99
101
  left: 0,
100
102
  width: 0,
101
- }), customSelectPos = _1[0], setCustomSelectPos = _1[1];
103
+ }), customSelectPos = _2[0], setCustomSelectPos = _2[1];
102
104
  var theme = (0, useCustomTheme_1.useCustomTheme)();
103
105
  (0, react_2.useOutsideClick)({
104
106
  ref: containerRef,
105
- handler: function () {
107
+ handler: function (e) {
108
+ // The options dropdown is portaled to <body>, so a click on it is "outside"
109
+ // the container — ignore those so selecting an option doesn't close first.
110
+ var dropdown = document.getElementById("searchselect-dropdown-portal");
111
+ if (dropdown && dropdown.contains(e.target))
112
+ return;
106
113
  setIsOpen(false);
107
114
  },
108
115
  });
@@ -223,10 +230,34 @@ var SearchSelect = function (_a) {
223
230
  });
224
231
  }
225
232
  }, [customSelectOpen]);
233
+ // Keep the portaled options dropdown anchored to the control (on open + while
234
+ // open if the page/modal scrolls or resizes).
235
+ var updateDropdownPos = (0, react_1.useCallback)(function () {
236
+ if (!controlRef.current)
237
+ return;
238
+ var rect = controlRef.current.getBoundingClientRect();
239
+ setDropdownPos({
240
+ top: rect.bottom + window.scrollY,
241
+ left: rect.left + window.scrollX,
242
+ width: rect.width,
243
+ });
244
+ }, []);
245
+ (0, react_1.useEffect)(function () {
246
+ if (!isOpen)
247
+ return;
248
+ updateDropdownPos();
249
+ // `true` (capture) catches scrolling inside any ancestor (e.g. modal body).
250
+ window.addEventListener("scroll", updateDropdownPos, true);
251
+ window.addEventListener("resize", updateDropdownPos);
252
+ return function () {
253
+ window.removeEventListener("scroll", updateDropdownPos, true);
254
+ window.removeEventListener("resize", updateDropdownPos);
255
+ };
256
+ }, [isOpen, updateDropdownPos]);
226
257
  return (react_1.default.createElement(react_2.Box, { ref: containerRef, width: width, position: "relative" },
227
258
  label && (react_1.default.createElement(FormLabel_1.TextLabel, { label: label, id: id, isRequired: isRequired, isInformation: isInformation !== null && isInformation !== void 0 ? isInformation : information === null || information === void 0 ? void 0 : information.isInformation, informationMessage: informationMessage !== null && informationMessage !== void 0 ? informationMessage : information === null || information === void 0 ? void 0 : information.informationMessage })),
228
259
  react_1.default.createElement(react_2.InputGroup, { size: size },
229
- react_1.default.createElement(react_2.Box, { as: "div", w: "100%", minH: s.minH, px: s.px, pr: s.pr, position: "relative", display: "flex", alignItems: "center", flexWrap: "wrap", gap: s.gap, border: "0.063rem solid", borderColor: error
260
+ react_1.default.createElement(react_2.Box, { as: "div", ref: controlRef, w: "100%", minH: s.minH, px: s.px, pr: s.pr, position: "relative", display: "flex", alignItems: "center", flexWrap: "wrap", gap: s.gap, border: "0.063rem solid", borderColor: error
230
261
  ? theme.colors.semantic.error[500]
231
262
  : focused
232
263
  ? theme.colors.primary[500]
@@ -275,22 +306,23 @@ var SearchSelect = function (_a) {
275
306
  e.stopPropagation();
276
307
  setIsOpen(function (prev) { return !prev; });
277
308
  }, "aria-label": "toggle-dropdown", display: "flex", alignItems: "center" }, isOpen ? (react_1.default.createElement(lucide_react_1.ChevronUp, { size: s.chevronSize })) : (react_1.default.createElement(lucide_react_1.ChevronDown, { size: s.chevronSize }))))))),
278
- isOpen && (react_1.default.createElement(react_2.Box, { position: "absolute", zIndex: 10, width: "100%", maxH: "20rem", borderWidth: 1, borderRadius: "sm", bg: theme.colors.white, boxShadow: "md", display: "flex", flexDirection: "column" },
279
- isMultiple && isSelectAll && (react_1.default.createElement(react_2.Box, { py: s.optionRowPy, px: 3, cursor: "pointer", onClick: handleSelectAll, display: "flex", alignItems: "center", gap: 2, borderBottom: "0.063rem solid ".concat(theme.colors.gray[100]) },
280
- react_1.default.createElement(Checkbox_1.default, { isChecked: allFilteredSelected, sx: { pointerEvents: "none" }, size: s.checkboxSize }),
281
- react_1.default.createElement(react_2.Text, { fontSize: s.dropdownTextFontSize }, allFilteredSelected ? "Unselect All" : "Select All"))),
282
- react_1.default.createElement(react_2.Box, { flex: "1", overflowY: "auto", onScroll: handleScroll, maxH: "15rem", borderBottom: "0.063rem solid", borderColor: theme.colors.gray[200] }, isOptionLoading && filteredOptions.length === 0 ? (react_1.default.createElement(react_2.Box, { py: s.optionRowPy, px: 3, display: "flex", alignItems: "center", gap: 2, minH: s.optionRowMinH },
283
- react_1.default.createElement(react_2.Spinner, { size: s.spinnerSize }),
284
- react_1.default.createElement(react_2.Text, { fontSize: s.dropdownTextFontSize }, loadingText))) : !isOptionLoading && filteredOptions.length === 0 ? (react_1.default.createElement(react_2.Text, { p: 3, fontSize: s.dropdownTextFontSize, color: theme.colors.gray[500] }, "No results found")) : (react_1.default.createElement(react_1.default.Fragment, null,
285
- filteredOptions.map(function (option) { return (react_1.default.createElement(react_2.Box, { key: option.id, py: s.optionRowPy, px: 3, minH: s.optionRowMinH, cursor: "pointer", bg: isSelected(option.id) ? theme.colors.gray[100] : "transparent", _hover: { bg: theme.colors.gray[50] }, onClick: function () { return handleSelect(option); }, display: "flex", alignItems: "center", gap: 2, borderBottom: "0.063rem solid ".concat(theme.colors.gray[100]) },
286
- isMultiple && (react_1.default.createElement(Checkbox_1.default, { isChecked: isSelected(option.id), sx: { pointerEvents: "none" }, size: s.checkboxSize })),
287
- option.view ? (react_1.default.createElement(react_1.default.Fragment, null, option.view)) : (react_1.default.createElement(react_2.Text, { fontSize: s.dropdownTextFontSize }, option.label)))); }),
288
- ((pagination === null || pagination === void 0 ? void 0 : pagination.scrollLoading) || (isOptionLoading && filteredOptions.length > 0)) && (react_1.default.createElement(react_2.Box, { py: s.optionRowPy, px: 3, display: "flex", alignItems: "center", justifyContent: "center", gap: 2, minH: s.optionRowMinH },
309
+ isOpen && (react_1.default.createElement(react_2.Portal, null,
310
+ react_1.default.createElement(react_2.Box, { id: "searchselect-dropdown-portal", position: "absolute", top: "".concat(dropdownPos.top, "px"), left: "".concat(dropdownPos.left, "px"), width: "".concat(dropdownPos.width, "px"), zIndex: 1500, maxH: "20rem", borderWidth: 1, borderColor: theme.colors.gray[200], borderRadius: "sm", bg: theme.colors.white, boxShadow: "md", display: "flex", flexDirection: "column" },
311
+ isMultiple && isSelectAll && (react_1.default.createElement(react_2.Box, { py: s.optionRowPy, px: 3, cursor: "pointer", onClick: handleSelectAll, display: "flex", alignItems: "center", gap: 2, borderBottom: "0.063rem solid ".concat(theme.colors.gray[100]) },
312
+ react_1.default.createElement(Checkbox_1.default, { isChecked: allFilteredSelected, sx: { pointerEvents: "none" }, size: s.checkboxSize }),
313
+ react_1.default.createElement(react_2.Text, { fontSize: s.dropdownTextFontSize }, allFilteredSelected ? "Unselect All" : "Select All"))),
314
+ react_1.default.createElement(react_2.Box, { flex: "1", overflowY: "auto", onScroll: handleScroll, maxH: "15rem", borderBottom: "0.063rem solid", borderColor: theme.colors.gray[200] }, isOptionLoading && filteredOptions.length === 0 ? (react_1.default.createElement(react_2.Box, { py: s.optionRowPy, px: 3, display: "flex", alignItems: "center", gap: 2, minH: s.optionRowMinH },
289
315
  react_1.default.createElement(react_2.Spinner, { size: s.spinnerSize }),
290
- react_1.default.createElement(react_2.Text, { fontSize: s.dropdownTextFontSize }, loadingText)))))),
291
- (addNew === null || addNew === void 0 ? void 0 : addNew.enabled) && (react_1.default.createElement(react_2.Box, { py: s.optionRowPy, px: 3, borderTop: "0.063rem solid", borderColor: theme.colors.gray[200], bg: theme.colors.white, display: "flex", alignItems: "center", gap: 2, minH: s.optionRowMinH, cursor: "pointer", onClick: addNew.onClick, _hover: { bg: theme.colors.gray[50] } },
292
- addNew.icon || react_1.default.createElement(lucide_react_1.Plus, { size: s.addNewIconSize }),
293
- react_1.default.createElement(react_2.Text, { fontSize: s.dropdownTextFontSize }, addNew.text || "Add New"))))),
316
+ react_1.default.createElement(react_2.Text, { fontSize: s.dropdownTextFontSize }, loadingText))) : !isOptionLoading && filteredOptions.length === 0 ? (react_1.default.createElement(react_2.Text, { p: 3, fontSize: s.dropdownTextFontSize, color: theme.colors.gray[500] }, "No results found")) : (react_1.default.createElement(react_1.default.Fragment, null,
317
+ filteredOptions.map(function (option) { return (react_1.default.createElement(react_2.Box, { key: option.id, py: s.optionRowPy, px: 3, minH: s.optionRowMinH, cursor: "pointer", bg: isSelected(option.id) ? theme.colors.gray[100] : "transparent", _hover: { bg: theme.colors.gray[50] }, onClick: function () { return handleSelect(option); }, display: "flex", alignItems: "center", gap: 2, borderBottom: "0.063rem solid ".concat(theme.colors.gray[100]) },
318
+ isMultiple && (react_1.default.createElement(Checkbox_1.default, { isChecked: isSelected(option.id), sx: { pointerEvents: "none" }, size: s.checkboxSize })),
319
+ option.view ? (react_1.default.createElement(react_1.default.Fragment, null, option.view)) : (react_1.default.createElement(react_2.Text, { fontSize: s.dropdownTextFontSize }, option.label)))); }),
320
+ ((pagination === null || pagination === void 0 ? void 0 : pagination.scrollLoading) || (isOptionLoading && filteredOptions.length > 0)) && (react_1.default.createElement(react_2.Box, { py: s.optionRowPy, px: 3, display: "flex", alignItems: "center", justifyContent: "center", gap: 2, minH: s.optionRowMinH },
321
+ react_1.default.createElement(react_2.Spinner, { size: s.spinnerSize }),
322
+ react_1.default.createElement(react_2.Text, { fontSize: s.dropdownTextFontSize }, loadingText)))))),
323
+ (addNew === null || addNew === void 0 ? void 0 : addNew.enabled) && (react_1.default.createElement(react_2.Box, { py: s.optionRowPy, px: 3, borderTop: "0.063rem solid", borderColor: theme.colors.gray[200], bg: theme.colors.white, display: "flex", alignItems: "center", gap: 2, minH: s.optionRowMinH, cursor: "pointer", onClick: addNew.onClick, _hover: { bg: theme.colors.gray[50] } },
324
+ addNew.icon || react_1.default.createElement(lucide_react_1.Plus, { size: s.addNewIconSize }),
325
+ react_1.default.createElement(react_2.Text, { fontSize: s.dropdownTextFontSize }, addNew.text || "Add New")))))),
294
326
  helperText && !error && react_1.default.createElement(HelperText_1.default, { helperText: helperText }),
295
327
  error && react_1.default.createElement(ErrorMessage_1.default, { errorMessage: errorMessage })));
296
328
  };
package/dist/Components/Table/Table.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  import React from "react";
2
2
  import { TableProps } from "./TableProps";
3
- export default function Table({ data, columns, onSelection, isLoading, isCheckbox, headerBgColor, freezedBgColor, headerTextColor, freezedTextColor, tableBorderColor, noBorders, isPagination, onRowClick, selections, isActionFreeze, preferences, paginationMode, infiniteScroll, hasMore, isLoadingMore, noOfRowsPerPage, totalRecords, onPagination, isTableSettings, headerActions, onGlobalSearch, onNoOfRowsPerPageChange, paginationSelectOptions, tableMaxHeight, minVisibleRows, maxVisibleRows, autoFitViewport, tableSettings, filterSidebar, loadingSkeletonRows, defaultVisibleColumns, density, stripe, groupBy, groupColors, onAddItem, emptyState, }: TableProps): React.JSX.Element;
3
+ export default function Table({ data, columns, onSelection, isLoading, isCheckbox, headerBgColor, freezedBgColor, headerTextColor, freezedTextColor, tableBorderColor, noBorders, isPagination, onRowClick, selections, isActionFreeze, preferences, paginationMode, infiniteScroll, hasMore, isLoadingMore, groupLoadMore, loadMoreText, loadMorePosition, loadMoreChunkSize, noOfRowsPerPage, totalRecords, onPagination, isTableSettings, headerActions, onGlobalSearch, onNoOfRowsPerPageChange, paginationSelectOptions, tableMaxHeight, minVisibleRows, maxVisibleRows, autoFitViewport, tableSettings, filterSidebar, loadingSkeletonRows, defaultVisibleColumns, density, stripe, groupColors, onAddItem, emptyState, }: TableProps): React.JSX.Element;
package/dist/Components/Table/Table.js CHANGED
@@ -43,6 +43,15 @@ var __importStar = (this && this.__importStar) || (function () {
43
43
  return result;
44
44
  };
45
45
  })();
46
+ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
47
+ if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
48
+ if (ar || !(i in from)) {
49
+ if (!ar) ar = Array.prototype.slice.call(from, 0, i);
50
+ ar[i] = from[i];
51
+ }
52
+ }
53
+ return to.concat(ar || Array.prototype.slice.call(from));
54
+ };
46
55
  var __importDefault = (this && this.__importDefault) || function (mod) {
47
56
  return (mod && mod.__esModule) ? mod : { "default": mod };
48
57
  };
@@ -65,33 +74,34 @@ var HeaderActions_1 = __importDefault(require("./components/HeaderActions"));
65
74
  var Divider_1 = __importDefault(require("../Divider/Divider"));
66
75
  var TableSearch_1 = __importDefault(require("./components/TableSearch"));
67
76
  var ActiveFilters_1 = __importDefault(require("./filters/ActiveFilters"));
77
+ var Button_1 = __importDefault(require("../Button/Button"));
68
78
  var lucide_react_1 = require("lucide-react");
69
79
  var MotionBox = (0, framer_motion_1.motion)(react_2.Box);
70
80
  function Table(_a) {
71
- var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8;
72
- var data = _a.data, columns = _a.columns, onSelection = _a.onSelection, isLoading = _a.isLoading, _9 = _a.isCheckbox, isCheckbox = _9 === void 0 ? false : _9, headerBgColor = _a.headerBgColor, freezedBgColor = _a.freezedBgColor, headerTextColor = _a.headerTextColor, freezedTextColor = _a.freezedTextColor, tableBorderColor = _a.tableBorderColor, _10 = _a.noBorders, noBorders = _10 === void 0 ? false : _10, _11 = _a.isPagination, isPagination = _11 === void 0 ? true : _11, onRowClick = _a.onRowClick, selections = _a.selections, _12 = _a.isActionFreeze, isActionFreeze = _12 === void 0 ? true : _12, _13 = _a.preferences, preferences = _13 === void 0 ? {
81
+ var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13;
82
+ var data = _a.data, columns = _a.columns, onSelection = _a.onSelection, isLoading = _a.isLoading, _14 = _a.isCheckbox, isCheckbox = _14 === void 0 ? false : _14, headerBgColor = _a.headerBgColor, freezedBgColor = _a.freezedBgColor, headerTextColor = _a.headerTextColor, freezedTextColor = _a.freezedTextColor, tableBorderColor = _a.tableBorderColor, _15 = _a.noBorders, noBorders = _15 === void 0 ? false : _15, _16 = _a.isPagination, isPagination = _16 === void 0 ? true : _16, onRowClick = _a.onRowClick, selections = _a.selections, _17 = _a.isActionFreeze, isActionFreeze = _17 === void 0 ? true : _17, _18 = _a.preferences, preferences = _18 === void 0 ? {
73
83
  url: "",
74
84
  token: "",
75
85
  key: "",
76
86
  name: "",
77
87
  page: "",
78
88
  orgId: "",
79
- } : _13, _14 = _a.paginationMode, paginationMode = _14 === void 0 ? "client" : _14, _15 = _a.infiniteScroll, infiniteScroll = _15 === void 0 ? false : _15, hasMore = _a.hasMore, _16 = _a.isLoadingMore, isLoadingMore = _16 === void 0 ? false : _16, _17 = _a.noOfRowsPerPage, noOfRowsPerPage = _17 === void 0 ? 50 : _17, _18 = _a.totalRecords, totalRecords = _18 === void 0 ? 0 : _18, onPagination = _a.onPagination, _19 = _a.isTableSettings, isTableSettings = _19 === void 0 ? false : _19, headerActions = _a.headerActions, onGlobalSearch = _a.onGlobalSearch, onNoOfRowsPerPageChange = _a.onNoOfRowsPerPageChange, paginationSelectOptions = _a.paginationSelectOptions, tableMaxHeight = _a.tableMaxHeight, minVisibleRows = _a.minVisibleRows, maxVisibleRows = _a.maxVisibleRows, autoFitViewport = _a.autoFitViewport, tableSettings = _a.tableSettings, filterSidebar = _a.filterSidebar, loadingSkeletonRows = _a.loadingSkeletonRows, defaultVisibleColumns = _a.defaultVisibleColumns, _20 = _a.density, density = _20 === void 0 ? "normal" : _20, stripe = _a.stripe, groupBy = _a.groupBy, groupColors = _a.groupColors, onAddItem = _a.onAddItem, emptyState = _a.emptyState;
89
+ } : _18, _19 = _a.paginationMode, paginationMode = _19 === void 0 ? "client" : _19, _20 = _a.infiniteScroll, infiniteScroll = _20 === void 0 ? false : _20, hasMore = _a.hasMore, _21 = _a.isLoadingMore, isLoadingMore = _21 === void 0 ? false : _21, _22 = _a.groupLoadMore, groupLoadMore = _22 === void 0 ? false : _22, _23 = _a.loadMoreText, loadMoreText = _23 === void 0 ? "Load more" : _23, _24 = _a.loadMorePosition, loadMorePosition = _24 === void 0 ? "top" : _24, loadMoreChunkSize = _a.loadMoreChunkSize, _25 = _a.noOfRowsPerPage, noOfRowsPerPage = _25 === void 0 ? 50 : _25, _26 = _a.totalRecords, totalRecords = _26 === void 0 ? 0 : _26, onPagination = _a.onPagination, _27 = _a.isTableSettings, isTableSettings = _27 === void 0 ? false : _27, headerActions = _a.headerActions, onGlobalSearch = _a.onGlobalSearch, onNoOfRowsPerPageChange = _a.onNoOfRowsPerPageChange, paginationSelectOptions = _a.paginationSelectOptions, tableMaxHeight = _a.tableMaxHeight, minVisibleRows = _a.minVisibleRows, maxVisibleRows = _a.maxVisibleRows, autoFitViewport = _a.autoFitViewport, tableSettings = _a.tableSettings, filterSidebar = _a.filterSidebar, loadingSkeletonRows = _a.loadingSkeletonRows, defaultVisibleColumns = _a.defaultVisibleColumns, _28 = _a.density, density = _28 === void 0 ? "normal" : _28, stripe = _a.stripe, groupColors = _a.groupColors, onAddItem = _a.onAddItem, emptyState = _a.emptyState;
80
90
  var theme = (0, useCustomTheme_1.useCustomTheme)();
81
- var _21 = (0, react_1.useState)({}), columnsSearch = _21[0], setColumnsSearch = _21[1];
91
+ var _29 = (0, react_1.useState)({}), columnsSearch = _29[0], setColumnsSearch = _29[1];
82
92
  var tableContainerRef = (0, react_1.useRef)(null);
83
- var _22 = (0, react_2.useDisclosure)(), isFilterModalOpen = _22.isOpen, onFilterModalOpen = _22.onOpen, onFilterModalClose = _22.onClose;
93
+ var _30 = (0, react_2.useDisclosure)(), isFilterModalOpen = _30.isOpen, onFilterModalOpen = _30.onOpen, onFilterModalClose = _30.onClose;
84
94
  var filterMode = (_b = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.filterMode) !== null && _b !== void 0 ? _b : "sidebar";
85
- var _23 = (0, react_1.useState)(500), viewportAvailableH = _23[0], setViewportAvailableH = _23[1];
95
+ var _31 = (0, react_1.useState)(500), viewportAvailableH = _31[0], setViewportAvailableH = _31[1];
86
96
  var isServerPagination = paginationMode === "server";
87
- var _24 = (0, usePreferences_1.useGetPreferences)({
97
+ var _32 = (0, usePreferences_1.useGetPreferences)({
88
98
  baseUrl: preferences.url,
89
99
  page: preferences.page,
90
100
  key: preferences.key,
91
101
  name: preferences.name,
92
102
  authToken: preferences.token,
93
103
  orgId: preferences.orgId,
94
- }), tablePreferencesData = _24.preferences, loading = _24.loading;
104
+ }), tablePreferencesData = _32.preferences, loading = _32.loading;
95
105
  var savePreferences = (0, usePreferences_1.useSavePreferences)({
96
106
  baseUrl: preferences.url,
97
107
  page: preferences.page,
@@ -109,7 +119,7 @@ function Table(_a) {
109
119
  }
110
120
  return {};
111
121
  }, [tablePreferencesData]);
112
- var _25 = (0, useTable_1.default)({
122
+ var _33 = (0, useTable_1.default)({
113
123
  tableBorderColor: tableBorderColor,
114
124
  data: data,
115
125
  isPagination: isPagination,
@@ -123,37 +133,116 @@ function Table(_a) {
123
133
  isServerPagination: isServerPagination,
124
134
  onNoOfRowsPerPageChange: onNoOfRowsPerPageChange,
125
135
  defaultVisibleColumns: defaultVisibleColumns,
126
- }), tableData = _25.tableData, isContent = _25.isContent, isLink = _25.isLink, headerRefs = _25.headerRefs, columnWidths = _25.columnWidths, handleSort = _25.handleSort, handleCheckbox = _25.handleCheckbox, filteredData = _25.filteredData, startRow = _25.startRow, endRow = _25.endRow, selection = _25.selection, columnsSort = _25.columnsSort, currentPage = _25.currentPage, pages = _25.pages, rowsPerPage = _25.rowsPerPage, handlePageSizeChange = _25.handlePageSizeChange, setCurrentPage = _25.setCurrentPage, columnsList = _25.columnsList, handleColumnPreferences = _25.handleColumnPreferences, isSelecting = _25.isSelecting;
127
- // Density is managed here so the Table Settings tab can change + persist it
128
- // (seeded from the prop, then from saved preferences when they load).
129
- var _26 = (0, react_1.useState)(density), densityState = _26[0], setDensityState = _26[1];
136
+ }), tableData = _33.tableData, isContent = _33.isContent, isLink = _33.isLink, headerRefs = _33.headerRefs, columnWidths = _33.columnWidths, handleSort = _33.handleSort, handleCheckbox = _33.handleCheckbox, filteredData = _33.filteredData, startRow = _33.startRow, endRow = _33.endRow, selection = _33.selection, columnsSort = _33.columnsSort, currentPage = _33.currentPage, pages = _33.pages, rowsPerPage = _33.rowsPerPage, handlePageSizeChange = _33.handlePageSizeChange, setCurrentPage = _33.setCurrentPage, columnsList = _33.columnsList, handleColumnPreferences = _33.handleColumnPreferences, isSelecting = _33.isSelecting;
137
+ // Density + grouping are managed here so the Table Settings tabs can change +
138
+ // persist them (seeded from the prop / saved preferences when they load).
139
+ var _34 = (0, react_1.useState)(density), densityState = _34[0], setDensityState = _34[1];
140
+ // Grouping is chosen by the user in Table Settings > Group and persisted to
141
+ // preferences (`json.groupBy`); there is no `groupBy` prop.
142
+ var _35 = (0, react_1.useState)(undefined), groupByState = _35[0], setGroupByState = _35[1];
143
+ // Grouped "Load more" accumulates pages here so loading more ADDS rows to the
144
+ // groups (server pagination replaces `data` each fetch). Reset on fresh loads
145
+ // (search / filter / sort / page-size). Only used in grouped + groupLoadMore mode.
146
+ var _36 = (0, react_1.useState)([]), accumulatedRows = _36[0], setAccumulatedRows = _36[1];
147
+ var pendingLoadMoreRef = (0, react_1.useRef)(false);
148
+ // Pages loaded so far (1 = the initial page). The next page is derived from this
149
+ // counter — NOT from the deduped row count — so overlapping rows across pages
150
+ // (e.g. pinned rows that repeat on every page) don't stall the page index.
151
+ var loadedPagesRef = (0, react_1.useRef)(1);
152
+ (0, react_1.useEffect)(function () {
153
+ if (!groupLoadMore)
154
+ return;
155
+ setAccumulatedRows(function (prev) {
156
+ if (prev.length === 0) {
157
+ loadedPagesRef.current = 1;
158
+ return tableData.slice();
159
+ }
160
+ var accIds = new Set(prev.map(function (r) { return r.id; }));
161
+ if (pendingLoadMoreRef.current) {
162
+ // A "Load more" is in flight. The parent may re-emit the SAME page (new
163
+ // array reference) on intermediate re-renders before the next page arrives,
164
+ // so only append + consume the flag once genuinely new rows show up.
165
+ var newRows = tableData.filter(function (r) { return !accIds.has(r.id); });
166
+ if (newRows.length === 0)
167
+ return prev; // same page re-emitted — keep waiting
168
+ pendingLoadMoreRef.current = false;
169
+ return __spreadArray(__spreadArray([], prev, true), newRows, true);
170
+ }
171
+ // Not a load-more: a re-emit of already-loaded rows keeps the accumulation
172
+ // (the parent re-renders the current page often). Genuinely new rows
173
+ // (search / filter / sort / page-size / reload) reset it.
174
+ var allKnown = tableData.length > 0 && tableData.every(function (r) { return accIds.has(r.id); });
175
+ if (allKnown)
176
+ return prev;
177
+ loadedPagesRef.current = 1; // fresh data set
178
+ return tableData.slice();
179
+ });
180
+ // eslint-disable-next-line react-hooks/exhaustive-deps
181
+ }, [tableData, groupLoadMore]);
182
+ // Page-size change restarts the accumulation (the page boundaries change), so the
183
+ // next "Load more" requests page 2 of the NEW size, not a stale page index.
184
+ var rowsPerPageMountedRef = (0, react_1.useRef)(false);
185
+ (0, react_1.useEffect)(function () {
186
+ if (!rowsPerPageMountedRef.current) {
187
+ rowsPerPageMountedRef.current = true;
188
+ return;
189
+ }
190
+ pendingLoadMoreRef.current = false;
191
+ loadedPagesRef.current = 1;
192
+ setAccumulatedRows(tableData); // current page at the new size (not empty)
193
+ // eslint-disable-next-line react-hooks/exhaustive-deps
194
+ }, [rowsPerPage]);
130
195
  (0, react_1.useEffect)(function () {
131
196
  if (tablePreferences === null || tablePreferences === void 0 ? void 0 : tablePreferences.density)
132
197
  setDensityState(tablePreferences.density);
133
198
  }, [tablePreferences === null || tablePreferences === void 0 ? void 0 : tablePreferences.density]);
199
+ (0, react_1.useEffect)(function () {
200
+ if (tablePreferences && "groupBy" in tablePreferences) {
201
+ var saved = tablePreferences.groupBy;
202
+ setGroupByState(saved === null || saved === undefined || saved === "" ? undefined : saved);
203
+ }
204
+ }, [tablePreferences === null || tablePreferences === void 0 ? void 0 : tablePreferences.groupBy]);
134
205
  var handleDensityChange = function (d) {
135
206
  setDensityState(d);
136
- savePreferences === null || savePreferences === void 0 ? void 0 : savePreferences(__assign(__assign({}, tablePreferences), { columns: columnsList, density: d }));
207
+ savePreferences === null || savePreferences === void 0 ? void 0 : savePreferences(__assign(__assign({}, tablePreferences), { columns: columnsList, groupBy: groupByState !== null && groupByState !== void 0 ? groupByState : null, density: d }));
208
+ };
209
+ // Settings "Save": persist columns + group (+ current density) in ONE write so
210
+ // they don't clobber each other, and apply them locally.
211
+ var handleSettingsSave = function (cols, group) {
212
+ setGroupByState(group);
213
+ handleColumnPreferences(cols, { density: densityState, groupBy: group !== null && group !== void 0 ? group : null });
137
214
  };
138
215
  var _filteredData = (0, react_1.useMemo)(function () {
139
216
  return (0, table_1.searchAndSortData)(filteredData, columnsSearch);
140
217
  }, [columnsSearch, filteredData]);
141
- // --- Monday-style grouping (client-side). When active, pagination is hidden
142
- // and the body renders colored, collapsible groups over the full dataset. ---
143
- var isGrouped = !!groupBy && !isServerPagination;
218
+ // --- Monday-style grouping. Active whenever the user has picked a group column
219
+ // (in Settings > Group). When active, the numbered pager / infinite scroll are
220
+ // hidden and the body renders colored, collapsible groups over the loaded rows.
221
+ // `groupLoadMore` adds a "Load more" button on top to fetch more into the groups. ---
222
+ var isGrouped = !!groupByState;
144
223
  // Infinite scroll (server mode, not grouped): load more on scroll-near-bottom.
145
224
  var canInfinite = infiniteScroll && !isGrouped;
225
+ // Grouped "Load more": the accumulated pages back the grouped board so loading
226
+ // more grows the groups instead of replacing them.
227
+ var loadMoreBase = isGrouped && groupLoadMore ? accumulatedRows : tableData;
228
+ var hasMoreEffective = typeof hasMore === "boolean"
229
+ ? hasMore
230
+ : isServerPagination
231
+ ? loadMoreBase.length < totalRecords
232
+ : false;
233
+ var canGroupLoadMore = isGrouped && groupLoadMore && hasMoreEffective;
146
234
  var groupPalette = (0, react_1.useMemo)(function () { return (0, table_1.buildTablePalette)(theme); }, [theme]);
147
235
  var groupedSource = (0, react_1.useMemo)(function () {
148
236
  if (!isGrouped)
149
237
  return [];
150
- return (0, table_1.searchAndSortData)((0, table_1.SortMultiColumnData)(tableData, columnsSort), columnsSearch);
151
- }, [isGrouped, tableData, columnsSort, columnsSearch]);
238
+ var src = groupLoadMore ? accumulatedRows : tableData;
239
+ return (0, table_1.searchAndSortData)((0, table_1.SortMultiColumnData)(src, columnsSort), columnsSearch);
240
+ }, [isGrouped, groupLoadMore, accumulatedRows, tableData, columnsSort, columnsSearch]);
152
241
  var renderGroups = (0, react_1.useMemo)(function () {
153
242
  if (!isGrouped)
154
243
  return undefined;
155
- return (0, table_1.groupRows)(groupedSource, groupBy).map(function (g) { return (__assign(__assign({}, g), { color: (0, table_1.pickTableColor)(g.value, groupPalette, groupColors === null || groupColors === void 0 ? void 0 : groupColors[g.value]) })); });
156
- }, [isGrouped, groupedSource, groupBy, groupPalette, groupColors]);
244
+ return (0, table_1.groupRows)(groupedSource, groupByState).map(function (g) { return (__assign(__assign({}, g), { color: (0, table_1.pickTableColor)(g.value, groupPalette, groupColors === null || groupColors === void 0 ? void 0 : groupColors[g.value]) })); });
245
+ }, [isGrouped, groupedSource, groupByState, groupPalette, groupColors]);
157
246
  var onPaginationRef = (0, react_1.useRef)(onPagination);
158
247
  onPaginationRef.current = onPagination;
159
248
  var prevPageRef = (0, react_1.useRef)(currentPage);
@@ -180,6 +269,26 @@ function Table(_a) {
180
269
  prevPageRef.current = currentPage;
181
270
  }
182
271
  }, [currentPage, rowsPerPage]);
272
+ // Grouped "Load more": request the next chunk; parent appends it to `data` and
273
+ // the table re-groups so new rows land in their respective groups.
274
+ var handleGroupLoadMore = function () {
275
+ var _a;
276
+ if (isLoadingMore || isTableLoading || !hasMoreEffective)
277
+ return;
278
+ // Must request the SAME page size the data was loaded with — a page-count model
279
+ // breaks if pages have different sizes (e.g. page size 100 but a 20-row chunk
280
+ // re-requests already-loaded records). `loadMoreChunkSize` is only a last-resort
281
+ // fallback and is otherwise ignored.
282
+ var chunk = rowsPerPage || loadMoreChunkSize || 20;
283
+ // Advance by page COUNT (not by deduped row count) so overlapping/pinned rows
284
+ // across pages don't keep us stuck on the same page.
285
+ var nextPage = loadedPagesRef.current + 1;
286
+ loadedPagesRef.current = nextPage;
287
+ var lastRecord = loadMoreBase.length > 0 ? loadMoreBase[loadMoreBase.length - 1] : undefined;
288
+ pendingLoadMoreRef.current = true;
289
+ (_a = onPaginationRef.current) === null || _a === void 0 ? void 0 : _a.call(onPaginationRef, nextPage, chunk, lastRecord, "next");
290
+ };
291
+ var groupLoadMoreCaption = totalRecords > 0 ? "Showing ".concat(loadMoreBase.length, " of ").concat(totalRecords) : undefined;
183
292
  var tablePaginationText = (0, react_1.useMemo)(function () { return isServerPagination
184
293
  ? "".concat(startRow + 1, " - ").concat(Math.min(startRow + rowsPerPage, totalRecords), " of ").concat(totalRecords)
185
294
  : "".concat(startRow + 1, " - ").concat(endRow > tableData.length ? tableData.length : endRow, " of ").concat(tableData.length); }, [startRow, rowsPerPage, totalRecords, endRow, tableData.length]);
@@ -292,17 +401,20 @@ function Table(_a) {
292
401
  react_1.default.createElement(TableSearch_1.default, { onSearch: onGlobalSearch }),
293
402
  isTableSettings && (react_1.default.createElement(react_1.default.Fragment, null,
294
403
  react_1.default.createElement(Divider_1.default, null),
295
- react_1.default.createElement(TableSettings_1.default, { columns: columnsList, onSave: function (cols) { return handleColumnPreferences(cols); }, tableSettings: tableSettings, density: densityState, onDensityChange: handleDensityChange }))),
404
+ react_1.default.createElement(TableSettings_1.default, { columns: columnsList, onSave: function (cols, group) { return handleSettingsSave(cols, group); }, tableSettings: tableSettings, density: densityState, onDensityChange: handleDensityChange, groupBy: groupByState }))),
296
405
  headerActions && (react_1.default.createElement(react_1.default.Fragment, null,
297
406
  react_1.default.createElement(Divider_1.default, null),
298
407
  react_1.default.createElement(HeaderActions_1.default, { actions: headerActions, selections: selection }))),
299
408
  react_1.default.createElement(ActiveFilters_1.default, { columns: columnsList, columnsSearch: columnsSearch, setColumnsSearch: setColumnsSearch }),
300
409
  react_1.default.createElement(react_2.Box, { ml: "auto", display: "flex", alignItems: "center", gap: 2 },
410
+ canGroupLoadMore && loadMorePosition === "top" && (react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", gap: 2, flex: "0 0 auto" },
411
+ groupLoadMoreCaption && (react_1.default.createElement(react_2.Box, { fontSize: "0.75rem", color: (_x = (_w = theme.colors) === null || _w === void 0 ? void 0 : _w.text) === null || _x === void 0 ? void 0 : _x[500], whiteSpace: "nowrap" }, groupLoadMoreCaption)),
412
+ react_1.default.createElement(Button_1.default, { size: "xs", variant: "outline", colorScheme: "gray", isLoading: isLoadingMore, loadingText: loadMoreText, onClick: handleGroupLoadMore, label: loadMoreText }))),
301
413
  (isPagination || isServerPagination) && !isGrouped && !canInfinite && !isCompactHeader && (react_1.default.createElement(react_2.Box, { flex: "0 0 auto" },
302
414
  react_1.default.createElement(Pagination_1.default, { columns: columns, currentPage: currentPage, setCurrentPage: setCurrentPage, rowsPerPage: rowsPerPage, pages: pages, paginationText: tablePaginationText, handlePageSizeChange: handlePageSizeChange, dataLength: tableData.length, isServerPagination: isServerPagination, paginationSelectOptions: paginationSelectOptions, isVisiblity: true }))),
303
415
  (isPagination || isServerPagination) && !isGrouped && !canInfinite && isCompactHeader && tableData.length > 0 && (react_1.default.createElement(react_2.Popover, { placement: "bottom-end" },
304
416
  react_1.default.createElement(react_2.PopoverTrigger, null,
305
- react_1.default.createElement(react_2.IconButton, { "aria-label": "More", size: "sm", variant: "ghost", icon: react_1.default.createElement(lucide_react_1.EllipsisVertical, { size: 18, color: (_x = (_w = theme.colors) === null || _w === void 0 ? void 0 : _w.text) === null || _x === void 0 ? void 0 : _x[500] }) })),
417
+ react_1.default.createElement(react_2.IconButton, { "aria-label": "More", size: "sm", variant: "ghost", icon: react_1.default.createElement(lucide_react_1.EllipsisVertical, { size: 18, color: (_z = (_y = theme.colors) === null || _y === void 0 ? void 0 : _y.text) === null || _z === void 0 ? void 0 : _z[500] }) })),
306
418
  react_1.default.createElement(react_2.PopoverContent, { maxW: "22rem", p: 2, overflow: "hidden" },
307
419
  react_1.default.createElement(react_2.PopoverBody, { p: 0 },
308
420
  react_1.default.createElement(Pagination_1.default, { columns: columns, currentPage: currentPage, setCurrentPage: setCurrentPage, rowsPerPage: rowsPerPage, pages: pages, paginationText: tablePaginationText, handlePageSizeChange: handlePageSizeChange, dataLength: tableData.length, isServerPagination: isServerPagination, paginationSelectOptions: paginationSelectOptions, isVisiblity: true }))))))),
@@ -349,15 +461,18 @@ function Table(_a) {
349
461
  zIndex: 999,
350
462
  },
351
463
  } },
352
- react_1.default.createElement(react_3.Thead, { position: "sticky", top: 0, zIndex: 4, bg: (_0 = (_z = (_y = theme.colors.table) === null || _y === void 0 ? void 0 : _y.hover) === null || _z === void 0 ? void 0 : _z[200]) !== null && _0 !== void 0 ? _0 : (_1 = theme.colors.secondary) === null || _1 === void 0 ? void 0 : _1[50] },
353
- react_1.default.createElement(TableHeader_1.default, { columns: columnsList, isCheckbox: isCheckbox, headerBgColor: headerBgColor !== null && headerBgColor !== void 0 ? headerBgColor : theme.colors.backgroundColor.muted, headerTextColor: headerTextColor !== null && headerTextColor !== void 0 ? headerTextColor : (_2 = theme.colors) === null || _2 === void 0 ? void 0 : _2.gray[600], freezedBgColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.backgroundColor.secondary, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : (_3 = theme.colors) === null || _3 === void 0 ? void 0 : _3.gray[600], handleSort: handleSort, headerRefs: headerRefs, columnWidths: columnWidths, columnsSort: columnsSort, noBorders: noBorders, handleCheckbox: handleCheckbox, isLoading: isTableLoading, checked: tableData.length !== 0 && selection.length === tableData.length
464
+ react_1.default.createElement(react_3.Thead, { position: "sticky", top: 0, zIndex: 4, bg: (_2 = (_1 = (_0 = theme.colors.table) === null || _0 === void 0 ? void 0 : _0.hover) === null || _1 === void 0 ? void 0 : _1[200]) !== null && _2 !== void 0 ? _2 : (_3 = theme.colors.secondary) === null || _3 === void 0 ? void 0 : _3[50] },
465
+ react_1.default.createElement(TableHeader_1.default, { columns: columnsList, isCheckbox: isCheckbox, headerBgColor: headerBgColor !== null && headerBgColor !== void 0 ? headerBgColor : theme.colors.backgroundColor.muted, headerTextColor: headerTextColor !== null && headerTextColor !== void 0 ? headerTextColor : (_4 = theme.colors) === null || _4 === void 0 ? void 0 : _4.gray[600], freezedBgColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.backgroundColor.secondary, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : (_5 = theme.colors) === null || _5 === void 0 ? void 0 : _5.gray[600], handleSort: handleSort, headerRefs: headerRefs, columnWidths: columnWidths, columnsSort: columnsSort, noBorders: noBorders, handleCheckbox: handleCheckbox, isLoading: isTableLoading, checked: tableData.length !== 0 && selection.length === tableData.length
354
466
  ? true
355
467
  : selection.length === 0
356
468
  ? false
357
469
  : "indeterminate", isContent: isContent, isLink: isLink, isActionFreeze: isActionFreeze, setColumnsSearch: setColumnsSearch, columnsSearch: columnsSearch, isSelecting: isSelecting })),
358
470
  react_1.default.createElement(react_3.Tbody, null,
359
- react_1.default.createElement(TableBody_1.default, { data: isGrouped ? groupedSource : _filteredData, groups: renderGroups, onAddItem: onAddItem, columns: columnsList, startRow: isGrouped ? 0 : startRow, endRow: endRow, scrollContainerRef: tableContainerRef, isCheckbox: isCheckbox, columnWidths: columnWidths, noBorders: noBorders, freezedBgColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.backgroundColor.secondary, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : (_4 = theme.colors) === null || _4 === void 0 ? void 0 : _4.gray[600], handleCheckbox: handleCheckbox, selections: selection, isLoading: isTableLoading, loadingSkeletonRows: loadingSkeletonRows, onRowClick: onRowClick, isContent: isContent, isLink: isLink, isActionFreeze: isActionFreeze, density: densityState, stripe: stripe, emptyState: emptyState }))),
471
+ react_1.default.createElement(TableBody_1.default, { data: isGrouped ? groupedSource : _filteredData, groups: renderGroups, onAddItem: onAddItem, columns: columnsList, startRow: isGrouped ? 0 : startRow, endRow: endRow, scrollContainerRef: tableContainerRef, isCheckbox: isCheckbox, columnWidths: columnWidths, noBorders: noBorders, freezedBgColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.backgroundColor.secondary, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : (_6 = theme.colors) === null || _6 === void 0 ? void 0 : _6.gray[600], handleCheckbox: handleCheckbox, selections: selection, isLoading: isTableLoading, loadingSkeletonRows: loadingSkeletonRows, onRowClick: onRowClick, isContent: isContent, isLink: isLink, isActionFreeze: isActionFreeze, density: densityState, stripe: stripe, emptyState: emptyState }))),
360
472
  canInfinite && isLoadingMore && (react_1.default.createElement(react_2.Flex, { justify: "center", align: "center", py: 3, gap: 2 },
361
- react_1.default.createElement(react_2.Spinner, { size: "sm", color: (_6 = (_5 = theme.colors) === null || _5 === void 0 ? void 0 : _5.primary) === null || _6 === void 0 ? void 0 : _6[500] }),
362
- react_1.default.createElement(react_2.Box, { fontSize: "0.75rem", color: (_8 = (_7 = theme.colors) === null || _7 === void 0 ? void 0 : _7.text) === null || _8 === void 0 ? void 0 : _8[500] }, "Loading more\u2026"))))))));
473
+ react_1.default.createElement(react_2.Spinner, { size: "sm", color: (_8 = (_7 = theme.colors) === null || _7 === void 0 ? void 0 : _7.primary) === null || _8 === void 0 ? void 0 : _8[500] }),
474
+ react_1.default.createElement(react_2.Box, { fontSize: "0.75rem", color: (_10 = (_9 = theme.colors) === null || _9 === void 0 ? void 0 : _9.text) === null || _10 === void 0 ? void 0 : _10[500] }, "Loading more\u2026")))),
475
+ canGroupLoadMore && loadMorePosition === "bottom" && (react_1.default.createElement(react_2.Flex, { justify: "center", align: "center", gap: 3, py: 3, borderTop: "0.063rem solid ".concat((_11 = theme.colors.border) === null || _11 === void 0 ? void 0 : _11[500]) },
476
+ groupLoadMoreCaption && (react_1.default.createElement(react_2.Box, { fontSize: "0.75rem", color: (_13 = (_12 = theme.colors) === null || _12 === void 0 ? void 0 : _12.text) === null || _13 === void 0 ? void 0 : _13[500] }, groupLoadMoreCaption)),
477
+ react_1.default.createElement(Button_1.default, { size: "xs", variant: "outline", colorScheme: "gray", isLoading: isLoadingMore, loadingText: loadMoreText, onClick: handleGroupLoadMore, label: loadMoreText })))))));
363
478
  }
package/dist/Components/Table/TableProps.d.ts CHANGED
@@ -9,7 +9,6 @@ export type TableEmptyState = {
9
9
  export type TableProps = {
10
10
  data: DataObject[];
11
11
  columns: TableHeaderProps[];
12
- groupBy?: string | number;
13
12
  groupColors?: Record<string | number, string>;
14
13
  onAddItem?: (groupValue: string | number) => void;
15
14
  density?: TableDensity;
@@ -36,6 +35,12 @@ export type TableProps = {
36
35
  infiniteScroll?: boolean;
37
36
  hasMore?: boolean;
38
37
  isLoadingMore?: boolean;
38
+ groupLoadMore?: boolean;
39
+ loadMoreText?: string;
40
+ loadMorePosition?: "top" | "bottom";
41
+ /** @deprecated Ignored — load more always uses the current page size (`noOfRowsPerPage`)
42
+ * so page boundaries stay consistent. Kept only for backward compatibility. */
43
+ loadMoreChunkSize?: number;
39
44
  noOfRowsPerPage?: number;
40
45
  totalRecords?: number;
41
46
  onPagination?: (page: number, noOfRecords: number, record: DataObject | undefined, direction: "next" | "prev" | "first" | "last") => void;
@@ -105,8 +110,11 @@ export type TableHeaderProps = {
105
110
  isHidden?: boolean;
106
111
  type?: "status";
107
112
  statusColors?: Record<string, string>;
113
+ columnType?: TableColumnType;
108
114
  node?: (data: DataObject) => JSX.Element | string | number | undefined;
109
115
  };
116
+ /** Known field data-types (open-ended via the trailing string for forward-compat). */
117
+ export type TableColumnType = "text" | "singleline" | "multiLine" | "description" | "email" | "phone" | "website" | "number" | "integer" | "decimal" | "dropdown" | "multiSelectDropdown" | "user" | "date" | "date_time" | "time" | "not_assigned" | (string & {});
110
118
  export type ExportOption = {
111
119
  label: string;
112
120
  id: string;
package/dist/Components/Table/{Components → components}/TableActions.d.ts RENAMED
@@ -6,7 +6,7 @@ type TableRowActions = {
6
6
  actions?: () => ReactNode;
7
7
  [key: string]: any;
8
8
  };
9
- declare const TableActions: ({ row }: {
9
+ declare const TableActions: React.MemoExoticComponent<({ row }: {
10
10
  row?: TableRowActions;
11
- }) => React.JSX.Element | null;
11
+ }) => React.JSX.Element | null>;
12
12
  export default TableActions;
package/dist/Components/Table/{Components → components}/TableActions.js RENAMED
@@ -37,7 +37,7 @@ var react_1 = __importStar(require("react"));
37
37
  var react_2 = require("@chakra-ui/react");
38
38
  var lucide_react_1 = require("lucide-react");
39
39
  var useCustomTheme_1 = require("../../../Theme/useCustomTheme");
40
- var TableActions = function (_a) {
40
+ var TableActions = react_1.default.memo(function (_a) {
41
41
  var _b, _c, _d;
42
42
  var row = _a.row;
43
43
  var _e = (0, react_1.useState)(false), isOpen = _e[0], setIsOpen = _e[1];
@@ -76,7 +76,7 @@ var TableActions = function (_a) {
76
76
  react_1.default.createElement("div", { ref: ref },
77
77
  react_1.default.createElement(react_2.PopoverTrigger, null,
78
78
  react_1.default.createElement(react_2.IconButton, { "aria-label": "Actions", color: "black", icon: react_1.default.createElement(lucide_react_1.EllipsisVertical, { size: 17 }), size: "sm", p: 0, variant: "ghost", _hover: { transform: "scale(1.2)" }, onClick: function () { return (isOpen ? handleClose() : handleOpen()); } })),
79
- react_1.default.createElement(react_2.Portal, null,
79
+ isOpen && (react_1.default.createElement(react_2.Portal, null,
80
80
  react_1.default.createElement(react_2.PopoverContent, { w: "auto", minW: "100px", boxShadow: "lg", p: 0, zIndex: 999 },
81
81
  react_1.default.createElement(react_2.PopoverBody, { p: 0, m: 0 },
82
82
  react_1.default.createElement(react_2.VStack, { align: "stretch", spacing: 1, p: 0, m: 0 },
@@ -102,6 +102,7 @@ var TableActions = function (_a) {
102
102
  react_1.default.createElement(lucide_react_1.Trash2, { size: 17 }),
103
103
  " Delete")),
104
104
  row.actions && ((_d = row === null || row === void 0 ? void 0 : row.actions) === null || _d === void 0 ? void 0 : _d.call(row)),
105
- !row.onLink && !row.onEdit && !row.onDelete && (react_1.default.createElement(react_2.Button, { size: "sm", variant: "ghost", isDisabled: true, justifyContent: "center" }, "No actions")))))))));
106
- };
105
+ !row.onLink && !row.onEdit && !row.onDelete && (react_1.default.createElement(react_2.Button, { size: "sm", variant: "ghost", isDisabled: true, justifyContent: "center" }, "No actions"))))))))));
106
+ });
107
+ TableActions.displayName = "TableActions";
107
108
  exports.default = TableActions;