@spfx-fast/sharepoint-ui 0.4.3 → 0.5.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 (282) hide show
  1. package/QUICKSTART.md +13 -128
  2. package/README.md +19 -26
  3. package/components.json +240 -5834
  4. package/dist/accordion.d.ts +11 -0
  5. package/dist/accordion.js +4 -0
  6. package/dist/alert.d.ts +3 -0
  7. package/dist/alert.js +4 -0
  8. package/dist/attachment-list.d.ts +15 -0
  9. package/dist/attachment-list.js +14 -0
  10. package/dist/avatar-group.d.ts +12 -0
  11. package/dist/avatar-group.js +7 -0
  12. package/dist/avatar.d.ts +6 -0
  13. package/dist/avatar.js +5 -0
  14. package/dist/badge.d.ts +3 -0
  15. package/dist/badge.js +4 -0
  16. package/dist/breadcrumb.d.ts +10 -0
  17. package/dist/breadcrumb.js +9 -0
  18. package/dist/button-group.d.ts +6 -0
  19. package/dist/button-group.js +4 -0
  20. package/dist/button.d.ts +3 -0
  21. package/dist/button.js +4 -0
  22. package/dist/card.d.ts +3 -0
  23. package/dist/card.js +4 -0
  24. package/dist/carousel.d.ts +11 -0
  25. package/dist/carousel.js +6 -0
  26. package/dist/checkbox.d.ts +3 -0
  27. package/dist/checkbox.js +4 -0
  28. package/dist/combobox.d.ts +9 -0
  29. package/dist/combobox.js +6 -0
  30. package/dist/command-bar.d.ts +6 -0
  31. package/dist/command-bar.js +4 -0
  32. package/dist/copy-button.d.ts +7 -0
  33. package/dist/copy-button.js +19 -0
  34. package/dist/data-grid.d.ts +25 -0
  35. package/dist/data-grid.js +39 -0
  36. package/dist/date-range-picker.d.ts +12 -0
  37. package/dist/date-range-picker.js +4 -0
  38. package/dist/dialog.d.ts +9 -0
  39. package/dist/dialog.js +21 -0
  40. package/dist/divider.d.ts +3 -0
  41. package/dist/divider.js +4 -0
  42. package/dist/drawer.d.ts +6 -0
  43. package/dist/drawer.js +5 -0
  44. package/dist/empty-state.d.ts +7 -0
  45. package/dist/empty-state.js +5 -0
  46. package/dist/field.d.ts +15 -0
  47. package/dist/field.js +11 -0
  48. package/dist/file-dropzone.d.ts +15 -0
  49. package/dist/file-dropzone.js +21 -0
  50. package/dist/filter-bar.d.ts +9 -0
  51. package/dist/filter-bar.js +9 -0
  52. package/dist/image.d.ts +5 -0
  53. package/dist/image.js +4 -0
  54. package/dist/index.d.ts +68 -78
  55. package/dist/index.js +60 -68
  56. package/dist/input.d.ts +3 -0
  57. package/dist/input.js +4 -0
  58. package/dist/label.d.ts +3 -0
  59. package/dist/label.js +4 -0
  60. package/dist/link.d.ts +3 -0
  61. package/dist/link.js +9 -0
  62. package/dist/list-view.d.ts +29 -0
  63. package/dist/list-view.js +14 -0
  64. package/dist/list.d.ts +6 -0
  65. package/dist/list.js +5 -0
  66. package/dist/lookup-picker.d.ts +12 -0
  67. package/dist/lookup-picker.js +4 -0
  68. package/dist/menu.d.ts +6 -0
  69. package/dist/menu.js +4 -0
  70. package/dist/nav.d.ts +12 -0
  71. package/dist/nav.js +4 -0
  72. package/dist/pagination.d.ts +11 -0
  73. package/dist/pagination.js +5 -0
  74. package/dist/person-picker.d.ts +13 -0
  75. package/dist/person-picker.js +4 -0
  76. package/dist/persona.d.ts +7 -0
  77. package/dist/persona.js +5 -0
  78. package/dist/popover.d.ts +6 -0
  79. package/dist/popover.js +4 -0
  80. package/dist/progress-bar.d.ts +5 -0
  81. package/dist/progress-bar.js +5 -0
  82. package/dist/radio-group.d.ts +6 -0
  83. package/dist/radio-group.js +4 -0
  84. package/dist/radio.d.ts +3 -0
  85. package/dist/radio.js +4 -0
  86. package/dist/rating.d.ts +8 -0
  87. package/dist/rating.js +5 -0
  88. package/dist/react.d.ts +1 -4715
  89. package/dist/react.js +1 -7097
  90. package/dist/select.d.ts +3 -0
  91. package/dist/select.js +4 -0
  92. package/dist/sharepoint-field.d.ts +18 -0
  93. package/dist/sharepoint-field.js +54 -0
  94. package/dist/skeleton.d.ts +6 -0
  95. package/dist/skeleton.js +9 -0
  96. package/dist/spinner.d.ts +5 -0
  97. package/dist/spinner.js +4 -0
  98. package/dist/swatch-picker.d.ts +17 -0
  99. package/dist/swatch-picker.js +11 -0
  100. package/dist/switch.d.ts +3 -0
  101. package/dist/switch.js +4 -0
  102. package/dist/table.d.ts +6 -0
  103. package/dist/table.js +4 -0
  104. package/dist/tabs.d.ts +14 -0
  105. package/dist/tabs.js +30 -0
  106. package/dist/tag-group.d.ts +6 -0
  107. package/dist/tag-group.js +4 -0
  108. package/dist/tag-picker.d.ts +12 -0
  109. package/dist/tag-picker.js +4 -0
  110. package/dist/tag.d.ts +7 -0
  111. package/dist/tag.js +5 -0
  112. package/dist/text.d.ts +5 -0
  113. package/dist/text.js +4 -0
  114. package/dist/textarea.d.ts +3 -0
  115. package/dist/textarea.js +4 -0
  116. package/dist/theme.d.ts +15 -175
  117. package/dist/theme.js +36 -239
  118. package/dist/toast.d.ts +9 -0
  119. package/dist/toast.js +12 -0
  120. package/dist/tree.d.ts +13 -0
  121. package/dist/tree.js +9 -0
  122. package/dist/view-card.d.ts +8 -0
  123. package/dist/view-card.js +4 -0
  124. package/dist/view-switcher.d.ts +13 -0
  125. package/dist/view-switcher.js +7 -0
  126. package/dist/virtual-list.d.ts +11 -0
  127. package/dist/virtual-list.js +25 -0
  128. package/measurements.json +365 -0
  129. package/package.json +14 -46
  130. package/src/theme.css +125 -0
  131. package/AGENTS.md +0 -231
  132. package/dist/appearance.d.ts +0 -6
  133. package/dist/appearance.js +0 -217
  134. package/dist/elements/accordion.d.ts +0 -9
  135. package/dist/elements/accordion.js +0 -338
  136. package/dist/elements/alert.d.ts +0 -2
  137. package/dist/elements/alert.js +0 -86
  138. package/dist/elements/avatar-group-primitives.d.ts +0 -3
  139. package/dist/elements/avatar-group-primitives.js +0 -189
  140. package/dist/elements/avatar-group.d.ts +0 -2
  141. package/dist/elements/avatar-group.js +0 -110
  142. package/dist/elements/avatar.d.ts +0 -4
  143. package/dist/elements/avatar.js +0 -251
  144. package/dist/elements/badge.d.ts +0 -8
  145. package/dist/elements/badge.js +0 -182
  146. package/dist/elements/breadcrumb.d.ts +0 -4
  147. package/dist/elements/breadcrumb.js +0 -233
  148. package/dist/elements/button-group.d.ts +0 -1
  149. package/dist/elements/button-group.js +0 -20
  150. package/dist/elements/button-variants.d.ts +0 -6
  151. package/dist/elements/button-variants.js +0 -339
  152. package/dist/elements/button.d.ts +0 -5
  153. package/dist/elements/button.js +0 -233
  154. package/dist/elements/card-primitives.d.ts +0 -3
  155. package/dist/elements/card-primitives.js +0 -83
  156. package/dist/elements/card.d.ts +0 -5
  157. package/dist/elements/card.js +0 -213
  158. package/dist/elements/carousel.d.ts +0 -92
  159. package/dist/elements/carousel.js +0 -1115
  160. package/dist/elements/color-picker.d.ts +0 -24
  161. package/dist/elements/color-picker.js +0 -1004
  162. package/dist/elements/combobox.d.ts +0 -1
  163. package/dist/elements/combobox.js +0 -1012
  164. package/dist/elements/data-grid-model.d.ts +0 -120
  165. package/dist/elements/data-grid-model.js +0 -294
  166. package/dist/elements/data-grid.d.ts +0 -30
  167. package/dist/elements/data-grid.js +0 -1576
  168. package/dist/elements/date-picker.d.ts +0 -1
  169. package/dist/elements/date-picker.js +0 -486
  170. package/dist/elements/dialog.d.ts +0 -23
  171. package/dist/elements/dialog.js +0 -409
  172. package/dist/elements/divider.d.ts +0 -2
  173. package/dist/elements/divider.js +0 -66
  174. package/dist/elements/drawer.d.ts +0 -3
  175. package/dist/elements/drawer.js +0 -308
  176. package/dist/elements/field-composition.d.ts +0 -26
  177. package/dist/elements/field-composition.js +0 -133
  178. package/dist/elements/field.d.ts +0 -1
  179. package/dist/elements/field.js +0 -67
  180. package/dist/elements/file-upload.d.ts +0 -6
  181. package/dist/elements/file-upload.js +0 -211
  182. package/dist/elements/floating-position.d.ts +0 -36
  183. package/dist/elements/floating-position.js +0 -92
  184. package/dist/elements/image.d.ts +0 -28
  185. package/dist/elements/image.js +0 -38
  186. package/dist/elements/info.d.ts +0 -9
  187. package/dist/elements/info.js +0 -102
  188. package/dist/elements/input.d.ts +0 -5
  189. package/dist/elements/input.js +0 -255
  190. package/dist/elements/label.d.ts +0 -15
  191. package/dist/elements/label.js +0 -56
  192. package/dist/elements/link.d.ts +0 -1
  193. package/dist/elements/link.js +0 -92
  194. package/dist/elements/list.d.ts +0 -19
  195. package/dist/elements/list.js +0 -297
  196. package/dist/elements/menu.d.ts +0 -33
  197. package/dist/elements/menu.js +0 -1103
  198. package/dist/elements/message-bar.d.ts +0 -10
  199. package/dist/elements/message-bar.js +0 -327
  200. package/dist/elements/nav.d.ts +0 -32
  201. package/dist/elements/nav.js +0 -794
  202. package/dist/elements/overflow.d.ts +0 -10
  203. package/dist/elements/overflow.js +0 -218
  204. package/dist/elements/persona.d.ts +0 -3
  205. package/dist/elements/persona.js +0 -125
  206. package/dist/elements/popover.d.ts +0 -77
  207. package/dist/elements/popover.js +0 -840
  208. package/dist/elements/progress-bar.d.ts +0 -4
  209. package/dist/elements/progress-bar.js +0 -82
  210. package/dist/elements/radio-group.d.ts +0 -1
  211. package/dist/elements/radio-group.js +0 -303
  212. package/dist/elements/rating-display.d.ts +0 -2
  213. package/dist/elements/rating-display.js +0 -125
  214. package/dist/elements/rating.d.ts +0 -2
  215. package/dist/elements/rating.js +0 -206
  216. package/dist/elements/rich-text-editor.d.ts +0 -32
  217. package/dist/elements/rich-text-editor.js +0 -1367
  218. package/dist/elements/search.d.ts +0 -3
  219. package/dist/elements/search.js +0 -200
  220. package/dist/elements/select.d.ts +0 -6
  221. package/dist/elements/select.js +0 -291
  222. package/dist/elements/shared.d.ts +0 -22
  223. package/dist/elements/shared.js +0 -409
  224. package/dist/elements/sharepoint-field-basic-controls.d.ts +0 -1
  225. package/dist/elements/sharepoint-field-basic-controls.js +0 -14
  226. package/dist/elements/sharepoint-fields.d.ts +0 -29
  227. package/dist/elements/sharepoint-fields.js +0 -460
  228. package/dist/elements/skeleton.d.ts +0 -6
  229. package/dist/elements/skeleton.js +0 -91
  230. package/dist/elements/slider.d.ts +0 -1
  231. package/dist/elements/slider.js +0 -248
  232. package/dist/elements/spin-button.d.ts +0 -7
  233. package/dist/elements/spin-button.js +0 -499
  234. package/dist/elements/spinner.d.ts +0 -4
  235. package/dist/elements/spinner.js +0 -124
  236. package/dist/elements/swatch-picker.d.ts +0 -5
  237. package/dist/elements/swatch-picker.js +0 -363
  238. package/dist/elements/table.d.ts +0 -21
  239. package/dist/elements/table.js +0 -261
  240. package/dist/elements/tabs.d.ts +0 -1
  241. package/dist/elements/tabs.js +0 -276
  242. package/dist/elements/tag-picker.d.ts +0 -29
  243. package/dist/elements/tag-picker.js +0 -715
  244. package/dist/elements/tags.d.ts +0 -21
  245. package/dist/elements/tags.js +0 -421
  246. package/dist/elements/teaching-popover.d.ts +0 -32
  247. package/dist/elements/teaching-popover.js +0 -412
  248. package/dist/elements/text.d.ts +0 -9
  249. package/dist/elements/text.js +0 -75
  250. package/dist/elements/textarea.d.ts +0 -1
  251. package/dist/elements/textarea.js +0 -182
  252. package/dist/elements/toast.d.ts +0 -25
  253. package/dist/elements/toast.js +0 -337
  254. package/dist/elements/toaster.d.ts +0 -6
  255. package/dist/elements/toaster.js +0 -357
  256. package/dist/elements/toggle.d.ts +0 -2
  257. package/dist/elements/toggle.js +0 -246
  258. package/dist/elements/toolbar.d.ts +0 -12
  259. package/dist/elements/toolbar.js +0 -381
  260. package/dist/elements/tooltip.d.ts +0 -76
  261. package/dist/elements/tooltip.js +0 -527
  262. package/dist/elements/tree-model.d.ts +0 -19
  263. package/dist/elements/tree-model.js +0 -34
  264. package/dist/elements/tree.d.ts +0 -5
  265. package/dist/elements/tree.js +0 -273
  266. package/dist/elements/view-card.d.ts +0 -2
  267. package/dist/elements/view-card.js +0 -78
  268. package/dist/elements/virtual-list.d.ts +0 -41
  269. package/dist/elements/virtual-list.js +0 -369
  270. package/dist/elements.d.ts +0 -73
  271. package/dist/elements.js +0 -210
  272. package/dist/sharepoint-fields.d.ts +0 -135
  273. package/dist/sharepoint-fields.js +0 -402
  274. package/dist/virtualizer-hooks.d.ts +0 -80
  275. package/dist/virtualizer-hooks.js +0 -253
  276. package/scripts/generate-token-index.mjs +0 -43
  277. package/scripts/sync-component-catalog-signatures.mjs +0 -55
  278. package/scripts/validate-component-catalog.mjs +0 -44
  279. package/skills/sharepoint-ui/SKILL.md +0 -12
  280. package/skills/sharepoint-ui/references/choosing-components.md +0 -20
  281. package/skills/sharepoint-ui/references/sharepoint-patterns.md +0 -17
  282. package/tokens.json +0 -3777
