@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.
- package/QUICKSTART.md +18 -0
- package/README.md +19 -24
- package/components.json +240 -5694
- package/dist/accordion.d.ts +11 -0
- package/dist/accordion.js +4 -0
- package/dist/alert.d.ts +3 -0
- package/dist/alert.js +4 -0
- package/dist/attachment-list.d.ts +15 -0
- package/dist/attachment-list.js +14 -0
- package/dist/avatar-group.d.ts +12 -0
- package/dist/avatar-group.js +7 -0
- package/dist/avatar.d.ts +6 -0
- package/dist/avatar.js +5 -0
- package/dist/badge.d.ts +3 -0
- package/dist/badge.js +4 -0
- package/dist/breadcrumb.d.ts +10 -0
- package/dist/breadcrumb.js +9 -0
- package/dist/button-group.d.ts +6 -0
- package/dist/button-group.js +4 -0
- package/dist/button.d.ts +3 -0
- package/dist/button.js +4 -0
- package/dist/card.d.ts +3 -0
- package/dist/card.js +4 -0
- package/dist/carousel.d.ts +11 -0
- package/dist/carousel.js +6 -0
- package/dist/checkbox.d.ts +3 -0
- package/dist/checkbox.js +4 -0
- package/dist/combobox.d.ts +9 -0
- package/dist/combobox.js +6 -0
- package/dist/command-bar.d.ts +6 -0
- package/dist/command-bar.js +4 -0
- package/dist/copy-button.d.ts +7 -0
- package/dist/copy-button.js +19 -0
- package/dist/data-grid.d.ts +25 -0
- package/dist/data-grid.js +39 -0
- package/dist/date-range-picker.d.ts +12 -0
- package/dist/date-range-picker.js +4 -0
- package/dist/dialog.d.ts +9 -0
- package/dist/dialog.js +21 -0
- package/dist/divider.d.ts +3 -0
- package/dist/divider.js +4 -0
- package/dist/drawer.d.ts +6 -0
- package/dist/drawer.js +5 -0
- package/dist/empty-state.d.ts +7 -0
- package/dist/empty-state.js +5 -0
- package/dist/field.d.ts +15 -0
- package/dist/field.js +11 -0
- package/dist/file-dropzone.d.ts +15 -0
- package/dist/file-dropzone.js +21 -0
- package/dist/filter-bar.d.ts +9 -0
- package/dist/filter-bar.js +9 -0
- package/dist/image.d.ts +5 -0
- package/dist/image.js +4 -0
- package/dist/index.d.ts +68 -76
- package/dist/index.js +60 -66
- package/dist/input.d.ts +3 -0
- package/dist/input.js +4 -0
- package/dist/label.d.ts +3 -0
- package/dist/label.js +4 -0
- package/dist/link.d.ts +3 -0
- package/dist/link.js +9 -0
- package/dist/list-view.d.ts +29 -0
- package/dist/list-view.js +14 -0
- package/dist/list.d.ts +6 -0
- package/dist/list.js +5 -0
- package/dist/lookup-picker.d.ts +12 -0
- package/dist/lookup-picker.js +4 -0
- package/dist/menu.d.ts +6 -0
- package/dist/menu.js +4 -0
- package/dist/nav.d.ts +12 -0
- package/dist/nav.js +4 -0
- package/dist/pagination.d.ts +11 -0
- package/dist/pagination.js +5 -0
- package/dist/person-picker.d.ts +13 -0
- package/dist/person-picker.js +4 -0
- package/dist/persona.d.ts +7 -0
- package/dist/persona.js +5 -0
- package/dist/popover.d.ts +6 -0
- package/dist/popover.js +4 -0
- package/dist/progress-bar.d.ts +5 -0
- package/dist/progress-bar.js +5 -0
- package/dist/radio-group.d.ts +6 -0
- package/dist/radio-group.js +4 -0
- package/dist/radio.d.ts +3 -0
- package/dist/radio.js +4 -0
- package/dist/rating.d.ts +8 -0
- package/dist/rating.js +5 -0
- package/dist/react.d.ts +1 -4583
- package/dist/react.js +1 -6837
- package/dist/select.d.ts +3 -0
- package/dist/select.js +4 -0
- package/dist/sharepoint-field.d.ts +18 -0
- package/dist/sharepoint-field.js +54 -0
- package/dist/skeleton.d.ts +6 -0
- package/dist/skeleton.js +9 -0
- package/dist/spinner.d.ts +5 -0
- package/dist/spinner.js +4 -0
- package/dist/swatch-picker.d.ts +17 -0
- package/dist/swatch-picker.js +11 -0
- package/dist/switch.d.ts +3 -0
- package/dist/switch.js +4 -0
- package/dist/table.d.ts +6 -0
- package/dist/table.js +4 -0
- package/dist/tabs.d.ts +14 -0
- package/dist/tabs.js +30 -0
- package/dist/tag-group.d.ts +6 -0
- package/dist/tag-group.js +4 -0
- package/dist/tag-picker.d.ts +12 -0
- package/dist/tag-picker.js +4 -0
- package/dist/tag.d.ts +7 -0
- package/dist/tag.js +5 -0
- package/dist/text.d.ts +5 -0
- package/dist/text.js +4 -0
- package/dist/textarea.d.ts +3 -0
- package/dist/textarea.js +4 -0
- package/dist/theme.d.ts +15 -167
- package/dist/theme.js +36 -162
- package/dist/toast.d.ts +9 -0
- package/dist/toast.js +12 -0
- package/dist/tree.d.ts +13 -0
- package/dist/tree.js +9 -0
- package/dist/view-card.d.ts +8 -0
- package/dist/view-card.js +4 -0
- package/dist/view-switcher.d.ts +13 -0
- package/dist/view-switcher.js +7 -0
- package/dist/virtual-list.d.ts +11 -0
- package/dist/virtual-list.js +25 -0
- package/measurements.json +365 -0
- package/package.json +19 -42
- package/src/theme.css +125 -0
- package/AGENTS.md +0 -211
- package/dist/appearance.d.ts +0 -6
- package/dist/appearance.js +0 -217
- package/dist/elements/accordion.d.ts +0 -9
- package/dist/elements/accordion.js +0 -338
- package/dist/elements/alert.d.ts +0 -2
- package/dist/elements/alert.js +0 -62
- package/dist/elements/avatar-group-primitives.d.ts +0 -3
- package/dist/elements/avatar-group-primitives.js +0 -189
- package/dist/elements/avatar-group.d.ts +0 -2
- package/dist/elements/avatar-group.js +0 -110
- package/dist/elements/avatar.d.ts +0 -4
- package/dist/elements/avatar.js +0 -251
- package/dist/elements/badge.d.ts +0 -8
- package/dist/elements/badge.js +0 -182
- package/dist/elements/breadcrumb.d.ts +0 -4
- package/dist/elements/breadcrumb.js +0 -233
- package/dist/elements/button-group.d.ts +0 -1
- package/dist/elements/button-group.js +0 -20
- package/dist/elements/button-variants.d.ts +0 -6
- package/dist/elements/button-variants.js +0 -339
- package/dist/elements/button.d.ts +0 -5
- package/dist/elements/button.js +0 -233
- package/dist/elements/card-primitives.d.ts +0 -3
- package/dist/elements/card-primitives.js +0 -83
- package/dist/elements/card.d.ts +0 -5
- package/dist/elements/card.js +0 -213
- package/dist/elements/carousel.d.ts +0 -92
- package/dist/elements/carousel.js +0 -1112
- package/dist/elements/color-picker.d.ts +0 -24
- package/dist/elements/color-picker.js +0 -1004
- package/dist/elements/combobox.d.ts +0 -1
- package/dist/elements/combobox.js +0 -1012
- package/dist/elements/data-grid-model.d.ts +0 -117
- package/dist/elements/data-grid-model.js +0 -294
- package/dist/elements/data-grid.d.ts +0 -29
- package/dist/elements/data-grid.js +0 -1567
- package/dist/elements/date-picker.d.ts +0 -1
- package/dist/elements/date-picker.js +0 -486
- package/dist/elements/dialog.d.ts +0 -23
- package/dist/elements/dialog.js +0 -409
- package/dist/elements/divider.d.ts +0 -2
- package/dist/elements/divider.js +0 -66
- package/dist/elements/drawer.d.ts +0 -3
- package/dist/elements/drawer.js +0 -308
- package/dist/elements/field-composition.d.ts +0 -26
- package/dist/elements/field-composition.js +0 -133
- package/dist/elements/field.d.ts +0 -1
- package/dist/elements/field.js +0 -67
- package/dist/elements/file-upload.d.ts +0 -6
- package/dist/elements/file-upload.js +0 -211
- package/dist/elements/floating-position.d.ts +0 -26
- package/dist/elements/floating-position.js +0 -39
- package/dist/elements/image.d.ts +0 -28
- package/dist/elements/image.js +0 -38
- package/dist/elements/info.d.ts +0 -9
- package/dist/elements/info.js +0 -102
- package/dist/elements/input.d.ts +0 -5
- package/dist/elements/input.js +0 -255
- package/dist/elements/label.d.ts +0 -15
- package/dist/elements/label.js +0 -56
- package/dist/elements/link.d.ts +0 -1
- package/dist/elements/link.js +0 -92
- package/dist/elements/list.d.ts +0 -19
- package/dist/elements/list.js +0 -297
- package/dist/elements/menu.d.ts +0 -33
- package/dist/elements/menu.js +0 -1103
- package/dist/elements/message-bar.d.ts +0 -10
- package/dist/elements/message-bar.js +0 -299
- package/dist/elements/nav.d.ts +0 -32
- package/dist/elements/nav.js +0 -791
- package/dist/elements/overflow.d.ts +0 -9
- package/dist/elements/overflow.js +0 -218
- package/dist/elements/persona.d.ts +0 -3
- package/dist/elements/persona.js +0 -125
- package/dist/elements/popover.d.ts +0 -77
- package/dist/elements/popover.js +0 -840
- package/dist/elements/progress-bar.d.ts +0 -4
- package/dist/elements/progress-bar.js +0 -82
- package/dist/elements/radio-group.d.ts +0 -1
- package/dist/elements/radio-group.js +0 -303
- package/dist/elements/rating-display.d.ts +0 -2
- package/dist/elements/rating-display.js +0 -125
- package/dist/elements/rating.d.ts +0 -2
- package/dist/elements/rating.js +0 -206
- package/dist/elements/rich-text-editor.d.ts +0 -18
- package/dist/elements/rich-text-editor.js +0 -508
- package/dist/elements/search.d.ts +0 -3
- package/dist/elements/search.js +0 -207
- package/dist/elements/select.d.ts +0 -6
- package/dist/elements/select.js +0 -291
- package/dist/elements/shared.d.ts +0 -19
- package/dist/elements/shared.js +0 -396
- package/dist/elements/skeleton.d.ts +0 -6
- package/dist/elements/skeleton.js +0 -91
- package/dist/elements/slider.d.ts +0 -1
- package/dist/elements/slider.js +0 -248
- package/dist/elements/spin-button.d.ts +0 -7
- package/dist/elements/spin-button.js +0 -499
- package/dist/elements/spinner.d.ts +0 -4
- package/dist/elements/spinner.js +0 -124
- package/dist/elements/swatch-picker.d.ts +0 -5
- package/dist/elements/swatch-picker.js +0 -363
- package/dist/elements/table.d.ts +0 -21
- package/dist/elements/table.js +0 -261
- package/dist/elements/tabs.d.ts +0 -1
- package/dist/elements/tabs.js +0 -276
- package/dist/elements/tag-picker.d.ts +0 -29
- package/dist/elements/tag-picker.js +0 -697
- package/dist/elements/tags.d.ts +0 -21
- package/dist/elements/tags.js +0 -421
- package/dist/elements/teaching-popover.d.ts +0 -32
- package/dist/elements/teaching-popover.js +0 -412
- package/dist/elements/text.d.ts +0 -9
- package/dist/elements/text.js +0 -75
- package/dist/elements/textarea.d.ts +0 -1
- package/dist/elements/textarea.js +0 -182
- package/dist/elements/toast.d.ts +0 -25
- package/dist/elements/toast.js +0 -337
- package/dist/elements/toaster.d.ts +0 -6
- package/dist/elements/toaster.js +0 -356
- package/dist/elements/toggle.d.ts +0 -2
- package/dist/elements/toggle.js +0 -246
- package/dist/elements/toolbar.d.ts +0 -12
- package/dist/elements/toolbar.js +0 -381
- package/dist/elements/tooltip.d.ts +0 -76
- package/dist/elements/tooltip.js +0 -510
- package/dist/elements/tree-model.d.ts +0 -19
- package/dist/elements/tree-model.js +0 -34
- package/dist/elements/tree.d.ts +0 -5
- package/dist/elements/tree.js +0 -273
- package/dist/elements/view-card.d.ts +0 -2
- package/dist/elements/view-card.js +0 -78
- package/dist/elements/virtual-list.d.ts +0 -41
- package/dist/elements/virtual-list.js +0 -369
- package/dist/elements.d.ts +0 -72
- package/dist/elements.js +0 -207
- package/dist/virtualizer-hooks.d.ts +0 -80
- package/dist/virtualizer-hooks.js +0 -253
- package/scripts/generate-token-index.mjs +0 -43
- package/scripts/sync-component-catalog-signatures.mjs +0 -55
- package/scripts/validate-component-catalog.mjs +0 -44
- package/skills/sharepoint-ui/SKILL.md +0 -12
- package/skills/sharepoint-ui/references/choosing-components.md +0 -20
- package/skills/sharepoint-ui/references/sharepoint-patterns.md +0 -17
- 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
|
-
}
|
package/dist/elements.d.ts
DELETED
|
@@ -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;
|