@svgrid/grid 2.2.27 → 2.2.29

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (248) hide show
  1. package/README.md +199 -199
  2. package/dist/FlexRender.svelte +96 -96
  3. package/dist/GridFooter.svelte +179 -179
  4. package/dist/GridMenus.svelte +782 -734
  5. package/dist/SvAutoComplete.svelte +165 -165
  6. package/dist/SvCalendar.svelte +503 -503
  7. package/dist/SvCarousel.svelte +141 -141
  8. package/dist/SvCheckBox.svelte +101 -101
  9. package/dist/SvColorInput.svelte +181 -181
  10. package/dist/SvComboBox.svelte +275 -275
  11. package/dist/SvContextMenu.svelte +116 -116
  12. package/dist/SvCountryInput.svelte +160 -160
  13. package/dist/SvDrawer.svelte +254 -250
  14. package/dist/SvDropDownList.svelte +374 -374
  15. package/dist/SvDurationInput.svelte +126 -126
  16. package/dist/SvField.svelte +293 -293
  17. package/dist/SvForm.svelte +437 -437
  18. package/dist/SvGrid.controller.svelte.d.ts +14 -1
  19. package/dist/SvGrid.controller.svelte.js +112 -28
  20. package/dist/SvGrid.css +2704 -2723
  21. package/dist/SvGrid.svelte +3361 -3333
  22. package/dist/SvGrid.types.d.ts +20 -5
  23. package/dist/SvGridChart.svelte +1724 -1724
  24. package/dist/SvGridChartPanel.svelte +485 -485
  25. package/dist/SvGridChartView.svelte +70 -70
  26. package/dist/SvGridDropdown.svelte +696 -696
  27. package/dist/SvGridSelect.svelte +259 -259
  28. package/dist/SvGroupCell.svelte +109 -109
  29. package/dist/SvListBox.svelte +326 -287
  30. package/dist/SvListBox.svelte.d.ts +10 -1
  31. package/dist/SvMaskedInput.svelte +122 -122
  32. package/dist/SvMenu.svelte +124 -124
  33. package/dist/SvMenuList.svelte +146 -146
  34. package/dist/SvMultiSelect.svelte +281 -281
  35. package/dist/SvNumberInput.svelte +168 -168
  36. package/dist/SvOtpInput.svelte +158 -158
  37. package/dist/SvPasswordInput.svelte +151 -151
  38. package/dist/SvPhoneInput.svelte +133 -131
  39. package/dist/SvPopover.svelte +197 -197
  40. package/dist/SvRadioGroup.svelte +107 -107
  41. package/dist/SvRowGroupPanel.svelte +170 -170
  42. package/dist/SvScrollArea.svelte +61 -61
  43. package/dist/SvSlider.svelte +200 -200
  44. package/dist/SvSwitchButton.svelte +107 -107
  45. package/dist/SvTagsInput.svelte +112 -112
  46. package/dist/SvTextInput.svelte +147 -147
  47. package/dist/SvTimePicker.svelte +245 -245
  48. package/dist/SvToaster.svelte +159 -159
  49. package/dist/SvToggleButton.svelte +85 -85
  50. package/dist/SvTooltip.svelte +161 -161
  51. package/dist/SvTour.svelte +204 -204
  52. package/dist/SvTree.svelte +437 -437
  53. package/dist/SvTreeSelect.svelte +233 -233
  54. package/dist/cdn/GridMenus-Da_p7SKS.js +486 -0
  55. package/dist/cdn/GridMenus-Ds3OpzZT.js +490 -0
  56. package/dist/cdn/{SvDateTimePicker-B1sDc9Pz.js → SvDateTimePicker-B8GopjhC.js} +2 -2
  57. package/dist/cdn/{SvDateTimePicker-Bh0FTs1E.js → SvDateTimePicker-DB0aIEk8.js} +2 -2
  58. package/dist/cdn/{SvGridChart-Bgk4hDs8.js → SvGridChart-BcLCYvw9.js} +1 -1
  59. package/dist/cdn/{SvGridChart-BKQsO5fZ.js → SvGridChart-BhnFdLd0.js} +1 -1
  60. package/dist/cdn/{SvGridChartPanel-DkCc2Z7b.js → SvGridChartPanel-Cmx9DHAS.js} +1 -1
  61. package/dist/cdn/{SvGridChartPanel-DSkHIQDd.js → SvGridChartPanel-DvjwxLvK.js} +1 -1
  62. package/dist/cdn/{SvGridChartView-BrbVaELm.js → SvGridChartView-B40DTJSX.js} +1 -1
  63. package/dist/cdn/{SvGridChartView-i9rWvSKg.js → SvGridChartView-PwqI4s02.js} +1 -1
  64. package/dist/cdn/{SvGridDropdown-D08sVmAy.js → SvGridDropdown-DjALc_4f.js} +1 -1
  65. package/dist/cdn/{SvGridDropdown-CGxxopQ4.js → SvGridDropdown-hpnHvOGt.js} +1 -1
  66. package/dist/cdn/{src-cgs1wcUS.js → src-BLJfdyL0.js} +4034 -3889
  67. package/dist/cdn/{src-Cw8d9U8j.js → src-DYDCiC0D.js} +7053 -6908
  68. package/dist/cdn/svgrid.js +9 -9
  69. package/dist/cdn/svgrid.svelte-external.js +9 -9
  70. package/dist/chart-export.js +8 -8
  71. package/dist/column-groups.js +8 -10
  72. package/dist/column-id.d.ts +9 -0
  73. package/dist/column-id.js +25 -0
  74. package/dist/core.js +2 -1
  75. package/dist/createListbox.svelte.d.ts +15 -2
  76. package/dist/createListbox.svelte.js +27 -6
  77. package/dist/editing.d.ts +1 -0
  78. package/dist/editing.js +45 -10
  79. package/dist/filtering/excel-filters.d.ts +30 -10
  80. package/dist/filtering/excel-filters.js +96 -15
  81. package/dist/index.d.ts +2 -2
  82. package/dist/index.js +2 -2
  83. package/dist/menus.d.ts +2 -0
  84. package/dist/menus.js +25 -0
  85. package/dist/row-resize.js +40 -0
  86. package/dist/selection.js +1 -1
  87. package/package.json +10 -10
  88. package/src/FlexRender.svelte +96 -96
  89. package/src/GridFooter.svelte +179 -179
  90. package/src/GridMenus.svelte +782 -734
  91. package/src/SvAutoComplete.svelte +165 -165
  92. package/src/SvCalendar.svelte +503 -503
  93. package/src/SvCalendar.test.ts +226 -226
  94. package/src/SvCarousel.svelte +141 -141
  95. package/src/SvCheckBox.svelte +101 -101
  96. package/src/SvColorInput.svelte +181 -181
  97. package/src/SvComboBox.svelte +275 -275
  98. package/src/SvContextMenu.svelte +116 -116
  99. package/src/SvCountryInput.svelte +160 -160
  100. package/src/SvDrawer.svelte +254 -250
  101. package/src/SvDrawer.test.ts +18 -1
  102. package/src/SvDropDownList.svelte +374 -374
  103. package/src/SvDurationInput.svelte +126 -126
  104. package/src/SvField.svelte +293 -293
  105. package/src/SvForm.svelte +437 -437
  106. package/src/SvForm.test.ts +411 -411
  107. package/src/SvGrid.controller.svelte.ts +3335 -3239
  108. package/src/SvGrid.css +2704 -2723
  109. package/src/SvGrid.svelte +3361 -3333
  110. package/src/SvGrid.types.ts +1628 -1613
  111. package/src/SvGridChart.svelte +1724 -1724
  112. package/src/SvGridChartPanel.svelte +485 -485
  113. package/src/SvGridChartView.svelte +70 -70
  114. package/src/SvGridDropdown.svelte +696 -696
  115. package/src/SvGridSelect.svelte +259 -259
  116. package/src/SvGroupCell.svelte +109 -109
  117. package/src/SvListBox.svelte +326 -287
  118. package/src/SvMaskedInput.svelte +122 -122
  119. package/src/SvMenu.svelte +124 -124
  120. package/src/SvMenu.test.ts +97 -97
  121. package/src/SvMenuList.svelte +146 -146
  122. package/src/SvMultiSelect.svelte +281 -281
  123. package/src/SvNavPane.test.ts +15 -4
  124. package/src/SvNumberInput.svelte +168 -168
  125. package/src/SvOtpInput.svelte +158 -158
  126. package/src/SvPasswordInput.svelte +151 -151
  127. package/src/SvPhoneInput.svelte +133 -131
  128. package/src/SvPopover.svelte +197 -197
  129. package/src/SvRadioGroup.svelte +107 -107
  130. package/src/SvRowGroupPanel.svelte +170 -170
  131. package/src/SvScrollArea.svelte +61 -61
  132. package/src/SvSlider.svelte +200 -200
  133. package/src/SvSwitchButton.svelte +107 -107
  134. package/src/SvTagsInput.svelte +112 -112
  135. package/src/SvTextInput.svelte +147 -147
  136. package/src/SvTimePicker.svelte +245 -245
  137. package/src/SvToaster.svelte +159 -159
  138. package/src/SvToaster.test.ts +95 -95
  139. package/src/SvToggleButton.svelte +85 -85
  140. package/src/SvTooltip.svelte +161 -161
  141. package/src/SvTour.svelte +204 -204
  142. package/src/SvTree.svelte +437 -437
  143. package/src/SvTreeSelect.svelte +233 -233
  144. package/src/a11y/dismissable.test.ts +119 -119
  145. package/src/a11y/dismissable.ts +114 -114
  146. package/src/a11y.contract.test.ts +49 -49
  147. package/src/a11y.test.ts +59 -59
  148. package/src/a11y.ts +61 -61
  149. package/src/ai.test.ts +502 -502
  150. package/src/ai.ts +1391 -1391
  151. package/src/build-api.coverage.test.ts +633 -633
  152. package/src/build-api.ts +895 -895
  153. package/src/builtin-editors.grid.test.ts +85 -85
  154. package/src/cell-formatting.ts +169 -169
  155. package/src/cell-render.ts +469 -469
  156. package/src/chart-export.ts +201 -201
  157. package/src/chart-view.svelte.ts +36 -36
  158. package/src/chart.ts +2296 -2296
  159. package/src/collaboration.test.ts +104 -104
  160. package/src/collaboration.ts +167 -167
  161. package/src/column-groups.test.ts +48 -0
  162. package/src/column-groups.ts +8 -10
  163. package/src/column-id.ts +30 -0
  164. package/src/core.performance.test.ts +30 -30
  165. package/src/core.ts +1112 -1111
  166. package/src/createAutocomplete.svelte.ts +132 -132
  167. package/src/createCombobox.svelte.ts +191 -191
  168. package/src/createCountryInput.svelte.ts +157 -157
  169. package/src/createDropdownList.svelte.ts +168 -168
  170. package/src/createForm.svelte.ts +386 -386
  171. package/src/createGrid.svelte.ts +42 -42
  172. package/src/createGrid.test.ts +10 -10
  173. package/src/createGridState.svelte.ts +17 -17
  174. package/src/createListbox.svelte.ts +39 -7
  175. package/src/createMenu.svelte.ts +225 -225
  176. package/src/createPopoverSelect.svelte.ts +213 -213
  177. package/src/createSlider.svelte.ts +191 -191
  178. package/src/createTooltip.svelte.ts +144 -144
  179. package/src/createTree.svelte.ts +319 -319
  180. package/src/editing.test.ts +949 -859
  181. package/src/editing.ts +709 -675
  182. package/src/editor-contract.ts +157 -157
  183. package/src/export-data-api.test.ts +126 -126
  184. package/src/export-format.test.ts +107 -107
  185. package/src/export-format.ts +598 -598
  186. package/src/filter-operators.ts +157 -157
  187. package/src/filtering/excel-filters.test.ts +44 -1
  188. package/src/filtering/excel-filters.ts +91 -14
  189. package/src/flex-render.ts +3 -3
  190. package/src/form-field.ts +127 -127
  191. package/src/index.ts +715 -713
  192. package/src/js-scroller.svelte.ts +173 -173
  193. package/src/keyboard.test.ts +59 -59
  194. package/src/keyboard.ts +97 -97
  195. package/src/list-nav.test.ts +49 -49
  196. package/src/list-nav.ts +29 -29
  197. package/src/list-option.test.ts +56 -56
  198. package/src/list-option.ts +172 -172
  199. package/src/menus.test.ts +736 -700
  200. package/src/menus.ts +679 -652
  201. package/src/merge-objects.ts +48 -48
  202. package/src/overlays.test.ts +90 -90
  203. package/src/render-component.ts +28 -28
  204. package/src/row-resize.test.ts +100 -0
  205. package/src/row-resize.ts +36 -0
  206. package/src/scheduler-model.test.ts +562 -562
  207. package/src/scheduler-model.ts +872 -872
  208. package/src/selection.test.ts +754 -754
  209. package/src/selection.ts +600 -600
  210. package/src/server-data-source.test.ts +289 -289
  211. package/src/server-data-source.ts +413 -413
  212. package/src/sparkline.test.ts +68 -68
  213. package/src/sparkline.ts +169 -169
  214. package/src/spreadsheet.test.ts +489 -489
  215. package/src/spreadsheet.ts +312 -312
  216. package/src/static-functions.ts +11 -11
  217. package/src/subscribe.ts +38 -38
  218. package/src/svgrid-wrapper.types.ts +524 -524
  219. package/src/svgrid.api-extensions.test.ts +8 -3
  220. package/src/svgrid.behavior.test.ts +706 -706
  221. package/src/svgrid.cell-dom-ids.test.ts +96 -0
  222. package/src/svgrid.charting.test.ts +534 -534
  223. package/src/svgrid.conditional-stat-scope.test.ts +111 -0
  224. package/src/svgrid.features.test.ts +157 -157
  225. package/src/svgrid.filter-menu-listbox.svelte.test.ts +308 -0
  226. package/src/svgrid.filter-menu-scroll.test.ts +3 -1
  227. package/src/svgrid.group-header-ids.test.ts +121 -0
  228. package/src/svgrid.new-features.wrapper.test.ts +251 -251
  229. package/src/svgrid.wrapper.test.ts +40 -40
  230. package/src/test-setup.ts +62 -62
  231. package/src/themes/index.ts +215 -215
  232. package/src/toast-store.svelte.ts +246 -246
  233. package/src/toast-store.test.ts +147 -147
  234. package/src/ui-buttons.test.ts +144 -144
  235. package/src/ui-inputs.test.ts +118 -118
  236. package/src/ui-range.test.ts +70 -70
  237. package/src/ui-selection.test.ts +155 -155
  238. package/src/ui-tier1.test.ts +142 -142
  239. package/src/virtual.test.ts +88 -88
  240. package/src/virtualization/column-virtualizer.test.ts +27 -27
  241. package/src/virtualization/column-virtualizer.ts +30 -30
  242. package/src/virtualization/svelte-virtualizer.svelte.ts +26 -26
  243. package/src/virtualization/types.ts +30 -30
  244. package/src/virtualization/virtualizer.test.ts +47 -47
  245. package/src/virtualization/virtualizer.ts +296 -296
  246. package/themes/ember.css +71 -71
  247. package/dist/cdn/GridMenus-BzxEYNtW.js +0 -421
  248. package/dist/cdn/GridMenus-Dr-nGEXn.js +0 -417