@@ -1,369 +0,0 @@
1
- import { base } from "./shared.js";
2
- /** Prefix-sum index for measured rows; point updates and offset lookups are O(log n). */
3
- export class VariableSizeIndex {
4
- sizes = new Float64Array(0);
5
- tree = new Float64Array(1);
6
- estimate = 40;
7
- count = 0;
8
- uniform = true;
9
- constructor(count = 0, estimate = 40, sizes) { this.reset(count, estimate, sizes); }
10
- get length() { return this.count; }
11
- get totalSize() { return this.offset(this.length); }
12
- reset(count, estimate, sizes) {
13
- const safeCount = Math.max(0, Math.floor(Number.isFinite(count) ? count : 0));
14
- this.estimate = Number.isFinite(estimate) && estimate > 0 ? estimate : 40;
15
- this.count = safeCount;
16
- if (sizes === undefined) {
17
- this.uniform = true;
18
- this.sizes = new Float64Array(0);
19
- this.tree = new Float64Array(1);
20
- return;
21
- }
22
- this.uniform = false;
23
- this.sizes = new Float64Array(safeCount);
24
- for (let i = 0; i < safeCount; i++) {
25
- const size = sizes?.[i];
26
- this.sizes[i] = Number.isFinite(size) && size > 0 ? Math.max(1, size) : this.estimate;
27
- }
28
- this.tree = new Float64Array(safeCount + 1);
29
- for (let i = 1; i <= safeCount; i++) {
30
- this.tree[i] += this.sizes[i - 1];
31
- const parent = i + (i & -i);
32
- if (parent <= safeCount)
33
- this.tree[parent] += this.tree[i];
34
- }
35
- }
36
- size(index) { return this.uniform ? this.estimate : this.sizes[index] ?? this.estimate; }
37
- offset(index) {
38
- let i = Math.max(0, Math.min(this.length, Math.floor(index)));
39
- if (this.uniform)
40
- return i * this.estimate;
41
- let sum = 0;
42
- for (; i > 0; i -= i & -i)
43
- sum += this.tree[i];
44
- return sum;
45
- }
46
- set(index, size) {
47
- if (!Number.isInteger(index) || index < 0 || index >= this.length || !Number.isFinite(size) || size <= 0)
48
- return 0;
49
- const next = Math.max(1, size);
50
- if (this.uniform) {
51
- if (Math.abs(next - this.estimate) < 0.5)
52
- return 0;
53
- this.uniform = false;
54
- this.sizes = new Float64Array(this.count).fill(this.estimate);
55
- this.tree = new Float64Array(this.count + 1);
56
- for (let i = 1; i <= this.count; i++) {
57
- this.tree[i] += this.sizes[i - 1];
58
- const parent = i + (i & -i);
59
- if (parent <= this.count)
60
- this.tree[parent] += this.tree[i];
61
- }
62
- }
63
- const delta = next - this.sizes[index];
64
- if (Math.abs(delta) < 0.5)
65
- return 0;
66
- this.sizes[index] = next;
67
- for (let i = index + 1; i < this.tree.length; i += i & -i)
68
- this.tree[i] += delta;
69
- return delta;
70
- }
71
- indexAt(offset) {
72
- if (!this.length || offset <= 0)
73
- return 0;
74
- const target = Math.min(offset, Math.max(0, this.totalSize - Number.EPSILON));
75
- if (this.uniform)
76
- return Math.max(0, Math.min(this.length - 1, Math.floor(target / this.estimate)));
77
- let index = 0, sum = 0, bit = 1;
78
- while (bit * 2 <= this.length)
79
- bit *= 2;
80
- for (; bit > 0; bit = Math.floor(bit / 2)) {
81
- const next = index + bit;
82
- if (next <= this.length && sum + this.tree[next] <= target) {
83
- index = next;
84
- sum += this.tree[next];
85
- }
86
- }
87
- return Math.min(index, this.length - 1);
88
- }
89
- }
90
- /** Fixed or measured one-dimensional virtual list. DOM work is bounded by the viewport plus overscan. */
91
- export function defineVirtualList() {
92
- if (customElements.get("spui-virtual-list"))
93
- return;
94
- class SpuiVirtualList extends HTMLElement {
95
- static observedAttributes = ["label", "aria-label", "row-height", "item-size", "overscan", "measure-items", "axis"];
96
- data = [];
97
- source;
98
- sourceUnsubscribe;
99
- activeRequest;
100
- completedRange = "";
101
- renderer;
102
- keyOf;
103
- viewport;
104
- content;
105
- resizeObserver;
106
- rows = new Map();
107
- pool = [];
108
- frame = 0;
109
- currentScrollOffset = 0;
110
- heightIndex = new VariableSizeIndex();
111
- get axis() { return this.getAttribute("axis") === "horizontal" ? "horizontal" : "vertical"; }
112
- set axis(value) { this.setAttribute("axis", value === "horizontal" ? "horizontal" : "vertical"); }
113
- get itemSize() { return this.positiveNumber(this.getAttribute("item-size") ?? this.getAttribute("row-height"), 40); }
114
- set itemSize(value) { this.setAttribute("item-size", String(value)); }
115
- get rowHeight() { return this.itemSize; }
116
- set rowHeight(value) { this.setAttribute("row-height", String(value)); }
117
- get items() { return this.data; }
118
- set items(value) { this.clearDataSource(); this.data = Array.isArray(value) ? value : []; this.heightIndex.reset(this.data.length, this.itemSize); this.paint(true); }
119
- get dataSource() { return this.source; }
120
- set dataSource(value) {
121
- if (this.source === value)
122
- return;
123
- this.clearDataSource();
124
- this.source = value;
125
- this.observeDataSource();
126
- this.heightIndex.reset(this.itemCount(), this.itemSize);
127
- this.paint(true);
128
- }
129
- get renderItem() { return this.renderer; }
130
- set renderItem(value) { this.renderer = value; this.paint(true); }
131
- get itemKey() { return this.keyOf; }
132
- set itemKey(value) { this.keyOf = value; this.paint(true); }
133
- get measureItems() { return this.hasAttribute("measure-items"); }
134
- set measureItems(value) { this.toggleAttribute("measure-items", Boolean(value)); }
135
- connectedCallback() {
136
- if (!this.shadowRoot)
137
- this.render();
138
- this.resizeObserver ??= new ResizeObserver(entries => this.onResize(entries));
139
- this.observeDataSource();
140
- if (this.viewport)
141
- this.resizeObserver.observe(this.viewport);
142
- this.paint();
143
- }
144
- disconnectedCallback() { cancelAnimationFrame(this.frame); this.frame = 0; this.resizeObserver?.disconnect(); this.activeRequest?.controller.abort(); this.activeRequest = undefined; this.sourceUnsubscribe?.(); this.sourceUnsubscribe = undefined; this.completedRange = ""; }
145
- attributeChangedCallback(name, previous, next) {
146
- if (previous !== next && ["row-height", "item-size", "measure-items", "axis"].includes(name)) {
147
- this.heightIndex.reset(this.data.length, this.itemSize);
148
- if (name === "axis" && this.viewport) {
149
- this.viewport.scrollTop = 0;
150
- this.viewport.scrollLeft = 0;
151
- this.currentScrollOffset = 0;
152
- }
153
- }
154
- this.paint(true);
155
- }
156
- render() {
157
- const shadow = this.attachShadow({ mode: "open" });
158
- const style = document.createElement("style");
159
- style.textContent = `${base}:host{display:block;min-width:0;min-height:0}.viewport{box-sizing:border-box;position:relative;overflow:auto;overscroll-behavior:contain;outline:none}.viewport:focus-visible{outline:2px solid var(--spui-focus-ring,var(--spui-ui-accent,#0078d4));outline-offset:2px}.content{position:relative;min-width:0;min-height:0}.row{box-sizing:border-box;position:absolute;top:0;display:flex;align-items:center;background:var(--spui-list-row-background,transparent);color:inherit}.row:hover{background:var(--spui-list-row-hover, var(--spui-semantic-list-item-hover-background,rgba(0,0,0,.04)))}@media(prefers-reduced-motion:reduce){.row{scroll-behavior:auto}}`;
160
- this.viewport = document.createElement("div");
161
- this.viewport.className = "viewport";
162
- this.viewport.part.add("viewport");
163
- this.viewport.setAttribute("role", "list");
164
- this.viewport.tabIndex = 0;
165
- this.viewport.addEventListener("scroll", () => {
166
- this.currentScrollOffset = this.scrollOffset();
167
- if (!this.frame)
168
- this.frame = requestAnimationFrame(() => { this.frame = 0; this.paint(); });
169
- }, { passive: true });
170
- this.content = document.createElement("div");
171
- this.content.className = "content";
172
- this.content.part.add("content");
173
- this.viewport.append(this.content);
174
- shadow.append(style, this.viewport);
175
- }
176
- scrollToIndex(index, align = "start", behavior = "auto") {
177
- if (!this.viewport || !this.itemCount())
178
- return;
179
- const itemSize = this.itemSize;
180
- const safeIndex = Math.max(0, Math.min(this.itemCount() - 1, Math.floor(index)));
181
- const offset = this.measureItems ? this.heightIndex.offset(safeIndex) : safeIndex * itemSize;
182
- const size = this.measureItems ? this.heightIndex.size(safeIndex) : itemSize;
183
- const viewportSize = this.axis === "horizontal" ? this.viewport.clientWidth : this.viewport.clientHeight;
184
- const destination = align === "center" ? offset - (viewportSize - size) / 2 : align === "end" ? offset - viewportSize + size : offset;
185
- this.setScrollOffset(Math.max(0, destination), behavior);
186
- this.currentScrollOffset = this.scrollOffset();
187
- this.paint();
188
- }
189
- paint(force = false) {
190
- if (!this.isConnected || !this.viewport || !this.content)
191
- return;
192
- const itemSize = this.itemSize;
193
- const horizontal = this.axis === "horizontal";
194
- const overscanValue = this.hasAttribute("overscan") ? Number(this.getAttribute("overscan")) : 4;
195
- const overscan = Number.isFinite(overscanValue) ? Math.max(0, Math.min(50, Math.floor(overscanValue))) : 4;
196
- const count = this.itemCount();
197
- this.viewport.style.width = horizontal ? "var(--spui-list-width,320px)" : "100%";
198
- this.viewport.style.height = horizontal ? `var(--spui-list-height,${itemSize}px)` : "var(--spui-list-height,320px)";
199
- const viewportSize = (horizontal ? this.viewport.clientWidth : this.viewport.clientHeight) || 320;
200
- const firstVisible = this.measureItems ? this.heightIndex.indexAt(this.currentScrollOffset) : Math.floor(this.currentScrollOffset / itemSize);
201
- const lastVisible = this.measureItems ? this.heightIndex.indexAt(this.currentScrollOffset + viewportSize) + 1 : Math.ceil((this.currentScrollOffset + viewportSize) / itemSize);
202
- const first = Math.max(0, firstVisible - overscan);
203
- const last = Math.min(count, lastVisible + overscan);
204
- this.requestRange(first, last);
205
- this.viewport.setAttribute("aria-label", this.getAttribute("label") || this.getAttribute("aria-label") || "Items");
206
- this.viewport.setAttribute("aria-busy", String(Boolean(this.activeRequest)));
207
- const totalSize = this.measureItems ? this.heightIndex.totalSize : count * itemSize;
208
- this.content.style.width = horizontal ? `${totalSize}px` : "100%";
209
- this.content.style.height = horizontal ? "100%" : `${totalSize}px`;
210
- for (const [index, row] of this.rows) {
211
- if (index < first || index >= last) {
212
- row.remove();
213
- this.resizeObserver?.unobserve(row);
214
- this.rows.delete(index);
215
- this.pool.push(row);
216
- }
217
- }
218
- for (let index = first; index < last; index++) {
219
- const item = this.source ? this.source.getItem(index) : this.items[index];
220
- const key = this.keyOf ? String(this.keyOf(item, index)) : String(index);
221
- let row = this.rows.get(index);
222
- if (!row) {
223
- row = this.pool.pop() ?? Object.assign(document.createElement("div"), { className: "row" });
224
- row.part.add("row");
225
- row.setAttribute("role", "listitem");
226
- this.rows.set(index, row);
227
- }
228
- row.setAttribute("aria-posinset", String(index + 1));
229
- row.setAttribute("aria-setsize", String(count));
230
- const itemOffset = this.measureItems ? this.heightIndex.offset(index) : index * itemSize;
231
- if (horizontal) {
232
- row.style.insetInline = "";
233
- row.style.insetInlineStart = "0";
234
- row.style.width = this.measureItems ? "auto" : `${itemSize}px`;
235
- row.style.minWidth = this.measureItems ? `${itemSize}px` : "";
236
- row.style.height = "100%";
237
- row.style.minHeight = "";
238
- row.style.paddingInline = "";
239
- row.style.paddingBlock = "var(--spui-list-row-padding,12px)";
240
- row.style.borderBlockEnd = "";
241
- row.style.borderInlineEnd = "1px solid var(--spui-ui-stroke,var(--spui-semantic-body-divider,#edebe9))";
242
- row.style.transform = `translateX(${this.isRtl() ? -itemOffset : itemOffset}px)`;
243
- }
244
- else {
245
- row.style.insetInline = "0";
246
- row.style.insetInlineStart = "";
247
- row.style.width = "";
248
- row.style.minWidth = "";
249
- row.style.height = this.measureItems ? "auto" : `${itemSize}px`;
250
- row.style.minHeight = this.measureItems ? `${itemSize}px` : "";
251
- row.style.paddingInline = "var(--spui-list-row-padding,12px)";
252
- row.style.paddingBlock = "";
253
- row.style.borderBlockEnd = "1px solid var(--spui-ui-stroke,var(--spui-semantic-body-divider,#edebe9))";
254
- row.style.borderInlineEnd = "";
255
- row.style.transform = `translateY(${itemOffset}px)`;
256
- }
257
- row.dataset.index = String(index);
258
- row.dataset.key = key;
259
- if (force || row.spuiItem !== item || row.spuiKey !== key) {
260
- const output = this.renderItem?.(item, index) ?? String(item ?? "");
261
- row.replaceChildren();
262
- if (output instanceof Node)
263
- row.append(output);
264
- else
265
- row.textContent = String(output);
266
- row.spuiItem = item;
267
- row.spuiKey = key;
268
- }
269
- this.content.append(row);
270
- if (this.measureItems)
271
- this.resizeObserver?.observe(row);
272
- }
273
- }
274
- itemCount() {
275
- const length = this.source?.length ?? this.data.length;
276
- return Number.isFinite(length) ? Math.max(0, Math.floor(length)) : 0;
277
- }
278
- requestRange(start, end) {
279
- const source = this.source;
280
- if (!source || start >= end || !Array.from({ length: end - start }, (_, offset) => source.getItem(start + offset)).some(item => item === undefined))
281
- return;
282
- const key = `${start}:${end}`;
283
- if (this.completedRange === key || this.activeRequest?.key === key)
284
- return;
285
- this.activeRequest?.controller.abort();
286
- const request = { key, controller: new AbortController() };
287
- this.activeRequest = request;
288
- this.viewport?.setAttribute("aria-busy", "true");
289
- Promise.resolve().then(() => source.loadRange(start, end, request.controller.signal)).then(() => {
290
- if (this.activeRequest !== request || request.controller.signal.aborted)
291
- return;
292
- if (Array.from({ length: end - start }, (_, offset) => source.getItem(start + offset)).some(item => item === undefined)) {
293
- this.activeRequest = undefined;
294
- this.viewport?.setAttribute("aria-busy", "false");
295
- this.dispatchEvent(new CustomEvent("spui-data-load-error", { detail: { error: new Error("loadRange resolved before every requested item was available"), start, end }, bubbles: true, composed: true }));
296
- return;
297
- }
298
- this.completedRange = key;
299
- this.activeRequest = undefined;
300
- this.paint(true);
301
- }, error => {
302
- if (this.activeRequest !== request || request.controller.signal.aborted)
303
- return;
304
- this.activeRequest = undefined;
305
- this.viewport?.setAttribute("aria-busy", "false");
306
- this.dispatchEvent(new CustomEvent("spui-data-load-error", { detail: { error, start, end }, bubbles: true, composed: true }));
307
- });
308
- }
309
- clearDataSource() {
310
- this.activeRequest?.controller.abort();
311
- this.activeRequest = undefined;
312
- this.sourceUnsubscribe?.();
313
- this.sourceUnsubscribe = undefined;
314
- this.source = undefined;
315
- this.completedRange = "";
316
- }
317
- observeDataSource() {
318
- this.sourceUnsubscribe ??= this.source?.subscribe?.(() => { this.completedRange = ""; this.heightIndex.reset(this.itemCount(), this.itemSize); this.paint(true); });
319
- }
320
- onResize(entries) {
321
- if (!this.viewport)
322
- return;
323
- let changed = false, scrollAdjustment = 0;
324
- const firstVisible = this.measureItems ? this.heightIndex.indexAt(this.scrollOffset()) : 0;
325
- const viewportSize = this.axis === "horizontal" ? this.viewport.clientWidth : this.viewport.clientHeight;
326
- const scrollExtent = this.axis === "horizontal" ? this.viewport.scrollWidth : this.heightIndex.totalSize;
327
- const anchoredAtEnd = this.currentScrollOffset >= Math.max(0, scrollExtent - viewportSize * 2);
328
- for (const entry of entries) {
329
- if (entry.target === this.viewport) {
330
- this.paint();
331
- continue;
332
- }
333
- const index = Number(entry.target.dataset.index);
334
- if (!this.measureItems || !Number.isInteger(index))
335
- continue;
336
- const rect = entry.target.getBoundingClientRect();
337
- const delta = this.heightIndex.set(index, this.axis === "horizontal" ? rect.width : rect.height);
338
- if (delta) {
339
- changed = true;
340
- if (anchoredAtEnd || index < firstVisible)
341
- scrollAdjustment += delta;
342
- }
343
- }
344
- if (!changed)
345
- return;
346
- if (scrollAdjustment) {
347
- const offset = this.currentScrollOffset + scrollAdjustment;
348
- this.setScrollOffset(offset);
349
- this.currentScrollOffset = this.scrollOffset();
350
- }
351
- this.paint();
352
- }
353
- scrollOffset() { return this.axis === "horizontal" ? Math.abs(this.viewport?.scrollLeft ?? 0) : this.viewport?.scrollTop ?? 0; }
354
- setScrollOffset(offset, behavior = "auto") {
355
- if (!this.viewport)
356
- return;
357
- if (this.axis === "horizontal")
358
- this.viewport.scrollTo({ left: this.isRtl() ? -offset : offset, behavior });
359
- else
360
- this.viewport.scrollTo({ top: offset, behavior });
361
- }
362
- isRtl() { return this.axis === "horizontal" && getComputedStyle(this.viewport ?? this).direction === "rtl"; }
363
- positiveNumber(value, fallback) {
364
- const number = Number(value);
365
- return Number.isFinite(number) && number > 0 ? Math.floor(number) : fallback;
366
- }
367
- }
368
- customElements.define("spui-virtual-list", SpuiVirtualList);
369
- }
@@ -1,73 +0,0 @@
1
- export { createLabel, getLabelStyle, type LabelOptions, type LabelSize, type LabelWeight } from "./elements/label.js";
2
- export { defineInfoButton, createInfoLabel, type InfoLabelOptions, type InfoPlacement } from "./elements/info.js";
3
- export { defineCarousel, defineCarouselCard, defineCarouselNav, defineCarouselNavButton, defineCarouselNavImageButton, defineCarouselButton, defineCarouselAutoplayButton, defineCarouselNavContainer, defineCarouselSlider, defineCarouselViewport } from "./elements/carousel.js";
4
- export type { CarouselAlign, CarouselAppearance, CarouselMotion, CarouselAnnouncerFunction, SharePointCarouselElement, SharePointCarouselCardElement, SharePointCarouselNavButtonElement, SharePointCarouselButtonElement, SharePointCarouselAutoplayButtonElement, SharePointCarouselSliderElement } from "./elements/carousel.js";
5
- export { defineOverflow, defineOverflowItem, defineOverflowDivider, type OverflowAxis, type OverflowState } from "./elements/overflow.js";
6
- export { defineSwatchPicker, defineColorSwatch, defineImageSwatch, defineEmptySwatch, defineSwatchPickerRow } from "./elements/swatch-picker.js";
7
- export { createTableColumn, defineTable, defineTableHeader, defineTableBody, defineTableRow, defineTableHeaderCell, defineTableCell, defineTableCellLayout, defineTableCellActions, defineTableResizeHandle, defineTableSelectionCell, type CreateTableColumnOptions, type TableColumnDefinition, type TableColumnId } from "./elements/table.js";
8
- export type { TextFont, TextSize, TextTag, TextWeight } from "./elements/text.js";
9
- export { defineButton } from "./elements/button.js";
10
- export { defineSharePointField, type SharePointFieldElement, type SharePointFieldOption, type SharePointFieldValueChangeDetail } from "./elements/sharepoint-fields.js";
11
- export { defineButtonGroup } from "./elements/button-group.js";
12
- export { defineCompoundButton, defineMenuButton, defineSplitButton, defineToggleButton } from "./elements/button-variants.js";
13
- export type { ButtonAppearance, ButtonShape, ButtonSize } from "./elements/button.js";
14
- export { defineInput, type InputAppearance, type InputSize, type InputType } from "./elements/input.js";
15
- export { defineFileUpload, type FileUploadError } from "./elements/file-upload.js";
16
- export { createImage, getImageStyle, type ImageOptions, type ImageFit, type ImageShape } from "./elements/image.js";
17
- export { defineField } from "./elements/field.js";
18
- export { createFormField, type FieldOrientation, type FieldValidationState, type FormFieldOptions } from "./elements/field-composition.js";
19
- export { defineCard, type CardAppearance, type CardOrientation, type CardSize } from "./elements/card.js";
20
- export { defineCardFooter, defineCardHeader, defineCardPreview } from "./elements/card-primitives.js";
21
- export { defineBadge, defineCounterBadge, definePresenceBadge, type BadgeAppearance, type BadgeColor, type BadgeShape, type BadgeSize, type PresenceBadgeStatus } from "./elements/badge.js";
22
- export { defineCheckbox, defineSwitch } from "./elements/toggle.js";
23
- export { defineTextArea } from "./elements/textarea.js";
24
- export { defineSpinner, type SpinnerAppearance, type SpinnerLabelPosition, type SpinnerSize } from "./elements/spinner.js";
25
- export { defineMessageBar, defineMessageBarActions, defineMessageBarBody, defineMessageBarGroup, defineMessageBarTitle, type MessageBarGroupAnimation, type MessageBarIntent, type MessageBarLayout, type MessageBarPoliteness, type MessageBarShape } from "./elements/message-bar.js";
26
- export { defineViewCard } from "./elements/view-card.js";
27
- export { defineDialog, defineDialogActions, defineDialogBody, defineDialogContent, defineDialogSurface, defineDialogTitle, defineDialogTrigger } from "./elements/dialog.js";
28
- export { defineDrawer, defineInlineDrawer } from "./elements/drawer.js";
29
- export { defineProgressBar, type ProgressBarColor, type ProgressBarShape, type ProgressBarThickness } from "./elements/progress-bar.js";
30
- export { defineSelect } from "./elements/select.js";
31
- export type { SelectAppearance, SelectSize, SelectChangeData } from "./elements/select.js";
32
- export { defineRadioGroup } from "./elements/radio-group.js";
33
- export { defineSpinButton } from "./elements/spin-button.js";
34
- export type { SpinButtonAppearance, SpinButtonSize, SpinButtonChangeData } from "./elements/spin-button.js";
35
- export { defineSlider } from "./elements/slider.js";
36
- export { defineDatePicker } from "./elements/date-picker.js";
37
- export { defineCombobox } from "./elements/combobox.js";
38
- export { defineRichTextEditor, getRichTextEditorFieldOptions, type SharePointMultiLineField, type SharePointRichTextEditorElement, type RichTextEditorLink, type RichTextEditorLinkPicker } from "./elements/rich-text-editor.js";
39
- export { defineAlert, type AlertAppearance } from "./elements/alert.js";
40
- export { defineSkeleton, defineSkeletonItem, type SkeletonAnimation, type SkeletonAppearance, type SkeletonItemSize, type SkeletonShape } from "./elements/skeleton.js";
41
- export { defineLink } from "./elements/link.js";
42
- export { defineDivider, type DividerAppearance } from "./elements/divider.js";
43
- export { defineAccordion, defineAccordionHeader, defineAccordionPanel, type AccordionItemValue, type AccordionNavigation, type AccordionToggleData } from "./elements/accordion.js";
44
- export { defineAvatar } from "./elements/avatar.js";
45
- export { defineAvatarGroup } from "./elements/avatar-group.js";
46
- export { defineAvatarGroupItem, defineAvatarGroupPopover } from "./elements/avatar-group-primitives.js";
47
- export { definePersona, type PersonaPresence, type PersonaSize } from "./elements/persona.js";
48
- export { defineVirtualList, type VirtualListDataSource, type VirtualListItemRenderer, type SharePointVirtualListElement } from "./elements/virtual-list.js";
49
- export { defineDataGrid, type DataGridCellRenderer, type DataGridCellsEditHandler, type DataGridRowHeightGetter, type DataGridSourceSelectionHandler, type SharePointDataGridElement } from "./elements/data-grid.js";
50
- export { clampDataGridRowHeight, fitDataGridColumnWidths, formatDataGridClipboard, getDataGridColumnSizing, isDataGridRowSelected, parseDataGridClipboard, parseDataGridClipboardValue, setDataGridRowSelected, writeDataGridClipboardText, type DataGridCellEdit, type DataGridCellEditError, type DataGridClipboardColumn, type DataGridColumn, type DataGridColumnSizingOption, type DataGridColumnSizingOptions, type DataGridColumnWidths, type DataGridDataSource, type DataGridDataSourceRow, type DataGridSelectionModel, type DataGridEditValue, type DataGridFocusMode, type DataGridSelectionAppearance, type DataGridSort, type DataGridSortDirection } from "./elements/data-grid-model.js";
51
- export { defineTree, type TreeCheckedItem, type TreeItemRenderer } from "./elements/tree.js";
52
- export { type TreeNode, type VisibleTreeNode } from "./elements/tree-model.js";
53
- export { defineInteractionTag, defineInteractionTagPrimary, defineInteractionTagSecondary, defineTag, defineTagGroup, type InteractionTagSelectData, type SharePointTagGroupElement, type TagAppearance, type TagGroupSelectData, type TagShape, type TagSize } from "./elements/tags.js";
54
- export { defineTagPicker } from "./elements/tag-picker.js";
55
- export { defineRating } from "./elements/rating.js";
56
- export { defineRatingDisplay, defineRatingItem } from "./elements/rating-display.js";
57
- export { defineList, defineListItem, type ListItemValue, type ListNavigationMode, type ListSelectionMode } from "./elements/list.js";
58
- export { defineBreadcrumb, defineBreadcrumbButton, defineBreadcrumbDivider, defineBreadcrumbItem } from "./elements/breadcrumb.js";
59
- export { defineTabs } from "./elements/tabs.js";
60
- export { defineTooltip, type TooltipAppearance, type TooltipPosition, type TooltipPositioning, type TooltipPositioningBoundary, type TooltipPositioningEndData, type TooltipPositioningImperativeRef, type TooltipPositioningOffset, type TooltipPositioningOffsetParams, type TooltipPositioningOptions, type TooltipPositioningPlacement, type TooltipPositioningRect, type TooltipPositioningRef, type TooltipPositioningShorthand, type TooltipPositioningTarget, type TooltipPositioningTargetRect, type TooltipRelationship, type TooltipVisibleChangeData } from "./elements/tooltip.js";
61
- export { definePopover, definePopoverSurface, definePopoverTrigger, type PopoverAlignment, type PopoverAutoSize, type PopoverBoundary, type PopoverBoundaryPadding, type PopoverBoundaryRect, type PopoverOffset, type PopoverOffsetParams, type PopoverOpenChangeData, type PopoverPosition, type PopoverPositioning, type PopoverPositioningEndData, type PopoverPositioningImperativeRef, type PopoverPositioningOptions, type PopoverPositioningPlacement, type PopoverPositioningRef, type PopoverPositioningTargetRect, type PopoverTarget } from "./elements/popover.js";
62
- export { defineTeachingPopover } from "./elements/teaching-popover.js";
63
- export type { SharePointTeachingPopoverCarouselElement, TeachingPopoverAnnouncementFunction, TeachingPopoverAnnouncementDetail, TeachingPopoverFinishDetail } from "./elements/teaching-popover.js";
64
- export { defineMenu, defineMenuItem, defineMenuItemLink, defineMenuDivider, defineMenuGroup, defineMenuGroupHeader, defineMenuList, defineMenuPopover, defineMenuSplitGroup, defineMenuTrigger, defineMenuBar, defineMenuBarItem } from "./elements/menu.js";
65
- export { defineText } from "./elements/text.js";
66
- export { defineToast, defineToastBody, defineToastFooter, defineToastTitle, type ToastAppearance, type ToastIntent, type ToastOptions, type ToastPoliteness } from "./elements/toast.js";
67
- export { defineToaster, type ToastAnnounce, type ToastAnnounceOptions, type ToastPosition } from "./elements/toaster.js";
68
- export { defineSearchBox, type SearchAppearance, type SearchSize } from "./elements/search.js";
69
- export { defineColorPicker, defineColorArea, defineColorSlider, defineAlphaSlider, type ColorPickerFormat, type ColorPickerHsvColor, type ColorPickerShape, type ColorPickerSize, type ColorSliderChannel, type ColorPickerState } from "./elements/color-picker.js";
70
- export { defineToolbar, defineToolbarGroup, defineToolbarSeparator, defineToolbarRadioGroup, defineToolbarRadioButton, type ToolbarCheckedValues, type ToolbarCheckedValueChange } from "./elements/toolbar.js";
71
- export { defineNav, defineNavItem, defineAppItem, defineAppItemStatic, defineHamburger, defineNavDrawer, defineNavDrawerBody, defineNavDrawerFooter, defineNavDrawerHeader, defineSplitNavItem, defineNavCategory, defineNavCategoryItem, defineNavSubItemGroup, defineNavSubItem, defineNavDivider, defineNavSectionHeader } from "./elements/nav.js";
72
- /** Register every current custom element. Import an element-specific entrypoint to keep a package slice small. */
73
- export declare function defineSharePointUIElements(): void;