@svgrid/grid 2.6.23 → 3.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (263) hide show
  1. package/CHANGELOG.md +88 -88
  2. package/README.md +199 -199
  3. package/dist/FlexRender.svelte +96 -96
  4. package/dist/GridFooter.svelte +181 -181
  5. package/dist/SvAutoComplete.svelte +169 -169
  6. package/dist/SvAvatar.svelte +75 -75
  7. package/dist/SvCalendar.svelte +503 -503
  8. package/dist/SvCarousel.svelte +141 -141
  9. package/dist/SvCheckBox.svelte +102 -102
  10. package/dist/SvCircularProgress.svelte +109 -109
  11. package/dist/SvColorInput.svelte +181 -181
  12. package/dist/SvComboBox.svelte +279 -279
  13. package/dist/SvContextMenu.svelte +116 -116
  14. package/dist/SvCountryInput.svelte +163 -163
  15. package/dist/SvDrawer.svelte +254 -254
  16. package/dist/SvDropDownList.svelte +378 -378
  17. package/dist/SvDurationInput.svelte +126 -126
  18. package/dist/SvField.svelte +293 -293
  19. package/dist/SvForm.svelte +437 -437
  20. package/dist/SvGridCellEditor.svelte +744 -744
  21. package/dist/SvGridChart.svelte +1716 -1716
  22. package/dist/SvGridChartPanel.svelte +485 -485
  23. package/dist/SvGridChartView.svelte +70 -70
  24. package/dist/SvGridDropdown.svelte +728 -728
  25. package/dist/SvGridSelect.svelte +270 -270
  26. package/dist/SvGroupCell.svelte +116 -116
  27. package/dist/SvListBox.svelte +334 -334
  28. package/dist/SvMaskedInput.svelte +122 -122
  29. package/dist/SvMenu.svelte +124 -124
  30. package/dist/SvMenuList.svelte +146 -146
  31. package/dist/SvMultiSelect.svelte +293 -293
  32. package/dist/SvNumberInput.svelte +172 -172
  33. package/dist/SvOtpInput.svelte +158 -158
  34. package/dist/SvPasswordInput.svelte +151 -151
  35. package/dist/SvPhoneInput.svelte +133 -133
  36. package/dist/SvPopover.svelte +197 -197
  37. package/dist/SvProgress.svelte +116 -116
  38. package/dist/SvRadioGroup.svelte +107 -107
  39. package/dist/SvRating.svelte +112 -112
  40. package/dist/SvResult.svelte +73 -73
  41. package/dist/SvRichText.svelte +211 -211
  42. package/dist/SvRowGroupPanel.svelte +170 -170
  43. package/dist/SvScrollArea.svelte +61 -61
  44. package/dist/SvSlider.svelte +203 -203
  45. package/dist/SvSwitchButton.svelte +108 -108
  46. package/dist/SvTagsInput.svelte +115 -115
  47. package/dist/SvTextInput.svelte +147 -147
  48. package/dist/SvTimePicker.svelte +245 -245
  49. package/dist/SvToaster.svelte +159 -159
  50. package/dist/SvToggleButton.svelte +85 -85
  51. package/dist/SvTooltip.svelte +161 -161
  52. package/dist/SvTour.svelte +208 -208
  53. package/dist/SvTree.svelte +444 -444
  54. package/dist/SvTreeSelect.svelte +239 -239
  55. package/dist/cdn/{GridMenus-BzWXQjv3.js → GridMenus-DMihUtma.js} +3 -3
  56. package/dist/cdn/{GridMenus-xr_rHx8F.js → GridMenus-nmNDj1a3.js} +3 -3
  57. package/dist/cdn/{SvDateRangeInput-DMLKmGEc.js → SvDateRangeInput-Bh0A0JkF.js} +1 -1
  58. package/dist/cdn/{SvDateRangeInput-CaOuMs8O.js → SvDateRangeInput-DflbiP7N.js} +1 -1
  59. package/dist/cdn/{SvDateTimePicker-sonaH0oh.js → SvDateTimePicker-BWwpfB_o.js} +1 -1
  60. package/dist/cdn/{SvDateTimePicker-CCbDZNZB.js → SvDateTimePicker-Bivn8dAP.js} +1 -1
  61. package/dist/cdn/{SvGridCellEditor-BAPSC7EL.js → SvGridCellEditor-AXL8cHGO.js} +1 -1
  62. package/dist/cdn/{SvGridCellEditor-BwzmUWtL.js → SvGridCellEditor-Ba7rY3eu.js} +1 -1
  63. package/dist/cdn/{SvGridChart-BwVos976.js → SvGridChart-Bs2GIR2Q.js} +1 -1
  64. package/dist/cdn/{SvGridChart-BEJmNNx9.js → SvGridChart-CwhFz7GV.js} +1 -1
  65. package/dist/cdn/{SvGridChartPanel-BOknOkrP.js → SvGridChartPanel-1WXuStzM.js} +1 -1
  66. package/dist/cdn/{SvGridChartPanel-D2PjII4O.js → SvGridChartPanel-e5_nqNP9.js} +1 -1
  67. package/dist/cdn/{SvGridChartView-00LPUHL1.js → SvGridChartView-SmPW10dI.js} +1 -1
  68. package/dist/cdn/{SvGridChartView-BhUEJ5ki.js → SvGridChartView-eSPuJE6g.js} +1 -1
  69. package/dist/cdn/{SvGridDropdown-D0VdjeR8.js → SvGridDropdown-B1ZcLpgs.js} +1 -1
  70. package/dist/cdn/{SvGridDropdown-D13MtJ2j.js → SvGridDropdown-CtdbHcIS.js} +1 -1
  71. package/dist/cdn/{date-format-BnnHlqGw.js → date-format-CcP1tafP.js} +2 -2
  72. package/dist/cdn/{date-format-BNii4zeD.js → date-format-DZT7T1wf.js} +2 -2
  73. package/dist/cdn/{row-drag-touch-Ddaa-QeB.js → row-drag-touch-CycRR65n.js} +12 -10
  74. package/dist/cdn/{src-skQN5eqh.js → src-B_YS5AOc.js} +45 -45
  75. package/dist/cdn/{src-DGo7IHug.js → src-DYXXpuSk.js} +44 -44
  76. package/dist/cdn/svgrid.js +7 -7
  77. package/dist/cdn/svgrid.svelte-external.js +7 -7
  78. package/dist/chart-export.js +8 -8
  79. package/dist/row-drag-touch.d.ts +5 -1
  80. package/dist/row-drag-touch.js +15 -4
  81. package/dist/row-drag.js +7 -3
  82. package/package.json +11 -11
  83. package/src/FlexRender.svelte +96 -96
  84. package/src/GridFooter.svelte +181 -181
  85. package/src/SvAutoComplete.svelte +169 -169
  86. package/src/SvAvatar.svelte +75 -75
  87. package/src/SvCalendar.svelte +503 -503
  88. package/src/SvCalendar.test.ts +226 -226
  89. package/src/SvCarousel.svelte +141 -141
  90. package/src/SvCheckBox.svelte +102 -102
  91. package/src/SvCircularProgress.svelte +109 -109
  92. package/src/SvColorInput.svelte +181 -181
  93. package/src/SvComboBox.svelte +279 -279
  94. package/src/SvContextMenu.svelte +116 -116
  95. package/src/SvCountryInput.svelte +163 -163
  96. package/src/SvDrawer.svelte +254 -254
  97. package/src/SvDropDownList.svelte +378 -378
  98. package/src/SvDurationInput.svelte +126 -126
  99. package/src/SvField.svelte +293 -293
  100. package/src/SvForm.svelte +437 -437
  101. package/src/SvForm.test.ts +411 -411
  102. package/src/SvGrid.types.ts +2092 -2092
  103. package/src/SvGridCellEditor.svelte +744 -744
  104. package/src/SvGridChart.svelte +1716 -1716
  105. package/src/SvGridChartPanel.svelte +485 -485
  106. package/src/SvGridChartView.svelte +70 -70
  107. package/src/SvGridDropdown.svelte +728 -728
  108. package/src/SvGridSelect.svelte +270 -270
  109. package/src/SvGroupCell.svelte +116 -116
  110. package/src/SvListBox.svelte +334 -334
  111. package/src/SvMaskedInput.svelte +122 -122
  112. package/src/SvMenu.svelte +124 -124
  113. package/src/SvMenu.test.ts +97 -97
  114. package/src/SvMenuList.svelte +146 -146
  115. package/src/SvMultiSelect.svelte +293 -293
  116. package/src/SvNumberInput.svelte +172 -172
  117. package/src/SvOtpInput.svelte +158 -158
  118. package/src/SvPasswordInput.svelte +151 -151
  119. package/src/SvPhoneInput.svelte +133 -133
  120. package/src/SvPopover.svelte +197 -197
  121. package/src/SvProgress.svelte +116 -116
  122. package/src/SvRadioGroup.svelte +107 -107
  123. package/src/SvRating.svelte +112 -112
  124. package/src/SvResult.svelte +73 -73
  125. package/src/SvRichText.svelte +211 -211
  126. package/src/SvRowGroupPanel.svelte +170 -170
  127. package/src/SvScrollArea.svelte +61 -61
  128. package/src/SvSlider.svelte +203 -203
  129. package/src/SvSwitchButton.svelte +108 -108
  130. package/src/SvTagsInput.svelte +115 -115
  131. package/src/SvTextInput.svelte +147 -147
  132. package/src/SvTimePicker.svelte +245 -245
  133. package/src/SvToaster.svelte +159 -159
  134. package/src/SvToaster.test.ts +95 -95
  135. package/src/SvToggleButton.svelte +85 -85
  136. package/src/SvTooltip.svelte +161 -161
  137. package/src/SvTour.svelte +208 -208
  138. package/src/SvTree.svelte +444 -444
  139. package/src/SvTreeSelect.svelte +239 -239
  140. package/src/a11y/dismissable.test.ts +119 -119
  141. package/src/a11y/dismissable.ts +114 -114
  142. package/src/a11y.contract.test.ts +49 -49
  143. package/src/a11y.test.ts +59 -59
  144. package/src/a11y.ts +61 -61
  145. package/src/ai.test.ts +502 -502
  146. package/src/ai.ts +1419 -1419
  147. package/src/build-api.coverage.test.ts +633 -633
  148. package/src/build-api.ts +846 -846
  149. package/src/builtin-editors.grid.test.ts +83 -83
  150. package/src/cell-formatting.ts +171 -171
  151. package/src/cell-render.test.ts +513 -513
  152. package/src/cell-render.ts +496 -496
  153. package/src/cell-values.ts +148 -148
  154. package/src/chart-export.ts +202 -202
  155. package/src/chart-view.svelte.ts +36 -36
  156. package/src/chart.ts +2321 -2321
  157. package/src/collaboration.test.ts +104 -104
  158. package/src/collaboration.ts +167 -167
  159. package/src/column-groups.ts +78 -78
  160. package/src/core.performance.test.ts +30 -30
  161. package/src/core.ts +1865 -1865
  162. package/src/createAutocomplete.svelte.ts +132 -132
  163. package/src/createCombobox.svelte.ts +191 -191
  164. package/src/createCountryInput.svelte.ts +157 -157
  165. package/src/createDropdownList.svelte.ts +168 -168
  166. package/src/createForm.svelte.ts +386 -386
  167. package/src/createGrid.svelte.ts +42 -42
  168. package/src/createGrid.test.ts +10 -10
  169. package/src/createGridState.svelte.ts +17 -17
  170. package/src/createListbox.svelte.ts +250 -250
  171. package/src/createMenu.svelte.ts +224 -224
  172. package/src/createPopoverSelect.svelte.ts +213 -213
  173. package/src/createSlider.svelte.ts +191 -191
  174. package/src/createTooltip.svelte.ts +144 -144
  175. package/src/createTree.svelte.ts +322 -322
  176. package/src/datetime/date-core.ts +206 -206
  177. package/src/datetime/date-restrict.ts +61 -61
  178. package/src/datetime/timezone.ts +135 -135
  179. package/src/dock-manager-model.ts +596 -596
  180. package/src/dock-model.ts +374 -374
  181. package/src/editing.test.ts +974 -974
  182. package/src/editing.ts +609 -609
  183. package/src/editor-contract.ts +171 -171
  184. package/src/editor-registry.grid.test.ts +144 -144
  185. package/src/editor-registry.ts +122 -122
  186. package/src/export-data-api.test.ts +126 -126
  187. package/src/export-format.test.ts +107 -107
  188. package/src/export-format.ts +601 -601
  189. package/src/filter-operators.ts +160 -160
  190. package/src/filtering/excel-filters.ts +325 -325
  191. package/src/flex-render.ts +3 -3
  192. package/src/form-field.ts +127 -127
  193. package/src/group-display.test.ts +167 -167
  194. package/src/group-display.ts +200 -200
  195. package/src/headless.ts +87 -87
  196. package/src/js-scroller.svelte.ts +173 -173
  197. package/src/keyboard-handlers.ts +270 -270
  198. package/src/keyboard.test.ts +59 -59
  199. package/src/keyboard.ts +97 -97
  200. package/src/list-nav.test.ts +49 -49
  201. package/src/list-nav.ts +29 -29
  202. package/src/list-option.test.ts +56 -56
  203. package/src/list-option.ts +179 -179
  204. package/src/menus.ts +597 -597
  205. package/src/merge-objects.ts +48 -48
  206. package/src/overlays.test.ts +90 -90
  207. package/src/positioning.ts +268 -268
  208. package/src/render-component.ts +28 -28
  209. package/src/row-drag-touch.ts +20 -5
  210. package/src/row-drag.test.ts +401 -353
  211. package/src/row-drag.ts +419 -415
  212. package/src/row-resize.test.ts +524 -524
  213. package/src/row-resize.ts +228 -228
  214. package/src/scheduler-ical.ts +181 -181
  215. package/src/scheduler-model.test.ts +562 -562
  216. package/src/scheduler-model.ts +873 -873
  217. package/src/selection.test.ts +885 -885
  218. package/src/server-data-source.test.ts +383 -383
  219. package/src/server-data-source.ts +469 -469
  220. package/src/sparkline.test.ts +68 -68
  221. package/src/sparkline.ts +169 -169
  222. package/src/spreadsheet.test.ts +488 -488
  223. package/src/spreadsheet.ts +312 -312
  224. package/src/static-functions.ts +11 -11
  225. package/src/subscribe.ts +38 -38
  226. package/src/summaries.ts +113 -113
  227. package/src/svgrid-wrapper.types.ts +563 -563
  228. package/src/svgrid.async-editor-options.test.ts +273 -273
  229. package/src/svgrid.auto-row-height.test.ts +204 -204
  230. package/src/svgrid.behavior.test.ts +910 -910
  231. package/src/svgrid.charting.test.ts +534 -534
  232. package/src/svgrid.comments-autocomplete.test.ts +127 -127
  233. package/src/svgrid.context-menu.test.ts +147 -147
  234. package/src/svgrid.features.test.ts +157 -157
  235. package/src/svgrid.filter-depth.test.ts +163 -163
  236. package/src/svgrid.filter-menu-listbox.svelte.test.ts +377 -377
  237. package/src/svgrid.filter-menu-scroll.test.ts +112 -112
  238. package/src/svgrid.grand-total.test.ts +188 -188
  239. package/src/svgrid.group-display-mode.test.ts +171 -171
  240. package/src/svgrid.group-footers.test.ts +121 -121
  241. package/src/svgrid.group-pagination.test.ts +153 -153
  242. package/src/svgrid.new-features.wrapper.test.ts +251 -251
  243. package/src/svgrid.tree-data.test.ts +186 -186
  244. package/src/svgrid.wrapper.test.ts +63 -63
  245. package/src/svgriddropdown.async-panel.svelte.test.ts +195 -195
  246. package/src/test-setup.ts +62 -62
  247. package/src/themes/index.ts +288 -288
  248. package/src/toast-store.svelte.ts +250 -250
  249. package/src/toast-store.test.ts +147 -147
  250. package/src/tree-row-model.test.ts +168 -168
  251. package/src/ui-buttons.test.ts +144 -144
  252. package/src/ui-inputs.test.ts +118 -118
  253. package/src/ui-localization.test.ts +113 -113
  254. package/src/ui-range.test.ts +70 -70
  255. package/src/ui-selection.test.ts +155 -155
  256. package/src/ui-tier1.test.ts +142 -142
  257. package/src/virtual.test.ts +88 -88
  258. package/src/virtualization/column-virtualizer.test.ts +27 -27
  259. package/src/virtualization/column-virtualizer.ts +30 -30
  260. package/src/virtualization/svelte-virtualizer.svelte.ts +26 -26
  261. package/src/virtualization/types.ts +30 -30
  262. package/src/virtualization/virtualizer.test.ts +47 -47
  263. package/src/virtualization/virtualizer.ts +322 -322
