@fluentui/react-tabs 9.0.0-rc.6 → 9.0.2
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.json +154 -1
- package/CHANGELOG.md +46 -2
- package/MIGRATION.md +14 -0
- package/README.md +22 -3
- package/Spec.md +13 -83
- package/lib/components/Tab/Tab.js.map +1 -1
- package/lib/components/Tab/renderTab.js.map +1 -1
- package/lib/components/Tab/useTab.js.map +1 -1
- package/lib/components/Tab/useTabAnimatedIndicator.js +15 -11
- package/lib/components/Tab/useTabAnimatedIndicator.js.map +1 -1
- package/lib/components/Tab/useTabStyles.js +12 -2
- package/lib/components/Tab/useTabStyles.js.map +1 -1
- package/lib/components/TabList/TabList.js.map +1 -1
- package/lib/components/TabList/TabListContext.js.map +1 -1
- package/lib/components/TabList/renderTabList.js.map +1 -1
- package/lib/components/TabList/useTabList.js.map +1 -1
- package/lib/components/TabList/useTabListContextValues.js.map +1 -1
- package/lib/components/TabList/useTabListStyles.js.map +1 -1
- package/lib-commonjs/components/Tab/Tab.js.map +1 -1
- package/lib-commonjs/components/Tab/renderTab.js.map +1 -1
- package/lib-commonjs/components/Tab/useTab.js.map +1 -1
- package/lib-commonjs/components/Tab/useTabAnimatedIndicator.js +15 -11
- package/lib-commonjs/components/Tab/useTabAnimatedIndicator.js.map +1 -1
- package/lib-commonjs/components/Tab/useTabStyles.js +12 -2
- package/lib-commonjs/components/Tab/useTabStyles.js.map +1 -1
- package/lib-commonjs/components/TabList/TabList.js.map +1 -1
- package/lib-commonjs/components/TabList/TabListContext.js.map +1 -1
- package/lib-commonjs/components/TabList/renderTabList.js.map +1 -1
- package/lib-commonjs/components/TabList/useTabList.js.map +1 -1
- package/lib-commonjs/components/TabList/useTabListContextValues.js.map +1 -1
- package/lib-commonjs/components/TabList/useTabListStyles.js.map +1 -1
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +10 -13
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,160 @@
|
|
|
2
2
|
"name": "@fluentui/react-tabs",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
5
|
+
"date": "Thu, 14 Jul 2022 17:03:33 GMT",
|
|
6
|
+
"tag": "@fluentui/react-tabs_v9.0.2",
|
|
7
|
+
"version": "9.0.2",
|
|
8
|
+
"comments": {
|
|
9
|
+
"none": [
|
|
10
|
+
{
|
|
11
|
+
"author": "Humberto.Morimoto@microsoft.com",
|
|
12
|
+
"package": "@fluentui/react-tabs",
|
|
13
|
+
"commit": "422636fffd66758c1a6dd617063582d902b61927",
|
|
14
|
+
"comment": "docs: Replacing https://aka.ms/fluentui-storybook with https://react.fluentui.dev/ to point to the official documentation site."
|
|
15
|
+
}
|
|
16
|
+
],
|
|
17
|
+
"patch": [
|
|
18
|
+
{
|
|
19
|
+
"author": "beachball",
|
|
20
|
+
"package": "@fluentui/react-tabs",
|
|
21
|
+
"comment": "Bump @fluentui/react-context-selector to v9.0.1",
|
|
22
|
+
"commit": "fd9308f35ec9b2c7f7fdbfce62f9a94ca00d6536"
|
|
23
|
+
},
|
|
24
|
+
{
|
|
25
|
+
"author": "beachball",
|
|
26
|
+
"package": "@fluentui/react-tabs",
|
|
27
|
+
"comment": "Bump @fluentui/react-tabster to v9.0.2",
|
|
28
|
+
"commit": "fd9308f35ec9b2c7f7fdbfce62f9a94ca00d6536"
|
|
29
|
+
},
|
|
30
|
+
{
|
|
31
|
+
"author": "beachball",
|
|
32
|
+
"package": "@fluentui/react-tabs",
|
|
33
|
+
"comment": "Bump @fluentui/react-utilities to v9.0.1-0",
|
|
34
|
+
"commit": "fd9308f35ec9b2c7f7fdbfce62f9a94ca00d6536"
|
|
35
|
+
},
|
|
36
|
+
{
|
|
37
|
+
"author": "beachball",
|
|
38
|
+
"package": "@fluentui/react-tabs",
|
|
39
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.11",
|
|
40
|
+
"commit": "fd9308f35ec9b2c7f7fdbfce62f9a94ca00d6536"
|
|
41
|
+
}
|
|
42
|
+
]
|
|
43
|
+
}
|
|
44
|
+
},
|
|
45
|
+
{
|
|
46
|
+
"date": "Tue, 28 Jun 2022 17:39:53 GMT",
|
|
47
|
+
"tag": "@fluentui/react-tabs_v9.0.1",
|
|
48
|
+
"version": "9.0.1",
|
|
49
|
+
"comments": {
|
|
50
|
+
"patch": [
|
|
51
|
+
{
|
|
52
|
+
"author": "lingfangao@hotmail.com",
|
|
53
|
+
"package": "@fluentui/react-tabs",
|
|
54
|
+
"commit": "3deda1fbbfb6ac2b1ad150d4dc6343f1f7fda85b",
|
|
55
|
+
"comment": "fix: Use caret dependency range for Griffel"
|
|
56
|
+
},
|
|
57
|
+
{
|
|
58
|
+
"author": "beachball",
|
|
59
|
+
"package": "@fluentui/react-tabs",
|
|
60
|
+
"comment": "Bump @fluentui/react-tabster to v9.0.1",
|
|
61
|
+
"commit": "3deda1fbbfb6ac2b1ad150d4dc6343f1f7fda85b"
|
|
62
|
+
},
|
|
63
|
+
{
|
|
64
|
+
"author": "beachball",
|
|
65
|
+
"package": "@fluentui/react-tabs",
|
|
66
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.10",
|
|
67
|
+
"commit": "3deda1fbbfb6ac2b1ad150d4dc6343f1f7fda85b"
|
|
68
|
+
}
|
|
69
|
+
]
|
|
70
|
+
}
|
|
71
|
+
},
|
|
72
|
+
{
|
|
73
|
+
"date": "Tue, 28 Jun 2022 15:14:06 GMT",
|
|
74
|
+
"tag": "@fluentui/react-tabs_v9.0.0",
|
|
75
|
+
"version": "9.0.0",
|
|
76
|
+
"comments": {
|
|
77
|
+
"prerelease": [
|
|
78
|
+
{
|
|
79
|
+
"author": "Humberto.Morimoto@microsoft.com",
|
|
80
|
+
"package": "@fluentui/react-tabs",
|
|
81
|
+
"commit": "09f58dcbef2306875046261dc0b7821283ccc287",
|
|
82
|
+
"comment": "chore: Using ::before and ::after instead of :before and :after."
|
|
83
|
+
},
|
|
84
|
+
{
|
|
85
|
+
"author": "lingfangao@hotmail.com",
|
|
86
|
+
"package": "@fluentui/react-tabs",
|
|
87
|
+
"commit": "675acea49c97f10837ddee9b8c4350ca27750125",
|
|
88
|
+
"comment": "Bump Griffel dependencies"
|
|
89
|
+
},
|
|
90
|
+
{
|
|
91
|
+
"author": "lingfangao@hotmail.com",
|
|
92
|
+
"package": "@fluentui/react-tabs",
|
|
93
|
+
"commit": "e0aabd850b15adf9c151ebd4e332f7c50ad6cfdf",
|
|
94
|
+
"comment": "Update 9.0.0-rc dependencies to use caret range"
|
|
95
|
+
},
|
|
96
|
+
{
|
|
97
|
+
"author": "Humberto.Morimoto@microsoft.com",
|
|
98
|
+
"package": "@fluentui/react-tabs",
|
|
99
|
+
"commit": "ddf16d80c50d80bc07331b478f567629775f2898",
|
|
100
|
+
"comment": "chore: Adding scheduler as a peer dependency since this package has a dependency on @fluentui/react-context-selector."
|
|
101
|
+
}
|
|
102
|
+
],
|
|
103
|
+
"none": [
|
|
104
|
+
{
|
|
105
|
+
"author": "mgodbolt@microsoft.com",
|
|
106
|
+
"package": "@fluentui/react-tabs",
|
|
107
|
+
"commit": "0a2e4c179791510becb1495d836a97e997f5f16d",
|
|
108
|
+
"comment": "chore: Convert tabs to index based stories"
|
|
109
|
+
},
|
|
110
|
+
{
|
|
111
|
+
"author": "Humberto.Morimoto@microsoft.com",
|
|
112
|
+
"package": "@fluentui/react-tabs",
|
|
113
|
+
"commit": "5ea871d03d388b192a83e2e5c0e0717e7dc61add",
|
|
114
|
+
"comment": "docs: README, spec and migration guide cleanup for react-tabs."
|
|
115
|
+
}
|
|
116
|
+
],
|
|
117
|
+
"patch": [
|
|
118
|
+
{
|
|
119
|
+
"author": "lingfangao@hotmail.com",
|
|
120
|
+
"package": "@fluentui/react-tabs",
|
|
121
|
+
"commit": "c7b1348bdad7aa883c29bfbc96ef2a32e6ebc7dd",
|
|
122
|
+
"comment": "feat: Initial 9.0.0 release"
|
|
123
|
+
},
|
|
124
|
+
{
|
|
125
|
+
"author": "beachball",
|
|
126
|
+
"package": "@fluentui/react-tabs",
|
|
127
|
+
"comment": "Bump @fluentui/react-context-selector to v9.0.0",
|
|
128
|
+
"commit": "ba6c5d651559b91c815429c9a9357c4d5a390f3e"
|
|
129
|
+
},
|
|
130
|
+
{
|
|
131
|
+
"author": "beachball",
|
|
132
|
+
"package": "@fluentui/react-tabs",
|
|
133
|
+
"comment": "Bump @fluentui/react-tabster to v9.0.0",
|
|
134
|
+
"commit": "ba6c5d651559b91c815429c9a9357c4d5a390f3e"
|
|
135
|
+
},
|
|
136
|
+
{
|
|
137
|
+
"author": "beachball",
|
|
138
|
+
"package": "@fluentui/react-tabs",
|
|
139
|
+
"comment": "Bump @fluentui/react-theme to v9.0.0",
|
|
140
|
+
"commit": "ba6c5d651559b91c815429c9a9357c4d5a390f3e"
|
|
141
|
+
},
|
|
142
|
+
{
|
|
143
|
+
"author": "beachball",
|
|
144
|
+
"package": "@fluentui/react-tabs",
|
|
145
|
+
"comment": "Bump @fluentui/react-utilities to v9.0.0",
|
|
146
|
+
"commit": "ba6c5d651559b91c815429c9a9357c4d5a390f3e"
|
|
147
|
+
},
|
|
148
|
+
{
|
|
149
|
+
"author": "beachball",
|
|
150
|
+
"package": "@fluentui/react-tabs",
|
|
151
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.9",
|
|
152
|
+
"commit": "ba6c5d651559b91c815429c9a9357c4d5a390f3e"
|
|
153
|
+
}
|
|
154
|
+
]
|
|
155
|
+
}
|
|
156
|
+
},
|
|
157
|
+
{
|
|
158
|
+
"date": "Thu, 23 Jun 2022 14:25:31 GMT",
|
|
6
159
|
"tag": "@fluentui/react-tabs_v9.0.0-rc.6",
|
|
7
160
|
"version": "9.0.0-rc.6",
|
|
8
161
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,56 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-tabs
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Thu, 14 Jul 2022 17:03:33 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.0.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabs_v9.0.2)
|
|
8
|
+
|
|
9
|
+
Thu, 14 Jul 2022 17:03:33 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabs_v9.0.1..@fluentui/react-tabs_v9.0.2)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- Bump @fluentui/react-context-selector to v9.0.1 ([PR #23909](https://github.com/microsoft/fluentui/pull/23909) by beachball)
|
|
15
|
+
- Bump @fluentui/react-tabster to v9.0.2 ([PR #23909](https://github.com/microsoft/fluentui/pull/23909) by beachball)
|
|
16
|
+
- Bump @fluentui/react-utilities to v9.0.1-0 ([PR #23909](https://github.com/microsoft/fluentui/pull/23909) by beachball)
|
|
17
|
+
- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.11 ([PR #23909](https://github.com/microsoft/fluentui/pull/23909) by beachball)
|
|
18
|
+
|
|
19
|
+
## [9.0.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabs_v9.0.1)
|
|
20
|
+
|
|
21
|
+
Tue, 28 Jun 2022 17:39:53 GMT
|
|
22
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabs_v9.0.0..@fluentui/react-tabs_v9.0.1)
|
|
23
|
+
|
|
24
|
+
### Patches
|
|
25
|
+
|
|
26
|
+
- fix: Use caret dependency range for Griffel ([PR #23754](https://github.com/microsoft/fluentui/pull/23754) by lingfangao@hotmail.com)
|
|
27
|
+
- Bump @fluentui/react-tabster to v9.0.1 ([PR #23754](https://github.com/microsoft/fluentui/pull/23754) by beachball)
|
|
28
|
+
- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.10 ([PR #23754](https://github.com/microsoft/fluentui/pull/23754) by beachball)
|
|
29
|
+
|
|
30
|
+
## [9.0.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabs_v9.0.0)
|
|
31
|
+
|
|
32
|
+
Tue, 28 Jun 2022 15:14:06 GMT
|
|
33
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabs_v9.0.0-rc.6..@fluentui/react-tabs_v9.0.0)
|
|
34
|
+
|
|
35
|
+
### Patches
|
|
36
|
+
|
|
37
|
+
- feat: Initial 9.0.0 release ([PR #23733](https://github.com/microsoft/fluentui/pull/23733) by lingfangao@hotmail.com)
|
|
38
|
+
- Bump @fluentui/react-context-selector to v9.0.0 ([commit](https://github.com/microsoft/fluentui/commit/ba6c5d651559b91c815429c9a9357c4d5a390f3e) by beachball)
|
|
39
|
+
- Bump @fluentui/react-tabster to v9.0.0 ([commit](https://github.com/microsoft/fluentui/commit/ba6c5d651559b91c815429c9a9357c4d5a390f3e) by beachball)
|
|
40
|
+
- Bump @fluentui/react-theme to v9.0.0 ([commit](https://github.com/microsoft/fluentui/commit/ba6c5d651559b91c815429c9a9357c4d5a390f3e) by beachball)
|
|
41
|
+
- Bump @fluentui/react-utilities to v9.0.0 ([commit](https://github.com/microsoft/fluentui/commit/ba6c5d651559b91c815429c9a9357c4d5a390f3e) by beachball)
|
|
42
|
+
- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.9 ([commit](https://github.com/microsoft/fluentui/commit/ba6c5d651559b91c815429c9a9357c4d5a390f3e) by beachball)
|
|
43
|
+
|
|
44
|
+
### Changes
|
|
45
|
+
|
|
46
|
+
- chore: Using ::before and ::after instead of :before and :after. ([PR #23469](https://github.com/microsoft/fluentui/pull/23469) by Humberto.Morimoto@microsoft.com)
|
|
47
|
+
- Bump Griffel dependencies ([PR #23688](https://github.com/microsoft/fluentui/pull/23688) by lingfangao@hotmail.com)
|
|
48
|
+
- Update 9.0.0-rc dependencies to use caret range ([PR #23732](https://github.com/microsoft/fluentui/pull/23732) by lingfangao@hotmail.com)
|
|
49
|
+
- chore: Adding scheduler as a peer dependency since this package has a dependency on @fluentui/react-context-selector. ([PR #23681](https://github.com/microsoft/fluentui/pull/23681) by Humberto.Morimoto@microsoft.com)
|
|
50
|
+
|
|
7
51
|
## [9.0.0-rc.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabs_v9.0.0-rc.6)
|
|
8
52
|
|
|
9
|
-
|
|
53
|
+
Thu, 23 Jun 2022 14:25:31 GMT
|
|
10
54
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabs_v9.0.0-rc.5..@fluentui/react-tabs_v9.0.0-rc.6)
|
|
11
55
|
|
|
12
56
|
### Changes
|
package/MIGRATION.md
ADDED
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
# Tab and TabList Migration
|
|
2
|
+
|
|
3
|
+
### Migration from v8
|
|
4
|
+
|
|
5
|
+
1. Replace occurrences of `<Pivot>` with `<TabList>`
|
|
6
|
+
2. Replace occurrences of `<PivotItem>` with `<Tab>`
|
|
7
|
+
3. Replace `<PivotItem>` content with handling onTabSelected to show/hide associated content.
|
|
8
|
+
4. Move PivotItem.headerText to be the content of Tab
|
|
9
|
+
5. Subscribe to onTabSelected to show/hide content when a tab is selected.
|
|
10
|
+
|
|
11
|
+
### Migration from v0
|
|
12
|
+
|
|
13
|
+
1. Replace use of `<Menu>` with `<TabList>`
|
|
14
|
+
2. Replace items data with Tab instances, writing a `map` function as needed.
|
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# @fluentui/react-tabs
|
|
2
2
|
|
|
3
|
-
**
|
|
3
|
+
**Tabs components for [Fluent UI React](https://react.fluentui.dev/)**
|
|
4
4
|
|
|
5
5
|
- A `TabList` provides single selection from a list of tabs.
|
|
6
6
|
- When a `Tab` is selected, the content associated with the selected tab is displayed and other content is hidden.
|
|
@@ -12,6 +12,14 @@
|
|
|
12
12
|
|
|
13
13
|
## Usage
|
|
14
14
|
|
|
15
|
+
To import Tabs:
|
|
16
|
+
|
|
17
|
+
```js
|
|
18
|
+
import { Tablist, Tab } from '@fluentui/react-components';
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
### Examples
|
|
22
|
+
|
|
15
23
|
To display tabs, declare a `TabList` with a list of `Tab` components as children.
|
|
16
24
|
|
|
17
25
|
Text is typically used within each tab, but you can place any content you like.
|
|
@@ -46,6 +54,17 @@ export const TabExample = () => {
|
|
|
46
54
|
};
|
|
47
55
|
```
|
|
48
56
|
|
|
49
|
-
|
|
57
|
+
See [Fluent UI Storybook](https://react.fluentui.dev/) for more detailed usage examples.
|
|
58
|
+
|
|
59
|
+
Alternatively, run Storybook locally with:
|
|
60
|
+
|
|
61
|
+
1. `yarn start`
|
|
62
|
+
2. Select `react-tabs` from the list.
|
|
63
|
+
|
|
64
|
+
### Specification
|
|
65
|
+
|
|
66
|
+
See [SPEC.md](./SPEC.md).
|
|
67
|
+
|
|
68
|
+
### Migration Guide
|
|
50
69
|
|
|
51
|
-
|
|
70
|
+
If you're upgrading to Fluent UI v9 see [MIGRATION.md](./MIGRATION.md) for guidance on updating to the latest Link implementation.
|
package/Spec.md
CHANGED
|
@@ -234,84 +234,25 @@ An icon only tab is displayed when the icon slot is filled and tab content is om
|
|
|
234
234
|
|
|
235
235
|
### Tab
|
|
236
236
|
|
|
237
|
-
|
|
238
|
-
This is similar to Accordion's selection approach.
|
|
237
|
+
See API at [Tab.types.ts](./src/components/Tab/Tab.types.ts).
|
|
239
238
|
|
|
240
|
-
|
|
241
|
-
export type TabValue = unknown;
|
|
239
|
+
Notes:
|
|
242
240
|
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
disabledFocusable?: boolean;
|
|
246
|
-
value: TabValue;
|
|
247
|
-
};
|
|
248
|
-
```
|
|
249
|
-
|
|
250
|
-
Each tab has an icon slot.
|
|
251
|
-
|
|
252
|
-
```ts
|
|
253
|
-
export type TabSlots = {
|
|
254
|
-
root: IntrinsicSlotProps<'div'>;
|
|
255
|
-
icon?: IntrinsicSlotProps<'span'>;
|
|
256
|
-
};
|
|
257
|
-
```
|
|
258
|
-
|
|
259
|
-
```ts
|
|
260
|
-
export type TabProps = ComponentProps<TabSlots> & TabCommons;
|
|
261
|
-
```
|
|
241
|
+
- `TabCommons.value` supports an arbitrary identifier value. This is similar to Accordion's selection approach.
|
|
242
|
+
- Each tab has an `icon` slot.
|
|
262
243
|
|
|
263
244
|
### TabList
|
|
264
245
|
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
```ts
|
|
268
|
-
export type TabListSlots = {
|
|
269
|
-
root: IntrinsicSlotProps<'div'>;
|
|
270
|
-
};
|
|
271
|
-
```
|
|
272
|
-
|
|
273
|
-
The tab list supports tab selection events that include the value of the tab selected.
|
|
246
|
+
See API at [TabList.types.ts](./src/components/TabList/TabList.types.ts).
|
|
274
247
|
|
|
275
|
-
|
|
276
|
-
export type TabSelectedEvent<E = HTMLElement> = React.MouseEvent<E> | React.KeyboardEvent<E>;
|
|
248
|
+
Notes:
|
|
277
249
|
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
Tab list supports default and selected values for controlled and uncontrolled scenarios.
|
|
286
|
-
|
|
287
|
-
```ts
|
|
288
|
-
export type TabListProps = ComponentProps<TabListSlots> & {
|
|
289
|
-
appearance?: 'transparent' | 'subtle';
|
|
290
|
-
defaultSelectedValue?: string | number;
|
|
291
|
-
selectedValue?: string | number;
|
|
292
|
-
size?: 'small' | 'medium';
|
|
293
|
-
vertical?: boolean;
|
|
294
|
-
verticalTabContent?: boolean;
|
|
295
|
-
onTabSelected?: TabSelectedEventHandler;
|
|
296
|
-
};
|
|
297
|
-
```
|
|
298
|
-
|
|
299
|
-
The tab list communicates with tabs via context.
|
|
300
|
-
This applies appearance, size, and layout.
|
|
301
|
-
The tab can leverage the selectedValue and is expected to call selectTab when clicked.
|
|
302
|
-
|
|
303
|
-
By adding these properties to TabProps we could allow individual tabs to override these values.
|
|
304
|
-
However the expectation is that the tabs within a tab list have consistent layout and appearance.
|
|
305
|
-
|
|
306
|
-
```ts
|
|
307
|
-
export type TabListContextValue = TabListCommons & {
|
|
308
|
-
appearance: 'transparent' | 'subtle';
|
|
309
|
-
selectedValue: string;
|
|
310
|
-
size: 'small' | 'medium';
|
|
311
|
-
selectTab: SelectTabEventHandler;
|
|
312
|
-
vertical: boolean;
|
|
313
|
-
};
|
|
314
|
-
```
|
|
250
|
+
- The tab list only has the `root` slot.
|
|
251
|
+
- The tab list supports tab selection events that include the value of the tab selected.
|
|
252
|
+
- Tab list supports default and selected values for controlled and uncontrolled scenarios.
|
|
253
|
+
- The tab list communicates with tabs via context. This applies `appearance`, `size`, and `layout`.
|
|
254
|
+
- The tab can leverage the `selectedValue` and is expected to call `selectTab` when clicked.
|
|
255
|
+
- By adding these context properties to `TabProps` we could allow individual tabs to override these values. However the expectation is that the tabs within a tab list have a consistent layout and appearance.
|
|
315
256
|
|
|
316
257
|
## Structure
|
|
317
258
|
|
|
@@ -337,18 +278,7 @@ export type TabListContextValue = TabListCommons & {
|
|
|
337
278
|
|
|
338
279
|
## Migration
|
|
339
280
|
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
1. Replace occurrences of `<Pivot>` with `<TabList>`
|
|
343
|
-
2. Replace occurrences of `<PivotItem>` with `<Tab>`
|
|
344
|
-
3. Replace `<PivotItem>` content with handling onTabSelected to show/hide associated content.
|
|
345
|
-
4. Move PivotItem.headerText to be the content of Tab
|
|
346
|
-
5. Subscribe to onTabSelected to show/hide content when a tab is selected.
|
|
347
|
-
|
|
348
|
-
### From v0
|
|
349
|
-
|
|
350
|
-
1. Replace use of `<Menu>` with `<TabList>`
|
|
351
|
-
2. Replace items data with Tab instances, writing a `map` function as needed.
|
|
281
|
+
See [MIGRATION.md](./MIGRATION.md).
|
|
352
282
|
|
|
353
283
|
## Behaviors
|
|
354
284
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/Tab/Tab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,eAAT,QAAgC,UAAhC;AACA,SAAS,kBAAT,QAAmC,aAAnC;AACA,SAAS,qBAAT,QAAsC,gBAAtC;AAIA;;AAEG;;AACH,OAAO,MAAM,GAAG,gBAAkC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;
|
|
1
|
+
{"version":3,"sources":["components/Tab/Tab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,eAAT,QAAgC,UAAhC;AACA,SAAS,kBAAT,QAAmC,aAAnC;AACA,SAAS,qBAAT,QAAsC,gBAAtC;AAIA;;AAEG;;AACH,OAAO,MAAM,GAAG,gBAAkC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAChF,MAAM,KAAK,GAAG,eAAe,CAAC,KAAD,EAAQ,GAAR,CAA7B;EAEA,qBAAqB,CAAC,KAAD,CAArB;EACA,OAAO,kBAAkB,CAAC,KAAD,CAAzB;AACD,CALiD,CAA3C;AAOP,GAAG,CAAC,WAAJ,GAAkB,KAAlB","sourcesContent":["import * as React from 'react';\nimport { useTab_unstable } from './useTab';\nimport { renderTab_unstable } from './renderTab';\nimport { useTabStyles_unstable } from './useTabStyles';\nimport type { TabProps } from './Tab.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * A tab provides a selectable item in a tab list.\n */\nexport const Tab: ForwardRefComponent<TabProps> = React.forwardRef((props, ref) => {\n const state = useTab_unstable(props, ref);\n\n useTabStyles_unstable(state);\n return renderTab_unstable(state);\n});\n\nTab.displayName = 'Tab';\n"],"sourceRoot":"../src/"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/Tab/renderTab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,kBAAkB,GAAI,KAAD,IAAoB;
|
|
1
|
+
{"version":3,"sources":["components/Tab/renderTab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,kBAAkB,GAAI,KAAD,IAAoB;EACpD,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAW,KAAX,CAArC;EAEA,oBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACG,KAAK,CAAC,IAAN,iBAAc,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,CADjB,EAEG,CAAC,KAAK,CAAC,QAAP,iBAAmB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,OAAP,EAAc,EAAA,GAAK,SAAS,CAAC;EAAf,CAAd,CAFtB,CADF;AAMD,CATM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { TabState, TabSlots } from './Tab.types';\n\n/**\n * Render the final JSX of Tab\n */\nexport const renderTab_unstable = (state: TabState) => {\n const { slots, slotProps } = getSlots<TabSlots>(state);\n\n return (\n <slots.root {...slotProps.root}>\n {slots.icon && <slots.icon {...slotProps.icon} />}\n {!state.iconOnly && <slots.content {...slotProps.content} />}\n </slots.root>\n );\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/Tab/useTab.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,qBAAT,EAAgC,gBAAhC,EAAkD,gBAAlD,EAAoE,aAApE,QAAyF,2BAAzF;AAEA,SAAS,cAAT,QAA+B,2BAA/B;AACA,SAAS,kBAAT,QAAmC,kCAAnC;AAGA;;;;;;;;AAQG;;AACH,OAAO,MAAM,eAAe,GAAG,CAAC,KAAD,EAAkB,GAAlB,KAA2D;
|
|
1
|
+
{"version":3,"sources":["components/Tab/useTab.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport type { TabProps, TabState } from './Tab.types';\nimport { TabListContext } from '../TabList/TabListContext';\nimport { useContextSelector } from '@fluentui/react-context-selector';\nimport { SelectTabEvent } from '../TabList/TabList.types';\n\n/**\n * Create the state required to render Tab.\n *\n * The returned state can be modified with hooks such as useTabStyles_unstable,\n * before being passed to renderTab_unstable.\n *\n * @param props - props from this instance of Tab\n * @param ref - reference to root HTMLElement of Tab\n */\nexport const useTab_unstable = (props: TabProps, ref: React.Ref<HTMLElement>): TabState => {\n const { content, disabled: tabDisabled = false, icon, value } = props;\n\n const appearance = useContextSelector(TabListContext, ctx => ctx.appearance);\n const listDisabled = useContextSelector(TabListContext, ctx => ctx.disabled);\n const selected = useContextSelector(TabListContext, ctx => ctx.selectedValue === value);\n const onRegister = useContextSelector(TabListContext, ctx => ctx.onRegister);\n const onUnregister = useContextSelector(TabListContext, ctx => ctx.onUnregister);\n const onSelect = useContextSelector(TabListContext, ctx => ctx.onSelect);\n const size = useContextSelector(TabListContext, ctx => ctx.size);\n const vertical = useContextSelector(TabListContext, ctx => !!ctx.vertical);\n const disabled = listDisabled || tabDisabled;\n\n const innerRef = React.useRef<HTMLElement>(null);\n const onClick = useEventCallback((event: SelectTabEvent) => onSelect(event, { value }));\n\n React.useEffect(() => {\n onRegister({\n value,\n ref: innerRef,\n });\n\n return () => {\n onUnregister({ value, ref: innerRef });\n };\n }, [onRegister, onUnregister, innerRef, value]);\n\n const iconShorthand = resolveShorthand(icon);\n const contentShorthand = resolveShorthand(content, { required: true, defaultProps: { children: props.children } });\n return {\n components: {\n root: 'button',\n icon: 'span',\n content: 'span',\n },\n root: getNativeElementProps('button', {\n ref: useMergedRefs(ref, innerRef),\n role: 'tab',\n // aria-selected undefined indicates it is not selectable\n // according to https://www.w3.org/TR/wai-aria-1.1/#aria-selected\n 'aria-selected': disabled ? undefined : `${selected}`,\n ...props,\n disabled,\n onClick,\n }),\n icon: iconShorthand,\n iconOnly: Boolean(iconShorthand?.children && !contentShorthand.children),\n content: contentShorthand,\n appearance,\n disabled,\n selected,\n size,\n value,\n vertical,\n };\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -15,23 +15,27 @@ const useActiveIndicatorStyles = /*#__PURE__*/__styles({
|
|
|
15
15
|
"Bmxbyg5": "f1y7q3j9"
|
|
16
16
|
},
|
|
17
17
|
"animated": {
|
|
18
|
-
"
|
|
19
|
-
"
|
|
20
|
-
"
|
|
21
|
-
"
|
|
22
|
-
"
|
|
18
|
+
"Ba2ppi3": "fhwpy7i",
|
|
19
|
+
"F2fol1": "f6zz20j",
|
|
20
|
+
"B1dyfl9": "f1ai4sc1",
|
|
21
|
+
"B0vmy72": "f9qxlq5",
|
|
22
|
+
"u9bimw": "f1aql376"
|
|
23
23
|
},
|
|
24
24
|
"horizontal": {
|
|
25
|
-
"
|
|
26
|
-
"
|
|
25
|
+
"sjv3b2": ["fug4aj8", "f1i5xzg7"],
|
|
26
|
+
"b1kco5": "f1q7ujh"
|
|
27
27
|
},
|
|
28
28
|
"vertical": {
|
|
29
|
-
"
|
|
30
|
-
"
|
|
29
|
+
"sjv3b2": "f1hqboyk",
|
|
30
|
+
"b1kco5": "f1dxupa6"
|
|
31
31
|
}
|
|
32
32
|
}, {
|
|
33
|
-
"d": [".f1mtd64y{overflow-x:visible;}", ".f1y7q3j9{overflow-y:visible;}", ".
|
|
34
|
-
"
|
|
33
|
+
"d": [".f1mtd64y{overflow-x:visible;}", ".f1y7q3j9{overflow-y:visible;}", ".fhwpy7i::after{transition-property:transform;}", ".f6zz20j::after{transition-duration:var(--durationSlow);}", ".f1ai4sc1::after{transition-timing-function:var(--curveDecelerateMax);}", ".fug4aj8::after{transform-origin:left;}", ".f1i5xzg7::after{transform-origin:right;}", ".f1q7ujh::after{-webkit-transform:translateX(var(--fui-Tab__indicator--offset)) scaleX(var(--fui-Tab__indicator--scale));-moz-transform:translateX(var(--fui-Tab__indicator--offset)) scaleX(var(--fui-Tab__indicator--scale));-ms-transform:translateX(var(--fui-Tab__indicator--offset)) scaleX(var(--fui-Tab__indicator--scale));transform:translateX(var(--fui-Tab__indicator--offset)) scaleX(var(--fui-Tab__indicator--scale));}", ".f1hqboyk::after{transform-origin:top;}", ".f1dxupa6::after{-webkit-transform:translateY(var(--fui-Tab__indicator--offset)) scaleY(var(--fui-Tab__indicator--scale));-moz-transform:translateY(var(--fui-Tab__indicator--offset)) scaleY(var(--fui-Tab__indicator--scale));-ms-transform:translateY(var(--fui-Tab__indicator--offset)) scaleY(var(--fui-Tab__indicator--scale));transform:translateY(var(--fui-Tab__indicator--offset)) scaleY(var(--fui-Tab__indicator--scale));}"],
|
|
34
|
+
"m": [["@media (prefers-reduced-motion: reduce){.f9qxlq5::after{transition-property:none;}}", {
|
|
35
|
+
"m": "(prefers-reduced-motion: reduce)"
|
|
36
|
+
}], ["@media (prefers-reduced-motion: reduce){.f1aql376::after{transition-duration:0.01ms;}}", {
|
|
37
|
+
"m": "(prefers-reduced-motion: reduce)"
|
|
38
|
+
}]]
|
|
35
39
|
});
|
|
36
40
|
|
|
37
41
|
const calculateTabRect = element => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/Tab/useTabAnimatedIndicator.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAGA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,gBAArD;AACA,SAAS,kBAAT,QAAmC,kCAAnC;AACA,SAAS,cAAT,QAA+B,2BAA/B;AAEA,SAAS,MAAT,QAAuB,uBAAvB,C,CAEA;;AACA,MAAM,4BAA4B,GAAG;
|
|
1
|
+
{"version":3,"sources":["components/Tab/useTabAnimatedIndicator.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAGA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,gBAArD;AACA,SAAS,kBAAT,QAAmC,kCAAnC;AACA,SAAS,cAAT,QAA+B,2BAA/B;AAEA,SAAS,MAAT,QAAuB,uBAAvB,C,CAEA;;AACA,MAAM,4BAA4B,GAAG;EACnC,SAAS,EAAE,8BADwB;EAEnC,QAAQ,EAAE;AAFyB,CAArC;;AAKA,MAAM,wBAAwB,gBAAG;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;EAAA;IAAA;EAAA;IAAA;EAAA;AAAA,EAAjC;;AAkCA,MAAM,gBAAgB,GAAI,OAAD,IAAyB;;;EAChD,IAAI,OAAJ,EAAa;IACX,MAAM,UAAU,GAAG,CAAA,CAAA,EAAA,GAAA,OAAO,CAAC,aAAR,MAAqB,IAArB,IAAqB,EAAA,KAAA,KAAA,CAArB,GAAqB,KAAA,CAArB,GAAqB,EAAA,CAAE,qBAAF,EAArB,KAAkD;MAAE,CAAC,EAAE,CAAL;MAAQ,CAAC,EAAE,CAAX;MAAc,KAAK,EAAE,CAArB;MAAwB,MAAM,EAAE;IAAhC,CAArE;IACA,MAAM,OAAO,GAAG,OAAO,CAAC,qBAAR,EAAhB;IAEA,OAAO;MACL,CAAC,EAAE,OAAO,CAAC,CAAR,GAAY,UAAU,CAAC,CADrB;MAEL,CAAC,EAAE,OAAO,CAAC,CAAR,GAAY,UAAU,CAAC,CAFrB;MAGL,KAAK,EAAE,OAAO,CAAC,KAHV;MAIL,MAAM,EAAE,OAAO,CAAC;IAJX,CAAP;EAMD;;EACD,OAAO,SAAP;AACD,CAbD;;AAeA,MAAM,oBAAoB,GAAG,CAAC,cAAD,EAAkD,KAAlD,KAAsE;;;EACjG,MAAM,OAAO,GACX,KAAK,KAAK,SAAV,IAAuB,KAAK,KAAK,IAAjC,GAAwC,CAAA,EAAA,GAAA,cAAc,CAAC,IAAI,CAAC,SAAL,CAAe,KAAf,CAAD,CAAd,MAAqC,IAArC,IAAqC,EAAA,KAAA,KAAA,CAArC,GAAqC,KAAA,CAArC,GAAqC,EAAA,CAAE,GAAF,CAAM,OAAnF,GAA6F,SAD/F;EAEA,OAAO,OAAO,GAAG,gBAAgB,CAAC,OAAD,CAAnB,GAA+B,SAA7C;AACD,CAJD;AAMA;;AAEG;;;AACH,OAAO,MAAM,sCAAsC,GAAI,KAAD,IAA8B;EAClF,MAAM;IAAE,QAAF;IAAY,QAAZ;IAAsB;EAAtB,IAAmC,KAAzC;EAEA,MAAM,qBAAqB,GAAG,wBAAwB,EAAtD;EACA,MAAM,CAAC,gBAAD,EAAmB,mBAAnB,IAA0C,KAAK,CAAC,QAAN,EAAhD;EACA,MAAM,CAAC,eAAD,EAAkB,kBAAlB,IAAwC,KAAK,CAAC,QAAN,CAAe;IAAE,MAAM,EAAE,CAAV;IAAa,KAAK,EAAE;EAApB,CAAf,CAA9C;EACA,MAAM,iBAAiB,GAAG,kBAAkB,CAAC,cAAD,EAAiB,GAAG,IAAI,GAAG,CAAC,iBAA5B,CAA5C;EAEA,KAAK,CAAC,SAAN,CAAgB,MAAK;IACnB,IAAI,gBAAJ,EAAsB;MACpB,kBAAkB,CAAC;QAAE,MAAM,EAAE,CAAV;QAAa,KAAK,EAAE;MAApB,CAAD,CAAlB;IACD;EACF,CAJD,EAIG,CAAC,gBAAD,CAJH;;EAMA,IAAI,QAAJ,EAAc;IACZ,MAAM;MAAE,qBAAF;MAAyB,aAAzB;MAAwC;IAAxC,IAA2D,iBAAiB,EAAlF;IACA,MAAM,uBAAuB,GAAG,oBAAoB,CAAC,cAAD,EAAiB,qBAAjB,CAApD;IACA,MAAM,eAAe,GAAG,oBAAoB,CAAC,cAAD,EAAiB,aAAjB,CAA5C;;IAEA,IACE,eAAe,IACf,uBADA,IAEA,qBAFA,IAGA,gBAAgB,KAAK,qBAJvB,EAKE;MACA,MAAM,MAAM,GAAG,QAAQ,GACnB,uBAAuB,CAAC,CAAxB,GAA4B,eAAe,CAAC,CADzB,GAEnB,uBAAuB,CAAC,CAAxB,GAA4B,eAAe,CAAC,CAFhD;MAIA,MAAM,KAAK,GAAG,QAAQ,GAClB,uBAAuB,CAAC,MAAxB,GAAiC,eAAe,CAAC,MAD/B,GAElB,uBAAuB,CAAC,KAAxB,GAAgC,eAAe,CAAC,KAFpD;MAIA,kBAAkB,CAAC;QAAE,MAAF;QAAU;MAAV,CAAD,CAAlB;MACA,mBAAmB,CAAC,qBAAD,CAAnB;IACD;EACF,CAtBD,MAsBO,IAAI,gBAAJ,EAAsB;IAC3B;IACA;IACA,mBAAmB,CAAC,SAAD,CAAnB;EACD,CAxCiF,CA0ClF;;;EACA,IAAI,QAAJ,EAAc;IACZ,OAAO,KAAP;EACD,CA7CiF,CA+ClF;EACA;;;EACA,MAAM,SAAS,GAAG,eAAe,CAAC,MAAhB,KAA2B,CAA3B,IAAgC,eAAe,CAAC,KAAhB,KAA0B,CAA5E;EAEA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,KAAK,CAAC,IAAN,CAAW,SADsB,EAEjC,QAAQ,IAAI,qBAAqB,CAAC,IAFD,EAGjC,QAAQ,IAAI,SAAZ,IAAyB,qBAAqB,CAAC,QAHd,EAIjC,QAAQ,KAAK,QAAQ,GAAG,qBAAqB,CAAC,QAAzB,GAAoC,qBAAqB,CAAC,UAAvE,CAJyB,CAAnC;EAOA,MAAM,WAAW,GAAG;IAClB,CAAC,4BAA4B,CAAC,SAA9B,GAA0C,GAAG,eAAe,CAAC,MAAM,IADjD;IAElB,CAAC,4BAA4B,CAAC,QAA9B,GAAyC,GAAG,eAAe,CAAC,KAAK;EAF/C,CAApB;EAKA,KAAK,CAAC,IAAN,CAAW,KAAX,GAAmB,EACjB,GAAG,WADc;IAEjB,GAAG,KAAK,CAAC,IAAN,CAAW;EAFG,CAAnB;EAKA,OAAO,KAAP;AACD,CArEM","sourcesContent":["import * as React from 'react';\nimport type { TabState, TabValue } from './Tab.types';\n\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { useContextSelector } from '@fluentui/react-context-selector';\nimport { TabListContext } from '../TabList/TabListContext';\nimport { TabRegisterData } from '../TabList/TabList.types';\nimport { tokens } from '@fluentui/react-theme';\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nconst tabIndicatorCssVars_unstable = {\n offsetVar: '--fui-Tab__indicator--offset',\n scaleVar: '--fui-Tab__indicator--scale',\n};\n\nconst useActiveIndicatorStyles = makeStyles({\n base: {\n // overflow is required to allow the selection indicator to animate outside the tab area.\n ...shorthands.overflow('visible'),\n },\n animated: {\n '::after': {\n transitionProperty: 'transform',\n transitionDuration: `${tokens.durationSlow}`,\n transitionTimingFunction: `${tokens.curveDecelerateMax}`,\n },\n '@media (prefers-reduced-motion: reduce)': {\n '::after': {\n transitionProperty: 'none',\n transitionDuration: '0.01ms',\n },\n },\n },\n horizontal: {\n '::after': {\n transformOrigin: 'left',\n transform: `translateX(var(${tabIndicatorCssVars_unstable.offsetVar}))\n scaleX(var(${tabIndicatorCssVars_unstable.scaleVar}))`,\n },\n },\n vertical: {\n '::after': {\n transformOrigin: 'top',\n transform: `translateY(var(${tabIndicatorCssVars_unstable.offsetVar}))\n scaleY(var(${tabIndicatorCssVars_unstable.scaleVar}))`,\n },\n },\n});\n\nconst calculateTabRect = (element: HTMLElement) => {\n if (element) {\n const parentRect = element.parentElement?.getBoundingClientRect() || { x: 0, y: 0, width: 0, height: 0 };\n const tabRect = element.getBoundingClientRect();\n\n return {\n x: tabRect.x - parentRect.x,\n y: tabRect.y - parentRect.y,\n width: tabRect.width,\n height: tabRect.height,\n };\n }\n return undefined;\n};\n\nconst getRegisteredTabRect = (registeredTabs: Record<string, TabRegisterData>, value?: TabValue) => {\n const element =\n value !== undefined && value !== null ? registeredTabs[JSON.stringify(value)]?.ref.current : undefined;\n return element ? calculateTabRect(element) : undefined;\n};\n\n/**\n * Adds additional styling to the active tab selection indicator to create a sliding animation.\n */\nexport const useTabAnimatedIndicatorStyles_unstable = (state: TabState): TabState => {\n const { disabled, selected, vertical } = state;\n\n const activeIndicatorStyles = useActiveIndicatorStyles();\n const [lastAnimatedFrom, setLastAnimatedFrom] = React.useState<TabValue>();\n const [animationValues, setAnimationValues] = React.useState({ offset: 0, scale: 1 });\n const getRegisteredTabs = useContextSelector(TabListContext, ctx => ctx.getRegisteredTabs);\n\n React.useEffect(() => {\n if (lastAnimatedFrom) {\n setAnimationValues({ offset: 0, scale: 1 });\n }\n }, [lastAnimatedFrom]);\n\n if (selected) {\n const { previousSelectedValue, selectedValue, registeredTabs } = getRegisteredTabs();\n const previousSelectedTabRect = getRegisteredTabRect(registeredTabs, previousSelectedValue);\n const selectedTabRect = getRegisteredTabRect(registeredTabs, selectedValue);\n\n if (\n selectedTabRect &&\n previousSelectedTabRect &&\n previousSelectedValue &&\n lastAnimatedFrom !== previousSelectedValue\n ) {\n const offset = vertical\n ? previousSelectedTabRect.y - selectedTabRect.y\n : previousSelectedTabRect.x - selectedTabRect.x;\n\n const scale = vertical\n ? previousSelectedTabRect.height / selectedTabRect.height\n : previousSelectedTabRect.width / selectedTabRect.width;\n\n setAnimationValues({ offset, scale });\n setLastAnimatedFrom(previousSelectedValue);\n }\n } else if (lastAnimatedFrom) {\n // need to clear the last animated from so that if this tab is selected again\n // from the same previous tab as last time, that animation still happens.\n setLastAnimatedFrom(undefined);\n }\n\n // do not apply any animation if the tab is disabled\n if (disabled) {\n return state;\n }\n\n // the animation should only happen as the selection indicator returns to its\n // original position and not when set at the previous tabs position.\n const animating = animationValues.offset === 0 && animationValues.scale === 1;\n\n state.root.className = mergeClasses(\n state.root.className,\n selected && activeIndicatorStyles.base,\n selected && animating && activeIndicatorStyles.animated,\n selected && (vertical ? activeIndicatorStyles.vertical : activeIndicatorStyles.horizontal),\n );\n\n const rootCssVars = {\n [tabIndicatorCssVars_unstable.offsetVar]: `${animationValues.offset}px`,\n [tabIndicatorCssVars_unstable.scaleVar]: `${animationValues.scale}`,\n };\n\n state.root.style = {\n ...rootCssVars,\n ...state.root.style,\n };\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -194,7 +194,11 @@ const usePendingIndicatorStyles = /*#__PURE__*/__styles({
|
|
|
194
194
|
}, {
|
|
195
195
|
"h": [".fhw179n:hover::before{background-color:var(--colorNeutralStroke1Hover);}", ".f10y1uxy:hover::before{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f6aiuy0:hover::before{border-bottom-left-radius:var(--borderRadiusCircular);}", ".f1kfpfnu:hover::before{border-top-right-radius:var(--borderRadiusCircular);}", ".f1dx5wco:hover::before{border-top-left-radius:var(--borderRadiusCircular);}", ".f1kmhr4c:hover::before{content:\"\";}", ".fl1ydde:hover::before{position:absolute;}", ".f1ut20fw:hover::before{background-color:var(--colorTransparentStroke);}"],
|
|
196
196
|
"a": [".f1y7maxz:active::before{background-color:var(--colorNeutralStroke1Pressed);}", ".f105swax:active::before{border-bottom-right-radius:var(--borderRadiusCircular);}", ".fscdmel:active::before{border-bottom-left-radius:var(--borderRadiusCircular);}", ".f1tkcw1w:active::before{border-top-right-radius:var(--borderRadiusCircular);}", ".f1u11x8o:active::before{border-top-left-radius:var(--borderRadiusCircular);}", ".f16cxu0:active::before{content:\"\";}", ".f1nwgacf:active::before{position:absolute;}", ".fhrzcfn:active::before{background-color:var(--colorTransparentStroke);}"],
|
|
197
|
-
"
|
|
197
|
+
"m": [["@media (forced-colors: active){.f15ovonk:hover::before{background-color:Highlight;}}", {
|
|
198
|
+
"m": "(forced-colors: active)"
|
|
199
|
+
}], ["@media (forced-colors: active){.fvje46l:active::before{background-color:Highlight;}}", {
|
|
200
|
+
"m": "(forced-colors: active)"
|
|
201
|
+
}]],
|
|
198
202
|
"d": [".fchca7p::before{bottom:0;}", ".f1s2r9ax::before{height:var(--strokeWidthThicker);}", ".f1o0nnkk::before{left:var(--spacingHorizontalM);}", ".fxb7rol::before{right:var(--spacingHorizontalM);}", ".f17jracn::before{bottom:var(--spacingVerticalS);}", ".f1fzr1x6::before{left:0;}", ".f1f351id::before{right:0;}", ".f117lcb2::before{top:var(--spacingVerticalS);}", ".f1aij3q::before{width:var(--strokeWidthThicker);}", ".f1r53b5e::before{height:var(--strokeWidthThick);}", ".f1s6rxz5::before{left:var(--spacingHorizontalSNudge);}", ".fo35v8s::before{right:var(--spacingHorizontalSNudge);}", ".fze4zud::before{bottom:var(--spacingVerticalXS);}", ".fdp32p8::before{top:var(--spacingVerticalXS);}"]
|
|
199
203
|
});
|
|
200
204
|
|
|
@@ -248,7 +252,13 @@ const useActiveIndicatorStyles = /*#__PURE__*/__styles({
|
|
|
248
252
|
"d": [".f1rp0jgh::after{background-color:var(--colorTransparentStroke);}", ".fprarqb::after{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f14vs0nd::after{border-bottom-left-radius:var(--borderRadiusCircular);}", ".f1gtfqs9::after{border-top-right-radius:var(--borderRadiusCircular);}", ".f18zvfd9::after{border-top-left-radius:var(--borderRadiusCircular);}", ".f13zj6fq::after{content:\"\";}", ".f1mdlcz9::after{position:absolute;}", ".ffmd2fr::after{z-index:1;}", ".f1ksivud::after{background-color:var(--colorCompoundBrandStroke);}", ".f13lkzet::after{background-color:var(--colorNeutralForegroundDisabled);}", ".fo72kxq::after{bottom:0;}", ".f1vx7lu8::after{height:var(--strokeWidthThicker);}", ".fna7m5n::after{left:var(--spacingHorizontalM);}", ".f1oxpfwv::after{right:var(--spacingHorizontalM);}", ".fipylg0::after{bottom:var(--spacingVerticalS);}", ".f1n6gb5g::after{left:0;}", ".f15yvnhg::after{right:0;}", ".fqchiol::after{top:var(--spacingVerticalS);}", ".f1o25lip::after{width:var(--strokeWidthThicker);}", ".f9bb2ob::after{height:var(--strokeWidthThick);}", ".f1q70ajw::after{left:var(--spacingHorizontalSNudge);}", ".f18rbzdx::after{right:var(--spacingHorizontalSNudge);}", ".fqbue9b::after{bottom:var(--spacingVerticalXS);}", ".fk1klkt::after{top:var(--spacingVerticalXS);}"],
|
|
249
253
|
"h": [".f1eytvvh:hover::after{background-color:var(--colorCompoundBrandStrokeHover);}"],
|
|
250
254
|
"a": [".fuaa9s:active::after{background-color:var(--colorCompoundBrandStrokePressed);}"],
|
|
251
|
-
"
|
|
255
|
+
"m": [["@media (forced-colors: active){.fy7ktjt::after{background-color:ButtonText;}}", {
|
|
256
|
+
"m": "(forced-colors: active)"
|
|
257
|
+
}], ["@media (forced-colors: active){.f16tp0gf:hover::after{background-color:ButtonText;}}", {
|
|
258
|
+
"m": "(forced-colors: active)"
|
|
259
|
+
}], ["@media (forced-colors: active){.fj0yp7j:active::after{background-color:ButtonText;}}", {
|
|
260
|
+
"m": "(forced-colors: active)"
|
|
261
|
+
}]]
|
|
252
262
|
});
|
|
253
263
|
/**
|
|
254
264
|
* Styles for the icon slot.
|