@@ -1,296 +1,296 @@
1
- import type { VirtualItem, VirtualizerOptions, VirtualizerState } from './types'
2
-
3
- type VirtualizerListener = () => void
4
-
5
- function clamp(value: number, min: number, max: number) {
6
- return Math.min(Math.max(value, min), max)
7
- }
8
-
9
- function sameOptions(a: VirtualizerOptions, b: VirtualizerOptions) {
10
- return (
11
- a.count === b.count &&
12
- a.estimateSize === b.estimateSize &&
13
- (a.overscan ?? 6) === (b.overscan ?? 6) &&
14
- a.viewportHeight === b.viewportHeight &&
15
- (a.scrollOffset ?? 0) === (b.scrollOffset ?? 0)
16
- )
17
- }
18
-
19
- function sameState(a: VirtualizerState, b: VirtualizerState) {
20
- if (
21
- a.totalSize !== b.totalSize ||
22
- a.startIndex !== b.startIndex ||
23
- a.endIndex !== b.endIndex ||
24
- a.viewportHeight !== b.viewportHeight ||
25
- a.items.length !== b.items.length
26
- ) {
27
- return false
28
- }
29
- // Per-item start+size check: catches column-resize cases where the total
30
- // is unchanged (e.g. column A grew, column B shrunk to compensate under
31
- // fit-to-width). Without this, the virtualizer skips the emit and the
32
- // grid renders with stale widths.
33
- for (let i = 0; i < a.items.length; i += 1) {
34
- const ai = a.items[i]!
35
- const bi = b.items[i]!
36
- if (ai.index !== bi.index || ai.start !== bi.start || ai.size !== bi.size) return false
37
- }
38
- return true
39
- }
40
-
41
- // Slot-based keying: the key is the POSITION of the item inside the
42
- // visible window (slot 0 = topmost rendered row, slot 1 = next, etc.)
43
- // - NOT the data index. As the user scrolls, the window's startIndex
44
- // changes but the slot keys stay the same (0..N-1), so Svelte recycles
45
- // the existing <tr> DOM nodes and only updates their data + position.
46
- //
47
- // This avoids the mount/unmount churn that previously fired on every
48
- // scroll tick: with data-index keys, scrolling down 1 row meant the old
49
- // topmost key disappeared and a new bottommost key appeared, forcing
50
- // Svelte to unmount the top <tr> and mount a fresh one at the bottom.
51
- // Slot-based keys keep the same N <tr> nodes alive for the lifetime of
52
- // the grid; scroll just translates them via the top spacer.
53
- function buildUniformItems(
54
- startIndex: number,
55
- endIndex: number,
56
- estimateSize: number,
57
- ): Array<VirtualItem> {
58
- const items: Array<VirtualItem> = []
59
- for (let index = startIndex; index <= endIndex; index += 1) {
60
- const start = index * estimateSize
61
- items.push({
62
- index,
63
- start,
64
- size: estimateSize,
65
- end: start + estimateSize,
66
- key: `virtual_slot_${index - startIndex}`,
67
- })
68
- }
69
- return items
70
- }
71
-
72
- function buildVariableItems(
73
- startIndex: number,
74
- endIndex: number,
75
- offsets: Array<number>,
76
- ): Array<VirtualItem> {
77
- const items: Array<VirtualItem> = []
78
- for (let index = startIndex; index <= endIndex; index += 1) {
79
- const start = offsets[index] ?? 0
80
- const end = offsets[index + 1] ?? start
81
- items.push({
82
- index,
83
- start,
84
- size: end - start,
85
- end,
86
- key: `virtual_slot_${index - startIndex}`,
87
- })
88
- }
89
- return items
90
- }
91
-
92
- function createState(
93
- options: VirtualizerOptions,
94
- /** Pre-built cumulative offsets for the variable-size path. */
95
- offsets: Array<number> | null,
96
- ): VirtualizerState {
97
- const count = Math.max(options.count, 0)
98
- const overscan = Math.max(options.overscan ?? 6, 0)
99
- const viewportHeight = Math.max(options.viewportHeight, 0)
100
-
101
- if (typeof options.estimateSize === 'function' && offsets) {
102
- const totalSize = offsets[count] ?? 0
103
- const maxOffset = Math.max(totalSize - viewportHeight, 0)
104
- const scrollOffset = clamp(options.scrollOffset ?? 0, 0, maxOffset)
105
-
106
- // First index whose end > scrollOffset.
107
- let lo = 0
108
- let hi = count
109
- while (lo < hi) {
110
- const mid = (lo + hi) >>> 1
111
- if ((offsets[mid + 1] ?? 0) <= scrollOffset) lo = mid + 1
112
- else hi = mid
113
- }
114
- const visibleStart = lo
115
-
116
- // First index whose start >= scrollOffset + viewportHeight.
117
- const viewportEnd = scrollOffset + viewportHeight
118
- lo = visibleStart
119
- hi = count
120
- while (lo < hi) {
121
- const mid = (lo + hi) >>> 1
122
- if ((offsets[mid] ?? 0) < viewportEnd) lo = mid + 1
123
- else hi = mid
124
- }
125
- const visibleEnd = Math.max(lo - 1, visibleStart)
126
-
127
- const startIndex = count === 0 ? 0 : clamp(visibleStart - overscan, 0, count - 1)
128
- const endIndex = count === 0 ? -1 : clamp(visibleEnd + overscan, 0, count - 1)
129
-
130
- return {
131
- items: endIndex >= startIndex ? buildVariableItems(startIndex, endIndex, offsets) : [],
132
- totalSize,
133
- startIndex,
134
- endIndex,
135
- scrollOffset,
136
- viewportHeight,
137
- }
138
- }
139
-
140
- // Uniform-size fast path (original behavior).
141
- const estimateSize = Math.max(
142
- typeof options.estimateSize === 'number' ? options.estimateSize : 1,
143
- 1,
144
- )
145
- const totalSize = count * estimateSize
146
- const maxOffset = Math.max(totalSize - viewportHeight, 0)
147
- const scrollOffset = clamp(options.scrollOffset ?? 0, 0, maxOffset)
148
-
149
- const visibleStart = Math.floor(scrollOffset / estimateSize)
150
- const visibleCount = Math.ceil(viewportHeight / estimateSize)
151
- const visibleEnd = Math.min(visibleStart + visibleCount, Math.max(count - 1, 0))
152
-
153
- const startIndex = count === 0 ? 0 : clamp(visibleStart - overscan, 0, count - 1)
154
- const endIndex = count === 0 ? -1 : clamp(visibleEnd + overscan, 0, count - 1)
155
-
156
- return {
157
- items: endIndex >= startIndex ? buildUniformItems(startIndex, endIndex, estimateSize) : [],
158
- totalSize,
159
- startIndex,
160
- endIndex,
161
- scrollOffset,
162
- viewportHeight,
163
- }
164
- }
165
-
166
- /** Cached cumulative-offset table for the variable-size virtualizer path.
167
- * Rebuilt only when count or the size function changes; reused across the
168
- * many `recalc()` calls that happen during scroll. */
169
- type OffsetCache = {
170
- fn: (index: number) => number
171
- count: number
172
- offsets: Array<number>
173
- } | null
174
-
175
- export function createVirtualizer(initial: VirtualizerOptions) {
176
- let options = initial
177
- let offsetCache: OffsetCache = null
178
-
179
- function getOffsets(): Array<number> | null {
180
- if (typeof options.estimateSize !== 'function') return null
181
- const count = Math.max(options.count, 0)
182
- if (
183
- offsetCache &&
184
- offsetCache.fn === options.estimateSize &&
185
- offsetCache.count === count
186
- ) {
187
- return offsetCache.offsets
188
- }
189
- const sizeFn = options.estimateSize
190
- const offsets = new Array<number>(count + 1)
191
- offsets[0] = 0
192
- for (let i = 0; i < count; i += 1) {
193
- offsets[i + 1] = offsets[i]! + Math.max(sizeFn(i), 1)
194
- }
195
- offsetCache = { fn: sizeFn, count, offsets }
196
- return offsets
197
- }
198
-
199
- let state = createState(options, getOffsets())
200
- const listeners = new Set<VirtualizerListener>()
201
-
202
- function emit() {
203
- listeners.forEach((listener) => listener())
204
- }
205
-
206
- function recalc() {
207
- const next = createState(options, getOffsets())
208
- if (sameState(state, next)) return
209
- state = next
210
- emit()
211
- }
212
-
213
- return {
214
- setOptions(next: Partial<VirtualizerOptions>) {
215
- const merged = { ...options, ...next }
216
- if (sameOptions(options, merged)) return
217
- options = merged
218
- recalc()
219
- },
220
- setScrollOffset(scrollOffset: number) {
221
- if ((options.scrollOffset ?? 0) === scrollOffset) return
222
- options = { ...options, scrollOffset }
223
- recalc()
224
- },
225
- setViewportHeight(viewportHeight: number) {
226
- if (options.viewportHeight === viewportHeight) return
227
- options = { ...options, viewportHeight }
228
- recalc()
229
- },
230
- scrollToIndex(index: number) {
231
- const boundedIndex = clamp(index, 0, Math.max(options.count - 1, 0))
232
- // Read the current state's totals so the offset is correct under both
233
- // uniform and per-index sizing.
234
- const totalSize = state.totalSize
235
- let targetOffset: number
236
- if (typeof options.estimateSize === 'function') {
237
- // Use the cached cumulative offsets if present.
238
- const offsets = getOffsets()
239
- if (offsets) {
240
- targetOffset = offsets[boundedIndex] ?? 0
241
- } else {
242
- let acc = 0
243
- const sizeFn = options.estimateSize
244
- for (let i = 0; i < boundedIndex; i += 1) acc += Math.max(sizeFn(i), 1)
245
- targetOffset = acc
246
- }
247
- } else {
248
- targetOffset = boundedIndex * Math.max(options.estimateSize, 1)
249
- }
250
- const maxOffset = Math.max(totalSize - options.viewportHeight, 0)
251
- const nextOffset = clamp(targetOffset, 0, maxOffset)
252
- if ((options.scrollOffset ?? 0) === nextOffset) return
253
- options = { ...options, scrollOffset: nextOffset }
254
- recalc()
255
- },
256
- getVirtualItems() {
257
- return state.items
258
- },
259
- getTotalSize() {
260
- return state.totalSize
261
- },
262
- /** Cumulative offset of row `index` from the top in px, regardless
263
- * of whether `estimateSize` is uniform or per-index. Uses the
264
- * cached offsets array under function-form sizing so the lookup
265
- * is O(1) instead of O(index). */
266
- getOffsetForIndex(index: number): number {
267
- if (index <= 0) return 0
268
- const count = Math.max(options.count, 0)
269
- const bounded = Math.min(index, count)
270
- if (typeof options.estimateSize === 'function') {
271
- const offsets = getOffsets()
272
- if (offsets) return offsets[bounded] ?? 0
273
- let acc = 0
274
- const fn = options.estimateSize
275
- for (let i = 0; i < bounded; i += 1) acc += Math.max(fn(i), 1)
276
- return acc
277
- }
278
- return bounded * Math.max(options.estimateSize, 1)
279
- },
280
- /** Height of row `index` in px (whichever estimateSize provides). */
281
- getSizeForIndex(index: number): number {
282
- if (index < 0 || index >= options.count) return 0
283
- if (typeof options.estimateSize === 'function') {
284
- return Math.max(options.estimateSize(index), 1)
285
- }
286
- return Math.max(options.estimateSize, 1)
287
- },
288
- getState() {
289
- return state
290
- },
291
- subscribe(listener: VirtualizerListener) {
292
- listeners.add(listener)
293
- return () => listeners.delete(listener)
294
- },
295
- }
296
- }
1
+ import type { VirtualItem, VirtualizerOptions, VirtualizerState } from './types'
2
+
3
+ type VirtualizerListener = () => void
4
+
5
+ function clamp(value: number, min: number, max: number) {
6
+ return Math.min(Math.max(value, min), max)
7
+ }
8
+
9
+ function sameOptions(a: VirtualizerOptions, b: VirtualizerOptions) {
10
+ return (
11
+ a.count === b.count &&
12
+ a.estimateSize === b.estimateSize &&
13
+ (a.overscan ?? 6) === (b.overscan ?? 6) &&
14
+ a.viewportHeight === b.viewportHeight &&
15
+ (a.scrollOffset ?? 0) === (b.scrollOffset ?? 0)
16
+ )
17
+ }
18
+
19
+ function sameState(a: VirtualizerState, b: VirtualizerState) {
20
+ if (
21
+ a.totalSize !== b.totalSize ||
22
+ a.startIndex !== b.startIndex ||
23
+ a.endIndex !== b.endIndex ||
24
+ a.viewportHeight !== b.viewportHeight ||
25
+ a.items.length !== b.items.length
26
+ ) {
27
+ return false
28
+ }
29
+ // Per-item start+size check: catches column-resize cases where the total
30
+ // is unchanged (e.g. column A grew, column B shrunk to compensate under
31
+ // fit-to-width). Without this, the virtualizer skips the emit and the
32
+ // grid renders with stale widths.
33
+ for (let i = 0; i < a.items.length; i += 1) {
34
+ const ai = a.items[i]!
35
+ const bi = b.items[i]!
36
+ if (ai.index !== bi.index || ai.start !== bi.start || ai.size !== bi.size) return false
37
+ }
38
+ return true
39
+ }
40
+
41
+ // Slot-based keying: the key is the POSITION of the item inside the
42
+ // visible window (slot 0 = topmost rendered row, slot 1 = next, etc.)
43
+ // - NOT the data index. As the user scrolls, the window's startIndex
44
+ // changes but the slot keys stay the same (0..N-1), so Svelte recycles
45
+ // the existing <tr> DOM nodes and only updates their data + position.
46
+ //
47
+ // This avoids the mount/unmount churn that previously fired on every
48
+ // scroll tick: with data-index keys, scrolling down 1 row meant the old
49
+ // topmost key disappeared and a new bottommost key appeared, forcing
50
+ // Svelte to unmount the top <tr> and mount a fresh one at the bottom.
51
+ // Slot-based keys keep the same N <tr> nodes alive for the lifetime of
52
+ // the grid; scroll just translates them via the top spacer.
53
+ function buildUniformItems(
54
+ startIndex: number,
55
+ endIndex: number,
56
+ estimateSize: number,
57
+ ): Array<VirtualItem> {
58
+ const items: Array<VirtualItem> = []
59
+ for (let index = startIndex; index <= endIndex; index += 1) {
60
+ const start = index * estimateSize
61
+ items.push({
62
+ index,
63
+ start,
64
+ size: estimateSize,
65
+ end: start + estimateSize,
66
+ key: `virtual_slot_${index - startIndex}`,
67
+ })
68
+ }
69
+ return items
70
+ }
71
+
72
+ function buildVariableItems(
73
+ startIndex: number,
74
+ endIndex: number,
75
+ offsets: Array<number>,
76
+ ): Array<VirtualItem> {
77
+ const items: Array<VirtualItem> = []
78
+ for (let index = startIndex; index <= endIndex; index += 1) {
79
+ const start = offsets[index] ?? 0
80
+ const end = offsets[index + 1] ?? start
81
+ items.push({
82
+ index,
83
+ start,
84
+ size: end - start,
85
+ end,
86
+ key: `virtual_slot_${index - startIndex}`,
87
+ })
88
+ }
89
+ return items
90
+ }
91
+
92
+ function createState(
93
+ options: VirtualizerOptions,
94
+ /** Pre-built cumulative offsets for the variable-size path. */
95
+ offsets: Array<number> | null,
96
+ ): VirtualizerState {
97
+ const count = Math.max(options.count, 0)
98
+ const overscan = Math.max(options.overscan ?? 6, 0)
99
+ const viewportHeight = Math.max(options.viewportHeight, 0)
100
+
101
+ if (typeof options.estimateSize === 'function' && offsets) {
102
+ const totalSize = offsets[count] ?? 0
103
+ const maxOffset = Math.max(totalSize - viewportHeight, 0)
104
+ const scrollOffset = clamp(options.scrollOffset ?? 0, 0, maxOffset)
105
+
106
+ // First index whose end > scrollOffset.
107
+ let lo = 0
108
+ let hi = count
109
+ while (lo < hi) {
110
+ const mid = (lo + hi) >>> 1
111
+ if ((offsets[mid + 1] ?? 0) <= scrollOffset) lo = mid + 1
112
+ else hi = mid
113
+ }
114
+ const visibleStart = lo
115
+
116
+ // First index whose start >= scrollOffset + viewportHeight.
117
+ const viewportEnd = scrollOffset + viewportHeight
118
+ lo = visibleStart
119
+ hi = count
120
+ while (lo < hi) {
121
+ const mid = (lo + hi) >>> 1
122
+ if ((offsets[mid] ?? 0) < viewportEnd) lo = mid + 1
123
+ else hi = mid
124
+ }
125
+ const visibleEnd = Math.max(lo - 1, visibleStart)
126
+
127
+ const startIndex = count === 0 ? 0 : clamp(visibleStart - overscan, 0, count - 1)
128
+ const endIndex = count === 0 ? -1 : clamp(visibleEnd + overscan, 0, count - 1)
129
+
130
+ return {
131
+ items: endIndex >= startIndex ? buildVariableItems(startIndex, endIndex, offsets) : [],
132
+ totalSize,
133
+ startIndex,
134
+ endIndex,
135
+ scrollOffset,
136
+ viewportHeight,
137
+ }
138
+ }
139
+
140
+ // Uniform-size fast path (original behavior).
141
+ const estimateSize = Math.max(
142
+ typeof options.estimateSize === 'number' ? options.estimateSize : 1,
143
+ 1,
144
+ )
145
+ const totalSize = count * estimateSize
146
+ const maxOffset = Math.max(totalSize - viewportHeight, 0)
147
+ const scrollOffset = clamp(options.scrollOffset ?? 0, 0, maxOffset)
148
+
149
+ const visibleStart = Math.floor(scrollOffset / estimateSize)
150
+ const visibleCount = Math.ceil(viewportHeight / estimateSize)
151
+ const visibleEnd = Math.min(visibleStart + visibleCount, Math.max(count - 1, 0))
152
+
153
+ const startIndex = count === 0 ? 0 : clamp(visibleStart - overscan, 0, count - 1)
154
+ const endIndex = count === 0 ? -1 : clamp(visibleEnd + overscan, 0, count - 1)
155
+
156
+ return {
157
+ items: endIndex >= startIndex ? buildUniformItems(startIndex, endIndex, estimateSize) : [],
158
+ totalSize,
159
+ startIndex,
160
+ endIndex,
161
+ scrollOffset,
162
+ viewportHeight,
163
+ }
164
+ }
165
+
166
+ /** Cached cumulative-offset table for the variable-size virtualizer path.
167
+ * Rebuilt only when count or the size function changes; reused across the
168
+ * many `recalc()` calls that happen during scroll. */
169
+ type OffsetCache = {
170
+ fn: (index: number) => number
171
+ count: number
172
+ offsets: Array<number>
173
+ } | null
174
+
175
+ export function createVirtualizer(initial: VirtualizerOptions) {
176
+ let options = initial
177
+ let offsetCache: OffsetCache = null
178
+
179
+ function getOffsets(): Array<number> | null {
180
+ if (typeof options.estimateSize !== 'function') return null
181
+ const count = Math.max(options.count, 0)
182
+ if (
183
+ offsetCache &&
184
+ offsetCache.fn === options.estimateSize &&
185
+ offsetCache.count === count
186
+ ) {
187
+ return offsetCache.offsets
188
+ }
189
+ const sizeFn = options.estimateSize
190
+ const offsets = new Array<number>(count + 1)
191
+ offsets[0] = 0
192
+ for (let i = 0; i < count; i += 1) {
193
+ offsets[i + 1] = offsets[i]! + Math.max(sizeFn(i), 1)
194
+ }
195
+ offsetCache = { fn: sizeFn, count, offsets }
196
+ return offsets
197
+ }
198
+
199
+ let state = createState(options, getOffsets())
200
+ const listeners = new Set<VirtualizerListener>()
201
+
202
+ function emit() {
203
+ listeners.forEach((listener) => listener())
204
+ }
205
+
206
+ function recalc() {
207
+ const next = createState(options, getOffsets())
208
+ if (sameState(state, next)) return
209
+ state = next
210
+ emit()
211
+ }
212
+
213
+ return {
214
+ setOptions(next: Partial<VirtualizerOptions>) {
215
+ const merged = { ...options, ...next }
216
+ if (sameOptions(options, merged)) return
217
+ options = merged
218
+ recalc()
219
+ },
220
+ setScrollOffset(scrollOffset: number) {
221
+ if ((options.scrollOffset ?? 0) === scrollOffset) return
222
+ options = { ...options, scrollOffset }
223
+ recalc()
224
+ },
225
+ setViewportHeight(viewportHeight: number) {
226
+ if (options.viewportHeight === viewportHeight) return
227
+ options = { ...options, viewportHeight }
228
+ recalc()
229
+ },
230
+ scrollToIndex(index: number) {
231
+ const boundedIndex = clamp(index, 0, Math.max(options.count - 1, 0))
232
+ // Read the current state's totals so the offset is correct under both
233
+ // uniform and per-index sizing.
234
+ const totalSize = state.totalSize
235
+ let targetOffset: number
236
+ if (typeof options.estimateSize === 'function') {
237
+ // Use the cached cumulative offsets if present.
238
+ const offsets = getOffsets()
239
+ if (offsets) {
240
+ targetOffset = offsets[boundedIndex] ?? 0
241
+ } else {
242
+ let acc = 0
243
+ const sizeFn = options.estimateSize
244
+ for (let i = 0; i < boundedIndex; i += 1) acc += Math.max(sizeFn(i), 1)
245
+ targetOffset = acc
246
+ }
247
+ } else {
248
+ targetOffset = boundedIndex * Math.max(options.estimateSize, 1)
249
+ }
250
+ const maxOffset = Math.max(totalSize - options.viewportHeight, 0)
251
+ const nextOffset = clamp(targetOffset, 0, maxOffset)
252
+ if ((options.scrollOffset ?? 0) === nextOffset) return
253
+ options = { ...options, scrollOffset: nextOffset }
254
+ recalc()
255
+ },
256
+ getVirtualItems() {
257
+ return state.items
258
+ },
259
+ getTotalSize() {
260
+ return state.totalSize
261
+ },
262
+ /** Cumulative offset of row `index` from the top in px, regardless
263
+ * of whether `estimateSize` is uniform or per-index. Uses the
264
+ * cached offsets array under function-form sizing so the lookup
265
+ * is O(1) instead of O(index). */
266
+ getOffsetForIndex(index: number): number {
267
+ if (index <= 0) return 0
268
+ const count = Math.max(options.count, 0)
269
+ const bounded = Math.min(index, count)
270
+ if (typeof options.estimateSize === 'function') {
271
+ const offsets = getOffsets()
272
+ if (offsets) return offsets[bounded] ?? 0
273
+ let acc = 0
274
+ const fn = options.estimateSize
275
+ for (let i = 0; i < bounded; i += 1) acc += Math.max(fn(i), 1)
276
+ return acc
277
+ }
278
+ return bounded * Math.max(options.estimateSize, 1)
279
+ },
280
+ /** Height of row `index` in px (whichever estimateSize provides). */
281
+ getSizeForIndex(index: number): number {
282
+ if (index < 0 || index >= options.count) return 0
283
+ if (typeof options.estimateSize === 'function') {
284
+ return Math.max(options.estimateSize(index), 1)
285
+ }
286
+ return Math.max(options.estimateSize, 1)
287
+ },
288
+ getState() {
289
+ return state
290
+ },
291
+ subscribe(listener: VirtualizerListener) {
292
+ listeners.add(listener)
293
+ return () => listeners.delete(listener)
294
+ },
295
+ }
296
+ }