@svgrid/grid 2.2.27 → 2.2.28

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (212) hide show
  1. package/README.md +199 -199
  2. package/dist/FlexRender.svelte +96 -96
  3. package/dist/GridFooter.svelte +179 -179
  4. package/dist/GridMenus.svelte +734 -734
  5. package/dist/SvAutoComplete.svelte +165 -165
  6. package/dist/SvCalendar.svelte +503 -503
  7. package/dist/SvCarousel.svelte +141 -141
  8. package/dist/SvCheckBox.svelte +101 -101
  9. package/dist/SvColorInput.svelte +181 -181
  10. package/dist/SvComboBox.svelte +275 -275
  11. package/dist/SvContextMenu.svelte +116 -116
  12. package/dist/SvCountryInput.svelte +160 -160
  13. package/dist/SvDrawer.svelte +254 -250
  14. package/dist/SvDropDownList.svelte +374 -374
  15. package/dist/SvDurationInput.svelte +126 -126
  16. package/dist/SvField.svelte +293 -293
  17. package/dist/SvForm.svelte +437 -437
  18. package/dist/SvGrid.css +2723 -2723
  19. package/dist/SvGrid.svelte +3333 -3333
  20. package/dist/SvGridChart.svelte +1724 -1724
  21. package/dist/SvGridChartPanel.svelte +485 -485
  22. package/dist/SvGridChartView.svelte +70 -70
  23. package/dist/SvGridDropdown.svelte +696 -696
  24. package/dist/SvGridSelect.svelte +259 -259
  25. package/dist/SvGroupCell.svelte +109 -109
  26. package/dist/SvListBox.svelte +287 -287
  27. package/dist/SvMaskedInput.svelte +122 -122
  28. package/dist/SvMenu.svelte +124 -124
  29. package/dist/SvMenuList.svelte +146 -146
  30. package/dist/SvMultiSelect.svelte +281 -281
  31. package/dist/SvNumberInput.svelte +168 -168
  32. package/dist/SvOtpInput.svelte +158 -158
  33. package/dist/SvPasswordInput.svelte +151 -151
  34. package/dist/SvPhoneInput.svelte +133 -131
  35. package/dist/SvPopover.svelte +197 -197
  36. package/dist/SvRadioGroup.svelte +107 -107
  37. package/dist/SvRowGroupPanel.svelte +170 -170
  38. package/dist/SvScrollArea.svelte +61 -61
  39. package/dist/SvSlider.svelte +200 -200
  40. package/dist/SvSwitchButton.svelte +107 -107
  41. package/dist/SvTagsInput.svelte +112 -112
  42. package/dist/SvTextInput.svelte +147 -147
  43. package/dist/SvTimePicker.svelte +245 -245
  44. package/dist/SvToaster.svelte +159 -159
  45. package/dist/SvToggleButton.svelte +85 -85
  46. package/dist/SvTooltip.svelte +161 -161
  47. package/dist/SvTour.svelte +204 -204
  48. package/dist/SvTree.svelte +437 -437
  49. package/dist/SvTreeSelect.svelte +233 -233
  50. package/dist/cdn/{GridMenus-BzxEYNtW.js → GridMenus-BbzEvTYO.js} +2 -2
  51. package/dist/cdn/{GridMenus-Dr-nGEXn.js → GridMenus-E220X2kM.js} +2 -2
  52. package/dist/cdn/{SvDateTimePicker-B1sDc9Pz.js → SvDateTimePicker-B8GopjhC.js} +2 -2
  53. package/dist/cdn/{SvDateTimePicker-Bh0FTs1E.js → SvDateTimePicker-DB0aIEk8.js} +2 -2
  54. package/dist/cdn/{SvGridChart-Bgk4hDs8.js → SvGridChart-BcLCYvw9.js} +1 -1
  55. package/dist/cdn/{SvGridChart-BKQsO5fZ.js → SvGridChart-BhnFdLd0.js} +1 -1
  56. package/dist/cdn/{SvGridChartPanel-DkCc2Z7b.js → SvGridChartPanel-Cmx9DHAS.js} +1 -1
  57. package/dist/cdn/{SvGridChartPanel-DSkHIQDd.js → SvGridChartPanel-DvjwxLvK.js} +1 -1
  58. package/dist/cdn/{SvGridChartView-BrbVaELm.js → SvGridChartView-B40DTJSX.js} +1 -1
  59. package/dist/cdn/{SvGridChartView-i9rWvSKg.js → SvGridChartView-PwqI4s02.js} +1 -1
  60. package/dist/cdn/{SvGridDropdown-D08sVmAy.js → SvGridDropdown-DjALc_4f.js} +1 -1
  61. package/dist/cdn/{SvGridDropdown-CGxxopQ4.js → SvGridDropdown-hpnHvOGt.js} +1 -1
  62. package/dist/cdn/{src-cgs1wcUS.js → src-BxNEslEo.js} +25 -25
  63. package/dist/cdn/{src-Cw8d9U8j.js → src-C4yKQZ5t.js} +26 -26
  64. package/dist/cdn/svgrid.js +5 -5
  65. package/dist/cdn/svgrid.svelte-external.js +5 -5
  66. package/dist/chart-export.js +8 -8
  67. package/package.json +10 -10
  68. package/src/FlexRender.svelte +96 -96
  69. package/src/GridFooter.svelte +179 -179
  70. package/src/GridMenus.svelte +734 -734
  71. package/src/SvAutoComplete.svelte +165 -165
  72. package/src/SvCalendar.svelte +503 -503
  73. package/src/SvCalendar.test.ts +226 -226
  74. package/src/SvCarousel.svelte +141 -141
  75. package/src/SvCheckBox.svelte +101 -101
  76. package/src/SvColorInput.svelte +181 -181
  77. package/src/SvComboBox.svelte +275 -275
  78. package/src/SvContextMenu.svelte +116 -116
  79. package/src/SvCountryInput.svelte +160 -160
  80. package/src/SvDrawer.svelte +254 -250
  81. package/src/SvDrawer.test.ts +18 -1
  82. package/src/SvDropDownList.svelte +374 -374
  83. package/src/SvDurationInput.svelte +126 -126
  84. package/src/SvField.svelte +293 -293
  85. package/src/SvForm.svelte +437 -437
  86. package/src/SvForm.test.ts +411 -411
  87. package/src/SvGrid.controller.svelte.ts +3239 -3239
  88. package/src/SvGrid.css +2723 -2723
  89. package/src/SvGrid.svelte +3333 -3333
  90. package/src/SvGrid.types.ts +1613 -1613
  91. package/src/SvGridChart.svelte +1724 -1724
  92. package/src/SvGridChartPanel.svelte +485 -485
  93. package/src/SvGridChartView.svelte +70 -70
  94. package/src/SvGridDropdown.svelte +696 -696
  95. package/src/SvGridSelect.svelte +259 -259
  96. package/src/SvGroupCell.svelte +109 -109
  97. package/src/SvListBox.svelte +287 -287
  98. package/src/SvMaskedInput.svelte +122 -122
  99. package/src/SvMenu.svelte +124 -124
  100. package/src/SvMenu.test.ts +97 -97
  101. package/src/SvMenuList.svelte +146 -146
  102. package/src/SvMultiSelect.svelte +281 -281
  103. package/src/SvNavPane.test.ts +15 -4
  104. package/src/SvNumberInput.svelte +168 -168
  105. package/src/SvOtpInput.svelte +158 -158
  106. package/src/SvPasswordInput.svelte +151 -151
  107. package/src/SvPhoneInput.svelte +133 -131
  108. package/src/SvPopover.svelte +197 -197
  109. package/src/SvRadioGroup.svelte +107 -107
  110. package/src/SvRowGroupPanel.svelte +170 -170
  111. package/src/SvScrollArea.svelte +61 -61
  112. package/src/SvSlider.svelte +200 -200
  113. package/src/SvSwitchButton.svelte +107 -107
  114. package/src/SvTagsInput.svelte +112 -112
  115. package/src/SvTextInput.svelte +147 -147
  116. package/src/SvTimePicker.svelte +245 -245
  117. package/src/SvToaster.svelte +159 -159
  118. package/src/SvToaster.test.ts +95 -95
  119. package/src/SvToggleButton.svelte +85 -85
  120. package/src/SvTooltip.svelte +161 -161
  121. package/src/SvTour.svelte +204 -204
  122. package/src/SvTree.svelte +437 -437
  123. package/src/SvTreeSelect.svelte +233 -233
  124. package/src/a11y/dismissable.test.ts +119 -119
  125. package/src/a11y/dismissable.ts +114 -114
  126. package/src/a11y.contract.test.ts +49 -49
  127. package/src/a11y.test.ts +59 -59
  128. package/src/a11y.ts +61 -61
  129. package/src/ai.test.ts +502 -502
  130. package/src/ai.ts +1391 -1391
  131. package/src/build-api.coverage.test.ts +633 -633
  132. package/src/build-api.ts +895 -895
  133. package/src/builtin-editors.grid.test.ts +85 -85
  134. package/src/cell-formatting.ts +169 -169
  135. package/src/cell-render.ts +469 -469
  136. package/src/chart-export.ts +201 -201
  137. package/src/chart-view.svelte.ts +36 -36
  138. package/src/chart.ts +2296 -2296
  139. package/src/collaboration.test.ts +104 -104
  140. package/src/collaboration.ts +167 -167
  141. package/src/core.performance.test.ts +30 -30
  142. package/src/core.ts +1111 -1111
  143. package/src/createAutocomplete.svelte.ts +132 -132
  144. package/src/createCombobox.svelte.ts +191 -191
  145. package/src/createCountryInput.svelte.ts +157 -157
  146. package/src/createDropdownList.svelte.ts +168 -168
  147. package/src/createForm.svelte.ts +386 -386
  148. package/src/createGrid.svelte.ts +42 -42
  149. package/src/createGrid.test.ts +10 -10
  150. package/src/createGridState.svelte.ts +17 -17
  151. package/src/createMenu.svelte.ts +225 -225
  152. package/src/createPopoverSelect.svelte.ts +213 -213
  153. package/src/createSlider.svelte.ts +191 -191
  154. package/src/createTooltip.svelte.ts +144 -144
  155. package/src/createTree.svelte.ts +319 -319
  156. package/src/editing.test.ts +859 -859
  157. package/src/editing.ts +675 -675
  158. package/src/editor-contract.ts +157 -157
  159. package/src/export-data-api.test.ts +126 -126
  160. package/src/export-format.test.ts +107 -107
  161. package/src/export-format.ts +598 -598
  162. package/src/filter-operators.ts +157 -157
  163. package/src/flex-render.ts +3 -3
  164. package/src/form-field.ts +127 -127
  165. package/src/index.ts +713 -713
  166. package/src/js-scroller.svelte.ts +173 -173
  167. package/src/keyboard.test.ts +59 -59
  168. package/src/keyboard.ts +97 -97
  169. package/src/list-nav.test.ts +49 -49
  170. package/src/list-nav.ts +29 -29
  171. package/src/list-option.test.ts +56 -56
  172. package/src/list-option.ts +172 -172
  173. package/src/menus.test.ts +700 -700
  174. package/src/menus.ts +652 -652
  175. package/src/merge-objects.ts +48 -48
  176. package/src/overlays.test.ts +90 -90
  177. package/src/render-component.ts +28 -28
  178. package/src/scheduler-model.test.ts +562 -562
  179. package/src/scheduler-model.ts +872 -872
  180. package/src/selection.test.ts +754 -754
  181. package/src/selection.ts +600 -600
  182. package/src/server-data-source.test.ts +289 -289
  183. package/src/server-data-source.ts +413 -413
  184. package/src/sparkline.test.ts +68 -68
  185. package/src/sparkline.ts +169 -169
  186. package/src/spreadsheet.test.ts +489 -489
  187. package/src/spreadsheet.ts +312 -312
  188. package/src/static-functions.ts +11 -11
  189. package/src/subscribe.ts +38 -38
  190. package/src/svgrid-wrapper.types.ts +524 -524
  191. package/src/svgrid.behavior.test.ts +706 -706
  192. package/src/svgrid.charting.test.ts +534 -534
  193. package/src/svgrid.features.test.ts +157 -157
  194. package/src/svgrid.new-features.wrapper.test.ts +251 -251
  195. package/src/svgrid.wrapper.test.ts +40 -40
  196. package/src/test-setup.ts +62 -62
  197. package/src/themes/index.ts +215 -215
  198. package/src/toast-store.svelte.ts +246 -246
  199. package/src/toast-store.test.ts +147 -147
  200. package/src/ui-buttons.test.ts +144 -144
  201. package/src/ui-inputs.test.ts +118 -118
  202. package/src/ui-range.test.ts +70 -70
  203. package/src/ui-selection.test.ts +155 -155
  204. package/src/ui-tier1.test.ts +142 -142
  205. package/src/virtual.test.ts +88 -88
  206. package/src/virtualization/column-virtualizer.test.ts +27 -27
  207. package/src/virtualization/column-virtualizer.ts +30 -30
  208. package/src/virtualization/svelte-virtualizer.svelte.ts +26 -26
  209. package/src/virtualization/types.ts +30 -30
  210. package/src/virtualization/virtualizer.test.ts +47 -47
  211. package/src/virtualization/virtualizer.ts +296 -296
  212. package/themes/ember.css +71 -71
