@esri/calcite-components 1.0.0-next.408 → 1.0.0-next.409
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/dist/calcite/calcite.esm.js +1 -1
- package/dist/calcite/p-8f93be14.system.js +1 -1
- package/dist/calcite/p-a6261f6b.system.entry.js +5 -0
- package/dist/calcite/p-d2a1cbbf.entry.js +5 -0
- package/dist/cjs/calcite-tree_2.cjs.entry.js +55 -55
- package/dist/cjs/calcite.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/tree/tree.js +61 -0
- package/dist/collection/components/tree-item/tree-item.js +0 -55
- package/dist/components/calcite-tree-item.js +0 -55
- package/dist/components/calcite-tree.js +56 -1
- package/dist/custom-elements/index.js +56 -56
- package/dist/esm/calcite-tree_2.entry.js +55 -55
- package/dist/esm/calcite.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm-es5/calcite-tree_2.entry.js +1 -1
- package/dist/esm-es5/calcite.js +1 -1
- package/dist/esm-es5/loader.js +1 -1
- package/dist/extras/docs-json.json +6 -1
- package/dist/types/components/tree/tree.d.ts +1 -0
- package/hydrate/index.js +56 -56
- package/package.json +1 -1
- package/readme.md +2 -2
- package/dist/calcite/p-38c4fbab.system.entry.js +0 -5
- package/dist/calcite/p-5ea8668d.entry.js +0 -5
|
@@ -145,6 +145,61 @@ export class Tree {
|
|
|
145
145
|
selected: nodeListToArray(this.el.querySelectorAll("calcite-tree-item")).filter((i) => i.selected)
|
|
146
146
|
});
|
|
147
147
|
}
|
|
148
|
+
keyDownHandler(event) {
|
|
149
|
+
var _a;
|
|
150
|
+
const root = this.el.closest("calcite-tree:not([child])");
|
|
151
|
+
const target = event.target;
|
|
152
|
+
if (root === this.el && target.tagName === "CALCITE-TREE-ITEM" && this.el.contains(target)) {
|
|
153
|
+
switch (event.key) {
|
|
154
|
+
case "ArrowDown":
|
|
155
|
+
const next = target.nextElementSibling;
|
|
156
|
+
if (next && next.matches("calcite-tree-item")) {
|
|
157
|
+
next.focus();
|
|
158
|
+
event.preventDefault();
|
|
159
|
+
}
|
|
160
|
+
break;
|
|
161
|
+
case "ArrowLeft":
|
|
162
|
+
// When focus is on an open node, closes the node.
|
|
163
|
+
if (target.hasChildren && target.expanded) {
|
|
164
|
+
target.expanded = false;
|
|
165
|
+
event.preventDefault();
|
|
166
|
+
break;
|
|
167
|
+
}
|
|
168
|
+
// When focus is on a child node that is also either an end node or a closed node, moves focus to its parent node.
|
|
169
|
+
const parentItem = target.parentElement.closest("calcite-tree-item");
|
|
170
|
+
if (parentItem && (!target.hasChildren || target.expanded === false)) {
|
|
171
|
+
parentItem.focus();
|
|
172
|
+
event.preventDefault();
|
|
173
|
+
break;
|
|
174
|
+
}
|
|
175
|
+
// When focus is on a root node that is also either an end node or a closed node, does nothing.
|
|
176
|
+
break;
|
|
177
|
+
case "ArrowRight":
|
|
178
|
+
if (!target.hasChildren) {
|
|
179
|
+
break;
|
|
180
|
+
}
|
|
181
|
+
if (target.expanded && document.activeElement === target) {
|
|
182
|
+
// When focus is on an open node, moves focus to the first child node.
|
|
183
|
+
(_a = target.querySelector("calcite-tree-item")) === null || _a === void 0 ? void 0 : _a.focus();
|
|
184
|
+
event.preventDefault();
|
|
185
|
+
}
|
|
186
|
+
else {
|
|
187
|
+
// When focus is on a closed node, opens the node; focus does not move.
|
|
188
|
+
target.expanded = true;
|
|
189
|
+
event.preventDefault();
|
|
190
|
+
}
|
|
191
|
+
// When focus is on an end node, does nothing.
|
|
192
|
+
break;
|
|
193
|
+
case "ArrowUp":
|
|
194
|
+
const previous = target.previousElementSibling;
|
|
195
|
+
if (previous && previous.matches("calcite-tree-item")) {
|
|
196
|
+
previous.focus();
|
|
197
|
+
event.preventDefault();
|
|
198
|
+
}
|
|
199
|
+
break;
|
|
200
|
+
}
|
|
201
|
+
}
|
|
202
|
+
}
|
|
148
203
|
updateAncestorTree(e) {
|
|
149
204
|
const item = e.target;
|
|
150
205
|
const children = item.querySelectorAll("calcite-tree-item");
|
|
@@ -358,5 +413,11 @@ export class Tree {
|
|
|
358
413
|
"target": undefined,
|
|
359
414
|
"capture": false,
|
|
360
415
|
"passive": false
|
|
416
|
+
}, {
|
|
417
|
+
"name": "keydown",
|
|
418
|
+
"method": "keyDownHandler",
|
|
419
|
+
"target": undefined,
|
|
420
|
+
"capture": false,
|
|
421
|
+
"passive": false
|
|
361
422
|
}]; }
|
|
362
423
|
}
|
|
@@ -32,12 +32,6 @@ export class TreeItem {
|
|
|
32
32
|
this.iconClickHandler = (event) => {
|
|
33
33
|
event.stopPropagation();
|
|
34
34
|
this.expanded = !this.expanded;
|
|
35
|
-
if (this.selectionMode !== TreeSelectionMode.Ancestors) {
|
|
36
|
-
this.calciteTreeItemSelect.emit({
|
|
37
|
-
modifyCurrentSelection: this.isSelectionMultiLike,
|
|
38
|
-
forceToggle: true
|
|
39
|
-
});
|
|
40
|
-
}
|
|
41
35
|
};
|
|
42
36
|
this.childrenClickHandler = (event) => event.stopPropagation();
|
|
43
37
|
//--------------------------------------------------------------------------
|
|
@@ -172,7 +166,6 @@ export class TreeItem {
|
|
|
172
166
|
});
|
|
173
167
|
}
|
|
174
168
|
keyDownHandler(e) {
|
|
175
|
-
var _a;
|
|
176
169
|
let root;
|
|
177
170
|
switch (e.key) {
|
|
178
171
|
case " ":
|
|
@@ -181,7 +174,6 @@ export class TreeItem {
|
|
|
181
174
|
forceToggle: false
|
|
182
175
|
});
|
|
183
176
|
e.preventDefault();
|
|
184
|
-
e.stopPropagation();
|
|
185
177
|
break;
|
|
186
178
|
case "Enter":
|
|
187
179
|
// activates a node, i.e., performs its default action. For parent nodes, one possible default action is to open or close the node. In single-select trees where selection does not follow focus (see note below), the default action is typically to select the focused node.
|
|
@@ -197,53 +189,6 @@ export class TreeItem {
|
|
|
197
189
|
});
|
|
198
190
|
}
|
|
199
191
|
e.preventDefault();
|
|
200
|
-
e.stopPropagation();
|
|
201
|
-
break;
|
|
202
|
-
case "ArrowLeft":
|
|
203
|
-
// When focus is on an open node, closes the node.
|
|
204
|
-
if (this.hasChildren && this.expanded) {
|
|
205
|
-
this.expanded = false;
|
|
206
|
-
e.preventDefault();
|
|
207
|
-
e.stopPropagation();
|
|
208
|
-
break;
|
|
209
|
-
}
|
|
210
|
-
// When focus is on a child node that is also either an end node or a closed node, moves focus to its parent node.
|
|
211
|
-
const parentItem = this.parentTreeItem;
|
|
212
|
-
if (parentItem && (!this.hasChildren || this.expanded === false)) {
|
|
213
|
-
parentItem.focus();
|
|
214
|
-
e.preventDefault();
|
|
215
|
-
e.stopPropagation();
|
|
216
|
-
break;
|
|
217
|
-
}
|
|
218
|
-
// When focus is on a root node that is also either an end node or a closed node, does nothing.
|
|
219
|
-
break;
|
|
220
|
-
case "ArrowRight":
|
|
221
|
-
// When focus is on a closed node, opens the node; focus does not move.
|
|
222
|
-
if (this.hasChildren && this.expanded === false) {
|
|
223
|
-
this.expanded = true;
|
|
224
|
-
e.preventDefault();
|
|
225
|
-
e.stopPropagation();
|
|
226
|
-
break;
|
|
227
|
-
}
|
|
228
|
-
// When focus is on a open node, moves focus to the first child node.
|
|
229
|
-
if (this.hasChildren && this.expanded) {
|
|
230
|
-
(_a = this.el.querySelector("calcite-tree-item")) === null || _a === void 0 ? void 0 : _a.focus();
|
|
231
|
-
e.stopPropagation();
|
|
232
|
-
break;
|
|
233
|
-
}
|
|
234
|
-
// When focus is on an end node, does nothing.
|
|
235
|
-
break;
|
|
236
|
-
case "ArrowUp":
|
|
237
|
-
const previous = this.el.previousElementSibling;
|
|
238
|
-
if (previous && previous.matches("calcite-tree-item")) {
|
|
239
|
-
previous.focus();
|
|
240
|
-
}
|
|
241
|
-
break;
|
|
242
|
-
case "ArrowDown":
|
|
243
|
-
const next = this.el.nextElementSibling;
|
|
244
|
-
if (next && next.matches("calcite-tree-item")) {
|
|
245
|
-
next.focus();
|
|
246
|
-
}
|
|
247
192
|
break;
|
|
248
193
|
case "Home":
|
|
249
194
|
root = this.el.closest("calcite-tree:not([child])");
|
|
@@ -53,12 +53,6 @@ let TreeItem = class extends HTMLElement {
|
|
|
53
53
|
this.iconClickHandler = (event) => {
|
|
54
54
|
event.stopPropagation();
|
|
55
55
|
this.expanded = !this.expanded;
|
|
56
|
-
if (this.selectionMode !== TreeSelectionMode.Ancestors) {
|
|
57
|
-
this.calciteTreeItemSelect.emit({
|
|
58
|
-
modifyCurrentSelection: this.isSelectionMultiLike,
|
|
59
|
-
forceToggle: true
|
|
60
|
-
});
|
|
61
|
-
}
|
|
62
56
|
};
|
|
63
57
|
this.childrenClickHandler = (event) => event.stopPropagation();
|
|
64
58
|
//--------------------------------------------------------------------------
|
|
@@ -185,7 +179,6 @@ let TreeItem = class extends HTMLElement {
|
|
|
185
179
|
});
|
|
186
180
|
}
|
|
187
181
|
keyDownHandler(e) {
|
|
188
|
-
var _a;
|
|
189
182
|
let root;
|
|
190
183
|
switch (e.key) {
|
|
191
184
|
case " ":
|
|
@@ -194,7 +187,6 @@ let TreeItem = class extends HTMLElement {
|
|
|
194
187
|
forceToggle: false
|
|
195
188
|
});
|
|
196
189
|
e.preventDefault();
|
|
197
|
-
e.stopPropagation();
|
|
198
190
|
break;
|
|
199
191
|
case "Enter":
|
|
200
192
|
// activates a node, i.e., performs its default action. For parent nodes, one possible default action is to open or close the node. In single-select trees where selection does not follow focus (see note below), the default action is typically to select the focused node.
|
|
@@ -210,53 +202,6 @@ let TreeItem = class extends HTMLElement {
|
|
|
210
202
|
});
|
|
211
203
|
}
|
|
212
204
|
e.preventDefault();
|
|
213
|
-
e.stopPropagation();
|
|
214
|
-
break;
|
|
215
|
-
case "ArrowLeft":
|
|
216
|
-
// When focus is on an open node, closes the node.
|
|
217
|
-
if (this.hasChildren && this.expanded) {
|
|
218
|
-
this.expanded = false;
|
|
219
|
-
e.preventDefault();
|
|
220
|
-
e.stopPropagation();
|
|
221
|
-
break;
|
|
222
|
-
}
|
|
223
|
-
// When focus is on a child node that is also either an end node or a closed node, moves focus to its parent node.
|
|
224
|
-
const parentItem = this.parentTreeItem;
|
|
225
|
-
if (parentItem && (!this.hasChildren || this.expanded === false)) {
|
|
226
|
-
parentItem.focus();
|
|
227
|
-
e.preventDefault();
|
|
228
|
-
e.stopPropagation();
|
|
229
|
-
break;
|
|
230
|
-
}
|
|
231
|
-
// When focus is on a root node that is also either an end node or a closed node, does nothing.
|
|
232
|
-
break;
|
|
233
|
-
case "ArrowRight":
|
|
234
|
-
// When focus is on a closed node, opens the node; focus does not move.
|
|
235
|
-
if (this.hasChildren && this.expanded === false) {
|
|
236
|
-
this.expanded = true;
|
|
237
|
-
e.preventDefault();
|
|
238
|
-
e.stopPropagation();
|
|
239
|
-
break;
|
|
240
|
-
}
|
|
241
|
-
// When focus is on a open node, moves focus to the first child node.
|
|
242
|
-
if (this.hasChildren && this.expanded) {
|
|
243
|
-
(_a = this.el.querySelector("calcite-tree-item")) === null || _a === void 0 ? void 0 : _a.focus();
|
|
244
|
-
e.stopPropagation();
|
|
245
|
-
break;
|
|
246
|
-
}
|
|
247
|
-
// When focus is on an end node, does nothing.
|
|
248
|
-
break;
|
|
249
|
-
case "ArrowUp":
|
|
250
|
-
const previous = this.el.previousElementSibling;
|
|
251
|
-
if (previous && previous.matches("calcite-tree-item")) {
|
|
252
|
-
previous.focus();
|
|
253
|
-
}
|
|
254
|
-
break;
|
|
255
|
-
case "ArrowDown":
|
|
256
|
-
const next = this.el.nextElementSibling;
|
|
257
|
-
if (next && next.matches("calcite-tree-item")) {
|
|
258
|
-
next.focus();
|
|
259
|
-
}
|
|
260
205
|
break;
|
|
261
206
|
case "Home":
|
|
262
207
|
root = this.el.closest("calcite-tree:not([child])");
|
|
@@ -148,6 +148,61 @@ let Tree = class extends HTMLElement {
|
|
|
148
148
|
selected: nodeListToArray(this.el.querySelectorAll("calcite-tree-item")).filter((i) => i.selected)
|
|
149
149
|
});
|
|
150
150
|
}
|
|
151
|
+
keyDownHandler(event) {
|
|
152
|
+
var _a;
|
|
153
|
+
const root = this.el.closest("calcite-tree:not([child])");
|
|
154
|
+
const target = event.target;
|
|
155
|
+
if (root === this.el && target.tagName === "CALCITE-TREE-ITEM" && this.el.contains(target)) {
|
|
156
|
+
switch (event.key) {
|
|
157
|
+
case "ArrowDown":
|
|
158
|
+
const next = target.nextElementSibling;
|
|
159
|
+
if (next && next.matches("calcite-tree-item")) {
|
|
160
|
+
next.focus();
|
|
161
|
+
event.preventDefault();
|
|
162
|
+
}
|
|
163
|
+
break;
|
|
164
|
+
case "ArrowLeft":
|
|
165
|
+
// When focus is on an open node, closes the node.
|
|
166
|
+
if (target.hasChildren && target.expanded) {
|
|
167
|
+
target.expanded = false;
|
|
168
|
+
event.preventDefault();
|
|
169
|
+
break;
|
|
170
|
+
}
|
|
171
|
+
// When focus is on a child node that is also either an end node or a closed node, moves focus to its parent node.
|
|
172
|
+
const parentItem = target.parentElement.closest("calcite-tree-item");
|
|
173
|
+
if (parentItem && (!target.hasChildren || target.expanded === false)) {
|
|
174
|
+
parentItem.focus();
|
|
175
|
+
event.preventDefault();
|
|
176
|
+
break;
|
|
177
|
+
}
|
|
178
|
+
// When focus is on a root node that is also either an end node or a closed node, does nothing.
|
|
179
|
+
break;
|
|
180
|
+
case "ArrowRight":
|
|
181
|
+
if (!target.hasChildren) {
|
|
182
|
+
break;
|
|
183
|
+
}
|
|
184
|
+
if (target.expanded && document.activeElement === target) {
|
|
185
|
+
// When focus is on an open node, moves focus to the first child node.
|
|
186
|
+
(_a = target.querySelector("calcite-tree-item")) === null || _a === void 0 ? void 0 : _a.focus();
|
|
187
|
+
event.preventDefault();
|
|
188
|
+
}
|
|
189
|
+
else {
|
|
190
|
+
// When focus is on a closed node, opens the node; focus does not move.
|
|
191
|
+
target.expanded = true;
|
|
192
|
+
event.preventDefault();
|
|
193
|
+
}
|
|
194
|
+
// When focus is on an end node, does nothing.
|
|
195
|
+
break;
|
|
196
|
+
case "ArrowUp":
|
|
197
|
+
const previous = target.previousElementSibling;
|
|
198
|
+
if (previous && previous.matches("calcite-tree-item")) {
|
|
199
|
+
previous.focus();
|
|
200
|
+
event.preventDefault();
|
|
201
|
+
}
|
|
202
|
+
break;
|
|
203
|
+
}
|
|
204
|
+
}
|
|
205
|
+
}
|
|
151
206
|
updateAncestorTree(e) {
|
|
152
207
|
const item = e.target;
|
|
153
208
|
const children = item.querySelectorAll("calcite-tree-item");
|
|
@@ -200,7 +255,7 @@ Tree = /*@__PURE__*/ proxyCustomElement(Tree, [1, "calcite-tree", {
|
|
|
200
255
|
"child": [1540],
|
|
201
256
|
"scale": [1537],
|
|
202
257
|
"selectionMode": [1537, "selection-mode"]
|
|
203
|
-
}, [[0, "focus", "onFocus"], [0, "focusin", "onFocusIn"], [0, "focusout", "onFocusOut"], [0, "calciteTreeItemSelect", "onClick"]]]);
|
|
258
|
+
}, [[0, "focus", "onFocus"], [0, "focusin", "onFocusIn"], [0, "focusout", "onFocusOut"], [0, "calciteTreeItemSelect", "onClick"], [0, "keydown", "keyDownHandler"]]]);
|
|
204
259
|
function defineCustomElement$1() {
|
|
205
260
|
if (typeof customElements === "undefined") {
|
|
206
261
|
return;
|
|
@@ -24921,6 +24921,61 @@ let Tree = class extends HTMLElement$1 {
|
|
|
24921
24921
|
selected: nodeListToArray(this.el.querySelectorAll("calcite-tree-item")).filter((i) => i.selected)
|
|
24922
24922
|
});
|
|
24923
24923
|
}
|
|
24924
|
+
keyDownHandler(event) {
|
|
24925
|
+
var _a;
|
|
24926
|
+
const root = this.el.closest("calcite-tree:not([child])");
|
|
24927
|
+
const target = event.target;
|
|
24928
|
+
if (root === this.el && target.tagName === "CALCITE-TREE-ITEM" && this.el.contains(target)) {
|
|
24929
|
+
switch (event.key) {
|
|
24930
|
+
case "ArrowDown":
|
|
24931
|
+
const next = target.nextElementSibling;
|
|
24932
|
+
if (next && next.matches("calcite-tree-item")) {
|
|
24933
|
+
next.focus();
|
|
24934
|
+
event.preventDefault();
|
|
24935
|
+
}
|
|
24936
|
+
break;
|
|
24937
|
+
case "ArrowLeft":
|
|
24938
|
+
// When focus is on an open node, closes the node.
|
|
24939
|
+
if (target.hasChildren && target.expanded) {
|
|
24940
|
+
target.expanded = false;
|
|
24941
|
+
event.preventDefault();
|
|
24942
|
+
break;
|
|
24943
|
+
}
|
|
24944
|
+
// When focus is on a child node that is also either an end node or a closed node, moves focus to its parent node.
|
|
24945
|
+
const parentItem = target.parentElement.closest("calcite-tree-item");
|
|
24946
|
+
if (parentItem && (!target.hasChildren || target.expanded === false)) {
|
|
24947
|
+
parentItem.focus();
|
|
24948
|
+
event.preventDefault();
|
|
24949
|
+
break;
|
|
24950
|
+
}
|
|
24951
|
+
// When focus is on a root node that is also either an end node or a closed node, does nothing.
|
|
24952
|
+
break;
|
|
24953
|
+
case "ArrowRight":
|
|
24954
|
+
if (!target.hasChildren) {
|
|
24955
|
+
break;
|
|
24956
|
+
}
|
|
24957
|
+
if (target.expanded && document.activeElement === target) {
|
|
24958
|
+
// When focus is on an open node, moves focus to the first child node.
|
|
24959
|
+
(_a = target.querySelector("calcite-tree-item")) === null || _a === void 0 ? void 0 : _a.focus();
|
|
24960
|
+
event.preventDefault();
|
|
24961
|
+
}
|
|
24962
|
+
else {
|
|
24963
|
+
// When focus is on a closed node, opens the node; focus does not move.
|
|
24964
|
+
target.expanded = true;
|
|
24965
|
+
event.preventDefault();
|
|
24966
|
+
}
|
|
24967
|
+
// When focus is on an end node, does nothing.
|
|
24968
|
+
break;
|
|
24969
|
+
case "ArrowUp":
|
|
24970
|
+
const previous = target.previousElementSibling;
|
|
24971
|
+
if (previous && previous.matches("calcite-tree-item")) {
|
|
24972
|
+
previous.focus();
|
|
24973
|
+
event.preventDefault();
|
|
24974
|
+
}
|
|
24975
|
+
break;
|
|
24976
|
+
}
|
|
24977
|
+
}
|
|
24978
|
+
}
|
|
24924
24979
|
updateAncestorTree(e) {
|
|
24925
24980
|
const item = e.target;
|
|
24926
24981
|
const children = item.querySelectorAll("calcite-tree-item");
|
|
@@ -25012,12 +25067,6 @@ let TreeItem = class extends HTMLElement$1 {
|
|
|
25012
25067
|
this.iconClickHandler = (event) => {
|
|
25013
25068
|
event.stopPropagation();
|
|
25014
25069
|
this.expanded = !this.expanded;
|
|
25015
|
-
if (this.selectionMode !== TreeSelectionMode.Ancestors) {
|
|
25016
|
-
this.calciteTreeItemSelect.emit({
|
|
25017
|
-
modifyCurrentSelection: this.isSelectionMultiLike,
|
|
25018
|
-
forceToggle: true
|
|
25019
|
-
});
|
|
25020
|
-
}
|
|
25021
25070
|
};
|
|
25022
25071
|
this.childrenClickHandler = (event) => event.stopPropagation();
|
|
25023
25072
|
//--------------------------------------------------------------------------
|
|
@@ -25144,7 +25193,6 @@ let TreeItem = class extends HTMLElement$1 {
|
|
|
25144
25193
|
});
|
|
25145
25194
|
}
|
|
25146
25195
|
keyDownHandler(e) {
|
|
25147
|
-
var _a;
|
|
25148
25196
|
let root;
|
|
25149
25197
|
switch (e.key) {
|
|
25150
25198
|
case " ":
|
|
@@ -25153,7 +25201,6 @@ let TreeItem = class extends HTMLElement$1 {
|
|
|
25153
25201
|
forceToggle: false
|
|
25154
25202
|
});
|
|
25155
25203
|
e.preventDefault();
|
|
25156
|
-
e.stopPropagation();
|
|
25157
25204
|
break;
|
|
25158
25205
|
case "Enter":
|
|
25159
25206
|
// activates a node, i.e., performs its default action. For parent nodes, one possible default action is to open or close the node. In single-select trees where selection does not follow focus (see note below), the default action is typically to select the focused node.
|
|
@@ -25169,53 +25216,6 @@ let TreeItem = class extends HTMLElement$1 {
|
|
|
25169
25216
|
});
|
|
25170
25217
|
}
|
|
25171
25218
|
e.preventDefault();
|
|
25172
|
-
e.stopPropagation();
|
|
25173
|
-
break;
|
|
25174
|
-
case "ArrowLeft":
|
|
25175
|
-
// When focus is on an open node, closes the node.
|
|
25176
|
-
if (this.hasChildren && this.expanded) {
|
|
25177
|
-
this.expanded = false;
|
|
25178
|
-
e.preventDefault();
|
|
25179
|
-
e.stopPropagation();
|
|
25180
|
-
break;
|
|
25181
|
-
}
|
|
25182
|
-
// When focus is on a child node that is also either an end node or a closed node, moves focus to its parent node.
|
|
25183
|
-
const parentItem = this.parentTreeItem;
|
|
25184
|
-
if (parentItem && (!this.hasChildren || this.expanded === false)) {
|
|
25185
|
-
parentItem.focus();
|
|
25186
|
-
e.preventDefault();
|
|
25187
|
-
e.stopPropagation();
|
|
25188
|
-
break;
|
|
25189
|
-
}
|
|
25190
|
-
// When focus is on a root node that is also either an end node or a closed node, does nothing.
|
|
25191
|
-
break;
|
|
25192
|
-
case "ArrowRight":
|
|
25193
|
-
// When focus is on a closed node, opens the node; focus does not move.
|
|
25194
|
-
if (this.hasChildren && this.expanded === false) {
|
|
25195
|
-
this.expanded = true;
|
|
25196
|
-
e.preventDefault();
|
|
25197
|
-
e.stopPropagation();
|
|
25198
|
-
break;
|
|
25199
|
-
}
|
|
25200
|
-
// When focus is on a open node, moves focus to the first child node.
|
|
25201
|
-
if (this.hasChildren && this.expanded) {
|
|
25202
|
-
(_a = this.el.querySelector("calcite-tree-item")) === null || _a === void 0 ? void 0 : _a.focus();
|
|
25203
|
-
e.stopPropagation();
|
|
25204
|
-
break;
|
|
25205
|
-
}
|
|
25206
|
-
// When focus is on an end node, does nothing.
|
|
25207
|
-
break;
|
|
25208
|
-
case "ArrowUp":
|
|
25209
|
-
const previous = this.el.previousElementSibling;
|
|
25210
|
-
if (previous && previous.matches("calcite-tree-item")) {
|
|
25211
|
-
previous.focus();
|
|
25212
|
-
}
|
|
25213
|
-
break;
|
|
25214
|
-
case "ArrowDown":
|
|
25215
|
-
const next = this.el.nextElementSibling;
|
|
25216
|
-
if (next && next.matches("calcite-tree-item")) {
|
|
25217
|
-
next.focus();
|
|
25218
|
-
}
|
|
25219
25219
|
break;
|
|
25220
25220
|
case "Home":
|
|
25221
25221
|
root = this.el.closest("calcite-tree:not([child])");
|
|
@@ -25659,7 +25659,7 @@ const CalciteTipGroup = /*@__PURE__*/proxyCustomElement(TipGroup, [1,"calcite-ti
|
|
|
25659
25659
|
const CalciteTipManager = /*@__PURE__*/proxyCustomElement(TipManager, [1,"calcite-tip-manager",{"closed":[1540],"headingLevel":[2,"heading-level"],"intlClose":[1,"intl-close"],"intlDefaultTitle":[1,"intl-default-title"],"intlNext":[1,"intl-next"],"intlPaginationLabel":[1,"intl-pagination-label"],"intlPrevious":[1,"intl-previous"],"selectedIndex":[32],"tips":[32],"total":[32],"direction":[32],"groupTitle":[32]}]);
|
|
25660
25660
|
const CalciteTooltip = /*@__PURE__*/proxyCustomElement(Tooltip, [1,"calcite-tooltip",{"label":[1],"offsetDistance":[514,"offset-distance"],"offsetSkidding":[514,"offset-skidding"],"open":[516],"overlayPositioning":[1,"overlay-positioning"],"placement":[513],"referenceElement":[1,"reference-element"],"effectiveReferenceElement":[32]}]);
|
|
25661
25661
|
const CalciteTooltipManager = /*@__PURE__*/proxyCustomElement(TooltipManager, [1,"calcite-tooltip-manager",{"selector":[1]},[[4,"keyup","keyUpHandler"],[3,"mouseover","mouseEnterShow"],[3,"mouseout","mouseLeaveHide"],[2,"click","clickHandler"],[2,"focus","focusShow"],[2,"blur","blurHide"]]]);
|
|
25662
|
-
const CalciteTree = /*@__PURE__*/proxyCustomElement(Tree, [1,"calcite-tree",{"lines":[1540],"inputEnabled":[4,"input-enabled"],"child":[1540],"scale":[1537],"selectionMode":[1537,"selection-mode"]},[[0,"focus","onFocus"],[0,"focusin","onFocusIn"],[0,"focusout","onFocusOut"],[0,"calciteTreeItemSelect","onClick"]]]);
|
|
25662
|
+
const CalciteTree = /*@__PURE__*/proxyCustomElement(Tree, [1,"calcite-tree",{"lines":[1540],"inputEnabled":[4,"input-enabled"],"child":[1540],"scale":[1537],"selectionMode":[1537,"selection-mode"]},[[0,"focus","onFocus"],[0,"focusin","onFocusIn"],[0,"focusout","onFocusOut"],[0,"calciteTreeItemSelect","onClick"],[0,"keydown","keyDownHandler"]]]);
|
|
25663
25663
|
const CalciteTreeItem = /*@__PURE__*/proxyCustomElement(TreeItem, [1,"calcite-tree-item",{"selected":[1540],"expanded":[1540],"parentExpanded":[4,"parent-expanded"],"depth":[1538],"hasChildren":[1540,"has-children"],"lines":[1540],"inputEnabled":[4,"input-enabled"],"scale":[1537],"indeterminate":[516],"selectionMode":[1025,"selection-mode"]},[[0,"click","onClick"],[0,"keydown","keyDownHandler"]]]);
|
|
25664
25664
|
const CalciteValueList = /*@__PURE__*/proxyCustomElement(ValueList, [1,"calcite-value-list",{"disabled":[516],"dragEnabled":[516,"drag-enabled"],"filterEnabled":[516,"filter-enabled"],"filterPlaceholder":[513,"filter-placeholder"],"group":[1],"loading":[516],"multiple":[516],"selectionFollowsFocus":[4,"selection-follows-focus"],"selectedValues":[32],"dataForFilter":[32]},[[0,"calciteListItemRemove","calciteListItemRemoveHandler"],[0,"calciteListItemChange","calciteListItemChangeHandler"],[0,"calciteListItemPropsChange","calciteListItemPropsChangeHandler"],[0,"calciteListItemValueChange","calciteListItemValueChangeHandler"]]]);
|
|
25665
25665
|
const CalciteValueListItem = /*@__PURE__*/proxyCustomElement(ValueListItem, [1,"calcite-value-list-item",{"description":[513],"disabled":[516],"disableDeselect":[4,"disable-deselect"],"nonInteractive":[516,"non-interactive"],"handleActivated":[1028,"handle-activated"],"icon":[513],"label":[513],"metadata":[16],"removable":[516],"selected":[1540],"value":[8]},[[0,"calciteListItemChange","calciteListItemChangeHandler"]]]);
|
|
@@ -157,6 +157,61 @@ let Tree = class {
|
|
|
157
157
|
selected: nodeListToArray(this.el.querySelectorAll("calcite-tree-item")).filter((i) => i.selected)
|
|
158
158
|
});
|
|
159
159
|
}
|
|
160
|
+
keyDownHandler(event) {
|
|
161
|
+
var _a;
|
|
162
|
+
const root = this.el.closest("calcite-tree:not([child])");
|
|
163
|
+
const target = event.target;
|
|
164
|
+
if (root === this.el && target.tagName === "CALCITE-TREE-ITEM" && this.el.contains(target)) {
|
|
165
|
+
switch (event.key) {
|
|
166
|
+
case "ArrowDown":
|
|
167
|
+
const next = target.nextElementSibling;
|
|
168
|
+
if (next && next.matches("calcite-tree-item")) {
|
|
169
|
+
next.focus();
|
|
170
|
+
event.preventDefault();
|
|
171
|
+
}
|
|
172
|
+
break;
|
|
173
|
+
case "ArrowLeft":
|
|
174
|
+
// When focus is on an open node, closes the node.
|
|
175
|
+
if (target.hasChildren && target.expanded) {
|
|
176
|
+
target.expanded = false;
|
|
177
|
+
event.preventDefault();
|
|
178
|
+
break;
|
|
179
|
+
}
|
|
180
|
+
// When focus is on a child node that is also either an end node or a closed node, moves focus to its parent node.
|
|
181
|
+
const parentItem = target.parentElement.closest("calcite-tree-item");
|
|
182
|
+
if (parentItem && (!target.hasChildren || target.expanded === false)) {
|
|
183
|
+
parentItem.focus();
|
|
184
|
+
event.preventDefault();
|
|
185
|
+
break;
|
|
186
|
+
}
|
|
187
|
+
// When focus is on a root node that is also either an end node or a closed node, does nothing.
|
|
188
|
+
break;
|
|
189
|
+
case "ArrowRight":
|
|
190
|
+
if (!target.hasChildren) {
|
|
191
|
+
break;
|
|
192
|
+
}
|
|
193
|
+
if (target.expanded && document.activeElement === target) {
|
|
194
|
+
// When focus is on an open node, moves focus to the first child node.
|
|
195
|
+
(_a = target.querySelector("calcite-tree-item")) === null || _a === void 0 ? void 0 : _a.focus();
|
|
196
|
+
event.preventDefault();
|
|
197
|
+
}
|
|
198
|
+
else {
|
|
199
|
+
// When focus is on a closed node, opens the node; focus does not move.
|
|
200
|
+
target.expanded = true;
|
|
201
|
+
event.preventDefault();
|
|
202
|
+
}
|
|
203
|
+
// When focus is on an end node, does nothing.
|
|
204
|
+
break;
|
|
205
|
+
case "ArrowUp":
|
|
206
|
+
const previous = target.previousElementSibling;
|
|
207
|
+
if (previous && previous.matches("calcite-tree-item")) {
|
|
208
|
+
previous.focus();
|
|
209
|
+
event.preventDefault();
|
|
210
|
+
}
|
|
211
|
+
break;
|
|
212
|
+
}
|
|
213
|
+
}
|
|
214
|
+
}
|
|
160
215
|
updateAncestorTree(e) {
|
|
161
216
|
const item = e.target;
|
|
162
217
|
const children = item.querySelectorAll("calcite-tree-item");
|
|
@@ -246,12 +301,6 @@ let TreeItem = class {
|
|
|
246
301
|
this.iconClickHandler = (event) => {
|
|
247
302
|
event.stopPropagation();
|
|
248
303
|
this.expanded = !this.expanded;
|
|
249
|
-
if (this.selectionMode !== TreeSelectionMode.Ancestors) {
|
|
250
|
-
this.calciteTreeItemSelect.emit({
|
|
251
|
-
modifyCurrentSelection: this.isSelectionMultiLike,
|
|
252
|
-
forceToggle: true
|
|
253
|
-
});
|
|
254
|
-
}
|
|
255
304
|
};
|
|
256
305
|
this.childrenClickHandler = (event) => event.stopPropagation();
|
|
257
306
|
//--------------------------------------------------------------------------
|
|
@@ -378,7 +427,6 @@ let TreeItem = class {
|
|
|
378
427
|
});
|
|
379
428
|
}
|
|
380
429
|
keyDownHandler(e) {
|
|
381
|
-
var _a;
|
|
382
430
|
let root;
|
|
383
431
|
switch (e.key) {
|
|
384
432
|
case " ":
|
|
@@ -387,7 +435,6 @@ let TreeItem = class {
|
|
|
387
435
|
forceToggle: false
|
|
388
436
|
});
|
|
389
437
|
e.preventDefault();
|
|
390
|
-
e.stopPropagation();
|
|
391
438
|
break;
|
|
392
439
|
case "Enter":
|
|
393
440
|
// activates a node, i.e., performs its default action. For parent nodes, one possible default action is to open or close the node. In single-select trees where selection does not follow focus (see note below), the default action is typically to select the focused node.
|
|
@@ -403,53 +450,6 @@ let TreeItem = class {
|
|
|
403
450
|
});
|
|
404
451
|
}
|
|
405
452
|
e.preventDefault();
|
|
406
|
-
e.stopPropagation();
|
|
407
|
-
break;
|
|
408
|
-
case "ArrowLeft":
|
|
409
|
-
// When focus is on an open node, closes the node.
|
|
410
|
-
if (this.hasChildren && this.expanded) {
|
|
411
|
-
this.expanded = false;
|
|
412
|
-
e.preventDefault();
|
|
413
|
-
e.stopPropagation();
|
|
414
|
-
break;
|
|
415
|
-
}
|
|
416
|
-
// When focus is on a child node that is also either an end node or a closed node, moves focus to its parent node.
|
|
417
|
-
const parentItem = this.parentTreeItem;
|
|
418
|
-
if (parentItem && (!this.hasChildren || this.expanded === false)) {
|
|
419
|
-
parentItem.focus();
|
|
420
|
-
e.preventDefault();
|
|
421
|
-
e.stopPropagation();
|
|
422
|
-
break;
|
|
423
|
-
}
|
|
424
|
-
// When focus is on a root node that is also either an end node or a closed node, does nothing.
|
|
425
|
-
break;
|
|
426
|
-
case "ArrowRight":
|
|
427
|
-
// When focus is on a closed node, opens the node; focus does not move.
|
|
428
|
-
if (this.hasChildren && this.expanded === false) {
|
|
429
|
-
this.expanded = true;
|
|
430
|
-
e.preventDefault();
|
|
431
|
-
e.stopPropagation();
|
|
432
|
-
break;
|
|
433
|
-
}
|
|
434
|
-
// When focus is on a open node, moves focus to the first child node.
|
|
435
|
-
if (this.hasChildren && this.expanded) {
|
|
436
|
-
(_a = this.el.querySelector("calcite-tree-item")) === null || _a === void 0 ? void 0 : _a.focus();
|
|
437
|
-
e.stopPropagation();
|
|
438
|
-
break;
|
|
439
|
-
}
|
|
440
|
-
// When focus is on an end node, does nothing.
|
|
441
|
-
break;
|
|
442
|
-
case "ArrowUp":
|
|
443
|
-
const previous = this.el.previousElementSibling;
|
|
444
|
-
if (previous && previous.matches("calcite-tree-item")) {
|
|
445
|
-
previous.focus();
|
|
446
|
-
}
|
|
447
|
-
break;
|
|
448
|
-
case "ArrowDown":
|
|
449
|
-
const next = this.el.nextElementSibling;
|
|
450
|
-
if (next && next.matches("calcite-tree-item")) {
|
|
451
|
-
next.focus();
|
|
452
|
-
}
|
|
453
453
|
break;
|
|
454
454
|
case "Home":
|
|
455
455
|
root = this.el.closest("calcite-tree:not([child])");
|