@svgrid/grid 2.2.26 → 2.2.27

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 (218) hide show
  1. package/README.md +199 -145
  2. package/dist/FlexRender.svelte +96 -96
  3. package/dist/GridFooter.svelte +179 -179
  4. package/dist/GridMenus.svelte +734 -728
  5. package/dist/SvAutoComplete.svelte +165 -165
  6. package/dist/SvCalendar.svelte +503 -503
  7. package/dist/SvCarousel.svelte +141 -141
  8. package/dist/SvCheckBox.svelte +101 -101
  9. package/dist/SvColorInput.svelte +181 -181
  10. package/dist/SvComboBox.svelte +275 -275
  11. package/dist/SvContextMenu.svelte +116 -116
  12. package/dist/SvCountryInput.svelte +160 -160
  13. package/dist/SvDrawer.svelte +250 -250
  14. package/dist/SvDropDownList.svelte +374 -374
  15. package/dist/SvDurationInput.svelte +126 -126
  16. package/dist/SvField.svelte +293 -293
  17. package/dist/SvForm.svelte +437 -437
  18. package/dist/SvGrid.css +2723 -2719
  19. package/dist/SvGrid.svelte +3333 -3333
  20. package/dist/SvGridChart.svelte +1724 -1724
  21. package/dist/SvGridChartPanel.svelte +485 -485
  22. package/dist/SvGridChartView.svelte +70 -70
  23. package/dist/SvGridDropdown.svelte +696 -696
  24. package/dist/SvGridSelect.svelte +259 -259
  25. package/dist/SvGroupCell.svelte +109 -109
  26. package/dist/SvListBox.svelte +287 -287
  27. package/dist/SvMaskedInput.svelte +122 -122
  28. package/dist/SvMenu.svelte +124 -124
  29. package/dist/SvMenuList.svelte +146 -146
  30. package/dist/SvMultiSelect.svelte +281 -281
  31. package/dist/SvNumberInput.svelte +168 -168
  32. package/dist/SvOtpInput.svelte +158 -158
  33. package/dist/SvPasswordInput.svelte +151 -151
  34. package/dist/SvPhoneInput.svelte +131 -131
  35. package/dist/SvPopover.svelte +197 -197
  36. package/dist/SvRadioGroup.svelte +107 -107
  37. package/dist/SvRowGroupPanel.svelte +170 -170
  38. package/dist/SvScrollArea.svelte +61 -61
  39. package/dist/SvSlider.svelte +200 -200
  40. package/dist/SvSwitchButton.svelte +107 -107
  41. package/dist/SvTagsInput.svelte +112 -112
  42. package/dist/SvTextInput.svelte +147 -147
  43. package/dist/SvTimePicker.svelte +245 -245
  44. package/dist/SvToaster.svelte +159 -159
  45. package/dist/SvToggleButton.svelte +85 -85
  46. package/dist/SvTooltip.svelte +161 -161
  47. package/dist/SvTour.svelte +204 -204
  48. package/dist/SvTree.svelte +437 -437
  49. package/dist/SvTreeSelect.svelte +233 -233
  50. package/dist/a11y/dismissable.d.ts +11 -0
  51. package/dist/a11y/dismissable.js +21 -0
  52. package/dist/ai.js +3 -3
  53. package/dist/cdn/GridMenus-BzxEYNtW.js +421 -0
  54. package/dist/cdn/GridMenus-Dr-nGEXn.js +417 -0
  55. package/dist/cdn/{SvDateTimePicker-CYC7gRER.js → SvDateTimePicker-B1sDc9Pz.js} +451 -444
  56. package/dist/cdn/{SvDateTimePicker-DtQKd4Ns.js → SvDateTimePicker-Bh0FTs1E.js} +114 -107
  57. package/dist/cdn/{SvGridChart-BhnFdLd0.js → SvGridChart-BKQsO5fZ.js} +1 -1
  58. package/dist/cdn/{SvGridChart-BcLCYvw9.js → SvGridChart-Bgk4hDs8.js} +1 -1
  59. package/dist/cdn/{SvGridChartPanel-DvjwxLvK.js → SvGridChartPanel-DSkHIQDd.js} +1 -1
  60. package/dist/cdn/{SvGridChartPanel-Cmx9DHAS.js → SvGridChartPanel-DkCc2Z7b.js} +1 -1
  61. package/dist/cdn/{SvGridChartView-B40DTJSX.js → SvGridChartView-BrbVaELm.js} +1 -1
  62. package/dist/cdn/{SvGridChartView-PwqI4s02.js → SvGridChartView-i9rWvSKg.js} +1 -1
  63. package/dist/cdn/{SvGridDropdown-hpnHvOGt.js → SvGridDropdown-CGxxopQ4.js} +1 -1
  64. package/dist/cdn/{SvGridDropdown-DjALc_4f.js → SvGridDropdown-D08sVmAy.js} +1 -1
  65. package/dist/cdn/{src-DysW9qbk.js → src-Cw8d9U8j.js} +5753 -5753
  66. package/dist/cdn/{src-bYfr_7aR.js → src-cgs1wcUS.js} +8102 -8102
  67. package/dist/cdn/svgrid.js +9 -9
  68. package/dist/cdn/svgrid.svelte-external.js +9 -9
  69. package/dist/chart-export.js +8 -8
  70. package/dist/index.d.ts +1 -1
  71. package/dist/index.js +1 -1
  72. package/package.json +30 -13
  73. package/src/FlexRender.svelte +96 -96
  74. package/src/GridFooter.svelte +179 -179
  75. package/src/GridMenus.svelte +734 -728
  76. package/src/SvAutoComplete.svelte +165 -165
  77. package/src/SvCalendar.svelte +503 -503
  78. package/src/SvCalendar.test.ts +226 -226
  79. package/src/SvCarousel.svelte +141 -141
  80. package/src/SvCheckBox.svelte +101 -101
  81. package/src/SvColorInput.svelte +181 -181
  82. package/src/SvComboBox.svelte +275 -275
  83. package/src/SvContextMenu.svelte +116 -116
  84. package/src/SvCountryInput.svelte +160 -160
  85. package/src/SvDrawer.svelte +250 -250
  86. package/src/SvDropDownList.svelte +374 -374
  87. package/src/SvDurationInput.svelte +126 -126
  88. package/src/SvField.svelte +293 -293
  89. package/src/SvForm.svelte +437 -437
  90. package/src/SvForm.test.ts +411 -411
  91. package/src/SvGrid.controller.svelte.ts +3239 -3239
  92. package/src/SvGrid.css +2723 -2719
  93. package/src/SvGrid.svelte +3333 -3333
  94. package/src/SvGrid.types.ts +1613 -1613
  95. package/src/SvGridChart.svelte +1724 -1724
  96. package/src/SvGridChartPanel.svelte +485 -485
  97. package/src/SvGridChartView.svelte +70 -70
  98. package/src/SvGridDropdown.svelte +696 -696
  99. package/src/SvGridSelect.svelte +259 -259
  100. package/src/SvGroupCell.svelte +109 -109
  101. package/src/SvListBox.svelte +287 -287
  102. package/src/SvMaskedInput.svelte +122 -122
  103. package/src/SvMenu.svelte +124 -124
  104. package/src/SvMenu.test.ts +97 -97
  105. package/src/SvMenuList.svelte +146 -146
  106. package/src/SvMultiSelect.svelte +281 -281
  107. package/src/SvNumberInput.svelte +168 -168
  108. package/src/SvOtpInput.svelte +158 -158
  109. package/src/SvPasswordInput.svelte +151 -151
  110. package/src/SvPhoneInput.svelte +131 -131
  111. package/src/SvPopover.svelte +197 -197
  112. package/src/SvRadioGroup.svelte +107 -107
  113. package/src/SvRowGroupPanel.svelte +170 -170
  114. package/src/SvScrollArea.svelte +61 -61
  115. package/src/SvSlider.svelte +200 -200
  116. package/src/SvSwitchButton.svelte +107 -107
  117. package/src/SvTagsInput.svelte +112 -112
  118. package/src/SvTextInput.svelte +147 -147
  119. package/src/SvTimePicker.svelte +245 -245
  120. package/src/SvToaster.svelte +159 -159
  121. package/src/SvToaster.test.ts +95 -95
  122. package/src/SvToggleButton.svelte +85 -85
  123. package/src/SvTooltip.svelte +161 -161
  124. package/src/SvTour.svelte +204 -204
  125. package/src/SvTree.svelte +437 -437
  126. package/src/SvTreeSelect.svelte +233 -233
  127. package/src/a11y/dismissable.test.ts +119 -95
  128. package/src/a11y/dismissable.ts +114 -94
  129. package/src/a11y.contract.test.ts +49 -49
  130. package/src/a11y.test.ts +59 -59
  131. package/src/a11y.ts +61 -61
  132. package/src/ai.test.ts +502 -502
  133. package/src/ai.ts +1391 -1391
  134. package/src/build-api.coverage.test.ts +633 -633
  135. package/src/build-api.ts +895 -895
  136. package/src/builtin-editors.grid.test.ts +85 -85
  137. package/src/cell-formatting.ts +169 -169
  138. package/src/cell-render.ts +469 -469
  139. package/src/chart-export.ts +201 -201
  140. package/src/chart-view.svelte.ts +36 -36
  141. package/src/chart.ts +2296 -2296
  142. package/src/collaboration.test.ts +104 -104
  143. package/src/collaboration.ts +167 -167
  144. package/src/core.performance.test.ts +30 -30
  145. package/src/core.ts +1111 -1111
  146. package/src/createAutocomplete.svelte.ts +132 -132
  147. package/src/createCombobox.svelte.ts +191 -191
  148. package/src/createCountryInput.svelte.ts +157 -157
  149. package/src/createDropdownList.svelte.ts +168 -168
  150. package/src/createForm.svelte.ts +386 -386
  151. package/src/createGrid.svelte.ts +42 -42
  152. package/src/createGrid.test.ts +10 -10
  153. package/src/createGridState.svelte.ts +17 -17
  154. package/src/createMenu.svelte.ts +225 -225
  155. package/src/createPopoverSelect.svelte.ts +213 -213
  156. package/src/createSlider.svelte.ts +191 -191
  157. package/src/createTooltip.svelte.ts +144 -144
  158. package/src/createTree.svelte.ts +319 -319
  159. package/src/editing.test.ts +859 -859
  160. package/src/editing.ts +675 -675
  161. package/src/editor-contract.ts +157 -157
  162. package/src/export-data-api.test.ts +126 -126
  163. package/src/export-format.test.ts +107 -107
  164. package/src/export-format.ts +598 -598
  165. package/src/filter-operators.ts +157 -157
  166. package/src/flex-render.ts +3 -3
  167. package/src/form-field.ts +127 -127
  168. package/src/index.ts +713 -712
  169. package/src/js-scroller.svelte.ts +173 -173
  170. package/src/keyboard.test.ts +59 -59
  171. package/src/keyboard.ts +97 -97
  172. package/src/list-nav.test.ts +49 -49
  173. package/src/list-nav.ts +29 -29
  174. package/src/list-option.test.ts +56 -56
  175. package/src/list-option.ts +172 -172
  176. package/src/menus.test.ts +700 -700
  177. package/src/menus.ts +652 -652
  178. package/src/merge-objects.ts +48 -48
  179. package/src/overlays.test.ts +90 -90
  180. package/src/render-component.ts +28 -28
  181. package/src/scheduler-model.test.ts +562 -562
  182. package/src/scheduler-model.ts +872 -872
  183. package/src/selection.test.ts +754 -754
  184. package/src/selection.ts +600 -600
  185. package/src/server-data-source.test.ts +289 -289
  186. package/src/server-data-source.ts +413 -413
  187. package/src/sparkline.test.ts +68 -68
  188. package/src/sparkline.ts +169 -169
  189. package/src/spreadsheet.test.ts +489 -489
  190. package/src/spreadsheet.ts +312 -312
  191. package/src/static-functions.ts +11 -11
  192. package/src/subscribe.ts +38 -38
  193. package/src/svgrid-wrapper.types.ts +524 -524
  194. package/src/svgrid.behavior.test.ts +706 -706
  195. package/src/svgrid.charting.test.ts +534 -534
  196. package/src/svgrid.features.test.ts +157 -157
  197. package/src/svgrid.filter-menu-scroll.test.ts +102 -0
  198. package/src/svgrid.new-features.wrapper.test.ts +251 -251
  199. package/src/svgrid.wrapper.test.ts +40 -40
  200. package/src/test-setup.ts +62 -62
  201. package/src/themes/index.ts +215 -215
  202. package/src/toast-store.svelte.ts +246 -246
  203. package/src/toast-store.test.ts +147 -147
  204. package/src/ui-buttons.test.ts +144 -144
  205. package/src/ui-inputs.test.ts +118 -118
  206. package/src/ui-range.test.ts +70 -70
  207. package/src/ui-selection.test.ts +155 -155
  208. package/src/ui-tier1.test.ts +142 -142
  209. package/src/virtual.test.ts +88 -88
  210. package/src/virtualization/column-virtualizer.test.ts +27 -27
  211. package/src/virtualization/column-virtualizer.ts +30 -30
  212. package/src/virtualization/svelte-virtualizer.svelte.ts +26 -26
  213. package/src/virtualization/types.ts +30 -30
  214. package/src/virtualization/virtualizer.test.ts +47 -47
  215. package/src/virtualization/virtualizer.ts +296 -296
  216. package/themes/ember.css +71 -71
  217. package/dist/cdn/GridMenus-GfCAHgkZ.js +0 -420
  218. package/dist/cdn/GridMenus-GiVNSeDU.js +0 -416
