@svgrid/grid 2.2.27 → 2.2.28

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