@fluentui/react-tabs 9.0.0-beta.10 → 9.0.0-beta.11
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 +72 -1
- package/CHANGELOG.md +23 -6
- package/dist/{react-tabs.d.ts → index.d.ts} +0 -0
- package/lib/components/Tab/useTab.js +3 -0
- package/lib/components/Tab/useTab.js.map +1 -1
- package/lib/components/Tab/useTabAnimatedIndicator.js +6 -6
- package/lib/components/Tab/useTabAnimatedIndicator.js.map +1 -1
- package/lib/components/Tab/useTabStyles.js +171 -170
- package/lib/components/Tab/useTabStyles.js.map +1 -1
- package/lib-commonjs/components/Tab/useTab.js +3 -0
- package/lib-commonjs/components/Tab/useTab.js.map +1 -1
- package/lib-commonjs/components/Tab/useTabAnimatedIndicator.js +7 -7
- package/lib-commonjs/components/Tab/useTabAnimatedIndicator.js.map +1 -1
- package/lib-commonjs/components/Tab/useTabStyles.js +170 -170
- package/lib-commonjs/components/Tab/useTabStyles.js.map +1 -1
- package/package.json +8 -8
- package/lib/tab.constants.d.ts +0 -62
- package/lib/tab.constants.js +0 -68
- package/lib/tab.constants.js.map +0 -1
- package/lib-commonjs/tab.constants.d.ts +0 -62
- package/lib-commonjs/tab.constants.js +0 -75
- package/lib-commonjs/tab.constants.js.map +0 -1
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,78 @@
|
|
|
2
2
|
"name": "@fluentui/react-tabs",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
5
|
+
"date": "Wed, 04 May 2022 13:24:19 GMT",
|
|
6
|
+
"tag": "@fluentui/react-tabs_v9.0.0-beta.11",
|
|
7
|
+
"version": "9.0.0-beta.11",
|
|
8
|
+
"comments": {
|
|
9
|
+
"prerelease": [
|
|
10
|
+
{
|
|
11
|
+
"author": "gcox@microsoft.com",
|
|
12
|
+
"package": "@fluentui/react-tabs",
|
|
13
|
+
"commit": "97939a4e5f523b3ef05c815f909819701eee92ea",
|
|
14
|
+
"comment": "Added aria-selected"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"author": "gcox@microsoft.com",
|
|
18
|
+
"package": "@fluentui/react-tabs",
|
|
19
|
+
"commit": "c2562b5382305152a09402a367ec853d603438e7",
|
|
20
|
+
"comment": "Updated to use correct pseudo-elements"
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"author": "gcox@microsoft.com",
|
|
24
|
+
"package": "@fluentui/react-tabs",
|
|
25
|
+
"commit": "6c764b820241483c1a9a6e225f758a4c8d4b060e",
|
|
26
|
+
"comment": "Updated to use tokens"
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
"author": "gcox@microsoft.com",
|
|
30
|
+
"package": "@fluentui/react-tabs",
|
|
31
|
+
"commit": "55e2b1b53e81efa510a5bc15c6ab0398b52ace7f",
|
|
32
|
+
"comment": "Removed unnecessary width and height from indicators"
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
"author": "gcox@microsoft.com",
|
|
36
|
+
"package": "@fluentui/react-tabs",
|
|
37
|
+
"commit": "17ed5008371df7344540af658209840985dc4754",
|
|
38
|
+
"comment": "Allow tab to animate when value is numeric zero"
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
"author": "beachball",
|
|
42
|
+
"package": "@fluentui/react-tabs",
|
|
43
|
+
"comment": "Bump @fluentui/react-context-selector to v9.0.0-rc.7",
|
|
44
|
+
"commit": "65f94192ed3b2cde7e52b9c7e12d6f38b81965dd"
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
"author": "beachball",
|
|
48
|
+
"package": "@fluentui/react-tabs",
|
|
49
|
+
"comment": "Bump @fluentui/react-tabster to v9.0.0-rc.8",
|
|
50
|
+
"commit": "65f94192ed3b2cde7e52b9c7e12d6f38b81965dd"
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
"author": "beachball",
|
|
54
|
+
"package": "@fluentui/react-tabs",
|
|
55
|
+
"comment": "Bump @fluentui/react-theme to v9.0.0-rc.6",
|
|
56
|
+
"commit": "65f94192ed3b2cde7e52b9c7e12d6f38b81965dd"
|
|
57
|
+
},
|
|
58
|
+
{
|
|
59
|
+
"author": "beachball",
|
|
60
|
+
"package": "@fluentui/react-tabs",
|
|
61
|
+
"comment": "Bump @fluentui/react-utilities to v9.0.0-rc.7",
|
|
62
|
+
"commit": "65f94192ed3b2cde7e52b9c7e12d6f38b81965dd"
|
|
63
|
+
}
|
|
64
|
+
],
|
|
65
|
+
"none": [
|
|
66
|
+
{
|
|
67
|
+
"author": "tristan.watanabe@gmail.com",
|
|
68
|
+
"package": "@fluentui/react-tabs",
|
|
69
|
+
"commit": "f1c470c25de01baef3180067fa99dcc10ec9ebd5",
|
|
70
|
+
"comment": "react-tabs: Move to new common folder."
|
|
71
|
+
}
|
|
72
|
+
]
|
|
73
|
+
}
|
|
74
|
+
},
|
|
75
|
+
{
|
|
76
|
+
"date": "Mon, 25 Apr 2022 09:32:15 GMT",
|
|
6
77
|
"tag": "@fluentui/react-tabs_v9.0.0-beta.10",
|
|
7
78
|
"version": "9.0.0-beta.10",
|
|
8
79
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,29 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-tabs
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Wed, 04 May 2022 13:24:19 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.0.0-beta.11](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabs_v9.0.0-beta.11)
|
|
8
|
+
|
|
9
|
+
Wed, 04 May 2022 13:24:19 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabs_v9.0.0-beta.10..@fluentui/react-tabs_v9.0.0-beta.11)
|
|
11
|
+
|
|
12
|
+
### Changes
|
|
13
|
+
|
|
14
|
+
- Added aria-selected ([PR #22742](https://github.com/microsoft/fluentui/pull/22742) by gcox@microsoft.com)
|
|
15
|
+
- Updated to use correct pseudo-elements ([PR #22768](https://github.com/microsoft/fluentui/pull/22768) by gcox@microsoft.com)
|
|
16
|
+
- Updated to use tokens ([PR #22717](https://github.com/microsoft/fluentui/pull/22717) by gcox@microsoft.com)
|
|
17
|
+
- Removed unnecessary width and height from indicators ([PR #22744](https://github.com/microsoft/fluentui/pull/22744) by gcox@microsoft.com)
|
|
18
|
+
- Allow tab to animate when value is numeric zero ([PR #22754](https://github.com/microsoft/fluentui/pull/22754) by gcox@microsoft.com)
|
|
19
|
+
- Bump @fluentui/react-context-selector to v9.0.0-rc.7 ([PR #22786](https://github.com/microsoft/fluentui/pull/22786) by beachball)
|
|
20
|
+
- Bump @fluentui/react-tabster to v9.0.0-rc.8 ([PR #22786](https://github.com/microsoft/fluentui/pull/22786) by beachball)
|
|
21
|
+
- Bump @fluentui/react-theme to v9.0.0-rc.6 ([PR #22786](https://github.com/microsoft/fluentui/pull/22786) by beachball)
|
|
22
|
+
- Bump @fluentui/react-utilities to v9.0.0-rc.7 ([PR #22786](https://github.com/microsoft/fluentui/pull/22786) by beachball)
|
|
23
|
+
|
|
7
24
|
## [9.0.0-beta.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabs_v9.0.0-beta.10)
|
|
8
25
|
|
|
9
|
-
Mon, 25 Apr 2022 09:
|
|
26
|
+
Mon, 25 Apr 2022 09:32:15 GMT
|
|
10
27
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabs_v9.0.0-beta.9..@fluentui/react-tabs_v9.0.0-beta.10)
|
|
11
28
|
|
|
12
29
|
### Changes
|
|
@@ -16,7 +33,7 @@ Mon, 25 Apr 2022 09:31:16 GMT
|
|
|
16
33
|
|
|
17
34
|
## [9.0.0-beta.9](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabs_v9.0.0-beta.9)
|
|
18
35
|
|
|
19
|
-
Tue, 19 Apr 2022 19:16:56 GMT
|
|
36
|
+
Tue, 19 Apr 2022 19:16:56 GMT
|
|
20
37
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabs_v9.0.0-beta.8..@fluentui/react-tabs_v9.0.0-beta.9)
|
|
21
38
|
|
|
22
39
|
### Changes
|
|
@@ -38,7 +55,7 @@ Tue, 19 Apr 2022 19:16:56 GMT
|
|
|
38
55
|
|
|
39
56
|
## [9.0.0-beta.8](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabs_v9.0.0-beta.8)
|
|
40
57
|
|
|
41
|
-
Fri, 04 Mar 2022 05:17:30 GMT
|
|
58
|
+
Fri, 04 Mar 2022 05:17:30 GMT
|
|
42
59
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabs_v9.0.0-beta.7..@fluentui/react-tabs_v9.0.0-beta.8)
|
|
43
60
|
|
|
44
61
|
### Changes
|
|
@@ -51,7 +68,7 @@ Fri, 04 Mar 2022 05:17:30 GMT
|
|
|
51
68
|
|
|
52
69
|
## [9.0.0-beta.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabs_v9.0.0-beta.7)
|
|
53
70
|
|
|
54
|
-
Tue, 01 Mar 2022 02:17:39 GMT
|
|
71
|
+
Tue, 01 Mar 2022 02:17:39 GMT
|
|
55
72
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabs_v9.0.0-beta.6..@fluentui/react-tabs_v9.0.0-beta.7)
|
|
56
73
|
|
|
57
74
|
### Changes
|
|
@@ -63,7 +80,7 @@ Tue, 01 Mar 2022 02:17:39 GMT
|
|
|
63
80
|
|
|
64
81
|
## [9.0.0-beta.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabs_v9.0.0-beta.6)
|
|
65
82
|
|
|
66
|
-
Fri, 18 Feb 2022 13:35:35 GMT
|
|
83
|
+
Fri, 18 Feb 2022 13:35:35 GMT
|
|
67
84
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabs_v9.0.0-beta.4..@fluentui/react-tabs_v9.0.0-beta.6)
|
|
68
85
|
|
|
69
86
|
### Changes
|
|
File without changes
|
|
@@ -60,6 +60,9 @@ export const useTab_unstable = (props, ref) => {
|
|
|
60
60
|
root: getNativeElementProps('button', {
|
|
61
61
|
ref: useMergedRefs(ref, innerRef),
|
|
62
62
|
role: 'tab',
|
|
63
|
+
// aria-selected undefined indicates it is not selectable
|
|
64
|
+
// according to https://www.w3.org/TR/wai-aria-1.1/#aria-selected
|
|
65
|
+
'aria-selected': disabled ? undefined : `${selected}`,
|
|
63
66
|
...props,
|
|
64
67
|
disabled,
|
|
65
68
|
onClick
|
|
@@ -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;AACxF,QAAM;AAAE,IAAA,OAAF;AAAW,IAAA,QAAQ,EAAE,WAAW,GAAG,KAAnC;AAA0C,IAAA,IAA1C;AAAgD,IAAA;AAAhD,MAA0D,KAAhE;AAEA,QAAM,UAAU,GAAG,kBAAkB,CAAC,cAAD,EAAiB,GAAG,IAAI,GAAG,CAAC,UAA5B,CAArC;AACA,QAAM,YAAY,GAAG,kBAAkB,CAAC,cAAD,EAAiB,GAAG,IAAI,GAAG,CAAC,QAA5B,CAAvC;AACA,QAAM,QAAQ,GAAG,kBAAkB,CAAC,cAAD,EAAiB,GAAG,IAAI,GAAG,CAAC,aAAJ,KAAsB,KAA9C,CAAnC;AACA,QAAM,UAAU,GAAG,kBAAkB,CAAC,cAAD,EAAiB,GAAG,IAAI,GAAG,CAAC,UAA5B,CAArC;AACA,QAAM,YAAY,GAAG,kBAAkB,CAAC,cAAD,EAAiB,GAAG,IAAI,GAAG,CAAC,YAA5B,CAAvC;AACA,QAAM,QAAQ,GAAG,kBAAkB,CAAC,cAAD,EAAiB,GAAG,IAAI,GAAG,CAAC,QAA5B,CAAnC;AACA,QAAM,IAAI,GAAG,kBAAkB,CAAC,cAAD,EAAiB,GAAG,IAAI,GAAG,CAAC,IAA5B,CAA/B;AACA,QAAM,QAAQ,GAAG,kBAAkB,CAAC,cAAD,EAAiB,GAAG,IAAI,CAAC,CAAC,GAAG,CAAC,QAA9B,CAAnC;AACA,QAAM,QAAQ,GAAG,YAAY,IAAI,WAAjC;AAEA,QAAM,QAAQ,GAAG,KAAK,CAAC,MAAN,CAA0B,IAA1B,CAAjB;AACA,QAAM,OAAO,GAAG,gBAAgB,CAAE,KAAD,IAA2B,QAAQ,CAAC,KAAD,EAAQ;AAAE,IAAA;AAAF,GAAR,CAApC,CAAhC;AAEA,EAAA,KAAK,CAAC,SAAN,CAAgB,MAAK;AACnB,IAAA,UAAU,CAAC;AACT,MAAA,KADS;AAET,MAAA,GAAG,EAAE;AAFI,KAAD,CAAV;AAKA,WAAO,MAAK;AACV,MAAA,YAAY,CAAC;AAAE,QAAA,KAAF;AAAS,QAAA,GAAG,EAAE;AAAd,OAAD,CAAZ;AACD,KAFD;AAGD,GATD,EASG,CAAC,UAAD,EAAa,YAAb,EAA2B,QAA3B,EAAqC,KAArC,CATH;AAWA,QAAM,aAAa,GAAG,gBAAgB,CAAC,IAAD,CAAtC;AACA,QAAM,gBAAgB,GAAG,gBAAgB,CAAC,OAAD,EAAU;AAAE,IAAA,QAAQ,EAAE,IAAZ;AAAkB,IAAA,YAAY,EAAE;AAAE,MAAA,QAAQ,EAAE,KAAK,CAAC;AAAlB;AAAhC,GAAV,CAAzC;AACA,SAAO;AACL,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,QADI;AAEV,MAAA,IAAI,EAAE,MAFI;AAGV,MAAA,OAAO,EAAE;AAHC,KADP;AAML,IAAA,IAAI,EAAE,qBAAqB,CAAC,QAAD,EAAW;AACpC,MAAA,GAAG,EAAE,aAAa,CAAC,GAAD,EAAM,QAAN,CADkB;AAEpC,MAAA,IAAI,EAAE,KAF8B;AAGpC,SAAG,
|
|
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/"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { __styles, mergeClasses, shorthands } from '@griffel/react';
|
|
3
|
-
import { pendingAnimationDurationTokens, pendingAnimationEasingTokens } from '../../tab.constants';
|
|
4
3
|
import { useContextSelector } from '@fluentui/react-context-selector';
|
|
5
|
-
import { TabListContext } from '../TabList/TabListContext';
|
|
4
|
+
import { TabListContext } from '../TabList/TabListContext';
|
|
5
|
+
import { tokens } from '@fluentui/react-theme'; // eslint-disable-next-line @typescript-eslint/naming-convention
|
|
6
6
|
|
|
7
7
|
const tabIndicatorCssVars_unstable = {
|
|
8
8
|
offsetVar: '--fui-Tab__indicator--offset',
|
|
@@ -16,8 +16,8 @@ const useActiveIndicatorStyles = /*#__PURE__*/__styles({
|
|
|
16
16
|
},
|
|
17
17
|
"animated": {
|
|
18
18
|
"wbfbqe": "fopw4to",
|
|
19
|
-
"mafdb0": "
|
|
20
|
-
"Jgwf15": "
|
|
19
|
+
"mafdb0": "f1gswng4",
|
|
20
|
+
"Jgwf15": "fjw9r1k",
|
|
21
21
|
"Bh4j9q1": "f1cif4e6",
|
|
22
22
|
"Gk6w4d": "fa42t5a"
|
|
23
23
|
},
|
|
@@ -30,7 +30,7 @@ const useActiveIndicatorStyles = /*#__PURE__*/__styles({
|
|
|
30
30
|
"xn0juu": "fwvsziq"
|
|
31
31
|
}
|
|
32
32
|
}, {
|
|
33
|
-
"d": [".f1mtd64y{overflow-x:visible;}", ".f1y7q3j9{overflow-y:visible;}", ".fopw4to:after{transition-property:transform;}", ".
|
|
33
|
+
"d": [".f1mtd64y{overflow-x:visible;}", ".f1y7q3j9{overflow-y:visible;}", ".fopw4to:after{transition-property:transform;}", ".f1gswng4:after{transition-duration:var(--durationSlow);}", ".fjw9r1k:after{transition-timing-function:var(--curveDecelerateMax);}", ".f1g89gis:after{transform-origin:left;}", ".fcjnwxz:after{transform-origin:right;}", ".f7m34ad: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));}", ".fqfgdei:after{transform-origin:top;}", ".fwvsziq: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
34
|
"t": ["@media (prefers-reduced-motion: reduce){.f1cif4e6:after{transition-property:none;}}", "@media (prefers-reduced-motion: reduce){.fa42t5a:after{transition-duration:0.01ms;}}"]
|
|
35
35
|
});
|
|
36
36
|
|
|
@@ -59,7 +59,7 @@ const calculateTabRect = element => {
|
|
|
59
59
|
const getRegisteredTabRect = (registeredTabs, value) => {
|
|
60
60
|
var _a;
|
|
61
61
|
|
|
62
|
-
const element = value ? (_a = registeredTabs[JSON.stringify(value)]) === null || _a === void 0 ? void 0 : _a.ref.current : undefined;
|
|
62
|
+
const element = value !== undefined && value !== null ? (_a = registeredTabs[JSON.stringify(value)]) === null || _a === void 0 ? void 0 : _a.ref.current : undefined;
|
|
63
63
|
return element ? calculateTabRect(element) : undefined;
|
|
64
64
|
};
|
|
65
65
|
/**
|
|
@@ -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,
|
|
1
|
+
{"version":3,"sources":["components/Tab/useTabAnimatedIndicator.ts"],"names":[],"mappings":"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","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/"}
|