@perses-dev/components 0.0.0-snapshot-scatterplot-fix-imports-95e1b59 → 0.0.0-snapshot-explorer-plugin-c4a7621

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 (514) hide show
  1. package/dist/AlignSelector/AlignSelector.d.ts +9 -0
  2. package/dist/AlignSelector/AlignSelector.d.ts.map +1 -0
  3. package/dist/AlignSelector/AlignSelector.js +42 -0
  4. package/dist/AlignSelector/AlignSelector.js.map +1 -0
  5. package/dist/AlignSelector/index.d.ts +2 -0
  6. package/dist/AlignSelector/index.d.ts.map +1 -0
  7. package/dist/AlignSelector/index.js +15 -0
  8. package/dist/AlignSelector/index.js.map +1 -0
  9. package/dist/BarChart/BarChart.d.ts +2 -1
  10. package/dist/BarChart/BarChart.d.ts.map +1 -1
  11. package/dist/BarChart/BarChart.js +11 -6
  12. package/dist/BarChart/BarChart.js.map +1 -1
  13. package/dist/ColorPicker/ColorPicker.d.ts +3 -1
  14. package/dist/ColorPicker/ColorPicker.d.ts.map +1 -1
  15. package/dist/ColorPicker/ColorPicker.js +28 -13
  16. package/dist/ColorPicker/ColorPicker.js.map +1 -1
  17. package/dist/ColorPicker/OptionsColorPicker.d.ts +9 -0
  18. package/dist/ColorPicker/OptionsColorPicker.d.ts.map +1 -0
  19. package/dist/{ThresholdsEditor/ThresholdColorPicker.js → ColorPicker/OptionsColorPicker.js} +16 -13
  20. package/dist/ColorPicker/OptionsColorPicker.js.map +1 -0
  21. package/dist/ColorPicker/index.d.ts +1 -0
  22. package/dist/ColorPicker/index.d.ts.map +1 -1
  23. package/dist/ColorPicker/index.js +1 -0
  24. package/dist/ColorPicker/index.js.map +1 -1
  25. package/dist/ContentWithLegend/ContentWithLegend.d.ts +2 -1
  26. package/dist/ContentWithLegend/ContentWithLegend.d.ts.map +1 -1
  27. package/dist/ContentWithLegend/ContentWithLegend.js +8 -5
  28. package/dist/ContentWithLegend/ContentWithLegend.js.map +1 -1
  29. package/dist/ContentWithLegend/model/content-with-legend-model.js +2 -3
  30. package/dist/ContentWithLegend/model/content-with-legend-model.js.map +1 -1
  31. package/dist/DensitySelector/DensitySelector.d.ts +8 -0
  32. package/dist/DensitySelector/DensitySelector.d.ts.map +1 -0
  33. package/dist/DensitySelector/DensitySelector.js +46 -0
  34. package/dist/DensitySelector/DensitySelector.js.map +1 -0
  35. package/dist/DensitySelector/index.d.ts +2 -0
  36. package/dist/DensitySelector/index.d.ts.map +1 -0
  37. package/dist/DensitySelector/index.js +15 -0
  38. package/dist/DensitySelector/index.js.map +1 -0
  39. package/dist/Dialog/Dialog.d.ts +9 -14
  40. package/dist/Dialog/Dialog.d.ts.map +1 -1
  41. package/dist/Dialog/Dialog.js +7 -3
  42. package/dist/Dialog/Dialog.js.map +1 -1
  43. package/dist/Dialog/DiscardChangesConfirmationDialog.d.ts +2 -1
  44. package/dist/Dialog/DiscardChangesConfirmationDialog.d.ts.map +1 -1
  45. package/dist/Dialog/DiscardChangesConfirmationDialog.js.map +1 -1
  46. package/dist/DragAndDrop/DragAndDropList.d.ts +24 -0
  47. package/dist/DragAndDrop/DragAndDropList.d.ts.map +1 -0
  48. package/dist/DragAndDrop/DragAndDropList.js +153 -0
  49. package/dist/DragAndDrop/DragAndDropList.js.map +1 -0
  50. package/dist/DragAndDrop/DragButton.d.ts +13 -0
  51. package/dist/DragAndDrop/DragButton.d.ts.map +1 -0
  52. package/dist/DragAndDrop/DragButton.js +97 -0
  53. package/dist/DragAndDrop/DragButton.js.map +1 -0
  54. package/dist/DragAndDrop/DropIndicator.d.ts +3 -0
  55. package/dist/DragAndDrop/DropIndicator.d.ts.map +1 -0
  56. package/dist/DragAndDrop/DropIndicator.js +44 -0
  57. package/dist/DragAndDrop/DropIndicator.js.map +1 -0
  58. package/dist/DragAndDrop/index.d.ts +4 -0
  59. package/dist/DragAndDrop/index.d.ts.map +1 -0
  60. package/dist/DragAndDrop/index.js +17 -0
  61. package/dist/DragAndDrop/index.js.map +1 -0
  62. package/dist/DragAndDrop/model.d.ts +11 -0
  63. package/dist/DragAndDrop/model.d.ts.map +1 -0
  64. package/dist/DragAndDrop/model.js +17 -0
  65. package/dist/DragAndDrop/model.js.map +1 -0
  66. package/dist/Drawer/Drawer.d.ts +2 -1
  67. package/dist/Drawer/Drawer.d.ts.map +1 -1
  68. package/dist/Drawer/Drawer.js +1 -1
  69. package/dist/Drawer/Drawer.js.map +1 -1
  70. package/dist/EChart/EChart.d.ts +2 -2
  71. package/dist/EChart/EChart.d.ts.map +1 -1
  72. package/dist/EChart/EChart.js +5 -6
  73. package/dist/EChart/EChart.js.map +1 -1
  74. package/dist/ErrorAlert.d.ts +2 -1
  75. package/dist/ErrorAlert.d.ts.map +1 -1
  76. package/dist/ErrorAlert.js.map +1 -1
  77. package/dist/FontSizeSelector/FontSizeSelector.d.ts +2 -1
  78. package/dist/FontSizeSelector/FontSizeSelector.d.ts.map +1 -1
  79. package/dist/FontSizeSelector/FontSizeSelector.js.map +1 -1
  80. package/dist/FormEditor/FormActions.d.ts +16 -0
  81. package/dist/FormEditor/FormActions.d.ts.map +1 -0
  82. package/dist/FormEditor/FormActions.js +75 -0
  83. package/dist/FormEditor/FormActions.js.map +1 -0
  84. package/dist/FormEditor/index.d.ts +2 -0
  85. package/dist/FormEditor/index.d.ts.map +1 -0
  86. package/dist/FormEditor/index.js +15 -0
  87. package/dist/FormEditor/index.js.map +1 -0
  88. package/dist/FormatControls/FormatControls.d.ts +2 -1
  89. package/dist/FormatControls/FormatControls.d.ts.map +1 -1
  90. package/dist/FormatControls/FormatControls.js +2 -2
  91. package/dist/FormatControls/FormatControls.js.map +1 -1
  92. package/dist/GaugeChart/GaugeChart.d.ts +2 -1
  93. package/dist/GaugeChart/GaugeChart.d.ts.map +1 -1
  94. package/dist/GaugeChart/GaugeChart.js +4 -7
  95. package/dist/GaugeChart/GaugeChart.js.map +1 -1
  96. package/dist/InfoTooltip/InfoTooltip.d.ts +3 -3
  97. package/dist/InfoTooltip/InfoTooltip.d.ts.map +1 -1
  98. package/dist/InfoTooltip/InfoTooltip.js +3 -4
  99. package/dist/InfoTooltip/InfoTooltip.js.map +1 -1
  100. package/dist/JSONEditor.d.ts +2 -1
  101. package/dist/JSONEditor.d.ts.map +1 -1
  102. package/dist/JSONEditor.js.map +1 -1
  103. package/dist/Legend/CompactLegend.d.ts +2 -1
  104. package/dist/Legend/CompactLegend.d.ts.map +1 -1
  105. package/dist/Legend/CompactLegend.js.map +1 -1
  106. package/dist/Legend/Legend.d.ts +2 -1
  107. package/dist/Legend/Legend.d.ts.map +1 -1
  108. package/dist/Legend/Legend.js +8 -4
  109. package/dist/Legend/Legend.js.map +1 -1
  110. package/dist/Legend/LegendColorBadge.d.ts +2 -2
  111. package/dist/Legend/LegendColorBadge.d.ts.map +1 -1
  112. package/dist/Legend/LegendColorBadge.js +2 -2
  113. package/dist/Legend/LegendColorBadge.js.map +1 -1
  114. package/dist/Legend/ListLegend.d.ts +2 -1
  115. package/dist/Legend/ListLegend.d.ts.map +1 -1
  116. package/dist/Legend/ListLegend.js.map +1 -1
  117. package/dist/Legend/ListLegendItem.d.ts +5 -5
  118. package/dist/Legend/ListLegendItem.d.ts.map +1 -1
  119. package/dist/Legend/ListLegendItem.js +8 -12
  120. package/dist/Legend/ListLegendItem.js.map +1 -1
  121. package/dist/Legend/TableLegend.d.ts +2 -1
  122. package/dist/Legend/TableLegend.d.ts.map +1 -1
  123. package/dist/Legend/TableLegend.js +1 -0
  124. package/dist/Legend/TableLegend.js.map +1 -1
  125. package/dist/Legend/legend-model.d.ts.map +1 -1
  126. package/dist/Legend/legend-model.js.map +1 -1
  127. package/dist/LineChart/LineChart.d.ts +1 -1
  128. package/dist/LineChart/LineChart.d.ts.map +1 -1
  129. package/dist/LineChart/LineChart.js +6 -11
  130. package/dist/LineChart/LineChart.js.map +1 -1
  131. package/dist/LinksEditor/LinksEditor.d.ts +8 -0
  132. package/dist/LinksEditor/LinksEditor.d.ts.map +1 -0
  133. package/dist/LinksEditor/LinksEditor.js +161 -0
  134. package/dist/LinksEditor/LinksEditor.js.map +1 -0
  135. package/dist/LinksEditor/index.d.ts +2 -0
  136. package/dist/LinksEditor/index.d.ts.map +1 -0
  137. package/dist/LinksEditor/index.js +15 -0
  138. package/dist/LinksEditor/index.js.map +1 -0
  139. package/dist/ModeSelector/ModeSelector.d.ts +2 -1
  140. package/dist/ModeSelector/ModeSelector.d.ts.map +1 -1
  141. package/dist/ModeSelector/ModeSelector.js.map +1 -1
  142. package/dist/OptionsEditorLayout/OptionsEditorColumn.d.ts +2 -2
  143. package/dist/OptionsEditorLayout/OptionsEditorColumn.d.ts.map +1 -1
  144. package/dist/OptionsEditorLayout/OptionsEditorColumn.js.map +1 -1
  145. package/dist/OptionsEditorLayout/OptionsEditorControl.d.ts +2 -1
  146. package/dist/OptionsEditorLayout/OptionsEditorControl.d.ts.map +1 -1
  147. package/dist/OptionsEditorLayout/OptionsEditorControl.js.map +1 -1
  148. package/dist/OptionsEditorLayout/OptionsEditorGrid.d.ts +2 -2
  149. package/dist/OptionsEditorLayout/OptionsEditorGrid.d.ts.map +1 -1
  150. package/dist/OptionsEditorLayout/OptionsEditorGrid.js.map +1 -1
  151. package/dist/OptionsEditorLayout/OptionsEditorGroup.d.ts +2 -2
  152. package/dist/OptionsEditorLayout/OptionsEditorGroup.d.ts.map +1 -1
  153. package/dist/OptionsEditorLayout/OptionsEditorGroup.js.map +1 -1
  154. package/dist/Overlay/Overlay.d.ts +16 -0
  155. package/dist/Overlay/Overlay.d.ts.map +1 -0
  156. package/dist/Overlay/Overlay.js +52 -0
  157. package/dist/Overlay/Overlay.js.map +1 -0
  158. package/dist/Overlay/index.d.ts +2 -0
  159. package/dist/Overlay/index.d.ts.map +1 -0
  160. package/dist/Overlay/index.js +15 -0
  161. package/dist/Overlay/index.js.map +1 -0
  162. package/dist/PieChart/PieChart.d.ts +14 -0
  163. package/dist/PieChart/PieChart.d.ts.map +1 -0
  164. package/dist/PieChart/PieChart.js +92 -0
  165. package/dist/PieChart/PieChart.js.map +1 -0
  166. package/dist/PieChart/index.d.ts +2 -0
  167. package/dist/PieChart/index.d.ts.map +1 -0
  168. package/dist/PieChart/index.js +15 -0
  169. package/dist/PieChart/index.js.map +1 -0
  170. package/dist/RefreshIntervalPicker/RefreshIntervalPicker.d.ts +2 -1
  171. package/dist/RefreshIntervalPicker/RefreshIntervalPicker.d.ts.map +1 -1
  172. package/dist/RefreshIntervalPicker/RefreshIntervalPicker.js.map +1 -1
  173. package/dist/SettingsAutocomplete/SettingsAutocomplete.d.ts +2 -2
  174. package/dist/SettingsAutocomplete/SettingsAutocomplete.d.ts.map +1 -1
  175. package/dist/SettingsAutocomplete/SettingsAutocomplete.js +6 -5
  176. package/dist/SettingsAutocomplete/SettingsAutocomplete.js.map +1 -1
  177. package/dist/SortSelector/SortSelector.d.ts +2 -1
  178. package/dist/SortSelector/SortSelector.d.ts.map +1 -1
  179. package/dist/SortSelector/SortSelector.js.map +1 -1
  180. package/dist/SortSelector/SortSelectorButtons.d.ts +9 -0
  181. package/dist/SortSelector/SortSelectorButtons.d.ts.map +1 -0
  182. package/dist/SortSelector/SortSelectorButtons.js +42 -0
  183. package/dist/SortSelector/SortSelectorButtons.js.map +1 -0
  184. package/dist/SortSelector/index.d.ts +1 -0
  185. package/dist/SortSelector/index.d.ts.map +1 -1
  186. package/dist/SortSelector/index.js +2 -1
  187. package/dist/SortSelector/index.js.map +1 -1
  188. package/dist/StatChart/StatChart.d.ts +6 -5
  189. package/dist/StatChart/StatChart.d.ts.map +1 -1
  190. package/dist/StatChart/StatChart.js +10 -16
  191. package/dist/StatChart/StatChart.js.map +1 -1
  192. package/dist/StatChart/calculateFontSize.d.ts.map +1 -1
  193. package/dist/StatChart/calculateFontSize.js +2 -4
  194. package/dist/StatChart/calculateFontSize.js.map +1 -1
  195. package/dist/StatChart/utils/formatStatChartValue.d.ts +3 -0
  196. package/dist/StatChart/utils/formatStatChartValue.d.ts.map +1 -0
  197. package/dist/StatChart/utils/formatStatChartValue.js +26 -0
  198. package/dist/StatChart/utils/formatStatChartValue.js.map +1 -0
  199. package/dist/StatusHistoryChart/StatusHistoryChart.d.ts +27 -0
  200. package/dist/StatusHistoryChart/StatusHistoryChart.d.ts.map +1 -0
  201. package/dist/StatusHistoryChart/StatusHistoryChart.js +132 -0
  202. package/dist/StatusHistoryChart/StatusHistoryChart.js.map +1 -0
  203. package/dist/StatusHistoryChart/StatusHistoryTooltip.d.ts +13 -0
  204. package/dist/StatusHistoryChart/StatusHistoryTooltip.d.ts.map +1 -0
  205. package/dist/StatusHistoryChart/StatusHistoryTooltip.js +47 -0
  206. package/dist/StatusHistoryChart/StatusHistoryTooltip.js.map +1 -0
  207. package/dist/StatusHistoryChart/get-formatted-axis-label.d.ts +2 -0
  208. package/dist/StatusHistoryChart/get-formatted-axis-label.d.ts.map +1 -0
  209. package/dist/StatusHistoryChart/get-formatted-axis-label.js +41 -0
  210. package/dist/StatusHistoryChart/get-formatted-axis-label.js.map +1 -0
  211. package/dist/StatusHistoryChart/index.d.ts +3 -0
  212. package/dist/StatusHistoryChart/index.d.ts.map +1 -0
  213. package/dist/StatusHistoryChart/index.js +16 -0
  214. package/dist/StatusHistoryChart/index.js.map +1 -0
  215. package/dist/StatusHistoryChart/utils/get-color.d.ts +6 -0
  216. package/dist/StatusHistoryChart/utils/get-color.d.ts.map +1 -0
  217. package/dist/StatusHistoryChart/utils/get-color.js +100 -0
  218. package/dist/StatusHistoryChart/utils/get-color.js.map +1 -0
  219. package/dist/StatusHistoryChart/utils/get-tooltip-position.d.ts +3 -0
  220. package/dist/StatusHistoryChart/utils/get-tooltip-position.d.ts.map +1 -0
  221. package/dist/StatusHistoryChart/utils/get-tooltip-position.js +27 -0
  222. package/dist/StatusHistoryChart/utils/get-tooltip-position.js.map +1 -0
  223. package/dist/Table/InnerTable.d.ts.map +1 -1
  224. package/dist/Table/InnerTable.js +2 -1
  225. package/dist/Table/InnerTable.js.map +1 -1
  226. package/dist/Table/Table.d.ts +2 -1
  227. package/dist/Table/Table.d.ts.map +1 -1
  228. package/dist/Table/Table.js +10 -8
  229. package/dist/Table/Table.js.map +1 -1
  230. package/dist/Table/TableCell.d.ts +4 -2
  231. package/dist/Table/TableCell.d.ts.map +1 -1
  232. package/dist/Table/TableCell.js +28 -6
  233. package/dist/Table/TableCell.js.map +1 -1
  234. package/dist/Table/TableCheckbox.d.ts +2 -1
  235. package/dist/Table/TableCheckbox.d.ts.map +1 -1
  236. package/dist/Table/TableCheckbox.js.map +1 -1
  237. package/dist/Table/TableHeaderCell.d.ts +3 -2
  238. package/dist/Table/TableHeaderCell.d.ts.map +1 -1
  239. package/dist/Table/TableHeaderCell.js.map +1 -1
  240. package/dist/Table/VirtualizedTable.d.ts +5 -4
  241. package/dist/Table/VirtualizedTable.d.ts.map +1 -1
  242. package/dist/Table/VirtualizedTable.js +17 -14
  243. package/dist/Table/VirtualizedTable.js.map +1 -1
  244. package/dist/Table/hooks/useTableKeyboardNav.d.ts +2 -2
  245. package/dist/Table/hooks/useTableKeyboardNav.d.ts.map +1 -1
  246. package/dist/Table/hooks/useTableKeyboardNav.js +1 -1
  247. package/dist/Table/hooks/useTableKeyboardNav.js.map +1 -1
  248. package/dist/Table/hooks/useVirtualizedTableKeyboardNav.d.ts +10 -12
  249. package/dist/Table/hooks/useVirtualizedTableKeyboardNav.d.ts.map +1 -1
  250. package/dist/Table/hooks/useVirtualizedTableKeyboardNav.js +7 -13
  251. package/dist/Table/hooks/useVirtualizedTableKeyboardNav.js.map +1 -1
  252. package/dist/Table/index.d.ts +1 -2
  253. package/dist/Table/index.d.ts.map +1 -1
  254. package/dist/Table/index.js +1 -1
  255. package/dist/Table/index.js.map +1 -1
  256. package/dist/Table/model/table-model.d.ts +22 -2
  257. package/dist/Table/model/table-model.d.ts.map +1 -1
  258. package/dist/Table/model/table-model.js +27 -21
  259. package/dist/Table/model/table-model.js.map +1 -1
  260. package/dist/ThresholdsEditor/ThresholdInput.d.ts +2 -2
  261. package/dist/ThresholdsEditor/ThresholdInput.d.ts.map +1 -1
  262. package/dist/ThresholdsEditor/ThresholdInput.js +2 -2
  263. package/dist/ThresholdsEditor/ThresholdInput.js.map +1 -1
  264. package/dist/ThresholdsEditor/ThresholdsEditor.d.ts +2 -1
  265. package/dist/ThresholdsEditor/ThresholdsEditor.d.ts.map +1 -1
  266. package/dist/ThresholdsEditor/ThresholdsEditor.js +18 -26
  267. package/dist/ThresholdsEditor/ThresholdsEditor.js.map +1 -1
  268. package/dist/TimeChart/TimeChart.d.ts.map +1 -1
  269. package/dist/TimeChart/TimeChart.js +5 -8
  270. package/dist/TimeChart/TimeChart.js.map +1 -1
  271. package/dist/TimeRangeSelector/DateTimeRangePicker.d.ts +19 -0
  272. package/dist/TimeRangeSelector/DateTimeRangePicker.d.ts.map +1 -0
  273. package/dist/{DateTimeRangePicker/AbsoluteTimePicker.js → TimeRangeSelector/DateTimeRangePicker.js} +43 -28
  274. package/dist/TimeRangeSelector/DateTimeRangePicker.js.map +1 -0
  275. package/dist/TimeRangeSelector/TimeRangeSelector.d.ts +36 -0
  276. package/dist/TimeRangeSelector/TimeRangeSelector.d.ts.map +1 -0
  277. package/dist/TimeRangeSelector/TimeRangeSelector.js +119 -0
  278. package/dist/TimeRangeSelector/TimeRangeSelector.js.map +1 -0
  279. package/dist/{DateTimeRangePicker → TimeRangeSelector}/index.d.ts +1 -2
  280. package/dist/TimeRangeSelector/index.d.ts.map +1 -0
  281. package/dist/{DateTimeRangePicker → TimeRangeSelector}/index.js +2 -3
  282. package/dist/TimeRangeSelector/index.js.map +1 -0
  283. package/dist/TimeRangeSelector/utils.d.ts +25 -0
  284. package/dist/TimeRangeSelector/utils.d.ts.map +1 -0
  285. package/dist/{DateTimeRangePicker → TimeRangeSelector}/utils.js +23 -2
  286. package/dist/TimeRangeSelector/utils.js.map +1 -0
  287. package/dist/TimeSeriesTooltip/LineChartTooltip.d.ts +2 -2
  288. package/dist/TimeSeriesTooltip/LineChartTooltip.d.ts.map +1 -1
  289. package/dist/TimeSeriesTooltip/LineChartTooltip.js +6 -11
  290. package/dist/TimeSeriesTooltip/LineChartTooltip.js.map +1 -1
  291. package/dist/TimeSeriesTooltip/SeriesInfo.d.ts +2 -1
  292. package/dist/TimeSeriesTooltip/SeriesInfo.d.ts.map +1 -1
  293. package/dist/TimeSeriesTooltip/SeriesInfo.js +1 -2
  294. package/dist/TimeSeriesTooltip/SeriesInfo.js.map +1 -1
  295. package/dist/TimeSeriesTooltip/SeriesLabelsStack.d.ts +2 -1
  296. package/dist/TimeSeriesTooltip/SeriesLabelsStack.d.ts.map +1 -1
  297. package/dist/TimeSeriesTooltip/SeriesLabelsStack.js.map +1 -1
  298. package/dist/TimeSeriesTooltip/SeriesMarker.d.ts +2 -1
  299. package/dist/TimeSeriesTooltip/SeriesMarker.d.ts.map +1 -1
  300. package/dist/TimeSeriesTooltip/SeriesMarker.js.map +1 -1
  301. package/dist/TimeSeriesTooltip/TimeChartTooltip.d.ts +2 -2
  302. package/dist/TimeSeriesTooltip/TimeChartTooltip.d.ts.map +1 -1
  303. package/dist/TimeSeriesTooltip/TimeChartTooltip.js +2 -3
  304. package/dist/TimeSeriesTooltip/TimeChartTooltip.js.map +1 -1
  305. package/dist/TimeSeriesTooltip/TooltipContent.d.ts +2 -1
  306. package/dist/TimeSeriesTooltip/TooltipContent.d.ts.map +1 -1
  307. package/dist/TimeSeriesTooltip/TooltipContent.js.map +1 -1
  308. package/dist/TimeSeriesTooltip/TooltipHeader.d.ts.map +1 -1
  309. package/dist/TimeSeriesTooltip/TooltipHeader.js +6 -14
  310. package/dist/TimeSeriesTooltip/TooltipHeader.js.map +1 -1
  311. package/dist/TimeSeriesTooltip/nearby-series.d.ts.map +1 -1
  312. package/dist/TimeSeriesTooltip/nearby-series.js +15 -25
  313. package/dist/TimeSeriesTooltip/nearby-series.js.map +1 -1
  314. package/dist/TimeSeriesTooltip/tooltip-model.d.ts +8 -1
  315. package/dist/TimeSeriesTooltip/tooltip-model.d.ts.map +1 -1
  316. package/dist/TimeSeriesTooltip/tooltip-model.js +13 -2
  317. package/dist/TimeSeriesTooltip/tooltip-model.js.map +1 -1
  318. package/dist/TimeSeriesTooltip/utils.d.ts +1 -21
  319. package/dist/TimeSeriesTooltip/utils.d.ts.map +1 -1
  320. package/dist/TimeSeriesTooltip/utils.js +2 -4
  321. package/dist/TimeSeriesTooltip/utils.js.map +1 -1
  322. package/dist/ToolbarIconButton/ToolbarIconButton.js.map +1 -1
  323. package/dist/TransformsEditor/TransformEditor.d.ts +9 -0
  324. package/dist/TransformsEditor/TransformEditor.d.ts.map +1 -0
  325. package/dist/TransformsEditor/TransformEditor.js +289 -0
  326. package/dist/TransformsEditor/TransformEditor.js.map +1 -0
  327. package/dist/TransformsEditor/TransformEditorContainer.d.ts +10 -0
  328. package/dist/TransformsEditor/TransformEditorContainer.d.ts.map +1 -0
  329. package/dist/TransformsEditor/TransformEditorContainer.js +118 -0
  330. package/dist/TransformsEditor/TransformEditorContainer.js.map +1 -0
  331. package/dist/TransformsEditor/TransformsEditor.d.ts +9 -0
  332. package/dist/TransformsEditor/TransformsEditor.d.ts.map +1 -0
  333. package/dist/TransformsEditor/TransformsEditor.js +90 -0
  334. package/dist/TransformsEditor/TransformsEditor.js.map +1 -0
  335. package/dist/TransformsEditor/index.d.ts +2 -0
  336. package/dist/TransformsEditor/index.d.ts.map +1 -0
  337. package/dist/TransformsEditor/index.js +15 -0
  338. package/dist/TransformsEditor/index.js.map +1 -0
  339. package/dist/ValueMappingEditor/ValueMappingEditor.d.ts +10 -0
  340. package/dist/ValueMappingEditor/ValueMappingEditor.d.ts.map +1 -0
  341. package/dist/ValueMappingEditor/ValueMappingEditor.js +374 -0
  342. package/dist/ValueMappingEditor/ValueMappingEditor.js.map +1 -0
  343. package/dist/ValueMappingEditor/ValueMappingsEditor.d.ts +8 -0
  344. package/dist/ValueMappingEditor/ValueMappingsEditor.d.ts.map +1 -0
  345. package/dist/ValueMappingEditor/ValueMappingsEditor.js +118 -0
  346. package/dist/ValueMappingEditor/ValueMappingsEditor.js.map +1 -0
  347. package/dist/ValueMappingEditor/index.d.ts +2 -0
  348. package/dist/ValueMappingEditor/index.d.ts.map +1 -0
  349. package/dist/ValueMappingEditor/index.js +15 -0
  350. package/dist/ValueMappingEditor/index.js.map +1 -0
  351. package/dist/YAxisLabel.d.ts +2 -1
  352. package/dist/YAxisLabel.d.ts.map +1 -1
  353. package/dist/YAxisLabel.js +4 -2
  354. package/dist/YAxisLabel.js.map +1 -1
  355. package/dist/cjs/AlignSelector/AlignSelector.js +50 -0
  356. package/dist/cjs/AlignSelector/index.js +30 -0
  357. package/dist/cjs/BarChart/BarChart.js +12 -7
  358. package/dist/cjs/ColorPicker/ColorPicker.js +28 -54
  359. package/dist/cjs/{ThresholdsEditor/ThresholdColorPicker.js → ColorPicker/OptionsColorPicker.js} +18 -15
  360. package/dist/cjs/ColorPicker/index.js +1 -0
  361. package/dist/cjs/ContentWithLegend/ContentWithLegend.js +8 -10
  362. package/dist/cjs/ContentWithLegend/model/content-with-legend-model.js +2 -3
  363. package/dist/cjs/DensitySelector/DensitySelector.js +54 -0
  364. package/dist/cjs/DensitySelector/index.js +30 -0
  365. package/dist/cjs/Dialog/Dialog.js +7 -3
  366. package/dist/cjs/DragAndDrop/DragAndDropList.js +159 -0
  367. package/dist/cjs/DragAndDrop/DragButton.js +121 -0
  368. package/dist/cjs/DragAndDrop/DropIndicator.js +52 -0
  369. package/dist/cjs/DragAndDrop/index.js +32 -0
  370. package/dist/cjs/DragAndDrop/model.js +25 -0
  371. package/dist/cjs/Drawer/Drawer.js +1 -1
  372. package/dist/cjs/EChart/EChart.js +5 -47
  373. package/dist/cjs/FormEditor/FormActions.js +83 -0
  374. package/dist/cjs/FormEditor/index.js +30 -0
  375. package/dist/cjs/FormatControls/FormatControls.js +2 -2
  376. package/dist/cjs/GaugeChart/GaugeChart.js +5 -8
  377. package/dist/cjs/InfoTooltip/InfoTooltip.js +3 -9
  378. package/dist/cjs/Legend/Legend.js +8 -4
  379. package/dist/cjs/Legend/LegendColorBadge.js +2 -7
  380. package/dist/cjs/Legend/ListLegendItem.js +6 -50
  381. package/dist/cjs/Legend/TableLegend.js +1 -0
  382. package/dist/cjs/LineChart/LineChart.js +8 -13
  383. package/dist/cjs/LinksEditor/LinksEditor.js +174 -0
  384. package/dist/cjs/LinksEditor/index.js +30 -0
  385. package/dist/cjs/Overlay/Overlay.js +71 -0
  386. package/dist/cjs/Overlay/index.js +30 -0
  387. package/dist/cjs/PieChart/PieChart.js +100 -0
  388. package/dist/cjs/PieChart/index.js +30 -0
  389. package/dist/cjs/SettingsAutocomplete/SettingsAutocomplete.js +6 -5
  390. package/dist/cjs/SortSelector/SortSelectorButtons.js +50 -0
  391. package/dist/cjs/SortSelector/index.js +2 -1
  392. package/dist/cjs/StatChart/StatChart.js +13 -19
  393. package/dist/cjs/StatChart/calculateFontSize.js +2 -4
  394. package/dist/cjs/StatChart/utils/formatStatChartValue.js +34 -0
  395. package/dist/cjs/StatusHistoryChart/StatusHistoryChart.js +140 -0
  396. package/dist/cjs/StatusHistoryChart/StatusHistoryTooltip.js +55 -0
  397. package/dist/cjs/StatusHistoryChart/get-formatted-axis-label.js +48 -0
  398. package/dist/cjs/StatusHistoryChart/index.js +31 -0
  399. package/dist/cjs/StatusHistoryChart/utils/get-color.js +125 -0
  400. package/dist/cjs/StatusHistoryChart/utils/get-tooltip-position.js +35 -0
  401. package/dist/cjs/Table/InnerTable.js +2 -1
  402. package/dist/cjs/Table/Table.js +9 -7
  403. package/dist/cjs/Table/TableCell.js +28 -6
  404. package/dist/cjs/Table/VirtualizedTable.js +17 -14
  405. package/dist/cjs/Table/hooks/useTableKeyboardNav.js +1 -1
  406. package/dist/cjs/Table/hooks/useVirtualizedTableKeyboardNav.js +7 -13
  407. package/dist/cjs/Table/index.js +1 -7
  408. package/dist/cjs/Table/model/table-model.js +30 -21
  409. package/dist/cjs/ThresholdsEditor/ThresholdInput.js +2 -2
  410. package/dist/cjs/ThresholdsEditor/ThresholdsEditor.js +18 -26
  411. package/dist/cjs/TimeChart/TimeChart.js +5 -8
  412. package/dist/cjs/{DateTimeRangePicker/AbsoluteTimePicker.js → TimeRangeSelector/DateTimeRangePicker.js} +37 -30
  413. package/dist/cjs/TimeRangeSelector/TimeRangeSelector.js +127 -0
  414. package/dist/cjs/{DateTimeRangePicker → TimeRangeSelector}/index.js +2 -3
  415. package/dist/cjs/{DateTimeRangePicker → TimeRangeSelector}/utils.js +24 -1
  416. package/dist/cjs/TimeSeriesTooltip/LineChartTooltip.js +6 -11
  417. package/dist/cjs/TimeSeriesTooltip/SeriesInfo.js +1 -2
  418. package/dist/cjs/TimeSeriesTooltip/TimeChartTooltip.js +2 -3
  419. package/dist/cjs/TimeSeriesTooltip/TooltipHeader.js +6 -14
  420. package/dist/cjs/TimeSeriesTooltip/nearby-series.js +15 -25
  421. package/dist/cjs/TimeSeriesTooltip/tooltip-model.js +22 -2
  422. package/dist/cjs/TimeSeriesTooltip/utils.js +2 -4
  423. package/dist/cjs/TransformsEditor/TransformEditor.js +297 -0
  424. package/dist/cjs/TransformsEditor/TransformEditorContainer.js +131 -0
  425. package/dist/cjs/TransformsEditor/TransformsEditor.js +103 -0
  426. package/dist/cjs/TransformsEditor/index.js +30 -0
  427. package/dist/cjs/ValueMappingEditor/ValueMappingEditor.js +387 -0
  428. package/dist/cjs/ValueMappingEditor/ValueMappingsEditor.js +131 -0
  429. package/dist/cjs/ValueMappingEditor/index.js +30 -0
  430. package/dist/cjs/YAxisLabel.js +4 -2
  431. package/dist/cjs/context/TimeZoneProvider.js +1 -1
  432. package/dist/cjs/controls/TextField.js +54 -0
  433. package/dist/cjs/controls/index.js +30 -0
  434. package/dist/cjs/index.js +12 -1
  435. package/dist/cjs/model/timeOption.js +19 -1
  436. package/dist/cjs/theme/index.js +1 -0
  437. package/dist/cjs/theme/palette/background.js +2 -0
  438. package/dist/cjs/theme/theme.js +6 -6
  439. package/dist/cjs/utils/chart-actions.js +2 -3
  440. package/dist/cjs/utils/format.js +19 -1
  441. package/dist/cjs/utils/theme-gen.js +5 -7
  442. package/dist/context/ChartsProvider.d.ts +2 -2
  443. package/dist/context/ChartsProvider.d.ts.map +1 -1
  444. package/dist/context/ChartsProvider.js.map +1 -1
  445. package/dist/context/TimeZoneProvider.d.ts +4 -4
  446. package/dist/context/TimeZoneProvider.d.ts.map +1 -1
  447. package/dist/context/TimeZoneProvider.js +1 -1
  448. package/dist/context/TimeZoneProvider.js.map +1 -1
  449. package/dist/controls/TextField.d.ts +9 -0
  450. package/dist/controls/TextField.d.ts.map +1 -0
  451. package/dist/controls/TextField.js +41 -0
  452. package/dist/controls/TextField.js.map +1 -0
  453. package/dist/controls/index.d.ts +2 -0
  454. package/dist/controls/index.d.ts.map +1 -0
  455. package/dist/controls/index.js +15 -0
  456. package/dist/controls/index.js.map +1 -0
  457. package/dist/index.d.ts +12 -1
  458. package/dist/index.d.ts.map +1 -1
  459. package/dist/index.js +12 -1
  460. package/dist/index.js.map +1 -1
  461. package/dist/model/timeOption.d.ts +2 -1
  462. package/dist/model/timeOption.d.ts.map +1 -1
  463. package/dist/model/timeOption.js +13 -2
  464. package/dist/model/timeOption.js.map +1 -1
  465. package/dist/test/render.d.ts +3 -3
  466. package/dist/test/render.d.ts.map +1 -1
  467. package/dist/test/render.js.map +1 -1
  468. package/dist/theme/index.d.ts +2 -0
  469. package/dist/theme/index.d.ts.map +1 -1
  470. package/dist/theme/index.js +1 -0
  471. package/dist/theme/index.js.map +1 -1
  472. package/dist/theme/palette/background.d.ts.map +1 -1
  473. package/dist/theme/palette/background.js +2 -0
  474. package/dist/theme/palette/background.js.map +1 -1
  475. package/dist/theme/theme.d.ts +2 -2
  476. package/dist/theme/theme.d.ts.map +1 -1
  477. package/dist/theme/theme.js +5 -5
  478. package/dist/theme/theme.js.map +1 -1
  479. package/dist/utils/axis.d.ts +1 -7
  480. package/dist/utils/axis.d.ts.map +1 -1
  481. package/dist/utils/axis.js.map +1 -1
  482. package/dist/utils/chart-actions.d.ts.map +1 -1
  483. package/dist/utils/chart-actions.js +2 -3
  484. package/dist/utils/chart-actions.js.map +1 -1
  485. package/dist/utils/component-ids.d.ts.map +1 -1
  486. package/dist/utils/component-ids.js.map +1 -1
  487. package/dist/utils/format.d.ts +10 -4
  488. package/dist/utils/format.d.ts.map +1 -1
  489. package/dist/utils/format.js +16 -1
  490. package/dist/utils/format.js.map +1 -1
  491. package/dist/utils/theme-gen.js +5 -7
  492. package/dist/utils/theme-gen.js.map +1 -1
  493. package/package.json +12 -8
  494. package/dist/DateTimeRangePicker/AbsoluteTimePicker.d.ts +0 -9
  495. package/dist/DateTimeRangePicker/AbsoluteTimePicker.d.ts.map +0 -1
  496. package/dist/DateTimeRangePicker/AbsoluteTimePicker.js.map +0 -1
  497. package/dist/DateTimeRangePicker/DateTimeRangePicker.d.ts +0 -11
  498. package/dist/DateTimeRangePicker/DateTimeRangePicker.d.ts.map +0 -1
  499. package/dist/DateTimeRangePicker/DateTimeRangePicker.js +0 -80
  500. package/dist/DateTimeRangePicker/DateTimeRangePicker.js.map +0 -1
  501. package/dist/DateTimeRangePicker/TimeRangeSelector.d.ts +0 -13
  502. package/dist/DateTimeRangePicker/TimeRangeSelector.d.ts.map +0 -1
  503. package/dist/DateTimeRangePicker/TimeRangeSelector.js +0 -67
  504. package/dist/DateTimeRangePicker/TimeRangeSelector.js.map +0 -1
  505. package/dist/DateTimeRangePicker/index.d.ts.map +0 -1
  506. package/dist/DateTimeRangePicker/index.js.map +0 -1
  507. package/dist/DateTimeRangePicker/utils.d.ts +0 -7
  508. package/dist/DateTimeRangePicker/utils.d.ts.map +0 -1
  509. package/dist/DateTimeRangePicker/utils.js.map +0 -1
  510. package/dist/ThresholdsEditor/ThresholdColorPicker.d.ts +0 -3
  511. package/dist/ThresholdsEditor/ThresholdColorPicker.d.ts.map +0 -1
  512. package/dist/ThresholdsEditor/ThresholdColorPicker.js.map +0 -1
  513. package/dist/cjs/DateTimeRangePicker/DateTimeRangePicker.js +0 -88
  514. package/dist/cjs/DateTimeRangePicker/TimeRangeSelector.js +0 -80