@@ -1,524 +1,524 @@
1
- import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
2
- import { rowResize } from './row-resize'
3
-
4
- const STRIP_CLASS = 'sv-grid-row-resize-handle'
5
-
6
- // ---------------------------------------------------------------------------
7
- // Helpers
8
- // ---------------------------------------------------------------------------
9
-
10
- /** Build a host `<table>` with `rows` body rows. Each row carries the
11
- * `tr.sv-grid-row` class + a `.sv-row-gutter` cell holding a
12
- * `data-svgrid-row` marker, matching what SvGrid renders. Extra classes
13
- * let individual tests opt rows out (header / spacer / no-gutter). */
14
- function buildGrid(
15
- specs: Array<{ rowClasses?: string[]; gutter?: boolean; rowIndex?: number }>,
16
- ): { host: HTMLElement; rows: HTMLTableRowElement[] } {
17
- const host = document.createElement('div')
18
- const table = document.createElement('table')
19
- const tbody = document.createElement('tbody')
20
- const rows: HTMLTableRowElement[] = []
21
- specs.forEach((spec, i) => {
22
- const tr = document.createElement('tr')
23
- tr.className = ['sv-grid-row', ...(spec.rowClasses ?? [])].join(' ')
24
- const cell = document.createElement('td')
25
- cell.className = 'sv-grid-cell'
26
- if (spec.gutter !== false) cell.classList.add('sv-row-gutter')
27
- const marker = document.createElement('span')
28
- marker.setAttribute('data-svgrid-row', String(spec.rowIndex ?? i))
29
- cell.appendChild(marker)
30
- tr.appendChild(cell)
31
- tbody.appendChild(tr)
32
- rows.push(tr)
33
- })
34
- table.appendChild(tbody)
35
- host.appendChild(table)
36
- document.body.appendChild(host)
37
- return { host, rows }
38
- }
39
-
40
- function gutterOf(tr: HTMLTableRowElement): HTMLTableCellElement {
41
- return tr.querySelector<HTMLTableCellElement>('.sv-row-gutter')!
42
- }
43
- function stripOf(tr: HTMLTableRowElement): HTMLElement | null {
44
- return tr.querySelector<HTMLElement>(`.${STRIP_CLASS}`)
45
- }
46
-
47
- /** Mock getBoundingClientRect so a TR reports a real height in jsdom
48
- * (which otherwise returns all-zero rects). */
49
- function mockRowHeight(tr: HTMLTableRowElement, height: number): void {
50
- tr.getBoundingClientRect = () =>
51
- ({ height, width: 100, top: 0, left: 0, right: 100, bottom: height, x: 0, y: 0, toJSON() {} }) as DOMRect
52
- }
53
-
54
- function pointer(type: string, init: Partial<PointerEvent> = {}): PointerEvent {
55
- return new PointerEvent(type, { bubbles: true, cancelable: true, pointerId: 1, ...init } as PointerEventInit)
56
- }
57
-
58
- const hosts: HTMLElement[] = []
59
- function track(host: HTMLElement): HTMLElement {
60
- hosts.push(host)
61
- return host
62
- }
63
-
64
- beforeEach(() => {
65
- // jsdom lacks pointer-capture methods on elements; stub them so the action's
66
- // try/catch wrapped calls have something to invoke.
67
- if (!HTMLElement.prototype.setPointerCapture) {
68
- HTMLElement.prototype.setPointerCapture = function () {}
69
- }
70
- if (!HTMLElement.prototype.releasePointerCapture) {
71
- HTMLElement.prototype.releasePointerCapture = function () {}
72
- }
73
- })
74
-
75
- afterEach(() => {
76
- while (hosts.length) hosts.pop()!.remove()
77
- document.body.innerHTML = ''
78
- document.body.style.cursor = ''
79
- })
80
-
81
- // ---------------------------------------------------------------------------
82
- // decorate()
83
- // ---------------------------------------------------------------------------
84
-
85
- describe('rowResize - strip injection', () => {
86
- it('injects a resize strip into every gutter cell', () => {
87
- const { host, rows } = buildGrid([{}, {}, {}])
88
- track(host)
89
- const action = rowResize(host, { onResize: vi.fn() })
90
- for (const tr of rows) {
91
- const strip = stripOf(tr)
92
- expect(strip).not.toBeNull()
93
- expect(strip!.getAttribute('role')).toBe('separator')
94
- expect(strip!.getAttribute('aria-orientation')).toBe('horizontal')
95
- expect(strip!.getAttribute('aria-label')).toBe('Resize row')
96
- expect(strip!.style.cursor).toBe('row-resize')
97
- }
98
- // Gutter cells become a positioning context with visible overflow.
99
- expect(gutterOf(rows[0]!).style.position).toBe('relative')
100
- expect(gutterOf(rows[0]!).style.overflow).toBe('visible')
101
- action.destroy()
102
- })
103
-
104
- it('does not double-inject a strip on re-decorate', async () => {
105
- const { host, rows } = buildGrid([{}])
106
- track(host)
107
- const action = rowResize(host, { onResize: vi.fn() })
108
- expect(rows[0]!.querySelectorAll(`.${STRIP_CLASS}`).length).toBe(1)
109
- // Trigger the MutationObserver by appending an unrelated node.
110
- gutterOf(rows[0]!).appendChild(document.createElement('span'))
111
- await Promise.resolve()
112
- await new Promise((r) => setTimeout(r, 0))
113
- expect(rows[0]!.querySelectorAll(`.${STRIP_CLASS}`).length).toBe(1)
114
- action.destroy()
115
- })
116
-
117
- it('skips header rows, spacer rows, and rows without a gutter cell', () => {
118
- const { host, rows } = buildGrid([
119
- { rowClasses: ['sv-grid-header-row'] },
120
- { rowClasses: ['sv-grid-row-spacer'] },
121
- { gutter: false },
122
- {}, // normal row gets a strip
123
- ])
124
- track(host)
125
- const action = rowResize(host, { onResize: vi.fn() })
126
- expect(stripOf(rows[0]!)).toBeNull()
127
- expect(stripOf(rows[1]!)).toBeNull()
128
- expect(stripOf(rows[2]!)).toBeNull()
129
- expect(stripOf(rows[3]!)).not.toBeNull()
130
- action.destroy()
131
- })
132
-
133
- it("anchor 'row' falls back to the first body cell when there is no gutter", () => {
134
- // What `<SvGrid rowResize>` relies on: most grids have no row-number
135
- // column, and without the fallback the prop would be inert on them.
136
- const { host, rows } = buildGrid([{ gutter: false }, { gutter: false }])
137
- track(host)
138
- const action = rowResize(host, { onResize: vi.fn(), anchor: 'row' })
139
- expect(stripOf(rows[0]!)).not.toBeNull()
140
- expect(stripOf(rows[1]!)).not.toBeNull()
141
- // The strip hangs off the row's first cell, since that is all there is.
142
- expect(stripOf(rows[0]!)!.parentElement).toBe(rows[0]!.querySelector('.sv-grid-cell'))
143
- action.destroy()
144
- })
145
-
146
- it("anchor 'row' still prefers a real gutter when the row has one", () => {
147
- const { host, rows } = buildGrid([{ gutter: true }])
148
- track(host)
149
- const action = rowResize(host, { onResize: vi.fn(), anchor: 'row' })
150
- expect(stripOf(rows[0]!)!.parentElement).toBe(gutterOf(rows[0]!))
151
- action.destroy()
152
- })
153
-
154
- it("defaults to anchor 'gutter', leaving gutterless rows alone", () => {
155
- // The exported action's existing contract. Adding the fallback must not
156
- // start decorating rows for consumers who never asked for it.
157
- const { host, rows } = buildGrid([{ gutter: false }])
158
- track(host)
159
- const action = rowResize(host, { onResize: vi.fn() })
160
- expect(stripOf(rows[0]!)).toBeNull()
161
- action.destroy()
162
- })
163
-
164
- it('also injects a strip into the built-in row-number gutter (showRowNumbers)', () => {
165
- // The native gutter cell is `.sv-grid-cell.sv-grid-row-number-cell`, NOT
166
- // `.sv-row-gutter`; the action must recognise it so `showRowNumbers` grids
167
- // are row-resizable without a custom gutter column.
168
- const host = document.createElement('div')
169
- const table = document.createElement('table')
170
- const tbody = document.createElement('tbody')
171
- const tr = document.createElement('tr')
172
- tr.className = 'sv-grid-row'
173
- const gutter = document.createElement('td')
174
- gutter.className = 'sv-grid-cell sv-grid-row-number-cell'
175
- const marker = document.createElement('span')
176
- marker.setAttribute('data-svgrid-row', '0')
177
- gutter.appendChild(marker)
178
- tr.appendChild(gutter)
179
- tbody.appendChild(tr)
180
- table.appendChild(tbody)
181
- host.appendChild(table)
182
- document.body.appendChild(host)
183
- track(host)
184
- const action = rowResize(host, { onResize: vi.fn() })
185
- expect(tr.querySelector(`.${STRIP_CLASS}`)).not.toBeNull()
186
- action.destroy()
187
- })
188
-
189
- it('does not override an already-positioned gutter cell', () => {
190
- const { host, rows } = buildGrid([{}])
191
- track(host)
192
- gutterOf(rows[0]!).style.position = 'sticky'
193
- const action = rowResize(host, { onResize: vi.fn() })
194
- expect(gutterOf(rows[0]!).style.position).toBe('sticky')
195
- action.destroy()
196
- })
197
-
198
- it('injects no strips when created disabled', () => {
199
- const { host, rows } = buildGrid([{}, {}])
200
- track(host)
201
- const action = rowResize(host, { onResize: vi.fn(), disabled: true })
202
- expect(stripOf(rows[0]!)).toBeNull()
203
- expect(stripOf(rows[1]!)).toBeNull()
204
- action.destroy()
205
- })
206
- })
207
-
208
- // ---------------------------------------------------------------------------
209
- // Drag lifecycle
210
- // ---------------------------------------------------------------------------
211
-
212
- describe('rowResize - drag', () => {
213
- it('reports the new height on pointerup and fires move callbacks', () => {
214
- const { host, rows } = buildGrid([{ rowIndex: 0 }])
215
- track(host)
216
- mockRowHeight(rows[0]!, 32)
217
- const onResize = vi.fn()
218
- const onResizeMove = vi.fn()
219
- const action = rowResize(host, { onResize, onResizeMove })
220
- const strip = stripOf(rows[0]!)!
221
-
222
- strip.dispatchEvent(pointer('pointerdown', { clientY: 100 }))
223
- expect(strip.classList.contains('is-resizing')).toBe(true)
224
- expect(document.body.style.cursor).toBe('row-resize')
225
-
226
- // Drag down 20px -> 52.
227
- window.dispatchEvent(pointer('pointermove', { clientY: 120 }))
228
- expect(onResizeMove).toHaveBeenLastCalledWith(0, 52)
229
- expect(rows[0]!.style.height).toBe('52px')
230
-
231
- window.dispatchEvent(pointer('pointerup', { clientY: 120 }))
232
- expect(onResize).toHaveBeenCalledWith(0, 52)
233
- expect(strip.classList.contains('is-resizing')).toBe(false)
234
- expect(document.body.style.cursor).toBe('')
235
- action.destroy()
236
- })
237
-
238
- it('clamps the height to the min bound', () => {
239
- const { host, rows } = buildGrid([{ rowIndex: 0 }])
240
- track(host)
241
- mockRowHeight(rows[0]!, 32)
242
- const onResize = vi.fn()
243
- const action = rowResize(host, { onResize, min: 24 })
244
- const strip = stripOf(rows[0]!)!
245
- strip.dispatchEvent(pointer('pointerdown', { clientY: 100 }))
246
- // Drag far up -> would be negative, clamps to 24.
247
- window.dispatchEvent(pointer('pointerup', { clientY: 0 }))
248
- expect(onResize).toHaveBeenCalledWith(0, 24)
249
- action.destroy()
250
- })
251
-
252
- it('clamps the height to the max bound', () => {
253
- const { host, rows } = buildGrid([{ rowIndex: 0 }])
254
- track(host)
255
- mockRowHeight(rows[0]!, 32)
256
- const onResize = vi.fn()
257
- const action = rowResize(host, { onResize, max: 50 })
258
- const strip = stripOf(rows[0]!)!
259
- strip.dispatchEvent(pointer('pointerdown', { clientY: 100 }))
260
- window.dispatchEvent(pointer('pointerup', { clientY: 1000 }))
261
- expect(onResize).toHaveBeenCalledWith(0, 50)
262
- action.destroy()
263
- })
264
-
265
- it('works without an onResizeMove callback (optional)', () => {
266
- const { host, rows } = buildGrid([{ rowIndex: 0 }])
267
- track(host)
268
- mockRowHeight(rows[0]!, 30)
269
- const onResize = vi.fn()
270
- const action = rowResize(host, { onResize })
271
- const strip = stripOf(rows[0]!)!
272
- strip.dispatchEvent(pointer('pointerdown', { clientY: 50 }))
273
- expect(() => window.dispatchEvent(pointer('pointermove', { clientY: 60 }))).not.toThrow()
274
- window.dispatchEvent(pointer('pointerup', { clientY: 60 }))
275
- expect(onResize).toHaveBeenCalledWith(0, 40)
276
- action.destroy()
277
- })
278
-
279
- it('ignores pointermove / pointerup when no drag is active', () => {
280
- const { host } = buildGrid([{ rowIndex: 0 }])
281
- track(host)
282
- const onResize = vi.fn()
283
- const onResizeMove = vi.fn()
284
- const action = rowResize(host, { onResize, onResizeMove })
285
- // No pointerdown first - listeners were only attached on down, so these
286
- // shouldn't do anything even if dispatched.
287
- window.dispatchEvent(pointer('pointermove', { clientY: 10 }))
288
- window.dispatchEvent(pointer('pointerup', { clientY: 10 }))
289
- expect(onResize).not.toHaveBeenCalled()
290
- expect(onResizeMove).not.toHaveBeenCalled()
291
- action.destroy()
292
- })
293
- })
294
-
295
- // ---------------------------------------------------------------------------
296
- // pointerdown guards
297
- // ---------------------------------------------------------------------------
298
-
299
- describe('rowResize - pointerdown guards', () => {
300
- it('ignores pointerdown when disabled', () => {
301
- const { host, rows } = buildGrid([{ rowIndex: 0 }])
302
- track(host)
303
- mockRowHeight(rows[0]!, 32)
304
- const onResize = vi.fn()
305
- // Start enabled so a strip exists, then disable via update.
306
- const action = rowResize(host, { onResize })
307
- const strip = stripOf(rows[0]!)!
308
- action.update({ onResize, disabled: true })
309
- // update removes strips, but dispatch on the (now-detached) strip anyway:
310
- // even if it were still in the DOM, current.disabled short-circuits.
311
- strip.dispatchEvent(pointer('pointerdown', { clientY: 10 }))
312
- window.dispatchEvent(pointer('pointerup', { clientY: 50 }))
313
- expect(onResize).not.toHaveBeenCalled()
314
- action.destroy()
315
- })
316
-
317
- it('ignores pointerdown on a non-strip target', () => {
318
- const { host, rows } = buildGrid([{ rowIndex: 0 }])
319
- track(host)
320
- const onResize = vi.fn()
321
- const action = rowResize(host, { onResize })
322
- gutterOf(rows[0]!).dispatchEvent(pointer('pointerdown', { clientY: 10 }))
323
- expect(document.body.style.cursor).toBe('')
324
- action.destroy()
325
- })
326
-
327
- it('ignores a strip whose row has a non-finite row index', () => {
328
- const { host, rows } = buildGrid([{}])
329
- track(host)
330
- // Remove the data-svgrid-row marker so rowIndexOf returns NaN.
331
- rows[0]!.querySelector('[data-svgrid-row]')!.removeAttribute('data-svgrid-row')
332
- const onResize = vi.fn()
333
- const action = rowResize(host, { onResize })
334
- const strip = stripOf(rows[0]!)!
335
- strip.dispatchEvent(pointer('pointerdown', { clientY: 10 }))
336
- expect(document.body.style.cursor).toBe('')
337
- expect(strip.classList.contains('is-resizing')).toBe(false)
338
- action.destroy()
339
- })
340
-
341
- it('ignores a strip not inside a tr.sv-grid-row', () => {
342
- const host = track(document.createElement('div'))
343
- document.body.appendChild(host)
344
- // A loose strip with no matching ancestor row.
345
- const strip = document.createElement('div')
346
- strip.className = STRIP_CLASS
347
- host.appendChild(strip)
348
- const onResize = vi.fn()
349
- const action = rowResize(host, { onResize })
350
- strip.dispatchEvent(pointer('pointerdown', { clientY: 10 }))
351
- expect(document.body.style.cursor).toBe('')
352
- action.destroy()
353
- })
354
- })
355
-
356
- // ---------------------------------------------------------------------------
357
- // update() + destroy()
358
- // ---------------------------------------------------------------------------
359
-
360
- describe('rowResize - update + destroy', () => {
361
- it('removes strips when toggled to disabled and restores when re-enabled', () => {
362
- const { host, rows } = buildGrid([{}, {}])
363
- track(host)
364
- const onResize = vi.fn()
365
- const action = rowResize(host, { onResize, disabled: false })
366
- expect(stripOf(rows[0]!)).not.toBeNull()
367
-
368
- action.update({ onResize, disabled: true })
369
- expect(stripOf(rows[0]!)).toBeNull()
370
- expect(stripOf(rows[1]!)).toBeNull()
371
-
372
- action.update({ onResize, disabled: false })
373
- expect(stripOf(rows[0]!)).not.toBeNull()
374
- action.destroy()
375
- })
376
-
377
- it('does not repaint when disabled flag is unchanged on update', () => {
378
- const { host, rows } = buildGrid([{}])
379
- track(host)
380
- const action = rowResize(host, { onResize: vi.fn() })
381
- const firstStrip = stripOf(rows[0]!)
382
- // Same disabled value -> decorate is NOT called, strip stays the same node.
383
- action.update({ onResize: vi.fn() })
384
- expect(stripOf(rows[0]!)).toBe(firstStrip)
385
- action.destroy()
386
- })
387
-
388
- it('destroy removes all strips and detaches listeners', () => {
389
- const { host, rows } = buildGrid([{ rowIndex: 0 }])
390
- track(host)
391
- mockRowHeight(rows[0]!, 32)
392
- const onResize = vi.fn()
393
- const action = rowResize(host, { onResize })
394
- expect(stripOf(rows[0]!)).not.toBeNull()
395
-
396
- action.destroy()
397
- expect(stripOf(rows[0]!)).toBeNull()
398
-
399
- // After destroy the pointerdown listener is gone; re-create a strip
400
- // manually and confirm no drag starts.
401
- const strip = document.createElement('div')
402
- strip.className = STRIP_CLASS
403
- gutterOf(rows[0]!).appendChild(strip)
404
- strip.dispatchEvent(pointer('pointerdown', { clientY: 10 }))
405
- expect(document.body.style.cursor).toBe('')
406
- })
407
-
408
- it('uses default min=20 / max=320 when bounds are omitted', () => {
409
- const { host, rows } = buildGrid([{ rowIndex: 0 }])
410
- track(host)
411
- mockRowHeight(rows[0]!, 100)
412
- const onResize = vi.fn()
413
- const action = rowResize(host, { onResize })
414
- const strip = stripOf(rows[0]!)!
415
- strip.dispatchEvent(pointer('pointerdown', { clientY: 0 }))
416
- // Drag way past max -> clamps to 320.
417
- window.dispatchEvent(pointer('pointermove', { clientY: 10000 }))
418
- expect(rows[0]!.style.height).toBe('320px')
419
- // Drag way below min -> clamps to 20.
420
- window.dispatchEvent(pointer('pointerup', { clientY: -10000 }))
421
- expect(onResize).toHaveBeenCalledWith(0, 20)
422
- action.destroy()
423
- })
424
- })
425
-
426
- // ---------------------------------------------------------------------------
427
- // Keyboard resize (#79)
428
- // ---------------------------------------------------------------------------
429
-
430
- describe('rowResize - keyboard', () => {
431
- function key(k: string, init: Partial<KeyboardEvent> = {}): KeyboardEvent {
432
- return new KeyboardEvent('keydown', { key: k, bubbles: true, cancelable: true, ...init })
433
- }
434
-
435
- it('makes the strip focusable', () => {
436
- const { host, rows } = buildGrid([{}])
437
- track(host)
438
- const action = rowResize(host, { onResize: vi.fn() })
439
- expect(stripOf(rows[0]!)!.tabIndex).toBe(0)
440
- action.destroy()
441
- })
442
-
443
- it('ArrowDown grows the row by 10px and reports the new height', () => {
444
- const { host, rows } = buildGrid([{ rowIndex: 0 }])
445
- track(host)
446
- mockRowHeight(rows[0]!, 32)
447
- const onResize = vi.fn()
448
- const action = rowResize(host, { onResize })
449
- stripOf(rows[0]!)!.dispatchEvent(key('ArrowDown'))
450
- expect(rows[0]!.style.height).toBe('42px')
451
- expect(onResize).toHaveBeenCalledWith(0, 42)
452
- action.destroy()
453
- })
454
-
455
- it('ArrowUp shrinks the row and Shift gives a 1px step', () => {
456
- const { host, rows } = buildGrid([{ rowIndex: 0 }])
457
- track(host)
458
- mockRowHeight(rows[0]!, 60)
459
- const onResize = vi.fn()
460
- const action = rowResize(host, { onResize })
461
- const strip = stripOf(rows[0]!)!
462
- strip.dispatchEvent(key('ArrowUp'))
463
- expect(onResize).toHaveBeenLastCalledWith(0, 50)
464
- strip.dispatchEvent(key('ArrowUp', { shiftKey: true }))
465
- expect(onResize).toHaveBeenLastCalledWith(0, 59)
466
- action.destroy()
467
- })
468
-
469
- it('clamps to the configured min and max', () => {
470
- const { host, rows } = buildGrid([{ rowIndex: 0 }])
471
- track(host)
472
- mockRowHeight(rows[0]!, 42)
473
- const onResize = vi.fn()
474
- const action = rowResize(host, { onResize, min: 40, max: 44 })
475
- const strip = stripOf(rows[0]!)!
476
- strip.dispatchEvent(key('ArrowUp'))
477
- expect(onResize).toHaveBeenLastCalledWith(0, 40)
478
- strip.dispatchEvent(key('ArrowDown'))
479
- expect(onResize).toHaveBeenLastCalledWith(0, 44)
480
- action.destroy()
481
- })
482
-
483
- it('ignores keys other than the arrows and consumes the ones it handles', () => {
484
- const { host, rows } = buildGrid([{ rowIndex: 0 }])
485
- track(host)
486
- mockRowHeight(rows[0]!, 32)
487
- const onResize = vi.fn()
488
- const action = rowResize(host, { onResize })
489
- const strip = stripOf(rows[0]!)!
490
- const other = key('Enter')
491
- strip.dispatchEvent(other)
492
- expect(onResize).not.toHaveBeenCalled()
493
- expect(other.defaultPrevented).toBe(false)
494
- const handled = key('ArrowDown')
495
- strip.dispatchEvent(handled)
496
- expect(handled.defaultPrevented).toBe(true)
497
- action.destroy()
498
- })
499
-
500
- it('does nothing while disabled, and stops after destroy', () => {
501
- const { host, rows } = buildGrid([{ rowIndex: 0 }])
502
- track(host)
503
- mockRowHeight(rows[0]!, 32)
504
- const onResize = vi.fn()
505
- const action = rowResize(host, { onResize, disabled: true })
506
- // Disabled removes the strips entirely, so drive a hand-made one.
507
- const strip = document.createElement('div')
508
- strip.className = STRIP_CLASS
509
- gutterOf(rows[0]!).appendChild(strip)
510
- strip.dispatchEvent(key('ArrowDown'))
511
- expect(onResize).not.toHaveBeenCalled()
512
-
513
- action.update({ onResize })
514
- stripOf(rows[0]!)!.dispatchEvent(key('ArrowDown'))
515
- expect(onResize).toHaveBeenCalledTimes(1)
516
-
517
- action.destroy()
518
- const orphan = document.createElement('div')
519
- orphan.className = STRIP_CLASS
520
- gutterOf(rows[0]!).appendChild(orphan)
521
- orphan.dispatchEvent(key('ArrowDown'))
522
- expect(onResize).toHaveBeenCalledTimes(1)
523
- })
524
- })
1
+ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
2
+ import { rowResize } from './row-resize'
3
+
4
+ const STRIP_CLASS = 'sv-grid-row-resize-handle'
5
+
6
+ // ---------------------------------------------------------------------------
7
+ // Helpers
8
+ // ---------------------------------------------------------------------------
9
+
10
+ /** Build a host `<table>` with `rows` body rows. Each row carries the
11
+ * `tr.sv-grid-row` class + a `.sv-row-gutter` cell holding a
12
+ * `data-svgrid-row` marker, matching what SvGrid renders. Extra classes
13
+ * let individual tests opt rows out (header / spacer / no-gutter). */
14
+ function buildGrid(
15
+ specs: Array<{ rowClasses?: string[]; gutter?: boolean; rowIndex?: number }>,
16
+ ): { host: HTMLElement; rows: HTMLTableRowElement[] } {
17
+ const host = document.createElement('div')
18
+ const table = document.createElement('table')
19
+ const tbody = document.createElement('tbody')
20
+ const rows: HTMLTableRowElement[] = []
21
+ specs.forEach((spec, i) => {
22
+ const tr = document.createElement('tr')
23
+ tr.className = ['sv-grid-row', ...(spec.rowClasses ?? [])].join(' ')
24
+ const cell = document.createElement('td')
25
+ cell.className = 'sv-grid-cell'
26
+ if (spec.gutter !== false) cell.classList.add('sv-row-gutter')
27
+ const marker = document.createElement('span')
28
+ marker.setAttribute('data-svgrid-row', String(spec.rowIndex ?? i))
29
+ cell.appendChild(marker)
30
+ tr.appendChild(cell)
31
+ tbody.appendChild(tr)
32
+ rows.push(tr)
33
+ })
34
+ table.appendChild(tbody)
35
+ host.appendChild(table)
36
+ document.body.appendChild(host)
37
+ return { host, rows }
38
+ }
39
+
40
+ function gutterOf(tr: HTMLTableRowElement): HTMLTableCellElement {
41
+ return tr.querySelector<HTMLTableCellElement>('.sv-row-gutter')!
42
+ }
43
+ function stripOf(tr: HTMLTableRowElement): HTMLElement | null {
44
+ return tr.querySelector<HTMLElement>(`.${STRIP_CLASS}`)
45
+ }
46
+
47
+ /** Mock getBoundingClientRect so a TR reports a real height in jsdom
48
+ * (which otherwise returns all-zero rects). */
49
+ function mockRowHeight(tr: HTMLTableRowElement, height: number): void {
50
+ tr.getBoundingClientRect = () =>
51
+ ({ height, width: 100, top: 0, left: 0, right: 100, bottom: height, x: 0, y: 0, toJSON() {} }) as DOMRect
52
+ }
53
+
54
+ function pointer(type: string, init: Partial<PointerEvent> = {}): PointerEvent {
55
+ return new PointerEvent(type, { bubbles: true, cancelable: true, pointerId: 1, ...init } as PointerEventInit)
56
+ }
57
+
58
+ const hosts: HTMLElement[] = []
59
+ function track(host: HTMLElement): HTMLElement {
60
+ hosts.push(host)
61
+ return host
62
+ }
63
+
64
+ beforeEach(() => {
65
+ // jsdom lacks pointer-capture methods on elements; stub them so the action's
66
+ // try/catch wrapped calls have something to invoke.
67
+ if (!HTMLElement.prototype.setPointerCapture) {
68
+ HTMLElement.prototype.setPointerCapture = function () {}
69
+ }
70
+ if (!HTMLElement.prototype.releasePointerCapture) {
71
+ HTMLElement.prototype.releasePointerCapture = function () {}
72
+ }
73
+ })
74
+
75
+ afterEach(() => {
76
+ while (hosts.length) hosts.pop()!.remove()
77
+ document.body.innerHTML = ''
78
+ document.body.style.cursor = ''
79
+ })
80
+
81
+ // ---------------------------------------------------------------------------
82
+ // decorate()
83
+ // ---------------------------------------------------------------------------
84
+
85
+ describe('rowResize - strip injection', () => {
86
+ it('injects a resize strip into every gutter cell', () => {
87
+ const { host, rows } = buildGrid([{}, {}, {}])
88
+ track(host)
89
+ const action = rowResize(host, { onResize: vi.fn() })
90
+ for (const tr of rows) {
91
+ const strip = stripOf(tr)
92
+ expect(strip).not.toBeNull()
93
+ expect(strip!.getAttribute('role')).toBe('separator')
94
+ expect(strip!.getAttribute('aria-orientation')).toBe('horizontal')
95
+ expect(strip!.getAttribute('aria-label')).toBe('Resize row')
96
+ expect(strip!.style.cursor).toBe('row-resize')
97
+ }
98
+ // Gutter cells become a positioning context with visible overflow.
99
+ expect(gutterOf(rows[0]!).style.position).toBe('relative')
100
+ expect(gutterOf(rows[0]!).style.overflow).toBe('visible')
101
+ action.destroy()
102
+ })
103
+
104
+ it('does not double-inject a strip on re-decorate', async () => {
105
+ const { host, rows } = buildGrid([{}])
106
+ track(host)
107
+ const action = rowResize(host, { onResize: vi.fn() })
108
+ expect(rows[0]!.querySelectorAll(`.${STRIP_CLASS}`).length).toBe(1)
109
+ // Trigger the MutationObserver by appending an unrelated node.
110
+ gutterOf(rows[0]!).appendChild(document.createElement('span'))
111
+ await Promise.resolve()
112
+ await new Promise((r) => setTimeout(r, 0))
113
+ expect(rows[0]!.querySelectorAll(`.${STRIP_CLASS}`).length).toBe(1)
114
+ action.destroy()
115
+ })
116
+
117
+ it('skips header rows, spacer rows, and rows without a gutter cell', () => {
118
+ const { host, rows } = buildGrid([
119
+ { rowClasses: ['sv-grid-header-row'] },
120
+ { rowClasses: ['sv-grid-row-spacer'] },
121
+ { gutter: false },
122
+ {}, // normal row gets a strip
123
+ ])
124
+ track(host)
125
+ const action = rowResize(host, { onResize: vi.fn() })
126
+ expect(stripOf(rows[0]!)).toBeNull()
127
+ expect(stripOf(rows[1]!)).toBeNull()
128
+ expect(stripOf(rows[2]!)).toBeNull()
129
+ expect(stripOf(rows[3]!)).not.toBeNull()
130
+ action.destroy()
131
+ })
132
+
133
+ it("anchor 'row' falls back to the first body cell when there is no gutter", () => {
134
+ // What `<SvGrid rowResize>` relies on: most grids have no row-number
135
+ // column, and without the fallback the prop would be inert on them.
136
+ const { host, rows } = buildGrid([{ gutter: false }, { gutter: false }])
137
+ track(host)
138
+ const action = rowResize(host, { onResize: vi.fn(), anchor: 'row' })
139
+ expect(stripOf(rows[0]!)).not.toBeNull()
140
+ expect(stripOf(rows[1]!)).not.toBeNull()
141
+ // The strip hangs off the row's first cell, since that is all there is.
142
+ expect(stripOf(rows[0]!)!.parentElement).toBe(rows[0]!.querySelector('.sv-grid-cell'))
143
+ action.destroy()
144
+ })
145
+
146
+ it("anchor 'row' still prefers a real gutter when the row has one", () => {
147
+ const { host, rows } = buildGrid([{ gutter: true }])
148
+ track(host)
149
+ const action = rowResize(host, { onResize: vi.fn(), anchor: 'row' })
150
+ expect(stripOf(rows[0]!)!.parentElement).toBe(gutterOf(rows[0]!))
151
+ action.destroy()
152
+ })
153
+
154
+ it("defaults to anchor 'gutter', leaving gutterless rows alone", () => {
155
+ // The exported action's existing contract. Adding the fallback must not
156
+ // start decorating rows for consumers who never asked for it.
157
+ const { host, rows } = buildGrid([{ gutter: false }])
158
+ track(host)
159
+ const action = rowResize(host, { onResize: vi.fn() })
160
+ expect(stripOf(rows[0]!)).toBeNull()
161
+ action.destroy()
162
+ })
163
+
164
+ it('also injects a strip into the built-in row-number gutter (showRowNumbers)', () => {
165
+ // The native gutter cell is `.sv-grid-cell.sv-grid-row-number-cell`, NOT
166
+ // `.sv-row-gutter`; the action must recognise it so `showRowNumbers` grids
167
+ // are row-resizable without a custom gutter column.
168
+ const host = document.createElement('div')
169
+ const table = document.createElement('table')
170
+ const tbody = document.createElement('tbody')
171
+ const tr = document.createElement('tr')
172
+ tr.className = 'sv-grid-row'
173
+ const gutter = document.createElement('td')
174
+ gutter.className = 'sv-grid-cell sv-grid-row-number-cell'
175
+ const marker = document.createElement('span')
176
+ marker.setAttribute('data-svgrid-row', '0')
177
+ gutter.appendChild(marker)
178
+ tr.appendChild(gutter)
179
+ tbody.appendChild(tr)
180
+ table.appendChild(tbody)
181
+ host.appendChild(table)
182
+ document.body.appendChild(host)
183
+ track(host)
184
+ const action = rowResize(host, { onResize: vi.fn() })
185
+ expect(tr.querySelector(`.${STRIP_CLASS}`)).not.toBeNull()
186
+ action.destroy()
187
+ })
188
+
189
+ it('does not override an already-positioned gutter cell', () => {
190
+ const { host, rows } = buildGrid([{}])
191
+ track(host)
192
+ gutterOf(rows[0]!).style.position = 'sticky'
193
+ const action = rowResize(host, { onResize: vi.fn() })
194
+ expect(gutterOf(rows[0]!).style.position).toBe('sticky')
195
+ action.destroy()
196
+ })
197
+
198
+ it('injects no strips when created disabled', () => {
199
+ const { host, rows } = buildGrid([{}, {}])
200
+ track(host)
201
+ const action = rowResize(host, { onResize: vi.fn(), disabled: true })
202
+ expect(stripOf(rows[0]!)).toBeNull()
203
+ expect(stripOf(rows[1]!)).toBeNull()
204
+ action.destroy()
205
+ })
206
+ })
207
+
208
+ // ---------------------------------------------------------------------------
209
+ // Drag lifecycle
210
+ // ---------------------------------------------------------------------------
211
+
212
+ describe('rowResize - drag', () => {
213
+ it('reports the new height on pointerup and fires move callbacks', () => {
214
+ const { host, rows } = buildGrid([{ rowIndex: 0 }])
215
+ track(host)
216
+ mockRowHeight(rows[0]!, 32)
217
+ const onResize = vi.fn()
218
+ const onResizeMove = vi.fn()
219
+ const action = rowResize(host, { onResize, onResizeMove })
220
+ const strip = stripOf(rows[0]!)!
221
+
222
+ strip.dispatchEvent(pointer('pointerdown', { clientY: 100 }))
223
+ expect(strip.classList.contains('is-resizing')).toBe(true)
224
+ expect(document.body.style.cursor).toBe('row-resize')
225
+
226
+ // Drag down 20px -> 52.
227
+ window.dispatchEvent(pointer('pointermove', { clientY: 120 }))
228
+ expect(onResizeMove).toHaveBeenLastCalledWith(0, 52)
229
+ expect(rows[0]!.style.height).toBe('52px')
230
+
231
+ window.dispatchEvent(pointer('pointerup', { clientY: 120 }))
232
+ expect(onResize).toHaveBeenCalledWith(0, 52)
233
+ expect(strip.classList.contains('is-resizing')).toBe(false)
234
+ expect(document.body.style.cursor).toBe('')
235
+ action.destroy()
236
+ })
237
+
238
+ it('clamps the height to the min bound', () => {
239
+ const { host, rows } = buildGrid([{ rowIndex: 0 }])
240
+ track(host)
241
+ mockRowHeight(rows[0]!, 32)
242
+ const onResize = vi.fn()
243
+ const action = rowResize(host, { onResize, min: 24 })
244
+ const strip = stripOf(rows[0]!)!
245
+ strip.dispatchEvent(pointer('pointerdown', { clientY: 100 }))
246
+ // Drag far up -> would be negative, clamps to 24.
247
+ window.dispatchEvent(pointer('pointerup', { clientY: 0 }))
248
+ expect(onResize).toHaveBeenCalledWith(0, 24)
249
+ action.destroy()
250
+ })
251
+
252
+ it('clamps the height to the max bound', () => {
253
+ const { host, rows } = buildGrid([{ rowIndex: 0 }])
254
+ track(host)
255
+ mockRowHeight(rows[0]!, 32)
256
+ const onResize = vi.fn()
257
+ const action = rowResize(host, { onResize, max: 50 })
258
+ const strip = stripOf(rows[0]!)!
259
+ strip.dispatchEvent(pointer('pointerdown', { clientY: 100 }))
260
+ window.dispatchEvent(pointer('pointerup', { clientY: 1000 }))
261
+ expect(onResize).toHaveBeenCalledWith(0, 50)
262
+ action.destroy()
263
+ })
264
+
265
+ it('works without an onResizeMove callback (optional)', () => {
266
+ const { host, rows } = buildGrid([{ rowIndex: 0 }])
267
+ track(host)
268
+ mockRowHeight(rows[0]!, 30)
269
+ const onResize = vi.fn()
270
+ const action = rowResize(host, { onResize })
271
+ const strip = stripOf(rows[0]!)!
272
+ strip.dispatchEvent(pointer('pointerdown', { clientY: 50 }))
273
+ expect(() => window.dispatchEvent(pointer('pointermove', { clientY: 60 }))).not.toThrow()
274
+ window.dispatchEvent(pointer('pointerup', { clientY: 60 }))
275
+ expect(onResize).toHaveBeenCalledWith(0, 40)
276
+ action.destroy()
277
+ })
278
+
279
+ it('ignores pointermove / pointerup when no drag is active', () => {
280
+ const { host } = buildGrid([{ rowIndex: 0 }])
281
+ track(host)
282
+ const onResize = vi.fn()
283
+ const onResizeMove = vi.fn()
284
+ const action = rowResize(host, { onResize, onResizeMove })
285
+ // No pointerdown first - listeners were only attached on down, so these
286
+ // shouldn't do anything even if dispatched.
287
+ window.dispatchEvent(pointer('pointermove', { clientY: 10 }))
288
+ window.dispatchEvent(pointer('pointerup', { clientY: 10 }))
289
+ expect(onResize).not.toHaveBeenCalled()
290
+ expect(onResizeMove).not.toHaveBeenCalled()
291
+ action.destroy()
292
+ })
293
+ })
294
+
295
+ // ---------------------------------------------------------------------------
296
+ // pointerdown guards
297
+ // ---------------------------------------------------------------------------
298
+
299
+ describe('rowResize - pointerdown guards', () => {
300
+ it('ignores pointerdown when disabled', () => {
301
+ const { host, rows } = buildGrid([{ rowIndex: 0 }])
302
+ track(host)
303
+ mockRowHeight(rows[0]!, 32)
304
+ const onResize = vi.fn()
305
+ // Start enabled so a strip exists, then disable via update.
306
+ const action = rowResize(host, { onResize })
307
+ const strip = stripOf(rows[0]!)!
308
+ action.update({ onResize, disabled: true })
309
+ // update removes strips, but dispatch on the (now-detached) strip anyway:
310
+ // even if it were still in the DOM, current.disabled short-circuits.
311
+ strip.dispatchEvent(pointer('pointerdown', { clientY: 10 }))
312
+ window.dispatchEvent(pointer('pointerup', { clientY: 50 }))
313
+ expect(onResize).not.toHaveBeenCalled()
314
+ action.destroy()
315
+ })
316
+
317
+ it('ignores pointerdown on a non-strip target', () => {
318
+ const { host, rows } = buildGrid([{ rowIndex: 0 }])
319
+ track(host)
320
+ const onResize = vi.fn()
321
+ const action = rowResize(host, { onResize })
322
+ gutterOf(rows[0]!).dispatchEvent(pointer('pointerdown', { clientY: 10 }))
323
+ expect(document.body.style.cursor).toBe('')
324
+ action.destroy()
325
+ })
326
+
327
+ it('ignores a strip whose row has a non-finite row index', () => {
328
+ const { host, rows } = buildGrid([{}])
329
+ track(host)
330
+ // Remove the data-svgrid-row marker so rowIndexOf returns NaN.
331
+ rows[0]!.querySelector('[data-svgrid-row]')!.removeAttribute('data-svgrid-row')
332
+ const onResize = vi.fn()
333
+ const action = rowResize(host, { onResize })
334
+ const strip = stripOf(rows[0]!)!
335
+ strip.dispatchEvent(pointer('pointerdown', { clientY: 10 }))
336
+ expect(document.body.style.cursor).toBe('')
337
+ expect(strip.classList.contains('is-resizing')).toBe(false)
338
+ action.destroy()
339
+ })
340
+
341
+ it('ignores a strip not inside a tr.sv-grid-row', () => {
342
+ const host = track(document.createElement('div'))
343
+ document.body.appendChild(host)
344
+ // A loose strip with no matching ancestor row.
345
+ const strip = document.createElement('div')
346
+ strip.className = STRIP_CLASS
347
+ host.appendChild(strip)
348
+ const onResize = vi.fn()
349
+ const action = rowResize(host, { onResize })
350
+ strip.dispatchEvent(pointer('pointerdown', { clientY: 10 }))
351
+ expect(document.body.style.cursor).toBe('')
352
+ action.destroy()
353
+ })
354
+ })
355
+
356
+ // ---------------------------------------------------------------------------
357
+ // update() + destroy()
358
+ // ---------------------------------------------------------------------------
359
+
360
+ describe('rowResize - update + destroy', () => {
361
+ it('removes strips when toggled to disabled and restores when re-enabled', () => {
362
+ const { host, rows } = buildGrid([{}, {}])
363
+ track(host)
364
+ const onResize = vi.fn()
365
+ const action = rowResize(host, { onResize, disabled: false })
366
+ expect(stripOf(rows[0]!)).not.toBeNull()
367
+
368
+ action.update({ onResize, disabled: true })
369
+ expect(stripOf(rows[0]!)).toBeNull()
370
+ expect(stripOf(rows[1]!)).toBeNull()
371
+
372
+ action.update({ onResize, disabled: false })
373
+ expect(stripOf(rows[0]!)).not.toBeNull()
374
+ action.destroy()
375
+ })
376
+
377
+ it('does not repaint when disabled flag is unchanged on update', () => {
378
+ const { host, rows } = buildGrid([{}])
379
+ track(host)
380
+ const action = rowResize(host, { onResize: vi.fn() })
381
+ const firstStrip = stripOf(rows[0]!)
382
+ // Same disabled value -> decorate is NOT called, strip stays the same node.
383
+ action.update({ onResize: vi.fn() })
384
+ expect(stripOf(rows[0]!)).toBe(firstStrip)
385
+ action.destroy()
386
+ })
387
+
388
+ it('destroy removes all strips and detaches listeners', () => {
389
+ const { host, rows } = buildGrid([{ rowIndex: 0 }])
390
+ track(host)
391
+ mockRowHeight(rows[0]!, 32)
392
+ const onResize = vi.fn()
393
+ const action = rowResize(host, { onResize })
394
+ expect(stripOf(rows[0]!)).not.toBeNull()
395
+
396
+ action.destroy()
397
+ expect(stripOf(rows[0]!)).toBeNull()
398
+
399
+ // After destroy the pointerdown listener is gone; re-create a strip
400
+ // manually and confirm no drag starts.
401
+ const strip = document.createElement('div')
402
+ strip.className = STRIP_CLASS
403
+ gutterOf(rows[0]!).appendChild(strip)
404
+ strip.dispatchEvent(pointer('pointerdown', { clientY: 10 }))
405
+ expect(document.body.style.cursor).toBe('')
406
+ })
407
+
408
+ it('uses default min=20 / max=320 when bounds are omitted', () => {
409
+ const { host, rows } = buildGrid([{ rowIndex: 0 }])
410
+ track(host)
411
+ mockRowHeight(rows[0]!, 100)
412
+ const onResize = vi.fn()
413
+ const action = rowResize(host, { onResize })
414
+ const strip = stripOf(rows[0]!)!
415
+ strip.dispatchEvent(pointer('pointerdown', { clientY: 0 }))
416
+ // Drag way past max -> clamps to 320.
417
+ window.dispatchEvent(pointer('pointermove', { clientY: 10000 }))
418
+ expect(rows[0]!.style.height).toBe('320px')
419
+ // Drag way below min -> clamps to 20.
420
+ window.dispatchEvent(pointer('pointerup', { clientY: -10000 }))
421
+ expect(onResize).toHaveBeenCalledWith(0, 20)
422
+ action.destroy()
423
+ })
424
+ })
425
+
426
+ // ---------------------------------------------------------------------------
427
+ // Keyboard resize (#79)
428
+ // ---------------------------------------------------------------------------
429
+
430
+ describe('rowResize - keyboard', () => {
431
+ function key(k: string, init: Partial<KeyboardEvent> = {}): KeyboardEvent {
432
+ return new KeyboardEvent('keydown', { key: k, bubbles: true, cancelable: true, ...init })
433
+ }
434
+
435
+ it('makes the strip focusable', () => {
436
+ const { host, rows } = buildGrid([{}])
437
+ track(host)
438
+ const action = rowResize(host, { onResize: vi.fn() })
439
+ expect(stripOf(rows[0]!)!.tabIndex).toBe(0)
440
+ action.destroy()
441
+ })
442
+
443
+ it('ArrowDown grows the row by 10px and reports the new height', () => {
444
+ const { host, rows } = buildGrid([{ rowIndex: 0 }])
445
+ track(host)
446
+ mockRowHeight(rows[0]!, 32)
447
+ const onResize = vi.fn()
448
+ const action = rowResize(host, { onResize })
449
+ stripOf(rows[0]!)!.dispatchEvent(key('ArrowDown'))
450
+ expect(rows[0]!.style.height).toBe('42px')
451
+ expect(onResize).toHaveBeenCalledWith(0, 42)
452
+ action.destroy()
453
+ })
454
+
455
+ it('ArrowUp shrinks the row and Shift gives a 1px step', () => {
456
+ const { host, rows } = buildGrid([{ rowIndex: 0 }])
457
+ track(host)
458
+ mockRowHeight(rows[0]!, 60)
459
+ const onResize = vi.fn()
460
+ const action = rowResize(host, { onResize })
461
+ const strip = stripOf(rows[0]!)!
462
+ strip.dispatchEvent(key('ArrowUp'))
463
+ expect(onResize).toHaveBeenLastCalledWith(0, 50)
464
+ strip.dispatchEvent(key('ArrowUp', { shiftKey: true }))
465
+ expect(onResize).toHaveBeenLastCalledWith(0, 59)
466
+ action.destroy()
467
+ })
468
+
469
+ it('clamps to the configured min and max', () => {
470
+ const { host, rows } = buildGrid([{ rowIndex: 0 }])
471
+ track(host)
472
+ mockRowHeight(rows[0]!, 42)
473
+ const onResize = vi.fn()
474
+ const action = rowResize(host, { onResize, min: 40, max: 44 })
475
+ const strip = stripOf(rows[0]!)!
476
+ strip.dispatchEvent(key('ArrowUp'))
477
+ expect(onResize).toHaveBeenLastCalledWith(0, 40)
478
+ strip.dispatchEvent(key('ArrowDown'))
479
+ expect(onResize).toHaveBeenLastCalledWith(0, 44)
480
+ action.destroy()
481
+ })
482
+
483
+ it('ignores keys other than the arrows and consumes the ones it handles', () => {
484
+ const { host, rows } = buildGrid([{ rowIndex: 0 }])
485
+ track(host)
486
+ mockRowHeight(rows[0]!, 32)
487
+ const onResize = vi.fn()
488
+ const action = rowResize(host, { onResize })
489
+ const strip = stripOf(rows[0]!)!
490
+ const other = key('Enter')
491
+ strip.dispatchEvent(other)
492
+ expect(onResize).not.toHaveBeenCalled()
493
+ expect(other.defaultPrevented).toBe(false)
494
+ const handled = key('ArrowDown')
495
+ strip.dispatchEvent(handled)
496
+ expect(handled.defaultPrevented).toBe(true)
497
+ action.destroy()
498
+ })
499
+
500
+ it('does nothing while disabled, and stops after destroy', () => {
501
+ const { host, rows } = buildGrid([{ rowIndex: 0 }])
502
+ track(host)
503
+ mockRowHeight(rows[0]!, 32)
504
+ const onResize = vi.fn()
505
+ const action = rowResize(host, { onResize, disabled: true })
506
+ // Disabled removes the strips entirely, so drive a hand-made one.
507
+ const strip = document.createElement('div')
508
+ strip.className = STRIP_CLASS
509
+ gutterOf(rows[0]!).appendChild(strip)
510
+ strip.dispatchEvent(key('ArrowDown'))
511
+ expect(onResize).not.toHaveBeenCalled()
512
+
513
+ action.update({ onResize })
514
+ stripOf(rows[0]!)!.dispatchEvent(key('ArrowDown'))
515
+ expect(onResize).toHaveBeenCalledTimes(1)
516
+
517
+ action.destroy()
518
+ const orphan = document.createElement('div')
519
+ orphan.className = STRIP_CLASS
520
+ gutterOf(rows[0]!).appendChild(orphan)
521
+ orphan.dispatchEvent(key('ArrowDown'))
522
+ expect(onResize).toHaveBeenCalledTimes(1)
523
+ })
524
+ })