@svgrid/grid 2.6.21 → 2.7.0

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 (358) hide show
  1. package/CHANGELOG.md +150 -88
  2. package/README.md +221 -199
  3. package/dist/FlexRender.svelte +96 -96
  4. package/dist/GridFooter.svelte +181 -181
  5. package/dist/GridMenus.svelte +201 -18
  6. package/dist/SvAutoComplete.svelte +169 -165
  7. package/dist/SvAvatar.svelte +75 -75
  8. package/dist/SvCalendar.svelte +503 -503
  9. package/dist/SvCarousel.svelte +141 -141
  10. package/dist/SvCheckBox.svelte +102 -102
  11. package/dist/SvCircularProgress.svelte +109 -109
  12. package/dist/SvColorInput.svelte +181 -181
  13. package/dist/SvComboBox.svelte +279 -275
  14. package/dist/SvContextMenu.svelte +116 -116
  15. package/dist/SvCountryInput.svelte +163 -163
  16. package/dist/SvDateRangeInput.svelte +25 -3
  17. package/dist/SvDrawer.svelte +254 -254
  18. package/dist/SvDropDownList.svelte +378 -374
  19. package/dist/SvDurationInput.svelte +126 -126
  20. package/dist/SvField.svelte +293 -293
  21. package/dist/SvForm.svelte +437 -437
  22. package/dist/SvGrid.controller.svelte.d.ts +61 -9
  23. package/dist/SvGrid.controller.svelte.js +363 -123
  24. package/dist/SvGrid.css +222 -1
  25. package/dist/SvGrid.helpers.d.ts +55 -0
  26. package/dist/SvGrid.helpers.js +83 -0
  27. package/dist/SvGrid.svelte +255 -56
  28. package/dist/SvGrid.types.d.ts +146 -1
  29. package/dist/SvGridCellEditor.svelte +744 -662
  30. package/dist/SvGridChart.svelte +1716 -1716
  31. package/dist/SvGridChartPanel.svelte +485 -485
  32. package/dist/SvGridChartView.svelte +70 -70
  33. package/dist/SvGridDropdown.svelte +728 -728
  34. package/dist/SvGridSelect.svelte +270 -266
  35. package/dist/SvGridSelect.svelte.d.ts +1 -1
  36. package/dist/SvGroupCell.svelte +116 -116
  37. package/dist/SvListBox.svelte +334 -326
  38. package/dist/SvMaskedInput.svelte +122 -122
  39. package/dist/SvMenu.svelte +124 -124
  40. package/dist/SvMenuList.svelte +146 -146
  41. package/dist/SvMultiSelect.svelte +293 -289
  42. package/dist/SvMultiSelect.svelte.d.ts +1 -1
  43. package/dist/SvNumberInput.svelte +172 -168
  44. package/dist/SvOtpInput.svelte +158 -158
  45. package/dist/SvPasswordInput.svelte +151 -151
  46. package/dist/SvPhoneInput.svelte +133 -133
  47. package/dist/SvPopover.svelte +197 -197
  48. package/dist/SvProgress.svelte +116 -116
  49. package/dist/SvRadioGroup.svelte +107 -107
  50. package/dist/SvRating.svelte +112 -112
  51. package/dist/SvResult.svelte +73 -73
  52. package/dist/SvRichCell.svelte +125 -0
  53. package/dist/SvRichCell.svelte.d.ts +15 -0
  54. package/dist/SvRichText.svelte +211 -211
  55. package/dist/SvRowGroupPanel.svelte +170 -170
  56. package/dist/SvScrollArea.svelte +61 -61
  57. package/dist/SvSlider.svelte +203 -203
  58. package/dist/SvSwitchButton.svelte +108 -108
  59. package/dist/SvTagsInput.svelte +115 -115
  60. package/dist/SvTextArea.svelte +5 -1
  61. package/dist/SvTextInput.svelte +147 -147
  62. package/dist/SvTimePicker.svelte +245 -245
  63. package/dist/SvToaster.svelte +159 -159
  64. package/dist/SvToggleButton.svelte +85 -85
  65. package/dist/SvTooltip.svelte +161 -161
  66. package/dist/SvTour.svelte +208 -208
  67. package/dist/SvTree.svelte +444 -444
  68. package/dist/SvTreeSelect.svelte +239 -235
  69. package/dist/SvTreeSelect.svelte.d.ts +1 -1
  70. package/dist/builtin-editors.d.ts +2 -2
  71. package/dist/builtin-editors.js +19 -3
  72. package/dist/cdn/GridMenus-C4oLsJyj.js +600 -0
  73. package/dist/cdn/GridMenus-yEivjNwl.js +601 -0
  74. package/dist/cdn/SvDateRangeInput-Bh0A0JkF.js +199 -0
  75. package/dist/cdn/SvDateRangeInput-DflbiP7N.js +198 -0
  76. package/dist/cdn/SvDateTimePicker-BWwpfB_o.js +812 -0
  77. package/dist/cdn/SvDateTimePicker-Bivn8dAP.js +816 -0
  78. package/dist/cdn/SvGridCellEditor-AXL8cHGO.js +550 -0
  79. package/dist/cdn/SvGridCellEditor-Ba7rY3eu.js +549 -0
  80. package/dist/cdn/{SvGridChart-BwVos976.js → SvGridChart-Bs2GIR2Q.js} +1 -1
  81. package/dist/cdn/{SvGridChart-BEJmNNx9.js → SvGridChart-CwhFz7GV.js} +1 -1
  82. package/dist/cdn/{SvGridChartPanel-BOknOkrP.js → SvGridChartPanel-1WXuStzM.js} +1 -1
  83. package/dist/cdn/{SvGridChartPanel-D2PjII4O.js → SvGridChartPanel-e5_nqNP9.js} +1 -1
  84. package/dist/cdn/{SvGridChartView-00LPUHL1.js → SvGridChartView-SmPW10dI.js} +1 -1
  85. package/dist/cdn/{SvGridChartView-BhUEJ5ki.js → SvGridChartView-eSPuJE6g.js} +1 -1
  86. package/dist/cdn/{SvGridDropdown-D0VdjeR8.js → SvGridDropdown-B1ZcLpgs.js} +1 -1
  87. package/dist/cdn/{SvGridDropdown-D13MtJ2j.js → SvGridDropdown-CtdbHcIS.js} +1 -1
  88. package/dist/cdn/column-resize-DsfNXMom.js +102 -0
  89. package/dist/cdn/date-format-CcP1tafP.js +1395 -0
  90. package/dist/cdn/date-format-DZT7T1wf.js +1393 -0
  91. package/dist/cdn/{editor-registry-CiI0xlKg.js → editor-registry-BhgE3S84.js} +51 -25
  92. package/dist/cdn/row-resize-BRcimkUT.js +95 -0
  93. package/dist/cdn/{src-BYq-qyrp.js → src-COC0vnpg.js} +7846 -7317
  94. package/dist/cdn/{src-DBel9wRZ.js → src-pYGV2rMR.js} +10033 -9504
  95. package/dist/cdn/svgrid.js +15 -11
  96. package/dist/cdn/svgrid.svelte-external.js +15 -11
  97. package/dist/cell-values.d.ts +16 -0
  98. package/dist/cell-values.js +28 -0
  99. package/dist/chart-export.js +8 -8
  100. package/dist/clipboard.d.ts +22 -0
  101. package/dist/clipboard.js +405 -27
  102. package/dist/column-groups.js +1 -1
  103. package/dist/column-resize.d.ts +46 -0
  104. package/dist/column-resize.js +205 -0
  105. package/dist/columns.d.ts +0 -3
  106. package/dist/columns.js +0 -57
  107. package/dist/core.d.ts +19 -4
  108. package/dist/core.js +460 -119
  109. package/dist/editing.js +12 -7
  110. package/dist/editors/cell-editors.d.ts +11 -0
  111. package/dist/editors/cell-editors.js +18 -1
  112. package/dist/filtering/excel-filters.js +28 -0
  113. package/dist/grid-messages.d.ts +15 -0
  114. package/dist/grid-messages.js +15 -0
  115. package/dist/group-display.d.ts +1 -1
  116. package/dist/index.d.ts +6 -1
  117. package/dist/index.js +10 -0
  118. package/dist/list-option.d.ts +6 -0
  119. package/dist/menus.js +41 -8
  120. package/dist/row-resize.d.ts +11 -0
  121. package/dist/row-resize.js +7 -1
  122. package/dist/sanitize-html.d.ts +37 -0
  123. package/dist/sanitize-html.js +234 -0
  124. package/dist/selection-bar-view.svelte.d.ts +25 -0
  125. package/dist/selection-bar-view.svelte.js +13 -0
  126. package/dist/selection.d.ts +2 -1
  127. package/dist/selection.js +133 -8
  128. package/dist/spreadsheet.d.ts +1 -1
  129. package/dist/spreadsheet.js +1 -1
  130. package/package.json +11 -11
  131. package/src/FlexRender.svelte +96 -96
  132. package/src/GridFooter.svelte +181 -181
  133. package/src/GridMenus.svelte +201 -18
  134. package/src/SvAutoComplete.svelte +169 -165
  135. package/src/SvAvatar.svelte +75 -75
  136. package/src/SvCalendar.svelte +503 -503
  137. package/src/SvCalendar.test.ts +226 -226
  138. package/src/SvCarousel.svelte +141 -141
  139. package/src/SvCheckBox.svelte +102 -102
  140. package/src/SvCircularProgress.svelte +109 -109
  141. package/src/SvColorInput.svelte +181 -181
  142. package/src/SvComboBox.svelte +279 -275
  143. package/src/SvContextMenu.svelte +116 -116
  144. package/src/SvCountryInput.svelte +163 -163
  145. package/src/SvDateRangeInput.svelte +25 -3
  146. package/src/SvDrawer.svelte +254 -254
  147. package/src/SvDropDownList.svelte +378 -374
  148. package/src/SvDurationInput.svelte +126 -126
  149. package/src/SvField.svelte +293 -293
  150. package/src/SvForm.svelte +437 -437
  151. package/src/SvForm.test.ts +411 -411
  152. package/src/SvGrid.controller.svelte.ts +404 -133
  153. package/src/SvGrid.css +222 -1
  154. package/src/SvGrid.helpers.ts +87 -0
  155. package/src/SvGrid.svelte +255 -56
  156. package/src/SvGrid.types.ts +2092 -1940
  157. package/src/SvGridCellEditor.svelte +744 -662
  158. package/src/SvGridChart.svelte +1716 -1716
  159. package/src/SvGridChartPanel.svelte +485 -485
  160. package/src/SvGridChartView.svelte +70 -70
  161. package/src/SvGridDropdown.svelte +728 -728
  162. package/src/SvGridSelect.svelte +270 -266
  163. package/src/SvGroupCell.svelte +116 -116
  164. package/src/SvListBox.svelte +334 -326
  165. package/src/SvMaskedInput.svelte +122 -122
  166. package/src/SvMenu.svelte +124 -124
  167. package/src/SvMenu.test.ts +97 -97
  168. package/src/SvMenuList.svelte +146 -146
  169. package/src/SvMultiSelect.svelte +293 -289
  170. package/src/SvNumberInput.svelte +172 -168
  171. package/src/SvOtpInput.svelte +158 -158
  172. package/src/SvPasswordInput.svelte +151 -151
  173. package/src/SvPhoneInput.svelte +133 -133
  174. package/src/SvPopover.svelte +197 -197
  175. package/src/SvProgress.svelte +116 -116
  176. package/src/SvRadioGroup.svelte +107 -107
  177. package/src/SvRating.svelte +112 -112
  178. package/src/SvResult.svelte +73 -73
  179. package/src/SvRichCell.svelte +125 -0
  180. package/src/SvRichText.svelte +211 -211
  181. package/src/SvRowGroupPanel.svelte +170 -170
  182. package/src/SvScrollArea.svelte +61 -61
  183. package/src/SvSlider.svelte +203 -203
  184. package/src/SvSwitchButton.svelte +108 -108
  185. package/src/SvTagsInput.svelte +115 -115
  186. package/src/SvTextArea.svelte +5 -1
  187. package/src/SvTextInput.svelte +147 -147
  188. package/src/SvTimePicker.svelte +245 -245
  189. package/src/SvToaster.svelte +159 -159
  190. package/src/SvToaster.test.ts +95 -95
  191. package/src/SvToggleButton.svelte +85 -85
  192. package/src/SvTooltip.svelte +161 -161
  193. package/src/SvTour.svelte +208 -208
  194. package/src/SvTree.svelte +444 -444
  195. package/src/SvTreeSelect.svelte +239 -235
  196. package/src/a11y/dismissable.test.ts +119 -119
  197. package/src/a11y/dismissable.ts +114 -114
  198. package/src/a11y.contract.test.ts +49 -49
  199. package/src/a11y.test.ts +59 -59
  200. package/src/a11y.ts +61 -61
  201. package/src/ai.test.ts +502 -502
  202. package/src/ai.ts +1419 -1419
  203. package/src/build-api.coverage.test.ts +633 -633
  204. package/src/build-api.ts +846 -846
  205. package/src/builtin-editors.grid.test.ts +83 -83
  206. package/src/builtin-editors.test.ts +18 -1
  207. package/src/builtin-editors.ts +19 -3
  208. package/src/cell-formatting.ts +171 -171
  209. package/src/cell-render.test.ts +513 -513
  210. package/src/cell-render.ts +496 -496
  211. package/src/cell-values.ts +148 -118
  212. package/src/chart-export.ts +202 -202
  213. package/src/chart-view.svelte.ts +36 -36
  214. package/src/chart.ts +2321 -2321
  215. package/src/clipboard.test.ts +93 -20
  216. package/src/clipboard.ts +433 -33
  217. package/src/collaboration.test.ts +104 -104
  218. package/src/collaboration.ts +167 -167
  219. package/src/column-groups.ts +78 -78
  220. package/src/column-resize.test.ts +381 -0
  221. package/src/column-resize.ts +227 -0
  222. package/src/columns.test.ts +0 -103
  223. package/src/columns.ts +0 -58
  224. package/src/core.aggregate.test.ts +134 -0
  225. package/src/core.filter.test.ts +156 -0
  226. package/src/core.grouping.test.ts +146 -0
  227. package/src/core.performance.test.ts +30 -30
  228. package/src/core.row-shape.test.ts +119 -0
  229. package/src/core.rowmodel-cache.test.ts +121 -0
  230. package/src/core.sort.test.ts +293 -0
  231. package/src/core.ts +1865 -1468
  232. package/src/createAutocomplete.svelte.ts +132 -132
  233. package/src/createCombobox.svelte.ts +191 -191
  234. package/src/createCountryInput.svelte.ts +157 -157
  235. package/src/createDropdownList.svelte.ts +168 -168
  236. package/src/createForm.svelte.ts +386 -386
  237. package/src/createGrid.svelte.ts +42 -42
  238. package/src/createGrid.test.ts +10 -10
  239. package/src/createGridState.svelte.ts +17 -17
  240. package/src/createListbox.svelte.ts +250 -250
  241. package/src/createMenu.svelte.ts +224 -224
  242. package/src/createPopoverSelect.svelte.ts +213 -213
  243. package/src/createSlider.svelte.ts +191 -191
  244. package/src/createTooltip.svelte.ts +144 -144
  245. package/src/createTree.svelte.ts +322 -322
  246. package/src/date-string-column.test.ts +87 -0
  247. package/src/datetime/date-core.ts +206 -206
  248. package/src/datetime/date-restrict.ts +61 -61
  249. package/src/datetime/timezone.ts +135 -135
  250. package/src/dock-manager-model.ts +596 -596
  251. package/src/dock-model.ts +374 -374
  252. package/src/editing.test.ts +974 -949
  253. package/src/editing.ts +609 -606
  254. package/src/editor-block-prop.test.ts +132 -0
  255. package/src/editor-contract.ts +171 -171
  256. package/src/editor-registry.grid.test.ts +144 -144
  257. package/src/editor-registry.ts +122 -122
  258. package/src/editors/cell-editors.ts +27 -1
  259. package/src/export-data-api.test.ts +126 -126
  260. package/src/export-format.test.ts +107 -107
  261. package/src/export-format.ts +601 -601
  262. package/src/filter-operators.ts +160 -160
  263. package/src/filtering/excel-filters.ts +325 -295
  264. package/src/filtering/normalize-fast-path.test.ts +104 -0
  265. package/src/flex-render.ts +3 -3
  266. package/src/form-field.ts +127 -127
  267. package/src/grid-messages.ts +34 -0
  268. package/src/group-display.test.ts +167 -167
  269. package/src/group-display.ts +200 -200
  270. package/src/headless.ts +87 -87
  271. package/src/index.ts +25 -1
  272. package/src/js-scroller.svelte.ts +173 -173
  273. package/src/keyboard-handlers.ts +270 -270
  274. package/src/keyboard.test.ts +59 -59
  275. package/src/keyboard.ts +97 -97
  276. package/src/list-nav.test.ts +49 -49
  277. package/src/list-nav.ts +29 -29
  278. package/src/list-option.test.ts +56 -56
  279. package/src/list-option.ts +179 -173
  280. package/src/menus.test.ts +43 -0
  281. package/src/menus.ts +597 -567
  282. package/src/merge-objects.ts +48 -48
  283. package/src/move-cells.test.ts +850 -0
  284. package/src/number-editor-literal.test.ts +84 -0
  285. package/src/number-editor.grid.test.ts +160 -0
  286. package/src/overlays.test.ts +90 -90
  287. package/src/positioning.ts +268 -268
  288. package/src/render-component.ts +28 -28
  289. package/src/resize-props.test.ts +361 -0
  290. package/src/row-drag-touch.ts +211 -211
  291. package/src/row-drag.test.ts +353 -353
  292. package/src/row-drag.ts +415 -415
  293. package/src/row-resize.test.ts +524 -493
  294. package/src/row-resize.ts +228 -210
  295. package/src/sanitize-html.test.ts +182 -0
  296. package/src/sanitize-html.ts +235 -0
  297. package/src/scheduler-ical.ts +181 -181
  298. package/src/scheduler-model.test.ts +562 -562
  299. package/src/scheduler-model.ts +873 -873
  300. package/src/selection-bar-view.svelte.ts +36 -0
  301. package/src/selection.test.ts +900 -743
  302. package/src/selection.ts +135 -8
  303. package/src/server-data-source.test.ts +383 -383
  304. package/src/server-data-source.ts +469 -469
  305. package/src/sparkline.test.ts +68 -68
  306. package/src/sparkline.ts +169 -169
  307. package/src/spreadsheet.test.ts +488 -488
  308. package/src/spreadsheet.ts +312 -312
  309. package/src/static-functions.ts +11 -11
  310. package/src/subscribe.ts +38 -38
  311. package/src/summaries.ts +113 -113
  312. package/src/svgrid-wrapper.types.ts +563 -563
  313. package/src/svgrid.async-editor-options.test.ts +273 -273
  314. package/src/svgrid.auto-row-height.test.ts +204 -204
  315. package/src/svgrid.behavior.test.ts +910 -910
  316. package/src/svgrid.charting.test.ts +534 -534
  317. package/src/svgrid.comments-autocomplete.test.ts +127 -127
  318. package/src/svgrid.context-menu.test.ts +147 -147
  319. package/src/svgrid.features.test.ts +157 -157
  320. package/src/svgrid.filter-depth.test.ts +163 -163
  321. package/src/svgrid.filter-menu-listbox.svelte.test.ts +377 -331
  322. package/src/svgrid.filter-menu-scroll.test.ts +112 -112
  323. package/src/svgrid.grand-total.test.ts +188 -188
  324. package/src/svgrid.group-display-mode.test.ts +171 -171
  325. package/src/svgrid.group-footers.test.ts +121 -121
  326. package/src/svgrid.group-pagination.test.ts +153 -153
  327. package/src/svgrid.in-suggest-snapshot.svelte.test.ts +91 -0
  328. package/src/svgrid.menu-scroll-close.test.ts +204 -0
  329. package/src/svgrid.new-features.wrapper.test.ts +251 -251
  330. package/src/svgrid.selection-bar-seam.test.ts +185 -0
  331. package/src/svgrid.tree-data.test.ts +186 -186
  332. package/src/svgrid.upsell-license.test.ts +117 -0
  333. package/src/svgrid.wrapper.test.ts +63 -63
  334. package/src/svgriddropdown.async-panel.svelte.test.ts +195 -195
  335. package/src/test-setup.ts +62 -62
  336. package/src/themes/index.ts +288 -288
  337. package/src/toast-store.svelte.ts +250 -250
  338. package/src/toast-store.test.ts +147 -147
  339. package/src/tree-row-model.test.ts +168 -168
  340. package/src/ui-buttons.test.ts +144 -144
  341. package/src/ui-inputs.test.ts +118 -118
  342. package/src/ui-localization.test.ts +113 -113
  343. package/src/ui-range.test.ts +70 -70
  344. package/src/ui-selection.test.ts +155 -155
  345. package/src/ui-tier1.test.ts +142 -142
  346. package/src/virtual.test.ts +88 -88
  347. package/src/virtualization/column-virtualizer.test.ts +27 -27
  348. package/src/virtualization/column-virtualizer.ts +30 -30
  349. package/src/virtualization/svelte-virtualizer.svelte.ts +26 -26
  350. package/src/virtualization/types.ts +30 -30
  351. package/src/virtualization/virtualizer.test.ts +47 -47
  352. package/src/virtualization/virtualizer.ts +322 -322
  353. package/dist/cdn/GridMenus-BfTAKn84.js +0 -488
  354. package/dist/cdn/GridMenus-C3bJd7w8.js +0 -489
  355. package/dist/cdn/SvDateTimePicker-CHnUkWcH.js +0 -2206
  356. package/dist/cdn/SvDateTimePicker-CRQH_U7E.js +0 -2201
  357. package/dist/cdn/SvGridCellEditor-BGUCzuPB.js +0 -523
  358. package/dist/cdn/SvGridCellEditor-G8IMWIws.js +0 -522