@@ -1 +1 @@
1
- {"version":3,"file":"TableCheckbox.d.ts","sourceRoot":"","sources":["../../src/Table/TableCheckbox.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAY,aAAa,EAAS,MAAM,eAAe,CAAC;AAC/D,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAEnD,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,aAAa,EAAE,SAAS,GAAG,eAAe,GAAG,UAAU,CAAC;IACvG,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,YAAY,CAAC;CACvB;AAED,wBAAgB,aAAa,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,UAAU,EAAE,EAAE,kBAAkB,2CAsClF"}
1
+ {"version":3,"file":"TableCheckbox.d.ts","sourceRoot":"","sources":["../../src/Table/TableCheckbox.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAY,aAAa,EAAS,MAAM,eAAe,CAAC;AAC/D,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAEnD,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,aAAa,EAAE,SAAS,GAAG,eAAe,GAAG,UAAU,CAAC;IACvG,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,YAAY,CAAC;CACvB;AAED,wBAAgB,aAAa,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,UAAU,EAAE,EAAE,kBAAkB,GAAG,YAAY,CAsCjG"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/Table/TableCheckbox.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Checkbox, CheckboxProps, alpha } from '@mui/material';\nimport { TableDensity } from './model/table-model';\n\nexport interface TableCheckboxProps extends Pick<CheckboxProps, 'checked' | 'indeterminate' | 'onChange'> {\n color?: string;\n density: TableDensity;\n}\n\nexport function TableCheckbox({ color, density, ...otherProps }: TableCheckboxProps) {\n const isCompact = density === 'compact';\n\n return (\n <Checkbox\n size={isCompact ? 'small' : 'medium'}\n {...otherProps}\n // Disable ripple and set background color below because of some issues\n // with re-rendering with the keyboard interactions that causes the ripple\n // animation to stutter.\n focusRipple={false}\n // Tab index is handled by the overall keyboard interactions for the table\n // to avoid trapping a keyboard user in a table by requiring them to tab\n // through every single checkbox.\n tabIndex={-1}\n sx={{\n color: color,\n\n padding: (theme) => theme.spacing(isCompact ? 0.25 : 0.5),\n\n // Centering.\n position: 'absolute',\n top: '50%',\n left: '50%',\n transform: 'translate(-50%, -50%)',\n\n '&.Mui-checked': {\n color: color,\n },\n\n '&.Mui-focusVisible': {\n background: color ? alpha(color, 0.5) : undefined,\n },\n\n '& .MuiSvgIcon-root': { fontSize: isCompact ? 16 : 18 },\n }}\n />\n );\n}\n"],"names":["Checkbox","alpha","TableCheckbox","color","density","otherProps","isCompact","size","focusRipple","tabIndex","sx","padding","theme","spacing","position","top","left","transform","background","undefined","fontSize"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,QAAQ,EAAiBC,KAAK,QAAQ,gBAAgB;AAQ/D,OAAO,SAASC,cAAc,EAAEC,KAAK,EAAEC,OAAO,EAAE,GAAGC,YAAgC;IACjF,MAAMC,YAAYF,YAAY;IAE9B,qBACE,KAACJ;QACCO,MAAMD,YAAY,UAAU;QAC3B,GAAGD,UAAU;QACd,uEAAuE;QACvE,0EAA0E;QAC1E,wBAAwB;QACxBG,aAAa;QACb,0EAA0E;QAC1E,wEAAwE;QACxE,iCAAiC;QACjCC,UAAU,CAAC;QACXC,IAAI;YACFP,OAAOA;YAEPQ,SAAS,CAACC,QAAUA,MAAMC,OAAO,CAACP,YAAY,OAAO;YAErD,aAAa;YACbQ,UAAU;YACVC,KAAK;YACLC,MAAM;YACNC,WAAW;YAEX,iBAAiB;gBACfd,OAAOA;YACT;YAEA,sBAAsB;gBACpBe,YAAYf,QAAQF,MAAME,OAAO,OAAOgB;YAC1C;YAEA,sBAAsB;gBAAEC,UAAUd,YAAY,KAAK;YAAG;QACxD;;AAGN"}
1
+ {"version":3,"sources":["../../src/Table/TableCheckbox.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Checkbox, CheckboxProps, alpha } from '@mui/material';\nimport { ReactElement } from 'react';\nimport { TableDensity } from './model/table-model';\n\nexport interface TableCheckboxProps extends Pick<CheckboxProps, 'checked' | 'indeterminate' | 'onChange'> {\n color?: string;\n density: TableDensity;\n}\n\nexport function TableCheckbox({ color, density, ...otherProps }: TableCheckboxProps): ReactElement {\n const isCompact = density === 'compact';\n\n return (\n <Checkbox\n size={isCompact ? 'small' : 'medium'}\n {...otherProps}\n // Disable ripple and set background color below because of some issues\n // with re-rendering with the keyboard interactions that causes the ripple\n // animation to stutter.\n focusRipple={false}\n // Tab index is handled by the overall keyboard interactions for the table\n // to avoid trapping a keyboard user in a table by requiring them to tab\n // through every single checkbox.\n tabIndex={-1}\n sx={{\n color: color,\n\n padding: (theme) => theme.spacing(isCompact ? 0.25 : 0.5),\n\n // Centering.\n position: 'absolute',\n top: '50%',\n left: '50%',\n transform: 'translate(-50%, -50%)',\n\n '&.Mui-checked': {\n color: color,\n },\n\n '&.Mui-focusVisible': {\n background: color ? alpha(color, 0.5) : undefined,\n },\n\n '& .MuiSvgIcon-root': { fontSize: isCompact ? 16 : 18 },\n }}\n />\n );\n}\n"],"names":["Checkbox","alpha","TableCheckbox","color","density","otherProps","isCompact","size","focusRipple","tabIndex","sx","padding","theme","spacing","position","top","left","transform","background","undefined","fontSize"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,QAAQ,EAAiBC,KAAK,QAAQ,gBAAgB;AAS/D,OAAO,SAASC,cAAc,EAAEC,KAAK,EAAEC,OAAO,EAAE,GAAGC,YAAgC;IACjF,MAAMC,YAAYF,YAAY;IAE9B,qBACE,KAACJ;QACCO,MAAMD,YAAY,UAAU;QAC3B,GAAGD,UAAU;QACd,uEAAuE;QACvE,0EAA0E;QAC1E,wBAAwB;QACxBG,aAAa;QACb,0EAA0E;QAC1E,wEAAwE;QACxE,iCAAiC;QACjCC,UAAU,CAAC;QACXC,IAAI;YACFP,OAAOA;YAEPQ,SAAS,CAACC,QAAUA,MAAMC,OAAO,CAACP,YAAY,OAAO;YAErD,aAAa;YACbQ,UAAU;YACVC,KAAK;YACLC,MAAM;YACNC,WAAW;YAEX,iBAAiB;gBACfd,OAAOA;YACT;YAEA,sBAAsB;gBACpBe,YAAYf,QAAQF,MAAME,OAAO,OAAOgB;YAC1C;YAEA,sBAAsB;gBAAEC,UAAUd,YAAY,KAAK;YAAG;QACxD;;AAGN"}
@@ -1,5 +1,6 @@
1
- import { SortDirection } from './model/table-model';
1
+ import { ReactElement } from 'react';
2
2
  import { TableCellProps } from './TableCell';
3
+ import { SortDirection } from './model/table-model';
3
4
  export interface TableHeaderCellProps extends TableCellProps {
4
5
  /**
5
6
  * Handler called when a sort event is triggered.
@@ -18,5 +19,5 @@ export interface TableHeaderCellProps extends TableCellProps {
18
19
  */
19
20
  nextSortDirection?: SortDirection;
20
21
  }
21
- export declare function TableHeaderCell({ onSort, sortDirection, nextSortDirection, children, ...cellProps }: TableHeaderCellProps): import("react/jsx-runtime").JSX.Element;
22
+ export declare function TableHeaderCell({ onSort, sortDirection, nextSortDirection, children, ...cellProps }: TableHeaderCellProps): ReactElement;
22
23
  //# sourceMappingURL=TableHeaderCell.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"TableHeaderCell.d.ts","sourceRoot":"","sources":["../../src/Table/TableHeaderCell.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,OAAO,EAAa,cAAc,EAAE,MAAM,aAAa,CAAC;AAExD,MAAM,WAAW,oBAAqB,SAAQ,cAAc;IAC1D;;;OAGG;IACH,MAAM,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IAEhD;;OAEG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC;IAE9B;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,aAAa,CAAC;CACnC;AAED,wBAAgB,eAAe,CAAC,EAC9B,MAAM,EACN,aAAa,EACb,iBAAiB,EACjB,QAAQ,EACR,GAAG,SAAS,EACb,EAAE,oBAAoB,2CA4CtB"}
1
+ {"version":3,"file":"TableHeaderCell.d.ts","sourceRoot":"","sources":["../../src/Table/TableHeaderCell.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAAa,cAAc,EAAE,MAAM,aAAa,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAEpD,MAAM,WAAW,oBAAqB,SAAQ,cAAc;IAC1D;;;OAGG;IACH,MAAM,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IAEhD;;OAEG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC;IAE9B;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,aAAa,CAAC;CACnC;AAED,wBAAgB,eAAe,CAAC,EAC9B,MAAM,EACN,aAAa,EACb,iBAAiB,EACjB,QAAQ,EACR,GAAG,SAAS,EACb,EAAE,oBAAoB,GAAG,YAAY,CA4CrC"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/Table/TableHeaderCell.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { TableSortLabel, Typography, tableSortLabelClasses } from '@mui/material';\nimport { SortDirection } from './model/table-model';\nimport { TableCell, TableCellProps } from './TableCell';\n\nexport interface TableHeaderCellProps extends TableCellProps {\n /**\n * Handler called when a sort event is triggered.\n * When specified, the header will include sorting interactions and indicators.\n */\n onSort?: ((event: unknown) => void) | undefined;\n\n /**\n * The current direction the header is sorted.\n */\n sortDirection?: SortDirection;\n\n /**\n * The next direction the header will be sorted when another sort action\n * is triggered via click/keyboard. This impacts some UI interactions (e.g.\n * the direction of the sort arrow on hover f the column is currently\n * unsorted.)\n */\n nextSortDirection?: SortDirection;\n}\n\nexport function TableHeaderCell({\n onSort,\n sortDirection,\n nextSortDirection,\n children,\n ...cellProps\n}: TableHeaderCellProps) {\n const showSortLabel = !!onSort;\n\n const headerText = (\n <Typography noWrap variant=\"inherit\" component=\"div\" color=\"inherit\">\n {children}\n </Typography>\n );\n\n const isActive = !!sortDirection;\n const direction = isActive ? sortDirection : nextSortDirection;\n\n return (\n <TableCell {...cellProps}>\n {showSortLabel ? (\n <TableSortLabel\n onClick={onSort}\n direction={direction}\n active={isActive}\n sx={{\n // Overrides a default vertical alignment in the CSS that changes\n // the header vertical rhythm in a way that's inconsistent with\n // non-sorting headers.\n verticalAlign: 'unset',\n\n // Makes it possible to ellipsize the text if it's too long.\n maxWidth: '100%',\n\n // Make the arrow visible when focused using the keyboard to assist\n // with a11y.\n '&:focus-visible': {\n [`& .${tableSortLabelClasses.icon}`]: {\n opacity: isActive ? 1 : 0.5,\n },\n },\n }}\n >\n {headerText}\n </TableSortLabel>\n ) : (\n headerText\n )}\n </TableCell>\n );\n}\n"],"names":["TableSortLabel","Typography","tableSortLabelClasses","TableCell","TableHeaderCell","onSort","sortDirection","nextSortDirection","children","cellProps","showSortLabel","headerText","noWrap","variant","component","color","isActive","direction","onClick","active","sx","verticalAlign","maxWidth","icon","opacity"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,cAAc,EAAEC,UAAU,EAAEC,qBAAqB,QAAQ,gBAAgB;AAElF,SAASC,SAAS,QAAwB,cAAc;AAuBxD,OAAO,SAASC,gBAAgB,EAC9BC,MAAM,EACNC,aAAa,EACbC,iBAAiB,EACjBC,QAAQ,EACR,GAAGC,WACkB;IACrB,MAAMC,gBAAgB,CAAC,CAACL;IAExB,MAAMM,2BACJ,KAACV;QAAWW,MAAM;QAACC,SAAQ;QAAUC,WAAU;QAAMC,OAAM;kBACxDP;;IAIL,MAAMQ,WAAW,CAAC,CAACV;IACnB,MAAMW,YAAYD,WAAWV,gBAAgBC;IAE7C,qBACE,KAACJ;QAAW,GAAGM,SAAS;kBACrBC,8BACC,KAACV;YACCkB,SAASb;YACTY,WAAWA;YACXE,QAAQH;YACRI,IAAI;gBACF,iEAAiE;gBACjE,+DAA+D;gBAC/D,uBAAuB;gBACvBC,eAAe;gBAEf,4DAA4D;gBAC5DC,UAAU;gBAEV,mEAAmE;gBACnE,aAAa;gBACb,mBAAmB;oBACjB,CAAC,CAAC,GAAG,EAAEpB,sBAAsBqB,IAAI,CAAC,CAAC,CAAC,EAAE;wBACpCC,SAASR,WAAW,IAAI;oBAC1B;gBACF;YACF;sBAECL;aAGHA;;AAIR"}
1
+ {"version":3,"sources":["../../src/Table/TableHeaderCell.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { TableSortLabel, Typography, tableSortLabelClasses } from '@mui/material';\nimport { ReactElement } from 'react';\nimport { TableCell, TableCellProps } from './TableCell';\nimport { SortDirection } from './model/table-model';\n\nexport interface TableHeaderCellProps extends TableCellProps {\n /**\n * Handler called when a sort event is triggered.\n * When specified, the header will include sorting interactions and indicators.\n */\n onSort?: ((event: unknown) => void) | undefined;\n\n /**\n * The current direction the header is sorted.\n */\n sortDirection?: SortDirection;\n\n /**\n * The next direction the header will be sorted when another sort action\n * is triggered via click/keyboard. This impacts some UI interactions (e.g.\n * the direction of the sort arrow on hover f the column is currently\n * unsorted.)\n */\n nextSortDirection?: SortDirection;\n}\n\nexport function TableHeaderCell({\n onSort,\n sortDirection,\n nextSortDirection,\n children,\n ...cellProps\n}: TableHeaderCellProps): ReactElement {\n const showSortLabel = !!onSort;\n\n const headerText = (\n <Typography noWrap variant=\"inherit\" component=\"div\" color=\"inherit\">\n {children}\n </Typography>\n );\n\n const isActive = !!sortDirection;\n const direction = isActive ? sortDirection : nextSortDirection;\n\n return (\n <TableCell {...cellProps}>\n {showSortLabel ? (\n <TableSortLabel\n onClick={onSort}\n direction={direction}\n active={isActive}\n sx={{\n // Overrides a default vertical alignment in the CSS that changes\n // the header vertical rhythm in a way that's inconsistent with\n // non-sorting headers.\n verticalAlign: 'unset',\n\n // Makes it possible to ellipsize the text if it's too long.\n maxWidth: '100%',\n\n // Make the arrow visible when focused using the keyboard to assist\n // with a11y.\n '&:focus-visible': {\n [`& .${tableSortLabelClasses.icon}`]: {\n opacity: isActive ? 1 : 0.5,\n },\n },\n }}\n >\n {headerText}\n </TableSortLabel>\n ) : (\n headerText\n )}\n </TableCell>\n );\n}\n"],"names":["TableSortLabel","Typography","tableSortLabelClasses","TableCell","TableHeaderCell","onSort","sortDirection","nextSortDirection","children","cellProps","showSortLabel","headerText","noWrap","variant","component","color","isActive","direction","onClick","active","sx","verticalAlign","maxWidth","icon","opacity"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,cAAc,EAAEC,UAAU,EAAEC,qBAAqB,QAAQ,gBAAgB;AAElF,SAASC,SAAS,QAAwB,cAAc;AAwBxD,OAAO,SAASC,gBAAgB,EAC9BC,MAAM,EACNC,aAAa,EACbC,iBAAiB,EACjBC,QAAQ,EACR,GAAGC,WACkB;IACrB,MAAMC,gBAAgB,CAAC,CAACL;IAExB,MAAMM,2BACJ,KAACV;QAAWW,MAAM;QAACC,SAAQ;QAAUC,WAAU;QAAMC,OAAM;kBACxDP;;IAIL,MAAMQ,WAAW,CAAC,CAACV;IACnB,MAAMW,YAAYD,WAAWV,gBAAgBC;IAE7C,qBACE,KAACJ;QAAW,GAAGM,SAAS;kBACrBC,8BACC,KAACV;YACCkB,SAASb;YACTY,WAAWA;YACXE,QAAQH;YACRI,IAAI;gBACF,iEAAiE;gBACjE,+DAA+D;gBAC/D,uBAAuB;gBACvBC,eAAe;gBAEf,4DAA4D;gBAC5DC,UAAU;gBAEV,mEAAmE;gBACnE,aAAa;gBACb,mBAAmB;oBACjB,CAAC,CAAC,GAAG,EAAEpB,sBAAsBqB,IAAI,CAAC,CAAC,CAAC,EAAE;wBACpCC,SAASR,WAAW,IAAI;oBAC1B;gBACF;YACF;sBAECL;aAGHA;;AAIR"}
@@ -1,11 +1,12 @@
1
- /// <reference types="react" />
2
1
  import { Column, HeaderGroup, Row } from '@tanstack/react-table';
3
- import { TableProps } from './model/table-model';
4
- export type VirtualizedTableProps<TableData> = Required<Pick<TableProps<TableData>, 'height' | 'width' | 'density'>> & Pick<TableProps<TableData>, 'onRowMouseOver' | 'onRowMouseOut'> & {
2
+ import { ReactElement } from 'react';
3
+ import { TableCellConfigs, TableProps } from './model/table-model';
4
+ export type VirtualizedTableProps<TableData> = Required<Pick<TableProps<TableData>, 'height' | 'width' | 'density' | 'defaultColumnWidth'>> & Pick<TableProps<TableData>, 'onRowMouseOver' | 'onRowMouseOut'> & {
5
5
  onRowClick: (e: React.MouseEvent<HTMLDivElement, MouseEvent>, id: string) => void;
6
6
  rows: Array<Row<TableData>>;
7
7
  columns: Array<Column<TableData, unknown>>;
8
8
  headers: Array<HeaderGroup<TableData>>;
9
+ cellConfigs?: TableCellConfigs;
9
10
  };
10
- export declare function VirtualizedTable<TableData>({ width, height, density, onRowClick, onRowMouseOver, onRowMouseOut, rows, columns, headers, }: VirtualizedTableProps<TableData>): import("react/jsx-runtime").JSX.Element;
11
+ export declare function VirtualizedTable<TableData>({ width, height, density, defaultColumnWidth, onRowClick, onRowMouseOver, onRowMouseOut, rows, columns, headers, cellConfigs, }: VirtualizedTableProps<TableData>): ReactElement;
11
12
  //# sourceMappingURL=VirtualizedTable.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"VirtualizedTable.d.ts","sourceRoot":"","sources":["../../src/Table/VirtualizedTable.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,GAAG,EAAc,MAAM,uBAAuB,CAAC;AAW7E,OAAO,EAAE,UAAU,EAAqB,MAAM,qBAAqB,CAAC;AAQpE,MAAM,MAAM,qBAAqB,CAAC,SAAS,IAAI,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAC,CAAC,GAClH,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,EAAE,gBAAgB,GAAG,eAAe,CAAC,GAAG;IAChE,UAAU,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,EAAE,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAClF,IAAI,EAAE,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC;IAC5B,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC;IAC3C,OAAO,EAAE,KAAK,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC,CAAC;CACxC,CAAC;AAKJ,wBAAgB,gBAAgB,CAAC,SAAS,EAAE,EAC1C,KAAK,EACL,MAAM,EACN,OAAO,EACP,UAAU,EACV,cAAc,EACd,aAAa,EACb,IAAI,EACJ,OAAO,EACP,OAAO,GACR,EAAE,qBAAqB,CAAC,SAAS,CAAC,2CA4KlC"}
1
+ {"version":3,"file":"VirtualizedTable.d.ts","sourceRoot":"","sources":["../../src/Table/VirtualizedTable.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,GAAG,EAAc,MAAM,uBAAuB,CAAC;AAG7E,OAAO,EAAmB,YAAY,EAAE,MAAM,OAAO,CAAC;AAQtD,OAAO,EAAE,gBAAgB,EAAE,UAAU,EAAqB,MAAM,qBAAqB,CAAC;AAQtF,MAAM,MAAM,qBAAqB,CAAC,SAAS,IAAI,QAAQ,CACrD,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,oBAAoB,CAAC,CACnF,GACC,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,EAAE,gBAAgB,GAAG,eAAe,CAAC,GAAG;IAChE,UAAU,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,EAAE,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAClF,IAAI,EAAE,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC;IAC5B,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC;IAC3C,OAAO,EAAE,KAAK,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC,CAAC;IACvC,WAAW,CAAC,EAAE,gBAAgB,CAAC;CAChC,CAAC;AAKJ,wBAAgB,gBAAgB,CAAC,SAAS,EAAE,EAC1C,KAAK,EACL,MAAM,EACN,OAAO,EACP,kBAAkB,EAClB,UAAU,EACV,cAAc,EACd,aAAa,EACb,IAAI,EACJ,OAAO,EACP,OAAO,EACP,WAAW,GACZ,EAAE,qBAAqB,CAAC,SAAS,CAAC,GAAG,YAAY,CAkLjD"}
@@ -26,7 +26,7 @@ import { useVirtualizedTableKeyboardNav } from './hooks/useVirtualizedTableKeybo
26
26
  // Separating out the virtualized table because we may want a paginated table
27
27
  // in the future that does not need virtualization, and we'd likely lay them
28
28
  // out differently.
29
- export function VirtualizedTable({ width, height, density, onRowClick, onRowMouseOver, onRowMouseOut, rows, columns, headers }) {
29
+ export function VirtualizedTable({ width, height, density, defaultColumnWidth, onRowClick, onRowMouseOver, onRowMouseOut, rows, columns, headers, cellConfigs }) {
30
30
  const virtuosoRef = useRef(null);
31
31
  // Use a ref for these values because they are only needed for keyboard
32
32
  // focus interactions and setting them on state will lead to a significant
@@ -79,10 +79,10 @@ export function VirtualizedTable({ width, height, density, onRowClick, onRowMous
79
79
  onClick: (e)=>onRowClick(e, row.id),
80
80
  density: density,
81
81
  onMouseOver: (e)=>{
82
- onRowMouseOver === null || onRowMouseOver === void 0 ? void 0 : onRowMouseOver(e, rowEventOpts);
82
+ onRowMouseOver?.(e, rowEventOpts);
83
83
  },
84
84
  onMouseOut: (e)=>{
85
- onRowMouseOut === null || onRowMouseOut === void 0 ? void 0 : onRowMouseOut(e, rowEventOpts);
85
+ onRowMouseOut?.(e, rowEventOpts);
86
86
  }
87
87
  });
88
88
  },
@@ -98,7 +98,7 @@ export function VirtualizedTable({ width, height, density, onRowClick, onRowMous
98
98
  width
99
99
  ]);
100
100
  return /*#__PURE__*/ _jsx(Box, {
101
- sx: {
101
+ style: {
102
102
  width,
103
103
  height
104
104
  },
@@ -116,7 +116,6 @@ export function VirtualizedTable({ width, height, density, onRowClick, onRowMous
116
116
  return /*#__PURE__*/ _jsx(TableRow, {
117
117
  density: density,
118
118
  children: headerGroup.headers.map((header, i, headers)=>{
119
- var _column_columnDef_meta, _column_columnDef_meta1;
120
119
  const column = header.column;
121
120
  const position = {
122
121
  row: 0,
@@ -128,11 +127,11 @@ export function VirtualizedTable({ width, height, density, onRowClick, onRowMous
128
127
  onSort: column.getCanSort() ? column.getToggleSortingHandler() : undefined,
129
128
  sortDirection: typeof isSorted === 'string' ? isSorted : undefined,
130
129
  nextSortDirection: typeof nextSorting === 'string' ? nextSorting : undefined,
131
- width: column.getSize() || 'auto',
132
- align: (_column_columnDef_meta = column.columnDef.meta) === null || _column_columnDef_meta === void 0 ? void 0 : _column_columnDef_meta.align,
130
+ width: column.getSize() || defaultColumnWidth,
131
+ align: column.columnDef.meta?.align,
133
132
  variant: "head",
134
133
  density: density,
135
- description: (_column_columnDef_meta1 = column.columnDef.meta) === null || _column_columnDef_meta1 === void 0 ? void 0 : _column_columnDef_meta1.headerDescription,
134
+ description: column.columnDef.meta?.headerDescription,
136
135
  focusState: getFocusState(position),
137
136
  onFocusTrigger: ()=>keyboardNav.onCellFocus(position),
138
137
  isFirstColumn: i === 0,
@@ -151,16 +150,16 @@ export function VirtualizedTable({ width, height, density, onRowClick, onRowMous
151
150
  }
152
151
  return /*#__PURE__*/ _jsx(_Fragment, {
153
152
  children: row.getVisibleCells().map((cell, i, cells)=>{
154
- var _cell_column_columnDef_meta, _cell_column_columnDef_meta1;
155
153
  const position = {
156
154
  // Add 1 to the row index because the header is row 0
157
155
  row: index + 1,
158
156
  column: i
159
157
  };
160
158
  const cellContext = cell.getContext();
159
+ const cellConfig = cellConfigs?.[cellContext.cell.id];
161
160
  const cellRenderFn = cell.column.columnDef.cell;
162
- const cellContent = typeof cellRenderFn == 'function' ? cellRenderFn(cellContext) : null;
163
- const cellDescriptionDef = (_cell_column_columnDef_meta = cell.column.columnDef.meta) === null || _cell_column_columnDef_meta === void 0 ? void 0 : _cell_column_columnDef_meta.cellDescription;
161
+ const cellContent = typeof cellRenderFn === 'function' ? cellRenderFn(cellContext) : null;
162
+ const cellDescriptionDef = cell.column.columnDef.meta?.cellDescription;
164
163
  let description = undefined;
165
164
  if (typeof cellDescriptionDef === 'function') {
166
165
  // If the cell description is a function, set the value using
@@ -173,15 +172,19 @@ export function VirtualizedTable({ width, height, density, onRowClick, onRowMous
173
172
  description = cellContent;
174
173
  }
175
174
  return /*#__PURE__*/ _jsx(TableCell, {
176
- width: cell.column.getSize() || 'auto',
177
- align: (_cell_column_columnDef_meta1 = cell.column.columnDef.meta) === null || _cell_column_columnDef_meta1 === void 0 ? void 0 : _cell_column_columnDef_meta1.align,
175
+ "data-testid": cell.id,
176
+ title: description || cellConfig?.text || cellContent,
177
+ width: cell.column.getSize() || defaultColumnWidth,
178
+ align: cell.column.columnDef.meta?.align,
178
179
  density: density,
179
180
  focusState: getFocusState(position),
180
181
  onFocusTrigger: ()=>keyboardNav.onCellFocus(position),
181
182
  isFirstColumn: i === 0,
182
183
  isLastColumn: i === cells.length - 1,
183
184
  description: description,
184
- children: cellContent
185
+ color: cellConfig?.textColor ?? undefined,
186
+ backgroundColor: cellConfig?.backgroundColor ?? undefined,
187
+ children: cellConfig?.text || cellContent
185
188
  }, cell.id);
186
189
  })
187
190
  });
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/Table/VirtualizedTable.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Column, HeaderGroup, Row, flexRender } from '@tanstack/react-table';\nimport { Box } from '@mui/material';\nimport { TableVirtuoso, TableComponents, TableVirtuosoHandle, TableVirtuosoProps } from 'react-virtuoso';\nimport { useRef, useMemo } from 'react';\nimport { TableRow } from './TableRow';\nimport { TableBody } from './TableBody';\nimport { InnerTable } from './InnerTable';\nimport { TableHead } from './TableHead';\nimport { TableHeaderCell } from './TableHeaderCell';\nimport { TableCell, TableCellProps } from './TableCell';\nimport { VirtualizedTableContainer } from './VirtualizedTableContainer';\nimport { TableProps, TableRowEventOpts } from './model/table-model';\nimport { useVirtualizedTableKeyboardNav } from './hooks/useVirtualizedTableKeyboardNav';\n\ntype TableCellPosition = {\n row: number;\n column: number;\n};\n\nexport type VirtualizedTableProps<TableData> = Required<Pick<TableProps<TableData>, 'height' | 'width' | 'density'>> &\n Pick<TableProps<TableData>, 'onRowMouseOver' | 'onRowMouseOut'> & {\n onRowClick: (e: React.MouseEvent<HTMLDivElement, MouseEvent>, id: string) => void;\n rows: Array<Row<TableData>>;\n columns: Array<Column<TableData, unknown>>;\n headers: Array<HeaderGroup<TableData>>;\n };\n\n// Separating out the virtualized table because we may want a paginated table\n// in the future that does not need virtualization, and we'd likely lay them\n// out differently.\nexport function VirtualizedTable<TableData>({\n width,\n height,\n density,\n onRowClick,\n onRowMouseOver,\n onRowMouseOut,\n rows,\n columns,\n headers,\n}: VirtualizedTableProps<TableData>) {\n const virtuosoRef = useRef<TableVirtuosoHandle>(null);\n\n // Use a ref for these values because they are only needed for keyboard\n // focus interactions and setting them on state will lead to a significant\n // amount of unnecessary re-renders.\n const visibleRange = useRef({\n startIndex: 0,\n endIndex: 0,\n });\n const setVisibleRange: TableVirtuosoProps<TableData, unknown>['rangeChanged'] = (newVisibleRange) => {\n visibleRange.current = newVisibleRange;\n };\n\n const keyboardNav = useVirtualizedTableKeyboardNav({\n visibleRange: visibleRange,\n virtualTable: virtuosoRef,\n\n // We add 1 here for the header.\n maxRows: rows.length + 1,\n maxColumns: columns.length,\n });\n\n const getFocusState = (cellPosition: TableCellPosition): TableCellProps['focusState'] => {\n if (cellPosition.row === keyboardNav.activeCell.row && cellPosition.column === keyboardNav.activeCell.column) {\n return keyboardNav.isActive ? 'trigger-focus' : 'focus-next';\n }\n\n return 'none';\n };\n\n const VirtuosoTableComponents: TableComponents<TableData> = useMemo(() => {\n return {\n Scroller: VirtualizedTableContainer,\n Table: (props) => {\n return <InnerTable {...props} width={width} density={density} onKeyDown={keyboardNav.onTableKeyDown} />;\n },\n TableHead,\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n TableRow: ({ item, ...props }) => {\n const index = props['data-index'];\n const row = rows[index];\n if (!row) {\n return null;\n }\n\n const rowEventOpts: TableRowEventOpts = { id: row.id, index: row.index };\n\n return (\n <TableRow\n {...props}\n onClick={(e) => onRowClick(e, row.id)}\n density={density}\n onMouseOver={(e) => {\n onRowMouseOver?.(e, rowEventOpts);\n }}\n onMouseOut={(e) => {\n onRowMouseOut?.(e, rowEventOpts);\n }}\n />\n );\n },\n TableBody,\n };\n }, [density, keyboardNav.onTableKeyDown, onRowClick, onRowMouseOut, onRowMouseOver, rows, width]);\n\n return (\n <Box sx={{ width, height }}>\n <TableVirtuoso\n ref={virtuosoRef}\n totalCount={rows.length}\n components={VirtuosoTableComponents}\n // Note: this value is impacted by overscan. See this issue if overscan\n // is added.\n // https://github.com/petyosi/react-virtuoso/issues/118#issuecomment-642156138\n rangeChanged={setVisibleRange}\n fixedHeaderContent={() => {\n return (\n <>\n {headers.map((headerGroup) => {\n return (\n <TableRow key={headerGroup.id} density={density}>\n {headerGroup.headers.map((header, i, headers) => {\n const column = header.column;\n const position: TableCellPosition = {\n row: 0,\n column: i,\n };\n\n const isSorted = column.getIsSorted();\n const nextSorting = column.getNextSortingOrder();\n\n return (\n <TableHeaderCell\n key={header.id}\n onSort={column.getCanSort() ? column.getToggleSortingHandler() : undefined}\n sortDirection={typeof isSorted === 'string' ? isSorted : undefined}\n nextSortDirection={typeof nextSorting === 'string' ? nextSorting : undefined}\n width={column.getSize() || 'auto'}\n align={column.columnDef.meta?.align}\n variant=\"head\"\n density={density}\n description={column.columnDef.meta?.headerDescription}\n focusState={getFocusState(position)}\n onFocusTrigger={() => keyboardNav.onCellFocus(position)}\n isFirstColumn={i === 0}\n isLastColumn={i === headers.length - 1}\n >\n {flexRender(column.columnDef.header, header.getContext())}\n </TableHeaderCell>\n );\n })}\n </TableRow>\n );\n })}\n </>\n );\n }}\n itemContent={(index) => {\n const row = rows[index];\n if (!row) {\n return null;\n }\n\n return (\n <>\n {row.getVisibleCells().map((cell, i, cells) => {\n const position: TableCellPosition = {\n // Add 1 to the row index because the header is row 0\n row: index + 1,\n column: i,\n };\n\n const cellContext = cell.getContext();\n const cellRenderFn = cell.column.columnDef.cell;\n const cellContent = typeof cellRenderFn == 'function' ? cellRenderFn(cellContext) : null;\n\n const cellDescriptionDef = cell.column.columnDef.meta?.cellDescription;\n let description: string | undefined = undefined;\n if (typeof cellDescriptionDef === 'function') {\n // If the cell description is a function, set the value using\n // the function.\n description = cellDescriptionDef(cellContext);\n } else if (cellDescriptionDef && typeof cellContent === 'string') {\n // If the cell description is `true` AND the cell content is\n // a string (and thus viable as a `title` attribute), use the\n // cell content.\n description = cellContent;\n }\n\n return (\n <TableCell\n key={cell.id}\n width={cell.column.getSize() || 'auto'}\n align={cell.column.columnDef.meta?.align}\n density={density}\n focusState={getFocusState(position)}\n onFocusTrigger={() => keyboardNav.onCellFocus(position)}\n isFirstColumn={i === 0}\n isLastColumn={i === cells.length - 1}\n description={description}\n >\n {cellContent}\n </TableCell>\n );\n })}\n </>\n );\n }}\n />\n </Box>\n );\n}\n"],"names":["flexRender","Box","TableVirtuoso","useRef","useMemo","TableRow","TableBody","InnerTable","TableHead","TableHeaderCell","TableCell","VirtualizedTableContainer","useVirtualizedTableKeyboardNav","VirtualizedTable","width","height","density","onRowClick","onRowMouseOver","onRowMouseOut","rows","columns","headers","virtuosoRef","visibleRange","startIndex","endIndex","setVisibleRange","newVisibleRange","current","keyboardNav","virtualTable","maxRows","length","maxColumns","getFocusState","cellPosition","row","activeCell","column","isActive","VirtuosoTableComponents","Scroller","Table","props","onKeyDown","onTableKeyDown","item","index","rowEventOpts","id","onClick","e","onMouseOver","onMouseOut","sx","ref","totalCount","components","rangeChanged","fixedHeaderContent","map","headerGroup","header","i","position","isSorted","getIsSorted","nextSorting","getNextSortingOrder","onSort","getCanSort","getToggleSortingHandler","undefined","sortDirection","nextSortDirection","getSize","align","columnDef","meta","variant","description","headerDescription","focusState","onFocusTrigger","onCellFocus","isFirstColumn","isLastColumn","getContext","itemContent","getVisibleCells","cell","cells","cellContext","cellRenderFn","cellContent","cellDescriptionDef","cellDescription"],"mappings":"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"}
1
+ {"version":3,"sources":["../../src/Table/VirtualizedTable.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Column, HeaderGroup, Row, flexRender } from '@tanstack/react-table';\nimport { Box } from '@mui/material';\nimport { TableVirtuoso, TableComponents, TableVirtuosoHandle, TableVirtuosoProps } from 'react-virtuoso';\nimport { useRef, useMemo, ReactElement } from 'react';\nimport { TableRow } from './TableRow';\nimport { TableBody } from './TableBody';\nimport { InnerTable } from './InnerTable';\nimport { TableHead } from './TableHead';\nimport { TableHeaderCell } from './TableHeaderCell';\nimport { TableCell, TableCellProps } from './TableCell';\nimport { VirtualizedTableContainer } from './VirtualizedTableContainer';\nimport { TableCellConfigs, TableProps, TableRowEventOpts } from './model/table-model';\nimport { useVirtualizedTableKeyboardNav } from './hooks/useVirtualizedTableKeyboardNav';\n\ntype TableCellPosition = {\n row: number;\n column: number;\n};\n\nexport type VirtualizedTableProps<TableData> = Required<\n Pick<TableProps<TableData>, 'height' | 'width' | 'density' | 'defaultColumnWidth'>\n> &\n Pick<TableProps<TableData>, 'onRowMouseOver' | 'onRowMouseOut'> & {\n onRowClick: (e: React.MouseEvent<HTMLDivElement, MouseEvent>, id: string) => void;\n rows: Array<Row<TableData>>;\n columns: Array<Column<TableData, unknown>>;\n headers: Array<HeaderGroup<TableData>>;\n cellConfigs?: TableCellConfigs;\n };\n\n// Separating out the virtualized table because we may want a paginated table\n// in the future that does not need virtualization, and we'd likely lay them\n// out differently.\nexport function VirtualizedTable<TableData>({\n width,\n height,\n density,\n defaultColumnWidth,\n onRowClick,\n onRowMouseOver,\n onRowMouseOut,\n rows,\n columns,\n headers,\n cellConfigs,\n}: VirtualizedTableProps<TableData>): ReactElement {\n const virtuosoRef = useRef<TableVirtuosoHandle>(null);\n\n // Use a ref for these values because they are only needed for keyboard\n // focus interactions and setting them on state will lead to a significant\n // amount of unnecessary re-renders.\n const visibleRange = useRef({\n startIndex: 0,\n endIndex: 0,\n });\n const setVisibleRange: TableVirtuosoProps<TableData, unknown>['rangeChanged'] = (newVisibleRange) => {\n visibleRange.current = newVisibleRange;\n };\n\n const keyboardNav = useVirtualizedTableKeyboardNav({\n visibleRange: visibleRange,\n virtualTable: virtuosoRef,\n\n // We add 1 here for the header.\n maxRows: rows.length + 1,\n maxColumns: columns.length,\n });\n\n const getFocusState = (cellPosition: TableCellPosition): TableCellProps['focusState'] => {\n if (cellPosition.row === keyboardNav.activeCell.row && cellPosition.column === keyboardNav.activeCell.column) {\n return keyboardNav.isActive ? 'trigger-focus' : 'focus-next';\n }\n\n return 'none';\n };\n\n const VirtuosoTableComponents: TableComponents<TableData> = useMemo(() => {\n return {\n Scroller: VirtualizedTableContainer,\n Table: (props): ReactElement => {\n return <InnerTable {...props} width={width} density={density} onKeyDown={keyboardNav.onTableKeyDown} />;\n },\n TableHead,\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n TableRow: ({ item, ...props }): ReactElement | null => {\n const index = props['data-index'];\n const row = rows[index];\n if (!row) {\n return null;\n }\n\n const rowEventOpts: TableRowEventOpts = { id: row.id, index: row.index };\n\n return (\n <TableRow\n {...props}\n onClick={(e) => onRowClick(e, row.id)}\n density={density}\n onMouseOver={(e) => {\n onRowMouseOver?.(e, rowEventOpts);\n }}\n onMouseOut={(e) => {\n onRowMouseOut?.(e, rowEventOpts);\n }}\n />\n );\n },\n TableBody,\n };\n }, [density, keyboardNav.onTableKeyDown, onRowClick, onRowMouseOut, onRowMouseOver, rows, width]);\n\n return (\n <Box style={{ width, height }}>\n <TableVirtuoso\n ref={virtuosoRef}\n totalCount={rows.length}\n components={VirtuosoTableComponents}\n // Note: this value is impacted by overscan. See this issue if overscan\n // is added.\n // https://github.com/petyosi/react-virtuoso/issues/118#issuecomment-642156138\n rangeChanged={setVisibleRange}\n fixedHeaderContent={() => {\n return (\n <>\n {headers.map((headerGroup) => {\n return (\n <TableRow key={headerGroup.id} density={density}>\n {headerGroup.headers.map((header, i, headers) => {\n const column = header.column;\n const position: TableCellPosition = {\n row: 0,\n column: i,\n };\n\n const isSorted = column.getIsSorted();\n const nextSorting = column.getNextSortingOrder();\n\n return (\n <TableHeaderCell\n key={header.id}\n onSort={column.getCanSort() ? column.getToggleSortingHandler() : undefined}\n sortDirection={typeof isSorted === 'string' ? isSorted : undefined}\n nextSortDirection={typeof nextSorting === 'string' ? nextSorting : undefined}\n width={column.getSize() || defaultColumnWidth}\n align={column.columnDef.meta?.align}\n variant=\"head\"\n density={density}\n description={column.columnDef.meta?.headerDescription}\n focusState={getFocusState(position)}\n onFocusTrigger={() => keyboardNav.onCellFocus(position)}\n isFirstColumn={i === 0}\n isLastColumn={i === headers.length - 1}\n >\n {flexRender(column.columnDef.header, header.getContext())}\n </TableHeaderCell>\n );\n })}\n </TableRow>\n );\n })}\n </>\n );\n }}\n itemContent={(index) => {\n const row = rows[index];\n if (!row) {\n return null;\n }\n\n return (\n <>\n {row.getVisibleCells().map((cell, i, cells) => {\n const position: TableCellPosition = {\n // Add 1 to the row index because the header is row 0\n row: index + 1,\n column: i,\n };\n\n const cellContext = cell.getContext();\n const cellConfig = cellConfigs?.[cellContext.cell.id];\n\n const cellRenderFn = cell.column.columnDef.cell;\n const cellContent = typeof cellRenderFn === 'function' ? cellRenderFn(cellContext) : null;\n\n const cellDescriptionDef = cell.column.columnDef.meta?.cellDescription;\n let description: string | undefined = undefined;\n if (typeof cellDescriptionDef === 'function') {\n // If the cell description is a function, set the value using\n // the function.\n description = cellDescriptionDef(cellContext);\n } else if (cellDescriptionDef && typeof cellContent === 'string') {\n // If the cell description is `true` AND the cell content is\n // a string (and thus viable as a `title` attribute), use the\n // cell content.\n description = cellContent;\n }\n\n return (\n <TableCell\n key={cell.id}\n data-testid={cell.id}\n title={description || cellConfig?.text || cellContent}\n width={cell.column.getSize() || defaultColumnWidth}\n align={cell.column.columnDef.meta?.align}\n density={density}\n focusState={getFocusState(position)}\n onFocusTrigger={() => keyboardNav.onCellFocus(position)}\n isFirstColumn={i === 0}\n isLastColumn={i === cells.length - 1}\n description={description}\n color={cellConfig?.textColor ?? undefined}\n backgroundColor={cellConfig?.backgroundColor ?? undefined}\n >\n {cellConfig?.text || cellContent}\n </TableCell>\n );\n })}\n </>\n );\n }}\n />\n </Box>\n );\n}\n"],"names":["flexRender","Box","TableVirtuoso","useRef","useMemo","TableRow","TableBody","InnerTable","TableHead","TableHeaderCell","TableCell","VirtualizedTableContainer","useVirtualizedTableKeyboardNav","VirtualizedTable","width","height","density","defaultColumnWidth","onRowClick","onRowMouseOver","onRowMouseOut","rows","columns","headers","cellConfigs","virtuosoRef","visibleRange","startIndex","endIndex","setVisibleRange","newVisibleRange","current","keyboardNav","virtualTable","maxRows","length","maxColumns","getFocusState","cellPosition","row","activeCell","column","isActive","VirtuosoTableComponents","Scroller","Table","props","onKeyDown","onTableKeyDown","item","index","rowEventOpts","id","onClick","e","onMouseOver","onMouseOut","style","ref","totalCount","components","rangeChanged","fixedHeaderContent","map","headerGroup","header","i","position","isSorted","getIsSorted","nextSorting","getNextSortingOrder","onSort","getCanSort","getToggleSortingHandler","undefined","sortDirection","nextSortDirection","getSize","align","columnDef","meta","variant","description","headerDescription","focusState","onFocusTrigger","onCellFocus","isFirstColumn","isLastColumn","getContext","itemContent","getVisibleCells","cell","cells","cellContext","cellConfig","cellRenderFn","cellContent","cellDescriptionDef","cellDescription","data-testid","title","text","color","textColor","backgroundColor"],"mappings":"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"}
@@ -1,4 +1,4 @@
1
- /// <reference types="react" />
1
+ import { KeyboardEventHandler } from 'react';
2
2
  export interface UseTableKeyboardNavProps {
3
3
  maxRows: number;
4
4
  maxColumns: number;
@@ -25,7 +25,7 @@ type TableCellPosition = {
25
25
  export declare function useTableKeyboardNav({ maxRows, maxColumns, onActiveCellChange }: UseTableKeyboardNavProps): {
26
26
  activeCell: TableCellPosition;
27
27
  isActive: boolean;
28
- onTableKeyDown: import("react").KeyboardEventHandler<HTMLTableElement>;
28
+ onTableKeyDown: KeyboardEventHandler<HTMLTableElement>;
29
29
  onCellFocus: (cellPosition: TableCellPosition) => void;
30
30
  };
31
31
  export {};
@@ -1 +1 @@
1
- {"version":3,"file":"useTableKeyboardNav.d.ts","sourceRoot":"","sources":["../../../src/Table/hooks/useTableKeyboardNav.tsx"],"names":[],"mappings":";AAeA,MAAM,WAAW,wBAAwB;IACvC,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;IAEnB;;;;;;;OAOG;IACH,kBAAkB,CAAC,EAAE,CACnB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,EACxC,iBAAiB,EAAE,iBAAiB,EACpC,qBAAqB,EAAE,iBAAiB,GAAG,SAAS,KACjD,iBAAiB,GAAG,SAAS,CAAC;CACpC;AAED,KAAK,iBAAiB,GAAG;IACvB,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAaF;;;;;GAKG;AACH,wBAAgB,mBAAmB,CAAC,EAAE,OAAO,EAAE,UAAU,EAAE,kBAAkB,EAAE,EAAE,wBAAwB;;;;gCAIhE,iBAAiB;EAiEzD"}
1
+ {"version":3,"file":"useTableKeyboardNav.d.ts","sourceRoot":"","sources":["../../../src/Table/hooks/useTableKeyboardNav.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,oBAAoB,EAAyB,MAAM,OAAO,CAAC;AAEpE,MAAM,WAAW,wBAAwB;IACvC,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;IAEnB;;;;;;;OAOG;IACH,kBAAkB,CAAC,EAAE,CACnB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,EACxC,iBAAiB,EAAE,iBAAiB,EACpC,qBAAqB,EAAE,iBAAiB,GAAG,SAAS,KACjD,iBAAiB,GAAG,SAAS,CAAC;CACpC;AAED,KAAK,iBAAiB,GAAG;IACvB,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAaF;;;;;GAKG;AACH,wBAAgB,mBAAmB,CAAC,EAAE,OAAO,EAAE,UAAU,EAAE,kBAAkB,EAAE,EAAE,wBAAwB,GAAG;IAC1G,UAAU,EAAE,iBAAiB,CAAC;IAC9B,QAAQ,EAAE,OAAO,CAAC;IAClB,cAAc,EAAE,oBAAoB,CAAC,gBAAgB,CAAC,CAAC;IACvD,WAAW,EAAE,CAAC,YAAY,EAAE,iBAAiB,KAAK,IAAI,CAAC;CACxD,CAqEA"}
@@ -73,7 +73,7 @@ function isArrowKey(key) {
73
73
  column: nextColumn,
74
74
  row: nextRow
75
75
  };
76
- const newPosition = (onActiveCellChange === null || onActiveCellChange === void 0 ? void 0 : onActiveCellChange(e, curActiveCell, defaultNewPosition)) || defaultNewPosition;
76
+ const newPosition = onActiveCellChange?.(e, curActiveCell, defaultNewPosition) || defaultNewPosition;
77
77
  if (newPosition.row === curActiveCell.row && newPosition.column === curActiveCell.column) {
78
78
  // Return original to avoid creating a new object if nothing
79
79
  // changed.
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/Table/hooks/useTableKeyboardNav.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { useCallback, useState } from 'react';\n\nexport interface UseTableKeyboardNavProps {\n maxRows: number;\n maxColumns: number;\n\n /**\n * Function used to modify the active table cell based on the keyboard event,\n * the current position, and the default recommended next position (this value\n * will be `undefined` in cases where there is no default handler like `PageUp`\n * and `PageDown`). This can be used to modify the next position that will be\n * used and/or to handle side effects related to the new position (e.g.\n * pagination, scrolling the active cell into view).\n */\n onActiveCellChange?: (\n e: React.KeyboardEvent<HTMLTableElement>,\n currentActiveCell: TableCellPosition,\n defaultNextActiveCell: TableCellPosition | undefined\n ) => TableCellPosition | undefined;\n}\n\ntype TableCellPosition = {\n row: number;\n column: number;\n};\n\nconst DEFAULT_ACTIVE_CELL: TableCellPosition = {\n row: 0,\n column: 0,\n};\n\nconst ARROW_KEYS = ['ArrowRight', 'ArrowLeft', 'ArrowUp', 'ArrowDown'];\n\nfunction isArrowKey(key: string) {\n return ARROW_KEYS.includes(key);\n}\n\n/**\n * Hook for managing keyboard navigation for table components. It is intended\n * to be wrapped by implementation-specific tables to account for differences\n * like pagination, infinite scroll, and virtualization. See `useVirtualizedKeyboardNav`\n * for an example.\n */\nexport function useTableKeyboardNav({ maxRows, maxColumns, onActiveCellChange }: UseTableKeyboardNavProps) {\n const [activeCell, setActiveCell] = useState<TableCellPosition>(DEFAULT_ACTIVE_CELL);\n const [isActive, setIsActive] = useState(false);\n\n const handleCellFocus = (cellPosition: TableCellPosition) => {\n if (cellPosition.column === activeCell.column && cellPosition.row === activeCell.row && isActive) {\n return;\n }\n setIsActive(true);\n setActiveCell(cellPosition);\n };\n\n const handleKeyDown: React.KeyboardEventHandler<HTMLTableElement> = useCallback(\n (e) => {\n // Including some of the basic a11y keyboard interaction patterns from:\n // https://www.w3.org/WAI/ARIA/apg/patterns/grid/\n // TODO: add other keyboard combos.\n const key = e.key;\n\n if (isArrowKey(key) || key === 'Home' || key === 'End' || key === 'PageDown' || key === 'PageUp') {\n setActiveCell((curActiveCell) => {\n let nextRow: number = curActiveCell.row;\n let nextColumn: number = curActiveCell.column;\n\n if (key === 'ArrowRight' && nextColumn < maxColumns - 1) {\n e.preventDefault();\n nextColumn += 1;\n } else if (key === 'ArrowLeft' && nextColumn > 0) {\n e.preventDefault();\n nextColumn -= 1;\n } else if (key === 'ArrowDown' && nextRow < maxRows - 1) {\n e.preventDefault();\n nextRow += 1;\n } else if (key === 'ArrowUp' && nextRow > 0) {\n e.preventDefault();\n nextRow -= 1;\n } else if (key === 'Home') {\n e.preventDefault();\n nextRow = 0;\n nextColumn = 0;\n } else if (key === 'End') {\n e.preventDefault();\n nextRow = maxRows - 1;\n nextColumn = maxColumns - 1;\n }\n\n const defaultNewPosition = { column: nextColumn, row: nextRow };\n\n const newPosition = onActiveCellChange?.(e, curActiveCell, defaultNewPosition) || defaultNewPosition;\n\n if (newPosition.row === curActiveCell.row && newPosition.column === curActiveCell.column) {\n // Return original to avoid creating a new object if nothing\n // changed.\n return curActiveCell;\n }\n\n return newPosition;\n });\n }\n },\n [maxColumns, maxRows, onActiveCellChange]\n );\n\n return {\n activeCell,\n isActive,\n onTableKeyDown: handleKeyDown,\n onCellFocus: handleCellFocus,\n };\n}\n"],"names":["useCallback","useState","DEFAULT_ACTIVE_CELL","row","column","ARROW_KEYS","isArrowKey","key","includes","useTableKeyboardNav","maxRows","maxColumns","onActiveCellChange","activeCell","setActiveCell","isActive","setIsActive","handleCellFocus","cellPosition","handleKeyDown","e","curActiveCell","nextRow","nextColumn","preventDefault","defaultNewPosition","newPosition","onTableKeyDown","onCellFocus"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,WAAW,EAAEC,QAAQ,QAAQ,QAAQ;AA0B9C,MAAMC,sBAAyC;IAC7CC,KAAK;IACLC,QAAQ;AACV;AAEA,MAAMC,aAAa;IAAC;IAAc;IAAa;IAAW;CAAY;AAEtE,SAASC,WAAWC,GAAW;IAC7B,OAAOF,WAAWG,QAAQ,CAACD;AAC7B;AAEA;;;;;CAKC,GACD,OAAO,SAASE,oBAAoB,EAAEC,OAAO,EAAEC,UAAU,EAAEC,kBAAkB,EAA4B;IACvG,MAAM,CAACC,YAAYC,cAAc,GAAGb,SAA4BC;IAChE,MAAM,CAACa,UAAUC,YAAY,GAAGf,SAAS;IAEzC,MAAMgB,kBAAkB,CAACC;QACvB,IAAIA,aAAad,MAAM,KAAKS,WAAWT,MAAM,IAAIc,aAAaf,GAAG,KAAKU,WAAWV,GAAG,IAAIY,UAAU;YAChG;QACF;QACAC,YAAY;QACZF,cAAcI;IAChB;IAEA,MAAMC,gBAA8DnB,YAClE,CAACoB;QACC,uEAAuE;QACvE,iDAAiD;QACjD,mCAAmC;QACnC,MAAMb,MAAMa,EAAEb,GAAG;QAEjB,IAAID,WAAWC,QAAQA,QAAQ,UAAUA,QAAQ,SAASA,QAAQ,cAAcA,QAAQ,UAAU;YAChGO,cAAc,CAACO;gBACb,IAAIC,UAAkBD,cAAclB,GAAG;gBACvC,IAAIoB,aAAqBF,cAAcjB,MAAM;gBAE7C,IAAIG,QAAQ,gBAAgBgB,aAAaZ,aAAa,GAAG;oBACvDS,EAAEI,cAAc;oBAChBD,cAAc;gBAChB,OAAO,IAAIhB,QAAQ,eAAegB,aAAa,GAAG;oBAChDH,EAAEI,cAAc;oBAChBD,cAAc;gBAChB,OAAO,IAAIhB,QAAQ,eAAee,UAAUZ,UAAU,GAAG;oBACvDU,EAAEI,cAAc;oBAChBF,WAAW;gBACb,OAAO,IAAIf,QAAQ,aAAae,UAAU,GAAG;oBAC3CF,EAAEI,cAAc;oBAChBF,WAAW;gBACb,OAAO,IAAIf,QAAQ,QAAQ;oBACzBa,EAAEI,cAAc;oBAChBF,UAAU;oBACVC,aAAa;gBACf,OAAO,IAAIhB,QAAQ,OAAO;oBACxBa,EAAEI,cAAc;oBAChBF,UAAUZ,UAAU;oBACpBa,aAAaZ,aAAa;gBAC5B;gBAEA,MAAMc,qBAAqB;oBAAErB,QAAQmB;oBAAYpB,KAAKmB;gBAAQ;gBAE9D,MAAMI,cAAcd,CAAAA,+BAAAA,yCAAAA,mBAAqBQ,GAAGC,eAAeI,wBAAuBA;gBAElF,IAAIC,YAAYvB,GAAG,KAAKkB,cAAclB,GAAG,IAAIuB,YAAYtB,MAAM,KAAKiB,cAAcjB,MAAM,EAAE;oBACxF,4DAA4D;oBAC5D,WAAW;oBACX,OAAOiB;gBACT;gBAEA,OAAOK;YACT;QACF;IACF,GACA;QAACf;QAAYD;QAASE;KAAmB;IAG3C,OAAO;QACLC;QACAE;QACAY,gBAAgBR;QAChBS,aAAaX;IACf;AACF"}
1
+ {"version":3,"sources":["../../../src/Table/hooks/useTableKeyboardNav.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { KeyboardEventHandler, useCallback, useState } from 'react';\n\nexport interface UseTableKeyboardNavProps {\n maxRows: number;\n maxColumns: number;\n\n /**\n * Function used to modify the active table cell based on the keyboard event,\n * the current position, and the default recommended next position (this value\n * will be `undefined` in cases where there is no default handler like `PageUp`\n * and `PageDown`). This can be used to modify the next position that will be\n * used and/or to handle side effects related to the new position (e.g.\n * pagination, scrolling the active cell into view).\n */\n onActiveCellChange?: (\n e: React.KeyboardEvent<HTMLTableElement>,\n currentActiveCell: TableCellPosition,\n defaultNextActiveCell: TableCellPosition | undefined\n ) => TableCellPosition | undefined;\n}\n\ntype TableCellPosition = {\n row: number;\n column: number;\n};\n\nconst DEFAULT_ACTIVE_CELL: TableCellPosition = {\n row: 0,\n column: 0,\n};\n\nconst ARROW_KEYS = ['ArrowRight', 'ArrowLeft', 'ArrowUp', 'ArrowDown'];\n\nfunction isArrowKey(key: string): boolean {\n return ARROW_KEYS.includes(key);\n}\n\n/**\n * Hook for managing keyboard navigation for table components. It is intended\n * to be wrapped by implementation-specific tables to account for differences\n * like pagination, infinite scroll, and virtualization. See `useVirtualizedKeyboardNav`\n * for an example.\n */\nexport function useTableKeyboardNav({ maxRows, maxColumns, onActiveCellChange }: UseTableKeyboardNavProps): {\n activeCell: TableCellPosition;\n isActive: boolean;\n onTableKeyDown: KeyboardEventHandler<HTMLTableElement>;\n onCellFocus: (cellPosition: TableCellPosition) => void;\n} {\n const [activeCell, setActiveCell] = useState<TableCellPosition>(DEFAULT_ACTIVE_CELL);\n const [isActive, setIsActive] = useState(false);\n\n const handleCellFocus = (cellPosition: TableCellPosition): void => {\n if (cellPosition.column === activeCell.column && cellPosition.row === activeCell.row && isActive) {\n return;\n }\n setIsActive(true);\n setActiveCell(cellPosition);\n };\n\n const handleKeyDown: React.KeyboardEventHandler<HTMLTableElement> = useCallback(\n (e) => {\n // Including some of the basic a11y keyboard interaction patterns from:\n // https://www.w3.org/WAI/ARIA/apg/patterns/grid/\n // TODO: add other keyboard combos.\n const key = e.key;\n\n if (isArrowKey(key) || key === 'Home' || key === 'End' || key === 'PageDown' || key === 'PageUp') {\n setActiveCell((curActiveCell) => {\n let nextRow: number = curActiveCell.row;\n let nextColumn: number = curActiveCell.column;\n\n if (key === 'ArrowRight' && nextColumn < maxColumns - 1) {\n e.preventDefault();\n nextColumn += 1;\n } else if (key === 'ArrowLeft' && nextColumn > 0) {\n e.preventDefault();\n nextColumn -= 1;\n } else if (key === 'ArrowDown' && nextRow < maxRows - 1) {\n e.preventDefault();\n nextRow += 1;\n } else if (key === 'ArrowUp' && nextRow > 0) {\n e.preventDefault();\n nextRow -= 1;\n } else if (key === 'Home') {\n e.preventDefault();\n nextRow = 0;\n nextColumn = 0;\n } else if (key === 'End') {\n e.preventDefault();\n nextRow = maxRows - 1;\n nextColumn = maxColumns - 1;\n }\n\n const defaultNewPosition = { column: nextColumn, row: nextRow };\n\n const newPosition = onActiveCellChange?.(e, curActiveCell, defaultNewPosition) || defaultNewPosition;\n\n if (newPosition.row === curActiveCell.row && newPosition.column === curActiveCell.column) {\n // Return original to avoid creating a new object if nothing\n // changed.\n return curActiveCell;\n }\n\n return newPosition;\n });\n }\n },\n [maxColumns, maxRows, onActiveCellChange]\n );\n\n return {\n activeCell,\n isActive,\n onTableKeyDown: handleKeyDown,\n onCellFocus: handleCellFocus,\n };\n}\n"],"names":["useCallback","useState","DEFAULT_ACTIVE_CELL","row","column","ARROW_KEYS","isArrowKey","key","includes","useTableKeyboardNav","maxRows","maxColumns","onActiveCellChange","activeCell","setActiveCell","isActive","setIsActive","handleCellFocus","cellPosition","handleKeyDown","e","curActiveCell","nextRow","nextColumn","preventDefault","defaultNewPosition","newPosition","onTableKeyDown","onCellFocus"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAA+BA,WAAW,EAAEC,QAAQ,QAAQ,QAAQ;AA0BpE,MAAMC,sBAAyC;IAC7CC,KAAK;IACLC,QAAQ;AACV;AAEA,MAAMC,aAAa;IAAC;IAAc;IAAa;IAAW;CAAY;AAEtE,SAASC,WAAWC,GAAW;IAC7B,OAAOF,WAAWG,QAAQ,CAACD;AAC7B;AAEA;;;;;CAKC,GACD,OAAO,SAASE,oBAAoB,EAAEC,OAAO,EAAEC,UAAU,EAAEC,kBAAkB,EAA4B;IAMvG,MAAM,CAACC,YAAYC,cAAc,GAAGb,SAA4BC;IAChE,MAAM,CAACa,UAAUC,YAAY,GAAGf,SAAS;IAEzC,MAAMgB,kBAAkB,CAACC;QACvB,IAAIA,aAAad,MAAM,KAAKS,WAAWT,MAAM,IAAIc,aAAaf,GAAG,KAAKU,WAAWV,GAAG,IAAIY,UAAU;YAChG;QACF;QACAC,YAAY;QACZF,cAAcI;IAChB;IAEA,MAAMC,gBAA8DnB,YAClE,CAACoB;QACC,uEAAuE;QACvE,iDAAiD;QACjD,mCAAmC;QACnC,MAAMb,MAAMa,EAAEb,GAAG;QAEjB,IAAID,WAAWC,QAAQA,QAAQ,UAAUA,QAAQ,SAASA,QAAQ,cAAcA,QAAQ,UAAU;YAChGO,cAAc,CAACO;gBACb,IAAIC,UAAkBD,cAAclB,GAAG;gBACvC,IAAIoB,aAAqBF,cAAcjB,MAAM;gBAE7C,IAAIG,QAAQ,gBAAgBgB,aAAaZ,aAAa,GAAG;oBACvDS,EAAEI,cAAc;oBAChBD,cAAc;gBAChB,OAAO,IAAIhB,QAAQ,eAAegB,aAAa,GAAG;oBAChDH,EAAEI,cAAc;oBAChBD,cAAc;gBAChB,OAAO,IAAIhB,QAAQ,eAAee,UAAUZ,UAAU,GAAG;oBACvDU,EAAEI,cAAc;oBAChBF,WAAW;gBACb,OAAO,IAAIf,QAAQ,aAAae,UAAU,GAAG;oBAC3CF,EAAEI,cAAc;oBAChBF,WAAW;gBACb,OAAO,IAAIf,QAAQ,QAAQ;oBACzBa,EAAEI,cAAc;oBAChBF,UAAU;oBACVC,aAAa;gBACf,OAAO,IAAIhB,QAAQ,OAAO;oBACxBa,EAAEI,cAAc;oBAChBF,UAAUZ,UAAU;oBACpBa,aAAaZ,aAAa;gBAC5B;gBAEA,MAAMc,qBAAqB;oBAAErB,QAAQmB;oBAAYpB,KAAKmB;gBAAQ;gBAE9D,MAAMI,cAAcd,qBAAqBQ,GAAGC,eAAeI,uBAAuBA;gBAElF,IAAIC,YAAYvB,GAAG,KAAKkB,cAAclB,GAAG,IAAIuB,YAAYtB,MAAM,KAAKiB,cAAcjB,MAAM,EAAE;oBACxF,4DAA4D;oBAC5D,WAAW;oBACX,OAAOiB;gBACT;gBAEA,OAAOK;YACT;QACF;IACF,GACA;QAACf;QAAYD;QAASE;KAAmB;IAG3C,OAAO;QACLC;QACAE;QACAY,gBAAgBR;QAChBS,aAAaX;IACf;AACF"}
@@ -1,29 +1,27 @@
1
- /// <reference types="react" />
2
1
  import { TableVirtuosoHandle } from 'react-virtuoso';
2
+ import { KeyboardEventHandler, MutableRefObject, RefObject } from 'react';
3
3
  import { UseTableKeyboardNavProps } from './useTableKeyboardNav';
4
4
  interface UseVirtualizedTableKeyboardNavProps extends Omit<UseTableKeyboardNavProps, 'onActiveCellChange'> {
5
- visibleRange: React.MutableRefObject<{
5
+ visibleRange: MutableRefObject<{
6
6
  startIndex: number;
7
7
  endIndex: number;
8
8
  }>;
9
- virtualTable: React.RefObject<TableVirtuosoHandle>;
9
+ virtualTable: RefObject<TableVirtuosoHandle>;
10
10
  maxRows: number;
11
11
  maxColumns: number;
12
12
  }
13
+ type TableCellPosition = {
14
+ row: number;
15
+ column: number;
16
+ };
13
17
  /**
14
18
  * Hook for managing keyboard navigation when using a virtualized table.
15
19
  */
16
20
  export declare function useVirtualizedTableKeyboardNav({ visibleRange, virtualTable, maxRows, maxColumns, }: UseVirtualizedTableKeyboardNavProps): {
17
- activeCell: {
18
- row: number;
19
- column: number;
20
- };
21
+ activeCell: TableCellPosition;
21
22
  isActive: boolean;
22
- onTableKeyDown: import("react").KeyboardEventHandler<HTMLTableElement>;
23
- onCellFocus: (cellPosition: {
24
- row: number;
25
- column: number;
26
- }) => void;
23
+ onTableKeyDown: KeyboardEventHandler<HTMLTableElement>;
24
+ onCellFocus: (cellPosition: TableCellPosition) => void;
27
25
  };
28
26
  export {};
29
27
  //# sourceMappingURL=useVirtualizedTableKeyboardNav.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"useVirtualizedTableKeyboardNav.d.ts","sourceRoot":"","sources":["../../../src/Table/hooks/useVirtualizedTableKeyboardNav.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AACrD,OAAO,EAAuB,wBAAwB,EAAE,MAAM,uBAAuB,CAAC;AAEtF,UAAU,mCAAoC,SAAQ,IAAI,CAAC,wBAAwB,EAAE,oBAAoB,CAAC;IACxG,YAAY,EAAE,KAAK,CAAC,gBAAgB,CAAC;QACnC,UAAU,EAAE,MAAM,CAAC;QACnB,QAAQ,EAAE,MAAM,CAAC;KAClB,CAAC,CAAC;IACH,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,mBAAmB,CAAC,CAAC;IACnD,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,wBAAgB,8BAA8B,CAAC,EAC7C,YAAY,EACZ,YAAY,EACZ,OAAO,EACP,UAAU,GACX,EAAE,mCAAmC;;;;;;;;;;;EA4ErC"}
1
+ {"version":3,"file":"useVirtualizedTableKeyboardNav.d.ts","sourceRoot":"","sources":["../../../src/Table/hooks/useVirtualizedTableKeyboardNav.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AACrD,OAAO,EAAE,oBAAoB,EAAE,gBAAgB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC1E,OAAO,EAAuB,wBAAwB,EAAE,MAAM,uBAAuB,CAAC;AAEtF,UAAU,mCAAoC,SAAQ,IAAI,CAAC,wBAAwB,EAAE,oBAAoB,CAAC;IACxG,YAAY,EAAE,gBAAgB,CAAC;QAC7B,UAAU,EAAE,MAAM,CAAC;QACnB,QAAQ,EAAE,MAAM,CAAC;KAClB,CAAC,CAAC;IACH,YAAY,EAAE,SAAS,CAAC,mBAAmB,CAAC,CAAC;IAC7C,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,KAAK,iBAAiB,GAAG;IACvB,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF;;GAEG;AACH,wBAAgB,8BAA8B,CAAC,EAC7C,YAAY,EACZ,YAAY,EACZ,OAAO,EACP,UAAU,GACX,EAAE,mCAAmC,GAAG;IACvC,UAAU,EAAE,iBAAiB,CAAC;IAC9B,QAAQ,EAAE,OAAO,CAAC;IAClB,cAAc,EAAE,oBAAoB,CAAC,gBAAgB,CAAC,CAAC;IACvD,WAAW,EAAE,CAAC,YAAY,EAAE,iBAAiB,KAAK,IAAI,CAAC;CACxD,CA4EA"}
@@ -20,14 +20,12 @@ import { useTableKeyboardNav } from './useTableKeyboardNav';
20
20
  onActiveCellChange: (e, currentPosition, defaultNewPosition)=>{
21
21
  const key = e.key;
22
22
  const defaultValueChanged = defaultNewPosition && (currentPosition.column !== defaultNewPosition.column || currentPosition.row !== defaultNewPosition.row);
23
- var _defaultNewPosition_row;
24
- const nextRow = (_defaultNewPosition_row = defaultNewPosition === null || defaultNewPosition === void 0 ? void 0 : defaultNewPosition.row) !== null && _defaultNewPosition_row !== void 0 ? _defaultNewPosition_row : currentPosition.row;
23
+ const nextRow = defaultNewPosition?.row ?? currentPosition.row;
25
24
  if (key === 'ArrowDown' && defaultValueChanged) {
26
25
  // Use default cell position. Shift the virtual table scroll position
27
26
  // when needed to make the active cell visible.
28
27
  if (nextRow - 1 < visibleRange.current.startIndex || nextRow - 1 > visibleRange.current.endIndex) {
29
- var _virtualTable_current;
30
- (_virtualTable_current = virtualTable.current) === null || _virtualTable_current === void 0 ? void 0 : _virtualTable_current.scrollToIndex({
28
+ virtualTable.current?.scrollToIndex({
31
29
  index: nextRow - 1,
32
30
  align: 'end'
33
31
  });
@@ -36,28 +34,25 @@ import { useTableKeyboardNav } from './useTableKeyboardNav';
36
34
  // Use default cell position. Shift the virtual table scroll position
37
35
  // when needed to make the active cell visible.
38
36
  if (nextRow - 1 < visibleRange.current.startIndex || nextRow - 1 > visibleRange.current.endIndex) {
39
- var _virtualTable_current1;
40
- (_virtualTable_current1 = virtualTable.current) === null || _virtualTable_current1 === void 0 ? void 0 : _virtualTable_current1.scrollToIndex({
37
+ virtualTable.current?.scrollToIndex({
41
38
  index: nextRow - 1,
42
39
  align: 'start'
43
40
  });
44
41
  }
45
42
  } else if (defaultValueChanged && (key === 'Home' || key === 'End')) {
46
- var // Use default cell position. Shift the virtual table scroll position
43
+ // Use default cell position. Shift the virtual table scroll position
47
44
  // when needed to make the active cell visible.
48
- _virtualTable_current2;
49
- (_virtualTable_current2 = virtualTable.current) === null || _virtualTable_current2 === void 0 ? void 0 : _virtualTable_current2.scrollToIndex({
45
+ virtualTable.current?.scrollToIndex({
50
46
  index: Math.max(nextRow - 1, 0),
51
47
  align: 'start'
52
48
  });
53
49
  } else if (key === 'PageDown') {
54
- var _virtualTable_current3;
55
50
  // Full handling of logic for `PageDown` because there is no default.
56
51
  e.preventDefault();
57
52
  let nextRow = currentPosition.row;
58
53
  // Add 1 to account for header
59
54
  nextRow = Math.min(maxRows - 1, visibleRange.current.endIndex + 1);
60
- (_virtualTable_current3 = virtualTable.current) === null || _virtualTable_current3 === void 0 ? void 0 : _virtualTable_current3.scrollToIndex({
55
+ virtualTable.current?.scrollToIndex({
61
56
  index: nextRow - 1,
62
57
  align: 'start'
63
58
  });
@@ -66,12 +61,11 @@ import { useTableKeyboardNav } from './useTableKeyboardNav';
66
61
  column: currentPosition.column
67
62
  };
68
63
  } else if (key === 'PageUp') {
69
- var _virtualTable_current4;
70
64
  // Full handling of logic for `PageUp` because there is no default.
71
65
  let nextRow = currentPosition.row;
72
66
  // Minus 1 to account for header
73
67
  nextRow = Math.max(0, visibleRange.current.startIndex - 1);
74
- (_virtualTable_current4 = virtualTable.current) === null || _virtualTable_current4 === void 0 ? void 0 : _virtualTable_current4.scrollToIndex({
68
+ virtualTable.current?.scrollToIndex({
75
69
  index: nextRow - 1,
76
70
  align: 'end'
77
71
  });
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/Table/hooks/useVirtualizedTableKeyboardNav.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { TableVirtuosoHandle } from 'react-virtuoso';\nimport { useTableKeyboardNav, UseTableKeyboardNavProps } from './useTableKeyboardNav';\n\ninterface UseVirtualizedTableKeyboardNavProps extends Omit<UseTableKeyboardNavProps, 'onActiveCellChange'> {\n visibleRange: React.MutableRefObject<{\n startIndex: number;\n endIndex: number;\n }>;\n virtualTable: React.RefObject<TableVirtuosoHandle>;\n maxRows: number;\n maxColumns: number;\n}\n\n/**\n * Hook for managing keyboard navigation when using a virtualized table.\n */\nexport function useVirtualizedTableKeyboardNav({\n visibleRange,\n virtualTable,\n maxRows,\n maxColumns,\n}: UseVirtualizedTableKeyboardNavProps) {\n const baseKeyboard = useTableKeyboardNav({\n maxRows,\n maxColumns,\n onActiveCellChange: (e, currentPosition, defaultNewPosition) => {\n const key = e.key;\n\n const defaultValueChanged =\n defaultNewPosition &&\n (currentPosition.column !== defaultNewPosition.column || currentPosition.row !== defaultNewPosition.row);\n const nextRow = defaultNewPosition?.row ?? currentPosition.row;\n\n if (key === 'ArrowDown' && defaultValueChanged) {\n // Use default cell position. Shift the virtual table scroll position\n // when needed to make the active cell visible.\n if (nextRow - 1 < visibleRange.current.startIndex || nextRow - 1 > visibleRange.current.endIndex) {\n virtualTable.current?.scrollToIndex({\n index: nextRow - 1,\n align: 'end',\n });\n }\n } else if (key === 'ArrowUp' && defaultValueChanged) {\n // Use default cell position. Shift the virtual table scroll position\n // when needed to make the active cell visible.\n if (nextRow - 1 < visibleRange.current.startIndex || nextRow - 1 > visibleRange.current.endIndex) {\n virtualTable.current?.scrollToIndex({\n index: nextRow - 1,\n align: 'start',\n });\n }\n } else if (defaultValueChanged && (key === 'Home' || key === 'End')) {\n // Use default cell position. Shift the virtual table scroll position\n // when needed to make the active cell visible.\n virtualTable.current?.scrollToIndex({\n index: Math.max(nextRow - 1, 0),\n align: 'start',\n });\n } else if (key === 'PageDown') {\n // Full handling of logic for `PageDown` because there is no default.\n e.preventDefault();\n\n let nextRow = currentPosition.row;\n // Add 1 to account for header\n\n nextRow = Math.min(maxRows - 1, visibleRange.current.endIndex + 1);\n\n virtualTable.current?.scrollToIndex({\n index: nextRow - 1,\n align: 'start',\n });\n\n return {\n row: nextRow,\n column: currentPosition.column,\n };\n } else if (key === 'PageUp') {\n // Full handling of logic for `PageUp` because there is no default.\n let nextRow = currentPosition.row;\n // Minus 1 to account for header\n nextRow = Math.max(0, visibleRange.current.startIndex - 1);\n virtualTable.current?.scrollToIndex({\n index: nextRow - 1,\n align: 'end',\n });\n\n return {\n row: nextRow,\n column: currentPosition.column,\n };\n }\n\n return defaultNewPosition;\n },\n });\n\n return baseKeyboard;\n}\n"],"names":["useTableKeyboardNav","useVirtualizedTableKeyboardNav","visibleRange","virtualTable","maxRows","maxColumns","baseKeyboard","onActiveCellChange","e","currentPosition","defaultNewPosition","key","defaultValueChanged","column","row","nextRow","current","startIndex","endIndex","scrollToIndex","index","align","Math","max","preventDefault","min"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAGjC,SAASA,mBAAmB,QAAkC,wBAAwB;AAYtF;;CAEC,GACD,OAAO,SAASC,+BAA+B,EAC7CC,YAAY,EACZC,YAAY,EACZC,OAAO,EACPC,UAAU,EAC0B;IACpC,MAAMC,eAAeN,oBAAoB;QACvCI;QACAC;QACAE,oBAAoB,CAACC,GAAGC,iBAAiBC;YACvC,MAAMC,MAAMH,EAAEG,GAAG;YAEjB,MAAMC,sBACJF,sBACCD,CAAAA,gBAAgBI,MAAM,KAAKH,mBAAmBG,MAAM,IAAIJ,gBAAgBK,GAAG,KAAKJ,mBAAmBI,GAAG,AAAD;gBACxFJ;YAAhB,MAAMK,UAAUL,CAAAA,0BAAAA,+BAAAA,yCAAAA,mBAAoBI,GAAG,cAAvBJ,qCAAAA,0BAA2BD,gBAAgBK,GAAG;YAE9D,IAAIH,QAAQ,eAAeC,qBAAqB;gBAC9C,qEAAqE;gBACrE,+CAA+C;gBAC/C,IAAIG,UAAU,IAAIb,aAAac,OAAO,CAACC,UAAU,IAAIF,UAAU,IAAIb,aAAac,OAAO,CAACE,QAAQ,EAAE;wBAChGf;qBAAAA,wBAAAA,aAAaa,OAAO,cAApBb,4CAAAA,sBAAsBgB,aAAa,CAAC;wBAClCC,OAAOL,UAAU;wBACjBM,OAAO;oBACT;gBACF;YACF,OAAO,IAAIV,QAAQ,aAAaC,qBAAqB;gBACnD,qEAAqE;gBACrE,+CAA+C;gBAC/C,IAAIG,UAAU,IAAIb,aAAac,OAAO,CAACC,UAAU,IAAIF,UAAU,IAAIb,aAAac,OAAO,CAACE,QAAQ,EAAE;wBAChGf;qBAAAA,yBAAAA,aAAaa,OAAO,cAApBb,6CAAAA,uBAAsBgB,aAAa,CAAC;wBAClCC,OAAOL,UAAU;wBACjBM,OAAO;oBACT;gBACF;YACF,OAAO,IAAIT,uBAAwBD,CAAAA,QAAQ,UAAUA,QAAQ,KAAI,GAAI;oBACnE,qEAAqE;gBACrE,+CAA+C;gBAC/CR;iBAAAA,yBAAAA,aAAaa,OAAO,cAApBb,6CAAAA,uBAAsBgB,aAAa,CAAC;oBAClCC,OAAOE,KAAKC,GAAG,CAACR,UAAU,GAAG;oBAC7BM,OAAO;gBACT;YACF,OAAO,IAAIV,QAAQ,YAAY;oBAS7BR;gBARA,qEAAqE;gBACrEK,EAAEgB,cAAc;gBAEhB,IAAIT,UAAUN,gBAAgBK,GAAG;gBACjC,8BAA8B;gBAE9BC,UAAUO,KAAKG,GAAG,CAACrB,UAAU,GAAGF,aAAac,OAAO,CAACE,QAAQ,GAAG;iBAEhEf,yBAAAA,aAAaa,OAAO,cAApBb,6CAAAA,uBAAsBgB,aAAa,CAAC;oBAClCC,OAAOL,UAAU;oBACjBM,OAAO;gBACT;gBAEA,OAAO;oBACLP,KAAKC;oBACLF,QAAQJ,gBAAgBI,MAAM;gBAChC;YACF,OAAO,IAAIF,QAAQ,UAAU;oBAK3BR;gBAJA,mEAAmE;gBACnE,IAAIY,UAAUN,gBAAgBK,GAAG;gBACjC,gCAAgC;gBAChCC,UAAUO,KAAKC,GAAG,CAAC,GAAGrB,aAAac,OAAO,CAACC,UAAU,GAAG;iBACxDd,yBAAAA,aAAaa,OAAO,cAApBb,6CAAAA,uBAAsBgB,aAAa,CAAC;oBAClCC,OAAOL,UAAU;oBACjBM,OAAO;gBACT;gBAEA,OAAO;oBACLP,KAAKC;oBACLF,QAAQJ,gBAAgBI,MAAM;gBAChC;YACF;YAEA,OAAOH;QACT;IACF;IAEA,OAAOJ;AACT"}
1
+ {"version":3,"sources":["../../../src/Table/hooks/useVirtualizedTableKeyboardNav.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { TableVirtuosoHandle } from 'react-virtuoso';\nimport { KeyboardEventHandler, MutableRefObject, RefObject } from 'react';\nimport { useTableKeyboardNav, UseTableKeyboardNavProps } from './useTableKeyboardNav';\n\ninterface UseVirtualizedTableKeyboardNavProps extends Omit<UseTableKeyboardNavProps, 'onActiveCellChange'> {\n visibleRange: MutableRefObject<{\n startIndex: number;\n endIndex: number;\n }>;\n virtualTable: RefObject<TableVirtuosoHandle>;\n maxRows: number;\n maxColumns: number;\n}\n\ntype TableCellPosition = {\n row: number;\n column: number;\n};\n\n/**\n * Hook for managing keyboard navigation when using a virtualized table.\n */\nexport function useVirtualizedTableKeyboardNav({\n visibleRange,\n virtualTable,\n maxRows,\n maxColumns,\n}: UseVirtualizedTableKeyboardNavProps): {\n activeCell: TableCellPosition;\n isActive: boolean;\n onTableKeyDown: KeyboardEventHandler<HTMLTableElement>;\n onCellFocus: (cellPosition: TableCellPosition) => void;\n} {\n const baseKeyboard = useTableKeyboardNav({\n maxRows,\n maxColumns,\n onActiveCellChange: (e, currentPosition, defaultNewPosition) => {\n const key = e.key;\n\n const defaultValueChanged =\n defaultNewPosition &&\n (currentPosition.column !== defaultNewPosition.column || currentPosition.row !== defaultNewPosition.row);\n const nextRow = defaultNewPosition?.row ?? currentPosition.row;\n\n if (key === 'ArrowDown' && defaultValueChanged) {\n // Use default cell position. Shift the virtual table scroll position\n // when needed to make the active cell visible.\n if (nextRow - 1 < visibleRange.current.startIndex || nextRow - 1 > visibleRange.current.endIndex) {\n virtualTable.current?.scrollToIndex({\n index: nextRow - 1,\n align: 'end',\n });\n }\n } else if (key === 'ArrowUp' && defaultValueChanged) {\n // Use default cell position. Shift the virtual table scroll position\n // when needed to make the active cell visible.\n if (nextRow - 1 < visibleRange.current.startIndex || nextRow - 1 > visibleRange.current.endIndex) {\n virtualTable.current?.scrollToIndex({\n index: nextRow - 1,\n align: 'start',\n });\n }\n } else if (defaultValueChanged && (key === 'Home' || key === 'End')) {\n // Use default cell position. Shift the virtual table scroll position\n // when needed to make the active cell visible.\n virtualTable.current?.scrollToIndex({\n index: Math.max(nextRow - 1, 0),\n align: 'start',\n });\n } else if (key === 'PageDown') {\n // Full handling of logic for `PageDown` because there is no default.\n e.preventDefault();\n\n let nextRow = currentPosition.row;\n // Add 1 to account for header\n\n nextRow = Math.min(maxRows - 1, visibleRange.current.endIndex + 1);\n\n virtualTable.current?.scrollToIndex({\n index: nextRow - 1,\n align: 'start',\n });\n\n return {\n row: nextRow,\n column: currentPosition.column,\n };\n } else if (key === 'PageUp') {\n // Full handling of logic for `PageUp` because there is no default.\n let nextRow = currentPosition.row;\n // Minus 1 to account for header\n nextRow = Math.max(0, visibleRange.current.startIndex - 1);\n virtualTable.current?.scrollToIndex({\n index: nextRow - 1,\n align: 'end',\n });\n\n return {\n row: nextRow,\n column: currentPosition.column,\n };\n }\n\n return defaultNewPosition;\n },\n });\n\n return baseKeyboard;\n}\n"],"names":["useTableKeyboardNav","useVirtualizedTableKeyboardNav","visibleRange","virtualTable","maxRows","maxColumns","baseKeyboard","onActiveCellChange","e","currentPosition","defaultNewPosition","key","defaultValueChanged","column","row","nextRow","current","startIndex","endIndex","scrollToIndex","index","align","Math","max","preventDefault","min"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAIjC,SAASA,mBAAmB,QAAkC,wBAAwB;AAiBtF;;CAEC,GACD,OAAO,SAASC,+BAA+B,EAC7CC,YAAY,EACZC,YAAY,EACZC,OAAO,EACPC,UAAU,EAC0B;IAMpC,MAAMC,eAAeN,oBAAoB;QACvCI;QACAC;QACAE,oBAAoB,CAACC,GAAGC,iBAAiBC;YACvC,MAAMC,MAAMH,EAAEG,GAAG;YAEjB,MAAMC,sBACJF,sBACCD,CAAAA,gBAAgBI,MAAM,KAAKH,mBAAmBG,MAAM,IAAIJ,gBAAgBK,GAAG,KAAKJ,mBAAmBI,GAAG,AAAD;YACxG,MAAMC,UAAUL,oBAAoBI,OAAOL,gBAAgBK,GAAG;YAE9D,IAAIH,QAAQ,eAAeC,qBAAqB;gBAC9C,qEAAqE;gBACrE,+CAA+C;gBAC/C,IAAIG,UAAU,IAAIb,aAAac,OAAO,CAACC,UAAU,IAAIF,UAAU,IAAIb,aAAac,OAAO,CAACE,QAAQ,EAAE;oBAChGf,aAAaa,OAAO,EAAEG,cAAc;wBAClCC,OAAOL,UAAU;wBACjBM,OAAO;oBACT;gBACF;YACF,OAAO,IAAIV,QAAQ,aAAaC,qBAAqB;gBACnD,qEAAqE;gBACrE,+CAA+C;gBAC/C,IAAIG,UAAU,IAAIb,aAAac,OAAO,CAACC,UAAU,IAAIF,UAAU,IAAIb,aAAac,OAAO,CAACE,QAAQ,EAAE;oBAChGf,aAAaa,OAAO,EAAEG,cAAc;wBAClCC,OAAOL,UAAU;wBACjBM,OAAO;oBACT;gBACF;YACF,OAAO,IAAIT,uBAAwBD,CAAAA,QAAQ,UAAUA,QAAQ,KAAI,GAAI;gBACnE,qEAAqE;gBACrE,+CAA+C;gBAC/CR,aAAaa,OAAO,EAAEG,cAAc;oBAClCC,OAAOE,KAAKC,GAAG,CAACR,UAAU,GAAG;oBAC7BM,OAAO;gBACT;YACF,OAAO,IAAIV,QAAQ,YAAY;gBAC7B,qEAAqE;gBACrEH,EAAEgB,cAAc;gBAEhB,IAAIT,UAAUN,gBAAgBK,GAAG;gBACjC,8BAA8B;gBAE9BC,UAAUO,KAAKG,GAAG,CAACrB,UAAU,GAAGF,aAAac,OAAO,CAACE,QAAQ,GAAG;gBAEhEf,aAAaa,OAAO,EAAEG,cAAc;oBAClCC,OAAOL,UAAU;oBACjBM,OAAO;gBACT;gBAEA,OAAO;oBACLP,KAAKC;oBACLF,QAAQJ,gBAAgBI,MAAM;gBAChC;YACF,OAAO,IAAIF,QAAQ,UAAU;gBAC3B,mEAAmE;gBACnE,IAAII,UAAUN,gBAAgBK,GAAG;gBACjC,gCAAgC;gBAChCC,UAAUO,KAAKC,GAAG,CAAC,GAAGrB,aAAac,OAAO,CAACC,UAAU,GAAG;gBACxDd,aAAaa,OAAO,EAAEG,cAAc;oBAClCC,OAAOL,UAAU;oBACjBM,OAAO;gBACT;gBAEA,OAAO;oBACLP,KAAKC;oBACLF,QAAQJ,gBAAgBI,MAAM;gBAChC;YACF;YAEA,OAAOH;QACT;IACF;IAEA,OAAOJ;AACT"}
@@ -1,4 +1,3 @@
1
1
  export * from './Table';
2
- export { getTableCellLayout } from './model/table-model';
3
- export type { TableColumnConfig, TableProps, TableDensity } from './model/table-model';
2
+ export * from './model/table-model';
4
3
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Table/index.ts"],"names":[],"mappings":"AAaA,cAAc,SAAS,CAAC;AACxB,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AACzD,YAAY,EAAE,iBAAiB,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Table/index.ts"],"names":[],"mappings":"AAaA,cAAc,SAAS,CAAC;AACxB,cAAc,qBAAqB,CAAC"}
@@ -11,6 +11,6 @@
11
11
  // See the License for the specific language governing permissions and
12
12
  // limitations under the License.
13
13
  export * from './Table';
14
- export { getTableCellLayout } from './model/table-model';
14
+ export * from './model/table-model';
15
15
 
16
16
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/Table/index.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nexport * from './Table';\nexport { getTableCellLayout } from './model/table-model';\nexport type { TableColumnConfig, TableProps, TableDensity } from './model/table-model';\n"],"names":["getTableCellLayout"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,cAAc,UAAU;AACxB,SAASA,kBAAkB,QAAQ,sBAAsB"}
1
+ {"version":3,"sources":["../../src/Table/index.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nexport * from './Table';\nexport * from './model/table-model';\n"],"names":[],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,cAAc,UAAU;AACxB,cAAc,sBAAsB"}
@@ -1,7 +1,8 @@
1
1
  /// <reference types="react" />
2
2
  import { Theme } from '@mui/material';
3
3
  import { AccessorKeyColumnDef, CellContext, ColumnDef, CoreOptions, RowData, RowSelectionState, SortingState } from '@tanstack/react-table';
4
- export type TableDensity = 'compact' | 'standard';
4
+ export declare const DEFAULT_COLUMN_WIDTH = 150;
5
+ export type TableDensity = 'compact' | 'standard' | 'comfortable';
5
6
  export type SortDirection = 'asc' | 'desc' | undefined;
6
7
  export type TableRowEventOpts = {
7
8
  /**
@@ -33,11 +34,22 @@ export interface TableProps<TableData> {
33
34
  * table rows.
34
35
  */
35
36
  columns: Array<TableColumnConfig<TableData>>;
37
+ /**
38
+ * Custom render cell configurations. Each entry of the object should be an
39
+ * id for cell `${rowIndex}_${columnIndex}`, can apply custom text, text color
40
+ * and background color.
41
+ */
42
+ cellConfigs?: TableCellConfigs;
36
43
  /**
37
44
  * The density of the table layout. This impacts the size and space taken up
38
45
  * by content in the table (e.g. font size, padding).
39
46
  */
40
47
  density?: TableDensity;
48
+ /**
49
+ * When using "auto", the table will try to automatically adjust the width of columns to fit without overflowing.
50
+ * If there is not enough width for each column, the display can unreadable.
51
+ */
52
+ defaultColumnWidth?: 'auto' | number;
41
53
  /**
42
54
  * When `true`, the first column of the table will include checkboxes.
43
55
  */
@@ -109,6 +121,14 @@ type GetTableCellLayoutOpts = {
109
121
  */
110
122
  export declare function getTableCellLayout(theme: Theme, density: TableDensity, { isLastColumn, isFirstColumn }?: GetTableCellLayoutOpts): TableCellLayout;
111
123
  export type TableCellAlignment = 'left' | 'right' | 'center';
124
+ export interface TableCellConfigs {
125
+ [id: string]: TableCellConfig;
126
+ }
127
+ export interface TableCellConfig {
128
+ text?: string;
129
+ textColor?: string;
130
+ backgroundColor?: string;
131
+ }
112
132
  declare module '@tanstack/table-core' {
113
133
  interface ColumnMeta<TData extends RowData, TValue> {
114
134
  align?: TableColumnConfig<TData>['align'];
@@ -156,6 +176,6 @@ export interface TableColumnConfig<TableData> extends Pick<AccessorKeyColumnDef<
156
176
  /**
157
177
  * Takes in a perses table column and transforms it into a tanstack column.
158
178
  */
159
- export declare function persesColumnsToTanstackColumns<TableData>(columns: Array<TableColumnConfig<TableData>>): ColumnDef<TableData, unknown>[];
179
+ export declare function persesColumnsToTanstackColumns<TableData>(columns: Array<TableColumnConfig<TableData>>): Array<ColumnDef<TableData>>;
160
180
  export {};
161
181
  //# sourceMappingURL=table-model.d.ts.map