@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,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
- }
@@ -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;