@fluentui/web-components 3.0.0-beta.91 → 3.0.0-beta.93
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 +21 -2
- package/dist/dts/tabs/tabs.d.ts +6 -0
- package/dist/dts/tree-item/tree-item.base.d.ts +0 -18
- package/dist/esm/tabs/tabs.js +25 -8
- package/dist/esm/tabs/tabs.js.map +1 -1
- 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 +4 -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 +6 -18
- package/dist/web-components.js +34 -49
- package/dist/web-components.min.js +39 -39
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,31 @@
|
|
|
1
1
|
# Change Log - @fluentui/web-components
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Fri, 18 Apr 2025 04:06:27 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [3.0.0-beta.93](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-beta.93)
|
|
8
|
+
|
|
9
|
+
Fri, 18 Apr 2025 04:06:27 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-beta.92..@fluentui/web-components_v3.0.0-beta.93)
|
|
11
|
+
|
|
12
|
+
### Changes
|
|
13
|
+
|
|
14
|
+
- fix tabs animation starting position ([PR #34185](https://github.com/microsoft/fluentui/pull/34185) by 1981616118@qq.com)
|
|
15
|
+
- [fix] only set expanded is expanded is not set ([PR #34282](https://github.com/microsoft/fluentui/pull/34282) by jes@microsoft.com)
|
|
16
|
+
|
|
17
|
+
## [3.0.0-beta.92](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-beta.92)
|
|
18
|
+
|
|
19
|
+
Thu, 17 Apr 2025 04:07:28 GMT
|
|
20
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-beta.91..@fluentui/web-components_v3.0.0-beta.92)
|
|
21
|
+
|
|
22
|
+
### Changes
|
|
23
|
+
|
|
24
|
+
- tree item initial selection, tree item expands for sub selected item ([PR #34258](https://github.com/microsoft/fluentui/pull/34258) by jes@microsoft.com)
|
|
25
|
+
|
|
7
26
|
## [3.0.0-beta.91](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-beta.91)
|
|
8
27
|
|
|
9
|
-
Tue, 15 Apr 2025 04:06:
|
|
28
|
+
Tue, 15 Apr 2025 04:06:21 GMT
|
|
10
29
|
[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
30
|
|
|
12
31
|
### Changes
|
package/dist/dts/tabs/tabs.d.ts
CHANGED
|
@@ -76,6 +76,12 @@ export declare class Tabs extends BaseTabs {
|
|
|
76
76
|
* @internal
|
|
77
77
|
*/
|
|
78
78
|
private animationLoop;
|
|
79
|
+
/**
|
|
80
|
+
* Gets the position data for a tab element relative to its parent
|
|
81
|
+
* @param tab - The tab element to get position data for
|
|
82
|
+
* @returns The position data for the tab
|
|
83
|
+
*/
|
|
84
|
+
private getTabPositionData;
|
|
79
85
|
/**
|
|
80
86
|
* Sets the data from the active tab onto the class. used for making all the animation calculations for the active
|
|
81
87
|
* tab indicator.
|
|
@@ -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
|
package/dist/esm/tabs/tabs.js
CHANGED
|
@@ -96,6 +96,21 @@ export class Tabs extends BaseTabs {
|
|
|
96
96
|
// add the css class and active indicator will animate from the previous tab location to its tab location
|
|
97
97
|
tab.setAttribute('data-animate', 'true');
|
|
98
98
|
}
|
|
99
|
+
/**
|
|
100
|
+
* Gets the position data for a tab element relative to its parent
|
|
101
|
+
* @param tab - The tab element to get position data for
|
|
102
|
+
* @returns The position data for the tab
|
|
103
|
+
*/
|
|
104
|
+
getTabPositionData(tab) {
|
|
105
|
+
const rect = tab.getBoundingClientRect();
|
|
106
|
+
const parentRect = this.getBoundingClientRect();
|
|
107
|
+
return {
|
|
108
|
+
x: rect.x - parentRect.x,
|
|
109
|
+
y: rect.y - parentRect.y,
|
|
110
|
+
height: rect.height,
|
|
111
|
+
width: rect.width,
|
|
112
|
+
};
|
|
113
|
+
}
|
|
99
114
|
/**
|
|
100
115
|
* Sets the data from the active tab onto the class. used for making all the animation calculations for the active
|
|
101
116
|
* tab indicator.
|
|
@@ -106,14 +121,7 @@ export class Tabs extends BaseTabs {
|
|
|
106
121
|
if (this.tabs && this.tabs.length > 0) {
|
|
107
122
|
const tabs = this.tabs;
|
|
108
123
|
const activeTab = this.activetab || tabs[0];
|
|
109
|
-
|
|
110
|
-
const parentRect = this.getBoundingClientRect();
|
|
111
|
-
this.activeTabData = {
|
|
112
|
-
x: activeRect.x - parentRect.x,
|
|
113
|
-
y: activeRect.y - parentRect.y,
|
|
114
|
-
height: activeRect.height,
|
|
115
|
-
width: activeRect.width,
|
|
116
|
-
};
|
|
124
|
+
this.activeTabData = this.getTabPositionData(activeTab);
|
|
117
125
|
if (this.previousActiveTabData?.x !== this.activeTabData?.x &&
|
|
118
126
|
this.previousActiveTabData?.y !== this.activeTabData?.y) {
|
|
119
127
|
this.previousActiveTabData = this.activeTabData;
|
|
@@ -137,6 +145,12 @@ export class Tabs extends BaseTabs {
|
|
|
137
145
|
this.$fastController.addStyles(this.styles);
|
|
138
146
|
}
|
|
139
147
|
activeidChanged(oldValue, newValue) {
|
|
148
|
+
if (oldValue && this.tabs) {
|
|
149
|
+
const oldTab = this.tabs.find(tab => tab.id === oldValue);
|
|
150
|
+
if (oldTab) {
|
|
151
|
+
this.previousActiveTabData = this.getTabPositionData(oldTab);
|
|
152
|
+
}
|
|
153
|
+
}
|
|
140
154
|
super.activeidChanged(oldValue, newValue);
|
|
141
155
|
this.setTabData();
|
|
142
156
|
if (this.activetab) {
|
|
@@ -146,6 +160,9 @@ export class Tabs extends BaseTabs {
|
|
|
146
160
|
tabsChanged() {
|
|
147
161
|
super.tabsChanged();
|
|
148
162
|
this.setTabData();
|
|
163
|
+
if (this.activetab) {
|
|
164
|
+
this.animationLoop(this.activetab);
|
|
165
|
+
}
|
|
149
166
|
}
|
|
150
167
|
}
|
|
151
168
|
__decorate([
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../../src/tabs/tabs.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAsB,MAAM,yBAAyB,CAAC;AAExE,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,cAAc,EAAE,eAAe,EAAiB,MAAM,mBAAmB,CAAC;AAInF;;GAEG;AACH,MAAM,OAAO,IAAK,SAAQ,QAAQ;IAAlC;;QACE;;;WAGG;QACK,kBAAa,GAAY,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC;QACrE;;;WAGG;QACK,0BAAqB,GAAY,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC;QAC7E;;;WAGG;QACK,oBAAe,GAAG,CAAC,CAAC;QAC5B;;;WAGG;QACK,mBAAc,GAAG,CAAC,CAAC;QAQ3B;;;WAGG;QAEI,eAAU,GAAoB,cAAc,CAAC,WAAW,CAAC;
|
|
1
|
+
{"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../../src/tabs/tabs.ts"],"names":[],"mappings":"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"}
|
|
@@ -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":"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"}
|
|
@@ -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,10 @@ 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
|
+
if (!this.expanded) {
|
|
92
|
+
this.expanded = Array.from(this.querySelectorAll('[selected]')).some(el => isTreeItem(el));
|
|
93
|
+
}
|
|
90
94
|
this.childTreeItems.forEach(item => {
|
|
91
95
|
this.setIndent(item);
|
|
92
96
|
});
|
|
@@ -98,29 +102,6 @@ export class BaseTreeItem extends FASTElement {
|
|
|
98
102
|
const indent = this.dataIndent ?? 0;
|
|
99
103
|
item.dataIndent = indent + 1;
|
|
100
104
|
}
|
|
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
105
|
/**
|
|
125
106
|
* Toggle the expansion state of the tree item
|
|
126
107
|
*
|
|
@@ -131,14 +112,6 @@ export class BaseTreeItem extends FASTElement {
|
|
|
131
112
|
this.expanded = !this.expanded;
|
|
132
113
|
}
|
|
133
114
|
}
|
|
134
|
-
/**
|
|
135
|
-
* Toggle the single selection state of the tree item
|
|
136
|
-
*
|
|
137
|
-
* @public
|
|
138
|
-
*/
|
|
139
|
-
toggleSelection() {
|
|
140
|
-
this.selected = !this.selected;
|
|
141
|
-
}
|
|
142
115
|
/**
|
|
143
116
|
* Whether the tree is nested
|
|
144
117
|
* @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
|
|
@@ -10209,6 +10191,12 @@ export declare class Tabs extends BaseTabs {
|
|
|
10209
10191
|
* @internal
|
|
10210
10192
|
*/
|
|
10211
10193
|
private animationLoop;
|
|
10194
|
+
/**
|
|
10195
|
+
* Gets the position data for a tab element relative to its parent
|
|
10196
|
+
* @param tab - The tab element to get position data for
|
|
10197
|
+
* @returns The position data for the tab
|
|
10198
|
+
*/
|
|
10199
|
+
private getTabPositionData;
|
|
10212
10200
|
/**
|
|
10213
10201
|
* Sets the data from the active tab onto the class. used for making all the animation calculations for the active
|
|
10214
10202
|
* tab indicator.
|
package/dist/web-components.js
CHANGED
|
@@ -11460,6 +11460,21 @@ class Tabs extends BaseTabs {
|
|
|
11460
11460
|
this.applyUpdatedCSSValues(tab);
|
|
11461
11461
|
tab.setAttribute("data-animate", "true");
|
|
11462
11462
|
}
|
|
11463
|
+
/**
|
|
11464
|
+
* Gets the position data for a tab element relative to its parent
|
|
11465
|
+
* @param tab - The tab element to get position data for
|
|
11466
|
+
* @returns The position data for the tab
|
|
11467
|
+
*/
|
|
11468
|
+
getTabPositionData(tab) {
|
|
11469
|
+
const rect = tab.getBoundingClientRect();
|
|
11470
|
+
const parentRect = this.getBoundingClientRect();
|
|
11471
|
+
return {
|
|
11472
|
+
x: rect.x - parentRect.x,
|
|
11473
|
+
y: rect.y - parentRect.y,
|
|
11474
|
+
height: rect.height,
|
|
11475
|
+
width: rect.width
|
|
11476
|
+
};
|
|
11477
|
+
}
|
|
11463
11478
|
/**
|
|
11464
11479
|
* Sets the data from the active tab onto the class. used for making all the animation calculations for the active
|
|
11465
11480
|
* tab indicator.
|
|
@@ -11470,14 +11485,7 @@ class Tabs extends BaseTabs {
|
|
|
11470
11485
|
if (this.tabs && this.tabs.length > 0) {
|
|
11471
11486
|
const tabs = this.tabs;
|
|
11472
11487
|
const activeTab = this.activetab || tabs[0];
|
|
11473
|
-
|
|
11474
|
-
const parentRect = this.getBoundingClientRect();
|
|
11475
|
-
this.activeTabData = {
|
|
11476
|
-
x: activeRect.x - parentRect.x,
|
|
11477
|
-
y: activeRect.y - parentRect.y,
|
|
11478
|
-
height: activeRect.height,
|
|
11479
|
-
width: activeRect.width
|
|
11480
|
-
};
|
|
11488
|
+
this.activeTabData = this.getTabPositionData(activeTab);
|
|
11481
11489
|
if (this.previousActiveTabData?.x !== this.activeTabData?.x && this.previousActiveTabData?.y !== this.activeTabData?.y) {
|
|
11482
11490
|
this.previousActiveTabData = this.activeTabData;
|
|
11483
11491
|
}
|
|
@@ -11494,6 +11502,12 @@ class Tabs extends BaseTabs {
|
|
|
11494
11502
|
this.$fastController.addStyles(this.styles);
|
|
11495
11503
|
}
|
|
11496
11504
|
activeidChanged(oldValue, newValue) {
|
|
11505
|
+
if (oldValue && this.tabs) {
|
|
11506
|
+
const oldTab = this.tabs.find(tab => tab.id === oldValue);
|
|
11507
|
+
if (oldTab) {
|
|
11508
|
+
this.previousActiveTabData = this.getTabPositionData(oldTab);
|
|
11509
|
+
}
|
|
11510
|
+
}
|
|
11497
11511
|
super.activeidChanged(oldValue, newValue);
|
|
11498
11512
|
this.setTabData();
|
|
11499
11513
|
if (this.activetab) {
|
|
@@ -11503,6 +11517,9 @@ class Tabs extends BaseTabs {
|
|
|
11503
11517
|
tabsChanged() {
|
|
11504
11518
|
super.tabsChanged();
|
|
11505
11519
|
this.setTabData();
|
|
11520
|
+
if (this.activetab) {
|
|
11521
|
+
this.animationLoop(this.activetab);
|
|
11522
|
+
}
|
|
11506
11523
|
}
|
|
11507
11524
|
}
|
|
11508
11525
|
__decorateClass$d([attr], Tabs.prototype, "appearance", 2);
|
|
@@ -13273,7 +13290,7 @@ class BaseTree extends FASTElement {
|
|
|
13273
13290
|
* Updates current selected when slottedTreeItems changes
|
|
13274
13291
|
*/
|
|
13275
13292
|
updateCurrentSelected() {
|
|
13276
|
-
const selectedItem = this.querySelector(`[
|
|
13293
|
+
const selectedItem = this.querySelector(`[selected]`);
|
|
13277
13294
|
this.currentSelected = selectedItem;
|
|
13278
13295
|
if (this.currentFocused === null || !this.contains(this.currentFocused)) {
|
|
13279
13296
|
this.currentFocused = this.getValidFocusableItem();
|
|
@@ -13345,7 +13362,7 @@ class BaseTree extends FASTElement {
|
|
|
13345
13362
|
}
|
|
13346
13363
|
case keySpace:
|
|
13347
13364
|
{
|
|
13348
|
-
item.
|
|
13365
|
+
item.selected = true;
|
|
13349
13366
|
return;
|
|
13350
13367
|
}
|
|
13351
13368
|
}
|
|
@@ -13361,12 +13378,8 @@ class BaseTree extends FASTElement {
|
|
|
13361
13378
|
return;
|
|
13362
13379
|
}
|
|
13363
13380
|
if (e.target === this) {
|
|
13364
|
-
|
|
13365
|
-
|
|
13366
|
-
}
|
|
13367
|
-
if (this.currentFocused !== null) {
|
|
13368
|
-
this.currentFocused.focus();
|
|
13369
|
-
}
|
|
13381
|
+
this.currentFocused = this.getValidFocusableItem();
|
|
13382
|
+
this.currentFocused?.focus();
|
|
13370
13383
|
return;
|
|
13371
13384
|
}
|
|
13372
13385
|
if (this.contains(e.target)) {
|
|
@@ -13398,7 +13411,7 @@ class BaseTree extends FASTElement {
|
|
|
13398
13411
|
}
|
|
13399
13412
|
const item = e.target;
|
|
13400
13413
|
item.toggleExpansion();
|
|
13401
|
-
item.
|
|
13414
|
+
item.selected = true;
|
|
13402
13415
|
}
|
|
13403
13416
|
/**
|
|
13404
13417
|
* Handles the selected-changed events bubbling up
|
|
@@ -13593,6 +13606,9 @@ class BaseTreeItem extends FASTElement {
|
|
|
13593
13606
|
if (!this.childTreeItems?.length) {
|
|
13594
13607
|
return;
|
|
13595
13608
|
}
|
|
13609
|
+
if (!this.expanded) {
|
|
13610
|
+
this.expanded = Array.from(this.querySelectorAll("[selected]")).some(el => isTreeItem(el));
|
|
13611
|
+
}
|
|
13596
13612
|
this.childTreeItems.forEach(item => {
|
|
13597
13613
|
this.setIndent(item);
|
|
13598
13614
|
});
|
|
@@ -13604,29 +13620,6 @@ class BaseTreeItem extends FASTElement {
|
|
|
13604
13620
|
const indent = this.dataIndent ?? 0;
|
|
13605
13621
|
item.dataIndent = indent + 1;
|
|
13606
13622
|
}
|
|
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
13623
|
/**
|
|
13631
13624
|
* Toggle the expansion state of the tree item
|
|
13632
13625
|
*
|
|
@@ -13637,14 +13630,6 @@ class BaseTreeItem extends FASTElement {
|
|
|
13637
13630
|
this.expanded = !this.expanded;
|
|
13638
13631
|
}
|
|
13639
13632
|
}
|
|
13640
|
-
/**
|
|
13641
|
-
* Toggle the single selection state of the tree item
|
|
13642
|
-
*
|
|
13643
|
-
* @public
|
|
13644
|
-
*/
|
|
13645
|
-
toggleSelection() {
|
|
13646
|
-
this.selected = !this.selected;
|
|
13647
|
-
}
|
|
13648
13633
|
/**
|
|
13649
13634
|
* Whether the tree is nested
|
|
13650
13635
|
* @internal
|
|
@@ -13731,7 +13716,7 @@ const styles = css`
|
|
|
13731
13716
|
${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
13717
|
|
|
13733
13718
|
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="
|
|
13719
|
+
const template = html`<template tabindex="${x => x.selected ? 0 : -1}" slot="${x => x.isNestedItem ? "item" : void 0}" ${children({
|
|
13735
13720
|
property: "childTreeItems",
|
|
13736
13721
|
filter: node => isTreeItem(node)
|
|
13737
13722
|
})}><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>`;
|