@vonage/vivid 3.25.0 → 3.26.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 (120) hide show
  1. package/accordion/index.js +0 -1
  2. package/accordion-item/index.js +0 -1
  3. package/alert/index.js +0 -1
  4. package/avatar/index.js +0 -1
  5. package/badge/index.js +0 -1
  6. package/banner/index.js +0 -1
  7. package/breadcrumb-item/index.js +0 -1
  8. package/button/index.js +0 -1
  9. package/card/index.js +0 -1
  10. package/checkbox/index.js +0 -1
  11. package/combobox/index.js +0 -1
  12. package/custom-elements.json +35 -1
  13. package/data-grid/index.js +7 -2
  14. package/dialog/index.js +0 -1
  15. package/empty-state/index.js +0 -1
  16. package/fab/index.js +0 -1
  17. package/icon/index.js +0 -1
  18. package/index.js +27 -29
  19. package/lib/components.d.ts +0 -2
  20. package/lib/data-grid/data-grid-cell.d.ts +14 -1
  21. package/lib/data-grid/data-grid.options.d.ts +7 -0
  22. package/listbox/index.js +56 -11
  23. package/menu/index.js +2 -3
  24. package/menu-item/index.js +1 -2
  25. package/nav/index.js +1 -1
  26. package/nav-disclosure/index.js +1 -2
  27. package/nav-item/index.js +1 -2
  28. package/note/index.js +1 -2
  29. package/number-field/index.js +1 -2
  30. package/option/index.js +0 -1
  31. package/package.json +1 -1
  32. package/pagination/index.js +1 -2
  33. package/popup/index.js +0 -1
  34. package/progress/index.js +1 -1
  35. package/radio/index.js +1 -1
  36. package/radio-group/index.js +1 -1
  37. package/select/index.js +1 -2
  38. package/shared/definition.js +1 -1
  39. package/shared/definition10.js +1 -1
  40. package/shared/definition11.js +1 -1
  41. package/shared/definition12.js +1 -1
  42. package/shared/definition14.js +1 -1
  43. package/shared/definition15.js +1 -1
  44. package/shared/definition16.js +2 -2
  45. package/shared/definition17.js +1 -1
  46. package/shared/definition18.js +1 -1
  47. package/shared/definition19.js +1 -1
  48. package/shared/definition2.js +1 -1
  49. package/shared/definition21.js +1 -1
  50. package/shared/definition22.js +68 -21
  51. package/shared/definition23.js +1 -1
  52. package/shared/definition24.js +1 -1
  53. package/shared/definition25.js +1 -1
  54. package/shared/definition26.js +1 -1
  55. package/shared/definition27.js +1 -1
  56. package/shared/definition29.js +368 -48
  57. package/shared/definition30.js +301 -296
  58. package/shared/definition31.js +14 -376
  59. package/shared/definition32.js +70 -13
  60. package/shared/definition33.js +25 -66
  61. package/shared/definition34.js +39 -27
  62. package/shared/definition35.js +431 -31
  63. package/shared/definition36.js +214 -430
  64. package/shared/definition37.js +70 -209
  65. package/shared/definition38.js +33 -81
  66. package/shared/definition39.js +423 -32
  67. package/shared/definition4.js +1 -1
  68. package/shared/definition40.js +586 -358
  69. package/shared/definition41.js +73 -648
  70. package/shared/definition42.js +584 -70
  71. package/shared/definition43.js +81 -538
  72. package/shared/definition44.js +52 -127
  73. package/shared/definition45.js +16 -56
  74. package/shared/definition46.js +485 -17
  75. package/shared/definition47.js +99 -477
  76. package/shared/definition48.js +19 -114
  77. package/shared/definition49.js +276 -19
  78. package/shared/definition5.js +1 -1
  79. package/shared/definition50.js +89 -245
  80. package/shared/definition51.js +627 -118
  81. package/shared/definition52.js +86 -601
  82. package/shared/definition53.js +68 -112
  83. package/shared/definition54.js +294 -69
  84. package/shared/definition6.js +1 -1
  85. package/shared/definition7.js +1 -1
  86. package/shared/definition8.js +1 -1
  87. package/shared/definition9.js +1 -1
  88. package/shared/es.object.assign.js +1 -1
  89. package/shared/es.regexp.to-string.js +1 -1
  90. package/shared/es.string.includes.js +1 -1
  91. package/shared/form-elements.js +1 -1
  92. package/shared/icon.js +17 -13
  93. package/shared/index.js +1 -1
  94. package/shared/patterns/form-elements/form-elements.d.ts +4 -4
  95. package/shared/string-trim.js +1 -1
  96. package/shared/text-field.js +1 -1
  97. package/shared/to-string.js +1 -1
  98. package/side-drawer/index.js +1 -1
  99. package/slider/index.js +1 -1
  100. package/styles/core/all.css +1 -1
  101. package/styles/core/theme.css +1 -1
  102. package/styles/core/typography.css +1 -1
  103. package/styles/tokens/theme-dark.css +4 -4
  104. package/styles/tokens/theme-light.css +4 -4
  105. package/switch/index.js +1 -2
  106. package/tab/index.js +1 -2
  107. package/tab-panel/index.js +1 -1
  108. package/tabs/index.js +3 -4
  109. package/tag/index.js +1 -2
  110. package/tag-group/index.js +1 -1
  111. package/text-anchor/index.js +0 -1
  112. package/text-area/index.js +1 -2
  113. package/text-field/index.js +1 -2
  114. package/toggletip/index.js +1 -2
  115. package/tooltip/index.js +1 -2
  116. package/tree-item/index.js +1 -2
  117. package/tree-view/index.js +1 -1
  118. package/vivid.api.json +0 -191
  119. package/shared/definition55.js +0 -305
  120. package/shared/engine-is-node.js +0 -8
