@spfx-fast/sharepoint-ui 0.4.2 → 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 (276) hide show
  1. package/QUICKSTART.md +18 -0
  2. package/README.md +19 -24
  3. package/components.json +240 -5694
  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 -76
  55. package/dist/index.js +60 -66
  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 -4583
  89. package/dist/react.js +1 -6837
  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 -167
  117. package/dist/theme.js +36 -162
  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 +19 -42
  130. package/src/theme.css +125 -0
  131. package/AGENTS.md +0 -211
  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 -62
  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 -1112
  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 -117
  165. package/dist/elements/data-grid-model.js +0 -294
  166. package/dist/elements/data-grid.d.ts +0 -29
  167. package/dist/elements/data-grid.js +0 -1567
  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 -26
  183. package/dist/elements/floating-position.js +0 -39
  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 -299
  200. package/dist/elements/nav.d.ts +0 -32
  201. package/dist/elements/nav.js +0 -791
  202. package/dist/elements/overflow.d.ts +0 -9
  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 -18
  217. package/dist/elements/rich-text-editor.js +0 -508
  218. package/dist/elements/search.d.ts +0 -3
  219. package/dist/elements/search.js +0 -207
  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 -19
  223. package/dist/elements/shared.js +0 -396
  224. package/dist/elements/skeleton.d.ts +0 -6
  225. package/dist/elements/skeleton.js +0 -91
  226. package/dist/elements/slider.d.ts +0 -1
  227. package/dist/elements/slider.js +0 -248
  228. package/dist/elements/spin-button.d.ts +0 -7
  229. package/dist/elements/spin-button.js +0 -499
  230. package/dist/elements/spinner.d.ts +0 -4
  231. package/dist/elements/spinner.js +0 -124
  232. package/dist/elements/swatch-picker.d.ts +0 -5
  233. package/dist/elements/swatch-picker.js +0 -363
  234. package/dist/elements/table.d.ts +0 -21
  235. package/dist/elements/table.js +0 -261
  236. package/dist/elements/tabs.d.ts +0 -1
  237. package/dist/elements/tabs.js +0 -276
  238. package/dist/elements/tag-picker.d.ts +0 -29
  239. package/dist/elements/tag-picker.js +0 -697
  240. package/dist/elements/tags.d.ts +0 -21
  241. package/dist/elements/tags.js +0 -421
  242. package/dist/elements/teaching-popover.d.ts +0 -32
  243. package/dist/elements/teaching-popover.js +0 -412
  244. package/dist/elements/text.d.ts +0 -9
  245. package/dist/elements/text.js +0 -75
  246. package/dist/elements/textarea.d.ts +0 -1
  247. package/dist/elements/textarea.js +0 -182
  248. package/dist/elements/toast.d.ts +0 -25
  249. package/dist/elements/toast.js +0 -337
  250. package/dist/elements/toaster.d.ts +0 -6
  251. package/dist/elements/toaster.js +0 -356
  252. package/dist/elements/toggle.d.ts +0 -2
  253. package/dist/elements/toggle.js +0 -246
  254. package/dist/elements/toolbar.d.ts +0 -12
  255. package/dist/elements/toolbar.js +0 -381
  256. package/dist/elements/tooltip.d.ts +0 -76
  257. package/dist/elements/tooltip.js +0 -510
  258. package/dist/elements/tree-model.d.ts +0 -19
  259. package/dist/elements/tree-model.js +0 -34
  260. package/dist/elements/tree.d.ts +0 -5
  261. package/dist/elements/tree.js +0 -273
  262. package/dist/elements/view-card.d.ts +0 -2
  263. package/dist/elements/view-card.js +0 -78
  264. package/dist/elements/virtual-list.d.ts +0 -41
  265. package/dist/elements/virtual-list.js +0 -369
  266. package/dist/elements.d.ts +0 -72
  267. package/dist/elements.js +0 -207
  268. package/dist/virtualizer-hooks.d.ts +0 -80
  269. package/dist/virtualizer-hooks.js +0 -253
  270. package/scripts/generate-token-index.mjs +0 -43
  271. package/scripts/sync-component-catalog-signatures.mjs +0 -55
  272. package/scripts/validate-component-catalog.mjs +0 -44
  273. package/skills/sharepoint-ui/SKILL.md +0 -12
  274. package/skills/sharepoint-ui/references/choosing-components.md +0 -20
  275. package/skills/sharepoint-ui/references/sharepoint-patterns.md +0 -17
  276. 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,72 +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 { defineButtonGroup } from "./elements/button-group.js";