@@ -1,754 +1,911 @@
1
- import { describe, expect, it, vi } from 'vitest'
2
- import { createSelection } from './selection'
3
-
4
- // ---------------------------------------------------------------------------
5
- // Fake controller (`ctx`) helpers. The selection factory reads/writes plain
6
- // state on `ctx` and calls a small set of `ctx.grid.*` methods. We build the
7
- // minimal surface each tested path touches.
8
- // ---------------------------------------------------------------------------
9
-
10
- function makeGroupRow(id: string) {
11
- // isGroupRow() checks `typeof row.getCanExpand === 'function' && row.getCanExpand()`
12
- return { id, getCanExpand: () => true, toggleExpanded: vi.fn(), original: {} }
13
- }
14
- function makeDataRow(id: string, original: any = {}) {
15
- return {
16
- id,
17
- getCanExpand: () => false,
18
- original,
19
- getCellValueByColumnId: (colId: string) => original?.[colId],
20
- }
21
- }
22
- function makeColumn(id: string, columnDef: any = {}) {
23
- return { id, columnDef }
24
- }
25
-
26
- function makeCtx(overrides: any = {}) {
27
- let rowSelection: Record<string, boolean> = overrides.rowSelectionState ?? {}
28
- let activeCell: any = overrides.activeCell ?? null
29
- const setRowSelection = vi.fn((updater: any) => {
30
- rowSelection =
31
- typeof updater === 'function' ? updater(rowSelection) : updater
32
- ctx.rowSelectionState = rowSelection
33
- })
34
- const setActiveCell = vi.fn((cell: any) => {
35
- activeCell = cell
36
- })
37
- const ctx: any = {
38
- rowSelectionState: rowSelection,
39
- allRows: [],
40
- allColumns: [],
41
- headerSelectionState: 'none',
42
- userHasActivatedCell: false,
43
- enableCellSelectionEffective: true,
44
- selectionRange: { anchor: null, focus: null },
45
- isDraggingSelection: false,
46
- fillDrag: null,
47
- activeAtPointerDown: null,
48
- editingEnabled: false,
49
- editingCell: undefined,
50
- scrollContainer: null,
51
- rowVirtualizationEnabled: false,
52
- rowScrollScalingActive: false,
53
- renderedColumnItems: [],
54
- columnVirtualizer: null,
55
- theadEl: null,
56
- headerHeight: 0,
57
- props: {},
58
- gridRootEl: null,
59
- getCellDisplayValue: vi.fn((_r: string, _c: string, base: any) => base),
60
- toggleBooleanCell: vi.fn(),
61
- onCellDoubleClick: vi.fn(),
62
- onFillPointerUp: vi.fn(),
63
- onFillPointerMove: vi.fn(),
64
- grid: {
65
- setRowSelection,
66
- setActiveCell,
67
- getState: () => ({ activeCell }),
68
- },
69
- ...overrides,
70
- }
71
- ctx.rowSelectionState = rowSelection
72
- return ctx
73
- }
74
-
75
- describe('createSelection - row selection', () => {
76
- it('isRowSelected reflects rowSelectionState', () => {
77
- const ctx = makeCtx({ rowSelectionState: { r1: true, r2: false } })
78
- const sel = createSelection(ctx)
79
- expect(sel.isRowSelected('r1')).toBe(true)
80
- expect(sel.isRowSelected('r2')).toBe(false)
81
- expect(sel.isRowSelected('missing')).toBe(false)
82
- })
83
-
84
- it('toggleRowSelectionById flips the single row', () => {
85
- const ctx = makeCtx({ rowSelectionState: { r1: false } })
86
- const sel = createSelection(ctx)
87
- sel.toggleRowSelectionById('r1')
88
- expect(ctx.rowSelectionState.r1).toBe(true)
89
- sel.toggleRowSelectionById('r1')
90
- expect(ctx.rowSelectionState.r1).toBe(false)
91
- })
92
-
93
- it('toggleSelectAllRows selects every non-group row when not all selected', () => {
94
- const ctx = makeCtx({
95
- headerSelectionState: 'none',
96
- allRows: [makeDataRow('r1'), makeGroupRow('g1'), makeDataRow('r2')],
97
- })
98
- const sel = createSelection(ctx)
99
- sel.toggleSelectAllRows()
100
- expect(ctx.rowSelectionState.r1).toBe(true)
101
- expect(ctx.rowSelectionState.r2).toBe(true)
102
- // group row excluded
103
- expect(ctx.rowSelectionState.g1).toBeUndefined()
104
- })
105
-
106
- it('toggleSelectAllRows deselects all when header state is "all"', () => {
107
- const ctx = makeCtx({
108
- headerSelectionState: 'all',
109
- rowSelectionState: { r1: true, r2: true },
110
- allRows: [makeDataRow('r1'), makeDataRow('r2')],
111
- })
112
- const sel = createSelection(ctx)
113
- sel.toggleSelectAllRows()
114
- expect(ctx.rowSelectionState.r1).toBeUndefined()
115
- expect(ctx.rowSelectionState.r2).toBeUndefined()
116
- })
117
- })
118
-
119
- describe('createSelection - setActiveCell', () => {
120
- it('sets active cell and flags userHasActivatedCell', () => {
121
- const ctx = makeCtx({ allColumns: [makeColumn('a'), makeColumn('b')] })
122
- const sel = createSelection(ctx)
123
- sel.setActiveCell(2, 1)
124
- expect(ctx.userHasActivatedCell).toBe(true)
125
- expect(ctx.grid.setActiveCell).toHaveBeenCalledWith(
126
- expect.objectContaining({ rowIndex: 2, colIndex: 1 }),
127
- )
128
- })
129
-
130
- it('fires onActiveCellChange with resolved columnId', () => {
131
- const onActiveCellChange = vi.fn()
132
- const ctx = makeCtx({
133
- allColumns: [makeColumn('a'), makeColumn('b')],
134
- props: { onActiveCellChange },
135
- })
136
- const sel = createSelection(ctx)
137
- sel.setActiveCell(0, 1)
138
- expect(onActiveCellChange).toHaveBeenCalledWith({
139
- rowIndex: 0,
140
- colIndex: 1,
141
- columnId: 'b',
142
- })
143
- })
144
-
145
- it('onActiveCellChange columnId falls back to "" when column missing', () => {
146
- const onActiveCellChange = vi.fn()
147
- const ctx = makeCtx({ allColumns: [], props: { onActiveCellChange } })
148
- const sel = createSelection(ctx)
149
- sel.setActiveCell(0, 5)
150
- expect(onActiveCellChange).toHaveBeenCalledWith(
151
- expect.objectContaining({ columnId: '' }),
152
- )
153
- })
154
- })
155
-
156
- describe('createSelection - range math', () => {
157
- it('setSelection sets anchor and focus to the same point', () => {
158
- const ctx = makeCtx()
159
- const sel = createSelection(ctx)
160
- sel.setSelection(3, 4)
161
- expect(ctx.selectionRange).toEqual({
162
- anchor: { rowIndex: 3, colIndex: 4 },
163
- focus: { rowIndex: 3, colIndex: 4 },
164
- })
165
- })
166
-
167
- it('setSelection is a no-op when cell selection disabled', () => {
168
- const ctx = makeCtx({ enableCellSelectionEffective: false })
169
- const before = ctx.selectionRange
170
- const sel = createSelection(ctx)
171
- sel.setSelection(1, 1)
172
- expect(ctx.selectionRange).toBe(before)
173
- })
174
-
175
- it('extendSelection keeps the existing anchor and moves focus', () => {
176
- const ctx = makeCtx({
177
- selectionRange: { anchor: { rowIndex: 1, colIndex: 1 }, focus: { rowIndex: 1, colIndex: 1 } },
178
- })
179
- const sel = createSelection(ctx)
180
- sel.extendSelection(4, 5)
181
- expect(ctx.selectionRange.anchor).toEqual({ rowIndex: 1, colIndex: 1 })
182
- expect(ctx.selectionRange.focus).toEqual({ rowIndex: 4, colIndex: 5 })
183
- })
184
-
185
- it('extendSelection uses the new point as anchor when none exists', () => {
186
- const ctx = makeCtx({ selectionRange: { anchor: null, focus: null } })
187
- const sel = createSelection(ctx)
188
- sel.extendSelection(2, 3)
189
- expect(ctx.selectionRange.anchor).toEqual({ rowIndex: 2, colIndex: 3 })
190
- expect(ctx.selectionRange.focus).toEqual({ rowIndex: 2, colIndex: 3 })
191
- })
192
-
193
- it('extendSelection is a no-op when cell selection disabled', () => {
194
- const ctx = makeCtx({ enableCellSelectionEffective: false })
195
- const before = ctx.selectionRange
196
- const sel = createSelection(ctx)
197
- sel.extendSelection(1, 1)
198
- expect(ctx.selectionRange).toBe(before)
199
- })
200
-
201
- it('isCellInSelectedRange covers normalized ranges (anchor > focus)', () => {
202
- const ctx = makeCtx({
203
- selectionRange: { anchor: { rowIndex: 4, colIndex: 4 }, focus: { rowIndex: 1, colIndex: 1 } },
204
- })
205
- const sel = createSelection(ctx)
206
- expect(sel.isCellInSelectedRange(2, 3)).toBe(true)
207
- expect(sel.isCellInSelectedRange(1, 1)).toBe(true)
208
- expect(sel.isCellInSelectedRange(4, 4)).toBe(true)
209
- expect(sel.isCellInSelectedRange(0, 0)).toBe(false)
210
- expect(sel.isCellInSelectedRange(5, 5)).toBe(false)
211
- })
212
-
213
- it('isCellInSelectedRange returns false when no range', () => {
214
- const ctx = makeCtx({ selectionRange: { anchor: null, focus: null } })
215
- const sel = createSelection(ctx)
216
- expect(sel.isCellInSelectedRange(0, 0)).toBe(false)
217
- })
218
- })
219
-
220
- describe('createSelection - getCellRangeEdges', () => {
221
- it('returns null outside the range', () => {
222
- const ctx = makeCtx({
223
- selectionRange: { anchor: { rowIndex: 1, colIndex: 1 }, focus: { rowIndex: 3, colIndex: 3 } },
224
- })
225
- const sel = createSelection(ctx)
226
- expect(sel.getCellRangeEdges(0, 0)).toBeNull()
227
- expect(sel.getCellRangeEdges(5, 5)).toBeNull()
228
- })
229
-
230
- it('returns null when range unset', () => {
231
- const ctx = makeCtx()
232
- const sel = createSelection(ctx)
233
- expect(sel.getCellRangeEdges(0, 0)).toBeNull()
234
- })
235
-
236
- it('marks all four edges for a single-cell range', () => {
237
- const ctx = makeCtx({
238
- selectionRange: { anchor: { rowIndex: 2, colIndex: 2 }, focus: { rowIndex: 2, colIndex: 2 } },
239
- })
240
- const sel = createSelection(ctx)
241
- expect(sel.getCellRangeEdges(2, 2)).toEqual({ top: true, bottom: true, left: true, right: true })
242
- })
243
-
244
- it('flags only the corner edges for a corner cell of a wider range', () => {
245
- const ctx = makeCtx({
246
- selectionRange: { anchor: { rowIndex: 1, colIndex: 1 }, focus: { rowIndex: 3, colIndex: 3 } },
247
- })
248
- const sel = createSelection(ctx)
249
- expect(sel.getCellRangeEdges(1, 1)).toEqual({ top: true, bottom: false, left: true, right: false })
250
- expect(sel.getCellRangeEdges(2, 2)).toEqual({ top: false, bottom: false, left: false, right: false })
251
- expect(sel.getCellRangeEdges(3, 3)).toEqual({ top: false, bottom: true, left: false, right: true })
252
- })
253
- })
254
-
255
- describe('createSelection - isInFillPreview', () => {
256
- it('returns false when no fill drag active', () => {
257
- const ctx = makeCtx({ fillDrag: null })
258
- const sel = createSelection(ctx)
259
- expect(sel.isInFillPreview(0, 0)).toBe(false)
260
- })
261
-
262
- it('returns false for cells outside the preview rectangle', () => {
263
- const ctx = makeCtx({
264
- fillDrag: { sourceMinRow: 0, sourceMaxRow: 1, sourceMinCol: 0, sourceMaxCol: 0, targetRow: 3, targetCol: 0 },
265
- })
266
- const sel = createSelection(ctx)
267
- expect(sel.isInFillPreview(5, 0)).toBe(false)
268
- expect(sel.isInFillPreview(0, 5)).toBe(false)
269
- })
270
-
271
- it('returns true for cells in the preview but outside the source', () => {
272
- const ctx = makeCtx({
273
- fillDrag: { sourceMinRow: 0, sourceMaxRow: 1, sourceMinCol: 0, sourceMaxCol: 0, targetRow: 3, targetCol: 0 },
274
- })
275
- const sel = createSelection(ctx)
276
- expect(sel.isInFillPreview(2, 0)).toBe(true) // below source, within preview
277
- expect(sel.isInFillPreview(0, 0)).toBe(false) // inside the source range
278
- })
279
- })
280
-
281
- describe('createSelection - findColumnById', () => {
282
- it('finds a column by id or returns undefined', () => {
283
- const ctx = makeCtx({ allColumns: [makeColumn('a'), makeColumn('b')] })
284
- const sel = createSelection(ctx)
285
- expect(sel.findColumnById('b')?.id).toBe('b')
286
- expect(sel.findColumnById('zzz')).toBeUndefined()
287
- })
288
- })
289
-
290
- describe('createSelection - onCellPointerDown', () => {
291
- function baseCtx(over: any = {}) {
292
- return makeCtx({
293
- allRows: [makeDataRow('r0'), makeDataRow('r1')],
294
- allColumns: [makeColumn('c0', { editorType: 'text' }), makeColumn('c1', { editorType: 'text' })],
295
- ...over,
296
- })
297
- }
298
-
299
- it('ignores non-left button', () => {
300
- const ctx = baseCtx()
301
- const sel = createSelection(ctx)
302
- sel.onCellPointerDown(0, 0, { button: 2 } as any)
303
- expect(ctx.grid.setActiveCell).not.toHaveBeenCalled()
304
- })
305
-
306
- it('ignores group rows', () => {
307
- const ctx = baseCtx({ allRows: [makeGroupRow('g0')] })
308
- const sel = createSelection(ctx)
309
- sel.onCellPointerDown(0, 0, { button: 0, shiftKey: false } as any)
310
- expect(ctx.grid.setActiveCell).not.toHaveBeenCalled()
311
- })
312
-
313
- it('starts a drag on checkbox columns too (by editorType)', () => {
314
- // A range drag must be able to START on a checkbox cell; the plain-click
315
- // toggle still runs via onCellClick (same-cell click).
316
- const ctx = baseCtx({
317
- allColumns: [makeColumn('c0', { editorType: 'checkbox' })],
318
- })
319
- const sel = createSelection(ctx)
320
- sel.onCellPointerDown(0, 0, { button: 0, shiftKey: false } as any)
321
- expect(ctx.grid.setActiveCell).toHaveBeenCalled()
322
- expect(ctx.isDraggingSelection).toBe(true)
323
- })
324
-
325
- it('starts a drag on boolean-valued cells too', () => {
326
- const ctx = baseCtx({
327
- getCellDisplayValue: vi.fn(() => true),
328
- })
329
- const sel = createSelection(ctx)
330
- sel.onCellPointerDown(0, 0, { button: 0, shiftKey: false } as any)
331
- expect(ctx.grid.setActiveCell).toHaveBeenCalled()
332
- expect(ctx.isDraggingSelection).toBe(true)
333
- })
334
-
335
- it('plain click sets active + selection and starts a drag', () => {
336
- const ctx = baseCtx()
337
- const sel = createSelection(ctx)
338
- sel.onCellPointerDown(1, 1, { button: 0, shiftKey: false } as any)
339
- expect(ctx.isDraggingSelection).toBe(true)
340
- expect(ctx.selectionRange.anchor).toEqual({ rowIndex: 1, colIndex: 1 })
341
- expect(ctx.grid.setActiveCell).toHaveBeenCalled()
342
- expect(ctx.activeAtPointerDown).toBeNull()
343
- })
344
-
345
- it('shift click extends the existing range without starting a drag', () => {
346
- const ctx = baseCtx({
347
- selectionRange: { anchor: { rowIndex: 0, colIndex: 0 }, focus: { rowIndex: 0, colIndex: 0 } },
348
- activeCell: { rowIndex: 0, colIndex: 0 },
349
- })
350
- const sel = createSelection(ctx)
351
- sel.onCellPointerDown(1, 1, { button: 0, shiftKey: true } as any)
352
- expect(ctx.isDraggingSelection).toBe(false)
353
- expect(ctx.selectionRange.anchor).toEqual({ rowIndex: 0, colIndex: 0 })
354
- expect(ctx.selectionRange.focus).toEqual({ rowIndex: 1, colIndex: 1 })
355
- expect(ctx.activeAtPointerDown).toEqual({ rowIndex: 0, colIndex: 0 })
356
- })
357
- })
358
-
359
- describe('createSelection - onCellPointerEnter / drag', () => {
360
- it('does nothing when not dragging', () => {
361
- const ctx = makeCtx({ isDraggingSelection: false, allRows: [makeDataRow('r0')] })
362
- const sel = createSelection(ctx)
363
- sel.onCellPointerEnter(0, 0)
364
- expect(ctx.grid.setActiveCell).not.toHaveBeenCalled()
365
- })
366
-
367
- it('extends selection and moves active cell while dragging', () => {
368
- const ctx = makeCtx({
369
- isDraggingSelection: true,
370
- selectionRange: { anchor: { rowIndex: 0, colIndex: 0 }, focus: { rowIndex: 0, colIndex: 0 } },
371
- allRows: [makeDataRow('r0'), makeDataRow('r1')],
372
- allColumns: [makeColumn('c0'), makeColumn('c1')],
373
- })
374
- const sel = createSelection(ctx)
375
- sel.onCellPointerEnter(1, 1)
376
- expect(ctx.selectionRange.focus).toEqual({ rowIndex: 1, colIndex: 1 })
377
- expect(ctx.grid.setActiveCell).toHaveBeenCalled()
378
- })
379
-
380
- it('ignores group rows while dragging', () => {
381
- const ctx = makeCtx({ isDraggingSelection: true, allRows: [makeGroupRow('g0')] })
382
- const sel = createSelection(ctx)
383
- sel.onCellPointerEnter(0, 0)
384
- expect(ctx.grid.setActiveCell).not.toHaveBeenCalled()
385
- })
386
- })
387
-
388
- describe('createSelection - endDragSelection / window move', () => {
389
- it('endDragSelection clears the drag flag', () => {
1
+ import { describe, expect, it, vi } from 'vitest'
2
+ import { createSelection } from './selection'
3
+
4
+ // ---------------------------------------------------------------------------
5
+ // Fake controller (`ctx`) helpers. The selection factory reads/writes plain
6
+ // state on `ctx` and calls a small set of `ctx.grid.*` methods. We build the
7
+ // minimal surface each tested path touches.
8
+ // ---------------------------------------------------------------------------
9
+
10
+ function makeGroupRow(id: string) {
11
+ // isGroupRow() checks `typeof row.getCanExpand === 'function' && row.getCanExpand()`
12
+ return { id, getCanExpand: () => true, toggleExpanded: vi.fn(), original: {} }
13
+ }
14
+ function makeDataRow(id: string, original: any = {}) {
15
+ return {
16
+ id,
17
+ getCanExpand: () => false,
18
+ original,
19
+ getCellValueByColumnId: (colId: string) => original?.[colId],
20
+ }
21
+ }
22
+ function makeColumn(id: string, columnDef: any = {}) {
23
+ return { id, columnDef }
24
+ }
25
+
26
+ function makeCtx(overrides: any = {}) {
27
+ let rowSelection: Record<string, boolean> = overrides.rowSelectionState ?? {}
28
+ let activeCell: any = overrides.activeCell ?? null
29
+ const setRowSelection = vi.fn((updater: any) => {
30
+ rowSelection =
31
+ typeof updater === 'function' ? updater(rowSelection) : updater
32
+ ctx.rowSelectionState = rowSelection
33
+ })
34
+ const setActiveCell = vi.fn((cell: any) => {
35
+ activeCell = cell
36
+ })
37
+ const ctx: any = {
38
+ rowSelectionState: rowSelection,
39
+ allRows: [],
40
+ allColumns: [],
41
+ headerSelectionState: 'none',
42
+ userHasActivatedCell: false,
43
+ enableCellSelectionEffective: true,
44
+ selectionRange: { anchor: null, focus: null },
45
+ isDraggingSelection: false,
46
+ fillDrag: null,
47
+ moveDrag: null,
48
+ moveGrabHover: false,
49
+ moveCellsEffective: false,
50
+ activeAtPointerDown: null,
51
+ editingEnabled: false,
52
+ editingCell: undefined,
53
+ scrollContainer: null,
54
+ rowVirtualizationEnabled: false,
55
+ rowScrollScalingActive: false,
56
+ renderedColumnItems: [],
57
+ columnVirtualizer: null,
58
+ theadEl: null,
59
+ headerHeight: 0,
60
+ props: {},
61
+ gridRootEl: null,
62
+ getCellDisplayValue: vi.fn((_r: string, _c: string, base: any) => base),
63
+ toggleBooleanCell: vi.fn(),
64
+ onCellDoubleClick: vi.fn(),
65
+ onFillPointerUp: vi.fn(),
66
+ onFillPointerMove: vi.fn(),
67
+ // Range drag-and-drop. `startMoveDrag` returning false is the "the pointer
68
+ // was not on the border" answer, which is what every test below assumes -
69
+ // override it to true to exercise the grab path.
70
+ startMoveDrag: vi.fn(() => false),
71
+ onMovePointerUp: vi.fn(),
72
+ onMovePointerMove: vi.fn(),
73
+ isOnMoveGrabStrip: vi.fn(() => false),
74
+ // Edge auto-scroll: one rAF loop in the clipboard module, driven from here
75
+ // for plain drag-select. Its own behaviour is covered in move-cells.test.ts.
76
+ trackEdgeScroll: vi.fn(),
77
+ stopEdgeScroll: vi.fn(),
78
+ grid: {
79
+ setRowSelection,
80
+ setActiveCell,
81
+ getState: () => ({ activeCell }),
82
+ },
83
+ ...overrides,
84
+ }
85
+ ctx.rowSelectionState = rowSelection
86
+ return ctx
87
+ }
88
+
89
+ describe('createSelection - row selection', () => {
90
+ it('isRowSelected reflects rowSelectionState', () => {
91
+ const ctx = makeCtx({ rowSelectionState: { r1: true, r2: false } })
92
+ const sel = createSelection(ctx)
93
+ expect(sel.isRowSelected('r1')).toBe(true)
94
+ expect(sel.isRowSelected('r2')).toBe(false)
95
+ expect(sel.isRowSelected('missing')).toBe(false)
96
+ })
97
+
98
+ it('toggleRowSelectionById flips the single row', () => {
99
+ const ctx = makeCtx({ rowSelectionState: { r1: false } })
100
+ const sel = createSelection(ctx)
101
+ sel.toggleRowSelectionById('r1')
102
+ expect(ctx.rowSelectionState.r1).toBe(true)
103
+ sel.toggleRowSelectionById('r1')
104
+ expect(ctx.rowSelectionState.r1).toBe(false)
105
+ })
106
+
107
+ it('toggleSelectAllRows selects every non-group row when not all selected', () => {
108
+ const ctx = makeCtx({
109
+ headerSelectionState: 'none',
110
+ allRows: [makeDataRow('r1'), makeGroupRow('g1'), makeDataRow('r2')],
111
+ })
112
+ const sel = createSelection(ctx)
113
+ sel.toggleSelectAllRows()
114
+ expect(ctx.rowSelectionState.r1).toBe(true)
115
+ expect(ctx.rowSelectionState.r2).toBe(true)
116
+ // group row excluded
117
+ expect(ctx.rowSelectionState.g1).toBeUndefined()
118
+ })
119
+
120
+ it('toggleSelectAllRows deselects all when header state is "all"', () => {
121
+ const ctx = makeCtx({
122
+ headerSelectionState: 'all',
123
+ rowSelectionState: { r1: true, r2: true },
124
+ allRows: [makeDataRow('r1'), makeDataRow('r2')],
125
+ })
126
+ const sel = createSelection(ctx)
127
+ sel.toggleSelectAllRows()
128
+ expect(ctx.rowSelectionState.r1).toBeUndefined()
129
+ expect(ctx.rowSelectionState.r2).toBeUndefined()
130
+ })
131
+ })
132
+
133
+ describe('createSelection - setActiveCell', () => {
134
+ it('sets active cell and flags userHasActivatedCell', () => {
135
+ const ctx = makeCtx({ allColumns: [makeColumn('a'), makeColumn('b')] })
136
+ const sel = createSelection(ctx)
137
+ sel.setActiveCell(2, 1)
138
+ expect(ctx.userHasActivatedCell).toBe(true)
139
+ expect(ctx.grid.setActiveCell).toHaveBeenCalledWith(
140
+ expect.objectContaining({ rowIndex: 2, colIndex: 1 }),
141
+ )
142
+ })
143
+
144
+ it('fires onActiveCellChange with resolved columnId', () => {
145
+ const onActiveCellChange = vi.fn()
146
+ const ctx = makeCtx({
147
+ allColumns: [makeColumn('a'), makeColumn('b')],
148
+ props: { onActiveCellChange },
149
+ })
150
+ const sel = createSelection(ctx)
151
+ sel.setActiveCell(0, 1)
152
+ expect(onActiveCellChange).toHaveBeenCalledWith({
153
+ rowIndex: 0,
154
+ colIndex: 1,
155
+ columnId: 'b',
156
+ })
157
+ })
158
+
159
+ it('onActiveCellChange columnId falls back to "" when column missing', () => {
160
+ const onActiveCellChange = vi.fn()
161
+ const ctx = makeCtx({ allColumns: [], props: { onActiveCellChange } })
162
+ const sel = createSelection(ctx)
163
+ sel.setActiveCell(0, 5)
164
+ expect(onActiveCellChange).toHaveBeenCalledWith(
165
+ expect.objectContaining({ columnId: '' }),
166
+ )
167
+ })
168
+ })
169
+
170
+ describe('createSelection - range math', () => {
171
+ it('setSelection sets anchor and focus to the same point', () => {
172
+ const ctx = makeCtx()
173
+ const sel = createSelection(ctx)
174
+ sel.setSelection(3, 4)
175
+ expect(ctx.selectionRange).toEqual({
176
+ anchor: { rowIndex: 3, colIndex: 4 },
177
+ focus: { rowIndex: 3, colIndex: 4 },
178
+ })
179
+ })
180
+
181
+ it('setSelection is a no-op when cell selection disabled', () => {
182
+ const ctx = makeCtx({ enableCellSelectionEffective: false })
183
+ const before = ctx.selectionRange
184
+ const sel = createSelection(ctx)
185
+ sel.setSelection(1, 1)
186
+ expect(ctx.selectionRange).toBe(before)
187
+ })
188
+
189
+ it('extendSelection keeps the existing anchor and moves focus', () => {
190
+ const ctx = makeCtx({
191
+ selectionRange: { anchor: { rowIndex: 1, colIndex: 1 }, focus: { rowIndex: 1, colIndex: 1 } },
192
+ })
193
+ const sel = createSelection(ctx)
194
+ sel.extendSelection(4, 5)
195
+ expect(ctx.selectionRange.anchor).toEqual({ rowIndex: 1, colIndex: 1 })
196
+ expect(ctx.selectionRange.focus).toEqual({ rowIndex: 4, colIndex: 5 })
197
+ })
198
+
199
+ it('extendSelection uses the new point as anchor when none exists', () => {
200
+ const ctx = makeCtx({ selectionRange: { anchor: null, focus: null } })
201
+ const sel = createSelection(ctx)
202
+ sel.extendSelection(2, 3)
203
+ expect(ctx.selectionRange.anchor).toEqual({ rowIndex: 2, colIndex: 3 })
204
+ expect(ctx.selectionRange.focus).toEqual({ rowIndex: 2, colIndex: 3 })
205
+ })
206
+
207
+ it('extendSelection is a no-op when cell selection disabled', () => {
208
+ const ctx = makeCtx({ enableCellSelectionEffective: false })
209
+ const before = ctx.selectionRange
210
+ const sel = createSelection(ctx)
211
+ sel.extendSelection(1, 1)
212
+ expect(ctx.selectionRange).toBe(before)
213
+ })
214
+
215
+ it('isCellInSelectedRange covers normalized ranges (anchor > focus)', () => {
216
+ const ctx = makeCtx({
217
+ selectionRange: { anchor: { rowIndex: 4, colIndex: 4 }, focus: { rowIndex: 1, colIndex: 1 } },
218
+ })
219
+ const sel = createSelection(ctx)
220
+ expect(sel.isCellInSelectedRange(2, 3)).toBe(true)
221
+ expect(sel.isCellInSelectedRange(1, 1)).toBe(true)
222
+ expect(sel.isCellInSelectedRange(4, 4)).toBe(true)
223
+ expect(sel.isCellInSelectedRange(0, 0)).toBe(false)
224
+ expect(sel.isCellInSelectedRange(5, 5)).toBe(false)
225
+ })
226
+
227
+ it('isCellInSelectedRange returns false when no range', () => {
228
+ const ctx = makeCtx({ selectionRange: { anchor: null, focus: null } })
229
+ const sel = createSelection(ctx)
230
+ expect(sel.isCellInSelectedRange(0, 0)).toBe(false)
231
+ })
232
+ })
233
+
234
+ describe('createSelection - getCellRangeEdges', () => {
235
+ it('returns null outside the range', () => {
236
+ const ctx = makeCtx({
237
+ selectionRange: { anchor: { rowIndex: 1, colIndex: 1 }, focus: { rowIndex: 3, colIndex: 3 } },
238
+ })
239
+ const sel = createSelection(ctx)
240
+ expect(sel.getCellRangeEdges(0, 0)).toBeNull()
241
+ expect(sel.getCellRangeEdges(5, 5)).toBeNull()
242
+ })
243
+
244
+ it('returns null when range unset', () => {
245
+ const ctx = makeCtx()
246
+ const sel = createSelection(ctx)
247
+ expect(sel.getCellRangeEdges(0, 0)).toBeNull()
248
+ })
249
+
250
+ it('marks all four edges for a single-cell range', () => {
251
+ const ctx = makeCtx({
252
+ selectionRange: { anchor: { rowIndex: 2, colIndex: 2 }, focus: { rowIndex: 2, colIndex: 2 } },
253
+ })
254
+ const sel = createSelection(ctx)
255
+ expect(sel.getCellRangeEdges(2, 2)).toEqual({ top: true, bottom: true, left: true, right: true })
256
+ })
257
+
258
+ it('flags only the corner edges for a corner cell of a wider range', () => {
259
+ const ctx = makeCtx({
260
+ selectionRange: { anchor: { rowIndex: 1, colIndex: 1 }, focus: { rowIndex: 3, colIndex: 3 } },
261
+ })
262
+ const sel = createSelection(ctx)
263
+ expect(sel.getCellRangeEdges(1, 1)).toEqual({ top: true, bottom: false, left: true, right: false })
264
+ expect(sel.getCellRangeEdges(2, 2)).toEqual({ top: false, bottom: false, left: false, right: false })
265
+ expect(sel.getCellRangeEdges(3, 3)).toEqual({ top: false, bottom: true, left: false, right: true })
266
+ })
267
+ })
268
+
269
+ describe('createSelection - isInFillPreview', () => {
270
+ it('returns false when no fill drag active', () => {
271
+ const ctx = makeCtx({ fillDrag: null })
272
+ const sel = createSelection(ctx)
273
+ expect(sel.isInFillPreview(0, 0)).toBe(false)
274
+ })
275
+
276
+ it('returns false for cells outside the preview rectangle', () => {
277
+ const ctx = makeCtx({
278
+ fillDrag: { sourceMinRow: 0, sourceMaxRow: 1, sourceMinCol: 0, sourceMaxCol: 0, targetRow: 3, targetCol: 0 },
279
+ })
280
+ const sel = createSelection(ctx)
281
+ expect(sel.isInFillPreview(5, 0)).toBe(false)
282
+ expect(sel.isInFillPreview(0, 5)).toBe(false)
283
+ })
284
+
285
+ it('returns true for cells in the preview but outside the source', () => {
286
+ const ctx = makeCtx({
287
+ fillDrag: { sourceMinRow: 0, sourceMaxRow: 1, sourceMinCol: 0, sourceMaxCol: 0, targetRow: 3, targetCol: 0 },
288
+ })
289
+ const sel = createSelection(ctx)
290
+ expect(sel.isInFillPreview(2, 0)).toBe(true) // below source, within preview
291
+ expect(sel.isInFillPreview(0, 0)).toBe(false) // inside the source range
292
+ })
293
+ })
294
+
295
+ describe('createSelection - findColumnById', () => {
296
+ it('finds a column by id or returns undefined', () => {
297
+ const ctx = makeCtx({ allColumns: [makeColumn('a'), makeColumn('b')] })
298
+ const sel = createSelection(ctx)
299
+ expect(sel.findColumnById('b')?.id).toBe('b')
300
+ expect(sel.findColumnById('zzz')).toBeUndefined()
301
+ })
302
+ })
303
+
304
+ describe('createSelection - onCellPointerDown', () => {
305
+ function baseCtx(over: any = {}) {
306
+ return makeCtx({
307
+ allRows: [makeDataRow('r0'), makeDataRow('r1')],
308
+ allColumns: [makeColumn('c0', { editorType: 'text' }), makeColumn('c1', { editorType: 'text' })],
309
+ ...over,
310
+ })
311
+ }
312
+
313
+ it('ignores non-left button', () => {
314
+ const ctx = baseCtx()
315
+ const sel = createSelection(ctx)
316
+ sel.onCellPointerDown(0, 0, { button: 2 } as any)
317
+ expect(ctx.grid.setActiveCell).not.toHaveBeenCalled()
318
+ })
319
+
320
+ it('ignores group rows', () => {
321
+ const ctx = baseCtx({ allRows: [makeGroupRow('g0')] })
322
+ const sel = createSelection(ctx)
323
+ sel.onCellPointerDown(0, 0, { button: 0, shiftKey: false } as any)
324
+ expect(ctx.grid.setActiveCell).not.toHaveBeenCalled()
325
+ })
326
+
327
+ it('starts a drag on checkbox columns too (by editorType)', () => {
328
+ // A range drag must be able to START on a checkbox cell; the plain-click
329
+ // toggle still runs via onCellClick (same-cell click).
330
+ const ctx = baseCtx({
331
+ allColumns: [makeColumn('c0', { editorType: 'checkbox' })],
332
+ })
333
+ const sel = createSelection(ctx)
334
+ sel.onCellPointerDown(0, 0, { button: 0, shiftKey: false } as any)
335
+ expect(ctx.grid.setActiveCell).toHaveBeenCalled()
336
+ expect(ctx.isDraggingSelection).toBe(true)
337
+ })
338
+
339
+ it('starts a drag on boolean-valued cells too', () => {
340
+ const ctx = baseCtx({
341
+ getCellDisplayValue: vi.fn(() => true),
342
+ })
343
+ const sel = createSelection(ctx)
344
+ sel.onCellPointerDown(0, 0, { button: 0, shiftKey: false } as any)
345
+ expect(ctx.grid.setActiveCell).toHaveBeenCalled()
346
+ expect(ctx.isDraggingSelection).toBe(true)
347
+ })
348
+
349
+ it('plain click sets active + selection and starts a drag', () => {
350
+ const ctx = baseCtx()
351
+ const sel = createSelection(ctx)
352
+ sel.onCellPointerDown(1, 1, { button: 0, shiftKey: false } as any)
353
+ expect(ctx.isDraggingSelection).toBe(true)
354
+ expect(ctx.selectionRange.anchor).toEqual({ rowIndex: 1, colIndex: 1 })
355
+ expect(ctx.grid.setActiveCell).toHaveBeenCalled()
356
+ expect(ctx.activeAtPointerDown).toBeNull()
357
+ })
358
+
359
+ it('shift click extends the existing range without starting a drag', () => {
360
+ const ctx = baseCtx({
361
+ selectionRange: { anchor: { rowIndex: 0, colIndex: 0 }, focus: { rowIndex: 0, colIndex: 0 } },
362
+ activeCell: { rowIndex: 0, colIndex: 0 },
363
+ })
364
+ const sel = createSelection(ctx)
365
+ sel.onCellPointerDown(1, 1, { button: 0, shiftKey: true } as any)
366
+ expect(ctx.isDraggingSelection).toBe(false)
367
+ expect(ctx.selectionRange.anchor).toEqual({ rowIndex: 0, colIndex: 0 })
368
+ expect(ctx.selectionRange.focus).toEqual({ rowIndex: 1, colIndex: 1 })
369
+ expect(ctx.activeAtPointerDown).toEqual({ rowIndex: 0, colIndex: 0 })
370
+ })
371
+ })
372
+
373
+ describe('createSelection - onCellPointerEnter / drag', () => {
374
+ it('does nothing when not dragging', () => {
375
+ const ctx = makeCtx({ isDraggingSelection: false, allRows: [makeDataRow('r0')] })
376
+ const sel = createSelection(ctx)
377
+ sel.onCellPointerEnter(0, 0)
378
+ expect(ctx.grid.setActiveCell).not.toHaveBeenCalled()
379
+ })
380
+
381
+ it('extends selection and moves active cell while dragging', () => {
382
+ const ctx = makeCtx({
383
+ isDraggingSelection: true,
384
+ selectionRange: { anchor: { rowIndex: 0, colIndex: 0 }, focus: { rowIndex: 0, colIndex: 0 } },
385
+ allRows: [makeDataRow('r0'), makeDataRow('r1')],
386
+ allColumns: [makeColumn('c0'), makeColumn('c1')],
387
+ })
388
+ const sel = createSelection(ctx)
389
+ sel.onCellPointerEnter(1, 1)
390
+ expect(ctx.selectionRange.focus).toEqual({ rowIndex: 1, colIndex: 1 })
391
+ expect(ctx.grid.setActiveCell).toHaveBeenCalled()
392
+ })
393
+
394
+ it('ignores group rows while dragging', () => {
395
+ const ctx = makeCtx({ isDraggingSelection: true, allRows: [makeGroupRow('g0')] })
396
+ const sel = createSelection(ctx)
397
+ sel.onCellPointerEnter(0, 0)
398
+ expect(ctx.grid.setActiveCell).not.toHaveBeenCalled()
399
+ })
400
+ })
401
+
402
+ describe('createSelection - endDragSelection / window move', () => {
403
+ it('endDragSelection clears the drag flag', () => {
404
+ const ctx = makeCtx({ isDraggingSelection: true })
405
+ const sel = createSelection(ctx)
406
+ sel.endDragSelection()
407
+ expect(ctx.isDraggingSelection).toBe(false)
408
+ })
409
+
410
+ it('endDragSelection commits a pending fill drag', () => {
411
+ const ctx = makeCtx({ isDraggingSelection: true, fillDrag: { x: 1 } })
412
+ const sel = createSelection(ctx)
413
+ sel.endDragSelection()
414
+ expect(ctx.onFillPointerUp).toHaveBeenCalled()
415
+ })
416
+
417
+ it('onWindowPointerMove delegates to fill move when fill active', () => {
418
+ const ctx = makeCtx({ fillDrag: { x: 1 } })
419
+ const sel = createSelection(ctx)
420
+ const ev = { buttons: 1 } as any
421
+ sel.onWindowPointerMove(ev)
422
+ expect(ctx.onFillPointerMove).toHaveBeenCalledWith(ev)
423
+ })
424
+
425
+ it('onWindowPointerMove ignores when not dragging and no fill', () => {
426
+ const ctx = makeCtx({ fillDrag: null, isDraggingSelection: false })
427
+ const sel = createSelection(ctx)
428
+ sel.onWindowPointerMove({ buttons: 0 } as any)
429
+ expect(ctx.onFillPointerUp).not.toHaveBeenCalled()
430
+ })
431
+
432
+ it('onWindowPointerMove ends the drag when no buttons held', () => {
433
+ const ctx = makeCtx({ fillDrag: null, isDraggingSelection: true })
434
+ const sel = createSelection(ctx)
435
+ sel.onWindowPointerMove({ buttons: 0 } as any)
436
+ expect(ctx.isDraggingSelection).toBe(false)
437
+ })
438
+
439
+ it('onWindowPointerMove keeps the drag while a button is held', () => {
440
+ const ctx = makeCtx({ fillDrag: null, isDraggingSelection: true })
441
+ const sel = createSelection(ctx)
442
+ sel.onWindowPointerMove({ buttons: 1 } as any)
443
+ expect(ctx.isDraggingSelection).toBe(true)
444
+ })
445
+
446
+ it('endDragSelection cancels the edge-scroll loop', () => {
447
+ // The loop exits on its own once no drag is live, but cancelling the
448
+ // pending frame here stops one more from firing after the gesture ended.
390
449
  const ctx = makeCtx({ isDraggingSelection: true })
391
450
  const sel = createSelection(ctx)
392
451
  sel.endDragSelection()
393
- expect(ctx.isDraggingSelection).toBe(false)
394
- })
395
-
396
- it('endDragSelection commits a pending fill drag', () => {
397
- const ctx = makeCtx({ isDraggingSelection: true, fillDrag: { x: 1 } })
398
- const sel = createSelection(ctx)
399
- sel.endDragSelection()
400
- expect(ctx.onFillPointerUp).toHaveBeenCalled()
452
+ expect(ctx.stopEdgeScroll).toHaveBeenCalled()
401
453
  })
402
454
 
403
- it('onWindowPointerMove delegates to fill move when fill active', () => {
404
- const ctx = makeCtx({ fillDrag: { x: 1 } })
455
+ it('feeds the edge-scroll loop while drag-selecting', () => {
456
+ // Drag-select had the same ceiling as the other two drags: a range could
457
+ // only ever cover cells that were on screen when it started.
458
+ const ctx = makeCtx({ isDraggingSelection: true })
405
459
  const sel = createSelection(ctx)
406
- const ev = { buttons: 1 } as any
460
+ const ev = { buttons: 1, clientX: 10, clientY: 10 } as any
407
461
  sel.onWindowPointerMove(ev)
408
- expect(ctx.onFillPointerMove).toHaveBeenCalledWith(ev)
409
- })
410
-
411
- it('onWindowPointerMove ignores when not dragging and no fill', () => {
412
- const ctx = makeCtx({ fillDrag: null, isDraggingSelection: false })
413
- const sel = createSelection(ctx)
414
- sel.onWindowPointerMove({ buttons: 0 } as any)
415
- expect(ctx.onFillPointerUp).not.toHaveBeenCalled()
462
+ expect(ctx.trackEdgeScroll).toHaveBeenCalledWith(ev)
416
463
  })
417
464
 
418
- it('onWindowPointerMove ends the drag when no buttons held', () => {
419
- const ctx = makeCtx({ fillDrag: null, isDraggingSelection: true })
465
+ it('does not feed the loop once the button is released', () => {
466
+ const ctx = makeCtx({ isDraggingSelection: true })
420
467
  const sel = createSelection(ctx)
421
468
  sel.onWindowPointerMove({ buttons: 0 } as any)
422
- expect(ctx.isDraggingSelection).toBe(false)
423
- })
424
-
425
- it('onWindowPointerMove keeps the drag while a button is held', () => {
426
- const ctx = makeCtx({ fillDrag: null, isDraggingSelection: true })
427
- const sel = createSelection(ctx)
428
- sel.onWindowPointerMove({ buttons: 1 } as any)
429
- expect(ctx.isDraggingSelection).toBe(true)
430
- })
431
- })
432
-
433
- describe('createSelection - onCellClick', () => {
434
- function clickCtx(over: any = {}) {
435
- return makeCtx({
436
- allRows: [makeDataRow('r0', { id: 0 }), makeDataRow('r1', { id: 1 })],
437
- allColumns: [makeColumn('c0', { editorType: 'text' }), makeColumn('c1', { editorType: 'text' })],
438
- gridRootEl: { focus: vi.fn() },
439
- ...over,
440
- })
441
- }
442
-
443
- it('returns early when row or column missing', () => {
444
- const ctx = clickCtx({ allRows: [] })
445
- const sel = createSelection(ctx)
446
- sel.onCellClick(0, 0)
447
- expect(ctx.gridRootEl.focus).not.toHaveBeenCalled()
448
- })
449
-
450
- it('toggles expansion for a group row', () => {
451
- const group = makeGroupRow('g0')
452
- const ctx = clickCtx({ allRows: [group] })
453
- const sel = createSelection(ctx)
454
- sel.onCellClick(0, 0)
455
- expect(group.toggleExpanded).toHaveBeenCalled()
456
- expect(ctx.grid.setActiveCell).toHaveBeenCalled()
457
- })
458
-
459
- it('emits onCellClick and onRowClick for data cells', () => {
460
- const onCellClick = vi.fn()
461
- const onRowClick = vi.fn()
462
- const ctx = clickCtx({ props: { onCellClick, onRowClick } })
463
- const sel = createSelection(ctx)
464
- sel.onCellClick(1, 0)
465
- expect(onCellClick).toHaveBeenCalledWith(
466
- expect.objectContaining({ rowIndex: 1, colIndex: 0, columnId: 'c0' }),
467
- )
468
- expect(onRowClick).toHaveBeenCalledWith(
469
- expect.objectContaining({ rowIndex: 1, columnId: 'c0' }),
470
- )
471
- })
472
-
473
- it('toggles a checkbox cell and clears editing', () => {
474
- const ctx = clickCtx({
475
- allColumns: [makeColumn('c0', { editorType: 'checkbox' })],
476
- editingCell: { rowIndex: 0, colIndex: 0 },
477
- })
478
- const sel = createSelection(ctx)
479
- sel.onCellClick(0, 0)
480
- expect(ctx.toggleBooleanCell).toHaveBeenCalledWith(0, 0)
481
- expect(ctx.editingCell).toBeNull()
482
- expect(ctx.selectionRange.anchor).toEqual({ rowIndex: 0, colIndex: 0 })
483
- })
484
-
485
- it('enters edit mode when clicking the previously-active editable cell', () => {
486
- const ctx = clickCtx({
487
- editingEnabled: true,
488
- activeAtPointerDown: { rowIndex: 0, colIndex: 0 },
489
- })
490
- const sel = createSelection(ctx)
491
- sel.onCellClick(0, 0)
492
- expect(ctx.onCellDoubleClick).toHaveBeenCalledWith(0, 0)
493
- })
494
-
495
- it('clears editing when not re-clicking the active cell', () => {
496
- const ctx = clickCtx({
497
- editingEnabled: true,
498
- activeAtPointerDown: { rowIndex: 1, colIndex: 1 },
499
- editingCell: { rowIndex: 0, colIndex: 0 },
500
- })
501
- const sel = createSelection(ctx)
502
- sel.onCellClick(0, 0)
503
- expect(ctx.onCellDoubleClick).not.toHaveBeenCalled()
504
- expect(ctx.editingCell).toBeNull()
505
- })
506
- })
507
-
508
- describe('createSelection - emitCellDoubleClick', () => {
509
- it('emits the public double-click events and runs edit entry', () => {
510
- const onCellDoubleClick = vi.fn()
511
- const onRowDoubleClick = vi.fn()
512
- const ctx = makeCtx({
513
- allRows: [makeDataRow('r0', { id: 0 })],
514
- allColumns: [makeColumn('c0', { editorType: 'text' })],
515
- props: { onCellDoubleClick, onRowDoubleClick },
516
- })
517
- const sel = createSelection(ctx)
518
- sel.emitCellDoubleClick(0, 0)
519
- expect(onCellDoubleClick).toHaveBeenCalledWith(
520
- expect.objectContaining({ rowIndex: 0, colIndex: 0, columnId: 'c0' }),
521
- )
522
- expect(onRowDoubleClick).toHaveBeenCalled()
523
- expect(ctx.onCellDoubleClick).toHaveBeenCalledWith(0, 0)
524
- })
525
-
526
- it('skips the public events for group rows but still runs edit entry', () => {
527
- const onCellDoubleClick = vi.fn()
528
- const ctx = makeCtx({
529
- allRows: [makeGroupRow('g0')],
530
- allColumns: [makeColumn('c0')],
531
- props: { onCellDoubleClick },
532
- })
533
- const sel = createSelection(ctx)
534
- sel.emitCellDoubleClick(0, 0)
535
- expect(onCellDoubleClick).not.toHaveBeenCalled()
536
- expect(ctx.onCellDoubleClick).toHaveBeenCalledWith(0, 0)
537
- })
538
- })
539
-
540
- describe('createSelection - scrollActiveCellIntoView', () => {
541
- it('returns early without a scroll container', () => {
542
- const ctx = makeCtx({ scrollContainer: null })
543
- const sel = createSelection(ctx)
544
- expect(() => sel.scrollActiveCellIntoView(0, 0)).not.toThrow()
545
- })
546
-
547
- it('returns early for out-of-bounds indices', () => {
548
- const container = document.createElement('div')
549
- const ctx = makeCtx({
550
- scrollContainer: container,
551
- allRows: [makeDataRow('r0')],
552
- allColumns: [makeColumn('c0')],
553
- })
554
- const sel = createSelection(ctx)
555
- // rowIndex out of range -> early return, no throw
556
- expect(() => sel.scrollActiveCellIntoView(5, 0)).not.toThrow()
557
- expect(() => sel.scrollActiveCellIntoView(0, 5)).not.toThrow()
558
- })
559
-
560
- it('adjusts scrollLeft in non-virtualized mode using column virtualizer offsets', () => {
561
- const container = document.createElement('div')
562
- Object.defineProperty(container, 'clientWidth', { value: 100, configurable: true })
563
- Object.defineProperty(container, 'clientHeight', { value: 100, configurable: true })
564
- container.scrollLeft = 500
565
- const ctx = makeCtx({
566
- scrollContainer: container,
567
- rowVirtualizationEnabled: false,
568
- allRows: [makeDataRow('r0'), makeDataRow('r1')],
569
- allColumns: [makeColumn('c0'), makeColumn('c1'), makeColumn('c2')],
570
- renderedColumnItems: [],
571
- columnVirtualizer: {
572
- getOffsetForIndex: (i: number) => i * 140,
573
- getSizeForIndex: () => 140,
574
- },
575
- theadEl: { offsetHeight: 0 },
576
- })
577
- const sel = createSelection(ctx)
578
- // target column 0 is left of the current scrollLeft -> scroll left to it
579
- sel.scrollActiveCellIntoView(0, 0)
580
- expect(container.scrollLeft).toBe(0)
581
- })
582
-
583
- it('virtualized: uses native scrollIntoView when the row is mounted', () => {
584
- const container = document.createElement('div')
585
- Object.defineProperty(container, 'clientWidth', { value: 100, configurable: true })
586
- Object.defineProperty(container, 'clientHeight', { value: 100, configurable: true })
587
- const tr = document.createElement('tr')
588
- tr.className = 'sv-grid-row'
589
- const cell = document.createElement('td')
590
- cell.setAttribute('data-svgrid-row', '0')
591
- tr.appendChild(cell)
592
- container.appendChild(tr)
593
- const scrollIntoView = vi.fn()
594
- tr.scrollIntoView = scrollIntoView
595
- const ctx = makeCtx({
596
- scrollContainer: container,
597
- rowVirtualizationEnabled: true,
598
- allRows: [makeDataRow('r0')],
599
- allColumns: [makeColumn('c0')],
600
- renderedColumnItems: [{ index: 0, start: 0, size: 140 }],
601
- })
602
- const sel = createSelection(ctx)
603
- sel.scrollActiveCellIntoView(0, 0)
604
- expect(scrollIntoView).toHaveBeenCalledWith(
605
- expect.objectContaining({ block: 'nearest' }),
606
- )
607
- })
608
-
609
- it('virtualized + scroll scaling: maps the logical offset into DOM space', () => {
610
- const container = document.createElement('div')
611
- Object.defineProperty(container, 'clientHeight', { value: 100, configurable: true })
612
- container.scrollTop = 0
613
- const ctx = makeCtx({
614
- scrollContainer: container,
615
- rowVirtualizationEnabled: true,
616
- rowScrollScalingActive: true,
617
- allRows: [makeDataRow('r0')],
618
- allColumns: [makeColumn('c0')],
619
- theadEl: { offsetHeight: 10 },
620
- virtualizer: { getOffsetForIndex: () => 1000, getSizeForIndex: () => 20 },
621
- logicalToDomRowOffset: (n: number) => n / 2, // 1000 -> 500
622
- columnVirtualizer: { getOffsetForIndex: () => 0, getSizeForIndex: () => 140 },
623
- })
624
- const sel = createSelection(ctx)
625
- sel.scrollActiveCellIntoView(0, 0)
626
- // nextTop = max(500 - 10, 0) = 490
627
- expect(container.scrollTop).toBe(490)
628
- })
629
-
630
- it('virtualized: computes scrollTop manually when the row is offscreen', () => {
631
- const container = document.createElement('div')
632
- Object.defineProperty(container, 'clientHeight', { value: 100, configurable: true })
633
- container.scrollTop = 0
634
- const ctx = makeCtx({
635
- scrollContainer: container,
636
- rowVirtualizationEnabled: true,
637
- rowScrollScalingActive: false,
638
- allRows: [makeDataRow('r0')],
639
- allColumns: [makeColumn('c0')],
640
- theadEl: { offsetHeight: 10 },
641
- virtualizer: { getOffsetForIndex: () => 500, getSizeForIndex: () => 30 },
642
- columnVirtualizer: { getOffsetForIndex: () => 0, getSizeForIndex: () => 140 },
643
- })
644
- const sel = createSelection(ctx)
645
- sel.scrollActiveCellIntoView(0, 0)
646
- // rowBottom = 10 + 500 + 30 = 540 > 0 + 100 -> nextTop = 540 - 100 = 440
647
- expect(container.scrollTop).toBe(440)
648
- })
649
-
650
- it('non-virtualized: scrolls up when the cell overlaps the sticky header', () => {
651
- const container = document.createElement('div')
652
- Object.defineProperty(container, 'clientHeight', { value: 200, configurable: true })
653
- Object.defineProperty(container, 'clientWidth', { value: 500, configurable: true })
654
- container.scrollTop = 100
655
- container.scrollLeft = 0
656
- container.getBoundingClientRect = () =>
657
- ({ top: 0, left: 0, bottom: 200, right: 500 } as DOMRect)
658
- const td = document.createElement('td')
659
- td.setAttribute('data-svgrid-row', '0')
660
- td.setAttribute('data-svgrid-col', '0')
661
- td.getBoundingClientRect = () =>
662
- ({ top: 5, bottom: 35, left: 0, right: 140 } as DOMRect)
663
- container.appendChild(td)
664
- const ctx = makeCtx({
665
- scrollContainer: container,
666
- rowVirtualizationEnabled: false,
667
- allRows: [makeDataRow('r0')],
668
- allColumns: [makeColumn('c0')],
669
- headerHeight: 30,
670
- theadEl: { offsetHeight: 30 },
671
- renderedColumnItems: [{ index: 0, start: 0, size: 140 }],
672
- })
673
- const sel = createSelection(ctx)
674
- sel.scrollActiveCellIntoView(0, 0)
675
- // cellTopInView (5) < headerHeight (30) -> nextTop = 100 + 5 - 30 = 75
676
- expect(container.scrollTop).toBe(75)
677
- })
678
-
679
- it('non-virtualized: scrolls down when the cell is past the bottom', () => {
680
- const container = document.createElement('div')
681
- Object.defineProperty(container, 'clientHeight', { value: 200, configurable: true })
682
- Object.defineProperty(container, 'clientWidth', { value: 500, configurable: true })
683
- container.scrollTop = 0
684
- container.scrollLeft = 0
685
- container.getBoundingClientRect = () =>
686
- ({ top: 0, left: 0, bottom: 200, right: 500 } as DOMRect)
687
- const td = document.createElement('td')
688
- td.setAttribute('data-svgrid-row', '0')
689
- td.setAttribute('data-svgrid-col', '0')
690
- td.getBoundingClientRect = () =>
691
- ({ top: 250, bottom: 290, left: 0, right: 140 } as DOMRect)
692
- container.appendChild(td)
693
- const ctx = makeCtx({
694
- scrollContainer: container,
695
- rowVirtualizationEnabled: false,
696
- allRows: [makeDataRow('r0')],
697
- allColumns: [makeColumn('c0')],
698
- headerHeight: 30,
699
- theadEl: { offsetHeight: 30 },
700
- renderedColumnItems: [{ index: 0, start: 0, size: 140 }],
701
- })
702
- const sel = createSelection(ctx)
703
- sel.scrollActiveCellIntoView(0, 0)
704
- // cellBotInView (290) > clientHeight (200) -> nextTop = 0 + 290 - 200 = 90
705
- expect(container.scrollTop).toBe(90)
706
- })
707
-
708
- it('scrolls right when the target column is past the viewport', () => {
709
- const container = document.createElement('div')
710
- Object.defineProperty(container, 'clientWidth', { value: 100, configurable: true })
711
- Object.defineProperty(container, 'clientHeight', { value: 100, configurable: true })
712
- container.scrollLeft = 0
713
- const ctx = makeCtx({
714
- scrollContainer: container,
715
- rowVirtualizationEnabled: false,
716
- allRows: [makeDataRow('r0')],
717
- allColumns: [makeColumn('c0'), makeColumn('c1'), makeColumn('c2')],
718
- renderedColumnItems: [{ index: 2, start: 280, size: 140 }],
719
- theadEl: { offsetHeight: 0 },
720
- })
721
- const sel = createSelection(ctx)
722
- sel.scrollActiveCellIntoView(0, 2)
723
- // cellEnd (420) - clientWidth (100) = 320
724
- expect(container.scrollLeft).toBe(320)
725
- })
726
- })
727
-
728
- describe('createSelection - fillMarqueeEdges (Excel fill marquee)', () => {
729
- // Union rectangle spans rows 1..4, cols 0..2 (source cols 0..1 extended to col 2,
730
- // source rows 1..2 extended to row 4).
731
- const fillDrag = {
732
- sourceMinRow: 1, sourceMaxRow: 2, sourceMinCol: 0, sourceMaxCol: 1,
733
- targetRow: 4, targetCol: 2,
734
- }
735
-
736
- it('returns null when there is no fill drag', () => {
737
- const sel = createSelection(makeCtx())
738
- expect(sel.fillMarqueeEdges(1, 0)).toBeNull()
739
- })
740
-
741
- it('flags the outer edges of the whole target rectangle', () => {
742
- const sel = createSelection(makeCtx({ fillDrag }))
743
- expect(sel.fillMarqueeEdges(1, 0)).toEqual({ top: true, bottom: false, left: true, right: false })
744
- expect(sel.fillMarqueeEdges(4, 2)).toEqual({ top: false, bottom: true, left: false, right: true })
745
- expect(sel.fillMarqueeEdges(1, 1)).toEqual({ top: true, bottom: false, left: false, right: false })
746
- })
747
-
748
- it('returns null for interior cells and cells outside the rectangle', () => {
749
- const sel = createSelection(makeCtx({ fillDrag }))
750
- expect(sel.fillMarqueeEdges(2, 1)).toBeNull() // interior
751
- expect(sel.fillMarqueeEdges(0, 0)).toBeNull() // above
752
- expect(sel.fillMarqueeEdges(5, 2)).toBeNull() // below
753
- })
754
- })
469
+ expect(ctx.trackEdgeScroll).not.toHaveBeenCalled()
470
+ })
471
+
472
+ it('endDragSelection commits a pending range move', () => {
473
+ const ctx = makeCtx({ moveDrag: { x: 1 } })
474
+ const sel = createSelection(ctx)
475
+ sel.endDragSelection()
476
+ expect(ctx.onMovePointerUp).toHaveBeenCalled()
477
+ })
478
+
479
+ it('onWindowPointerMove delegates to the range move when one is in flight', () => {
480
+ // A move outranks a fill: they can never both be active, and checking it
481
+ // first keeps the fill path from swallowing the event.
482
+ const ctx = makeCtx({ moveDrag: { x: 1 }, fillDrag: { x: 1 } })
483
+ const sel = createSelection(ctx)
484
+ const ev = { buttons: 1 } as any
485
+ sel.onWindowPointerMove(ev)
486
+ expect(ctx.onMovePointerMove).toHaveBeenCalledWith(ev)
487
+ expect(ctx.onFillPointerMove).not.toHaveBeenCalled()
488
+ })
489
+ })
490
+
491
+ describe('createSelection - range move grab', () => {
492
+ /** A pointer event over a td that reports itself from `closest()`. */
493
+ function overCell() {
494
+ const cell: any = { dataset: { svgridRow: '1', svgridCol: '1' } }
495
+ cell.closest = () => cell
496
+ return { button: 0, clientX: 10, clientY: 10, target: cell, pointerType: 'mouse' } as any
497
+ }
498
+
499
+ it('hands the pointerdown to the move grab before touching the selection', () => {
500
+ const ctx = makeCtx({
501
+ allRows: [{ id: 'r0' }, { id: 'r1' }],
502
+ allColumns: [{ id: 'a' }, { id: 'b' }],
503
+ startMoveDrag: vi.fn(() => true),
504
+ })
505
+ const sel = createSelection(ctx)
506
+ sel.onCellPointerDown(1, 1, overCell())
507
+ expect(ctx.startMoveDrag).toHaveBeenCalled()
508
+ // The selection the user grabbed is still intact, and no drag-select began.
509
+ expect(ctx.selectionRange).toEqual({ anchor: null, focus: null })
510
+ expect(ctx.isDraggingSelection).toBe(false)
511
+ })
512
+
513
+ it('swallows the click that follows a grab, so the range survives', () => {
514
+ const onCellClick = vi.fn()
515
+ const ctx = makeCtx({
516
+ allRows: [makeDataRow('r0', { id: 0 }), makeDataRow('r1', { id: 1 })],
517
+ allColumns: [makeColumn('c0', { editorType: 'text' }), makeColumn('c1', { editorType: 'text' })],
518
+ gridRootEl: { focus: vi.fn() },
519
+ props: { onCellClick },
520
+ startMoveDrag: vi.fn(() => true),
521
+ })
522
+ const sel = createSelection(ctx)
523
+ sel.onCellPointerDown(1, 1, overCell())
524
+ sel.onCellClick(1, 1)
525
+ expect(onCellClick).not.toHaveBeenCalled()
526
+ // Only the one click is swallowed - the next behaves normally.
527
+ sel.onCellClick(1, 1)
528
+ expect(onCellClick).toHaveBeenCalledTimes(1)
529
+ })
530
+
531
+ it('falls through to normal selection when the pointer misses the border', () => {
532
+ const ctx = makeCtx({
533
+ allRows: [{ id: 'r0' }, { id: 'r1' }],
534
+ allColumns: [{ id: 'a' }, { id: 'b' }],
535
+ })
536
+ const sel = createSelection(ctx)
537
+ sel.onCellPointerDown(1, 1, overCell())
538
+ expect(ctx.selectionRange.anchor).toEqual({ rowIndex: 1, colIndex: 1 })
539
+ expect(ctx.isDraggingSelection).toBe(true)
540
+ })
541
+
542
+ it('updateMoveGrabHover leaves the flag alone while moveCells is off', () => {
543
+ const ctx = makeCtx({ moveCellsEffective: false })
544
+ const sel = createSelection(ctx)
545
+ sel.onWindowPointerMove(overCell())
546
+ expect(ctx.isOnMoveGrabStrip).not.toHaveBeenCalled()
547
+ expect(ctx.moveGrabHover).toBe(false)
548
+ })
549
+
550
+ it('raises the hover flag on the border and drops it off it', () => {
551
+ const ctx = makeCtx({
552
+ moveCellsEffective: true,
553
+ // Without an anchored range the hover check bails before touching the
554
+ // DOM - correctly, since there is then no border to grab.
555
+ selectionRange: { anchor: { rowIndex: 1, colIndex: 1 }, focus: { rowIndex: 2, colIndex: 2 } },
556
+ isOnMoveGrabStrip: vi.fn(() => true),
557
+ })
558
+ const sel = createSelection(ctx)
559
+ sel.onWindowPointerMove(overCell())
560
+ expect(ctx.moveGrabHover).toBe(true)
561
+ ctx.isOnMoveGrabStrip = vi.fn(() => false)
562
+ sel.onWindowPointerMove(overCell())
563
+ expect(ctx.moveGrabHover).toBe(false)
564
+ })
565
+
566
+ it('never walks the DOM while nothing is selected', () => {
567
+ // This runs on every window pointermove, so the guard order matters:
568
+ // two property reads must come before any closest() call.
569
+ const closest = vi.fn(() => null)
570
+ const ctx = makeCtx({ moveCellsEffective: true, isOnMoveGrabStrip: vi.fn(() => true) })
571
+ const sel = createSelection(ctx)
572
+ sel.onWindowPointerMove({ target: { closest }, buttons: 0 } as any)
573
+ expect(closest).not.toHaveBeenCalled()
574
+ expect(ctx.isOnMoveGrabStrip).not.toHaveBeenCalled()
575
+ })
576
+
577
+ it('drops the hover flag when the pointer leaves the grid entirely', () => {
578
+ const ctx = makeCtx({
579
+ moveCellsEffective: true,
580
+ moveGrabHover: true,
581
+ selectionRange: { anchor: { rowIndex: 1, colIndex: 1 }, focus: { rowIndex: 2, colIndex: 2 } },
582
+ isOnMoveGrabStrip: vi.fn(() => true),
583
+ })
584
+ const sel = createSelection(ctx)
585
+ sel.onWindowPointerMove({ target: { closest: () => null }, buttons: 0 } as any)
586
+ expect(ctx.moveGrabHover).toBe(false)
587
+ })
588
+ })
589
+
590
+ describe('createSelection - onCellClick', () => {
591
+ function clickCtx(over: any = {}) {
592
+ return makeCtx({
593
+ allRows: [makeDataRow('r0', { id: 0 }), makeDataRow('r1', { id: 1 })],
594
+ allColumns: [makeColumn('c0', { editorType: 'text' }), makeColumn('c1', { editorType: 'text' })],
595
+ gridRootEl: { focus: vi.fn() },
596
+ ...over,
597
+ })
598
+ }
599
+
600
+ it('returns early when row or column missing', () => {
601
+ const ctx = clickCtx({ allRows: [] })
602
+ const sel = createSelection(ctx)
603
+ sel.onCellClick(0, 0)
604
+ expect(ctx.gridRootEl.focus).not.toHaveBeenCalled()
605
+ })
606
+
607
+ it('toggles expansion for a group row', () => {
608
+ const group = makeGroupRow('g0')
609
+ const ctx = clickCtx({ allRows: [group] })
610
+ const sel = createSelection(ctx)
611
+ sel.onCellClick(0, 0)
612
+ expect(group.toggleExpanded).toHaveBeenCalled()
613
+ expect(ctx.grid.setActiveCell).toHaveBeenCalled()
614
+ })
615
+
616
+ it('emits onCellClick and onRowClick for data cells', () => {
617
+ const onCellClick = vi.fn()
618
+ const onRowClick = vi.fn()
619
+ const ctx = clickCtx({ props: { onCellClick, onRowClick } })
620
+ const sel = createSelection(ctx)
621
+ sel.onCellClick(1, 0)
622
+ expect(onCellClick).toHaveBeenCalledWith(
623
+ expect.objectContaining({ rowIndex: 1, colIndex: 0, columnId: 'c0' }),
624
+ )
625
+ expect(onRowClick).toHaveBeenCalledWith(
626
+ expect.objectContaining({ rowIndex: 1, columnId: 'c0' }),
627
+ )
628
+ })
629
+
630
+ it('toggles a checkbox cell and clears editing', () => {
631
+ const ctx = clickCtx({
632
+ allColumns: [makeColumn('c0', { editorType: 'checkbox' })],
633
+ editingCell: { rowIndex: 0, colIndex: 0 },
634
+ })
635
+ const sel = createSelection(ctx)
636
+ sel.onCellClick(0, 0)
637
+ expect(ctx.toggleBooleanCell).toHaveBeenCalledWith(0, 0)
638
+ expect(ctx.editingCell).toBeNull()
639
+ expect(ctx.selectionRange.anchor).toEqual({ rowIndex: 0, colIndex: 0 })
640
+ })
641
+
642
+ it('enters edit mode when clicking the previously-active editable cell', () => {
643
+ const ctx = clickCtx({
644
+ editingEnabled: true,
645
+ activeAtPointerDown: { rowIndex: 0, colIndex: 0 },
646
+ })
647
+ const sel = createSelection(ctx)
648
+ sel.onCellClick(0, 0)
649
+ expect(ctx.onCellDoubleClick).toHaveBeenCalledWith(0, 0)
650
+ })
651
+
652
+ it('clears editing when not re-clicking the active cell', () => {
653
+ const ctx = clickCtx({
654
+ editingEnabled: true,
655
+ activeAtPointerDown: { rowIndex: 1, colIndex: 1 },
656
+ editingCell: { rowIndex: 0, colIndex: 0 },
657
+ })
658
+ const sel = createSelection(ctx)
659
+ sel.onCellClick(0, 0)
660
+ expect(ctx.onCellDoubleClick).not.toHaveBeenCalled()
661
+ expect(ctx.editingCell).toBeNull()
662
+ })
663
+ })
664
+
665
+ describe('createSelection - emitCellDoubleClick', () => {
666
+ it('emits the public double-click events and runs edit entry', () => {
667
+ const onCellDoubleClick = vi.fn()
668
+ const onRowDoubleClick = vi.fn()
669
+ const ctx = makeCtx({
670
+ allRows: [makeDataRow('r0', { id: 0 })],
671
+ allColumns: [makeColumn('c0', { editorType: 'text' })],
672
+ props: { onCellDoubleClick, onRowDoubleClick },
673
+ })
674
+ const sel = createSelection(ctx)
675
+ sel.emitCellDoubleClick(0, 0)
676
+ expect(onCellDoubleClick).toHaveBeenCalledWith(
677
+ expect.objectContaining({ rowIndex: 0, colIndex: 0, columnId: 'c0' }),
678
+ )
679
+ expect(onRowDoubleClick).toHaveBeenCalled()
680
+ expect(ctx.onCellDoubleClick).toHaveBeenCalledWith(0, 0)
681
+ })
682
+
683
+ it('skips the public events for group rows but still runs edit entry', () => {
684
+ const onCellDoubleClick = vi.fn()
685
+ const ctx = makeCtx({
686
+ allRows: [makeGroupRow('g0')],
687
+ allColumns: [makeColumn('c0')],
688
+ props: { onCellDoubleClick },
689
+ })
690
+ const sel = createSelection(ctx)
691
+ sel.emitCellDoubleClick(0, 0)
692
+ expect(onCellDoubleClick).not.toHaveBeenCalled()
693
+ expect(ctx.onCellDoubleClick).toHaveBeenCalledWith(0, 0)
694
+ })
695
+ })
696
+
697
+ describe('createSelection - scrollActiveCellIntoView', () => {
698
+ it('returns early without a scroll container', () => {
699
+ const ctx = makeCtx({ scrollContainer: null })
700
+ const sel = createSelection(ctx)
701
+ expect(() => sel.scrollActiveCellIntoView(0, 0)).not.toThrow()
702
+ })
703
+
704
+ it('returns early for out-of-bounds indices', () => {
705
+ const container = document.createElement('div')
706
+ const ctx = makeCtx({
707
+ scrollContainer: container,
708
+ allRows: [makeDataRow('r0')],
709
+ allColumns: [makeColumn('c0')],
710
+ })
711
+ const sel = createSelection(ctx)
712
+ // rowIndex out of range -> early return, no throw
713
+ expect(() => sel.scrollActiveCellIntoView(5, 0)).not.toThrow()
714
+ expect(() => sel.scrollActiveCellIntoView(0, 5)).not.toThrow()
715
+ })
716
+
717
+ it('adjusts scrollLeft in non-virtualized mode using column virtualizer offsets', () => {
718
+ const container = document.createElement('div')
719
+ Object.defineProperty(container, 'clientWidth', { value: 100, configurable: true })
720
+ Object.defineProperty(container, 'clientHeight', { value: 100, configurable: true })
721
+ container.scrollLeft = 500
722
+ const ctx = makeCtx({
723
+ scrollContainer: container,
724
+ rowVirtualizationEnabled: false,
725
+ allRows: [makeDataRow('r0'), makeDataRow('r1')],
726
+ allColumns: [makeColumn('c0'), makeColumn('c1'), makeColumn('c2')],
727
+ renderedColumnItems: [],
728
+ columnVirtualizer: {
729
+ getOffsetForIndex: (i: number) => i * 140,
730
+ getSizeForIndex: () => 140,
731
+ },
732
+ theadEl: { offsetHeight: 0 },
733
+ })
734
+ const sel = createSelection(ctx)
735
+ // target column 0 is left of the current scrollLeft -> scroll left to it
736
+ sel.scrollActiveCellIntoView(0, 0)
737
+ expect(container.scrollLeft).toBe(0)
738
+ })
739
+
740
+ it('virtualized: uses native scrollIntoView when the row is mounted', () => {
741
+ const container = document.createElement('div')
742
+ Object.defineProperty(container, 'clientWidth', { value: 100, configurable: true })
743
+ Object.defineProperty(container, 'clientHeight', { value: 100, configurable: true })
744
+ const tr = document.createElement('tr')
745
+ tr.className = 'sv-grid-row'
746
+ const cell = document.createElement('td')
747
+ cell.setAttribute('data-svgrid-row', '0')
748
+ tr.appendChild(cell)
749
+ container.appendChild(tr)
750
+ const scrollIntoView = vi.fn()
751
+ tr.scrollIntoView = scrollIntoView
752
+ const ctx = makeCtx({
753
+ scrollContainer: container,
754
+ rowVirtualizationEnabled: true,
755
+ allRows: [makeDataRow('r0')],
756
+ allColumns: [makeColumn('c0')],
757
+ renderedColumnItems: [{ index: 0, start: 0, size: 140 }],
758
+ })
759
+ const sel = createSelection(ctx)
760
+ sel.scrollActiveCellIntoView(0, 0)
761
+ expect(scrollIntoView).toHaveBeenCalledWith(
762
+ expect.objectContaining({ block: 'nearest' }),
763
+ )
764
+ })
765
+
766
+ it('virtualized + scroll scaling: maps the logical offset into DOM space', () => {
767
+ const container = document.createElement('div')
768
+ Object.defineProperty(container, 'clientHeight', { value: 100, configurable: true })
769
+ container.scrollTop = 0
770
+ const ctx = makeCtx({
771
+ scrollContainer: container,
772
+ rowVirtualizationEnabled: true,
773
+ rowScrollScalingActive: true,
774
+ allRows: [makeDataRow('r0')],
775
+ allColumns: [makeColumn('c0')],
776
+ theadEl: { offsetHeight: 10 },
777
+ virtualizer: { getOffsetForIndex: () => 1000, getSizeForIndex: () => 20 },
778
+ logicalToDomRowOffset: (n: number) => n / 2, // 1000 -> 500
779
+ columnVirtualizer: { getOffsetForIndex: () => 0, getSizeForIndex: () => 140 },
780
+ })
781
+ const sel = createSelection(ctx)
782
+ sel.scrollActiveCellIntoView(0, 0)
783
+ // nextTop = max(500 - 10, 0) = 490
784
+ expect(container.scrollTop).toBe(490)
785
+ })
786
+
787
+ it('virtualized: computes scrollTop manually when the row is offscreen', () => {
788
+ const container = document.createElement('div')
789
+ Object.defineProperty(container, 'clientHeight', { value: 100, configurable: true })
790
+ container.scrollTop = 0
791
+ const ctx = makeCtx({
792
+ scrollContainer: container,
793
+ rowVirtualizationEnabled: true,
794
+ rowScrollScalingActive: false,
795
+ allRows: [makeDataRow('r0')],
796
+ allColumns: [makeColumn('c0')],
797
+ theadEl: { offsetHeight: 10 },
798
+ virtualizer: { getOffsetForIndex: () => 500, getSizeForIndex: () => 30 },
799
+ columnVirtualizer: { getOffsetForIndex: () => 0, getSizeForIndex: () => 140 },
800
+ })
801
+ const sel = createSelection(ctx)
802
+ sel.scrollActiveCellIntoView(0, 0)
803
+ // rowBottom = 10 + 500 + 30 = 540 > 0 + 100 -> nextTop = 540 - 100 = 440
804
+ expect(container.scrollTop).toBe(440)
805
+ })
806
+
807
+ it('non-virtualized: scrolls up when the cell overlaps the sticky header', () => {
808
+ const container = document.createElement('div')
809
+ Object.defineProperty(container, 'clientHeight', { value: 200, configurable: true })
810
+ Object.defineProperty(container, 'clientWidth', { value: 500, configurable: true })
811
+ container.scrollTop = 100
812
+ container.scrollLeft = 0
813
+ container.getBoundingClientRect = () =>
814
+ ({ top: 0, left: 0, bottom: 200, right: 500 } as DOMRect)
815
+ const td = document.createElement('td')
816
+ td.setAttribute('data-svgrid-row', '0')
817
+ td.setAttribute('data-svgrid-col', '0')
818
+ td.getBoundingClientRect = () =>
819
+ ({ top: 5, bottom: 35, left: 0, right: 140 } as DOMRect)
820
+ container.appendChild(td)
821
+ const ctx = makeCtx({
822
+ scrollContainer: container,
823
+ rowVirtualizationEnabled: false,
824
+ allRows: [makeDataRow('r0')],
825
+ allColumns: [makeColumn('c0')],
826
+ headerHeight: 30,
827
+ theadEl: { offsetHeight: 30 },
828
+ renderedColumnItems: [{ index: 0, start: 0, size: 140 }],
829
+ })
830
+ const sel = createSelection(ctx)
831
+ sel.scrollActiveCellIntoView(0, 0)
832
+ // cellTopInView (5) < headerHeight (30) -> nextTop = 100 + 5 - 30 = 75
833
+ expect(container.scrollTop).toBe(75)
834
+ })
835
+
836
+ it('non-virtualized: scrolls down when the cell is past the bottom', () => {
837
+ const container = document.createElement('div')
838
+ Object.defineProperty(container, 'clientHeight', { value: 200, configurable: true })
839
+ Object.defineProperty(container, 'clientWidth', { value: 500, configurable: true })
840
+ container.scrollTop = 0
841
+ container.scrollLeft = 0
842
+ container.getBoundingClientRect = () =>
843
+ ({ top: 0, left: 0, bottom: 200, right: 500 } as DOMRect)
844
+ const td = document.createElement('td')
845
+ td.setAttribute('data-svgrid-row', '0')
846
+ td.setAttribute('data-svgrid-col', '0')
847
+ td.getBoundingClientRect = () =>
848
+ ({ top: 250, bottom: 290, left: 0, right: 140 } as DOMRect)
849
+ container.appendChild(td)
850
+ const ctx = makeCtx({
851
+ scrollContainer: container,
852
+ rowVirtualizationEnabled: false,
853
+ allRows: [makeDataRow('r0')],
854
+ allColumns: [makeColumn('c0')],
855
+ headerHeight: 30,
856
+ theadEl: { offsetHeight: 30 },
857
+ renderedColumnItems: [{ index: 0, start: 0, size: 140 }],
858
+ })
859
+ const sel = createSelection(ctx)
860
+ sel.scrollActiveCellIntoView(0, 0)
861
+ // cellBotInView (290) > clientHeight (200) -> nextTop = 0 + 290 - 200 = 90
862
+ expect(container.scrollTop).toBe(90)
863
+ })
864
+
865
+ it('scrolls right when the target column is past the viewport', () => {
866
+ const container = document.createElement('div')
867
+ Object.defineProperty(container, 'clientWidth', { value: 100, configurable: true })
868
+ Object.defineProperty(container, 'clientHeight', { value: 100, configurable: true })
869
+ container.scrollLeft = 0
870
+ const ctx = makeCtx({
871
+ scrollContainer: container,
872
+ rowVirtualizationEnabled: false,
873
+ allRows: [makeDataRow('r0')],
874
+ allColumns: [makeColumn('c0'), makeColumn('c1'), makeColumn('c2')],
875
+ renderedColumnItems: [{ index: 2, start: 280, size: 140 }],
876
+ theadEl: { offsetHeight: 0 },
877
+ })
878
+ const sel = createSelection(ctx)
879
+ sel.scrollActiveCellIntoView(0, 2)
880
+ // cellEnd (420) - clientWidth (100) = 320
881
+ expect(container.scrollLeft).toBe(320)
882
+ })
883
+ })
884
+
885
+ describe('createSelection - fillMarqueeEdges (Excel fill marquee)', () => {
886
+ // Union rectangle spans rows 1..4, cols 0..2 (source cols 0..1 extended to col 2,
887
+ // source rows 1..2 extended to row 4).
888
+ const fillDrag = {
889
+ sourceMinRow: 1, sourceMaxRow: 2, sourceMinCol: 0, sourceMaxCol: 1,
890
+ targetRow: 4, targetCol: 2,
891
+ }
892
+
893
+ it('returns null when there is no fill drag', () => {
894
+ const sel = createSelection(makeCtx())
895
+ expect(sel.fillMarqueeEdges(1, 0)).toBeNull()
896
+ })
897
+
898
+ it('flags the outer edges of the whole target rectangle', () => {
899
+ const sel = createSelection(makeCtx({ fillDrag }))
900
+ expect(sel.fillMarqueeEdges(1, 0)).toEqual({ top: true, bottom: false, left: true, right: false })
901
+ expect(sel.fillMarqueeEdges(4, 2)).toEqual({ top: false, bottom: true, left: false, right: true })
902
+ expect(sel.fillMarqueeEdges(1, 1)).toEqual({ top: true, bottom: false, left: false, right: false })
903
+ })
904
+
905
+ it('returns null for interior cells and cells outside the rectangle', () => {
906
+ const sel = createSelection(makeCtx({ fillDrag }))
907
+ expect(sel.fillMarqueeEdges(2, 1)).toBeNull() // interior
908
+ expect(sel.fillMarqueeEdges(0, 0)).toBeNull() // above
909
+ expect(sel.fillMarqueeEdges(5, 2)).toBeNull() // below
910
+ })
911
+ })