@svgrid/grid 2.1.22 → 2.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (295) hide show
  1. package/README.md +9 -2
  2. package/dist/DockNodeView.svelte +306 -0
  3. package/dist/DockNodeView.svelte.d.ts +7 -0
  4. package/dist/DockPopoutHost.svelte +17 -0
  5. package/dist/DockPopoutHost.svelte.d.ts +14 -0
  6. package/dist/FlexRender.svelte +96 -96
  7. package/dist/GridFooter.svelte +178 -178
  8. package/dist/GridMenus.svelte +83 -3
  9. package/dist/SvAutoComplete.svelte +5 -3
  10. package/dist/SvCarousel.svelte +141 -163
  11. package/dist/SvColorInput.svelte +187 -186
  12. package/dist/SvColorInput.svelte.d.ts +1 -1
  13. package/dist/SvComboBox.svelte +7 -3
  14. package/dist/SvCommand.svelte +28 -85
  15. package/dist/SvContextMenu.svelte +116 -116
  16. package/dist/SvCountryInput.svelte +1 -1
  17. package/dist/SvDateRangeInput.svelte +1 -1
  18. package/dist/SvDateTimePicker.svelte +9 -3
  19. package/dist/SvDateTimePicker.svelte.d.ts +3 -0
  20. package/dist/SvDockLayout.svelte +244 -0
  21. package/dist/SvDockLayout.svelte.d.ts +77 -0
  22. package/dist/SvDockManager.svelte +922 -0
  23. package/dist/SvDockManager.svelte.d.ts +106 -0
  24. package/dist/SvDrawer.svelte +250 -228
  25. package/dist/SvDrawer.svelte.d.ts +4 -0
  26. package/dist/SvDropDownList.svelte +85 -13
  27. package/dist/SvDropDownList.svelte.d.ts +3 -0
  28. package/dist/SvField.svelte +21 -4
  29. package/dist/SvField.svelte.d.ts +1 -0
  30. package/dist/SvForm.svelte +201 -91
  31. package/dist/SvForm.svelte.d.ts +15 -22
  32. package/dist/SvGrid.controller.svelte.d.ts +32 -1
  33. package/dist/SvGrid.controller.svelte.js +156 -27
  34. package/dist/SvGrid.css +193 -5
  35. package/dist/SvGrid.svelte +3131 -2786
  36. package/dist/SvGrid.types.d.ts +452 -1
  37. package/dist/SvGridBoard.svelte +2339 -2339
  38. package/dist/SvGridChart.svelte +1724 -1724
  39. package/dist/SvGridChartPanel.svelte +485 -485
  40. package/dist/SvGridDropdown.svelte +689 -682
  41. package/dist/SvGridSelect.svelte +1 -0
  42. package/dist/SvGroupCell.svelte +109 -109
  43. package/dist/SvListBox.svelte +36 -14
  44. package/dist/SvMaskedInput.svelte +4 -3
  45. package/dist/SvMaskedInput.svelte.d.ts +1 -1
  46. package/dist/SvMenu.svelte +124 -124
  47. package/dist/SvMenuList.svelte +117 -165
  48. package/dist/SvMenuList.svelte.d.ts +2 -13
  49. package/dist/SvModal.svelte +12 -29
  50. package/dist/SvMultiSelect.svelte +1 -0
  51. package/dist/SvNumberInput.svelte +131 -130
  52. package/dist/SvNumberInput.svelte.d.ts +1 -1
  53. package/dist/SvOtpInput.svelte +158 -158
  54. package/dist/SvPagination.svelte +18 -18
  55. package/dist/SvPasswordInput.svelte +3 -2
  56. package/dist/SvPasswordInput.svelte.d.ts +1 -1
  57. package/dist/SvPhoneInput.svelte +3 -2
  58. package/dist/SvPhoneInput.svelte.d.ts +1 -1
  59. package/dist/SvPopover.svelte +139 -139
  60. package/dist/SvRowGroupPanel.svelte +170 -170
  61. package/dist/SvScrollArea.svelte +61 -61
  62. package/dist/SvStepper.svelte +6 -9
  63. package/dist/SvTagsInput.svelte +3 -2
  64. package/dist/SvTagsInput.svelte.d.ts +1 -1
  65. package/dist/SvTooltip.svelte +127 -138
  66. package/dist/SvTour.svelte +204 -176
  67. package/dist/SvTree.svelte +377 -377
  68. package/dist/SvTreeSelect.svelte +230 -229
  69. package/dist/build-api.js +76 -54
  70. package/dist/cdn/svgrid.js +10913 -6450
  71. package/dist/cdn/svgrid.svelte-external.js +9628 -5481
  72. package/dist/chart-export.js +8 -8
  73. package/dist/columns.js +6 -0
  74. package/dist/conditional-formatting.d.ts +67 -3
  75. package/dist/conditional-formatting.js +124 -17
  76. package/dist/createCarousel.svelte.d.ts +72 -0
  77. package/dist/createCarousel.svelte.js +80 -0
  78. package/dist/createCommand.svelte.d.ts +62 -0
  79. package/dist/createCommand.svelte.js +109 -0
  80. package/dist/createForm.svelte.d.ts +62 -0
  81. package/dist/createForm.svelte.js +374 -0
  82. package/dist/createMenu.svelte.d.ts +88 -0
  83. package/dist/createMenu.svelte.js +153 -0
  84. package/dist/createOverlay.svelte.d.ts +38 -0
  85. package/dist/createOverlay.svelte.js +68 -0
  86. package/dist/createPagination.d.ts +74 -0
  87. package/dist/createPagination.js +71 -0
  88. package/dist/createPopoverSelect.svelte.js +6 -12
  89. package/dist/createStepper.d.ts +44 -0
  90. package/dist/createStepper.js +26 -0
  91. package/dist/createTooltip.svelte.d.ts +32 -0
  92. package/dist/createTooltip.svelte.js +61 -0
  93. package/dist/datetime/timezone.d.ts +36 -0
  94. package/dist/datetime/timezone.js +110 -0
  95. package/dist/dock-context.d.ts +52 -0
  96. package/dist/dock-context.js +1 -0
  97. package/dist/dock-manager-model.d.ts +136 -0
  98. package/dist/dock-manager-model.js +514 -0
  99. package/dist/dock-model.d.ts +105 -0
  100. package/dist/dock-model.js +288 -0
  101. package/dist/dock-popout.d.ts +30 -0
  102. package/dist/dock-popout.js +81 -0
  103. package/dist/editor-contract.d.ts +2 -0
  104. package/dist/filter-operators.d.ts +6 -0
  105. package/dist/filter-operators.js +35 -2
  106. package/dist/filtering/excel-filters.d.ts +18 -1
  107. package/dist/filtering/excel-filters.js +56 -0
  108. package/dist/form-field.d.ts +73 -0
  109. package/dist/form-field.js +15 -0
  110. package/dist/index.d.ts +25 -5
  111. package/dist/index.js +40 -4
  112. package/dist/list-nav.d.ts +18 -0
  113. package/dist/list-nav.js +30 -0
  114. package/dist/list-option.d.ts +2 -0
  115. package/dist/menu-item.d.ts +20 -0
  116. package/dist/menu-item.js +1 -0
  117. package/dist/menus.d.ts +5 -0
  118. package/dist/menus.js +68 -16
  119. package/dist/panel-resize.d.ts +25 -0
  120. package/dist/panel-resize.js +40 -0
  121. package/dist/popover.d.ts +29 -3
  122. package/dist/popover.js +22 -6
  123. package/dist/recurrence.d.ts +33 -7
  124. package/dist/recurrence.js +151 -13
  125. package/dist/row-drag.d.ts +8 -0
  126. package/dist/row-drag.js +11 -0
  127. package/dist/scheduler-ical.d.ts +30 -0
  128. package/dist/scheduler-ical.js +180 -0
  129. package/dist/scheduler-model.d.ts +269 -0
  130. package/dist/scheduler-model.js +602 -0
  131. package/dist/scheduler-view.svelte.d.ts +22 -0
  132. package/dist/scheduler-view.svelte.js +13 -0
  133. package/dist/spreadsheet.js +20 -12
  134. package/dist/ui-app.types.d.ts +3 -0
  135. package/package.json +14 -10
  136. package/src/DockNodeView.svelte +306 -0
  137. package/src/DockPopoutHost.svelte +17 -0
  138. package/src/FlexRender.svelte +96 -96
  139. package/src/GridFooter.svelte +178 -178
  140. package/src/GridMenus.svelte +83 -3
  141. package/src/SvAutoComplete.svelte +5 -3
  142. package/src/SvCarousel.svelte +141 -163
  143. package/src/SvCarousel.test.ts +68 -0
  144. package/src/SvColorInput.svelte +187 -186
  145. package/src/SvComboBox.svelte +7 -3
  146. package/src/SvCommand.svelte +28 -85
  147. package/src/SvCommand.test.ts +78 -0
  148. package/src/SvContextMenu.svelte +116 -116
  149. package/src/SvCountryInput.svelte +1 -1
  150. package/src/SvDateRangeInput.svelte +1 -1
  151. package/src/SvDateTimePicker.svelte +9 -3
  152. package/src/SvDockLayout.svelte +244 -0
  153. package/src/SvDockManager.svelte +922 -0
  154. package/src/SvDrawer.svelte +250 -228
  155. package/src/SvDropDownList.svelte +85 -13
  156. package/src/SvField.svelte +21 -4
  157. package/src/SvForm.svelte +201 -91
  158. package/src/SvForm.test.ts +299 -0
  159. package/src/SvGrid.controller.svelte.ts +3158 -3034
  160. package/src/SvGrid.css +193 -5
  161. package/src/SvGrid.svelte +3131 -2786
  162. package/src/SvGrid.types.ts +1489 -1027
  163. package/src/SvGridBoard.svelte +2339 -2339
  164. package/src/SvGridChart.svelte +1724 -1724
  165. package/src/SvGridChartPanel.svelte +485 -485
  166. package/src/SvGridDropdown.svelte +689 -682
  167. package/src/SvGridSelect.svelte +1 -0
  168. package/src/SvGroupCell.svelte +109 -109
  169. package/src/SvListBox.svelte +36 -14
  170. package/src/SvMaskedInput.svelte +4 -3
  171. package/src/SvMenu.svelte +124 -124
  172. package/src/SvMenu.test.ts +97 -73
  173. package/src/SvMenuList.svelte +117 -165
  174. package/src/SvModal.svelte +12 -29
  175. package/src/SvModal.test.ts +82 -0
  176. package/src/SvMultiSelect.svelte +1 -0
  177. package/src/SvNumberInput.svelte +131 -130
  178. package/src/SvOtpInput.svelte +158 -158
  179. package/src/SvPagination.svelte +18 -18
  180. package/src/SvPasswordInput.svelte +3 -2
  181. package/src/SvPhoneInput.svelte +3 -2
  182. package/src/SvPopover.svelte +139 -139
  183. package/src/SvRowGroupPanel.svelte +170 -170
  184. package/src/SvScrollArea.svelte +61 -61
  185. package/src/SvStepper.svelte +6 -9
  186. package/src/SvTagsInput.svelte +3 -2
  187. package/src/SvTooltip.svelte +127 -138
  188. package/src/SvTooltip.test.ts +73 -0
  189. package/src/SvTour.svelte +204 -176
  190. package/src/SvTree.svelte +377 -377
  191. package/src/SvTreeSelect.svelte +230 -229
  192. package/src/a11y.contract.test.ts +49 -49
  193. package/src/a11y.test.ts +59 -59
  194. package/src/a11y.ts +61 -61
  195. package/src/build-api.ts +870 -847
  196. package/src/cell-formatting.ts +169 -169
  197. package/src/cell-render.ts +469 -469
  198. package/src/chart-export.ts +201 -201
  199. package/src/chart.ts +2296 -2296
  200. package/src/collaboration.test.ts +104 -104
  201. package/src/collaboration.ts +167 -167
  202. package/src/columns.ts +5 -0
  203. package/src/conditional-formatting.test.ts +104 -0
  204. package/src/conditional-formatting.ts +176 -19
  205. package/src/core.performance.test.ts +30 -30
  206. package/src/core.ts +1111 -1111
  207. package/src/createAutocomplete.svelte.ts +132 -132
  208. package/src/createCarousel.svelte.ts +104 -0
  209. package/src/createCombobox.svelte.ts +179 -179
  210. package/src/createCommand.svelte.ts +125 -0
  211. package/src/createCountryInput.svelte.ts +157 -157
  212. package/src/createDropdownList.svelte.ts +162 -162
  213. package/src/createForm.svelte.ts +333 -0
  214. package/src/createGrid.svelte.ts +42 -42
  215. package/src/createGrid.test.ts +10 -10
  216. package/src/createGridState.svelte.ts +17 -17
  217. package/src/createMenu.svelte.ts +202 -0
  218. package/src/createOverlay.svelte.ts +101 -0
  219. package/src/createPagination.test.ts +65 -0
  220. package/src/createPagination.ts +84 -0
  221. package/src/createPopoverSelect.svelte.ts +206 -210
  222. package/src/createStepper.test.ts +62 -0
  223. package/src/createStepper.ts +61 -0
  224. package/src/createTooltip.svelte.ts +86 -0
  225. package/src/createTree.svelte.ts +319 -319
  226. package/src/datetime/timezone.test.ts +69 -0
  227. package/src/datetime/timezone.ts +134 -0
  228. package/src/dock-context.ts +47 -0
  229. package/src/dock-manager-model.test.ts +275 -0
  230. package/src/dock-manager-model.ts +593 -0
  231. package/src/dock-model.test.ts +163 -0
  232. package/src/dock-model.ts +368 -0
  233. package/src/dock-popout.ts +94 -0
  234. package/src/editing.test.ts +859 -859
  235. package/src/editing.ts +675 -675
  236. package/src/editor-contract.ts +2 -0
  237. package/src/export-data-api.test.ts +126 -126
  238. package/src/export-format.test.ts +107 -107
  239. package/src/export-format.ts +598 -598
  240. package/src/filter-operators.test.ts +59 -0
  241. package/src/filter-operators.ts +35 -2
  242. package/src/filtering/excel-filters.test.ts +86 -1
  243. package/src/filtering/excel-filters.ts +65 -0
  244. package/src/flex-render.ts +3 -3
  245. package/src/form-field.ts +87 -0
  246. package/src/index.ts +623 -469
  247. package/src/keyboard.test.ts +59 -59
  248. package/src/keyboard.ts +97 -97
  249. package/src/list-nav.test.ts +49 -0
  250. package/src/list-nav.ts +29 -0
  251. package/src/list-option.ts +2 -0
  252. package/src/menu-item.ts +21 -0
  253. package/src/menus.test.ts +48 -0
  254. package/src/menus.ts +639 -582
  255. package/src/merge-objects.ts +48 -48
  256. package/src/overlays.test.ts +90 -90
  257. package/src/panel-resize.ts +52 -0
  258. package/src/popover.bounds.test.ts +93 -0
  259. package/src/popover.ts +51 -7
  260. package/src/recurrence.test.ts +88 -1
  261. package/src/recurrence.ts +166 -15
  262. package/src/render-component.ts +28 -28
  263. package/src/row-drag.ts +10 -0
  264. package/src/scheduler-ical.test.ts +68 -0
  265. package/src/scheduler-ical.ts +180 -0
  266. package/src/scheduler-model.test.ts +546 -0
  267. package/src/scheduler-model.ts +853 -0
  268. package/src/scheduler-view.svelte.ts +33 -0
  269. package/src/selection.test.ts +754 -754
  270. package/src/selection.ts +600 -600
  271. package/src/server-data-source.test.ts +289 -289
  272. package/src/server-data-source.ts +413 -413
  273. package/src/sparkline.test.ts +68 -68
  274. package/src/sparkline.ts +169 -169
  275. package/src/spreadsheet.test.ts +489 -489
  276. package/src/spreadsheet.ts +312 -304
  277. package/src/static-functions.ts +11 -11
  278. package/src/subscribe.ts +38 -38
  279. package/src/svgrid-wrapper.types.ts +501 -501
  280. package/src/svgrid.behavior.test.ts +706 -706
  281. package/src/svgrid.charting.test.ts +527 -527
  282. package/src/svgrid.effect-driven-filter.svelte.test.ts +116 -0
  283. package/src/svgrid.features.test.ts +157 -157
  284. package/src/svgrid.new-features.wrapper.test.ts +251 -251
  285. package/src/svgrid.wrapper.test.ts +40 -40
  286. package/src/test-setup.ts +62 -62
  287. package/src/themes/index.ts +159 -159
  288. package/src/ui-app.types.ts +3 -0
  289. package/src/virtual.test.ts +6 -4
  290. package/src/virtualization/column-virtualizer.test.ts +27 -27
  291. package/src/virtualization/column-virtualizer.ts +30 -30
  292. package/src/virtualization/svelte-virtualizer.svelte.ts +26 -26
  293. package/src/virtualization/types.ts +30 -30
  294. package/src/virtualization/virtualizer.test.ts +47 -47
  295. package/src/virtualization/virtualizer.ts +296 -296
@@ -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
+ })