@@ -1,754 +1,754 @@
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', () => {
390
- const ctx = makeCtx({ isDraggingSelection: true })
391
- const sel = createSelection(ctx)
392
- 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()
401
- })
402
-
403
- it('onWindowPointerMove delegates to fill move when fill active', () => {
404
- const ctx = makeCtx({ fillDrag: { x: 1 } })
405
- const sel = createSelection(ctx)
406
- const ev = { buttons: 1 } as any
407
- 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()
416
- })
417
-
418
- it('onWindowPointerMove ends the drag when no buttons held', () => {
419
- const ctx = makeCtx({ fillDrag: null, isDraggingSelection: true })
420
- const sel = createSelection(ctx)
421
- 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
- })
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', () => {
390
+ const ctx = makeCtx({ isDraggingSelection: true })
391
+ const sel = createSelection(ctx)
392
+ 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()
401
+ })
402
+
403
+ it('onWindowPointerMove delegates to fill move when fill active', () => {
404
+ const ctx = makeCtx({ fillDrag: { x: 1 } })
405
+ const sel = createSelection(ctx)
406
+ const ev = { buttons: 1 } as any
407
+ 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()
416
+ })
417
+
418
+ it('onWindowPointerMove ends the drag when no buttons held', () => {
419
+ const ctx = makeCtx({ fillDrag: null, isDraggingSelection: true })
420
+ const sel = createSelection(ctx)
421
+ 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
+ })