package/vivid.api.json CHANGED
@@ -3160,141 +3160,6 @@
3160
3160
  }
3161
3161
  ]
3162
3162
  },
3163
- {
3164
- "kind": "TypeAlias",
3165
- "canonicalReference": "@vonage/vivid!LisboxAppearance:type",
3166
- "docComment": "",
3167
- "excerptTokens": [
3168
- {
3169
- "kind": "Content",
3170
- "text": "export declare type LisboxAppearance = "
3171
- },
3172
- {
3173
- "kind": "Reference",
3174
- "text": "Extract",
3175
- "canonicalReference": "!Extract:type"
3176
- },
3177
- {
3178
- "kind": "Content",
3179
- "text": "<"
3180
- },
3181
- {
3182
- "kind": "Reference",
3183
- "text": "Appearance",
3184
- "canonicalReference": "@vonage/vivid!Appearance:enum"
3185
- },
3186
- {
3187
- "kind": "Content",
3188
- "text": ", "
3189
- },
3190
- {
3191
- "kind": "Reference",
3192
- "text": "Appearance.Fieldset",
3193
- "canonicalReference": "@vonage/vivid!Appearance.Fieldset:member"
3194
- },
3195
- {
3196
- "kind": "Content",
3197
- "text": " | "
3198
- },
3199
- {
3200
- "kind": "Reference",
3201
- "text": "Appearance.Ghost",
3202
- "canonicalReference": "@vonage/vivid!Appearance.Ghost:member"
3203
- },
3204
- {
3205
- "kind": "Content",
3206
- "text": ">"
3207
- },
3208
- {
3209
- "kind": "Content",
3210
- "text": ";"
3211
- }
3212
- ],
3213
- "fileUrlPath": "../../dist/libs/components/lib/listbox/listbox.d.ts",
3214
- "releaseTag": "Public",
3215
- "name": "LisboxAppearance",
3216
- "typeTokenRange": {
3217
- "startIndex": 1,
3218
- "endIndex": 9
3219
- }
3220
- },
3221
- {
3222
- "kind": "Variable",
3223
- "canonicalReference": "@vonage/vivid!listboxDefinition:var",
3224
- "docComment": "",
3225
- "excerptTokens": [
3226
- {
3227
- "kind": "Content",
3228
- "text": "listboxDefinition: "
3229
- },
3230
- {
3231
- "kind": "Content",
3232
- "text": "(overrideDefinition?: import(\"@microsoft/fast-foundation\")."
3233
- },
3234
- {
3235
- "kind": "Reference",
3236
- "text": "OverrideFoundationElementDefinition",
3237
- "canonicalReference": "@microsoft/fast-foundation!OverrideFoundationElementDefinition:type"
3238
- },
3239
- {
3240
- "kind": "Content",
3241
- "text": "<"
3242
- },
3243
- {
3244
- "kind": "Reference",
3245
- "text": "FoundationElementDefinition",
3246
- "canonicalReference": "@microsoft/fast-foundation!FoundationElementDefinition:interface"
3247
- },
3248
- {
3249
- "kind": "Content",
3250
- "text": "> | undefined) => import(\"@microsoft/fast-foundation\")."
3251
- },
3252
- {
3253
- "kind": "Reference",
3254
- "text": "FoundationElementRegistry",
3255
- "canonicalReference": "@microsoft/fast-foundation!FoundationElementRegistry:class"
3256
- },
3257
- {
3258
- "kind": "Content",
3259
- "text": "<"
3260
- },
3261
- {
3262
- "kind": "Reference",
3263
- "text": "FoundationElementDefinition",
3264
- "canonicalReference": "@microsoft/fast-foundation!FoundationElementDefinition:interface"
3265
- },
3266
- {
3267
- "kind": "Content",
3268
- "text": ", import(\"@microsoft/fast-element\")."
3269
- },
3270
- {
3271
- "kind": "Reference",
3272
- "text": "Constructable",
3273
- "canonicalReference": "@microsoft/fast-element!Constructable:type"
3274
- },
3275
- {
3276
- "kind": "Content",
3277
- "text": "<import(\"@microsoft/fast-foundation\")."
3278
- },
3279
- {
3280
- "kind": "Reference",
3281
- "text": "FoundationElement",
3282
- "canonicalReference": "@microsoft/fast-foundation!FoundationElement:class"
3283
- },
3284
- {
3285
- "kind": "Content",
3286
- "text": ">>"
3287
- }
3288
- ],
3289
- "fileUrlPath": "../../dist/libs/components/lib/listbox/definition.d.ts",
3290
- "isReadonly": true,
3291
- "releaseTag": "Public",
3292
- "name": "listboxDefinition",
3293
- "variableTypeTokenRange": {
3294
- "startIndex": 1,
3295
- "endIndex": 14
3296
- }
3297
- },
3298
3163
  {
3299
3164
  "kind": "Variable",
3300
3165
  "canonicalReference": "@vonage/vivid!listboxOptionDefinition:var",
@@ -6000,34 +5865,6 @@
6000
5865
  "endIndex": 3
6001
5866
  }
