@fluentui/react-tabs 9.3.7 → 9.3.9
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 +52 -4
- package/CHANGELOG.md +26 -5
- package/lib/components/Tab/useTab.js +5 -4
- package/lib/components/Tab/useTab.js.map +1 -1
- package/lib/components/TabList/useTabList.js +1 -0
- package/lib/components/TabList/useTabList.js.map +1 -1
- package/lib-commonjs/components/Tab/useTab.js +4 -4
- package/lib-commonjs/components/Tab/useTab.js.map +1 -1
- package/lib-commonjs/components/TabList/useTabList.js +1 -0
- package/lib-commonjs/components/TabList/useTabList.js.map +1 -1
- package/package.json +4 -4
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,55 @@
|
|
|
2
2
|
"name": "@fluentui/react-tabs",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
5
|
+
"date": "Wed, 12 Apr 2023 09:28:17 GMT",
|
|
6
|
+
"tag": "@fluentui/react-tabs_v9.3.9",
|
|
7
|
+
"version": "9.3.9",
|
|
8
|
+
"comments": {
|
|
9
|
+
"patch": [
|
|
10
|
+
{
|
|
11
|
+
"author": "kakrookaran@gmail.com",
|
|
12
|
+
"package": "@fluentui/react-tabs",
|
|
13
|
+
"commit": "4652fbe1f9472d5080af23ace0085b1dddd3013c",
|
|
14
|
+
"comment": "added aria-orientation attribute"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"author": "beachball",
|
|
18
|
+
"package": "@fluentui/react-tabs",
|
|
19
|
+
"comment": "Bump @fluentui/react-context-selector to v9.1.17",
|
|
20
|
+
"commit": "b48890859f5ce28fe12fd40f6bda26ed486c5e47"
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"author": "beachball",
|
|
24
|
+
"package": "@fluentui/react-tabs",
|
|
25
|
+
"comment": "Bump @fluentui/react-tabster to v9.6.4",
|
|
26
|
+
"commit": "b48890859f5ce28fe12fd40f6bda26ed486c5e47"
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
"author": "beachball",
|
|
30
|
+
"package": "@fluentui/react-tabs",
|
|
31
|
+
"comment": "Bump @fluentui/react-utilities to v9.7.4",
|
|
32
|
+
"commit": "b48890859f5ce28fe12fd40f6bda26ed486c5e47"
|
|
33
|
+
}
|
|
34
|
+
]
|
|
35
|
+
}
|
|
36
|
+
},
|
|
37
|
+
{
|
|
38
|
+
"date": "Fri, 07 Apr 2023 00:01:44 GMT",
|
|
39
|
+
"tag": "@fluentui/react-tabs_v9.3.8",
|
|
40
|
+
"version": "9.3.8",
|
|
41
|
+
"comments": {
|
|
42
|
+
"patch": [
|
|
43
|
+
{
|
|
44
|
+
"author": "gcox@microsoft.com",
|
|
45
|
+
"package": "@fluentui/react-tabs",
|
|
46
|
+
"commit": "fe885a29eaaae84a902c66ea0af118c22358228b",
|
|
47
|
+
"comment": "fix: Merged onClick callbacks in Tab"
|
|
48
|
+
}
|
|
49
|
+
]
|
|
50
|
+
}
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
"date": "Tue, 04 Apr 2023 18:44:50 GMT",
|
|
6
54
|
"tag": "@fluentui/react-tabs_v9.3.7",
|
|
7
55
|
"version": "9.3.7",
|
|
8
56
|
"comments": {
|
|
@@ -11,19 +59,19 @@
|
|
|
11
59
|
"author": "beachball",
|
|
12
60
|
"package": "@fluentui/react-tabs",
|
|
13
61
|
"comment": "Bump @fluentui/react-context-selector to v9.1.16",
|
|
14
|
-
"commit": "
|
|
62
|
+
"commit": "6778d76bbbad7e1975c151c797f28c2708cde2ce"
|
|
15
63
|
},
|
|
16
64
|
{
|
|
17
65
|
"author": "beachball",
|
|
18
66
|
"package": "@fluentui/react-tabs",
|
|
19
67
|
"comment": "Bump @fluentui/react-tabster to v9.6.3",
|
|
20
|
-
"commit": "
|
|
68
|
+
"commit": "6778d76bbbad7e1975c151c797f28c2708cde2ce"
|
|
21
69
|
},
|
|
22
70
|
{
|
|
23
71
|
"author": "beachball",
|
|
24
72
|
"package": "@fluentui/react-tabs",
|
|
25
73
|
"comment": "Bump @fluentui/react-utilities to v9.7.3",
|
|
26
|
-
"commit": "
|
|
74
|
+
"commit": "6778d76bbbad7e1975c151c797f28c2708cde2ce"
|
|
27
75
|
}
|
|
28
76
|
]
|
|
29
77
|
}
|
package/CHANGELOG.md
CHANGED
|
@@ -1,19 +1,40 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-tabs
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Wed, 12 Apr 2023 09:28:17 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.3.9](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabs_v9.3.9)
|
|
8
|
+
|
|
9
|
+
Wed, 12 Apr 2023 09:28:17 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabs_v9.3.8..@fluentui/react-tabs_v9.3.9)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- added aria-orientation attribute ([PR #27315](https://github.com/microsoft/fluentui/pull/27315) by kakrookaran@gmail.com)
|
|
15
|
+
- Bump @fluentui/react-context-selector to v9.1.17 ([commit](https://github.com/microsoft/fluentui/commit/b48890859f5ce28fe12fd40f6bda26ed486c5e47) by beachball)
|
|
16
|
+
- Bump @fluentui/react-tabster to v9.6.4 ([commit](https://github.com/microsoft/fluentui/commit/b48890859f5ce28fe12fd40f6bda26ed486c5e47) by beachball)
|
|
17
|
+
- Bump @fluentui/react-utilities to v9.7.4 ([commit](https://github.com/microsoft/fluentui/commit/b48890859f5ce28fe12fd40f6bda26ed486c5e47) by beachball)
|
|
18
|
+
|
|
19
|
+
## [9.3.8](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabs_v9.3.8)
|
|
20
|
+
|
|
21
|
+
Fri, 07 Apr 2023 00:01:44 GMT
|
|
22
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabs_v9.3.7..@fluentui/react-tabs_v9.3.8)
|
|
23
|
+
|
|
24
|
+
### Patches
|
|
25
|
+
|
|
26
|
+
- fix: Merged onClick callbacks in Tab ([PR #27477](https://github.com/microsoft/fluentui/pull/27477) by gcox@microsoft.com)
|
|
27
|
+
|
|
7
28
|
## [9.3.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabs_v9.3.7)
|
|
8
29
|
|
|
9
|
-
Tue, 04 Apr 2023 18:
|
|
30
|
+
Tue, 04 Apr 2023 18:44:50 GMT
|
|
10
31
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabs_v9.3.5..@fluentui/react-tabs_v9.3.7)
|
|
11
32
|
|
|
12
33
|
### Patches
|
|
13
34
|
|
|
14
|
-
- Bump @fluentui/react-context-selector to v9.1.16 ([PR #
|
|
15
|
-
- Bump @fluentui/react-tabster to v9.6.3 ([PR #
|
|
16
|
-
- Bump @fluentui/react-utilities to v9.7.3 ([PR #
|
|
35
|
+
- Bump @fluentui/react-context-selector to v9.1.16 ([PR #27434](https://github.com/microsoft/fluentui/pull/27434) by beachball)
|
|
36
|
+
- Bump @fluentui/react-tabster to v9.6.3 ([PR #27434](https://github.com/microsoft/fluentui/pull/27434) by beachball)
|
|
37
|
+
- Bump @fluentui/react-utilities to v9.7.3 ([PR #27434](https://github.com/microsoft/fluentui/pull/27434) by beachball)
|
|
17
38
|
|
|
18
39
|
## [9.3.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabs_v9.3.5)
|
|
19
40
|
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import { getNativeElementProps, resolveShorthand, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';
|
|
2
|
+
import { getNativeElementProps, mergeCallbacks, resolveShorthand, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';
|
|
3
3
|
import { useTabListContext_unstable } from '../TabList/TabListContext';
|
|
4
4
|
/**
|
|
5
5
|
* Create the state required to render Tab.
|
|
@@ -15,6 +15,7 @@ export const useTab_unstable = (props, ref) => {
|
|
|
15
15
|
content,
|
|
16
16
|
disabled: tabDisabled = false,
|
|
17
17
|
icon,
|
|
18
|
+
onClick,
|
|
18
19
|
value
|
|
19
20
|
} = props;
|
|
20
21
|
const appearance = useTabListContext_unstable(ctx => ctx.appearance);
|
|
@@ -28,9 +29,9 @@ export const useTab_unstable = (props, ref) => {
|
|
|
28
29
|
const vertical = useTabListContext_unstable(ctx => !!ctx.vertical);
|
|
29
30
|
const disabled = listDisabled || tabDisabled;
|
|
30
31
|
const innerRef = React.useRef(null);
|
|
31
|
-
const
|
|
32
|
+
const onTabClick = useEventCallback(mergeCallbacks(onClick, event => onSelect(event, {
|
|
32
33
|
value
|
|
33
|
-
}));
|
|
34
|
+
})));
|
|
34
35
|
React.useEffect(() => {
|
|
35
36
|
onRegister({
|
|
36
37
|
value,
|
|
@@ -65,7 +66,7 @@ export const useTab_unstable = (props, ref) => {
|
|
|
65
66
|
'aria-selected': disabled ? undefined : `${selected}`,
|
|
66
67
|
...props,
|
|
67
68
|
disabled,
|
|
68
|
-
onClick
|
|
69
|
+
onClick: onTabClick
|
|
69
70
|
}),
|
|
70
71
|
icon: iconShorthand,
|
|
71
72
|
iconOnly: Boolean((iconShorthand === null || iconShorthand === void 0 ? void 0 : iconShorthand.children) && !contentShorthand.children),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","getNativeElementProps","resolveShorthand","useEventCallback","useMergedRefs","useTabListContext_unstable","useTab_unstable","props","ref","content","disabled","tabDisabled","icon","value","appearance","ctx","reserveSelectedTabSpace","listDisabled","selected","selectedValue","onRegister","onUnregister","onSelect","size","vertical","innerRef","useRef","
|
|
1
|
+
{"version":3,"names":["React","getNativeElementProps","mergeCallbacks","resolveShorthand","useEventCallback","useMergedRefs","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","iconShorthand","contentShorthand","required","defaultProps","children","components","root","role","type","undefined","iconOnly","Boolean","contentReservedSpaceClassName"],"sources":["../../../src/components/Tab/useTab.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n getNativeElementProps,\n mergeCallbacks,\n resolveShorthand,\n useEventCallback,\n useMergedRefs,\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 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 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 icon: iconShorthand,\n iconOnly: Boolean(iconShorthand?.children && !contentShorthand.children),\n content: contentShorthand,\n appearance,\n contentReservedSpaceClassName: reserveSelectedTabSpace ? '' : undefined,\n disabled,\n selected,\n size,\n value,\n vertical,\n };\n};\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useArrowNavigationGroup","getNativeElementProps","useControllableState","useEventCallback","useMergedRefs","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","role"],"sources":["../../../src/components/TabList/useTabList.ts"],"sourcesContent":["import * as React from 'react';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport {\n getNativeElementProps,\n useControllableState,\n useEventCallback,\n useMergedRefs,\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: getNativeElementProps('div', {\n ref: useMergedRefs(ref, innerRef),\n role: 'tablist',\n ...focusAttributes,\n ...props,\n }),\n appearance,\n reserveSelectedTabSpace,\n disabled,\n selectedValue,\n size,\n vertical,\n onRegister,\n onUnregister,\n onSelect,\n getRegisteredTabs,\n };\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,uBAAuB,QAAQ;AACxC,SACEC,qBAAqB,EACrBC,oBAAoB,EACpBC,gBAAgB,EAChBC,aAAa,QACR;AAIP;;;;;;;;;AASA,OAAO,MAAMC,mBAAA,GAAsBA,CAACC,KAAA,EAAqBC,GAAA,KAA8C;EACrG,MAAM;IACJC,UAAA,GAAa;IACbC,uBAAA,GAA0B,IAAI;IAC9BC,QAAA,GAAW,KAAK;IAChBC,WAAA;IACAC,IAAA,GAAO;IACPC,QAAA,GAAW;EAAK,CACjB,GAAGP,KAAA;EAEJ,MAAMQ,QAAA,GAAWf,KAAA,CAAMgB,MAAM,CAAc,IAAI;EAE/C,MAAMC,eAAA,GAAkBhB,uBAAA,CAAwB;IAC9CiB,QAAA,EAAU,IAAI;IACdC,IAAA,EAAML,QAAA,GAAW,aAAa,YAAY;IAC1CM,eAAA,EAAiB;EACnB;EAEA,MAAM,CAACC,aAAA,EAAeC,gBAAA,CAAiB,GAAGnB,oBAAA,CAAqB;IAC7DoB,KAAA,EAAOhB,KAAA,CAAMc,aAAa;IAC1BG,YAAA,EAAcjB,KAAA,CAAMkB,oBAAoB;IACxCC,YAAA,EAAcC;EAChB;EAEA;EACA;EACA;EACA;EACA,MAAMC,oBAAA,GAAuB5B,KAAA,CAAMgB,MAAM,CAAuBW,SAAA;EAChE,MAAME,qBAAA,GAAwB7B,KAAA,CAAMgB,MAAM,CAAuBW,SAAA;EAEjE3B,KAAA,CAAM8B,SAAS,CAAC,MAAM;IACpBD,qBAAA,CAAsBE,OAAO,GAAGH,oBAAA,CAAqBG,OAAO;IAC5DH,oBAAA,CAAqBG,OAAO,GAAGV,aAAA;EACjC,GAAG,CAACA,aAAA,CAAc;EAElB,MAAMW,QAAA,GAAW5B,gBAAA,CAAiB,CAAC6B,KAAA,EAAuBC,IAAA,KAAwB;IAChFZ,gBAAA,CAAiBY,IAAA,CAAKC,KAAK;IAC3BvB,WAAA,aAAAA,WAAA,uBAAAA,WAAA,CAAcqB,KAAA,EAAOC,IAAA;EACvB;EAEA,MAAME,cAAA,GAAiBpC,KAAA,CAAMgB,MAAM,CAAkC,CAAC;EAEtE,MAAMqB,UAAA,GAAajC,gBAAA,CAAkB8B,IAAA,IAA0B;IAC7DE,cAAA,CAAeL,OAAO,CAACO,IAAA,CAAKC,SAAS,CAACL,IAAA,CAAKC,KAAK,EAAE,GAAGD,IAAA;EACvD;EAEA,MAAMM,YAAA,GAAepC,gBAAA,CAAkB8B,IAAA,IAA0B;IAC/D,OAAOE,cAAA,CAAeL,OAAO,CAACO,IAAA,CAAKC,SAAS,CAACL,IAAA,CAAKC,KAAK,EAAE;EAC3D;EAEA,MAAMM,iBAAA,GAAoBzC,KAAA,CAAM0C,WAAW,CAAC,MAAM;IAChD,OAAO;MACLrB,aAAA,EAAeO,oBAAA,CAAqBG,OAAO;MAC3CF,qBAAA,EAAuBA,qBAAA,CAAsBE,OAAO;MACpDK,cAAA,EAAgBA,cAAA,CAAeL;IACjC;EACF,GAAG,EAAE;EAEL,OAAO;IACLY,UAAA,EAAY;MACVC,IAAA,EAAM;IACR;IACAA,IAAA,EAAM1C,qBAAA,CAAsB,OAAO;MACjCM,GAAA,EAAKH,aAAA,CAAcG,GAAA,EAAKO,QAAA;MACxB8B,IAAA,EAAM;MACN,
|
|
1
|
+
{"version":3,"names":["React","useArrowNavigationGroup","getNativeElementProps","useControllableState","useEventCallback","useMergedRefs","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","role"],"sources":["../../../src/components/TabList/useTabList.ts"],"sourcesContent":["import * as React from 'react';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport {\n getNativeElementProps,\n useControllableState,\n useEventCallback,\n useMergedRefs,\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: getNativeElementProps('div', {\n ref: useMergedRefs(ref, innerRef),\n role: 'tablist',\n 'aria-orientation': vertical ? 'vertical' : 'horizontal',\n ...focusAttributes,\n ...props,\n }),\n appearance,\n reserveSelectedTabSpace,\n disabled,\n selectedValue,\n size,\n vertical,\n onRegister,\n onUnregister,\n onSelect,\n getRegisteredTabs,\n };\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,uBAAuB,QAAQ;AACxC,SACEC,qBAAqB,EACrBC,oBAAoB,EACpBC,gBAAgB,EAChBC,aAAa,QACR;AAIP;;;;;;;;;AASA,OAAO,MAAMC,mBAAA,GAAsBA,CAACC,KAAA,EAAqBC,GAAA,KAA8C;EACrG,MAAM;IACJC,UAAA,GAAa;IACbC,uBAAA,GAA0B,IAAI;IAC9BC,QAAA,GAAW,KAAK;IAChBC,WAAA;IACAC,IAAA,GAAO;IACPC,QAAA,GAAW;EAAK,CACjB,GAAGP,KAAA;EAEJ,MAAMQ,QAAA,GAAWf,KAAA,CAAMgB,MAAM,CAAc,IAAI;EAE/C,MAAMC,eAAA,GAAkBhB,uBAAA,CAAwB;IAC9CiB,QAAA,EAAU,IAAI;IACdC,IAAA,EAAML,QAAA,GAAW,aAAa,YAAY;IAC1CM,eAAA,EAAiB;EACnB;EAEA,MAAM,CAACC,aAAA,EAAeC,gBAAA,CAAiB,GAAGnB,oBAAA,CAAqB;IAC7DoB,KAAA,EAAOhB,KAAA,CAAMc,aAAa;IAC1BG,YAAA,EAAcjB,KAAA,CAAMkB,oBAAoB;IACxCC,YAAA,EAAcC;EAChB;EAEA;EACA;EACA;EACA;EACA,MAAMC,oBAAA,GAAuB5B,KAAA,CAAMgB,MAAM,CAAuBW,SAAA;EAChE,MAAME,qBAAA,GAAwB7B,KAAA,CAAMgB,MAAM,CAAuBW,SAAA;EAEjE3B,KAAA,CAAM8B,SAAS,CAAC,MAAM;IACpBD,qBAAA,CAAsBE,OAAO,GAAGH,oBAAA,CAAqBG,OAAO;IAC5DH,oBAAA,CAAqBG,OAAO,GAAGV,aAAA;EACjC,GAAG,CAACA,aAAA,CAAc;EAElB,MAAMW,QAAA,GAAW5B,gBAAA,CAAiB,CAAC6B,KAAA,EAAuBC,IAAA,KAAwB;IAChFZ,gBAAA,CAAiBY,IAAA,CAAKC,KAAK;IAC3BvB,WAAA,aAAAA,WAAA,uBAAAA,WAAA,CAAcqB,KAAA,EAAOC,IAAA;EACvB;EAEA,MAAME,cAAA,GAAiBpC,KAAA,CAAMgB,MAAM,CAAkC,CAAC;EAEtE,MAAMqB,UAAA,GAAajC,gBAAA,CAAkB8B,IAAA,IAA0B;IAC7DE,cAAA,CAAeL,OAAO,CAACO,IAAA,CAAKC,SAAS,CAACL,IAAA,CAAKC,KAAK,EAAE,GAAGD,IAAA;EACvD;EAEA,MAAMM,YAAA,GAAepC,gBAAA,CAAkB8B,IAAA,IAA0B;IAC/D,OAAOE,cAAA,CAAeL,OAAO,CAACO,IAAA,CAAKC,SAAS,CAACL,IAAA,CAAKC,KAAK,EAAE;EAC3D;EAEA,MAAMM,iBAAA,GAAoBzC,KAAA,CAAM0C,WAAW,CAAC,MAAM;IAChD,OAAO;MACLrB,aAAA,EAAeO,oBAAA,CAAqBG,OAAO;MAC3CF,qBAAA,EAAuBA,qBAAA,CAAsBE,OAAO;MACpDK,cAAA,EAAgBA,cAAA,CAAeL;IACjC;EACF,GAAG,EAAE;EAEL,OAAO;IACLY,UAAA,EAAY;MACVC,IAAA,EAAM;IACR;IACAA,IAAA,EAAM1C,qBAAA,CAAsB,OAAO;MACjCM,GAAA,EAAKH,aAAA,CAAcG,GAAA,EAAKO,QAAA;MACxB8B,IAAA,EAAM;MACN,oBAAoB/B,QAAA,GAAW,aAAa,YAAY;MACxD,GAAGG,eAAe;MAClB,GAAGV;IACL;IACAE,UAAA;IACAC,uBAAA;IACAC,QAAA;IACAU,aAAA;IACAR,IAAA;IACAC,QAAA;IACAuB,UAAA;IACAG,YAAA;IACAR,QAAA;IACAS;EACF;AACF"}
|
|
@@ -11,7 +11,7 @@ const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
|
|
|
11
11
|
const _reactUtilities = require("@fluentui/react-utilities");
|
|
12
12
|
const _tabListContext = require("../TabList/TabListContext");
|
|
13
13
|
const useTab_unstable = (props, ref)=>{
|
|
14
|
-
const { content , disabled: tabDisabled = false , icon , value } = props;
|
|
14
|
+
const { content , disabled: tabDisabled = false , icon , onClick , value } = props;
|
|
15
15
|
const appearance = (0, _tabListContext.useTabListContext_unstable)((ctx)=>ctx.appearance);
|
|
16
16
|
const reserveSelectedTabSpace = (0, _tabListContext.useTabListContext_unstable)((ctx)=>ctx.reserveSelectedTabSpace);
|
|
17
17
|
const listDisabled = (0, _tabListContext.useTabListContext_unstable)((ctx)=>ctx.disabled);
|
|
@@ -23,9 +23,9 @@ const useTab_unstable = (props, ref)=>{
|
|
|
23
23
|
const vertical = (0, _tabListContext.useTabListContext_unstable)((ctx)=>!!ctx.vertical);
|
|
24
24
|
const disabled = listDisabled || tabDisabled;
|
|
25
25
|
const innerRef = _react.useRef(null);
|
|
26
|
-
const
|
|
26
|
+
const onTabClick = (0, _reactUtilities.useEventCallback)((0, _reactUtilities.mergeCallbacks)(onClick, (event)=>onSelect(event, {
|
|
27
27
|
value
|
|
28
|
-
}));
|
|
28
|
+
})));
|
|
29
29
|
_react.useEffect(()=>{
|
|
30
30
|
onRegister({
|
|
31
31
|
value,
|
|
@@ -65,7 +65,7 @@ const useTab_unstable = (props, ref)=>{
|
|
|
65
65
|
'aria-selected': disabled ? undefined : `${selected}`,
|
|
66
66
|
...props,
|
|
67
67
|
disabled,
|
|
68
|
-
onClick
|
|
68
|
+
onClick: onTabClick
|
|
69
69
|
}),
|
|
70
70
|
icon: iconShorthand,
|
|
71
71
|
iconOnly: Boolean((iconShorthand === null || iconShorthand === void 0 ? void 0 : iconShorthand.children) && !contentShorthand.children),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../lib/components/Tab/useTab.js"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useEventCallback, useMergedRefs } 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 */\nexport const useTab_unstable = (props, ref) => {\n const {\n content,\n disabled: tabDisabled = false,\n icon,\n value\n } = 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
|
|
1
|
+
{"version":3,"sources":["../../../lib/components/Tab/useTab.js"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, mergeCallbacks, resolveShorthand, useEventCallback, useMergedRefs } 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 */\nexport const useTab_unstable = (props, ref) => {\n const {\n content,\n disabled: tabDisabled = false,\n icon,\n onClick,\n value\n } = 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 }, [onRegister, onUnregister, innerRef, value]);\n const iconShorthand = resolveShorthand(icon);\n const contentShorthand = resolveShorthand(content, {\n required: true,\n defaultProps: {\n children: props.children\n }\n });\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 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 icon: iconShorthand,\n iconOnly: Boolean((iconShorthand === null || iconShorthand === void 0 ? void 0 : iconShorthand.children) && !contentShorthand.children),\n content: contentShorthand,\n appearance,\n contentReservedSpaceClassName: reserveSelectedTabSpace ? '' : undefined,\n disabled,\n selected,\n size,\n value,\n vertical\n };\n};\n//# sourceMappingURL=useTab.js.map"],"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","iconShorthand","resolveShorthand","contentShorthand","required","defaultProps","children","components","root","getNativeElementProps","useMergedRefs","role","type","undefined","iconOnly","Boolean","contentReservedSpaceClassName"],"mappings":";;;;+BAYaA;;aAAAA;;;6DAZU;gCACkF;gCAC9D;AAUpC,MAAMA,kBAAkB,CAACC,OAAOC,MAAQ;IAC7C,MAAM,EACJC,QAAO,EACPC,UAAUC,cAAc,KAAK,CAAA,EAC7BC,KAAI,EACJC,QAAO,EACPC,MAAK,EACN,GAAGP;IACJ,MAAMQ,aAAaC,IAAAA,0CAA0B,EAACC,CAAAA,MAAOA,IAAIF,UAAU;IACnE,MAAMG,0BAA0BF,IAAAA,0CAA0B,EAACC,CAAAA,MAAOA,IAAIC,uBAAuB;IAC7F,MAAMC,eAAeH,IAAAA,0CAA0B,EAACC,CAAAA,MAAOA,IAAIP,QAAQ;IACnE,MAAMU,WAAWJ,IAAAA,0CAA0B,EAACC,CAAAA,MAAOA,IAAII,aAAa,KAAKP;IACzE,MAAMQ,aAAaN,IAAAA,0CAA0B,EAACC,CAAAA,MAAOA,IAAIK,UAAU;IACnE,MAAMC,eAAeP,IAAAA,0CAA0B,EAACC,CAAAA,MAAOA,IAAIM,YAAY;IACvE,MAAMC,WAAWR,IAAAA,0CAA0B,EAACC,CAAAA,MAAOA,IAAIO,QAAQ;IAC/D,MAAMC,OAAOT,IAAAA,0CAA0B,EAACC,CAAAA,MAAOA,IAAIQ,IAAI;IACvD,MAAMC,WAAWV,IAAAA,0CAA0B,EAACC,CAAAA,MAAO,CAAC,CAACA,IAAIS,QAAQ;IACjE,MAAMhB,WAAWS,gBAAgBR;IACjC,MAAMgB,WAAWC,OAAMC,MAAM,CAAC,IAAI;IAClC,MAAMC,aAAaC,IAAAA,gCAAgB,EAACC,IAAAA,8BAAc,EAACnB,SAASoB,CAAAA,QAAST,SAASS,OAAO;YACnFnB;QACF;IACAc,OAAMM,SAAS,CAAC,IAAM;QACpBZ,WAAW;YACTR;YACAN,KAAKmB;QACP;QACA,OAAO,IAAM;YACXJ,aAAa;gBACXT;gBACAN,KAAKmB;YACP;QACF;IACF,GAAG;QAACL;QAAYC;QAAcI;QAAUb;KAAM;IAC9C,MAAMqB,gBAAgBC,IAAAA,gCAAgB,EAACxB;IACvC,MAAMyB,mBAAmBD,IAAAA,gCAAgB,EAAC3B,SAAS;QACjD6B,UAAU,IAAI;QACdC,cAAc;YACZC,UAAUjC,MAAMiC,QAAQ;QAC1B;IACF;IACA,OAAO;QACLC,YAAY;YACVC,MAAM;YACN9B,MAAM;YACNH,SAAS;QACX;QACAiC,MAAMC,IAAAA,qCAAqB,EAAC,UAAU;YACpCnC,KAAKoC,IAAAA,6BAAa,EAACpC,KAAKmB;YACxBkB,MAAM;YACNC,MAAM;YACN,yDAAyD;YACzD,iEAAiE;YACjE,iBAAiBpC,WAAWqC,YAAY,CAAC,EAAE3B,SAAS,CAAC;YACrD,GAAGb,KAAK;YACRG;YACAG,SAASiB;QACX;QACAlB,MAAMuB;QACNa,UAAUC,QAAQ,AAACd,CAAAA,kBAAkB,IAAI,IAAIA,kBAAkB,KAAK,IAAI,KAAK,IAAIA,cAAcK,QAAQ,AAAD,KAAM,CAACH,iBAAiBG,QAAQ;QACtI/B,SAAS4B;QACTtB;QACAmC,+BAA+BhC,0BAA0B,KAAK6B,SAAS;QACvErC;QACAU;QACAK;QACAX;QACAY;IACF;AACF,GACA,kCAAkC"}
|
|
@@ -60,6 +60,7 @@ const useTabList_unstable = (props, ref)=>{
|
|
|
60
60
|
root: (0, _reactUtilities.getNativeElementProps)('div', {
|
|
61
61
|
ref: (0, _reactUtilities.useMergedRefs)(ref, innerRef),
|
|
62
62
|
role: 'tablist',
|
|
63
|
+
'aria-orientation': vertical ? 'vertical' : 'horizontal',
|
|
63
64
|
...focusAttributes,
|
|
64
65
|
...props
|
|
65
66
|
}),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../lib/components/TabList/useTabList.js"],"sourcesContent":["import * as React from 'react';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport { getNativeElementProps, useControllableState, useEventCallback, useMergedRefs } 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 */\nexport const useTabList_unstable = (props, ref) => {\n const {\n appearance = 'transparent',\n reserveSelectedTabSpace = true,\n disabled = false,\n onTabSelect,\n size = 'medium',\n vertical = false\n } = 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 }, [selectedValue]);\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: getNativeElementProps('div', {\n ref: useMergedRefs(ref, innerRef),\n role: 'tablist',\n ...focusAttributes,\n ...props\n }),\n appearance,\n reserveSelectedTabSpace,\n disabled,\n selectedValue,\n size,\n vertical,\n onRegister,\n onUnregister,\n onSelect,\n getRegisteredTabs\n };\n};\n//# sourceMappingURL=useTabList.js.map"],"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","getNativeElementProps","useMergedRefs","role"],"mappings":";;;;+BAYaA;;aAAAA;;;6DAZU;8BACiB;gCACqD;AAUtF,MAAMA,sBAAsB,CAACC,OAAOC,MAAQ;IACjD,MAAM,EACJC,YAAa,cAAa,EAC1BC,yBAA0B,IAAI,CAAA,EAC9BC,UAAW,KAAK,CAAA,EAChBC,YAAW,EACXC,MAAO,SAAQ,EACfC,UAAW,KAAK,CAAA,EACjB,GAAGP;IACJ,MAAMQ,WAAWC,OAAMC,MAAM,CAAC,IAAI;IAClC,MAAMC,kBAAkBC,IAAAA,qCAAuB,EAAC;QAC9CC,UAAU,IAAI;QACdC,MAAMP,WAAW,aAAa,YAAY;QAC1CQ,iBAAiB,IAAI;IACvB;IACA,MAAM,CAACC,eAAeC,iBAAiB,GAAGC,IAAAA,oCAAoB,EAAC;QAC7DC,OAAOnB,MAAMgB,aAAa;QAC1BI,cAAcpB,MAAMqB,oBAAoB;QACxCC,cAAcC;IAChB;IACA,4DAA4D;IAC5D,8FAA8F;IAC9F,qFAAqF;IACrF,0CAA0C;IAC1C,MAAMC,uBAAuBf,OAAMC,MAAM,CAACa;IAC1C,MAAME,wBAAwBhB,OAAMC,MAAM,CAACa;IAC3Cd,OAAMiB,SAAS,CAAC,IAAM;QACpBD,sBAAsBE,OAAO,GAAGH,qBAAqBG,OAAO;QAC5DH,qBAAqBG,OAAO,GAAGX;IACjC,GAAG;QAACA;KAAc;IAClB,MAAMY,WAAWC,IAAAA,gCAAgB,EAAC,CAACC,OAAOC,OAAS;QACjDd,iBAAiBc,KAAKC,KAAK;QAC3B3B,gBAAgB,IAAI,IAAIA,gBAAgB,KAAK,IAAI,KAAK,IAAIA,YAAYyB,OAAOC,KAAK;IACpF;IACA,MAAME,iBAAiBxB,OAAMC,MAAM,CAAC,CAAC;IACrC,MAAMwB,aAAaL,IAAAA,gCAAgB,EAACE,CAAAA,OAAQ;QAC1CE,eAAeN,OAAO,CAACQ,KAAKC,SAAS,CAACL,KAAKC,KAAK,EAAE,GAAGD;IACvD;IACA,MAAMM,eAAeR,IAAAA,gCAAgB,EAACE,CAAAA,OAAQ;QAC5C,OAAOE,eAAeN,OAAO,CAACQ,KAAKC,SAAS,CAACL,KAAKC,KAAK,EAAE;IAC3D;IACA,MAAMM,oBAAoB7B,OAAM8B,WAAW,CAAC,IAAM;QAChD,OAAO;YACLvB,eAAeQ,qBAAqBG,OAAO;YAC3CF,uBAAuBA,sBAAsBE,OAAO;YACpDM,gBAAgBA,eAAeN,OAAO;QACxC;IACF,GAAG,EAAE;IACL,OAAO;QACLa,YAAY;YACVC,MAAM;QACR;QACAA,MAAMC,IAAAA,qCAAqB,EAAC,OAAO;YACjCzC,KAAK0C,IAAAA,6BAAa,EAAC1C,KAAKO;YACxBoC,MAAM;YACN,
|
|
1
|
+
{"version":3,"sources":["../../../lib/components/TabList/useTabList.js"],"sourcesContent":["import * as React from 'react';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport { getNativeElementProps, useControllableState, useEventCallback, useMergedRefs } 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 */\nexport const useTabList_unstable = (props, ref) => {\n const {\n appearance = 'transparent',\n reserveSelectedTabSpace = true,\n disabled = false,\n onTabSelect,\n size = 'medium',\n vertical = false\n } = 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 }, [selectedValue]);\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: getNativeElementProps('div', {\n ref: useMergedRefs(ref, innerRef),\n role: 'tablist',\n 'aria-orientation': vertical ? 'vertical' : 'horizontal',\n ...focusAttributes,\n ...props\n }),\n appearance,\n reserveSelectedTabSpace,\n disabled,\n selectedValue,\n size,\n vertical,\n onRegister,\n onUnregister,\n onSelect,\n getRegisteredTabs\n };\n};\n//# sourceMappingURL=useTabList.js.map"],"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","getNativeElementProps","useMergedRefs","role"],"mappings":";;;;+BAYaA;;aAAAA;;;6DAZU;8BACiB;gCACqD;AAUtF,MAAMA,sBAAsB,CAACC,OAAOC,MAAQ;IACjD,MAAM,EACJC,YAAa,cAAa,EAC1BC,yBAA0B,IAAI,CAAA,EAC9BC,UAAW,KAAK,CAAA,EAChBC,YAAW,EACXC,MAAO,SAAQ,EACfC,UAAW,KAAK,CAAA,EACjB,GAAGP;IACJ,MAAMQ,WAAWC,OAAMC,MAAM,CAAC,IAAI;IAClC,MAAMC,kBAAkBC,IAAAA,qCAAuB,EAAC;QAC9CC,UAAU,IAAI;QACdC,MAAMP,WAAW,aAAa,YAAY;QAC1CQ,iBAAiB,IAAI;IACvB;IACA,MAAM,CAACC,eAAeC,iBAAiB,GAAGC,IAAAA,oCAAoB,EAAC;QAC7DC,OAAOnB,MAAMgB,aAAa;QAC1BI,cAAcpB,MAAMqB,oBAAoB;QACxCC,cAAcC;IAChB;IACA,4DAA4D;IAC5D,8FAA8F;IAC9F,qFAAqF;IACrF,0CAA0C;IAC1C,MAAMC,uBAAuBf,OAAMC,MAAM,CAACa;IAC1C,MAAME,wBAAwBhB,OAAMC,MAAM,CAACa;IAC3Cd,OAAMiB,SAAS,CAAC,IAAM;QACpBD,sBAAsBE,OAAO,GAAGH,qBAAqBG,OAAO;QAC5DH,qBAAqBG,OAAO,GAAGX;IACjC,GAAG;QAACA;KAAc;IAClB,MAAMY,WAAWC,IAAAA,gCAAgB,EAAC,CAACC,OAAOC,OAAS;QACjDd,iBAAiBc,KAAKC,KAAK;QAC3B3B,gBAAgB,IAAI,IAAIA,gBAAgB,KAAK,IAAI,KAAK,IAAIA,YAAYyB,OAAOC,KAAK;IACpF;IACA,MAAME,iBAAiBxB,OAAMC,MAAM,CAAC,CAAC;IACrC,MAAMwB,aAAaL,IAAAA,gCAAgB,EAACE,CAAAA,OAAQ;QAC1CE,eAAeN,OAAO,CAACQ,KAAKC,SAAS,CAACL,KAAKC,KAAK,EAAE,GAAGD;IACvD;IACA,MAAMM,eAAeR,IAAAA,gCAAgB,EAACE,CAAAA,OAAQ;QAC5C,OAAOE,eAAeN,OAAO,CAACQ,KAAKC,SAAS,CAACL,KAAKC,KAAK,EAAE;IAC3D;IACA,MAAMM,oBAAoB7B,OAAM8B,WAAW,CAAC,IAAM;QAChD,OAAO;YACLvB,eAAeQ,qBAAqBG,OAAO;YAC3CF,uBAAuBA,sBAAsBE,OAAO;YACpDM,gBAAgBA,eAAeN,OAAO;QACxC;IACF,GAAG,EAAE;IACL,OAAO;QACLa,YAAY;YACVC,MAAM;QACR;QACAA,MAAMC,IAAAA,qCAAqB,EAAC,OAAO;YACjCzC,KAAK0C,IAAAA,6BAAa,EAAC1C,KAAKO;YACxBoC,MAAM;YACN,oBAAoBrC,WAAW,aAAa,YAAY;YACxD,GAAGI,eAAe;YAClB,GAAGX,KAAK;QACV;QACAE;QACAC;QACAC;QACAY;QACAV;QACAC;QACA2B;QACAG;QACAT;QACAU;IACF;AACF,GACA,sCAAsC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-tabs",
|
|
3
|
-
"version": "9.3.
|
|
3
|
+
"version": "9.3.9",
|
|
4
4
|
"description": "Fluent UI React tabs components",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -31,11 +31,11 @@
|
|
|
31
31
|
"@fluentui/scripts-tasks": "*"
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
|
-
"@fluentui/react-context-selector": "^9.1.
|
|
34
|
+
"@fluentui/react-context-selector": "^9.1.17",
|
|
35
35
|
"@fluentui/react-shared-contexts": "^9.3.3",
|
|
36
|
-
"@fluentui/react-tabster": "^9.6.
|
|
36
|
+
"@fluentui/react-tabster": "^9.6.4",
|
|
37
37
|
"@fluentui/react-theme": "^9.1.7",
|
|
38
|
-
"@fluentui/react-utilities": "^9.7.
|
|
38
|
+
"@fluentui/react-utilities": "^9.7.4",
|
|
39
39
|
"@griffel/react": "^1.5.2",
|
|
40
40
|
"@swc/helpers": "^0.4.14"
|
|
41
41
|
},
|