@@ -1,413 +1,413 @@
1
- /**
2
- * Server-Side Row Model (SSRM) controller. A single, documented datasource
3
- * contract for grids whose data lives on the server - the "I have a million
4
- * rows in a database" case. The consumer implements ONE async `getRows`
5
- * function; this controller owns the request lifecycle (sort, filter, page),
6
- * de-dupes/races, and pushes results back through `onChange`.
7
- *
8
- * It's headless and framework-agnostic on purpose: wire `setSort` /
9
- * `setFilter` / `setPage` to the grid's controlled callbacks, and render the
10
- * grid from the `{ rows, total, loading }` it hands you. See the demo.
11
- *
12
- * The write side (`createRow` / `updateRow` / `deleteRow`) is optional: a
13
- * source that only implements `getRows` stays a pure read model, and the
14
- * matching controller methods throw a clear error if called. Mutations are
15
- * non-optimistic for now - the grid reflects a change only after the
16
- * follow-up re-fetch of the current page lands.
17
- */
18
- export type ServerSortModel = Array<{ id: string; desc: boolean }>
19
-
20
- export type ServerFilterModel = {
21
- /** Free-text global search. */
22
- global?: string
23
- /**
24
- * Per-column filters, keyed by column id. `value` (+ `valueTo`) carry the
25
- * operator-style filter; `selectedValues` carries a facet/checklist
26
- * selection (set-filter). Either or both may be present.
27
- */
28
- columns?: Record<
29
- string,
30
- { operator: string; value: string; valueTo?: string; selectedValues?: string[] }
31
- >
32
- }
33
-
34
- /** A value column to roll up per group. */
35
- export type ServerAggregation = { col: string; fn: 'sum' | 'avg' | 'min' | 'max' | 'count' }
36
-
37
- export type ServerRequest = {
38
- /** Zero-based index of the first row wanted (inclusive). */
39
- startRow: number
40
- /** Index just past the last row wanted (exclusive). */
41
- endRow: number
42
- pageIndex: number
43
- pageSize: number
44
- sortModel: ServerSortModel
45
- filterModel: ServerFilterModel
46
- /**
47
- * Server-side grouping / tree: the columns being grouped on, outer to inner.
48
- * Omitted / empty for a flat request.
49
- */
50
- groupBy?: string[]
51
- /**
52
- * The path of group keys the grid is expanding, e.g. `['Germany', 'Berlin']`.
53
- * Empty (`[]`) asks for the top level. When `groupKeys.length < groupBy.length`
54
- * the server returns **group rows** (one per distinct key at this level,
55
- * carrying the group key + aggregates); when they are equal it returns the
56
- * **leaf rows** under that path.
57
- */
58
- groupKeys?: string[]
59
- /** Value columns to aggregate per group. */
60
- aggregations?: ServerAggregation[]
61
- }
62
-
63
- /**
64
- * A group row in the server-side group/tree model - one distinct key at a
65
- * level, with its rolled-up aggregates. The grid renders it with an expander;
66
- * expanding it fetches its children through the same `getRows`.
67
- */
68
- export type ServerGroupRow<TData> = {
69
- kind: 'group'
70
- /** Stable id (the group path). */
71
- id: string
72
- /** Group keys from the root to this node, e.g. `['Germany', 'Berlin']`. */
73
- path: string[]
74
- /** The column this group is on (the `groupBy` entry for this level). */
75
- field: string
76
- /** This group's key value. */
77
- key: string
78
- /** Zero-based depth (0 = top level). */
79
- level: number
80
- expanded: boolean
81
- loading: boolean
82
- /** Aggregate values keyed by column id, read from the group's response row. */
83
- aggregates: Record<string, unknown>
84
- /** The raw response row for this group (key + aggregates), for cell rendering. */
85
- data: TData
86
- }
87
-
88
- export type ServerLeafRow<TData> = {
89
- kind: 'leaf'
90
- id: string
91
- level: number
92
- data: TData
93
- }
94
-
95
- /**
96
- * A "load more" affordance emitted at the end of a group whose children are
97
- * only partially loaded (intra-group paging). Trigger `loadMoreChildren(path)`
98
- * to fetch the next block.
99
- */
100
- export type ServerMoreRow = {
101
- kind: 'more'
102
- id: string
103
- level: number
104
- /** Path of the parent group whose children to load more of. */
105
- path: string[]
106
- /** How many children remain unloaded. */
107
- remaining: number
108
- loading: boolean
109
- }
110
-
111
- /**
112
- * A subtotal / footer row emitted after an expanded group's children when
113
- * `groupFooters` is on. Carries the group's aggregates a second time so a
114
- * "Total" line sits under the detail.
115
- */
116
- export type ServerFooterRow<TData> = {
117
- kind: 'footer'
118
- id: string
119
- level: number
120
- path: string[]
121
- /** The group this footer totals (its key). */
122
- key: string
123
- aggregates: Record<string, unknown>
124
- /** The group's response row (key + aggregates), so value columns show totals. */
125
- data: TData
126
- }
127
-
128
- /** A placeholder row shown while a block of children is being fetched. */
129
- export type ServerSkeletonRow = {
130
- kind: 'skeleton'
131
- id: string
132
- level: number
133
- }
134
-
135
- /** A row in the flattened server-side group/tree display list. */
136
- export type ServerDisplayRow<TData> =
137
- | ServerGroupRow<TData>
138
- | ServerLeafRow<TData>
139
- | ServerMoreRow
140
- | ServerFooterRow<TData>
141
- | ServerSkeletonRow
142
-
143
- export type ServerResult<TData> = {
144
- rows: ReadonlyArray<TData>
145
- /** Total row count after filtering (for the pager). */
146
- rowCount: number
147
- }
148
-
149
- export type ServerDataSource<TData> = {
150
- getRows(request: ServerRequest): Promise<ServerResult<TData>>
151
- /**
152
- * Optional write side. Implement whichever your backend supports; the
153
- * controller exposes matching `createRow` / `updateRow` / `deleteRow`
154
- * methods that call through and then `refresh()` the current page.
155
- * Calling a controller method whose source counterpart is missing throws.
156
- */
157
- createRow?(input: Partial<TData>): Promise<TData>
158
- updateRow?(id: string, patch: Partial<TData>): Promise<TData>
159
- deleteRow?(id: string): Promise<void>
160
- }
161
-
162
- export type ServerState<TData> = {
163
- rows: ReadonlyArray<TData>
164
- total: number
165
- loading: boolean
166
- /** True while a create / update / delete mutation is in flight. */
167
- saving: boolean
168
- error: unknown
169
- pageIndex: number
170
- pageSize: number
171
- pageCount: number
172
- sortModel: ServerSortModel
173
- filterModel: ServerFilterModel
174
- }
175
-
176
- export type ServerController<TData> = {
177
- /** Re-fetch the current page (e.g. after a mutation). */
178
- refresh(): void
179
- setSort(sortModel: ServerSortModel): void
180
- setFilter(filterModel: ServerFilterModel): void
181
- setPage(pageIndex: number): void
182
- setPageSize(pageSize: number): void
183
- /**
184
- * Create a row through the source, then refresh the current page. Resolves
185
- * with the created row. Rejects if the source has no `createRow` (or if the
186
- * create itself fails - the read state is left untouched on failure).
187
- */
188
- createRow(input: Partial<TData>): Promise<TData>
189
- /**
190
- * Update a row by id through the source. Non-optimistic: refreshes the page.
191
- * Optimistic (see `optimistic` + `getRowId` options): patches the local row
192
- * immediately, then reconciles with the server result, rolling back on error.
193
- */
194
- updateRow(id: string, patch: Partial<TData>): Promise<TData>
195
- /**
196
- * Delete a row by id through the source. Non-optimistic: refreshes the page.
197
- * Optimistic: removes the local row immediately, restoring it on error.
198
- */
199
- deleteRow(id: string): Promise<void>
200
- getState(): ServerState<TData>
201
- /** Stop accepting in-flight responses (call on unmount). */
202
- dispose(): void
203
- }
204
-
205
- export type ServerControllerOptions<TData> = {
206
- pageSize?: number
207
- /** Called whenever any of `rows` / `total` / `loading` / page changes. */
208
- onChange: (state: ServerState<TData>) => void
209
- /**
210
- * Apply `updateRow` / `deleteRow` to the local rows immediately (before the
211
- * server confirms) and roll back on error - so edits feel instant and no
212
- * refetch is needed. Requires `getRowId` to locate rows; ignored without it.
213
- * A subsequent `refresh()` reconciles ordering/filtering. Default false.
214
- */
215
- optimistic?: boolean
216
- /** Resolve a row's stable id, so optimistic update/delete can find it in `rows`. */
217
- getRowId?: (row: TData) => string
218
- }
219
-
220
- export function createServerDataSource<TData>(
221
- source: ServerDataSource<TData>,
222
- options: ServerControllerOptions<TData>,
223
- ): ServerController<TData> {
224
- const state: ServerState<TData> = {
225
- rows: [],
226
- total: 0,
227
- loading: false,
228
- saving: false,
229
- error: null,
230
- pageIndex: 0,
231
- pageSize: options.pageSize ?? 50,
232
- pageCount: 1,
233
- sortModel: [],
234
- filterModel: {},
235
- }
236
-
237
- // Monotonic request id: only the latest fetch is allowed to land, so a slow
238
- // response for an old sort/filter can't clobber a newer one.
239
- let requestSeq = 0
240
- let disposed = false
241
-
242
- const emit = () => {
243
- state.pageCount = Math.max(1, Math.ceil(state.total / state.pageSize))
244
- options.onChange({ ...state })
245
- }
246
-
247
- async function fetchPage() {
248
- if (disposed) return
249
- const id = ++requestSeq
250
- state.loading = true
251
- state.error = null
252
- emit()
253
- const startRow = state.pageIndex * state.pageSize
254
- try {
255
- const result = await source.getRows({
256
- startRow,
257
- endRow: startRow + state.pageSize,
258
- pageIndex: state.pageIndex,
259
- pageSize: state.pageSize,
260
- sortModel: state.sortModel,
261
- filterModel: state.filterModel,
262
- // Flat mode: no grouping. Group mode lives in createServerGroupModel.
263
- groupBy: [],
264
- groupKeys: [],
265
- aggregations: [],
266
- })
267
- if (disposed || id !== requestSeq) return // stale
268
- state.rows = result.rows
269
- state.total = result.rowCount
270
- state.loading = false
271
- emit()
272
- } catch (err) {
273
- if (disposed || id !== requestSeq) return
274
- state.rows = []
275
- state.error = err
276
- state.loading = false
277
- emit()
278
- }
279
- }
280
-
281
- // Shared mutation lifecycle: flip `saving`, run the write, refresh the
282
- // current page on success, and always clear `saving`. A missing source
283
- // method (or a disposed controller) rejects before anything is emitted.
284
- function mutate<T>(name: string, thunk: (() => Promise<T>) | null): Promise<T> {
285
- if (disposed) {
286
- return Promise.reject(new Error('createServerDataSource: controller is disposed'))
287
- }
288
- if (!thunk) {
289
- return Promise.reject(
290
- new Error(`createServerDataSource: the datasource does not implement ${name}()`),
291
- )
292
- }
293
- state.saving = true
294
- emit()
295
- return (async () => {
296
- try {
297
- const result = await thunk()
298
- await fetchPage()
299
- return result
300
- } finally {
301
- state.saving = false
302
- emit()
303
- }
304
- })()
305
- }
306
-
307
- const optimistic = !!options.optimistic && !!options.getRowId
308
- const getRowId = options.getRowId
309
-
310
- // Optimistic update: patch the local row, reconcile with the server result,
311
- // roll back on error. Falls back to the plain refresh path when the row
312
- // isn't on the current page (nothing local to update).
313
- async function optimisticUpdate(
314
- id: string,
315
- patch: Partial<TData>,
316
- fn: (id: string, patch: Partial<TData>) => Promise<TData>,
317
- ): Promise<TData> {
318
- if (disposed) throw new Error('createServerDataSource: controller is disposed')
319
- const prevRows = state.rows
320
- const idx = prevRows.findIndex((r) => getRowId!(r) === id)
321
- if (idx < 0) return mutate('updateRow', () => fn(id, patch))
322
-
323
- state.rows = [...prevRows.slice(0, idx), { ...prevRows[idx]!, ...patch }, ...prevRows.slice(idx + 1)]
324
- state.saving = true
325
- emit()
326
- try {
327
- const result = await fn(id, patch)
328
- state.rows = state.rows.map((r) => (getRowId!(r) === id ? result : r))
329
- return result
330
- } catch (err) {
331
- state.rows = prevRows
332
- throw err
333
- } finally {
334
- state.saving = false
335
- emit()
336
- }
337
- }
338
-
339
- // Optimistic delete: drop the local row + decrement total, restore on error.
340
- async function optimisticDelete(
341
- id: string,
342
- fn: (id: string) => Promise<void>,
343
- ): Promise<void> {
344
- if (disposed) throw new Error('createServerDataSource: controller is disposed')
345
- const prevRows = state.rows
346
- const prevTotal = state.total
347
- const next = prevRows.filter((r) => getRowId!(r) !== id)
348
- if (next.length === prevRows.length) return mutate('deleteRow', () => fn(id))
349
-
350
- state.rows = next
351
- state.total = Math.max(0, prevTotal - (prevRows.length - next.length))
352
- state.saving = true
353
- emit()
354
- try {
355
- await fn(id)
356
- } catch (err) {
357
- state.rows = prevRows
358
- state.total = prevTotal
359
- throw err
360
- } finally {
361
- state.saving = false
362
- emit()
363
- }
364
- }
365
-
366
- return {
367
- refresh: fetchPage,
368
- createRow: (input) =>
369
- mutate('createRow', source.createRow ? () => source.createRow!(input) : null),
370
- updateRow: (id, patch) => {
371
- if (!source.updateRow) return mutate('updateRow', null)
372
- const fn = source.updateRow
373
- return optimistic ? optimisticUpdate(id, patch, fn) : mutate('updateRow', () => fn(id, patch))
374
- },
375
- deleteRow: (id) => {
376
- if (!source.deleteRow) return mutate('deleteRow', null)
377
- const fn = source.deleteRow
378
- return optimistic ? optimisticDelete(id, fn) : mutate('deleteRow', () => fn(id))
379
- },
380
- setSort(sortModel) {
381
- state.sortModel = sortModel
382
- state.pageIndex = 0
383
- void fetchPage()
384
- },
385
- setFilter(filterModel) {
386
- state.filterModel = filterModel
387
- state.pageIndex = 0
388
- void fetchPage()
389
- },
390
- setPage(pageIndex) {
391
- const clamped = Math.max(0, pageIndex)
392
- if (clamped === state.pageIndex) return
393
- state.pageIndex = clamped
394
- void fetchPage()
395
- },
396
- setPageSize(pageSize) {
397
- state.pageSize = Math.max(1, pageSize)
398
- state.pageIndex = 0
399
- void fetchPage()
400
- },
401
- getState: () => ({ ...state }),
402
- dispose() {
403
- disposed = true
404
- // An in-flight fetch's resolution short-circuits on `disposed`, so it
405
- // never clears `loading`. Clear it here (and emit) so a disposed
406
- // controller doesn't report a permanent loading state.
407
- if (state.loading) {
408
- state.loading = false
409
- emit()
410
- }
411
- },
412
- }
413
- }
1
+ /**
2
+ * Server-Side Row Model (SSRM) controller. A single, documented datasource
3
+ * contract for grids whose data lives on the server - the "I have a million
4
+ * rows in a database" case. The consumer implements ONE async `getRows`
5
+ * function; this controller owns the request lifecycle (sort, filter, page),
6
+ * de-dupes/races, and pushes results back through `onChange`.
7
+ *
8
+ * It's headless and framework-agnostic on purpose: wire `setSort` /
9
+ * `setFilter` / `setPage` to the grid's controlled callbacks, and render the
10
+ * grid from the `{ rows, total, loading }` it hands you. See the demo.
11
+ *
12
+ * The write side (`createRow` / `updateRow` / `deleteRow`) is optional: a
13
+ * source that only implements `getRows` stays a pure read model, and the
14
+ * matching controller methods throw a clear error if called. Mutations are
15
+ * non-optimistic for now - the grid reflects a change only after the
16
+ * follow-up re-fetch of the current page lands.
17
+ */
18
+ export type ServerSortModel = Array<{ id: string; desc: boolean }>
19
+
20
+ export type ServerFilterModel = {
21
+ /** Free-text global search. */
22
+ global?: string
23
+ /**
24
+ * Per-column filters, keyed by column id. `value` (+ `valueTo`) carry the
25
+ * operator-style filter; `selectedValues` carries a facet/checklist
26
+ * selection (set-filter). Either or both may be present.
27
+ */
28
+ columns?: Record<
29
+ string,
30
+ { operator: string; value: string; valueTo?: string; selectedValues?: string[] }
31
+ >
32
+ }
33
+
34
+ /** A value column to roll up per group. */
35
+ export type ServerAggregation = { col: string; fn: 'sum' | 'avg' | 'min' | 'max' | 'count' }
36
+
37
+ export type ServerRequest = {
38
+ /** Zero-based index of the first row wanted (inclusive). */
39
+ startRow: number
40
+ /** Index just past the last row wanted (exclusive). */
41
+ endRow: number
42
+ pageIndex: number
43
+ pageSize: number
44
+ sortModel: ServerSortModel
45
+ filterModel: ServerFilterModel
46
+ /**
47
+ * Server-side grouping / tree: the columns being grouped on, outer to inner.
48
+ * Omitted / empty for a flat request.
49
+ */
50
+ groupBy?: string[]
51
+ /**
52
+ * The path of group keys the grid is expanding, e.g. `['Germany', 'Berlin']`.
53
+ * Empty (`[]`) asks for the top level. When `groupKeys.length < groupBy.length`
54
+ * the server returns **group rows** (one per distinct key at this level,
55
+ * carrying the group key + aggregates); when they are equal it returns the
56
+ * **leaf rows** under that path.
57
+ */
58
+ groupKeys?: string[]
59
+ /** Value columns to aggregate per group. */
60
+ aggregations?: ServerAggregation[]
61
+ }
62
+
63
+ /**
64
+ * A group row in the server-side group/tree model - one distinct key at a
65
+ * level, with its rolled-up aggregates. The grid renders it with an expander;
66
+ * expanding it fetches its children through the same `getRows`.
67
+ */
68
+ export type ServerGroupRow<TData> = {
69
+ kind: 'group'
70
+ /** Stable id (the group path). */
71
+ id: string
72
+ /** Group keys from the root to this node, e.g. `['Germany', 'Berlin']`. */
73
+ path: string[]
74
+ /** The column this group is on (the `groupBy` entry for this level). */
75
+ field: string
76
+ /** This group's key value. */
77
+ key: string
78
+ /** Zero-based depth (0 = top level). */
79
+ level: number
80
+ expanded: boolean
81
+ loading: boolean
82
+ /** Aggregate values keyed by column id, read from the group's response row. */
83
+ aggregates: Record<string, unknown>
84
+ /** The raw response row for this group (key + aggregates), for cell rendering. */
85
+ data: TData
86
+ }
87
+
88
+ export type ServerLeafRow<TData> = {
89
+ kind: 'leaf'
90
+ id: string
91
+ level: number
92
+ data: TData
93
+ }
94
+
95
+ /**
96
+ * A "load more" affordance emitted at the end of a group whose children are
97
+ * only partially loaded (intra-group paging). Trigger `loadMoreChildren(path)`
98
+ * to fetch the next block.
99
+ */
100
+ export type ServerMoreRow = {
101
+ kind: 'more'
102
+ id: string
103
+ level: number
104
+ /** Path of the parent group whose children to load more of. */
105
+ path: string[]
106
+ /** How many children remain unloaded. */
107
+ remaining: number
108
+ loading: boolean
109
+ }
110
+
111
+ /**
112
+ * A subtotal / footer row emitted after an expanded group's children when
113
+ * `groupFooters` is on. Carries the group's aggregates a second time so a
114
+ * "Total" line sits under the detail.
115
+ */
116
+ export type ServerFooterRow<TData> = {
117
+ kind: 'footer'
118
+ id: string
119
+ level: number
120
+ path: string[]
121
+ /** The group this footer totals (its key). */
122
+ key: string
123
+ aggregates: Record<string, unknown>
124
+ /** The group's response row (key + aggregates), so value columns show totals. */
125
+ data: TData
126
+ }
127
+
128
+ /** A placeholder row shown while a block of children is being fetched. */
129
+ export type ServerSkeletonRow = {
130
+ kind: 'skeleton'
131
+ id: string
132
+ level: number
133
+ }
134
+
135
+ /** A row in the flattened server-side group/tree display list. */
136
+ export type ServerDisplayRow<TData> =
137
+ | ServerGroupRow<TData>
138
+ | ServerLeafRow<TData>
139
+ | ServerMoreRow
140
+ | ServerFooterRow<TData>
141
+ | ServerSkeletonRow
142
+
143
+ export type ServerResult<TData> = {
144
+ rows: ReadonlyArray<TData>
145
+ /** Total row count after filtering (for the pager). */
146
+ rowCount: number
147
+ }
148
+
149
+ export type ServerDataSource<TData> = {
150
+ getRows(request: ServerRequest): Promise<ServerResult<TData>>
151
+ /**
152
+ * Optional write side. Implement whichever your backend supports; the
153
+ * controller exposes matching `createRow` / `updateRow` / `deleteRow`
154
+ * methods that call through and then `refresh()` the current page.
155
+ * Calling a controller method whose source counterpart is missing throws.
156
+ */
157
+ createRow?(input: Partial<TData>): Promise<TData>
158
+ updateRow?(id: string, patch: Partial<TData>): Promise<TData>
159
+ deleteRow?(id: string): Promise<void>
160
+ }
161
+
162
+ export type ServerState<TData> = {
163
+ rows: ReadonlyArray<TData>
164
+ total: number
165
+ loading: boolean
166
+ /** True while a create / update / delete mutation is in flight. */
167
+ saving: boolean
168
+ error: unknown
169
+ pageIndex: number
170
+ pageSize: number
171
+ pageCount: number
172
+ sortModel: ServerSortModel
173
+ filterModel: ServerFilterModel
174
+ }
175
+
176
+ export type ServerController<TData> = {
177
+ /** Re-fetch the current page (e.g. after a mutation). */
178
+ refresh(): void
179
+ setSort(sortModel: ServerSortModel): void
180
+ setFilter(filterModel: ServerFilterModel): void
181
+ setPage(pageIndex: number): void
182
+ setPageSize(pageSize: number): void
183
+ /**
184
+ * Create a row through the source, then refresh the current page. Resolves
185
+ * with the created row. Rejects if the source has no `createRow` (or if the
186
+ * create itself fails - the read state is left untouched on failure).
187
+ */
188
+ createRow(input: Partial<TData>): Promise<TData>
189
+ /**
190
+ * Update a row by id through the source. Non-optimistic: refreshes the page.
191
+ * Optimistic (see `optimistic` + `getRowId` options): patches the local row
192
+ * immediately, then reconciles with the server result, rolling back on error.
193
+ */
194
+ updateRow(id: string, patch: Partial<TData>): Promise<TData>
195
+ /**
196
+ * Delete a row by id through the source. Non-optimistic: refreshes the page.
197
+ * Optimistic: removes the local row immediately, restoring it on error.
198
+ */
199
+ deleteRow(id: string): Promise<void>
200
+ getState(): ServerState<TData>
201
+ /** Stop accepting in-flight responses (call on unmount). */
202
+ dispose(): void
203
+ }
204
+
205
+ export type ServerControllerOptions<TData> = {
206
+ pageSize?: number
207
+ /** Called whenever any of `rows` / `total` / `loading` / page changes. */
208
+ onChange: (state: ServerState<TData>) => void
209
+ /**
210
+ * Apply `updateRow` / `deleteRow` to the local rows immediately (before the
211
+ * server confirms) and roll back on error - so edits feel instant and no
212
+ * refetch is needed. Requires `getRowId` to locate rows; ignored without it.
213
+ * A subsequent `refresh()` reconciles ordering/filtering. Default false.
214
+ */
215
+ optimistic?: boolean
216
+ /** Resolve a row's stable id, so optimistic update/delete can find it in `rows`. */
217
+ getRowId?: (row: TData) => string
218
+ }
219
+
220
+ export function createServerDataSource<TData>(
221
+ source: ServerDataSource<TData>,
222
+ options: ServerControllerOptions<TData>,
223
+ ): ServerController<TData> {
224
+ const state: ServerState<TData> = {
225
+ rows: [],
226
+ total: 0,
227
+ loading: false,
228
+ saving: false,
229
+ error: null,
230
+ pageIndex: 0,
231
+ pageSize: options.pageSize ?? 50,
232
+ pageCount: 1,
233
+ sortModel: [],
234
+ filterModel: {},
235
+ }
236
+
237
+ // Monotonic request id: only the latest fetch is allowed to land, so a slow
238
+ // response for an old sort/filter can't clobber a newer one.
239
+ let requestSeq = 0
240
+ let disposed = false
241
+
242
+ const emit = () => {
243
+ state.pageCount = Math.max(1, Math.ceil(state.total / state.pageSize))
244
+ options.onChange({ ...state })
245
+ }
246
+
247
+ async function fetchPage() {
248
+ if (disposed) return
249
+ const id = ++requestSeq
250
+ state.loading = true
251
+ state.error = null
252
+ emit()
253
+ const startRow = state.pageIndex * state.pageSize
254
+ try {
255
+ const result = await source.getRows({
256
+ startRow,
257
+ endRow: startRow + state.pageSize,
258
+ pageIndex: state.pageIndex,
259
+ pageSize: state.pageSize,
260
+ sortModel: state.sortModel,
261
+ filterModel: state.filterModel,
262
+ // Flat mode: no grouping. Group mode lives in createServerGroupModel.
263
+ groupBy: [],
264
+ groupKeys: [],
265
+ aggregations: [],
266
+ })
267
+ if (disposed || id !== requestSeq) return // stale
268
+ state.rows = result.rows
269
+ state.total = result.rowCount
270
+ state.loading = false
271
+ emit()
272
+ } catch (err) {
273
+ if (disposed || id !== requestSeq) return
274
+ state.rows = []
275
+ state.error = err
276
+ state.loading = false
277
+ emit()
278
+ }
279
+ }
280
+
281
+ // Shared mutation lifecycle: flip `saving`, run the write, refresh the
282
+ // current page on success, and always clear `saving`. A missing source
283
+ // method (or a disposed controller) rejects before anything is emitted.
284
+ function mutate<T>(name: string, thunk: (() => Promise<T>) | null): Promise<T> {
285
+ if (disposed) {
286
+ return Promise.reject(new Error('createServerDataSource: controller is disposed'))
287
+ }
288
+ if (!thunk) {
289
+ return Promise.reject(
290
+ new Error(`createServerDataSource: the datasource does not implement ${name}()`),
291
+ )
292
+ }
293
+ state.saving = true
294
+ emit()
295
+ return (async () => {
296
+ try {
297
+ const result = await thunk()
298
+ await fetchPage()
299
+ return result
300
+ } finally {
301
+ state.saving = false
302
+ emit()
303
+ }
304
+ })()
305
+ }
306
+
307
+ const optimistic = !!options.optimistic && !!options.getRowId
308
+ const getRowId = options.getRowId
309
+
310
+ // Optimistic update: patch the local row, reconcile with the server result,
311
+ // roll back on error. Falls back to the plain refresh path when the row
312
+ // isn't on the current page (nothing local to update).
313
+ async function optimisticUpdate(
314
+ id: string,
315
+ patch: Partial<TData>,
316
+ fn: (id: string, patch: Partial<TData>) => Promise<TData>,
317
+ ): Promise<TData> {
318
+ if (disposed) throw new Error('createServerDataSource: controller is disposed')
319
+ const prevRows = state.rows
320
+ const idx = prevRows.findIndex((r) => getRowId!(r) === id)
321
+ if (idx < 0) return mutate('updateRow', () => fn(id, patch))
322
+
323
+ state.rows = [...prevRows.slice(0, idx), { ...prevRows[idx]!, ...patch }, ...prevRows.slice(idx + 1)]
324
+ state.saving = true
325
+ emit()
326
+ try {
327
+ const result = await fn(id, patch)
328
+ state.rows = state.rows.map((r) => (getRowId!(r) === id ? result : r))
329
+ return result
330
+ } catch (err) {
331
+ state.rows = prevRows
332
+ throw err
333
+ } finally {
334
+ state.saving = false
335
+ emit()
336
+ }
337
+ }
338
+
339
+ // Optimistic delete: drop the local row + decrement total, restore on error.
340
+ async function optimisticDelete(
341
+ id: string,
342
+ fn: (id: string) => Promise<void>,
343
+ ): Promise<void> {
344
+ if (disposed) throw new Error('createServerDataSource: controller is disposed')
345
+ const prevRows = state.rows
346
+ const prevTotal = state.total
347
+ const next = prevRows.filter((r) => getRowId!(r) !== id)
348
+ if (next.length === prevRows.length) return mutate('deleteRow', () => fn(id))
349
+
350
+ state.rows = next
351
+ state.total = Math.max(0, prevTotal - (prevRows.length - next.length))
352
+ state.saving = true
353
+ emit()
354
+ try {
355
+ await fn(id)
356
+ } catch (err) {
357
+ state.rows = prevRows
358
+ state.total = prevTotal
359
+ throw err
360
+ } finally {
361
+ state.saving = false
362
+ emit()
363
+ }
364
+ }
365
+
366
+ return {
367
+ refresh: fetchPage,
368
+ createRow: (input) =>
369
+ mutate('createRow', source.createRow ? () => source.createRow!(input) : null),
370
+ updateRow: (id, patch) => {
371
+ if (!source.updateRow) return mutate('updateRow', null)
372
+ const fn = source.updateRow
373
+ return optimistic ? optimisticUpdate(id, patch, fn) : mutate('updateRow', () => fn(id, patch))
374
+ },
375
+ deleteRow: (id) => {
376
+ if (!source.deleteRow) return mutate('deleteRow', null)
377
+ const fn = source.deleteRow
378
+ return optimistic ? optimisticDelete(id, fn) : mutate('deleteRow', () => fn(id))
379
+ },
380
+ setSort(sortModel) {
381
+ state.sortModel = sortModel
382
+ state.pageIndex = 0
383
+ void fetchPage()
384
+ },
385
+ setFilter(filterModel) {
386
+ state.filterModel = filterModel
387
+ state.pageIndex = 0
388
+ void fetchPage()
389
+ },
390
+ setPage(pageIndex) {
391
+ const clamped = Math.max(0, pageIndex)
392
+ if (clamped === state.pageIndex) return
393
+ state.pageIndex = clamped
394
+ void fetchPage()
395
+ },
396
+ setPageSize(pageSize) {
397
+ state.pageSize = Math.max(1, pageSize)
398
+ state.pageIndex = 0
399
+ void fetchPage()
400
+ },
401
+ getState: () => ({ ...state }),
402
+ dispose() {
403
+ disposed = true
404
+ // An in-flight fetch's resolution short-circuits on `disposed`, so it
405
+ // never clears `loading`. Clear it here (and emit) so a disposed
406
+ // controller doesn't report a permanent loading state.
407
+ if (state.loading) {
408
+ state.loading = false
409
+ emit()
410
+ }
411
+ },
412
+ }
413
+ }