@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
package/dist/elements/tooltip.js
DELETED
|
@@ -1,510 +0,0 @@
|
|
|
1
|
-
import { getFloatingPosition } from "./floating-position.js";
|
|
2
|
-
const nextId = (() => { let value = 0; return () => `spui-tooltip-${++value}`; })();
|
|
3
|
-
let activeTooltip;
|
|
4
|
-
function rectEdges(rect) {
|
|
5
|
-
const left = "left" in rect ? rect.left : rect.x;
|
|
6
|
-
const top = "top" in rect ? rect.top : rect.y;
|
|
7
|
-
return { left, top, right: left + rect.width, bottom: top + rect.height };
|
|
8
|
-
}
|
|
9
|
-
function parentElement(element) {
|
|
10
|
-
if (element.parentElement)
|
|
11
|
-
return element.parentElement;
|
|
12
|
-
const root = element.getRootNode();
|
|
13
|
-
return root instanceof ShadowRoot ? root.host : null;
|
|
14
|
-
}
|
|
15
|
-
function intersectRects(rects) {
|
|
16
|
-
if (!rects.length)
|
|
17
|
-
return undefined;
|
|
18
|
-
const left = Math.max(...rects.map(rect => rect.left));
|
|
19
|
-
const top = Math.max(...rects.map(rect => rect.top));
|
|
20
|
-
return { left, top, right: Math.max(left, Math.min(...rects.map(rect => rect.right))), bottom: Math.max(top, Math.min(...rects.map(rect => rect.bottom))) };
|
|
21
|
-
}
|
|
22
|
-
function getPositioningBoundary(boundary, context) {
|
|
23
|
-
if (!boundary || boundary === "window")
|
|
24
|
-
return undefined;
|
|
25
|
-
if (Array.isArray(boundary))
|
|
26
|
-
return intersectRects(boundary.map(element => rectEdges(element.getBoundingClientRect())));
|
|
27
|
-
if (typeof boundary === "object" && "getBoundingClientRect" in boundary)
|
|
28
|
-
return rectEdges(boundary.getBoundingClientRect());
|
|
29
|
-
if (typeof boundary === "object" && "width" in boundary)
|
|
30
|
-
return rectEdges(boundary);
|
|
31
|
-
if ((boundary === "clippingParents" || boundary === "scrollParent") && context) {
|
|
32
|
-
const win = context.ownerDocument.defaultView;
|
|
33
|
-
if (!win)
|
|
34
|
-
return undefined;
|
|
35
|
-
const viewport = { left: 0, top: 0, right: win.innerWidth, bottom: win.innerHeight };
|
|
36
|
-
const rects = boundary === "clippingParents" ? [viewport] : [];
|
|
37
|
-
let current = parentElement(context);
|
|
38
|
-
while (current) {
|
|
39
|
-
const style = win.getComputedStyle(current);
|
|
40
|
-
const clipsX = /^(auto|scroll|hidden|clip|overlay)$/.test(style.overflowX);
|
|
41
|
-
const clipsY = /^(auto|scroll|hidden|clip|overlay)$/.test(style.overflowY);
|
|
42
|
-
const isScrollParent = /^(auto|scroll|hidden|overlay)$/.test(style.overflowX) || /^(auto|scroll|hidden|overlay)$/.test(style.overflowY);
|
|
43
|
-
if (boundary === "clippingParents" ? clipsX || clipsY : isScrollParent) {
|
|
44
|
-
const bounds = current.getBoundingClientRect();
|
|
45
|
-
const left = bounds.left + current.clientLeft;
|
|
46
|
-
const top = bounds.top + current.clientTop;
|
|
47
|
-
const rect = { left: clipsX ? left : 0, right: clipsX ? left + current.clientWidth : win.innerWidth, top: clipsY ? top : 0, bottom: clipsY ? top + current.clientHeight : win.innerHeight };
|
|
48
|
-
if (boundary === "scrollParent")
|
|
49
|
-
return rect;
|
|
50
|
-
rects.push(rect);
|
|
51
|
-
}
|
|
52
|
-
current = parentElement(current);
|
|
53
|
-
}
|
|
54
|
-
return boundary === "clippingParents" ? intersectRects(rects) : undefined;
|
|
55
|
-
}
|
|
56
|
-
return undefined;
|
|
57
|
-
}
|
|
58
|
-
function normalizePosition(position, direction) {
|
|
59
|
-
if (position === "above")
|
|
60
|
-
return "top";
|
|
61
|
-
if (position === "below")
|
|
62
|
-
return "bottom";
|
|
63
|
-
if (position === "before")
|
|
64
|
-
return direction === "rtl" ? "right" : "left";
|
|
65
|
-
if (position === "after")
|
|
66
|
-
return direction === "rtl" ? "left" : "right";
|
|
67
|
-
return position;
|
|
68
|
-
}
|
|
69
|
-
export function defineTooltip() {
|
|
70
|
-
if (customElements.get("spui-tooltip"))
|
|
71
|
-
return;
|
|
72
|
-
class SpuiTooltip extends HTMLElement {
|
|
73
|
-
static observedAttributes = ["content", "placement", "positioning", "align", "offset", "disabled", "open", "delay", "show-delay", "hide-delay", "relationship", "appearance", "with-arrow"];
|
|
74
|
-
observer;
|
|
75
|
-
sizeObserver;
|
|
76
|
-
events;
|
|
77
|
-
timer;
|
|
78
|
-
trigger;
|
|
79
|
-
ariaBefore;
|
|
80
|
-
tooltip;
|
|
81
|
-
isOpen = false;
|
|
82
|
-
inTopLayer = false;
|
|
83
|
-
positioningValue;
|
|
84
|
-
positioningRef;
|
|
85
|
-
tooltipElementValue;
|
|
86
|
-
positioningHandle = { updatePosition: () => this.position(), setTarget: target => this.setPositioningTarget(target) };
|
|
87
|
-
connectedCallback() {
|
|
88
|
-
this.style.display ||= "contents";
|
|
89
|
-
this.events?.abort();
|
|
90
|
-
this.events = new AbortController();
|
|
91
|
-
const options = { signal: this.events.signal };
|
|
92
|
-
this.addEventListener("pointerenter", this.onPointerEnter, options);
|
|
93
|
-
this.addEventListener("pointerleave", this.onPointerLeave, options);
|
|
94
|
-
this.addEventListener("focusin", this.onFocusIn, options);
|
|
95
|
-
this.addEventListener("focusout", this.onFocusOut, options);
|
|
96
|
-
this.ownerDocument.addEventListener("keydown", this.onDocumentKeyDown, { ...options, capture: true });
|
|
97
|
-
this.ownerDocument.addEventListener("visibilitychange", this.onVisibilityChange, options);
|
|
98
|
-
window.addEventListener("resize", this.position, options);
|
|
99
|
-
window.addEventListener("scroll", this.position, { ...options, capture: true });
|
|
100
|
-
this.observer = new MutationObserver(() => this.sync());
|
|
101
|
-
this.observer.observe(this, { childList: true });
|
|
102
|
-
this.isOpen = this.hasAttribute("open");
|
|
103
|
-
const positioningOptions = typeof this.positioningValue === "object" && this.positioningValue !== null ? this.positioningValue : undefined;
|
|
104
|
-
this.setPositioningRef(positioningOptions?.positioningRef);
|
|
105
|
-
this.sync();
|
|
106
|
-
this.observeSize();
|
|
107
|
-
}
|
|
108
|
-
disconnectedCallback() {
|
|
109
|
-
this.observer?.disconnect();
|
|
110
|
-
this.sizeObserver?.disconnect();
|
|
111
|
-
this.events?.abort();
|
|
112
|
-
this.clearTimer();
|
|
113
|
-
if (activeTooltip?.element === this)
|
|
114
|
-
activeTooltip = undefined;
|
|
115
|
-
this.tooltip?.hidePopover?.();
|
|
116
|
-
this.restoreAria();
|
|
117
|
-
this.setPositioningRef(undefined);
|
|
118
|
-
}
|
|
119
|
-
get positioning() { return this.positioningValue; }
|
|
120
|
-
set positioning(value) {
|
|
121
|
-
this.positioningValue = value;
|
|
122
|
-
const options = typeof value === "object" && value !== null ? value : undefined;
|
|
123
|
-
this.setPositioningRef(options?.positioningRef);
|
|
124
|
-
this.observeSize();
|
|
125
|
-
this.position();
|
|
126
|
-
}
|
|
127
|
-
get tooltipElement() { return this.tooltipElementValue; }
|
|
128
|
-
set tooltipElement(value) {
|
|
129
|
-
const next = value ?? undefined;
|
|
130
|
-
if (this.tooltipElementValue === next)
|
|
131
|
-
return;
|
|
132
|
-
this.tooltipElementValue = next;
|
|
133
|
-
if (this.isConnected)
|
|
134
|
-
this.sync();
|
|
135
|
-
}
|
|
136
|
-
setPositioningRef(ref) {
|
|
137
|
-
if (this.positioningRef === ref)
|
|
138
|
-
return;
|
|
139
|
-
if (typeof this.positioningRef === "function")
|
|
140
|
-
this.positioningRef(null);
|
|
141
|
-
else if (this.positioningRef)
|
|
142
|
-
this.positioningRef.current = null;
|
|
143
|
-
this.positioningRef = ref;
|
|
144
|
-
if (typeof ref === "function")
|
|
145
|
-
ref(this.positioningHandle);
|
|
146
|
-
else if (ref)
|
|
147
|
-
ref.current = this.positioningHandle;
|
|
148
|
-
}
|
|
149
|
-
setPositioningTarget(target) {
|
|
150
|
-
const current = typeof this.positioningValue === "object" && this.positioningValue !== null ? this.positioningValue : {};
|
|
151
|
-
this.positioningValue = { ...current, target };
|
|
152
|
-
this.observeSize();
|
|
153
|
-
this.position();
|
|
154
|
-
}
|
|
155
|
-
attributeChangedCallback(name) {
|
|
156
|
-
if (name === "open") {
|
|
157
|
-
const next = this.hasAttribute("open");
|
|
158
|
-
if (next !== this.isOpen) {
|
|
159
|
-
if (next)
|
|
160
|
-
this.claimActiveTooltip();
|
|
161
|
-
else if (activeTooltip?.element === this)
|
|
162
|
-
activeTooltip = undefined;
|
|
163
|
-
this.isOpen = next;
|
|
164
|
-
this.syncVisibility();
|
|
165
|
-
this.emitOpenChange();
|
|
166
|
-
}
|
|
167
|
-
}
|
|
168
|
-
else if (this.isConnected) {
|
|
169
|
-
if (name === "disabled" && this.hasAttribute("disabled"))
|
|
170
|
-
this.setOpen(false);
|
|
171
|
-
else
|
|
172
|
-
this.sync();
|
|
173
|
-
}
|
|
174
|
-
}
|
|
175
|
-
get open() { return this.isOpen; }
|
|
176
|
-
set open(value) { this.setOpen(Boolean(value)); }
|
|
177
|
-
sync() {
|
|
178
|
-
const content = this.tooltipElementValue ?? [...this.querySelectorAll("[slot=tooltip]")].find(element => element.dataset.spuiTooltipGenerated === undefined);
|
|
179
|
-
const generated = this.querySelector("[data-spui-tooltip-generated]");
|
|
180
|
-
if (content) {
|
|
181
|
-
generated?.remove();
|
|
182
|
-
this.tooltip = content;
|
|
183
|
-
}
|
|
184
|
-
else if (this.hasAttribute("content")) {
|
|
185
|
-
this.tooltip = generated ?? document.createElement("span");
|
|
186
|
-
this.tooltip.setAttribute("slot", "tooltip");
|
|
187
|
-
this.tooltip.dataset.spuiTooltipGenerated = "";
|
|
188
|
-
this.tooltip.textContent = this.getAttribute("content") ?? "";
|
|
189
|
-
if (!generated)
|
|
190
|
-
this.append(this.tooltip);
|
|
191
|
-
}
|
|
192
|
-
else {
|
|
193
|
-
generated?.remove();
|
|
194
|
-
this.tooltip = undefined;
|
|
195
|
-
}
|
|
196
|
-
if (this.tooltip) {
|
|
197
|
-
if (!this.tooltip.id)
|
|
198
|
-
this.tooltip.id = nextId();
|
|
199
|
-
this.tooltip.setAttribute("role", "tooltip");
|
|
200
|
-
this.styleTooltip();
|
|
201
|
-
}
|
|
202
|
-
const trigger = [...this.children].find((child) => child instanceof HTMLElement && child !== this.tooltip && child.getAttribute("slot") !== "tooltip");
|
|
203
|
-
if (trigger !== this.trigger) {
|
|
204
|
-
this.restoreAria();
|
|
205
|
-
this.trigger = trigger;
|
|
206
|
-
this.ariaBefore = trigger ? new Map(["aria-label", "aria-labelledby", "aria-describedby", "aria-description"].map(name => [name, trigger.getAttribute(name)])) : undefined;
|
|
207
|
-
}
|
|
208
|
-
this.applyRelationship();
|
|
209
|
-
this.observeSize();
|
|
210
|
-
this.syncVisibility();
|
|
211
|
-
}
|
|
212
|
-
styleTooltip() {
|
|
213
|
-
if (!this.tooltip)
|
|
214
|
-
return;
|
|
215
|
-
this.tooltip.setAttribute("popover", "manual");
|
|
216
|
-
Object.assign(this.tooltip.style, {
|
|
217
|
-
position: "fixed",
|
|
218
|
-
zIndex: "10000",
|
|
219
|
-
boxSizing: "border-box",
|
|
220
|
-
maxWidth: "min(320px, calc(100vw - 16px))",
|
|
221
|
-
maxHeight: "calc(100vh - 16px)",
|
|
222
|
-
padding: "6px 10px",
|
|
223
|
-
border: "1px solid var(--spui-tooltip-border, var(--colorNeutralStroke1, #666))",
|
|
224
|
-
borderRadius: "var(--spui-tooltip-radius, var(--spui-control-radius, 4px))",
|
|
225
|
-
background: this.appearance === "inverted" ? "var(--spui-tooltip-background, var(--colorNeutralBackgroundInverted, #292929))" : "var(--spui-tooltip-background, var(--colorNeutralBackground1, #fff))",
|
|
226
|
-
color: this.appearance === "inverted" ? "var(--spui-tooltip-color, var(--colorNeutralForegroundInverted, #fff))" : "var(--spui-tooltip-color, var(--colorNeutralForeground1, #242424))",
|
|
227
|
-
boxShadow: "0 2px 8px rgb(0 0 0 / 18%)",
|
|
228
|
-
font: "500 12px/1.4 var(--spui-font-family, inherit)",
|
|
229
|
-
overflowWrap: "anywhere",
|
|
230
|
-
overflowY: "auto",
|
|
231
|
-
pointerEvents: "none",
|
|
232
|
-
margin: "0"
|
|
233
|
-
});
|
|
234
|
-
this.tooltip.dataset.appearance = this.appearance;
|
|
235
|
-
let arrow = this.tooltip.querySelector(":scope > [data-spui-tooltip-arrow]");
|
|
236
|
-
if (this.hasAttribute("with-arrow")) {
|
|
237
|
-
if (!arrow) {
|
|
238
|
-
arrow = document.createElement("span");
|
|
239
|
-
arrow.dataset.spuiTooltipArrow = "";
|
|
240
|
-
arrow.setAttribute("aria-hidden", "true");
|
|
241
|
-
Object.assign(arrow.style, { position: "absolute", width: "8px", height: "8px", transform: "rotate(45deg)", background: "inherit", border: "inherit", pointerEvents: "none" });
|
|
242
|
-
this.tooltip.append(arrow);
|
|
243
|
-
}
|
|
244
|
-
}
|
|
245
|
-
else
|
|
246
|
-
arrow?.remove();
|
|
247
|
-
}
|
|
248
|
-
syncVisibility() {
|
|
249
|
-
if (!this.tooltip)
|
|
250
|
-
return;
|
|
251
|
-
const visible = this.isOpen && !this.hasAttribute("disabled");
|
|
252
|
-
const surface = this.tooltip;
|
|
253
|
-
if (visible) {
|
|
254
|
-
surface.hidden = false;
|
|
255
|
-
try {
|
|
256
|
-
surface.showPopover?.();
|
|
257
|
-
this.inTopLayer = typeof surface.showPopover === "function";
|
|
258
|
-
}
|
|
259
|
-
catch {
|
|
260
|
-
this.inTopLayer = false;
|
|
261
|
-
}
|
|
262
|
-
requestAnimationFrame(this.position);
|
|
263
|
-
}
|
|
264
|
-
else {
|
|
265
|
-
this.inTopLayer = false;
|
|
266
|
-
surface.hidePopover?.();
|
|
267
|
-
surface.hidden = true;
|
|
268
|
-
}
|
|
269
|
-
}
|
|
270
|
-
position = () => {
|
|
271
|
-
const trigger = this.trigger;
|
|
272
|
-
const tooltip = this.tooltip;
|
|
273
|
-
const options = this.positioningOptions;
|
|
274
|
-
const target = options?.target;
|
|
275
|
-
if (!this.isOpen || !tooltip || tooltip.hidden || (!trigger && !target))
|
|
276
|
-
return;
|
|
277
|
-
const targetContext = target && "contextElement" in target ? target.contextElement : target && "nodeType" in target ? target : undefined;
|
|
278
|
-
const targetRect = target?.getBoundingClientRect();
|
|
279
|
-
const anchor = targetRect ?? trigger.getBoundingClientRect();
|
|
280
|
-
const direction = (targetContext && getComputedStyle(targetContext).direction) || (trigger && getComputedStyle(trigger).direction) || getComputedStyle(this).direction;
|
|
281
|
-
const rtl = direction === "rtl";
|
|
282
|
-
const [requested, align, rawPosition] = this.getRequestedPosition(rtl ? "rtl" : "ltr");
|
|
283
|
-
const configuredOffset = options?.offset;
|
|
284
|
-
const functionOffset = typeof configuredOffset === "function" ? configuredOffset({
|
|
285
|
-
positionedRect: { x: 0, y: 0, width: tooltip.offsetWidth, height: tooltip.offsetHeight },
|
|
286
|
-
targetRect: { x: anchor.x, y: anchor.y, width: anchor.width, height: anchor.height },
|
|
287
|
-
position: (rawPosition === "above" || rawPosition === "below" || rawPosition === "before" || rawPosition === "after" ? rawPosition : "above"),
|
|
288
|
-
alignment: align,
|
|
289
|
-
}) : configuredOffset;
|
|
290
|
-
const offset = typeof functionOffset === "number" ? functionOffset : functionOffset?.mainAxis ?? 0;
|
|
291
|
-
const crossAxisOffset = typeof functionOffset === "object" ? functionOffset.crossAxis ?? 0 : 0;
|
|
292
|
-
const gap = configuredOffset === undefined ? this.hasAttribute("offset") ? Math.max(0, Number(this.getAttribute("offset")) || 0) : this.hasAttribute("with-arrow") ? 12 : 8 : Math.max(0, offset);
|
|
293
|
-
const boundaryContext = targetContext ?? trigger ?? this;
|
|
294
|
-
const flipBoundary = getPositioningBoundary(options?.flipBoundary, boundaryContext);
|
|
295
|
-
const overflowBoundary = getPositioningBoundary(options?.overflowBoundary, boundaryContext);
|
|
296
|
-
const rawPadding = options?.overflowBoundaryPadding;
|
|
297
|
-
const padding = typeof rawPadding === "number" ? { top: rawPadding, right: rawPadding, bottom: rawPadding, left: rawPadding } : {
|
|
298
|
-
top: rawPadding?.top ?? 0,
|
|
299
|
-
bottom: rawPadding?.bottom ?? 0,
|
|
300
|
-
left: rtl ? rawPadding?.end ?? 0 : rawPadding?.start ?? 0,
|
|
301
|
-
right: rtl ? rawPadding?.start ?? 0 : rawPadding?.end ?? 0,
|
|
302
|
-
};
|
|
303
|
-
const strategy = options?.strategy ?? (options?.positionFixed === true ? "fixed" : options?.positionFixed === false ? "absolute" : this.inTopLayer ? "absolute" : "fixed");
|
|
304
|
-
tooltip.style.position = strategy;
|
|
305
|
-
tooltip.style.transform = "";
|
|
306
|
-
tooltip.style.maxWidth = "min(320px, calc(100vw - 16px))";
|
|
307
|
-
tooltip.style.maxHeight = "calc(100vh - 16px)";
|
|
308
|
-
tooltip.style.width = options?.matchTargetSize === "width" ? `${anchor.width}px` : "";
|
|
309
|
-
tooltip.style.height = "";
|
|
310
|
-
tooltip.style.overflowX = "";
|
|
311
|
-
tooltip.style.overflowY = "auto";
|
|
312
|
-
const surface = { width: tooltip.offsetWidth, height: tooltip.offsetHeight };
|
|
313
|
-
const viewport = { width: window.innerWidth, height: window.innerHeight };
|
|
314
|
-
const fallback = (options?.fallbackPositions ?? []).map(value => {
|
|
315
|
-
const [side, fallbackAlign] = this.parsePosition(value, rtl ? "rtl" : "ltr");
|
|
316
|
-
return { placement: side, align: fallbackAlign };
|
|
317
|
-
});
|
|
318
|
-
const pinned = options?.pinned === true;
|
|
319
|
-
const coverTarget = options?.coverTarget === true;
|
|
320
|
-
const modifiers = { crossAxisOffset, coverTarget, overflowBoundaryPadding: padding };
|
|
321
|
-
let position = getFloatingPosition(anchor, surface, requested, rtl ? "rtl" : "ltr", gap, viewport, align, fallback, pinned, flipBoundary, overflowBoundary, modifiers);
|
|
322
|
-
const flipBounds = flipBoundary ?? { left: 0, top: 0, right: viewport.width, bottom: viewport.height };
|
|
323
|
-
const overflows = position.left < flipBounds.left || position.top < flipBounds.top || position.left + surface.width > flipBounds.right || position.top + surface.height > flipBounds.bottom;
|
|
324
|
-
if (options?.shiftToCoverTarget && overflows && !coverTarget)
|
|
325
|
-
position = getFloatingPosition(anchor, surface, requested, rtl ? "rtl" : "ltr", gap, viewport, align, fallback, pinned, flipBoundary, overflowBoundary, { ...modifiers, coverTarget: true });
|
|
326
|
-
const autoSize = options?.autoSize;
|
|
327
|
-
const applyMaxWidth = autoSize === true || autoSize === "always" || autoSize === "width" || autoSize === "width-always";
|
|
328
|
-
const applyMaxHeight = autoSize === true || autoSize === "always" || autoSize === "height" || autoSize === "height-always";
|
|
329
|
-
const bounds = overflowBoundary ?? { left: 0, top: 0, right: viewport.width, bottom: viewport.height };
|
|
330
|
-
const availableWidth = Math.max(0, (position.placement === "left" ? anchor.left - bounds.left - padding.left - gap : position.placement === "right" ? bounds.right - padding.right - anchor.right - gap : bounds.right - padding.right - bounds.left - padding.left - gap * 2));
|
|
331
|
-
const availableHeight = Math.max(0, (position.placement === "top" ? anchor.top - bounds.top - padding.top - gap : position.placement === "bottom" ? bounds.bottom - padding.bottom - anchor.bottom - gap : bounds.bottom - padding.bottom - bounds.top - padding.top - gap * 2));
|
|
332
|
-
if (applyMaxWidth)
|
|
333
|
-
tooltip.style.maxWidth = `${availableWidth}px`;
|
|
334
|
-
if (applyMaxHeight)
|
|
335
|
-
tooltip.style.maxHeight = `${availableHeight}px`;
|
|
336
|
-
const pageOffset = strategy === "absolute" ? { x: window.scrollX, y: window.scrollY } : { x: 0, y: 0 };
|
|
337
|
-
const useTransform = options?.useTransform !== false;
|
|
338
|
-
tooltip.style.left = useTransform ? "0px" : `${position.left + pageOffset.x}px`;
|
|
339
|
-
tooltip.style.top = useTransform ? "0px" : `${position.top + pageOffset.y}px`;
|
|
340
|
-
if (useTransform)
|
|
341
|
-
tooltip.style.transform = `translate3d(${position.left + pageOffset.x}px, ${position.top + pageOffset.y}px, 0)`;
|
|
342
|
-
tooltip.dataset.placement = position.placement;
|
|
343
|
-
const arrow = tooltip.querySelector("[data-spui-tooltip-arrow]");
|
|
344
|
-
if (arrow) {
|
|
345
|
-
Object.assign(arrow.style, { insetInlineStart: "", insetInlineEnd: "", top: "", right: "", bottom: "", left: "" });
|
|
346
|
-
const surfaceRect = tooltip.getBoundingClientRect();
|
|
347
|
-
const anchorCenterX = anchor.left + anchor.width / 2 - surfaceRect.left - 4;
|
|
348
|
-
const anchorCenterY = anchor.top + anchor.height / 2 - surfaceRect.top - 4;
|
|
349
|
-
const arrowPadding = Math.max(0, options?.arrowPadding ?? 4);
|
|
350
|
-
const arrowLeft = `${Math.max(arrowPadding, Math.min(anchorCenterX, surfaceRect.width - arrowPadding - 8))}px`;
|
|
351
|
-
const arrowTop = `${Math.max(arrowPadding, Math.min(anchorCenterY, surfaceRect.height - arrowPadding - 8))}px`;
|
|
352
|
-
if (position.placement === "top")
|
|
353
|
-
Object.assign(arrow.style, { bottom: "-4px", left: arrowLeft, borderTop: "0", borderLeft: "0" });
|
|
354
|
-
else if (position.placement === "bottom")
|
|
355
|
-
Object.assign(arrow.style, { top: "-4px", left: arrowLeft, borderRight: "0", borderBottom: "0" });
|
|
356
|
-
else if (position.placement === "left")
|
|
357
|
-
Object.assign(arrow.style, { right: "-4px", top: arrowTop, borderLeft: "0", borderBottom: "0" });
|
|
358
|
-
else
|
|
359
|
-
Object.assign(arrow.style, { left: "-4px", top: arrowTop, borderTop: "0", borderRight: "0" });
|
|
360
|
-
}
|
|
361
|
-
const inlinePlacement = position.placement === "top" || position.placement === "bottom" ? position.align === "start" || position.align === "end" ? `-${position.align}` : "" : position.align === "top" ? "-start" : position.align === "bottom" ? "-end" : "";
|
|
362
|
-
const detail = {
|
|
363
|
-
placement: `${position.placement}${inlinePlacement}`,
|
|
364
|
-
escaped: position.left < bounds.left || position.top < bounds.top || position.left + tooltip.offsetWidth > bounds.right || position.top + tooltip.offsetHeight > bounds.bottom,
|
|
365
|
-
referenceHidden: anchor.bottom <= 0 || anchor.top >= window.innerHeight || anchor.right <= 0 || anchor.left >= window.innerWidth,
|
|
366
|
-
};
|
|
367
|
-
options?.onPositioningEnd?.(new CustomEvent("fui-positioningend", { detail }));
|
|
368
|
-
tooltip.dispatchEvent(new CustomEvent("fui-positioningend", { bubbles: true, detail }));
|
|
369
|
-
};
|
|
370
|
-
onPointerEnter = (event) => {
|
|
371
|
-
if (event.pointerType === "touch")
|
|
372
|
-
return;
|
|
373
|
-
if (this.hasAttribute("disabled"))
|
|
374
|
-
return;
|
|
375
|
-
this.clearTimer();
|
|
376
|
-
this.timer = setTimeout(() => this.setOpen(true, event), this.showDelay);
|
|
377
|
-
};
|
|
378
|
-
onPointerLeave = (event) => {
|
|
379
|
-
if (event.pointerType === "touch")
|
|
380
|
-
return;
|
|
381
|
-
if (event.relatedTarget instanceof Node && this.contains(event.relatedTarget))
|
|
382
|
-
return;
|
|
383
|
-
this.clearTimer();
|
|
384
|
-
this.timer = setTimeout(() => this.setOpen(false, event), this.hideDelay);
|
|
385
|
-
};
|
|
386
|
-
onFocusIn = (event) => { if (!this.hasAttribute("disabled")) {
|
|
387
|
-
this.clearTimer();
|
|
388
|
-
this.timer = setTimeout(() => this.setOpen(true, event), this.showDelay);
|
|
389
|
-
} };
|
|
390
|
-
onFocusOut = (event) => {
|
|
391
|
-
if (event.relatedTarget instanceof Node && this.contains(event.relatedTarget))
|
|
392
|
-
return;
|
|
393
|
-
this.clearTimer();
|
|
394
|
-
this.timer = setTimeout(() => this.setOpen(false, event), this.hideDelay);
|
|
395
|
-
};
|
|
396
|
-
onDocumentKeyDown = (event) => {
|
|
397
|
-
if (event.key === "Escape" && this.isOpen && !event.defaultPrevented) {
|
|
398
|
-
event.preventDefault();
|
|
399
|
-
event.stopPropagation();
|
|
400
|
-
this.setOpen(false, event);
|
|
401
|
-
}
|
|
402
|
-
};
|
|
403
|
-
onVisibilityChange = () => { if (this.ownerDocument.visibilityState === "hidden")
|
|
404
|
-
this.setOpen(false); };
|
|
405
|
-
observeSize() {
|
|
406
|
-
if (!this.isConnected || typeof ResizeObserver === "undefined")
|
|
407
|
-
return;
|
|
408
|
-
this.sizeObserver ??= new ResizeObserver(this.position);
|
|
409
|
-
this.sizeObserver.disconnect();
|
|
410
|
-
if (this.positioningOptions?.disableUpdateOnResize)
|
|
411
|
-
return;
|
|
412
|
-
if (this.trigger)
|
|
413
|
-
this.sizeObserver.observe(this.trigger);
|
|
414
|
-
if (this.tooltip)
|
|
415
|
-
this.sizeObserver.observe(this.tooltip);
|
|
416
|
-
const target = this.positioningOptions?.target;
|
|
417
|
-
const targetContext = target && "contextElement" in target ? target.contextElement : target && "nodeType" in target ? target : undefined;
|
|
418
|
-
if (targetContext)
|
|
419
|
-
this.sizeObserver.observe(targetContext);
|
|
420
|
-
}
|
|
421
|
-
claimActiveTooltip() {
|
|
422
|
-
if (activeTooltip && activeTooltip.element !== this)
|
|
423
|
-
activeTooltip.close();
|
|
424
|
-
activeTooltip = { element: this, close: () => this.setOpen(false) };
|
|
425
|
-
}
|
|
426
|
-
setOpen(value, sourceEvent) {
|
|
427
|
-
const next = Boolean(value) && !this.hasAttribute("disabled");
|
|
428
|
-
if (next === this.isOpen)
|
|
429
|
-
return;
|
|
430
|
-
if (next)
|
|
431
|
-
this.claimActiveTooltip();
|
|
432
|
-
else if (activeTooltip?.element === this)
|
|
433
|
-
activeTooltip = undefined;
|
|
434
|
-
this.isOpen = next;
|
|
435
|
-
if (this.hasAttribute("open") !== next)
|
|
436
|
-
this.toggleAttribute("open", next);
|
|
437
|
-
this.syncVisibility();
|
|
438
|
-
this.emitOpenChange(sourceEvent);
|
|
439
|
-
}
|
|
440
|
-
emitOpenChange(sourceEvent) {
|
|
441
|
-
const documentKeyboardEvent = sourceEvent instanceof KeyboardEvent ? sourceEvent : undefined;
|
|
442
|
-
const event = documentKeyboardEvent ? undefined : sourceEvent;
|
|
443
|
-
this.dispatchEvent(new CustomEvent("spui-open-change", { bubbles: true, composed: true, detail: { open: this.isOpen, visible: this.isOpen, event, documentKeyboardEvent } }));
|
|
444
|
-
}
|
|
445
|
-
clearTimer() { if (this.timer !== undefined)
|
|
446
|
-
clearTimeout(this.timer); this.timer = undefined; }
|
|
447
|
-
get appearance() { return this.getAttribute("appearance") === "inverted" ? "inverted" : "normal"; }
|
|
448
|
-
get positioningOptions() { return typeof this.positioningValue === "object" && this.positioningValue !== null ? this.positioningValue : undefined; }
|
|
449
|
-
parsePosition(raw, direction) {
|
|
450
|
-
const parts = raw.split("-");
|
|
451
|
-
const placement = normalizePosition(parts[0], direction);
|
|
452
|
-
const suffix = parts[1];
|
|
453
|
-
const requestedAlign = suffix === "start" || suffix === "end" || suffix === "top" || suffix === "bottom" ? suffix : "center";
|
|
454
|
-
const vertical = placement === "top" || placement === "bottom";
|
|
455
|
-
const align = vertical ? requestedAlign === "start" || requestedAlign === "end" ? requestedAlign : "center" : requestedAlign === "top" || requestedAlign === "bottom" ? requestedAlign : "center";
|
|
456
|
-
return [placement, align];
|
|
457
|
-
}
|
|
458
|
-
getRequestedPosition(direction) {
|
|
459
|
-
const configured = this.positioningValue;
|
|
460
|
-
const raw = typeof configured === "string" ? configured : configured?.position ?? this.getAttribute("positioning") ?? this.getAttribute("placement") ?? "above";
|
|
461
|
-
const [placement, suffixAlign] = this.parsePosition(raw, direction);
|
|
462
|
-
const configuredAlign = typeof configured === "object" && configured !== null ? configured.align : undefined;
|
|
463
|
-
const attributeAlign = this.getAttribute("align");
|
|
464
|
-
const requestedAlign = configuredAlign ?? attributeAlign ?? suffixAlign;
|
|
465
|
-
const vertical = placement === "top" || placement === "bottom";
|
|
466
|
-
const align = vertical ? requestedAlign === "start" || requestedAlign === "end" ? requestedAlign : "center" : requestedAlign === "top" || requestedAlign === "bottom" ? requestedAlign : "center";
|
|
467
|
-
return [placement, align, raw];
|
|
468
|
-
}
|
|
469
|
-
get relationship() {
|
|
470
|
-
const value = this.getAttribute("relationship");
|
|
471
|
-
return value === "label" || value === "inaccessible" ? value : "description";
|
|
472
|
-
}
|
|
473
|
-
get showDelay() { return this.parseDelay(this.getAttribute("show-delay") ?? this.getAttribute("delay"), 250); }
|
|
474
|
-
get hideDelay() { return this.parseDelay(this.getAttribute("hide-delay"), 250); }
|
|
475
|
-
parseDelay(value, fallback) { if (value === null || value.trim() === "")
|
|
476
|
-
return fallback; const delay = Number(value); return Number.isFinite(delay) && delay >= 0 ? delay : fallback; }
|
|
477
|
-
applyRelationship() {
|
|
478
|
-
const trigger = this.trigger;
|
|
479
|
-
if (!trigger || !this.ariaBefore)
|
|
480
|
-
return;
|
|
481
|
-
this.restoreAriaValues();
|
|
482
|
-
if (!this.tooltip || this.relationship === "inaccessible")
|
|
483
|
-
return;
|
|
484
|
-
if ((trigger.shadowRoot || trigger.localName.includes("-")) && this.tooltip.getRootNode() !== trigger.shadowRoot && this.relationship === "description") {
|
|
485
|
-
const values = [this.ariaBefore.get("aria-description"), this.tooltip.textContent?.trim()].filter(Boolean);
|
|
486
|
-
if (values.length)
|
|
487
|
-
trigger.setAttribute("aria-description", values.join(" "));
|
|
488
|
-
return;
|
|
489
|
-
}
|
|
490
|
-
const attribute = this.relationship === "label" ? "aria-labelledby" : "aria-describedby";
|
|
491
|
-
const values = new Set((this.ariaBefore.get(attribute) ?? "").split(/\s+/).filter(Boolean));
|
|
492
|
-
values.add(this.tooltip.id);
|
|
493
|
-
trigger.setAttribute(attribute, [...values].join(" "));
|
|
494
|
-
}
|
|
495
|
-
restoreAriaValues() {
|
|
496
|
-
if (!this.trigger || !this.ariaBefore)
|
|
497
|
-
return;
|
|
498
|
-
for (const [name, value] of this.ariaBefore)
|
|
499
|
-
value === null ? this.trigger.removeAttribute(name) : this.trigger.setAttribute(name, value);
|
|
500
|
-
}
|
|
501
|
-
restoreAria() {
|
|
502
|
-
if (!this.trigger)
|
|
503
|
-
return;
|
|
504
|
-
this.restoreAriaValues();
|
|
505
|
-
this.trigger = undefined;
|
|
506
|
-
this.ariaBefore = undefined;
|
|
507
|
-
}
|
|
508
|
-
}
|
|
509
|
-
customElements.define("spui-tooltip", SpuiTooltip);
|
|
510
|
-
}
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
export type TreeNode<T = unknown> = {
|
|
2
|
-
id: string | number;
|
|
3
|
-
label: string;
|
|
4
|
-
disabled?: boolean;
|
|
5
|
-
open?: boolean;
|
|
6
|
-
children?: readonly TreeNode<T>[];
|
|
7
|
-
value?: T;
|
|
8
|
-
};
|
|
9
|
-
export type VisibleTreeNode<T = unknown> = {
|
|
10
|
-
node: TreeNode<T>;
|
|
11
|
-
key: string;
|
|
12
|
-
parentKey?: string;
|
|
13
|
-
level: number;
|
|
14
|
-
position: number;
|
|
15
|
-
setSize: number;
|
|
16
|
-
};
|
|
17
|
-
export declare function treeNodeKey<T>(node: TreeNode<T>): string;
|
|
18
|
-
export declare function flattenTree<T>(nodes: readonly TreeNode<T>[], expandedKeys: ReadonlySet<string>): VisibleTreeNode<T>[];
|
|
19
|
-
export declare function flattenAllTree<T>(nodes: readonly TreeNode<T>[]): VisibleTreeNode<T>[];
|
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
export function treeNodeKey(node) { return String(node.id); }
|
|
2
|
-
export function flattenTree(nodes, expandedKeys) {
|
|
3
|
-
const result = [];
|
|
4
|
-
const seenIds = new Set();
|
|
5
|
-
const stack = [];
|
|
6
|
-
for (let index = nodes.length - 1; index >= 0; index--)
|
|
7
|
-
stack.push({ node: nodes[index], level: 1, position: index + 1, setSize: nodes.length });
|
|
8
|
-
while (stack.length) {
|
|
9
|
-
const entry = stack.pop();
|
|
10
|
-
const key = treeNodeKey(entry.node);
|
|
11
|
-
if (seenIds.has(key))
|
|
12
|
-
continue;
|
|
13
|
-
seenIds.add(key);
|
|
14
|
-
result.push({ ...entry, key });
|
|
15
|
-
const children = entry.node.children ?? [];
|
|
16
|
-
if (children.length && expandedKeys.has(key)) {
|
|
17
|
-
for (let index = children.length - 1; index >= 0; index--)
|
|
18
|
-
stack.push({ node: children[index], parentKey: key, level: entry.level + 1, position: index + 1, setSize: children.length });
|
|
19
|
-
}
|
|
20
|
-
}
|
|
21
|
-
return result;
|
|
22
|
-
}
|
|
23
|
-
export function flattenAllTree(nodes) {
|
|
24
|
-
const expanded = new Set(), stack = [...nodes];
|
|
25
|
-
while (stack.length) {
|
|
26
|
-
const node = stack.pop(), key = treeNodeKey(node);
|
|
27
|
-
if (expanded.has(key))
|
|
28
|
-
continue;
|
|
29
|
-
expanded.add(key);
|
|
30
|
-
if (node.children)
|
|
31
|
-
stack.push(...node.children);
|
|
32
|
-
}
|
|
33
|
-
return flattenTree(nodes, expanded);
|
|
34
|
-
}
|
package/dist/elements/tree.d.ts
DELETED
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
import { type TreeNode } from "./tree-model.js";
|
|
2
|
-
export type TreeItemRenderer<T = unknown> = (node: TreeNode<T>, level: number) => Node | string | number | null;
|
|
3
|
-
export type TreeCheckedItem = string | number | readonly [string | number, boolean | "mixed"];
|
|
4
|
-
/** Accessible framework-neutral tree with nested data and roving focus. */
|
|
5
|
-
export declare function defineTree(): void;
|