@fluentui/web-components 3.0.0-beta.91 → 3.0.0-beta.92
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/CHANGELOG.md +11 -2
- package/dist/dts/tree-item/tree-item.base.d.ts +0 -18
- package/dist/esm/tree/tree.base.js +5 -9
- package/dist/esm/tree/tree.base.js.map +1 -1
- package/dist/esm/tree/tree.template.js +1 -1
- package/dist/esm/tree/tree.template.js.map +1 -1
- package/dist/esm/tree-item/tree-item.base.js +2 -31
- package/dist/esm/tree-item/tree-item.base.js.map +1 -1
- package/dist/esm/tree-item/tree-item.template.js +1 -3
- package/dist/esm/tree-item/tree-item.template.js.map +1 -1
- package/dist/web-components.d.ts +0 -18
- package/dist/web-components.js +7 -41
- package/dist/web-components.min.js +38 -38
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,21 @@
|
|
|
1
1
|
# Change Log - @fluentui/web-components
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Thu, 17 Apr 2025 04:07:18 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [3.0.0-beta.92](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-beta.92)
|
|
8
|
+
|
|
9
|
+
Thu, 17 Apr 2025 04:07:18 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-beta.91..@fluentui/web-components_v3.0.0-beta.92)
|
|
11
|
+
|
|
12
|
+
### Changes
|
|
13
|
+
|
|
14
|
+
- tree item initial selection, tree item expands for sub selected item ([PR #34258](https://github.com/microsoft/fluentui/pull/34258) by jes@microsoft.com)
|
|
15
|
+
|
|
7
16
|
## [3.0.0-beta.91](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-beta.91)
|
|
8
17
|
|
|
9
|
-
Tue, 15 Apr 2025 04:06:
|
|
18
|
+
Tue, 15 Apr 2025 04:06:21 GMT
|
|
10
19
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-beta.90..@fluentui/web-components_v3.0.0-beta.91)
|
|
11
20
|
|
|
12
21
|
### Changes
|
|
@@ -67,30 +67,12 @@ export declare class BaseTreeItem extends FASTElement {
|
|
|
67
67
|
* Sets the indent for each item
|
|
68
68
|
*/
|
|
69
69
|
private setIndent;
|
|
70
|
-
/**
|
|
71
|
-
* Handle focus events
|
|
72
|
-
*
|
|
73
|
-
* @public
|
|
74
|
-
*/
|
|
75
|
-
focusHandler(e: FocusEvent): void;
|
|
76
|
-
/**
|
|
77
|
-
* Handle blur events
|
|
78
|
-
*
|
|
79
|
-
* @public
|
|
80
|
-
*/
|
|
81
|
-
blurHandler(e: FocusEvent): void;
|
|
82
70
|
/**
|
|
83
71
|
* Toggle the expansion state of the tree item
|
|
84
72
|
*
|
|
85
73
|
* @public
|
|
86
74
|
*/
|
|
87
75
|
toggleExpansion(): void;
|
|
88
|
-
/**
|
|
89
|
-
* Toggle the single selection state of the tree item
|
|
90
|
-
*
|
|
91
|
-
* @public
|
|
92
|
-
*/
|
|
93
|
-
toggleSelection(): void;
|
|
94
76
|
/**
|
|
95
77
|
* Whether the tree is nested
|
|
96
78
|
* @internal
|
|
@@ -34,7 +34,7 @@ export class BaseTree extends FASTElement {
|
|
|
34
34
|
updateCurrentSelected() {
|
|
35
35
|
// force single selection
|
|
36
36
|
// defaults to first one found
|
|
37
|
-
const selectedItem = this.querySelector(`[
|
|
37
|
+
const selectedItem = this.querySelector(`[selected]`);
|
|
38
38
|
this.currentSelected = selectedItem;
|
|
39
39
|
// invalidate the current focused item if it is no longer valid
|
|
40
40
|
if (this.currentFocused === null || !this.contains(this.currentFocused)) {
|
|
@@ -103,7 +103,7 @@ export class BaseTree extends FASTElement {
|
|
|
103
103
|
return;
|
|
104
104
|
}
|
|
105
105
|
case keySpace: {
|
|
106
|
-
item.
|
|
106
|
+
item.selected = true;
|
|
107
107
|
return;
|
|
108
108
|
}
|
|
109
109
|
}
|
|
@@ -121,12 +121,8 @@ export class BaseTree extends FASTElement {
|
|
|
121
121
|
return;
|
|
122
122
|
}
|
|
123
123
|
if (e.target === this) {
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
}
|
|
127
|
-
if (this.currentFocused !== null) {
|
|
128
|
-
this.currentFocused.focus();
|
|
129
|
-
}
|
|
124
|
+
this.currentFocused = this.getValidFocusableItem();
|
|
125
|
+
this.currentFocused?.focus();
|
|
130
126
|
return;
|
|
131
127
|
}
|
|
132
128
|
if (this.contains(e.target)) {
|
|
@@ -161,7 +157,7 @@ export class BaseTree extends FASTElement {
|
|
|
161
157
|
}
|
|
162
158
|
const item = e.target;
|
|
163
159
|
item.toggleExpansion();
|
|
164
|
-
item.
|
|
160
|
+
item.selected = true;
|
|
165
161
|
}
|
|
166
162
|
/**
|
|
167
163
|
* Handles the selected-changed events bubbling up
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tree.base.js","sourceRoot":"","sources":["../../../src/tree/tree.base.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAClE,OAAO,EACL,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,aAAa,EACb,UAAU,EACV,MAAM,EACN,QAAQ,EACR,OAAO,EACP,QAAQ,GACT,MAAM,+BAA+B,CAAC;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AAG5D,MAAM,OAAO,QAAS,SAAQ,WAAW;IAsBvC;QACE,KAAK,EAAE,CAAC;QAtBV;;;WAGG;QAEI,oBAAe,GAAuB,IAAI,CAAC;QAElD;;;;WAIG;QACK,mBAAc,GAAuB,IAAI,CAAC;QAElD;;;;WAIG;QACI,qBAAgB,GAAqB,IAAI,CAAC,eAAe,EAAE,CAAC;QAQnE,mBAAc,GAAmB,EAAE,CAAC;QAJlC,IAAI,CAAC,gBAAgB,CAAC,IAAI,GAAG,MAAM,CAAC;IACtC,CAAC;IAIM,qBAAqB;QAC1B,IAAI,CAAC,qBAAqB,EAAE,CAAC;IAC/B,CAAC;IAED;;OAEG;IACK,qBAAqB;QAC3B,yBAAyB;QACzB,8BAA8B;QAC9B,MAAM,YAAY,GAAG,IAAI,CAAC,aAAa,CAAc,
|
|
1
|
+
{"version":3,"file":"tree.base.js","sourceRoot":"","sources":["../../../src/tree/tree.base.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAClE,OAAO,EACL,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,aAAa,EACb,UAAU,EACV,MAAM,EACN,QAAQ,EACR,OAAO,EACP,QAAQ,GACT,MAAM,+BAA+B,CAAC;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AAG5D,MAAM,OAAO,QAAS,SAAQ,WAAW;IAsBvC;QACE,KAAK,EAAE,CAAC;QAtBV;;;WAGG;QAEI,oBAAe,GAAuB,IAAI,CAAC;QAElD;;;;WAIG;QACK,mBAAc,GAAuB,IAAI,CAAC;QAElD;;;;WAIG;QACI,qBAAgB,GAAqB,IAAI,CAAC,eAAe,EAAE,CAAC;QAQnE,mBAAc,GAAmB,EAAE,CAAC;QAJlC,IAAI,CAAC,gBAAgB,CAAC,IAAI,GAAG,MAAM,CAAC;IACtC,CAAC;IAIM,qBAAqB;QAC1B,IAAI,CAAC,qBAAqB,EAAE,CAAC;IAC/B,CAAC;IAED;;OAEG;IACK,qBAAqB;QAC3B,yBAAyB;QACzB,8BAA8B;QAC9B,MAAM,YAAY,GAAG,IAAI,CAAC,aAAa,CAAc,YAAY,CAAC,CAAC;QACnE,IAAI,CAAC,eAAe,GAAG,YAAY,CAAC;QAEpC,+DAA+D;QAC/D,IAAI,IAAI,CAAC,cAAc,KAAK,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,cAAc,CAAC,EAAE,CAAC;YACxE,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAC;QACrD,CAAC;IACH,CAAC;IAED;;;;OAIG;IACI,cAAc,CAAC,CAAgB;QACpC,IAAI,CAAC,CAAC,gBAAgB,EAAE,CAAC;YACvB,OAAO;QACT,CAAC;QAED,MAAM,IAAI,GAAG,CAAC,CAAC,MAAqB,CAAC;QACrC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,cAAc,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YACxD,OAAO,IAAI,CAAC;QACd,CAAC;QAED,MAAM,QAAQ,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;QAExC,QAAQ,CAAC,CAAC,GAAG,EAAE,CAAC;YACd,KAAK,OAAO,CAAC,CAAC,CAAC;gBACb,IAAI,QAAQ,CAAC,MAAM,EAAE,CAAC;oBACpB,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;gBACtB,CAAC;gBACD,OAAO;YACT,CAAC;YACD,KAAK,MAAM,CAAC,CAAC,CAAC;gBACZ,IAAI,QAAQ,CAAC,MAAM,EAAE,CAAC;oBACpB,QAAQ,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;gBACxC,CAAC;gBACD,OAAO;YACT,CAAC;YACD,KAAK,YAAY,CAAC,CAAC,CAAC;gBAClB,IAAI,IAAI,EAAE,cAAc,EAAE,MAAM,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;oBAClD,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;gBACxB,CAAC;qBAAM,IAAI,UAAU,CAAC,IAAI,CAAC,aAAa,CAAC,EAAE,CAAC;oBAC1C,IAAI,CAAC,aAAa,CAAC,KAAK,EAAE,CAAC;gBAC7B,CAAC;gBACD,OAAO;YACT,CAAC;YACD,KAAK,aAAa,CAAC,CAAC,CAAC;gBACnB,IAAI,IAAI,EAAE,cAAc,EAAE,MAAM,EAAE,CAAC;oBACjC,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;wBACnB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;oBACvB,CAAC;yBAAM,CAAC;wBACN,IAAI,CAAC,aAAa,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC;oBAC9B,CAAC;gBACH,CAAC;gBACD,OAAO;YACT,CAAC;YACD,KAAK,YAAY,CAAC,CAAC,CAAC;gBAClB,IAAI,CAAC,aAAa,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC;gBAC5B,OAAO;YACT,CAAC;YACD,KAAK,UAAU,CAAC,CAAC,CAAC;gBAChB,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC;gBAC7B,OAAO;YACT,CAAC;YACD,KAAK,QAAQ,CAAC,CAAC,CAAC;gBACd,iFAAiF;gBACjF,8DAA8D;gBAC9D,IAAI,CAAC,YAAY,CAAC,CAAU,CAAC,CAAC;gBAC9B,OAAO;YACT,CAAC;YACD,KAAK,QAAQ,CAAC,CAAC,CAAC;gBACd,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;gBACrB,OAAO;YACT,CAAC;QACH,CAAC;QAED,6CAA6C;QAC7C,OAAO,IAAI,CAAC;IACd,CAAC;IAED;;;;OAIG;IACI,YAAY,CAAC,CAAa;QAC/B,IAAI,IAAI,CAAC,cAAc,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YACnC,gCAAgC;YAChC,OAAO;QACT,CAAC;QAED,IAAI,CAAC,CAAC,MAAM,KAAK,IAAI,EAAE,CAAC;YACtB,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAC;YACnD,IAAI,CAAC,cAAc,EAAE,KAAK,EAAE,CAAC;YAE7B,OAAO;QACT,CAAC;QAED,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAc,CAAC,EAAE,CAAC;YACpC,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;YACpC,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC,MAAqB,CAAC;QAChD,CAAC;IACH,CAAC;IAED;;;;OAIG;IACI,WAAW,CAAC,CAAa;QAC9B,IAAI,CAAC,CAAC,MAAM,YAAY,WAAW,IAAI,CAAC,CAAC,CAAC,aAAa,KAAK,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,aAAqB,CAAC,CAAC,EAAE,CAAC;YAC7G,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;QACrC,CAAC;IACH,CAAC;IAED;;;;OAIG;IAEI,YAAY,CAAC,CAAQ;QAC1B,IAAI,CAAC,CAAC,gBAAgB,EAAE,CAAC;YACvB,sBAAsB;YACtB,OAAO;QACT,CAAC;QAED,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,MAAqB,CAAC,EAAE,CAAC;YACzC,0BAA0B;YAC1B,sCAAsC;YACtC,OAAO,IAAI,CAAC;QACd,CAAC;QAED,MAAM,IAAI,GAAG,CAAC,CAAC,MAAsB,CAAC;QACtC,IAAI,CAAC,eAAe,EAAE,CAAC;QACvB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;IACvB,CAAC;IAED;;;;;OAKG;IACI,aAAa,CAAC,CAAQ;QAC3B,IAAI,CAAC,CAAC,gBAAgB,EAAE,CAAC;YACvB,OAAO;QACT,CAAC;QAED,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,MAAqB,CAAC,EAAE,CAAC;YACzC,OAAO,IAAI,CAAC;QACd,CAAC;QAED,MAAM,IAAI,GAAG,CAAC,CAAC,MAAsB,CAAC;QAEtC,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,uCAAuC;YACvC,IAAI,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,eAAe,KAAK,IAAI,IAAI,UAAU,CAAC,IAAI,CAAC,eAAe,CAAC,EAAE,CAAC;gBAC9F,IAAI,CAAC,eAAe,CAAC,QAAQ,GAAG,KAAK,CAAC;YACxC,CAAC;YACD,oBAAoB;YACpB,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;QAC9B,CAAC;aAAM,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,eAAe,KAAK,IAAI,EAAE,CAAC;YAC3D,2BAA2B;YAC3B,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;QAC9B,CAAC;IACH,CAAC;IAED;;OAEG;IACK,qBAAqB;QAC3B,MAAM,QAAQ,GAAyB,IAAI,CAAC,eAAe,EAAE,CAAC;QAC9D,8CAA8C;QAC9C,IAAI,UAAU,GAAG,QAAQ,CAAC,SAAS,CAAC,EAAE,CAAC,EAAE,CAAE,EAAU,CAAC,QAAQ,CAAC,CAAC;QAChE,IAAI,UAAU,KAAK,CAAC,CAAC,EAAE,CAAC;YACtB,sCAAsC;YACtC,UAAU,GAAG,QAAQ,CAAC,SAAS,CAAC,EAAE,CAAC,EAAE,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC,CAAC;QACxD,CAAC;QACD,IAAI,UAAU,KAAK,CAAC,CAAC,EAAE,CAAC;YACtB,OAAO,QAAQ,CAAC,UAAU,CAAC,CAAC;QAC9B,CAAC;QACD,OAAO,IAAI,CAAC;IACd,CAAC;IAEO,eAAe;QACrB,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM,CAClD,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,YAAY,KAAK,IAAI,CACtC,CAAC;IACrB,CAAC;IAED;;OAEG;IACK,aAAa,CAAC,KAAa,EAAE,IAAkB;QACrD,MAAM,YAAY,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;QAC5C,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,CAAC;YACzB,OAAO;QACT,CAAC;QAED,MAAM,SAAS,GAAG,YAAY,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,KAAK,CAAC,CAAC;QACnE,IAAI,aAAa,CAAC,SAAS,CAAC,EAAE,CAAC;YAC7B,SAAS,CAAC,KAAK,EAAE,CAAC;QACpB,CAAC;IACH,CAAC;CACF;AA/OQ;IADN,UAAU;iDACuC;AAsBlD;IADC,UAAU;gDACyB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tree.template.js","sourceRoot":"","sources":["../../../src/tree/tree.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAY,IAAI,EAAE,MAAM,yBAAyB,CAAC;AACnE,OAAO,EAAE,UAAU,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"tree.template.js","sourceRoot":"","sources":["../../../src/tree/tree.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAY,IAAI,EAAE,MAAM,yBAAyB,CAAC;AACnE,OAAO,EAAE,UAAU,EAAE,MAAM,mCAAmC,CAAC;AAG/D,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAM;;;cAGpB,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAK,CAAC;gBAC/B,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAmB,CAAC;iBAC9C,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,KAAmB,CAAC;gBAC/C,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,KAAsB,CAAC;eACrD,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC;MAC3C,QAAQ,CAAC;IACT,QAAQ,EAAE,gBAAgB;IAC1B,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,IAAI,CAAC;CACjC,CAAC;;;;CAIL,CAAC"}
|
|
@@ -87,6 +87,8 @@ export class BaseTreeItem extends FASTElement {
|
|
|
87
87
|
if (!this.childTreeItems?.length) {
|
|
88
88
|
return;
|
|
89
89
|
}
|
|
90
|
+
//If a tree item is nested and initially set to selected expand the tree items so the selected item is visible
|
|
91
|
+
this.expanded = Array.from(this.querySelectorAll('*')).some(el => isTreeItem(el) && el.selected);
|
|
90
92
|
this.childTreeItems.forEach(item => {
|
|
91
93
|
this.setIndent(item);
|
|
92
94
|
});
|
|
@@ -98,29 +100,6 @@ export class BaseTreeItem extends FASTElement {
|
|
|
98
100
|
const indent = this.dataIndent ?? 0;
|
|
99
101
|
item.dataIndent = indent + 1;
|
|
100
102
|
}
|
|
101
|
-
/**
|
|
102
|
-
* Handle focus events
|
|
103
|
-
*
|
|
104
|
-
* @public
|
|
105
|
-
*/
|
|
106
|
-
focusHandler(e) {
|
|
107
|
-
if (e.target === this ||
|
|
108
|
-
// In case where the tree-item contains a focusable element, we should not set the tabindex to 0 when the focus is on its child focusable element,
|
|
109
|
-
// so users can shift+tab to navigate to the tree-item from its child focusable element.
|
|
110
|
-
this.contains(e.target)) {
|
|
111
|
-
this.setAttribute('tabindex', '0');
|
|
112
|
-
}
|
|
113
|
-
}
|
|
114
|
-
/**
|
|
115
|
-
* Handle blur events
|
|
116
|
-
*
|
|
117
|
-
* @public
|
|
118
|
-
*/
|
|
119
|
-
blurHandler(e) {
|
|
120
|
-
if (e.target === this) {
|
|
121
|
-
this.setAttribute('tabindex', '-1');
|
|
122
|
-
}
|
|
123
|
-
}
|
|
124
103
|
/**
|
|
125
104
|
* Toggle the expansion state of the tree item
|
|
126
105
|
*
|
|
@@ -131,14 +110,6 @@ export class BaseTreeItem extends FASTElement {
|
|
|
131
110
|
this.expanded = !this.expanded;
|
|
132
111
|
}
|
|
133
112
|
}
|
|
134
|
-
/**
|
|
135
|
-
* Toggle the single selection state of the tree item
|
|
136
|
-
*
|
|
137
|
-
* @public
|
|
138
|
-
*/
|
|
139
|
-
toggleSelection() {
|
|
140
|
-
this.selected = !this.selected;
|
|
141
|
-
}
|
|
142
113
|
/**
|
|
143
114
|
* Whether the tree is nested
|
|
144
115
|
* @internal
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tree-item.base.js","sourceRoot":"","sources":["../../../src/tree-item/tree-item.base.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAiB,WAAW,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAC5F,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAEpD,MAAM,OAAO,YAAa,SAAQ,WAAW;IAQ3C;QACE,KAAK,EAAE,CAAC;QARV;;;;WAIG;QACI,qBAAgB,GAAqB,IAAI,CAAC,eAAe,EAAE,CAAC;QAOnE;;;;WAIG;QAEH,aAAQ,GAAY,KAAK,CAAC;QAgB1B;;;;;WAKG;QAEH,aAAQ,GAAY,KAAK,CAAC;QAe1B;;;;WAIG;QAEI,UAAK,GAAY,KAAK,CAAC;QA2BvB,mBAAc,GAA+B,EAAE,CAAC;QAhFrD,IAAI,CAAC,gBAAgB,CAAC,IAAI,GAAG,UAAU,CAAC;IAC1C,CAAC;IAUD;;;;;;OAMG;IACI,eAAe,CAAC,IAAa,EAAE,IAAa;QACjD,WAAW,CAAC,IAAI,CAAC,gBAAgB,EAAE,UAAU,EAAE,IAAI,CAAC,CAAC;QACrD,IAAI,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,cAAc,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YAC1D,IAAI,CAAC,gBAAgB,CAAC,YAAY,GAAG,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;QAC/D,CAAC;IACH,CAAC;IAWD;;;;;;OAMG;IACO,eAAe,CAAC,IAAa,EAAE,IAAa;QACpD,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;QACrB,WAAW,CAAC,IAAI,CAAC,gBAAgB,EAAE,UAAU,EAAE,IAAI,CAAC,CAAC;QACrD,IAAI,CAAC,gBAAgB,CAAC,YAAY,GAAG,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;IAC/D,CAAC;IAoBO,iBAAiB,CAAC,IAAY,EAAE,IAAY;QAClD,IAAI,IAAI,CAAC,MAAM,KAAK,SAAS,EAAE,CAAC;YAC9B,IAAI,CAAC,eAAe,CAAC,YAAY,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QACjD,CAAC;QAED,IAAI,CAAC,MAAM,GAAG,GAAG,CAAA;;oBAED,IAAW;;KAE1B,CAAC;QAEF,IAAI,CAAC,eAAe,CAAC,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAC9C,CAAC;IAKD;;;;OAIG;IACI,qBAAqB;QAC1B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,cAAc,EAAE,MAAM,KAAK,CAAC,CAAC;QAC/C,IAAI,CAAC,oBAAoB,EAAE,CAAC;IAC9B,CAAC;IAED;;;;OAIG;IACI,oBAAoB;QACzB,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE,MAAM,EAAE,CAAC;YACjC,OAAO;QACT,CAAC;QAED,IAAI,CAAC,
|
|
1
|
+
{"version":3,"file":"tree-item.base.js","sourceRoot":"","sources":["../../../src/tree-item/tree-item.base.ts"],"names":[],"mappings":"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"}
|
|
@@ -9,10 +9,8 @@ const chevronIcon = html `
|
|
|
9
9
|
`;
|
|
10
10
|
export const template = html `
|
|
11
11
|
<template
|
|
12
|
-
tabindex="-1"
|
|
12
|
+
tabindex="${x => (x.selected ? 0 : -1)}"
|
|
13
13
|
slot="${x => (x.isNestedItem ? 'item' : void 0)}"
|
|
14
|
-
@focusin="${(x, c) => x.focusHandler(c.event)}"
|
|
15
|
-
@focusout="${(x, c) => x.blurHandler(c.event)}"
|
|
16
14
|
${children({
|
|
17
15
|
property: 'childTreeItems',
|
|
18
16
|
filter: node => isTreeItem(node),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tree-item.template.js","sourceRoot":"","sources":["../../../src/tree-item/tree-item.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAEzD,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAEpD,MAAM,WAAW,GAAG,IAAI,CAAA;;;;;;CAMvB,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAU
|
|
1
|
+
{"version":3,"file":"tree-item.template.js","sourceRoot":"","sources":["../../../src/tree-item/tree-item.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAEzD,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAEpD,MAAM,WAAW,GAAG,IAAI,CAAA;;;;;;CAMvB,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAU;;gBAEtB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YAC9B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;MAC7C,QAAQ,CAAC;IACT,QAAQ,EAAE,gBAAgB;IAC1B,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,IAAI,CAAC;CACjC,CAAC;;;;;iCAK2B,WAAW;;;;;;;;;;;;;;CAc3C,CAAC"}
|
package/dist/web-components.d.ts
CHANGED
|
@@ -3330,30 +3330,12 @@ declare class BaseTreeItem extends FASTElement {
|
|
|
3330
3330
|
* Sets the indent for each item
|
|
3331
3331
|
*/
|
|
3332
3332
|
private setIndent;
|
|
3333
|
-
/**
|
|
3334
|
-
* Handle focus events
|
|
3335
|
-
*
|
|
3336
|
-
* @public
|
|
3337
|
-
*/
|
|
3338
|
-
focusHandler(e: FocusEvent): void;
|
|
3339
|
-
/**
|
|
3340
|
-
* Handle blur events
|
|
3341
|
-
*
|
|
3342
|
-
* @public
|
|
3343
|
-
*/
|
|
3344
|
-
blurHandler(e: FocusEvent): void;
|
|
3345
3333
|
/**
|
|
3346
3334
|
* Toggle the expansion state of the tree item
|
|
3347
3335
|
*
|
|
3348
3336
|
* @public
|
|
3349
3337
|
*/
|
|
3350
3338
|
toggleExpansion(): void;
|
|
3351
|
-
/**
|
|
3352
|
-
* Toggle the single selection state of the tree item
|
|
3353
|
-
*
|
|
3354
|
-
* @public
|
|
3355
|
-
*/
|
|
3356
|
-
toggleSelection(): void;
|
|
3357
3339
|
/**
|
|
3358
3340
|
* Whether the tree is nested
|
|
3359
3341
|
* @internal
|
package/dist/web-components.js
CHANGED
|
@@ -13273,7 +13273,7 @@ class BaseTree extends FASTElement {
|
|
|
13273
13273
|
* Updates current selected when slottedTreeItems changes
|
|
13274
13274
|
*/
|
|
13275
13275
|
updateCurrentSelected() {
|
|
13276
|
-
const selectedItem = this.querySelector(`[
|
|
13276
|
+
const selectedItem = this.querySelector(`[selected]`);
|
|
13277
13277
|
this.currentSelected = selectedItem;
|
|
13278
13278
|
if (this.currentFocused === null || !this.contains(this.currentFocused)) {
|
|
13279
13279
|
this.currentFocused = this.getValidFocusableItem();
|
|
@@ -13345,7 +13345,7 @@ class BaseTree extends FASTElement {
|
|
|
13345
13345
|
}
|
|
13346
13346
|
case keySpace:
|
|
13347
13347
|
{
|
|
13348
|
-
item.
|
|
13348
|
+
item.selected = true;
|
|
13349
13349
|
return;
|
|
13350
13350
|
}
|
|
13351
13351
|
}
|
|
@@ -13361,12 +13361,8 @@ class BaseTree extends FASTElement {
|
|
|
13361
13361
|
return;
|
|
13362
13362
|
}
|
|
13363
13363
|
if (e.target === this) {
|
|
13364
|
-
|
|
13365
|
-
|
|
13366
|
-
}
|
|
13367
|
-
if (this.currentFocused !== null) {
|
|
13368
|
-
this.currentFocused.focus();
|
|
13369
|
-
}
|
|
13364
|
+
this.currentFocused = this.getValidFocusableItem();
|
|
13365
|
+
this.currentFocused?.focus();
|
|
13370
13366
|
return;
|
|
13371
13367
|
}
|
|
13372
13368
|
if (this.contains(e.target)) {
|
|
@@ -13398,7 +13394,7 @@ class BaseTree extends FASTElement {
|
|
|
13398
13394
|
}
|
|
13399
13395
|
const item = e.target;
|
|
13400
13396
|
item.toggleExpansion();
|
|
13401
|
-
item.
|
|
13397
|
+
item.selected = true;
|
|
13402
13398
|
}
|
|
13403
13399
|
/**
|
|
13404
13400
|
* Handles the selected-changed events bubbling up
|
|
@@ -13593,6 +13589,7 @@ class BaseTreeItem extends FASTElement {
|
|
|
13593
13589
|
if (!this.childTreeItems?.length) {
|
|
13594
13590
|
return;
|
|
13595
13591
|
}
|
|
13592
|
+
this.expanded = Array.from(this.querySelectorAll("*")).some(el => isTreeItem(el) && el.selected);
|
|
13596
13593
|
this.childTreeItems.forEach(item => {
|
|
13597
13594
|
this.setIndent(item);
|
|
13598
13595
|
});
|
|
@@ -13604,29 +13601,6 @@ class BaseTreeItem extends FASTElement {
|
|
|
13604
13601
|
const indent = this.dataIndent ?? 0;
|
|
13605
13602
|
item.dataIndent = indent + 1;
|
|
13606
13603
|
}
|
|
13607
|
-
/**
|
|
13608
|
-
* Handle focus events
|
|
13609
|
-
*
|
|
13610
|
-
* @public
|
|
13611
|
-
*/
|
|
13612
|
-
focusHandler(e) {
|
|
13613
|
-
if (e.target === this ||
|
|
13614
|
-
// In case where the tree-item contains a focusable element, we should not set the tabindex to 0 when the focus is on its child focusable element,
|
|
13615
|
-
// so users can shift+tab to navigate to the tree-item from its child focusable element.
|
|
13616
|
-
this.contains(e.target)) {
|
|
13617
|
-
this.setAttribute("tabindex", "0");
|
|
13618
|
-
}
|
|
13619
|
-
}
|
|
13620
|
-
/**
|
|
13621
|
-
* Handle blur events
|
|
13622
|
-
*
|
|
13623
|
-
* @public
|
|
13624
|
-
*/
|
|
13625
|
-
blurHandler(e) {
|
|
13626
|
-
if (e.target === this) {
|
|
13627
|
-
this.setAttribute("tabindex", "-1");
|
|
13628
|
-
}
|
|
13629
|
-
}
|
|
13630
13604
|
/**
|
|
13631
13605
|
* Toggle the expansion state of the tree item
|
|
13632
13606
|
*
|
|
@@ -13637,14 +13611,6 @@ class BaseTreeItem extends FASTElement {
|
|
|
13637
13611
|
this.expanded = !this.expanded;
|
|
13638
13612
|
}
|
|
13639
13613
|
}
|
|
13640
|
-
/**
|
|
13641
|
-
* Toggle the single selection state of the tree item
|
|
13642
|
-
*
|
|
13643
|
-
* @public
|
|
13644
|
-
*/
|
|
13645
|
-
toggleSelection() {
|
|
13646
|
-
this.selected = !this.selected;
|
|
13647
|
-
}
|
|
13648
13614
|
/**
|
|
13649
13615
|
* Whether the tree is nested
|
|
13650
13616
|
* @internal
|
|
@@ -13731,7 +13697,7 @@ const styles = css`
|
|
|
13731
13697
|
${colorStrokeFocus2} inset}.positioning-region{display:flex;align-items:center;justify-content:space-between;cursor:pointer;height:${spacingVerticalXXXL};padding-inline-start:calc(var(--indent) * ${spacingHorizontalXXL});padding-inline-end:${spacingVerticalS};border-radius:${borderRadiusMedium};background-color:${colorSubtleBackground};color:${colorNeutralForeground2};gap:${spacingHorizontalXS}}@media (prefers-contrast:more){:host(:focus-visible) .positioning-region{outline:1px solid ${colorStrokeFocus2}}}.content{display:flex;align-items:center;gap:${spacingHorizontalXS}}.chevron{display:flex;align-items:center;flex-shrink:0;justify-content:center;width:${spacingHorizontalXXL};height:${spacingVerticalXXL};transition:transform ${durationFaster} ${curveEasyEaseMax};transform:rotate(0deg)}.chevron:dir(rtl){transform:rotate(180deg)}.aside{display:flex;align-items:center}.positioning-region:hover{background-color:${colorSubtleBackgroundHover};color:${colorNeutralForeground2Hover}}.positioning-region:active{background-color:${colorSubtleBackgroundPressed};color:${colorNeutralForeground2Pressed}}::slotted([slot='start']),::slotted([slot='end']),::slotted(:not([slot])){display:flex;align-items:center;min-width:0}::slotted([slot='start']){flex-shrink:0}::slotted(:not([slot])){padding-inline:${spacingHorizontalXXS}}.items{display:none}:host([expanded]) .items{display:block}:host([empty]) .chevron,:host([empty]) .items{visibility:hidden}:host([selected]) .positioning-region{background-color:${colorSubtleBackgroundSelected};color:${colorNeutralForeground2Selected}}:host([selected]) .content,:host([selected]) .chevron{color:${colorNeutralForeground3Selected}}:host([size='small']) .positioning-region{height:${spacingVerticalXXL};padding-inline-start:calc(var(--indent) * ${spacingHorizontalM})}:host([appearance='subtle-alpha']) .positioning-region:hover{background-color:${colorSubtleBackgroundLightAlphaHover}}:host([appearance='subtle-alpha']) .positioning-region:active{background-color:${colorSubtleBackgroundLightAlphaPressed}}:host([appearance='subtle-alpha'][selected]) .positioning-region{background-color:${colorSubtleBackgroundLightAlphaSelected};color:${colorNeutralForeground2Selected}}:host([appearance='transparent']) .positioning-region{background-color:${colorTransparentBackground}}:host([appearance='transparent']) .positioning-region:hover{background-color:${colorTransparentBackgroundHover}}:host([appearance='transparent']) .positioning-region:active{background-color:${colorTransparentBackgroundPressed}}:host([appearance='transparent'][selected]) .positioning-region{background-color:${colorTransparentBackgroundSelected};color:${colorNeutralForeground2Selected}}:host([expanded]) .chevron{transform:rotate(90deg)}`;
|
|
13732
13698
|
|
|
13733
13699
|
const chevronIcon = html`<svg width="12" height="12" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path d="M4.65 2.15a.5.5 0 000 .7L7.79 6 4.65 9.15a.5.5 0 10.7.7l3.5-3.5a.5.5 0 000-.7l-3.5-3.5a.5.5 0 00-.7 0z"></path></svg>`;
|
|
13734
|
-
const template = html`<template tabindex="
|
|
13700
|
+
const template = html`<template tabindex="${x => x.selected ? 0 : -1}" slot="${x => x.isNestedItem ? "item" : void 0}" ${children({
|
|
13735
13701
|
property: "childTreeItems",
|
|
13736
13702
|
filter: node => isTreeItem(node)
|
|
13737
13703
|
})}><div class="positioning-region" part="positioning-region"><div class="content" part="content"><span class="chevron" part="chevron"><slot name="chevron">${chevronIcon}</slot></span><slot name="start"></slot><slot></slot><slot name="end"></slot></div><div class="aside" part="aside"><slot name="aside"></slot></div></div><div role="group" class="items" part="items"><slot name="item"></slot></div></template>`;
|