@svgrid/grid 2.6.23 → 3.0.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 (263) hide show
  1. package/CHANGELOG.md +88 -88
  2. package/README.md +199 -199
  3. package/dist/FlexRender.svelte +96 -96
  4. package/dist/GridFooter.svelte +181 -181
  5. package/dist/SvAutoComplete.svelte +169 -169
  6. package/dist/SvAvatar.svelte +75 -75
  7. package/dist/SvCalendar.svelte +503 -503
  8. package/dist/SvCarousel.svelte +141 -141
  9. package/dist/SvCheckBox.svelte +102 -102
  10. package/dist/SvCircularProgress.svelte +109 -109
  11. package/dist/SvColorInput.svelte +181 -181
  12. package/dist/SvComboBox.svelte +279 -279
  13. package/dist/SvContextMenu.svelte +116 -116
  14. package/dist/SvCountryInput.svelte +163 -163
  15. package/dist/SvDrawer.svelte +254 -254
  16. package/dist/SvDropDownList.svelte +378 -378
  17. package/dist/SvDurationInput.svelte +126 -126
  18. package/dist/SvField.svelte +293 -293
  19. package/dist/SvForm.svelte +437 -437
  20. package/dist/SvGridCellEditor.svelte +744 -744
  21. package/dist/SvGridChart.svelte +1716 -1716
  22. package/dist/SvGridChartPanel.svelte +485 -485
  23. package/dist/SvGridChartView.svelte +70 -70
  24. package/dist/SvGridDropdown.svelte +728 -728
  25. package/dist/SvGridSelect.svelte +270 -270
  26. package/dist/SvGroupCell.svelte +116 -116
  27. package/dist/SvListBox.svelte +334 -334
  28. package/dist/SvMaskedInput.svelte +122 -122
  29. package/dist/SvMenu.svelte +124 -124
  30. package/dist/SvMenuList.svelte +146 -146
  31. package/dist/SvMultiSelect.svelte +293 -293
  32. package/dist/SvNumberInput.svelte +172 -172
  33. package/dist/SvOtpInput.svelte +158 -158
  34. package/dist/SvPasswordInput.svelte +151 -151
  35. package/dist/SvPhoneInput.svelte +133 -133
  36. package/dist/SvPopover.svelte +197 -197
  37. package/dist/SvProgress.svelte +116 -116
  38. package/dist/SvRadioGroup.svelte +107 -107
  39. package/dist/SvRating.svelte +112 -112
  40. package/dist/SvResult.svelte +73 -73
  41. package/dist/SvRichText.svelte +211 -211
  42. package/dist/SvRowGroupPanel.svelte +170 -170
  43. package/dist/SvScrollArea.svelte +61 -61
  44. package/dist/SvSlider.svelte +203 -203
  45. package/dist/SvSwitchButton.svelte +108 -108
  46. package/dist/SvTagsInput.svelte +115 -115
  47. package/dist/SvTextInput.svelte +147 -147
  48. package/dist/SvTimePicker.svelte +245 -245
  49. package/dist/SvToaster.svelte +159 -159
  50. package/dist/SvToggleButton.svelte +85 -85
  51. package/dist/SvTooltip.svelte +161 -161
  52. package/dist/SvTour.svelte +208 -208
  53. package/dist/SvTree.svelte +444 -444
  54. package/dist/SvTreeSelect.svelte +239 -239
  55. package/dist/cdn/{GridMenus-BzWXQjv3.js → GridMenus-DMihUtma.js} +3 -3
  56. package/dist/cdn/{GridMenus-xr_rHx8F.js → GridMenus-nmNDj1a3.js} +3 -3
  57. package/dist/cdn/{SvDateRangeInput-DMLKmGEc.js → SvDateRangeInput-Bh0A0JkF.js} +1 -1
  58. package/dist/cdn/{SvDateRangeInput-CaOuMs8O.js → SvDateRangeInput-DflbiP7N.js} +1 -1
  59. package/dist/cdn/{SvDateTimePicker-sonaH0oh.js → SvDateTimePicker-BWwpfB_o.js} +1 -1
  60. package/dist/cdn/{SvDateTimePicker-CCbDZNZB.js → SvDateTimePicker-Bivn8dAP.js} +1 -1
  61. package/dist/cdn/{SvGridCellEditor-BAPSC7EL.js → SvGridCellEditor-AXL8cHGO.js} +1 -1
  62. package/dist/cdn/{SvGridCellEditor-BwzmUWtL.js → SvGridCellEditor-Ba7rY3eu.js} +1 -1
  63. package/dist/cdn/{SvGridChart-BwVos976.js → SvGridChart-Bs2GIR2Q.js} +1 -1
  64. package/dist/cdn/{SvGridChart-BEJmNNx9.js → SvGridChart-CwhFz7GV.js} +1 -1
  65. package/dist/cdn/{SvGridChartPanel-BOknOkrP.js → SvGridChartPanel-1WXuStzM.js} +1 -1
  66. package/dist/cdn/{SvGridChartPanel-D2PjII4O.js → SvGridChartPanel-e5_nqNP9.js} +1 -1
  67. package/dist/cdn/{SvGridChartView-00LPUHL1.js → SvGridChartView-SmPW10dI.js} +1 -1
  68. package/dist/cdn/{SvGridChartView-BhUEJ5ki.js → SvGridChartView-eSPuJE6g.js} +1 -1
  69. package/dist/cdn/{SvGridDropdown-D0VdjeR8.js → SvGridDropdown-B1ZcLpgs.js} +1 -1
  70. package/dist/cdn/{SvGridDropdown-D13MtJ2j.js → SvGridDropdown-CtdbHcIS.js} +1 -1
  71. package/dist/cdn/{date-format-BnnHlqGw.js → date-format-CcP1tafP.js} +2 -2
  72. package/dist/cdn/{date-format-BNii4zeD.js → date-format-DZT7T1wf.js} +2 -2
  73. package/dist/cdn/{row-drag-touch-Ddaa-QeB.js → row-drag-touch-CycRR65n.js} +12 -10
  74. package/dist/cdn/{src-skQN5eqh.js → src-B_YS5AOc.js} +45 -45
  75. package/dist/cdn/{src-DGo7IHug.js → src-DYXXpuSk.js} +44 -44
  76. package/dist/cdn/svgrid.js +7 -7
  77. package/dist/cdn/svgrid.svelte-external.js +7 -7
  78. package/dist/chart-export.js +8 -8
  79. package/dist/row-drag-touch.d.ts +5 -1
  80. package/dist/row-drag-touch.js +15 -4
  81. package/dist/row-drag.js +7 -3
  82. package/package.json +11 -11
  83. package/src/FlexRender.svelte +96 -96
  84. package/src/GridFooter.svelte +181 -181
  85. package/src/SvAutoComplete.svelte +169 -169
  86. package/src/SvAvatar.svelte +75 -75
  87. package/src/SvCalendar.svelte +503 -503
  88. package/src/SvCalendar.test.ts +226 -226
  89. package/src/SvCarousel.svelte +141 -141
  90. package/src/SvCheckBox.svelte +102 -102
  91. package/src/SvCircularProgress.svelte +109 -109
  92. package/src/SvColorInput.svelte +181 -181
  93. package/src/SvComboBox.svelte +279 -279
  94. package/src/SvContextMenu.svelte +116 -116
  95. package/src/SvCountryInput.svelte +163 -163
  96. package/src/SvDrawer.svelte +254 -254
  97. package/src/SvDropDownList.svelte +378 -378
  98. package/src/SvDurationInput.svelte +126 -126
  99. package/src/SvField.svelte +293 -293
  100. package/src/SvForm.svelte +437 -437
  101. package/src/SvForm.test.ts +411 -411
  102. package/src/SvGrid.types.ts +2092 -2092
  103. package/src/SvGridCellEditor.svelte +744 -744
  104. package/src/SvGridChart.svelte +1716 -1716
  105. package/src/SvGridChartPanel.svelte +485 -485
  106. package/src/SvGridChartView.svelte +70 -70
  107. package/src/SvGridDropdown.svelte +728 -728
  108. package/src/SvGridSelect.svelte +270 -270
  109. package/src/SvGroupCell.svelte +116 -116
  110. package/src/SvListBox.svelte +334 -334
  111. package/src/SvMaskedInput.svelte +122 -122
  112. package/src/SvMenu.svelte +124 -124
  113. package/src/SvMenu.test.ts +97 -97
  114. package/src/SvMenuList.svelte +146 -146
  115. package/src/SvMultiSelect.svelte +293 -293
  116. package/src/SvNumberInput.svelte +172 -172
  117. package/src/SvOtpInput.svelte +158 -158
  118. package/src/SvPasswordInput.svelte +151 -151
  119. package/src/SvPhoneInput.svelte +133 -133
  120. package/src/SvPopover.svelte +197 -197
  121. package/src/SvProgress.svelte +116 -116
  122. package/src/SvRadioGroup.svelte +107 -107
  123. package/src/SvRating.svelte +112 -112
  124. package/src/SvResult.svelte +73 -73
  125. package/src/SvRichText.svelte +211 -211
  126. package/src/SvRowGroupPanel.svelte +170 -170
  127. package/src/SvScrollArea.svelte +61 -61
  128. package/src/SvSlider.svelte +203 -203
  129. package/src/SvSwitchButton.svelte +108 -108
  130. package/src/SvTagsInput.svelte +115 -115
  131. package/src/SvTextInput.svelte +147 -147
  132. package/src/SvTimePicker.svelte +245 -245
  133. package/src/SvToaster.svelte +159 -159
  134. package/src/SvToaster.test.ts +95 -95
  135. package/src/SvToggleButton.svelte +85 -85
  136. package/src/SvTooltip.svelte +161 -161
  137. package/src/SvTour.svelte +208 -208
  138. package/src/SvTree.svelte +444 -444
  139. package/src/SvTreeSelect.svelte +239 -239
  140. package/src/a11y/dismissable.test.ts +119 -119
  141. package/src/a11y/dismissable.ts +114 -114
  142. package/src/a11y.contract.test.ts +49 -49
  143. package/src/a11y.test.ts +59 -59
  144. package/src/a11y.ts +61 -61
  145. package/src/ai.test.ts +502 -502
  146. package/src/ai.ts +1419 -1419
  147. package/src/build-api.coverage.test.ts +633 -633
  148. package/src/build-api.ts +846 -846
  149. package/src/builtin-editors.grid.test.ts +83 -83
  150. package/src/cell-formatting.ts +171 -171
  151. package/src/cell-render.test.ts +513 -513
  152. package/src/cell-render.ts +496 -496
  153. package/src/cell-values.ts +148 -148
  154. package/src/chart-export.ts +202 -202
  155. package/src/chart-view.svelte.ts +36 -36
  156. package/src/chart.ts +2321 -2321
  157. package/src/collaboration.test.ts +104 -104
  158. package/src/collaboration.ts +167 -167
  159. package/src/column-groups.ts +78 -78
  160. package/src/core.performance.test.ts +30 -30
  161. package/src/core.ts +1865 -1865
  162. package/src/createAutocomplete.svelte.ts +132 -132
  163. package/src/createCombobox.svelte.ts +191 -191
  164. package/src/createCountryInput.svelte.ts +157 -157
  165. package/src/createDropdownList.svelte.ts +168 -168
  166. package/src/createForm.svelte.ts +386 -386
  167. package/src/createGrid.svelte.ts +42 -42
  168. package/src/createGrid.test.ts +10 -10
  169. package/src/createGridState.svelte.ts +17 -17
  170. package/src/createListbox.svelte.ts +250 -250
  171. package/src/createMenu.svelte.ts +224 -224
  172. package/src/createPopoverSelect.svelte.ts +213 -213
  173. package/src/createSlider.svelte.ts +191 -191
  174. package/src/createTooltip.svelte.ts +144 -144
  175. package/src/createTree.svelte.ts +322 -322
  176. package/src/datetime/date-core.ts +206 -206
  177. package/src/datetime/date-restrict.ts +61 -61
  178. package/src/datetime/timezone.ts +135 -135
  179. package/src/dock-manager-model.ts +596 -596
  180. package/src/dock-model.ts +374 -374
  181. package/src/editing.test.ts +974 -974
  182. package/src/editing.ts +609 -609
  183. package/src/editor-contract.ts +171 -171
  184. package/src/editor-registry.grid.test.ts +144 -144
  185. package/src/editor-registry.ts +122 -122
  186. package/src/export-data-api.test.ts +126 -126
  187. package/src/export-format.test.ts +107 -107
  188. package/src/export-format.ts +601 -601
  189. package/src/filter-operators.ts +160 -160
  190. package/src/filtering/excel-filters.ts +325 -325
  191. package/src/flex-render.ts +3 -3
  192. package/src/form-field.ts +127 -127
  193. package/src/group-display.test.ts +167 -167
  194. package/src/group-display.ts +200 -200
  195. package/src/headless.ts +87 -87
  196. package/src/js-scroller.svelte.ts +173 -173
  197. package/src/keyboard-handlers.ts +270 -270
  198. package/src/keyboard.test.ts +59 -59
  199. package/src/keyboard.ts +97 -97
  200. package/src/list-nav.test.ts +49 -49
  201. package/src/list-nav.ts +29 -29
  202. package/src/list-option.test.ts +56 -56
  203. package/src/list-option.ts +179 -179
  204. package/src/menus.ts +597 -597
  205. package/src/merge-objects.ts +48 -48
  206. package/src/overlays.test.ts +90 -90
  207. package/src/positioning.ts +268 -268
  208. package/src/render-component.ts +28 -28
  209. package/src/row-drag-touch.ts +20 -5
  210. package/src/row-drag.test.ts +401 -353
  211. package/src/row-drag.ts +419 -415
  212. package/src/row-resize.test.ts +524 -524
  213. package/src/row-resize.ts +228 -228
  214. package/src/scheduler-ical.ts +181 -181
  215. package/src/scheduler-model.test.ts +562 -562
  216. package/src/scheduler-model.ts +873 -873
  217. package/src/selection.test.ts +885 -885
  218. package/src/server-data-source.test.ts +383 -383
  219. package/src/server-data-source.ts +469 -469
  220. package/src/sparkline.test.ts +68 -68
  221. package/src/sparkline.ts +169 -169
  222. package/src/spreadsheet.test.ts +488 -488
  223. package/src/spreadsheet.ts +312 -312
  224. package/src/static-functions.ts +11 -11
  225. package/src/subscribe.ts +38 -38
  226. package/src/summaries.ts +113 -113
  227. package/src/svgrid-wrapper.types.ts +563 -563
  228. package/src/svgrid.async-editor-options.test.ts +273 -273
  229. package/src/svgrid.auto-row-height.test.ts +204 -204
  230. package/src/svgrid.behavior.test.ts +910 -910
  231. package/src/svgrid.charting.test.ts +534 -534
  232. package/src/svgrid.comments-autocomplete.test.ts +127 -127
  233. package/src/svgrid.context-menu.test.ts +147 -147
  234. package/src/svgrid.features.test.ts +157 -157
  235. package/src/svgrid.filter-depth.test.ts +163 -163
  236. package/src/svgrid.filter-menu-listbox.svelte.test.ts +377 -377
  237. package/src/svgrid.filter-menu-scroll.test.ts +112 -112
  238. package/src/svgrid.grand-total.test.ts +188 -188
  239. package/src/svgrid.group-display-mode.test.ts +171 -171
  240. package/src/svgrid.group-footers.test.ts +121 -121
  241. package/src/svgrid.group-pagination.test.ts +153 -153
  242. package/src/svgrid.new-features.wrapper.test.ts +251 -251
  243. package/src/svgrid.tree-data.test.ts +186 -186
  244. package/src/svgrid.wrapper.test.ts +63 -63
  245. package/src/svgriddropdown.async-panel.svelte.test.ts +195 -195
  246. package/src/test-setup.ts +62 -62
  247. package/src/themes/index.ts +288 -288
  248. package/src/toast-store.svelte.ts +250 -250
  249. package/src/toast-store.test.ts +147 -147
  250. package/src/tree-row-model.test.ts +168 -168
  251. package/src/ui-buttons.test.ts +144 -144
  252. package/src/ui-inputs.test.ts +118 -118
  253. package/src/ui-localization.test.ts +113 -113
  254. package/src/ui-range.test.ts +70 -70
  255. package/src/ui-selection.test.ts +155 -155
  256. package/src/ui-tier1.test.ts +142 -142
  257. package/src/virtual.test.ts +88 -88
  258. package/src/virtualization/column-virtualizer.test.ts +27 -27
  259. package/src/virtualization/column-virtualizer.ts +30 -30
  260. package/src/virtualization/svelte-virtualizer.svelte.ts +26 -26
  261. package/src/virtualization/types.ts +30 -30
  262. package/src/virtualization/virtualizer.test.ts +47 -47
  263. package/src/virtualization/virtualizer.ts +322 -322
@@ -1,448 +1,448 @@
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
-
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
446
  it('endDragSelection cancels the edge-scroll loop', () => {
447
447
  // The loop exits on its own once no drag is live, but cancelling the
448
448
  // pending frame here stops one more from firing after the gesture ended.
@@ -469,443 +469,443 @@ describe('createSelection - endDragSelection / window move', () => {
469
469
  expect(ctx.trackEdgeScroll).not.toHaveBeenCalled()
470
470
  })
471
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
- })
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
+ })