11
- export { defineCompoundButton, defineMenuButton, defineSplitButton, defineToggleButton } from "./elements/button-variants.js";
12
- export type { ButtonAppearance, ButtonShape, ButtonSize } from "./elements/button.js";
13
- export { defineInput, type InputAppearance, type InputSize, type InputType } from "./elements/input.js";
14
- export { defineFileUpload, type FileUploadError } from "./elements/file-upload.js";
15
- export { createImage, getImageStyle, type ImageOptions, type ImageFit, type ImageShape } from "./elements/image.js";
16
- export { defineField } from "./elements/field.js";
17
- export { createFormField, type FieldOrientation, type FieldValidationState, type FormFieldOptions } from "./elements/field-composition.js";
18
- export { defineCard, type CardAppearance, type CardOrientation, type CardSize } from "./elements/card.js";
19
- export { defineCardFooter, defineCardHeader, defineCardPreview } from "./elements/card-primitives.js";
20
- export { defineBadge, defineCounterBadge, definePresenceBadge, type BadgeAppearance, type BadgeColor, type BadgeShape, type BadgeSize, type PresenceBadgeStatus } from "./elements/badge.js";
21
- export { defineCheckbox, defineSwitch } from "./elements/toggle.js";
22
- export { defineTextArea } from "./elements/textarea.js";
23
- export { defineSpinner, type SpinnerAppearance, type SpinnerLabelPosition, type SpinnerSize } from "./elements/spinner.js";
24
- export { defineMessageBar, defineMessageBarActions, defineMessageBarBody, defineMessageBarGroup, defineMessageBarTitle, type MessageBarGroupAnimation, type MessageBarIntent, type MessageBarLayout, type MessageBarPoliteness, type MessageBarShape } from "./elements/message-bar.js";
25
- export { defineViewCard } from "./elements/view-card.js";
26
- export { defineDialog, defineDialogActions, defineDialogBody, defineDialogContent, defineDialogSurface, defineDialogTitle, defineDialogTrigger } from "./elements/dialog.js";
27
- export { defineDrawer, defineInlineDrawer } from "./elements/drawer.js";
28
- export { defineProgressBar, type ProgressBarColor, type ProgressBarShape, type ProgressBarThickness } from "./elements/progress-bar.js";
29
- export { defineSelect } from "./elements/select.js";
30
- export type { SelectAppearance, SelectSize, SelectChangeData } from "./elements/select.js";
31
- export { defineRadioGroup } from "./elements/radio-group.js";
32
- export { defineSpinButton } from "./elements/spin-button.js";
33
- export type { SpinButtonAppearance, SpinButtonSize, SpinButtonChangeData } from "./elements/spin-button.js";
34
- export { defineSlider } from "./elements/slider.js";
35
- export { defineDatePicker } from "./elements/date-picker.js";
36
- export { defineCombobox } from "./elements/combobox.js";
37
- export { defineRichTextEditor, type SharePointRichTextEditorElement } from "./elements/rich-text-editor.js";
38
- export { defineAlert, type AlertAppearance } from "./elements/alert.js";
39
- export { defineSkeleton, defineSkeletonItem, type SkeletonAnimation, type SkeletonAppearance, type SkeletonItemSize, type SkeletonShape } from "./elements/skeleton.js";
40
- export { defineLink } from "./elements/link.js";
41
- export { defineDivider, type DividerAppearance } from "./elements/divider.js";
42
- export { defineAccordion, defineAccordionHeader, defineAccordionPanel, type AccordionItemValue, type AccordionNavigation, type AccordionToggleData } from "./elements/accordion.js";
43
- export { defineAvatar } from "./elements/avatar.js";
44
- export { defineAvatarGroup } from "./elements/avatar-group.js";
45
- export { defineAvatarGroupItem, defineAvatarGroupPopover } from "./elements/avatar-group-primitives.js";
46
- export { definePersona, type PersonaPresence, type PersonaSize } from "./elements/persona.js";
47
- export { defineVirtualList, type VirtualListDataSource, type VirtualListItemRenderer, type SharePointVirtualListElement } from "./elements/virtual-list.js";
48
- export { defineDataGrid, type DataGridCellRenderer, type DataGridCellsEditHandler, type DataGridRowHeightGetter, type DataGridSourceSelectionHandler, type SharePointDataGridElement } from "./elements/data-grid.js";
49
- export { clampDataGridRowHeight, fitDataGridColumnWidths, formatDataGridClipboard, getDataGridColumnSizing, isDataGridRowSelected, parseDataGridClipboard, parseDataGridClipboardValue, setDataGridRowSelected, writeDataGridClipboardText, type DataGridCellEdit, 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";
50
- export { defineTree, type TreeCheckedItem, type TreeItemRenderer } from "./elements/tree.js";
51
- export { type TreeNode, type VisibleTreeNode } from "./elements/tree-model.js";
52
- export { defineInteractionTag, defineInteractionTagPrimary, defineInteractionTagSecondary, defineTag, defineTagGroup, type InteractionTagSelectData, type SharePointTagGroupElement, type TagAppearance, type TagGroupSelectData, type TagShape, type TagSize } from "./elements/tags.js";
53
- export { defineTagPicker } from "./elements/tag-picker.js";
54
- export { defineRating } from "./elements/rating.js";
55
- export { defineRatingDisplay, defineRatingItem } from "./elements/rating-display.js";
56
- export { defineList, defineListItem, type ListItemValue, type ListNavigationMode, type ListSelectionMode } from "./elements/list.js";
57
- export { defineBreadcrumb, defineBreadcrumbButton, defineBreadcrumbDivider, defineBreadcrumbItem } from "./elements/breadcrumb.js";
58
- export { defineTabs } from "./elements/tabs.js";
59
- 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";
60
- 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";
61
- export { defineTeachingPopover } from "./elements/teaching-popover.js";
62
- export type { SharePointTeachingPopoverCarouselElement, TeachingPopoverAnnouncementFunction, TeachingPopoverAnnouncementDetail, TeachingPopoverFinishDetail } from "./elements/teaching-popover.js";
63
- export { defineMenu, defineMenuItem, defineMenuItemLink, defineMenuDivider, defineMenuGroup, defineMenuGroupHeader, defineMenuList, defineMenuPopover, defineMenuSplitGroup, defineMenuTrigger, defineMenuBar, defineMenuBarItem } from "./elements/menu.js";
64
- export { defineText } from "./elements/text.js";
65
- export { defineToast, defineToastBody, defineToastFooter, defineToastTitle, type ToastAppearance, type ToastIntent, type ToastOptions, type ToastPoliteness } from "./elements/toast.js";
66
- export { defineToaster, type ToastAnnounce, type ToastAnnounceOptions, type ToastPosition } from "./elements/toaster.js";
67
- export { defineSearchBox, type SearchAppearance, type SearchSize } from "./elements/search.js";
68
- export { defineColorPicker, defineColorArea, defineColorSlider, defineAlphaSlider, type ColorPickerFormat, type ColorPickerHsvColor, type ColorPickerShape, type ColorPickerSize, type ColorSliderChannel, type ColorPickerState } from "./elements/color-picker.js";
69
- export { defineToolbar, defineToolbarGroup, defineToolbarSeparator, defineToolbarRadioGroup, defineToolbarRadioButton, type ToolbarCheckedValues, type ToolbarCheckedValueChange } from "./elements/toolbar.js";
70
- export { defineNav, defineNavItem, defineAppItem, defineAppItemStatic, defineHamburger, defineNavDrawer, defineNavDrawerBody, defineNavDrawerFooter, defineNavDrawerHeader, defineSplitNavItem, defineNavCategory, defineNavCategoryItem, defineNavSubItemGroup, defineNavSubItem, defineNavDivider, defineNavSectionHeader } from "./elements/nav.js";
71
- /** Register every current custom element. Import an element-specific entrypoint to keep a package slice small. */
72
- export declare function defineSharePointUIElements(): void;