6002
5867
  },
6003
- {
6004
- "kind": "Variable",
6005
- "canonicalReference": "@vonage/vivid!registerElevation:var",
6006
- "docComment": "",
6007
- "excerptTokens": [
6008
- {
6009
- "kind": "Content",
6010
- "text": "registerElevation: "
6011
- },
6012
- {
6013
- "kind": "Content",
6014
- "text": "(prefix?: string) => import(\"@microsoft/fast-foundation\")."
6015
- },
6016
- {
6017
- "kind": "Reference",
6018
- "text": "DesignSystem",
6019
- "canonicalReference": "@microsoft/fast-foundation!DesignSystem:interface"
6020
- }
6021
- ],
6022
- "fileUrlPath": "../../dist/libs/components/lib/elevation/definition.d.ts",
6023
- "isReadonly": true,
6024
- "releaseTag": "Public",
6025
- "name": "registerElevation",
6026
- "variableTypeTokenRange": {
6027
- "startIndex": 1,
6028
- "endIndex": 3
6029
- }
6030
- },
6031
5868
  {
6032
5869
  "kind": "Variable",
6033
5870
  "canonicalReference": "@vonage/vivid!registerEmptyState:var",
@@ -6196,34 +6033,6 @@
6196
6033
  "endIndex": 3
6197
6034
  }
