@fluentui/react-tabs 9.3.51 → 9.3.53
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 +56 -2
- package/CHANGELOG.md +25 -3
- package/lib/components/Tab/useTab.js +5 -2
- package/lib/components/Tab/useTab.js.map +1 -1
- package/lib/components/TabList/useTabList.js +5 -2
- package/lib/components/TabList/useTabList.js.map +1 -1
- package/lib-commonjs/components/Tab/useTab.js +4 -1
- package/lib-commonjs/components/Tab/useTab.js.map +1 -1
- package/lib-commonjs/components/TabList/useTabList.js +4 -1
- package/lib-commonjs/components/TabList/useTabList.js.map +1 -1
- package/package.json +5 -5
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,61 @@
|
|
|
2
2
|
"name": "@fluentui/react-tabs",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
5
|
+
"date": "Mon, 23 Oct 2023 09:48:56 GMT",
|
|
6
|
+
"tag": "@fluentui/react-tabs_v9.3.53",
|
|
7
|
+
"version": "9.3.53",
|
|
8
|
+
"comments": {
|
|
9
|
+
"patch": [
|
|
10
|
+
{
|
|
11
|
+
"author": "beachball",
|
|
12
|
+
"package": "@fluentui/react-tabs",
|
|
13
|
+
"comment": "Bump @fluentui/react-tabster to v9.14.1",
|
|
14
|
+
"commit": "e4ef1febe8a185dddc10f8936944d177d50bc396"
|
|
15
|
+
}
|
|
16
|
+
]
|
|
17
|
+
}
|
|
18
|
+
},
|
|
19
|
+
{
|
|
20
|
+
"date": "Wed, 18 Oct 2023 17:54:06 GMT",
|
|
21
|
+
"tag": "@fluentui/react-tabs_v9.3.52",
|
|
22
|
+
"version": "9.3.52",
|
|
23
|
+
"comments": {
|
|
24
|
+
"patch": [
|
|
25
|
+
{
|
|
26
|
+
"author": "bernardo.sunderhus@gmail.com",
|
|
27
|
+
"package": "@fluentui/react-tabs",
|
|
28
|
+
"commit": "967882a55a7333effea42e4c24a64e8547309116",
|
|
29
|
+
"comment": "chore: migrate from getNativeElementProps to getIntrinsicElementProps"
|
|
30
|
+
},
|
|
31
|
+
{
|
|
32
|
+
"author": "beachball",
|
|
33
|
+
"package": "@fluentui/react-tabs",
|
|
34
|
+
"comment": "Bump @fluentui/react-context-selector to v9.1.41",
|
|
35
|
+
"commit": "c0d3065982e1646c54ba00c1d524248b792dbcad"
|
|
36
|
+
},
|
|
37
|
+
{
|
|
38
|
+
"author": "beachball",
|
|
39
|
+
"package": "@fluentui/react-tabs",
|
|
40
|
+
"comment": "Bump @fluentui/react-jsx-runtime to v9.0.18",
|
|
41
|
+
"commit": "c0d3065982e1646c54ba00c1d524248b792dbcad"
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
"author": "beachball",
|
|
45
|
+
"package": "@fluentui/react-tabs",
|
|
46
|
+
"comment": "Bump @fluentui/react-tabster to v9.14.0",
|
|
47
|
+
"commit": "c0d3065982e1646c54ba00c1d524248b792dbcad"
|
|
48
|
+
},
|
|
49
|
+
{
|
|
50
|
+
"author": "beachball",
|
|
51
|
+
"package": "@fluentui/react-tabs",
|
|
52
|
+
"comment": "Bump @fluentui/react-utilities to v9.15.1",
|
|
53
|
+
"commit": "c0d3065982e1646c54ba00c1d524248b792dbcad"
|
|
54
|
+
}
|
|
55
|
+
]
|
|
56
|
+
}
|
|
57
|
+
},
|
|
58
|
+
{
|
|
59
|
+
"date": "Thu, 12 Oct 2023 14:55:44 GMT",
|
|
6
60
|
"tag": "@fluentui/react-tabs_v9.3.51",
|
|
7
61
|
"version": "9.3.51",
|
|
8
62
|
"comments": {
|
|
@@ -11,7 +65,7 @@
|
|
|
11
65
|
"author": "beachball",
|
|
12
66
|
"package": "@fluentui/react-tabs",
|
|
13
67
|
"comment": "Bump @fluentui/react-jsx-runtime to v9.0.17",
|
|
14
|
-
"commit": "
|
|
68
|
+
"commit": "8178c3cae60005bc21137aa1f3e766e18cdb4a30"
|
|
15
69
|
}
|
|
16
70
|
]
|
|
17
71
|
}
|
package/CHANGELOG.md
CHANGED
|
@@ -1,17 +1,39 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-tabs
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Mon, 23 Oct 2023 09:48:56 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.3.53](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabs_v9.3.53)
|
|
8
|
+
|
|
9
|
+
Mon, 23 Oct 2023 09:48:56 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabs_v9.3.52..@fluentui/react-tabs_v9.3.53)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- Bump @fluentui/react-tabster to v9.14.1 ([commit](https://github.com/microsoft/fluentui/commit/e4ef1febe8a185dddc10f8936944d177d50bc396) by beachball)
|
|
15
|
+
|
|
16
|
+
## [9.3.52](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabs_v9.3.52)
|
|
17
|
+
|
|
18
|
+
Wed, 18 Oct 2023 17:54:06 GMT
|
|
19
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabs_v9.3.51..@fluentui/react-tabs_v9.3.52)
|
|
20
|
+
|
|
21
|
+
### Patches
|
|
22
|
+
|
|
23
|
+
- chore: migrate from getNativeElementProps to getIntrinsicElementProps ([PR #29499](https://github.com/microsoft/fluentui/pull/29499) by bernardo.sunderhus@gmail.com)
|
|
24
|
+
- Bump @fluentui/react-context-selector to v9.1.41 ([PR #29560](https://github.com/microsoft/fluentui/pull/29560) by beachball)
|
|
25
|
+
- Bump @fluentui/react-jsx-runtime to v9.0.18 ([PR #29560](https://github.com/microsoft/fluentui/pull/29560) by beachball)
|
|
26
|
+
- Bump @fluentui/react-tabster to v9.14.0 ([PR #29560](https://github.com/microsoft/fluentui/pull/29560) by beachball)
|
|
27
|
+
- Bump @fluentui/react-utilities to v9.15.1 ([PR #29560](https://github.com/microsoft/fluentui/pull/29560) by beachball)
|
|
28
|
+
|
|
7
29
|
## [9.3.51](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabs_v9.3.51)
|
|
8
30
|
|
|
9
|
-
Thu, 12 Oct 2023 14:
|
|
31
|
+
Thu, 12 Oct 2023 14:55:44 GMT
|
|
10
32
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabs_v9.3.50..@fluentui/react-tabs_v9.3.51)
|
|
11
33
|
|
|
12
34
|
### Patches
|
|
13
35
|
|
|
14
|
-
- Bump @fluentui/react-jsx-runtime to v9.0.17 ([PR #
|
|
36
|
+
- Bump @fluentui/react-jsx-runtime to v9.0.17 ([PR #29513](https://github.com/microsoft/fluentui/pull/29513) by beachball)
|
|
15
37
|
|
|
16
38
|
## [9.3.50](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabs_v9.3.50)
|
|
17
39
|
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { getIntrinsicElementProps, mergeCallbacks, useEventCallback, useMergedRefs, slot } from '@fluentui/react-utilities';
|
|
3
3
|
import { useTabListContext_unstable } from '../TabList/TabListContext';
|
|
4
4
|
/**
|
|
5
5
|
* Create the state required to render Tab.
|
|
@@ -59,7 +59,10 @@ import { useTabListContext_unstable } from '../TabList/TabListContext';
|
|
|
59
59
|
content: 'span',
|
|
60
60
|
contentReservedSpace: 'span'
|
|
61
61
|
},
|
|
62
|
-
root: slot.always(
|
|
62
|
+
root: slot.always(getIntrinsicElementProps('button', {
|
|
63
|
+
// FIXME:
|
|
64
|
+
// `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLButtonElement`
|
|
65
|
+
// but since it would be a breaking change to fix it, we are casting ref to it's proper type
|
|
63
66
|
ref: useMergedRefs(ref, innerRef),
|
|
64
67
|
role: 'tab',
|
|
65
68
|
type: 'button',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useTab.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n
|
|
1
|
+
{"version":3,"sources":["useTab.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n getIntrinsicElementProps,\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 getIntrinsicElementProps('button', {\n // FIXME:\n // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLButtonElement`\n // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n ref: useMergedRefs(ref, innerRef) as React.Ref<HTMLButtonElement>,\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}` as 'true' | 'false'),\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","getIntrinsicElementProps","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,wBAAwB,EACxBC,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,yBAAyB,UAAU;YACjC,SAAS;YACT,+EAA+E;YAC/E,4FAA4F;YAC5FQ,KAAKL,cAAcK,KAAKkB;YACxBiB,MAAM;YACNC,MAAM;YACN,yDAAyD;YACzD,iEAAiE;YACjE,iBAAiBlC,WAAWmC,YAAa,CAAC,EAAE1B,SAAS,CAAC;YACtD,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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { useArrowNavigationGroup } from '@fluentui/react-tabster';
|
|
3
|
-
import {
|
|
3
|
+
import { getIntrinsicElementProps, useControllableState, useEventCallback, useMergedRefs, slot } from '@fluentui/react-utilities';
|
|
4
4
|
/**
|
|
5
5
|
* Create the state required to render TabList.
|
|
6
6
|
*
|
|
@@ -56,7 +56,10 @@ import { getNativeElementProps, useControllableState, useEventCallback, useMerge
|
|
|
56
56
|
components: {
|
|
57
57
|
root: 'div'
|
|
58
58
|
},
|
|
59
|
-
root: slot.always(
|
|
59
|
+
root: slot.always(getIntrinsicElementProps('div', {
|
|
60
|
+
// FIXME:
|
|
61
|
+
// `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
|
|
62
|
+
// but since it would be a breaking change to fix it, we are casting ref to it's proper type
|
|
60
63
|
ref: useMergedRefs(ref, innerRef),
|
|
61
64
|
role: 'tablist',
|
|
62
65
|
'aria-orientation': vertical ? 'vertical' : 'horizontal',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useTabList.ts"],"sourcesContent":["import * as React from 'react';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport {\n
|
|
1
|
+
{"version":3,"sources":["useTabList.ts"],"sourcesContent":["import * as React from 'react';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport {\n getIntrinsicElementProps,\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 getIntrinsicElementProps('div', {\n // FIXME:\n // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n ref: useMergedRefs(ref, innerRef) as React.Ref<HTMLDivElement>,\n role: 'tablist',\n 'aria-orientation': vertical ? 'vertical' : 'horizontal',\n ...focusAttributes,\n ...props,\n } as const),\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","getIntrinsicElementProps","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,wBAAwB,EACxBC,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,yBAAyB,OAAO;YAC9B,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FO,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"}
|
|
@@ -62,7 +62,10 @@ const useTab_unstable = (props, ref)=>{
|
|
|
62
62
|
content: 'span',
|
|
63
63
|
contentReservedSpace: 'span'
|
|
64
64
|
},
|
|
65
|
-
root: _reactutilities.slot.always((0, _reactutilities.
|
|
65
|
+
root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('button', {
|
|
66
|
+
// FIXME:
|
|
67
|
+
// `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLButtonElement`
|
|
68
|
+
// but since it would be a breaking change to fix it, we are casting ref to it's proper type
|
|
66
69
|
ref: (0, _reactutilities.useMergedRefs)(ref, innerRef),
|
|
67
70
|
role: 'tab',
|
|
68
71
|
type: 'button',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useTab.js"],"sourcesContent":["import * as React from 'react';\nimport {
|
|
1
|
+
{"version":3,"sources":["useTab.js"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, 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(getIntrinsicElementProps('button', {\n // FIXME:\n // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLButtonElement`\n // but since it would be a breaking change to fix it, we are casting ref to it's proper type\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","getIntrinsicElementProps","useMergedRefs","role","type","undefined","renderByDefault"],"mappings":";;;;+BAWiBA;;;eAAAA;;;;iEAXM;gCACyE;gCACrD;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,wCAAwB,EAAC,UAAU;YACjD,SAAS;YACT,+EAA+E;YAC/E,4FAA4F;YAC5FxC,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"}
|
|
@@ -59,7 +59,10 @@ const useTabList_unstable = (props, ref)=>{
|
|
|
59
59
|
components: {
|
|
60
60
|
root: 'div'
|
|
61
61
|
},
|
|
62
|
-
root: _reactutilities.slot.always((0, _reactutilities.
|
|
62
|
+
root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
|
|
63
|
+
// FIXME:
|
|
64
|
+
// `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
|
|
65
|
+
// but since it would be a breaking change to fix it, we are casting ref to it's proper type
|
|
63
66
|
ref: (0, _reactutilities.useMergedRefs)(ref, innerRef),
|
|
64
67
|
role: 'tablist',
|
|
65
68
|
'aria-orientation': vertical ? 'vertical' : 'horizontal',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useTabList.js"],"sourcesContent":["import * as React from 'react';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport {
|
|
1
|
+
{"version":3,"sources":["useTabList.js"],"sourcesContent":["import * as React from 'react';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport { getIntrinsicElementProps, 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(getIntrinsicElementProps('div', {\n // FIXME:\n // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n // but since it would be a breaking change to fix it, we are casting ref to it's proper type\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","getIntrinsicElementProps","useMergedRefs","role","elementType"],"mappings":";;;;+BAWiBA;;;eAAAA;;;;iEAXM;8BACiB;gCAC8D;AAS3F,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,wCAAwB,EAAC,OAAO;YAC9C,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5F3C,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.53",
|
|
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.
|
|
35
|
+
"@fluentui/react-context-selector": "^9.1.41",
|
|
36
|
+
"@fluentui/react-jsx-runtime": "^9.0.18",
|
|
37
37
|
"@fluentui/react-shared-contexts": "^9.10.0",
|
|
38
|
-
"@fluentui/react-tabster": "^9.
|
|
38
|
+
"@fluentui/react-tabster": "^9.14.1",
|
|
39
39
|
"@fluentui/react-theme": "^9.1.14",
|
|
40
|
-
"@fluentui/react-utilities": "^9.15.
|
|
40
|
+
"@fluentui/react-utilities": "^9.15.1",
|
|
41
41
|
"@griffel/react": "^1.5.14",
|
|
42
42
|
"@swc/helpers": "^0.5.1"
|
|
43
43
|
},
|