@svgrid/grid 2.2.27 → 2.2.29

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