6198
6035
  },
6199
- {
6200
- "kind": "Variable",
6201
- "canonicalReference": "@vonage/vivid!registerListbox:var",
6202
- "docComment": "",
6203
- "excerptTokens": [
6204
- {
6205
- "kind": "Content",
6206
- "text": "registerListbox: "
6207
- },
6208
- {
6209
- "kind": "Content",
6210
- "text": "(prefix?: string) => import(\"@microsoft/fast-foundation\")."
6211
- },
6212
- {
6213
- "kind": "Reference",
6214
- "text": "DesignSystem",
6215
- "canonicalReference": "@microsoft/fast-foundation!DesignSystem:interface"
6216
- }
6217
- ],
6218
- "fileUrlPath": "../../dist/libs/components/lib/listbox/definition.d.ts",
6219
- "isReadonly": true,
6220
- "releaseTag": "Public",
6221
- "name": "registerListbox",
6222
- "variableTypeTokenRange": {
6223
- "startIndex": 1,
6224
- "endIndex": 3
6225
- }
6226
- },
6227
6036
  {
6228
6037
  "kind": "Variable",
6229
6038
  "canonicalReference": "@vonage/vivid!registerMenu:var",
@@ -1,305 +0,0 @@
1
- import { F as FoundationElement, Y as DOM, _ as __decorate, a as attr, o as observable, h as html, r as registerFactory } from './index.js';
2
- import { T as TreeItem, i as isTreeItemElement } from './tree-item.js';
3
- import { i as isHTMLElement, g as getDisplayedNodes } from './dom.js';
4
- import { d as keyEnter, c as keyArrowUp, b as keyArrowDown, h as keyArrowRight, i as keyArrowLeft, k as keyEnd, a as keyHome } from './key-codes.js';
5
- import { s as slotted } from './slotted.js';
6
- import { r as ref } from './ref.js';
7
- import { c as classNames } from './class-names.js';
8
-
9
- /**
10
- * A Tree view Custom HTML Element.
11
- * Implements the {@link https://w3c.github.io/aria-practices/#TreeView | ARIA TreeView }.
12
- *
13
- * @slot - The default slot for tree items
14
- *
15
- * @public
16
- */
17
- class TreeView$1 extends FoundationElement {
18
- constructor() {
19
- super(...arguments);
20
- /**
21
- * The tree item that is designated to be in the tab queue.
22
- *
23
- * @internal
24
- */
25
- this.currentFocused = null;
26
- /**
27
- * Handle focus events
28
- *
29
- * @internal
30
- */
31
- this.handleFocus = (e) => {
32
- if (this.slottedTreeItems.length < 1) {
33
- // no child items, nothing to do
34
- return;
35
- }
36
- if (e.target === this) {
37
- if (this.currentFocused === null) {
38
- this.currentFocused = this.getValidFocusableItem();
39
- }
40
- if (this.currentFocused !== null) {
41
- TreeItem.focusItem(this.currentFocused);
42
- }
43
- return;
44
- }
45
- if (this.contains(e.target)) {
46
- this.setAttribute("tabindex", "-1");
47
- this.currentFocused = e.target;
48
- }
49
- };
50
- /**
51
- * Handle blur events
52
- *
53
- * @internal
54
- */
55
- this.handleBlur = (e) => {
56
- if (e.target instanceof HTMLElement &&
57
- (e.relatedTarget === null || !this.contains(e.relatedTarget))) {
58
- this.setAttribute("tabindex", "0");
59
- }
60
- };
61
- /**
62
- * KeyDown handler
63
- *
64
- * @internal
65
- */
66
- this.handleKeyDown = (e) => {
67
- if (e.defaultPrevented) {
68
- return;
69
- }
70
- if (this.slottedTreeItems.length < 1) {
71
- return true;
72
- }
73
- const treeItems = this.getVisibleNodes();
74
- switch (e.key) {
75
- case keyHome:
76
- if (treeItems.length) {
77
- TreeItem.focusItem(treeItems[0]);
78
- }
79
- return;
80
- case keyEnd:
81
- if (treeItems.length) {
82
- TreeItem.focusItem(treeItems[treeItems.length - 1]);
83
- }
84
- return;
85
- case keyArrowLeft:
86
- if (e.target && this.isFocusableElement(e.target)) {
87
- const item = e.target;
88
- if (item instanceof TreeItem &&
89
- item.childItemLength() > 0 &&
90
- item.expanded) {
91
- item.expanded = false;
92
- }
93
- else if (item instanceof TreeItem &&
94
- item.parentElement instanceof TreeItem) {
95
- TreeItem.focusItem(item.parentElement);
96
- }
97
- }
98
- return false;
99
- case keyArrowRight:
100
- if (e.target && this.isFocusableElement(e.target)) {
101
- const item = e.target;
102
- if (item instanceof TreeItem &&
103
- item.childItemLength() > 0 &&
104
- !item.expanded) {
105
- item.expanded = true;
106
- }
107
- else if (item instanceof TreeItem && item.childItemLength() > 0) {
108
- this.focusNextNode(1, e.target);
109
- }
110
- }
111
- return;
112
- case keyArrowDown:
113
- if (e.target && this.isFocusableElement(e.target)) {
114
- this.focusNextNode(1, e.target);
115
- }
116
- return;
117
- case keyArrowUp:
118
- if (e.target && this.isFocusableElement(e.target)) {
119
- this.focusNextNode(-1, e.target);
120
- }
121
- return;
122
- case keyEnter:
123
- // In single-select trees where selection does not follow focus (see note below),
124
- // the default action is typically to select the focused node.
125
- this.handleClick(e);
126
- return;
127
- }
128
- // don't prevent default if we took no action
129
- return true;
130
- };
131
- /**
132
- * Handles the selected-changed events bubbling up
133
- * from child tree items
134
- *
135
- * @internal
136
- */
137
- this.handleSelectedChange = (e) => {
138
- if (e.defaultPrevented) {
139
- return;
140
- }
141
- if (!(e.target instanceof Element) || !isTreeItemElement(e.target)) {
142
- return true;
143
- }
144
- const item = e.target;
145
- if (item.selected) {
146
- if (this.currentSelected && this.currentSelected !== item) {
147
- this.currentSelected.selected = false;
148
- }
149
- // new selected item
150
- this.currentSelected = item;
151
- }
152
- else if (!item.selected && this.currentSelected === item) {
153
- // selected item deselected
154
- this.currentSelected = null;
155
- }
156
- return;
157
- };
158
- /**
159
- * Updates the tree view when slottedTreeItems changes
160
- */
161
- this.setItems = () => {
162
- // force single selection
163
- // defaults to first one found
164
- const selectedItem = this.treeView.querySelector("[aria-selected='true']");
165
- this.currentSelected = selectedItem;
166
- // invalidate the current focused item if it is no longer valid
167
- if (this.currentFocused === null || !this.contains(this.currentFocused)) {
168
- this.currentFocused = this.getValidFocusableItem();
169
- }
170
- // toggle properties on child elements
171
- this.nested = this.checkForNestedItems();
172
- const treeItems = this.getVisibleNodes();
173
- treeItems.forEach(node => {
174
- if (isTreeItemElement(node)) {
175
- node.nested = this.nested;
176
- }
177
- });
178
- };
179
- /**
180
- * check if the item is focusable
181
- */
182
- this.isFocusableElement = (el) => {
183
- return isTreeItemElement(el);
184
- };
185
- this.isSelectedElement = (el) => {
186
- return el.selected;
187
- };
188
- }
189
- slottedTreeItemsChanged() {
190
- if (this.$fastController.isConnected) {
191
- // update for slotted children change
192
- this.setItems();
193
- }
194
- }
195
- connectedCallback() {
196
- super.connectedCallback();
197
- this.setAttribute("tabindex", "0");
198
- DOM.queueUpdate(() => {
199
- this.setItems();
200
- });
201
- }
202
- /**
203
- * Handles click events bubbling up
204
- *
205
- * @internal
206
- */
207
- handleClick(e) {
208
- if (e.defaultPrevented) {
209
- // handled, do nothing
210
- return;
211
- }
212
- if (!(e.target instanceof Element) || !isTreeItemElement(e.target)) {
213
- // not a tree item, ignore
214
- return true;
215
- }
216
- const item = e.target;
217
- if (!item.disabled) {
218
- item.selected = !item.selected;
219
- }
220
- return;
221
- }
222
- /**
223
- * Move focus to a tree item based on its offset from the provided item
224
- */
225
- focusNextNode(delta, item) {
226
- const visibleNodes = this.getVisibleNodes();
227
- if (!visibleNodes) {
228
- return;
229
- }
230
- const focusItem = visibleNodes[visibleNodes.indexOf(item) + delta];
231
- if (isHTMLElement(focusItem)) {
232
- TreeItem.focusItem(focusItem);
233
- }
234
- }
235
- /**
236
- * checks if there are any nested tree items
237
- */
238
- getValidFocusableItem() {
239
- const treeItems = this.getVisibleNodes();
240
- // default to selected element if there is one
241
- let focusIndex = treeItems.findIndex(this.isSelectedElement);
242
- if (focusIndex === -1) {
243
- // otherwise first focusable tree item
244
- focusIndex = treeItems.findIndex(this.isFocusableElement);
245
- }
246
- if (focusIndex !== -1) {
247
- return treeItems[focusIndex];
248
- }
249
- return null;
250
- }
251
- /**
252
- * checks if there are any nested tree items
253
- */
254
- checkForNestedItems() {
255
- return this.slottedTreeItems.some((node) => {
256
- return isTreeItemElement(node) && node.querySelector("[role='treeitem']");
257
- });
258
- }
259
- getVisibleNodes() {
260
- return getDisplayedNodes(this, "[role='treeitem']") || [];
261
- }
262
- }
263
- __decorate([
264
- attr({ attribute: "render-collapsed-nodes" })
265
- ], TreeView$1.prototype, "renderCollapsedNodes", void 0);
266
- __decorate([
267
- observable
268
- ], TreeView$1.prototype, "currentSelected", void 0);
269
- __decorate([
270
- observable
271
- ], TreeView$1.prototype, "slottedTreeItems", void 0);
272
-
273
- var css_248z = ".control {\n position: relative;\n display: flex;\n flex-direction: column;\n gap: 4px;\n}";
274
-
275
- class TreeView extends TreeView$1 {}
276
-
277
- let _2 = t => t,
278
- _t;
279
- const getClasses = _ => classNames('control');
280
- const TreeViewTemplate = () => {
281
- return html(_t || (_t = _2`
282
- <template
283
- role="tree"
284
- ${0}
285
- @keydown="${0}"
286
- @focusin="${0}"
287
- @focusout="${0}"
288
- @click="${0}"
289
- @selected-change="${0}"
290
- >
291
- <div class="${0}">
292
- <slot ${0}></slot>
293
- </div>
294
- </template>`), ref('treeView'), (x, c) => x.handleKeyDown(c.event), (x, c) => x.handleFocus(c.event), (x, c) => x.handleBlur(c.event), (x, c) => x.handleClick(c.event), (x, c) => x.handleSelectedChange(c.event), getClasses, slotted('slottedTreeItems'));
295
- };
296
-
297
- const treeViewDefinition = TreeView.compose({
298
- baseName: 'tree-view',
299
- template: TreeViewTemplate,
300
- styles: css_248z
301
- });
302
- const treeViewRegistries = [treeViewDefinition()];
303
- const registerTreeView = registerFactory(treeViewRegistries);
304
-
305
- export { treeViewRegistries as a, registerTreeView as r, treeViewDefinition as t };
@@ -1,8 +0,0 @@
1
- import { s as classofRaw, x as global$1 } from './index.js';
2
-
3
- var classof = classofRaw;
4
- var global = global$1;
5
-
6
- var engineIsNode = classof(global.process) == 'process';
7
-
8
- export { engineIsNode as e };