@fluentui/react-tabs 9.3.43 → 9.3.45
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 +103 -1
- package/CHANGELOG.md +32 -2
- package/lib/components/Tab/useTab.js +1 -2
- package/lib/components/Tab/useTab.js.map +1 -1
- package/lib/components/TabList/useTabList.js +1 -2
- package/lib/components/TabList/useTabList.js.map +1 -1
- package/lib-commonjs/components/Tab/useTab.js +1 -2
- package/lib-commonjs/components/Tab/useTab.js.map +1 -1
- package/lib-commonjs/components/TabList/useTabList.js +1 -2
- package/lib-commonjs/components/TabList/useTabList.js.map +1 -1
- package/package.json +7 -7
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,109 @@
|
|
|
2
2
|
"name": "@fluentui/react-tabs",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
5
|
+
"date": "Tue, 26 Sep 2023 17:44:17 GMT",
|
|
6
|
+
"tag": "@fluentui/react-tabs_v9.3.45",
|
|
7
|
+
"version": "9.3.45",
|
|
8
|
+
"comments": {
|
|
9
|
+
"patch": [
|
|
10
|
+
{
|
|
11
|
+
"author": "yuanboxue@microsoft.com",
|
|
12
|
+
"package": "@fluentui/react-tabs",
|
|
13
|
+
"commit": "05a23f6f5f331841c9ac9fb63764440c543f791d",
|
|
14
|
+
"comment": "chore: trigger manual version bump after broken release"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"author": "beachball",
|
|
18
|
+
"package": "@fluentui/react-tabs",
|
|
19
|
+
"comment": "Bump @fluentui/react-context-selector to v9.1.36",
|
|
20
|
+
"commit": "05a23f6f5f331841c9ac9fb63764440c543f791d"
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"author": "beachball",
|
|
24
|
+
"package": "@fluentui/react-tabs",
|
|
25
|
+
"comment": "Bump @fluentui/react-jsx-runtime to v9.0.12",
|
|
26
|
+
"commit": "05a23f6f5f331841c9ac9fb63764440c543f791d"
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
"author": "beachball",
|
|
30
|
+
"package": "@fluentui/react-tabs",
|
|
31
|
+
"comment": "Bump @fluentui/react-shared-contexts to v9.9.1",
|
|
32
|
+
"commit": "05a23f6f5f331841c9ac9fb63764440c543f791d"
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
"author": "beachball",
|
|
36
|
+
"package": "@fluentui/react-tabs",
|
|
37
|
+
"comment": "Bump @fluentui/react-tabster to v9.13.1",
|
|
38
|
+
"commit": "05a23f6f5f331841c9ac9fb63764440c543f791d"
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
"author": "beachball",
|
|
42
|
+
"package": "@fluentui/react-tabs",
|
|
43
|
+
"comment": "Bump @fluentui/react-theme to v9.1.14",
|
|
44
|
+
"commit": "05a23f6f5f331841c9ac9fb63764440c543f791d"
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
"author": "beachball",
|
|
48
|
+
"package": "@fluentui/react-tabs",
|
|
49
|
+
"comment": "Bump @fluentui/react-utilities to v9.13.5",
|
|
50
|
+
"commit": "05a23f6f5f331841c9ac9fb63764440c543f791d"
|
|
51
|
+
}
|
|
52
|
+
]
|
|
53
|
+
}
|
|
54
|
+
},
|
|
55
|
+
{
|
|
56
|
+
"date": "Tue, 26 Sep 2023 15:31:47 GMT",
|
|
57
|
+
"tag": "@fluentui/react-tabs_v9.3.44",
|
|
58
|
+
"version": "9.3.44",
|
|
59
|
+
"comments": {
|
|
60
|
+
"patch": [
|
|
61
|
+
{
|
|
62
|
+
"author": "martinhochel@microsoft.com",
|
|
63
|
+
"package": "@fluentui/react-tabs",
|
|
64
|
+
"commit": "e61473fa10195f6ebf2308205c1e72e91b711831",
|
|
65
|
+
"comment": "fix: bump swc core to mitigate transpilation memory leaks"
|
|
66
|
+
},
|
|
67
|
+
{
|
|
68
|
+
"author": "beachball",
|
|
69
|
+
"package": "@fluentui/react-tabs",
|
|
70
|
+
"comment": "Bump @fluentui/react-context-selector to v9.1.35",
|
|
71
|
+
"commit": "e16520437e10cd824ac254dd797e32762b5de72d"
|
|
72
|
+
},
|
|
73
|
+
{
|
|
74
|
+
"author": "beachball",
|
|
75
|
+
"package": "@fluentui/react-tabs",
|
|
76
|
+
"comment": "Bump @fluentui/react-jsx-runtime to v9.0.11",
|
|
77
|
+
"commit": "e16520437e10cd824ac254dd797e32762b5de72d"
|
|
78
|
+
},
|
|
79
|
+
{
|
|
80
|
+
"author": "beachball",
|
|
81
|
+
"package": "@fluentui/react-tabs",
|
|
82
|
+
"comment": "Bump @fluentui/react-shared-contexts to v9.9.0",
|
|
83
|
+
"commit": "e16520437e10cd824ac254dd797e32762b5de72d"
|
|
84
|
+
},
|
|
85
|
+
{
|
|
86
|
+
"author": "beachball",
|
|
87
|
+
"package": "@fluentui/react-tabs",
|
|
88
|
+
"comment": "Bump @fluentui/react-tabster to v9.13.0",
|
|
89
|
+
"commit": "e16520437e10cd824ac254dd797e32762b5de72d"
|
|
90
|
+
},
|
|
91
|
+
{
|
|
92
|
+
"author": "beachball",
|
|
93
|
+
"package": "@fluentui/react-tabs",
|
|
94
|
+
"comment": "Bump @fluentui/react-theme to v9.1.13",
|
|
95
|
+
"commit": "e16520437e10cd824ac254dd797e32762b5de72d"
|
|
96
|
+
},
|
|
97
|
+
{
|
|
98
|
+
"author": "beachball",
|
|
99
|
+
"package": "@fluentui/react-tabs",
|
|
100
|
+
"comment": "Bump @fluentui/react-utilities to v9.13.4",
|
|
101
|
+
"commit": "e16520437e10cd824ac254dd797e32762b5de72d"
|
|
102
|
+
}
|
|
103
|
+
]
|
|
104
|
+
}
|
|
105
|
+
},
|
|
106
|
+
{
|
|
107
|
+
"date": "Wed, 20 Sep 2023 17:47:43 GMT",
|
|
6
108
|
"tag": "@fluentui/react-tabs_v9.3.43",
|
|
7
109
|
"version": "9.3.43",
|
|
8
110
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,42 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-tabs
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Tue, 26 Sep 2023 17:44:17 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.3.45](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabs_v9.3.45)
|
|
8
|
+
|
|
9
|
+
Tue, 26 Sep 2023 17:44:17 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabs_v9.3.44..@fluentui/react-tabs_v9.3.45)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- chore: trigger manual version bump after broken release ([PR #29303](https://github.com/microsoft/fluentui/pull/29303) by yuanboxue@microsoft.com)
|
|
15
|
+
- Bump @fluentui/react-context-selector to v9.1.36 ([PR #29303](https://github.com/microsoft/fluentui/pull/29303) by beachball)
|
|
16
|
+
- Bump @fluentui/react-jsx-runtime to v9.0.12 ([PR #29303](https://github.com/microsoft/fluentui/pull/29303) by beachball)
|
|
17
|
+
- Bump @fluentui/react-shared-contexts to v9.9.1 ([PR #29303](https://github.com/microsoft/fluentui/pull/29303) by beachball)
|
|
18
|
+
- Bump @fluentui/react-tabster to v9.13.1 ([PR #29303](https://github.com/microsoft/fluentui/pull/29303) by beachball)
|
|
19
|
+
- Bump @fluentui/react-theme to v9.1.14 ([PR #29303](https://github.com/microsoft/fluentui/pull/29303) by beachball)
|
|
20
|
+
- Bump @fluentui/react-utilities to v9.13.5 ([PR #29303](https://github.com/microsoft/fluentui/pull/29303) by beachball)
|
|
21
|
+
|
|
22
|
+
## [9.3.44](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabs_v9.3.44)
|
|
23
|
+
|
|
24
|
+
Tue, 26 Sep 2023 15:31:47 GMT
|
|
25
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabs_v9.3.43..@fluentui/react-tabs_v9.3.44)
|
|
26
|
+
|
|
27
|
+
### Patches
|
|
28
|
+
|
|
29
|
+
- fix: bump swc core to mitigate transpilation memory leaks ([PR #29253](https://github.com/microsoft/fluentui/pull/29253) by martinhochel@microsoft.com)
|
|
30
|
+
- Bump @fluentui/react-context-selector to v9.1.35 ([PR #29300](https://github.com/microsoft/fluentui/pull/29300) by beachball)
|
|
31
|
+
- Bump @fluentui/react-jsx-runtime to v9.0.11 ([PR #29300](https://github.com/microsoft/fluentui/pull/29300) by beachball)
|
|
32
|
+
- Bump @fluentui/react-shared-contexts to v9.9.0 ([PR #29300](https://github.com/microsoft/fluentui/pull/29300) by beachball)
|
|
33
|
+
- Bump @fluentui/react-tabster to v9.13.0 ([PR #29300](https://github.com/microsoft/fluentui/pull/29300) by beachball)
|
|
34
|
+
- Bump @fluentui/react-theme to v9.1.13 ([PR #29300](https://github.com/microsoft/fluentui/pull/29300) by beachball)
|
|
35
|
+
- Bump @fluentui/react-utilities to v9.13.4 ([PR #29300](https://github.com/microsoft/fluentui/pull/29300) by beachball)
|
|
36
|
+
|
|
7
37
|
## [9.3.43](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabs_v9.3.43)
|
|
8
38
|
|
|
9
|
-
Wed, 20 Sep 2023 17:
|
|
39
|
+
Wed, 20 Sep 2023 17:47:43 GMT
|
|
10
40
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabs_v9.3.42..@fluentui/react-tabs_v9.3.43)
|
|
11
41
|
|
|
12
42
|
### Patches
|
|
@@ -10,7 +10,6 @@ import { useTabListContext_unstable } from '../TabList/TabListContext';
|
|
|
10
10
|
* @param props - props from this instance of Tab
|
|
11
11
|
* @param ref - reference to root HTMLElement of Tab
|
|
12
12
|
*/ export const useTab_unstable = (props, ref)=>{
|
|
13
|
-
var _iconSlot;
|
|
14
13
|
const { content, disabled: tabDisabled = false, icon, onClick, value } = props;
|
|
15
14
|
const appearance = useTabListContext_unstable((ctx)=>ctx.appearance);
|
|
16
15
|
const reserveSelectedTabSpace = useTabListContext_unstable((ctx)=>ctx.reserveSelectedTabSpace);
|
|
@@ -52,7 +51,7 @@ import { useTabListContext_unstable } from '../TabList/TabListContext';
|
|
|
52
51
|
},
|
|
53
52
|
elementType: 'span'
|
|
54
53
|
});
|
|
55
|
-
const iconOnly = Boolean((
|
|
54
|
+
const iconOnly = Boolean((iconSlot === null || iconSlot === void 0 ? void 0 : iconSlot.children) && !contentSlot.children);
|
|
56
55
|
return {
|
|
57
56
|
components: {
|
|
58
57
|
root: 'button',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useTab.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n getNativeElementProps,\n mergeCallbacks,\n useEventCallback,\n useMergedRefs,\n slot,\n} from '@fluentui/react-utilities';\nimport type { TabProps, TabState } from './Tab.types';\nimport { useTabListContext_unstable } from '../TabList/TabListContext';\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, onClick, value } = props;\n\n const appearance = useTabListContext_unstable(ctx => ctx.appearance);\n const reserveSelectedTabSpace = useTabListContext_unstable(ctx => ctx.reserveSelectedTabSpace);\n const listDisabled = useTabListContext_unstable(ctx => ctx.disabled);\n const selected = useTabListContext_unstable(ctx => ctx.selectedValue === value);\n const onRegister = useTabListContext_unstable(ctx => ctx.onRegister);\n const onUnregister = useTabListContext_unstable(ctx => ctx.onUnregister);\n const onSelect = useTabListContext_unstable(ctx => ctx.onSelect);\n const size = useTabListContext_unstable(ctx => ctx.size);\n const vertical = useTabListContext_unstable(ctx => !!ctx.vertical);\n const disabled = listDisabled || tabDisabled;\n\n const innerRef = React.useRef<HTMLElement>(null);\n const onTabClick = useEventCallback(mergeCallbacks(onClick, (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 iconSlot = slot.optional(icon, { elementType: 'span' });\n const contentSlot = slot.always(content, {\n defaultProps: { children: props.children },\n elementType: 'span',\n });\n const iconOnly = Boolean(iconSlot?.children && !contentSlot.children);\n return {\n components: { root: 'button', icon: 'span', content: 'span', contentReservedSpace: 'span' },\n root: slot.always(\n getNativeElementProps('button', {\n ref: useMergedRefs(ref, innerRef),\n role: 'tab',\n type: 'button',\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: onTabClick,\n }),\n { elementType: 'button' },\n ),\n icon: iconSlot,\n iconOnly,\n content: contentSlot,\n contentReservedSpace: slot.optional(content, {\n renderByDefault: !selected && !iconOnly && reserveSelectedTabSpace,\n defaultProps: { children: props.children },\n elementType: 'span',\n }),\n appearance,\n disabled,\n selected,\n size,\n value,\n vertical,\n };\n};\n"],"names":["React","getNativeElementProps","mergeCallbacks","useEventCallback","useMergedRefs","slot","useTabListContext_unstable","useTab_unstable","props","ref","
|
|
1
|
+
{"version":3,"sources":["useTab.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n getNativeElementProps,\n mergeCallbacks,\n useEventCallback,\n useMergedRefs,\n slot,\n} from '@fluentui/react-utilities';\nimport type { TabProps, TabState } from './Tab.types';\nimport { useTabListContext_unstable } from '../TabList/TabListContext';\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, onClick, value } = props;\n\n const appearance = useTabListContext_unstable(ctx => ctx.appearance);\n const reserveSelectedTabSpace = useTabListContext_unstable(ctx => ctx.reserveSelectedTabSpace);\n const listDisabled = useTabListContext_unstable(ctx => ctx.disabled);\n const selected = useTabListContext_unstable(ctx => ctx.selectedValue === value);\n const onRegister = useTabListContext_unstable(ctx => ctx.onRegister);\n const onUnregister = useTabListContext_unstable(ctx => ctx.onUnregister);\n const onSelect = useTabListContext_unstable(ctx => ctx.onSelect);\n const size = useTabListContext_unstable(ctx => ctx.size);\n const vertical = useTabListContext_unstable(ctx => !!ctx.vertical);\n const disabled = listDisabled || tabDisabled;\n\n const innerRef = React.useRef<HTMLElement>(null);\n const onTabClick = useEventCallback(mergeCallbacks(onClick, (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 iconSlot = slot.optional(icon, { elementType: 'span' });\n const contentSlot = slot.always(content, {\n defaultProps: { children: props.children },\n elementType: 'span',\n });\n const iconOnly = Boolean(iconSlot?.children && !contentSlot.children);\n return {\n components: { root: 'button', icon: 'span', content: 'span', contentReservedSpace: 'span' },\n root: slot.always(\n getNativeElementProps('button', {\n ref: useMergedRefs(ref, innerRef),\n role: 'tab',\n type: 'button',\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: onTabClick,\n }),\n { elementType: 'button' },\n ),\n icon: iconSlot,\n iconOnly,\n content: contentSlot,\n contentReservedSpace: slot.optional(content, {\n renderByDefault: !selected && !iconOnly && reserveSelectedTabSpace,\n defaultProps: { children: props.children },\n elementType: 'span',\n }),\n appearance,\n disabled,\n selected,\n size,\n value,\n vertical,\n };\n};\n"],"names":["React","getNativeElementProps","mergeCallbacks","useEventCallback","useMergedRefs","slot","useTabListContext_unstable","useTab_unstable","props","ref","content","disabled","tabDisabled","icon","onClick","value","appearance","ctx","reserveSelectedTabSpace","listDisabled","selected","selectedValue","onRegister","onUnregister","onSelect","size","vertical","innerRef","useRef","onTabClick","event","useEffect","iconSlot","optional","elementType","contentSlot","always","defaultProps","children","iconOnly","Boolean","components","root","contentReservedSpace","role","type","undefined","renderByDefault"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,qBAAqB,EACrBC,cAAc,EACdC,gBAAgB,EAChBC,aAAa,EACbC,IAAI,QACC,4BAA4B;AAEnC,SAASC,0BAA0B,QAAQ,4BAA4B;AAGvE;;;;;;;;CAQC,GACD,OAAO,MAAMC,kBAAkB,CAACC,OAAiBC;IAC/C,MAAM,EAAEC,OAAO,EAAEC,UAAUC,cAAc,KAAK,EAAEC,IAAI,EAAEC,OAAO,EAAEC,KAAK,EAAE,GAAGP;IAEzE,MAAMQ,aAAaV,2BAA2BW,CAAAA,MAAOA,IAAID,UAAU;IACnE,MAAME,0BAA0BZ,2BAA2BW,CAAAA,MAAOA,IAAIC,uBAAuB;IAC7F,MAAMC,eAAeb,2BAA2BW,CAAAA,MAAOA,IAAIN,QAAQ;IACnE,MAAMS,WAAWd,2BAA2BW,CAAAA,MAAOA,IAAII,aAAa,KAAKN;IACzE,MAAMO,aAAahB,2BAA2BW,CAAAA,MAAOA,IAAIK,UAAU;IACnE,MAAMC,eAAejB,2BAA2BW,CAAAA,MAAOA,IAAIM,YAAY;IACvE,MAAMC,WAAWlB,2BAA2BW,CAAAA,MAAOA,IAAIO,QAAQ;IAC/D,MAAMC,OAAOnB,2BAA2BW,CAAAA,MAAOA,IAAIQ,IAAI;IACvD,MAAMC,WAAWpB,2BAA2BW,CAAAA,MAAO,CAAC,CAACA,IAAIS,QAAQ;IACjE,MAAMf,WAAWQ,gBAAgBP;IAEjC,MAAMe,WAAW3B,MAAM4B,MAAM,CAAc;IAC3C,MAAMC,aAAa1B,iBAAiBD,eAAeY,SAAS,CAACgB,QAA0BN,SAASM,OAAO;YAAEf;QAAM;IAE/Gf,MAAM+B,SAAS,CAAC;QACdT,WAAW;YACTP;YACAN,KAAKkB;QACP;QAEA,OAAO;YACLJ,aAAa;gBAAER;gBAAON,KAAKkB;YAAS;QACtC;IACF,GAAG;QAACL;QAAYC;QAAcI;QAAUZ;KAAM;IAE9C,MAAMiB,WAAW3B,KAAK4B,QAAQ,CAACpB,MAAM;QAAEqB,aAAa;IAAO;IAC3D,MAAMC,cAAc9B,KAAK+B,MAAM,CAAC1B,SAAS;QACvC2B,cAAc;YAAEC,UAAU9B,MAAM8B,QAAQ;QAAC;QACzCJ,aAAa;IACf;IACA,MAAMK,WAAWC,QAAQR,CAAAA,qBAAAA,+BAAAA,SAAUM,QAAQ,KAAI,CAACH,YAAYG,QAAQ;IACpE,OAAO;QACLG,YAAY;YAAEC,MAAM;YAAU7B,MAAM;YAAQH,SAAS;YAAQiC,sBAAsB;QAAO;QAC1FD,MAAMrC,KAAK+B,MAAM,CACfnC,sBAAsB,UAAU;YAC9BQ,KAAKL,cAAcK,KAAKkB;YACxBiB,MAAM;YACNC,MAAM;YACN,yDAAyD;YACzD,iEAAiE;YACjE,iBAAiBlC,WAAWmC,YAAY,CAAC,EAAE1B,SAAS,CAAC;YACrD,GAAGZ,KAAK;YACRG;YACAG,SAASe;QACX,IACA;YAAEK,aAAa;QAAS;QAE1BrB,MAAMmB;QACNO;QACA7B,SAASyB;QACTQ,sBAAsBtC,KAAK4B,QAAQ,CAACvB,SAAS;YAC3CqC,iBAAiB,CAAC3B,YAAY,CAACmB,YAAYrB;YAC3CmB,cAAc;gBAAEC,UAAU9B,MAAM8B,QAAQ;YAAC;YACzCJ,aAAa;QACf;QACAlB;QACAL;QACAS;QACAK;QACAV;QACAW;IACF;AACF,EAAE"}
|
|
@@ -35,9 +35,8 @@ import { getNativeElementProps, useControllableState, useEventCallback, useMerge
|
|
|
35
35
|
selectedValue
|
|
36
36
|
]);
|
|
37
37
|
const onSelect = useEventCallback((event, data)=>{
|
|
38
|
-
var _onTabSelect;
|
|
39
38
|
setSelectedValue(data.value);
|
|
40
|
-
|
|
39
|
+
onTabSelect === null || onTabSelect === void 0 ? void 0 : onTabSelect(event, data);
|
|
41
40
|
});
|
|
42
41
|
const registeredTabs = React.useRef({});
|
|
43
42
|
const onRegister = useEventCallback((data)=>{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useTabList.ts"],"sourcesContent":["import * as React from 'react';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport {\n getNativeElementProps,\n useControllableState,\n useEventCallback,\n useMergedRefs,\n slot,\n} from '@fluentui/react-utilities';\nimport type { TabRegisterData, SelectTabData, SelectTabEvent, TabListProps, TabListState } from './TabList.types';\nimport { TabValue } from '../Tab/Tab.types';\n\n/**\n * Create the state required to render TabList.\n *\n * The returned state can be modified with hooks such as useTabListStyles_unstable,\n * before being passed to renderTabList_unstable.\n *\n * @param props - props from this instance of TabList\n * @param ref - reference to root HTMLElement of TabList\n */\nexport const useTabList_unstable = (props: TabListProps, ref: React.Ref<HTMLElement>): TabListState => {\n const {\n appearance = 'transparent',\n reserveSelectedTabSpace = true,\n disabled = false,\n onTabSelect,\n size = 'medium',\n vertical = false,\n } = props;\n\n const innerRef = React.useRef<HTMLElement>(null);\n\n const focusAttributes = useArrowNavigationGroup({\n circular: true,\n axis: vertical ? 'vertical' : 'horizontal',\n memorizeCurrent: true,\n });\n\n const [selectedValue, setSelectedValue] = useControllableState({\n state: props.selectedValue,\n defaultState: props.defaultSelectedValue,\n initialState: undefined,\n });\n\n // considered usePrevious, but it is sensitive to re-renders\n // this could cause the previous to move to current in the case where the tab list re-renders.\n // these refs avoid getRegisteredTabs changing when selectedValue changes and causing\n // renders for tabs that have not changed.\n const currentSelectedValue = React.useRef<TabValue | undefined>(undefined);\n const previousSelectedValue = React.useRef<TabValue | undefined>(undefined);\n\n React.useEffect(() => {\n previousSelectedValue.current = currentSelectedValue.current;\n currentSelectedValue.current = selectedValue;\n }, [selectedValue]);\n\n const onSelect = useEventCallback((event: SelectTabEvent, data: SelectTabData) => {\n setSelectedValue(data.value);\n onTabSelect?.(event, data);\n });\n\n const registeredTabs = React.useRef<Record<string, TabRegisterData>>({});\n\n const onRegister = useEventCallback((data: TabRegisterData) => {\n registeredTabs.current[JSON.stringify(data.value)] = data;\n });\n\n const onUnregister = useEventCallback((data: TabRegisterData) => {\n delete registeredTabs.current[JSON.stringify(data.value)];\n });\n\n const getRegisteredTabs = React.useCallback(() => {\n return {\n selectedValue: currentSelectedValue.current,\n previousSelectedValue: previousSelectedValue.current,\n registeredTabs: registeredTabs.current,\n };\n }, []);\n\n return {\n components: {\n root: 'div',\n },\n root: slot.always(\n getNativeElementProps('div', {\n ref: useMergedRefs(ref, innerRef),\n role: 'tablist',\n 'aria-orientation': vertical ? 'vertical' : 'horizontal',\n ...focusAttributes,\n ...props,\n }),\n { elementType: 'div' },\n ),\n appearance,\n reserveSelectedTabSpace,\n disabled,\n selectedValue,\n size,\n vertical,\n onRegister,\n onUnregister,\n onSelect,\n getRegisteredTabs,\n };\n};\n"],"names":["React","useArrowNavigationGroup","getNativeElementProps","useControllableState","useEventCallback","useMergedRefs","slot","useTabList_unstable","props","ref","appearance","reserveSelectedTabSpace","disabled","onTabSelect","size","vertical","innerRef","useRef","focusAttributes","circular","axis","memorizeCurrent","selectedValue","setSelectedValue","state","defaultState","defaultSelectedValue","initialState","undefined","currentSelectedValue","previousSelectedValue","useEffect","current","onSelect","event","data","value","registeredTabs","onRegister","JSON","stringify","onUnregister","getRegisteredTabs","useCallback","components","root","always","role","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,uBAAuB,QAAQ,0BAA0B;AAClE,SACEC,qBAAqB,EACrBC,oBAAoB,EACpBC,gBAAgB,EAChBC,aAAa,EACbC,IAAI,QACC,4BAA4B;AAInC;;;;;;;;CAQC,GACD,OAAO,MAAMC,sBAAsB,CAACC,OAAqBC;IACvD,MAAM,EACJC,aAAa,aAAa,EAC1BC,0BAA0B,IAAI,EAC9BC,WAAW,KAAK,EAChBC,WAAW,EACXC,OAAO,QAAQ,EACfC,WAAW,KAAK,EACjB,GAAGP;IAEJ,MAAMQ,WAAWhB,MAAMiB,MAAM,CAAc;IAE3C,MAAMC,kBAAkBjB,wBAAwB;QAC9CkB,UAAU;QACVC,MAAML,WAAW,aAAa;QAC9BM,iBAAiB;IACnB;IAEA,MAAM,CAACC,eAAeC,iBAAiB,GAAGpB,qBAAqB;QAC7DqB,OAAOhB,MAAMc,aAAa;QAC1BG,cAAcjB,MAAMkB,oBAAoB;QACxCC,cAAcC;IAChB;IAEA,4DAA4D;IAC5D,8FAA8F;IAC9F,qFAAqF;IACrF,0CAA0C;IAC1C,MAAMC,uBAAuB7B,MAAMiB,MAAM,CAAuBW;IAChE,MAAME,wBAAwB9B,MAAMiB,MAAM,CAAuBW;IAEjE5B,MAAM+B,SAAS,CAAC;QACdD,sBAAsBE,OAAO,GAAGH,qBAAqBG,OAAO;QAC5DH,qBAAqBG,OAAO,GAAGV;IACjC,GAAG;QAACA;KAAc;IAElB,MAAMW,WAAW7B,iBAAiB,CAAC8B,OAAuBC;
|
|
1
|
+
{"version":3,"sources":["useTabList.ts"],"sourcesContent":["import * as React from 'react';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport {\n getNativeElementProps,\n useControllableState,\n useEventCallback,\n useMergedRefs,\n slot,\n} from '@fluentui/react-utilities';\nimport type { TabRegisterData, SelectTabData, SelectTabEvent, TabListProps, TabListState } from './TabList.types';\nimport { TabValue } from '../Tab/Tab.types';\n\n/**\n * Create the state required to render TabList.\n *\n * The returned state can be modified with hooks such as useTabListStyles_unstable,\n * before being passed to renderTabList_unstable.\n *\n * @param props - props from this instance of TabList\n * @param ref - reference to root HTMLElement of TabList\n */\nexport const useTabList_unstable = (props: TabListProps, ref: React.Ref<HTMLElement>): TabListState => {\n const {\n appearance = 'transparent',\n reserveSelectedTabSpace = true,\n disabled = false,\n onTabSelect,\n size = 'medium',\n vertical = false,\n } = props;\n\n const innerRef = React.useRef<HTMLElement>(null);\n\n const focusAttributes = useArrowNavigationGroup({\n circular: true,\n axis: vertical ? 'vertical' : 'horizontal',\n memorizeCurrent: true,\n });\n\n const [selectedValue, setSelectedValue] = useControllableState({\n state: props.selectedValue,\n defaultState: props.defaultSelectedValue,\n initialState: undefined,\n });\n\n // considered usePrevious, but it is sensitive to re-renders\n // this could cause the previous to move to current in the case where the tab list re-renders.\n // these refs avoid getRegisteredTabs changing when selectedValue changes and causing\n // renders for tabs that have not changed.\n const currentSelectedValue = React.useRef<TabValue | undefined>(undefined);\n const previousSelectedValue = React.useRef<TabValue | undefined>(undefined);\n\n React.useEffect(() => {\n previousSelectedValue.current = currentSelectedValue.current;\n currentSelectedValue.current = selectedValue;\n }, [selectedValue]);\n\n const onSelect = useEventCallback((event: SelectTabEvent, data: SelectTabData) => {\n setSelectedValue(data.value);\n onTabSelect?.(event, data);\n });\n\n const registeredTabs = React.useRef<Record<string, TabRegisterData>>({});\n\n const onRegister = useEventCallback((data: TabRegisterData) => {\n registeredTabs.current[JSON.stringify(data.value)] = data;\n });\n\n const onUnregister = useEventCallback((data: TabRegisterData) => {\n delete registeredTabs.current[JSON.stringify(data.value)];\n });\n\n const getRegisteredTabs = React.useCallback(() => {\n return {\n selectedValue: currentSelectedValue.current,\n previousSelectedValue: previousSelectedValue.current,\n registeredTabs: registeredTabs.current,\n };\n }, []);\n\n return {\n components: {\n root: 'div',\n },\n root: slot.always(\n getNativeElementProps('div', {\n ref: useMergedRefs(ref, innerRef),\n role: 'tablist',\n 'aria-orientation': vertical ? 'vertical' : 'horizontal',\n ...focusAttributes,\n ...props,\n }),\n { elementType: 'div' },\n ),\n appearance,\n reserveSelectedTabSpace,\n disabled,\n selectedValue,\n size,\n vertical,\n onRegister,\n onUnregister,\n onSelect,\n getRegisteredTabs,\n };\n};\n"],"names":["React","useArrowNavigationGroup","getNativeElementProps","useControllableState","useEventCallback","useMergedRefs","slot","useTabList_unstable","props","ref","appearance","reserveSelectedTabSpace","disabled","onTabSelect","size","vertical","innerRef","useRef","focusAttributes","circular","axis","memorizeCurrent","selectedValue","setSelectedValue","state","defaultState","defaultSelectedValue","initialState","undefined","currentSelectedValue","previousSelectedValue","useEffect","current","onSelect","event","data","value","registeredTabs","onRegister","JSON","stringify","onUnregister","getRegisteredTabs","useCallback","components","root","always","role","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,uBAAuB,QAAQ,0BAA0B;AAClE,SACEC,qBAAqB,EACrBC,oBAAoB,EACpBC,gBAAgB,EAChBC,aAAa,EACbC,IAAI,QACC,4BAA4B;AAInC;;;;;;;;CAQC,GACD,OAAO,MAAMC,sBAAsB,CAACC,OAAqBC;IACvD,MAAM,EACJC,aAAa,aAAa,EAC1BC,0BAA0B,IAAI,EAC9BC,WAAW,KAAK,EAChBC,WAAW,EACXC,OAAO,QAAQ,EACfC,WAAW,KAAK,EACjB,GAAGP;IAEJ,MAAMQ,WAAWhB,MAAMiB,MAAM,CAAc;IAE3C,MAAMC,kBAAkBjB,wBAAwB;QAC9CkB,UAAU;QACVC,MAAML,WAAW,aAAa;QAC9BM,iBAAiB;IACnB;IAEA,MAAM,CAACC,eAAeC,iBAAiB,GAAGpB,qBAAqB;QAC7DqB,OAAOhB,MAAMc,aAAa;QAC1BG,cAAcjB,MAAMkB,oBAAoB;QACxCC,cAAcC;IAChB;IAEA,4DAA4D;IAC5D,8FAA8F;IAC9F,qFAAqF;IACrF,0CAA0C;IAC1C,MAAMC,uBAAuB7B,MAAMiB,MAAM,CAAuBW;IAChE,MAAME,wBAAwB9B,MAAMiB,MAAM,CAAuBW;IAEjE5B,MAAM+B,SAAS,CAAC;QACdD,sBAAsBE,OAAO,GAAGH,qBAAqBG,OAAO;QAC5DH,qBAAqBG,OAAO,GAAGV;IACjC,GAAG;QAACA;KAAc;IAElB,MAAMW,WAAW7B,iBAAiB,CAAC8B,OAAuBC;QACxDZ,iBAAiBY,KAAKC,KAAK;QAC3BvB,wBAAAA,kCAAAA,YAAcqB,OAAOC;IACvB;IAEA,MAAME,iBAAiBrC,MAAMiB,MAAM,CAAkC,CAAC;IAEtE,MAAMqB,aAAalC,iBAAiB,CAAC+B;QACnCE,eAAeL,OAAO,CAACO,KAAKC,SAAS,CAACL,KAAKC,KAAK,EAAE,GAAGD;IACvD;IAEA,MAAMM,eAAerC,iBAAiB,CAAC+B;QACrC,OAAOE,eAAeL,OAAO,CAACO,KAAKC,SAAS,CAACL,KAAKC,KAAK,EAAE;IAC3D;IAEA,MAAMM,oBAAoB1C,MAAM2C,WAAW,CAAC;QAC1C,OAAO;YACLrB,eAAeO,qBAAqBG,OAAO;YAC3CF,uBAAuBA,sBAAsBE,OAAO;YACpDK,gBAAgBA,eAAeL,OAAO;QACxC;IACF,GAAG,EAAE;IAEL,OAAO;QACLY,YAAY;YACVC,MAAM;QACR;QACAA,MAAMvC,KAAKwC,MAAM,CACf5C,sBAAsB,OAAO;YAC3BO,KAAKJ,cAAcI,KAAKO;YACxB+B,MAAM;YACN,oBAAoBhC,WAAW,aAAa;YAC5C,GAAGG,eAAe;YAClB,GAAGV,KAAK;QACV,IACA;YAAEwC,aAAa;QAAM;QAEvBtC;QACAC;QACAC;QACAU;QACAR;QACAC;QACAuB;QACAG;QACAR;QACAS;IACF;AACF,EAAE"}
|
|
@@ -13,7 +13,6 @@ const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
|
13
13
|
const _reactutilities = require("@fluentui/react-utilities");
|
|
14
14
|
const _TabListContext = require("../TabList/TabListContext");
|
|
15
15
|
const useTab_unstable = (props, ref)=>{
|
|
16
|
-
var _iconSlot;
|
|
17
16
|
const { content, disabled: tabDisabled = false, icon, onClick, value } = props;
|
|
18
17
|
const appearance = (0, _TabListContext.useTabListContext_unstable)((ctx)=>ctx.appearance);
|
|
19
18
|
const reserveSelectedTabSpace = (0, _TabListContext.useTabListContext_unstable)((ctx)=>ctx.reserveSelectedTabSpace);
|
|
@@ -55,7 +54,7 @@ const useTab_unstable = (props, ref)=>{
|
|
|
55
54
|
},
|
|
56
55
|
elementType: 'span'
|
|
57
56
|
});
|
|
58
|
-
const iconOnly = Boolean((
|
|
57
|
+
const iconOnly = Boolean((iconSlot === null || iconSlot === void 0 ? void 0 : iconSlot.children) && !contentSlot.children);
|
|
59
58
|
return {
|
|
60
59
|
components: {
|
|
61
60
|
root: 'button',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useTab.js"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, mergeCallbacks, useEventCallback, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useTabListContext_unstable } from '../TabList/TabListContext';\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 */ export const useTab_unstable = (props, ref)=>{\n
|
|
1
|
+
{"version":3,"sources":["useTab.js"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, mergeCallbacks, useEventCallback, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useTabListContext_unstable } from '../TabList/TabListContext';\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 */ export const useTab_unstable = (props, ref)=>{\n const { content, disabled: tabDisabled = false, icon, onClick, value } = props;\n const appearance = useTabListContext_unstable((ctx)=>ctx.appearance);\n const reserveSelectedTabSpace = useTabListContext_unstable((ctx)=>ctx.reserveSelectedTabSpace);\n const listDisabled = useTabListContext_unstable((ctx)=>ctx.disabled);\n const selected = useTabListContext_unstable((ctx)=>ctx.selectedValue === value);\n const onRegister = useTabListContext_unstable((ctx)=>ctx.onRegister);\n const onUnregister = useTabListContext_unstable((ctx)=>ctx.onUnregister);\n const onSelect = useTabListContext_unstable((ctx)=>ctx.onSelect);\n const size = useTabListContext_unstable((ctx)=>ctx.size);\n const vertical = useTabListContext_unstable((ctx)=>!!ctx.vertical);\n const disabled = listDisabled || tabDisabled;\n const innerRef = React.useRef(null);\n const onTabClick = useEventCallback(mergeCallbacks(onClick, (event)=>onSelect(event, {\n value\n })));\n React.useEffect(()=>{\n onRegister({\n value,\n ref: innerRef\n });\n return ()=>{\n onUnregister({\n value,\n ref: innerRef\n });\n };\n }, [\n onRegister,\n onUnregister,\n innerRef,\n value\n ]);\n const iconSlot = slot.optional(icon, {\n elementType: 'span'\n });\n const contentSlot = slot.always(content, {\n defaultProps: {\n children: props.children\n },\n elementType: 'span'\n });\n const iconOnly = Boolean((iconSlot === null || iconSlot === void 0 ? void 0 : iconSlot.children) && !contentSlot.children);\n return {\n components: {\n root: 'button',\n icon: 'span',\n content: 'span',\n contentReservedSpace: 'span'\n },\n root: slot.always(getNativeElementProps('button', {\n ref: useMergedRefs(ref, innerRef),\n role: 'tab',\n type: 'button',\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: onTabClick\n }), {\n elementType: 'button'\n }),\n icon: iconSlot,\n iconOnly,\n content: contentSlot,\n contentReservedSpace: slot.optional(content, {\n renderByDefault: !selected && !iconOnly && reserveSelectedTabSpace,\n defaultProps: {\n children: props.children\n },\n elementType: 'span'\n }),\n appearance,\n disabled,\n selected,\n size,\n value,\n vertical\n };\n};\n"],"names":["useTab_unstable","props","ref","content","disabled","tabDisabled","icon","onClick","value","appearance","useTabListContext_unstable","ctx","reserveSelectedTabSpace","listDisabled","selected","selectedValue","onRegister","onUnregister","onSelect","size","vertical","innerRef","React","useRef","onTabClick","useEventCallback","mergeCallbacks","event","useEffect","iconSlot","slot","optional","elementType","contentSlot","always","defaultProps","children","iconOnly","Boolean","components","root","contentReservedSpace","getNativeElementProps","useMergedRefs","role","type","undefined","renderByDefault"],"mappings":";;;;+BAWiBA;;;eAAAA;;;;iEAXM;gCACsE;gCAClD;AAShC,MAAMA,kBAAkB,CAACC,OAAOC;IACvC,MAAM,EAAEC,OAAO,EAAEC,UAAUC,cAAc,KAAK,EAAEC,IAAI,EAAEC,OAAO,EAAEC,KAAK,EAAE,GAAGP;IACzE,MAAMQ,aAAaC,IAAAA,0CAA0B,EAAC,CAACC,MAAMA,IAAIF,UAAU;IACnE,MAAMG,0BAA0BF,IAAAA,0CAA0B,EAAC,CAACC,MAAMA,IAAIC,uBAAuB;IAC7F,MAAMC,eAAeH,IAAAA,0CAA0B,EAAC,CAACC,MAAMA,IAAIP,QAAQ;IACnE,MAAMU,WAAWJ,IAAAA,0CAA0B,EAAC,CAACC,MAAMA,IAAII,aAAa,KAAKP;IACzE,MAAMQ,aAAaN,IAAAA,0CAA0B,EAAC,CAACC,MAAMA,IAAIK,UAAU;IACnE,MAAMC,eAAeP,IAAAA,0CAA0B,EAAC,CAACC,MAAMA,IAAIM,YAAY;IACvE,MAAMC,WAAWR,IAAAA,0CAA0B,EAAC,CAACC,MAAMA,IAAIO,QAAQ;IAC/D,MAAMC,OAAOT,IAAAA,0CAA0B,EAAC,CAACC,MAAMA,IAAIQ,IAAI;IACvD,MAAMC,WAAWV,IAAAA,0CAA0B,EAAC,CAACC,MAAM,CAAC,CAACA,IAAIS,QAAQ;IACjE,MAAMhB,WAAWS,gBAAgBR;IACjC,MAAMgB,WAAWC,OAAMC,MAAM,CAAC;IAC9B,MAAMC,aAAaC,IAAAA,gCAAgB,EAACC,IAAAA,8BAAc,EAACnB,SAAS,CAACoB,QAAQT,SAASS,OAAO;YAC7EnB;QACJ;IACJc,OAAMM,SAAS,CAAC;QACZZ,WAAW;YACPR;YACAN,KAAKmB;QACT;QACA,OAAO;YACHJ,aAAa;gBACTT;gBACAN,KAAKmB;YACT;QACJ;IACJ,GAAG;QACCL;QACAC;QACAI;QACAb;KACH;IACD,MAAMqB,WAAWC,oBAAI,CAACC,QAAQ,CAACzB,MAAM;QACjC0B,aAAa;IACjB;IACA,MAAMC,cAAcH,oBAAI,CAACI,MAAM,CAAC/B,SAAS;QACrCgC,cAAc;YACVC,UAAUnC,MAAMmC,QAAQ;QAC5B;QACAJ,aAAa;IACjB;IACA,MAAMK,WAAWC,QAAQ,AAACT,CAAAA,aAAa,QAAQA,aAAa,KAAK,IAAI,KAAK,IAAIA,SAASO,QAAQ,AAAD,KAAM,CAACH,YAAYG,QAAQ;IACzH,OAAO;QACHG,YAAY;YACRC,MAAM;YACNlC,MAAM;YACNH,SAAS;YACTsC,sBAAsB;QAC1B;QACAD,MAAMV,oBAAI,CAACI,MAAM,CAACQ,IAAAA,qCAAqB,EAAC,UAAU;YAC9CxC,KAAKyC,IAAAA,6BAAa,EAACzC,KAAKmB;YACxBuB,MAAM;YACNC,MAAM;YACN,yDAAyD;YACzD,iEAAiE;YACjE,iBAAiBzC,WAAW0C,YAAY,CAAC,EAAEhC,SAAS,CAAC;YACrD,GAAGb,KAAK;YACRG;YACAG,SAASiB;QACb,IAAI;YACAQ,aAAa;QACjB;QACA1B,MAAMuB;QACNQ;QACAlC,SAAS8B;QACTQ,sBAAsBX,oBAAI,CAACC,QAAQ,CAAC5B,SAAS;YACzC4C,iBAAiB,CAACjC,YAAY,CAACuB,YAAYzB;YAC3CuB,cAAc;gBACVC,UAAUnC,MAAMmC,QAAQ;YAC5B;YACAJ,aAAa;QACjB;QACAvB;QACAL;QACAU;QACAK;QACAX;QACAY;IACJ;AACJ"}
|
|
@@ -38,9 +38,8 @@ const useTabList_unstable = (props, ref)=>{
|
|
|
38
38
|
selectedValue
|
|
39
39
|
]);
|
|
40
40
|
const onSelect = (0, _reactutilities.useEventCallback)((event, data)=>{
|
|
41
|
-
var _onTabSelect;
|
|
42
41
|
setSelectedValue(data.value);
|
|
43
|
-
|
|
42
|
+
onTabSelect === null || onTabSelect === void 0 ? void 0 : onTabSelect(event, data);
|
|
44
43
|
});
|
|
45
44
|
const registeredTabs = _react.useRef({});
|
|
46
45
|
const onRegister = (0, _reactutilities.useEventCallback)((data)=>{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useTabList.js"],"sourcesContent":["import * as React from 'react';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport { getNativeElementProps, useControllableState, useEventCallback, useMergedRefs, slot } from '@fluentui/react-utilities';\n/**\n * Create the state required to render TabList.\n *\n * The returned state can be modified with hooks such as useTabListStyles_unstable,\n * before being passed to renderTabList_unstable.\n *\n * @param props - props from this instance of TabList\n * @param ref - reference to root HTMLElement of TabList\n */ export const useTabList_unstable = (props, ref)=>{\n const { appearance = 'transparent', reserveSelectedTabSpace = true, disabled = false, onTabSelect, size = 'medium', vertical = false } = props;\n const innerRef = React.useRef(null);\n const focusAttributes = useArrowNavigationGroup({\n circular: true,\n axis: vertical ? 'vertical' : 'horizontal',\n memorizeCurrent: true\n });\n const [selectedValue, setSelectedValue] = useControllableState({\n state: props.selectedValue,\n defaultState: props.defaultSelectedValue,\n initialState: undefined\n });\n // considered usePrevious, but it is sensitive to re-renders\n // this could cause the previous to move to current in the case where the tab list re-renders.\n // these refs avoid getRegisteredTabs changing when selectedValue changes and causing\n // renders for tabs that have not changed.\n const currentSelectedValue = React.useRef(undefined);\n const previousSelectedValue = React.useRef(undefined);\n React.useEffect(()=>{\n previousSelectedValue.current = currentSelectedValue.current;\n currentSelectedValue.current = selectedValue;\n }, [\n selectedValue\n ]);\n const onSelect = useEventCallback((event, data)=>{\n
|
|
1
|
+
{"version":3,"sources":["useTabList.js"],"sourcesContent":["import * as React from 'react';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport { getNativeElementProps, useControllableState, useEventCallback, useMergedRefs, slot } from '@fluentui/react-utilities';\n/**\n * Create the state required to render TabList.\n *\n * The returned state can be modified with hooks such as useTabListStyles_unstable,\n * before being passed to renderTabList_unstable.\n *\n * @param props - props from this instance of TabList\n * @param ref - reference to root HTMLElement of TabList\n */ export const useTabList_unstable = (props, ref)=>{\n const { appearance = 'transparent', reserveSelectedTabSpace = true, disabled = false, onTabSelect, size = 'medium', vertical = false } = props;\n const innerRef = React.useRef(null);\n const focusAttributes = useArrowNavigationGroup({\n circular: true,\n axis: vertical ? 'vertical' : 'horizontal',\n memorizeCurrent: true\n });\n const [selectedValue, setSelectedValue] = useControllableState({\n state: props.selectedValue,\n defaultState: props.defaultSelectedValue,\n initialState: undefined\n });\n // considered usePrevious, but it is sensitive to re-renders\n // this could cause the previous to move to current in the case where the tab list re-renders.\n // these refs avoid getRegisteredTabs changing when selectedValue changes and causing\n // renders for tabs that have not changed.\n const currentSelectedValue = React.useRef(undefined);\n const previousSelectedValue = React.useRef(undefined);\n React.useEffect(()=>{\n previousSelectedValue.current = currentSelectedValue.current;\n currentSelectedValue.current = selectedValue;\n }, [\n selectedValue\n ]);\n const onSelect = useEventCallback((event, data)=>{\n setSelectedValue(data.value);\n onTabSelect === null || onTabSelect === void 0 ? void 0 : onTabSelect(event, data);\n });\n const registeredTabs = React.useRef({});\n const onRegister = useEventCallback((data)=>{\n registeredTabs.current[JSON.stringify(data.value)] = data;\n });\n const onUnregister = useEventCallback((data)=>{\n delete registeredTabs.current[JSON.stringify(data.value)];\n });\n const getRegisteredTabs = React.useCallback(()=>{\n return {\n selectedValue: currentSelectedValue.current,\n previousSelectedValue: previousSelectedValue.current,\n registeredTabs: registeredTabs.current\n };\n }, []);\n return {\n components: {\n root: 'div'\n },\n root: slot.always(getNativeElementProps('div', {\n ref: useMergedRefs(ref, innerRef),\n role: 'tablist',\n 'aria-orientation': vertical ? 'vertical' : 'horizontal',\n ...focusAttributes,\n ...props\n }), {\n elementType: 'div'\n }),\n appearance,\n reserveSelectedTabSpace,\n disabled,\n selectedValue,\n size,\n vertical,\n onRegister,\n onUnregister,\n onSelect,\n getRegisteredTabs\n };\n};\n"],"names":["useTabList_unstable","props","ref","appearance","reserveSelectedTabSpace","disabled","onTabSelect","size","vertical","innerRef","React","useRef","focusAttributes","useArrowNavigationGroup","circular","axis","memorizeCurrent","selectedValue","setSelectedValue","useControllableState","state","defaultState","defaultSelectedValue","initialState","undefined","currentSelectedValue","previousSelectedValue","useEffect","current","onSelect","useEventCallback","event","data","value","registeredTabs","onRegister","JSON","stringify","onUnregister","getRegisteredTabs","useCallback","components","root","slot","always","getNativeElementProps","useMergedRefs","role","elementType"],"mappings":";;;;+BAWiBA;;;eAAAA;;;;iEAXM;8BACiB;gCAC2D;AASxF,MAAMA,sBAAsB,CAACC,OAAOC;IAC3C,MAAM,EAAEC,aAAa,aAAa,EAAEC,0BAA0B,IAAI,EAAEC,WAAW,KAAK,EAAEC,WAAW,EAAEC,OAAO,QAAQ,EAAEC,WAAW,KAAK,EAAE,GAAGP;IACzI,MAAMQ,WAAWC,OAAMC,MAAM,CAAC;IAC9B,MAAMC,kBAAkBC,IAAAA,qCAAuB,EAAC;QAC5CC,UAAU;QACVC,MAAMP,WAAW,aAAa;QAC9BQ,iBAAiB;IACrB;IACA,MAAM,CAACC,eAAeC,iBAAiB,GAAGC,IAAAA,oCAAoB,EAAC;QAC3DC,OAAOnB,MAAMgB,aAAa;QAC1BI,cAAcpB,MAAMqB,oBAAoB;QACxCC,cAAcC;IAClB;IACA,4DAA4D;IAC5D,8FAA8F;IAC9F,qFAAqF;IACrF,0CAA0C;IAC1C,MAAMC,uBAAuBf,OAAMC,MAAM,CAACa;IAC1C,MAAME,wBAAwBhB,OAAMC,MAAM,CAACa;IAC3Cd,OAAMiB,SAAS,CAAC;QACZD,sBAAsBE,OAAO,GAAGH,qBAAqBG,OAAO;QAC5DH,qBAAqBG,OAAO,GAAGX;IACnC,GAAG;QACCA;KACH;IACD,MAAMY,WAAWC,IAAAA,gCAAgB,EAAC,CAACC,OAAOC;QACtCd,iBAAiBc,KAAKC,KAAK;QAC3B3B,gBAAgB,QAAQA,gBAAgB,KAAK,IAAI,KAAK,IAAIA,YAAYyB,OAAOC;IACjF;IACA,MAAME,iBAAiBxB,OAAMC,MAAM,CAAC,CAAC;IACrC,MAAMwB,aAAaL,IAAAA,gCAAgB,EAAC,CAACE;QACjCE,eAAeN,OAAO,CAACQ,KAAKC,SAAS,CAACL,KAAKC,KAAK,EAAE,GAAGD;IACzD;IACA,MAAMM,eAAeR,IAAAA,gCAAgB,EAAC,CAACE;QACnC,OAAOE,eAAeN,OAAO,CAACQ,KAAKC,SAAS,CAACL,KAAKC,KAAK,EAAE;IAC7D;IACA,MAAMM,oBAAoB7B,OAAM8B,WAAW,CAAC;QACxC,OAAO;YACHvB,eAAeQ,qBAAqBG,OAAO;YAC3CF,uBAAuBA,sBAAsBE,OAAO;YACpDM,gBAAgBA,eAAeN,OAAO;QAC1C;IACJ,GAAG,EAAE;IACL,OAAO;QACHa,YAAY;YACRC,MAAM;QACV;QACAA,MAAMC,oBAAI,CAACC,MAAM,CAACC,IAAAA,qCAAqB,EAAC,OAAO;YAC3C3C,KAAK4C,IAAAA,6BAAa,EAAC5C,KAAKO;YACxBsC,MAAM;YACN,oBAAoBvC,WAAW,aAAa;YAC5C,GAAGI,eAAe;YAClB,GAAGX,KAAK;QACZ,IAAI;YACA+C,aAAa;QACjB;QACA7C;QACAC;QACAC;QACAY;QACAV;QACAC;QACA2B;QACAG;QACAT;QACAU;IACJ;AACJ"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-tabs",
|
|
3
|
-
"version": "9.3.
|
|
3
|
+
"version": "9.3.45",
|
|
4
4
|
"description": "Fluent UI React tabs components",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -32,12 +32,12 @@
|
|
|
32
32
|
"@fluentui/scripts-tasks": "*"
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
|
-
"@fluentui/react-context-selector": "^9.1.
|
|
36
|
-
"@fluentui/react-jsx-runtime": "^9.0.
|
|
37
|
-
"@fluentui/react-shared-contexts": "^9.
|
|
38
|
-
"@fluentui/react-tabster": "^9.
|
|
39
|
-
"@fluentui/react-theme": "^9.1.
|
|
40
|
-
"@fluentui/react-utilities": "^9.13.
|
|
35
|
+
"@fluentui/react-context-selector": "^9.1.36",
|
|
36
|
+
"@fluentui/react-jsx-runtime": "^9.0.12",
|
|
37
|
+
"@fluentui/react-shared-contexts": "^9.9.1",
|
|
38
|
+
"@fluentui/react-tabster": "^9.13.1",
|
|
39
|
+
"@fluentui/react-theme": "^9.1.14",
|
|
40
|
+
"@fluentui/react-utilities": "^9.13.5",
|
|
41
41
|
"@griffel/react": "^1.5.14",
|
|
42
42
|
"@swc/helpers": "^0.5.1"
|
|
43
43
|
},
|