@fluentui/react-tabs 9.3.8 → 9.3.10

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.
Files changed (7) hide show
  1. package/CHANGELOG.json +61 -1
  2. package/CHANGELOG.md +25 -2
  3. package/lib/components/TabList/useTabList.js +1 -0
  4. package/lib/components/TabList/useTabList.js.map +1 -1
  5. package/lib-commonjs/components/TabList/useTabList.js +1 -0
  6. package/lib-commonjs/components/TabList/useTabList.js.map +1 -1
  7. package/package.json +4 -4
package/CHANGELOG.json CHANGED
@@ -2,7 +2,67 @@
2
2
  "name": "@fluentui/react-tabs",
3
3
  "entries": [
4
4
  {
5
- "date": "Thu, 06 Apr 2023 23:59:54 GMT",
5
+ "date": "Mon, 17 Apr 2023 17:50:13 GMT",
6
+ "tag": "@fluentui/react-tabs_v9.3.10",
7
+ "version": "9.3.10",
8
+ "comments": {
9
+ "patch": [
10
+ {
11
+ "author": "beachball",
12
+ "package": "@fluentui/react-tabs",
13
+ "comment": "Bump @fluentui/react-context-selector to v9.1.18",
14
+ "commit": "35d247e0b6a8c2b22e69942afbabe18043e59585"
15
+ },
16
+ {
17
+ "author": "beachball",
18
+ "package": "@fluentui/react-tabs",
19
+ "comment": "Bump @fluentui/react-tabster to v9.6.5",
20
+ "commit": "35d247e0b6a8c2b22e69942afbabe18043e59585"
21
+ },
22
+ {
23
+ "author": "beachball",
24
+ "package": "@fluentui/react-tabs",
25
+ "comment": "Bump @fluentui/react-utilities to v9.8.0",
26
+ "commit": "35d247e0b6a8c2b22e69942afbabe18043e59585"
27
+ }
28
+ ]
29
+ }
30
+ },
31
+ {
32
+ "date": "Wed, 12 Apr 2023 09:31:45 GMT",
33
+ "tag": "@fluentui/react-tabs_v9.3.9",
34
+ "version": "9.3.9",
35
+ "comments": {
36
+ "patch": [
37
+ {
38
+ "author": "kakrookaran@gmail.com",
39
+ "package": "@fluentui/react-tabs",
40
+ "commit": "4652fbe1f9472d5080af23ace0085b1dddd3013c",
41
+ "comment": "added aria-orientation attribute"
42
+ },
43
+ {
44
+ "author": "beachball",
45
+ "package": "@fluentui/react-tabs",
46
+ "comment": "Bump @fluentui/react-context-selector to v9.1.17",
47
+ "commit": "45cb6089b0f5f464ae0dd9e9cba7e199a9d67cd8"
48
+ },
49
+ {
50
+ "author": "beachball",
51
+ "package": "@fluentui/react-tabs",
52
+ "comment": "Bump @fluentui/react-tabster to v9.6.4",
53
+ "commit": "45cb6089b0f5f464ae0dd9e9cba7e199a9d67cd8"
54
+ },
55
+ {
56
+ "author": "beachball",
57
+ "package": "@fluentui/react-tabs",
58
+ "comment": "Bump @fluentui/react-utilities to v9.7.4",
59
+ "commit": "45cb6089b0f5f464ae0dd9e9cba7e199a9d67cd8"
60
+ }
61
+ ]
62
+ }
63
+ },
64
+ {
65
+ "date": "Fri, 07 Apr 2023 00:01:44 GMT",
6
66
  "tag": "@fluentui/react-tabs_v9.3.8",
7
67
  "version": "9.3.8",
8
68
  "comments": {
package/CHANGELOG.md CHANGED
@@ -1,12 +1,35 @@
1
1
  # Change Log - @fluentui/react-tabs
2
2
 
3
- This log was last generated on Thu, 06 Apr 2023 23:59:54 GMT and should not be manually modified.
3
+ This log was last generated on Mon, 17 Apr 2023 17:50:13 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.3.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabs_v9.3.10)
8
+
9
+ Mon, 17 Apr 2023 17:50:13 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabs_v9.3.9..@fluentui/react-tabs_v9.3.10)
11
+
12
+ ### Patches
13
+
14
+ - Bump @fluentui/react-context-selector to v9.1.18 ([PR #27564](https://github.com/microsoft/fluentui/pull/27564) by beachball)
15
+ - Bump @fluentui/react-tabster to v9.6.5 ([PR #27564](https://github.com/microsoft/fluentui/pull/27564) by beachball)
16
+ - Bump @fluentui/react-utilities to v9.8.0 ([PR #27564](https://github.com/microsoft/fluentui/pull/27564) by beachball)
17
+
18
+ ## [9.3.9](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabs_v9.3.9)
19
+
20
+ Wed, 12 Apr 2023 09:31:45 GMT
21
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabs_v9.3.8..@fluentui/react-tabs_v9.3.9)
22
+
23
+ ### Patches
24
+
25
+ - added aria-orientation attribute ([PR #27315](https://github.com/microsoft/fluentui/pull/27315) by kakrookaran@gmail.com)
26
+ - Bump @fluentui/react-context-selector to v9.1.17 ([PR #27274](https://github.com/microsoft/fluentui/pull/27274) by beachball)
27
+ - Bump @fluentui/react-tabster to v9.6.4 ([PR #27274](https://github.com/microsoft/fluentui/pull/27274) by beachball)
28
+ - Bump @fluentui/react-utilities to v9.7.4 ([PR #27274](https://github.com/microsoft/fluentui/pull/27274) by beachball)
29
+
7
30
  ## [9.3.8](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabs_v9.3.8)
8
31
 
9
- Thu, 06 Apr 2023 23:59:54 GMT
32
+ Fri, 07 Apr 2023 00:01:44 GMT
10
33
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabs_v9.3.7..@fluentui/react-tabs_v9.3.8)
11
34
 
12
35
  ### Patches
package/lib/components/TabList/useTabList.js CHANGED
@@ -65,6 +65,7 @@ export const useTabList_unstable = (props, ref) => {
65
65
  root: getNativeElementProps('div', {
66
66
  ref: useMergedRefs(ref, innerRef),
67
67
  role: 'tablist',
68
+ 'aria-orientation': vertical ? 'vertical' : 'horizontal',
68
69
  ...focusAttributes,
69
70
  ...props
70
71
  }),
package/lib/components/TabList/useTabList.js.map CHANGED
@@ -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,GAAG5B,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"}
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"}
package/lib-commonjs/components/TabList/useTabList.js CHANGED
@@ -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
  }),
package/lib-commonjs/components/TabList/useTabList.js.map CHANGED
@@ -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,GAAGjC,eAAe;YAClB,GAAGX,KAAK;QACV;QACAE;QACAC;QACAC;QACAY;QACAV;QACAC;QACA2B;QACAG;QACAT;QACAU;IACF;AACF,GACA,sCAAsC"}
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.8",
3
+ "version": "9.3.10",
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.16",
34
+ "@fluentui/react-context-selector": "^9.1.18",
35
35
  "@fluentui/react-shared-contexts": "^9.3.3",
36
- "@fluentui/react-tabster": "^9.6.3",
36
+ "@fluentui/react-tabster": "^9.6.5",
37
37
  "@fluentui/react-theme": "^9.1.7",
38
- "@fluentui/react-utilities": "^9.7.3",
38
+ "@fluentui/react-utilities": "^9.8.0",
39
39
  "@griffel/react": "^1.5.2",
40
40
  "@swc/helpers": "^0.4.14"
41
41
  },