@fluentui/react-tabs 9.3.15 → 9.3.17
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 +79 -1
- package/CHANGELOG.md +28 -2
- package/lib/Tab.js +0 -1
- package/lib/Tab.js.map +1 -1
- package/lib/TabList.js +0 -1
- package/lib/TabList.js.map +1 -1
- package/lib/components/Tab/Tab.js +5 -7
- package/lib/components/Tab/Tab.js.map +1 -1
- package/lib/components/Tab/Tab.types.js +1 -2
- package/lib/components/Tab/Tab.types.js.map +1 -1
- package/lib/components/Tab/index.js +0 -1
- package/lib/components/Tab/index.js.map +1 -1
- package/lib/components/Tab/renderTab.js +7 -12
- package/lib/components/Tab/renderTab.js.map +1 -1
- package/lib/components/Tab/useTab.js +65 -68
- package/lib/components/Tab/useTab.js.map +1 -1
- package/lib/components/Tab/useTabAnimatedIndicator.styles.js.map +1 -1
- package/lib/components/Tab/useTabStyles.styles.js.map +1 -1
- package/lib/components/TabList/TabList.js +6 -8
- package/lib/components/TabList/TabList.js.map +1 -1
- package/lib/components/TabList/TabList.types.js +0 -1
- package/lib/components/TabList/TabList.types.js.map +1 -1
- package/lib/components/TabList/TabListContext.js +19 -20
- package/lib/components/TabList/TabListContext.js.map +1 -1
- package/lib/components/TabList/index.js +0 -1
- package/lib/components/TabList/index.js.map +1 -1
- package/lib/components/TabList/renderTabList.js +6 -11
- package/lib/components/TabList/renderTabList.js.map +1 -1
- package/lib/components/TabList/useTabList.js +63 -70
- package/lib/components/TabList/useTabList.js.map +1 -1
- package/lib/components/TabList/useTabListContextValues.js +16 -28
- package/lib/components/TabList/useTabListContextValues.js.map +1 -1
- package/lib/components/TabList/useTabListStyles.styles.js.map +1 -1
- package/lib/index.js +0 -1
- package/lib/index.js.map +1 -1
- package/lib-commonjs/Tab.js +0 -3
- package/lib-commonjs/Tab.js.map +1 -1
- package/lib-commonjs/TabList.js +0 -3
- package/lib-commonjs/TabList.js.map +1 -1
- package/lib-commonjs/components/Tab/Tab.js +1 -3
- package/lib-commonjs/components/Tab/Tab.js.map +1 -1
- package/lib-commonjs/components/Tab/Tab.types.js +0 -3
- package/lib-commonjs/components/Tab/Tab.types.js.map +1 -1
- package/lib-commonjs/components/Tab/index.js +0 -3
- package/lib-commonjs/components/Tab/index.js.map +1 -1
- package/lib-commonjs/components/Tab/renderTab.js +1 -3
- package/lib-commonjs/components/Tab/renderTab.js.map +1 -1
- package/lib-commonjs/components/Tab/useTab.js +1 -3
- package/lib-commonjs/components/Tab/useTab.js.map +1 -1
- package/lib-commonjs/components/Tab/useTabAnimatedIndicator.styles.js +0 -2
- package/lib-commonjs/components/Tab/useTabAnimatedIndicator.styles.js.map +1 -1
- package/lib-commonjs/components/Tab/useTabStyles.styles.js +0 -2
- package/lib-commonjs/components/Tab/useTabStyles.styles.js.map +1 -1
- package/lib-commonjs/components/TabList/TabList.js +1 -3
- package/lib-commonjs/components/TabList/TabList.js.map +1 -1
- package/lib-commonjs/components/TabList/TabList.types.js +0 -3
- package/lib-commonjs/components/TabList/TabList.types.js.map +1 -1
- package/lib-commonjs/components/TabList/TabListContext.js +2 -4
- package/lib-commonjs/components/TabList/TabListContext.js.map +1 -1
- package/lib-commonjs/components/TabList/index.js +0 -3
- package/lib-commonjs/components/TabList/index.js.map +1 -1
- package/lib-commonjs/components/TabList/renderTabList.js +1 -3
- package/lib-commonjs/components/TabList/renderTabList.js.map +1 -1
- package/lib-commonjs/components/TabList/useTabList.js +1 -3
- package/lib-commonjs/components/TabList/useTabList.js.map +1 -1
- package/lib-commonjs/components/TabList/useTabListContextValues.js +1 -3
- package/lib-commonjs/components/TabList/useTabListContextValues.js.map +1 -1
- package/lib-commonjs/components/TabList/useTabListStyles.styles.js +0 -2
- package/lib-commonjs/components/TabList/useTabListStyles.styles.js.map +1 -1
- package/lib-commonjs/index.js +0 -3
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +7 -7
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,85 @@
|
|
|
2
2
|
"name": "@fluentui/react-tabs",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "Wed,
|
|
5
|
+
"date": "Wed, 31 May 2023 06:43:03 GMT",
|
|
6
|
+
"tag": "@fluentui/react-tabs_v9.3.17",
|
|
7
|
+
"version": "9.3.17",
|
|
8
|
+
"comments": {
|
|
9
|
+
"patch": [
|
|
10
|
+
{
|
|
11
|
+
"author": "seanmonahan@microsoft.com",
|
|
12
|
+
"package": "@fluentui/react-tabs",
|
|
13
|
+
"commit": "d640b972d7ac86bfb76ae6c6329f12cdd33b3b7c",
|
|
14
|
+
"comment": "chore: Update Griffel to v1.5.7."
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"author": "beachball",
|
|
18
|
+
"package": "@fluentui/react-tabs",
|
|
19
|
+
"comment": "Bump @fluentui/react-context-selector to v9.1.22",
|
|
20
|
+
"commit": "17ca96c6b7f684f36a5c63e40e78b4986a86c713"
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"author": "beachball",
|
|
24
|
+
"package": "@fluentui/react-tabs",
|
|
25
|
+
"comment": "Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.6",
|
|
26
|
+
"commit": "17ca96c6b7f684f36a5c63e40e78b4986a86c713"
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
"author": "beachball",
|
|
30
|
+
"package": "@fluentui/react-tabs",
|
|
31
|
+
"comment": "Bump @fluentui/react-tabster to v9.7.5",
|
|
32
|
+
"commit": "17ca96c6b7f684f36a5c63e40e78b4986a86c713"
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
"author": "beachball",
|
|
36
|
+
"package": "@fluentui/react-tabs",
|
|
37
|
+
"comment": "Bump @fluentui/react-utilities to v9.9.2",
|
|
38
|
+
"commit": "17ca96c6b7f684f36a5c63e40e78b4986a86c713"
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
"author": "beachball",
|
|
42
|
+
"package": "@fluentui/react-tabs",
|
|
43
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.22",
|
|
44
|
+
"commit": "17ca96c6b7f684f36a5c63e40e78b4986a86c713"
|
|
45
|
+
}
|
|
46
|
+
]
|
|
47
|
+
}
|
|
48
|
+
},
|
|
49
|
+
{
|
|
50
|
+
"date": "Thu, 25 May 2023 10:00:48 GMT",
|
|
51
|
+
"tag": "@fluentui/react-tabs_v9.3.16",
|
|
52
|
+
"version": "9.3.16",
|
|
53
|
+
"comments": {
|
|
54
|
+
"patch": [
|
|
55
|
+
{
|
|
56
|
+
"author": "beachball",
|
|
57
|
+
"package": "@fluentui/react-tabs",
|
|
58
|
+
"comment": "Bump @fluentui/react-context-selector to v9.1.21",
|
|
59
|
+
"commit": "8f7c1b7591b3e665ae39e1b22ab0f0b28fb795c4"
|
|
60
|
+
},
|
|
61
|
+
{
|
|
62
|
+
"author": "beachball",
|
|
63
|
+
"package": "@fluentui/react-tabs",
|
|
64
|
+
"comment": "Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.5",
|
|
65
|
+
"commit": "8f7c1b7591b3e665ae39e1b22ab0f0b28fb795c4"
|
|
66
|
+
},
|
|
67
|
+
{
|
|
68
|
+
"author": "beachball",
|
|
69
|
+
"package": "@fluentui/react-tabs",
|
|
70
|
+
"comment": "Bump @fluentui/react-tabster to v9.7.4",
|
|
71
|
+
"commit": "8f7c1b7591b3e665ae39e1b22ab0f0b28fb795c4"
|
|
72
|
+
},
|
|
73
|
+
{
|
|
74
|
+
"author": "beachball",
|
|
75
|
+
"package": "@fluentui/react-tabs",
|
|
76
|
+
"comment": "Bump @fluentui/react-utilities to v9.9.1",
|
|
77
|
+
"commit": "8f7c1b7591b3e665ae39e1b22ab0f0b28fb795c4"
|
|
78
|
+
}
|
|
79
|
+
]
|
|
80
|
+
}
|
|
81
|
+
},
|
|
82
|
+
{
|
|
83
|
+
"date": "Wed, 24 May 2023 20:45:34 GMT",
|
|
6
84
|
"tag": "@fluentui/react-tabs_v9.3.15",
|
|
7
85
|
"version": "9.3.15",
|
|
8
86
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,38 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-tabs
|
|
2
2
|
|
|
3
|
-
This log was last generated on Wed,
|
|
3
|
+
This log was last generated on Wed, 31 May 2023 06:43:03 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.3.17](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabs_v9.3.17)
|
|
8
|
+
|
|
9
|
+
Wed, 31 May 2023 06:43:03 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabs_v9.3.16..@fluentui/react-tabs_v9.3.17)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- chore: Update Griffel to v1.5.7. ([PR #27925](https://github.com/microsoft/fluentui/pull/27925) by seanmonahan@microsoft.com)
|
|
15
|
+
- Bump @fluentui/react-context-selector to v9.1.22 ([PR #28054](https://github.com/microsoft/fluentui/pull/28054) by beachball)
|
|
16
|
+
- Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.6 ([PR #28054](https://github.com/microsoft/fluentui/pull/28054) by beachball)
|
|
17
|
+
- Bump @fluentui/react-tabster to v9.7.5 ([PR #28054](https://github.com/microsoft/fluentui/pull/28054) by beachball)
|
|
18
|
+
- Bump @fluentui/react-utilities to v9.9.2 ([PR #28054](https://github.com/microsoft/fluentui/pull/28054) by beachball)
|
|
19
|
+
- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.22 ([PR #28054](https://github.com/microsoft/fluentui/pull/28054) by beachball)
|
|
20
|
+
|
|
21
|
+
## [9.3.16](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabs_v9.3.16)
|
|
22
|
+
|
|
23
|
+
Thu, 25 May 2023 10:00:48 GMT
|
|
24
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabs_v9.3.15..@fluentui/react-tabs_v9.3.16)
|
|
25
|
+
|
|
26
|
+
### Patches
|
|
27
|
+
|
|
28
|
+
- Bump @fluentui/react-context-selector to v9.1.21 ([PR #27988](https://github.com/microsoft/fluentui/pull/27988) by beachball)
|
|
29
|
+
- Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.5 ([PR #27988](https://github.com/microsoft/fluentui/pull/27988) by beachball)
|
|
30
|
+
- Bump @fluentui/react-tabster to v9.7.4 ([PR #27988](https://github.com/microsoft/fluentui/pull/27988) by beachball)
|
|
31
|
+
- Bump @fluentui/react-utilities to v9.9.1 ([PR #27988](https://github.com/microsoft/fluentui/pull/27988) by beachball)
|
|
32
|
+
|
|
7
33
|
## [9.3.15](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabs_v9.3.15)
|
|
8
34
|
|
|
9
|
-
Wed, 24 May 2023 20:
|
|
35
|
+
Wed, 24 May 2023 20:45:34 GMT
|
|
10
36
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabs_v9.3.14..@fluentui/react-tabs_v9.3.15)
|
|
11
37
|
|
|
12
38
|
### Patches
|
package/lib/Tab.js
CHANGED
package/lib/Tab.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"sources":["Tab.ts"],"sourcesContent":["export * from './components/Tab/index';\n"],"names":[],"mappings":"AAAA,cAAc,yBAAyB"}
|
package/lib/TabList.js
CHANGED
package/lib/TabList.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"sources":["TabList.ts"],"sourcesContent":["export * from './components/TabList/index';\n"],"names":[],"mappings":"AAAA,cAAc,6BAA6B"}
|
|
@@ -5,12 +5,10 @@ import { useTabStyles_unstable } from './useTabStyles.styles';
|
|
|
5
5
|
import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
|
|
6
6
|
/**
|
|
7
7
|
* A tab provides a selectable item in a tab list.
|
|
8
|
-
*/
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
return renderTab_unstable(state);
|
|
8
|
+
*/ export const Tab = /*#__PURE__*/ React.forwardRef((props, ref)=>{
|
|
9
|
+
const state = useTab_unstable(props, ref);
|
|
10
|
+
useTabStyles_unstable(state);
|
|
11
|
+
useCustomStyleHook_unstable('useTabStyles_unstable')(state);
|
|
12
|
+
return renderTab_unstable(state);
|
|
14
13
|
});
|
|
15
14
|
Tab.displayName = 'Tab';
|
|
16
|
-
//# sourceMappingURL=Tab.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"sources":["Tab.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTab_unstable } from './useTab';\nimport { renderTab_unstable } from './renderTab';\nimport { useTabStyles_unstable } from './useTabStyles.styles';\nimport type { TabProps } from './Tab.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * A tab provides a selectable item in a tab list.\n */\nexport const Tab: ForwardRefComponent<TabProps> = React.forwardRef((props, ref) => {\n const state = useTab_unstable(props, ref);\n\n useTabStyles_unstable(state);\n\n useCustomStyleHook_unstable('useTabStyles_unstable')(state);\n\n return renderTab_unstable(state);\n});\n\nTab.displayName = 'Tab';\n"],"names":["React","useTab_unstable","renderTab_unstable","useTabStyles_unstable","useCustomStyleHook_unstable","Tab","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,eAAe,QAAQ,WAAW;AAC3C,SAASC,kBAAkB,QAAQ,cAAc;AACjD,SAASC,qBAAqB,QAAQ,wBAAwB;AAG9D,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,oBAAqCL,MAAMM,UAAU,CAAC,CAACC,OAAOC,MAAQ;IACjF,MAAMC,QAAQR,gBAAgBM,OAAOC;IAErCL,sBAAsBM;IAEtBL,4BAA4B,yBAAyBK;IAErD,OAAOP,mBAAmBO;AAC5B,GAAG;AAEHJ,IAAIK,WAAW,GAAG"}
|
|
@@ -1,2 +1 @@
|
|
|
1
|
-
export {};
|
|
2
|
-
//# sourceMappingURL=Tab.types.js.map
|
|
1
|
+
export { };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"sources":["Tab.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\n/**\n * Any value that identifies a specific tab.\n */\nexport type TabValue = unknown;\n\nexport type TabSlots = {\n /**\n * Root of the component.\n */\n root: Slot<'button'>;\n\n /**\n * Icon that renders before the content.\n */\n icon?: Slot<'span'>;\n\n /**\n * Component children are placed in this slot\n * Avoid using the `children` property in this slot in favour of Component children whenever possible.\n */\n content: NonNullable<Slot<'span'>>;\n};\n\n/**\n * Tab Props\n */\nexport type TabProps = ComponentProps<Partial<TabSlots>> & {\n /**\n * A tab can be set to disable interaction.\n * @default false\n */\n disabled?: boolean;\n /**\n * The value that identifies this tab when selected.\n */\n value: TabValue;\n};\n\n/**\n * State used in rendering Tab\n */\nexport type TabState = ComponentState<TabSlots> &\n Pick<TabProps, 'value'> &\n Required<Pick<TabProps, 'disabled'>> & {\n /**\n * A tab supports 'transparent' and 'subtle' appearance.\n */\n appearance?: 'transparent' | 'subtle';\n /**\n * A tab can have only an icon slot filled and no content.\n */\n iconOnly: boolean;\n /**\n * If this tab is selected\n */\n selected: boolean;\n /**\n * When defined, tab content with selected style is rendered hidden to reserve space.\n * This keeps consistent content size between unselected and selected states.\n */\n contentReservedSpaceClassName?: string;\n /**\n * A tab can be either 'small', 'medium', or 'large' size.\n */\n size: 'small' | 'medium' | 'large';\n /**\n * A tab can arrange its content based on if the tabs in the list are arranged vertically.\n */\n vertical: boolean;\n };\n"],"names":[],"mappings":"AAAA,WAuEI"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './Tab';\nexport * from './Tab.types';\nexport * from './renderTab';\nexport * from './useTab';\nexport * from './useTabStyles.styles';\nexport * from './useTabAnimatedIndicator.styles';\n"],"names":[],"mappings":"AAAA,cAAc,QAAQ;AACtB,cAAc,cAAc;AAC5B,cAAc,cAAc;AAC5B,cAAc,WAAW;AACzB,cAAc,wBAAwB;AACtC,cAAc,mCAAmC"}
|
|
@@ -1,16 +1,11 @@
|
|
|
1
|
-
/** @jsxRuntime classic */ /** @jsx createElement */import { createElement } from '@fluentui/react-jsx-runtime';
|
|
1
|
+
/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';
|
|
2
2
|
import { getSlotsNext } from '@fluentui/react-utilities';
|
|
3
3
|
/**
|
|
4
4
|
* Render the final JSX of Tab
|
|
5
|
-
*/
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
return /*#__PURE__*/createElement(slots.root, slotProps.root, slots.icon && /*#__PURE__*/createElement(slots.icon, slotProps.icon), !state.iconOnly && /*#__PURE__*/createElement(slots.content, slotProps.content), !state.selected && !state.iconOnly && state.contentReservedSpaceClassName !== undefined && /*#__PURE__*/createElement(slots.content, {
|
|
12
|
-
...slotProps.content,
|
|
13
|
-
className: state.contentReservedSpaceClassName
|
|
14
|
-
}));
|
|
5
|
+
*/ export const renderTab_unstable = (state)=>{
|
|
6
|
+
const { slots , slotProps } = getSlotsNext(state);
|
|
7
|
+
return /*#__PURE__*/ createElement(slots.root, slotProps.root, slots.icon && /*#__PURE__*/ createElement(slots.icon, slotProps.icon), !state.iconOnly && /*#__PURE__*/ createElement(slots.content, slotProps.content), !state.selected && !state.iconOnly && state.contentReservedSpaceClassName !== undefined && /*#__PURE__*/ createElement(slots.content, {
|
|
8
|
+
...slotProps.content,
|
|
9
|
+
className: state.contentReservedSpaceClassName
|
|
10
|
+
}));
|
|
15
11
|
};
|
|
16
|
-
//# sourceMappingURL=renderTab.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"sources":["renderTab.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport type { TabState, TabSlots } from './Tab.types';\n\n/**\n * Render the final JSX of Tab\n */\nexport const renderTab_unstable = (state: TabState) => {\n const { slots, slotProps } = getSlotsNext<TabSlots>(state);\n\n return (\n <slots.root {...slotProps.root}>\n {slots.icon && <slots.icon {...slotProps.icon} />}\n {!state.iconOnly && <slots.content {...slotProps.content} />}\n {!state.selected && !state.iconOnly && state.contentReservedSpaceClassName !== undefined && (\n <slots.content {...slotProps.content} className={state.contentReservedSpaceClassName} />\n )}\n </slots.root>\n );\n};\n"],"names":["createElement","getSlotsNext","renderTab_unstable","state","slots","slotProps","root","icon","iconOnly","content","selected","contentReservedSpaceClassName","undefined","className"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,YAAY,QAAQ,4BAA4B;AAGzD;;CAEC,GACD,OAAO,MAAMC,qBAAqB,CAACC,QAAoB;IACrD,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGJ,aAAuBE;IAEpD,qBACE,AAbJ,cAaKC,MAAME,IAAI,EAAKD,UAAUC,IAAI,EAC3BF,MAAMG,IAAI,kBAAI,AAdrB,cAcsBH,MAAMG,IAAI,EAAKF,UAAUE,IAAI,GAC5C,CAACJ,MAAMK,QAAQ,kBAAI,AAf1B,cAe2BJ,MAAMK,OAAO,EAAKJ,UAAUI,OAAO,GACvD,CAACN,MAAMO,QAAQ,IAAI,CAACP,MAAMK,QAAQ,IAAIL,MAAMQ,6BAA6B,KAAKC,2BAC7E,AAjBR,cAiBSR,MAAMK,OAAO;QAAE,GAAGJ,UAAUI,OAAO;QAAEI,WAAWV,MAAMQ,6BAA6B;;AAI5F,EAAE"}
|
|
@@ -9,75 +9,72 @@ import { useTabListContext_unstable } from '../TabList/TabListContext';
|
|
|
9
9
|
*
|
|
10
10
|
* @param props - props from this instance of Tab
|
|
11
11
|
* @param ref - reference to root HTMLElement of Tab
|
|
12
|
-
*/
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
12
|
+
*/ export const useTab_unstable = (props, ref)=>{
|
|
13
|
+
const { content , disabled: tabDisabled = false , icon , onClick , value } = props;
|
|
14
|
+
const appearance = useTabListContext_unstable((ctx)=>ctx.appearance);
|
|
15
|
+
const reserveSelectedTabSpace = useTabListContext_unstable((ctx)=>ctx.reserveSelectedTabSpace);
|
|
16
|
+
const listDisabled = useTabListContext_unstable((ctx)=>ctx.disabled);
|
|
17
|
+
const selected = useTabListContext_unstable((ctx)=>ctx.selectedValue === value);
|
|
18
|
+
const onRegister = useTabListContext_unstable((ctx)=>ctx.onRegister);
|
|
19
|
+
const onUnregister = useTabListContext_unstable((ctx)=>ctx.onUnregister);
|
|
20
|
+
const onSelect = useTabListContext_unstable((ctx)=>ctx.onSelect);
|
|
21
|
+
const size = useTabListContext_unstable((ctx)=>ctx.size);
|
|
22
|
+
const vertical = useTabListContext_unstable((ctx)=>!!ctx.vertical);
|
|
23
|
+
const disabled = listDisabled || tabDisabled;
|
|
24
|
+
const innerRef = React.useRef(null);
|
|
25
|
+
const onTabClick = useEventCallback(mergeCallbacks(onClick, (event)=>onSelect(event, {
|
|
26
|
+
value
|
|
27
|
+
})));
|
|
28
|
+
React.useEffect(()=>{
|
|
29
|
+
onRegister({
|
|
30
|
+
value,
|
|
31
|
+
ref: innerRef
|
|
32
|
+
});
|
|
33
|
+
return ()=>{
|
|
34
|
+
onUnregister({
|
|
35
|
+
value,
|
|
36
|
+
ref: innerRef
|
|
37
|
+
});
|
|
38
|
+
};
|
|
39
|
+
}, [
|
|
40
|
+
onRegister,
|
|
41
|
+
onUnregister,
|
|
42
|
+
innerRef,
|
|
43
|
+
value
|
|
44
|
+
]);
|
|
45
|
+
const iconShorthand = resolveShorthand(icon);
|
|
46
|
+
const contentShorthand = resolveShorthand(content, {
|
|
47
|
+
required: true,
|
|
48
|
+
defaultProps: {
|
|
49
|
+
children: props.children
|
|
50
|
+
}
|
|
39
51
|
});
|
|
40
|
-
return
|
|
41
|
-
|
|
52
|
+
return {
|
|
53
|
+
components: {
|
|
54
|
+
root: 'button',
|
|
55
|
+
icon: 'span',
|
|
56
|
+
content: 'span'
|
|
57
|
+
},
|
|
58
|
+
root: getNativeElementProps('button', {
|
|
59
|
+
ref: useMergedRefs(ref, innerRef),
|
|
60
|
+
role: 'tab',
|
|
61
|
+
type: 'button',
|
|
62
|
+
// aria-selected undefined indicates it is not selectable
|
|
63
|
+
// according to https://www.w3.org/TR/wai-aria-1.1/#aria-selected
|
|
64
|
+
'aria-selected': disabled ? undefined : `${selected}`,
|
|
65
|
+
...props,
|
|
66
|
+
disabled,
|
|
67
|
+
onClick: onTabClick
|
|
68
|
+
}),
|
|
69
|
+
icon: iconShorthand,
|
|
70
|
+
iconOnly: Boolean((iconShorthand === null || iconShorthand === void 0 ? void 0 : iconShorthand.children) && !contentShorthand.children),
|
|
71
|
+
content: contentShorthand,
|
|
72
|
+
appearance,
|
|
73
|
+
contentReservedSpaceClassName: reserveSelectedTabSpace ? '' : undefined,
|
|
74
|
+
disabled,
|
|
75
|
+
selected,
|
|
76
|
+
size,
|
|
42
77
|
value,
|
|
43
|
-
|
|
44
|
-
});
|
|
78
|
+
vertical
|
|
45
79
|
};
|
|
46
|
-
}, [onRegister, onUnregister, innerRef, value]);
|
|
47
|
-
const iconShorthand = resolveShorthand(icon);
|
|
48
|
-
const contentShorthand = resolveShorthand(content, {
|
|
49
|
-
required: true,
|
|
50
|
-
defaultProps: {
|
|
51
|
-
children: props.children
|
|
52
|
-
}
|
|
53
|
-
});
|
|
54
|
-
return {
|
|
55
|
-
components: {
|
|
56
|
-
root: 'button',
|
|
57
|
-
icon: 'span',
|
|
58
|
-
content: 'span'
|
|
59
|
-
},
|
|
60
|
-
root: getNativeElementProps('button', {
|
|
61
|
-
ref: useMergedRefs(ref, innerRef),
|
|
62
|
-
role: 'tab',
|
|
63
|
-
type: 'button',
|
|
64
|
-
// aria-selected undefined indicates it is not selectable
|
|
65
|
-
// according to https://www.w3.org/TR/wai-aria-1.1/#aria-selected
|
|
66
|
-
'aria-selected': disabled ? undefined : `${selected}`,
|
|
67
|
-
...props,
|
|
68
|
-
disabled,
|
|
69
|
-
onClick: onTabClick
|
|
70
|
-
}),
|
|
71
|
-
icon: iconShorthand,
|
|
72
|
-
iconOnly: Boolean((iconShorthand === null || iconShorthand === void 0 ? void 0 : iconShorthand.children) && !contentShorthand.children),
|
|
73
|
-
content: contentShorthand,
|
|
74
|
-
appearance,
|
|
75
|
-
contentReservedSpaceClassName: reserveSelectedTabSpace ? '' : undefined,
|
|
76
|
-
disabled,
|
|
77
|
-
selected,
|
|
78
|
-
size,
|
|
79
|
-
value,
|
|
80
|
-
vertical
|
|
81
|
-
};
|
|
82
80
|
};
|
|
83
|
-
//# sourceMappingURL=useTab.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"sources":["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"],"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"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,qBAAqB,EACrBC,cAAc,EACdC,gBAAgB,EAChBC,gBAAgB,EAChBC,aAAa,QACR,4BAA4B;AAEnC,SAASC,0BAA0B,QAAQ,4BAA4B;AAGvE;;;;;;;;CAQC,GACD,OAAO,MAAMC,kBAAkB,CAACC,OAAiBC,MAA0C;IACzF,MAAM,EAAEC,QAAO,EAAEC,UAAUC,cAAc,KAAK,CAAA,EAAEC,KAAI,EAAEC,QAAO,EAAEC,MAAK,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,IAAI;IAC/C,MAAMC,aAAazB,iBAAiBF,eAAeY,SAAS,CAACgB,QAA0BN,SAASM,OAAO;YAAEf;QAAM;IAE/Gf,MAAM+B,SAAS,CAAC,IAAM;QACpBT,WAAW;YACTP;YACAN,KAAKkB;QACP;QAEA,OAAO,IAAM;YACXJ,aAAa;gBAAER;gBAAON,KAAKkB;YAAS;QACtC;IACF,GAAG;QAACL;QAAYC;QAAcI;QAAUZ;KAAM;IAE9C,MAAMiB,gBAAgB7B,iBAAiBU;IACvC,MAAMoB,mBAAmB9B,iBAAiBO,SAAS;QAAEwB,UAAU,IAAI;QAAEC,cAAc;YAAEC,UAAU5B,MAAM4B,QAAQ;QAAC;IAAE;IAChH,OAAO;QACLC,YAAY;YACVC,MAAM;YACNzB,MAAM;YACNH,SAAS;QACX;QACA4B,MAAMrC,sBAAsB,UAAU;YACpCQ,KAAKJ,cAAcI,KAAKkB;YACxBY,MAAM;YACNC,MAAM;YACN,yDAAyD;YACzD,iEAAiE;YACjE,iBAAiB7B,WAAW8B,YAAY,CAAC,EAAErB,SAAS,CAAC;YACrD,GAAGZ,KAAK;YACRG;YACAG,SAASe;QACX;QACAhB,MAAMmB;QACNU,UAAUC,QAAQX,CAAAA,0BAAAA,2BAAAA,KAAAA,IAAAA,cAAeI,QAAQ,AAAD,KAAK,CAACH,iBAAiBG,QAAQ;QACvE1B,SAASuB;QACTjB;QACA4B,+BAA+B1B,0BAA0B,KAAKuB,SAAS;QACvE9B;QACAS;QACAK;QACAV;QACAW;IACF;AACF,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","__styles","mergeClasses","shorthands","useTabListContext_unstable","tokens","tabIndicatorCssVars_unstable","offsetVar","scaleVar","useActiveIndicatorStyles","base","B68tc82","Bmxbyg5","animated","Ba2ppi3","F2fol1","B1dyfl9","B0vmy72","u9bimw","horizontal","sjv3b2","b1kco5","vertical","d","m","calculateTabRect","element","_element_parentElement","parentRect","parentElement","getBoundingClientRect","x","y","width","height","tabRect","undefined","getRegisteredTabRect","registeredTabs","value","_registeredTabs_JSON_stringify","JSON","stringify","ref","current","useTabAnimatedIndicatorStyles_unstable","state","disabled","selected","activeIndicatorStyles","lastAnimatedFrom","setLastAnimatedFrom","useState","animationValues","setAnimationValues","offset","scale","getRegisteredTabs","ctx","useEffect","previousSelectedValue","selectedValue","previousSelectedTabRect","selectedTabRect","animating","root","className","rootCssVars","style"],"sources":["../../../src/components/Tab/useTabAnimatedIndicator.styles.ts"],"sourcesContent":["import * as React from 'react';\nimport type { TabState, TabValue } from './Tab.types';\n\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { useTabListContext_unstable } from '../TabList/TabListContext';\nimport { TabRegisterData } from '../TabList/TabList.types';\nimport { tokens } from '@fluentui/react-theme';\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nconst tabIndicatorCssVars_unstable = {\n offsetVar: '--fui-Tab__indicator--offset',\n scaleVar: '--fui-Tab__indicator--scale',\n};\n\nconst useActiveIndicatorStyles = makeStyles({\n base: {\n // overflow is required to allow the selection indicator to animate outside the tab area.\n ...shorthands.overflow('visible'),\n },\n animated: {\n '::after': {\n transitionProperty: 'transform',\n transitionDuration: `${tokens.durationSlow}`,\n transitionTimingFunction: `${tokens.curveDecelerateMax}`,\n },\n '@media (prefers-reduced-motion: reduce)': {\n '::after': {\n transitionProperty: 'none',\n transitionDuration: '0.01ms',\n },\n },\n },\n horizontal: {\n '::after': {\n transformOrigin: 'left',\n transform: `translateX(var(${tabIndicatorCssVars_unstable.offsetVar}))\n scaleX(var(${tabIndicatorCssVars_unstable.scaleVar}))`,\n },\n },\n vertical: {\n '::after': {\n transformOrigin: 'top',\n transform: `translateY(var(${tabIndicatorCssVars_unstable.offsetVar}))\n scaleY(var(${tabIndicatorCssVars_unstable.scaleVar}))`,\n },\n },\n});\n\nconst calculateTabRect = (element: HTMLElement) => {\n if (element) {\n const parentRect = element.parentElement?.getBoundingClientRect() || { x: 0, y: 0, width: 0, height: 0 };\n const tabRect = element.getBoundingClientRect();\n\n return {\n x: tabRect.x - parentRect.x,\n y: tabRect.y - parentRect.y,\n width: tabRect.width,\n height: tabRect.height,\n };\n }\n return undefined;\n};\n\nconst getRegisteredTabRect = (registeredTabs: Record<string, TabRegisterData>, value?: TabValue) => {\n const element =\n value !== undefined && value !== null ? registeredTabs[JSON.stringify(value)]?.ref.current : undefined;\n return element ? calculateTabRect(element) : undefined;\n};\n\n/**\n * Adds additional styling to the active tab selection indicator to create a sliding animation.\n */\nexport const useTabAnimatedIndicatorStyles_unstable = (state: TabState): TabState => {\n const { disabled, selected, vertical } = state;\n\n const activeIndicatorStyles = useActiveIndicatorStyles();\n const [lastAnimatedFrom, setLastAnimatedFrom] = React.useState<TabValue>();\n const [animationValues, setAnimationValues] = React.useState({ offset: 0, scale: 1 });\n const getRegisteredTabs = useTabListContext_unstable(ctx => ctx.getRegisteredTabs);\n\n React.useEffect(() => {\n if (lastAnimatedFrom) {\n setAnimationValues({ offset: 0, scale: 1 });\n }\n }, [lastAnimatedFrom]);\n\n if (selected) {\n const { previousSelectedValue, selectedValue, registeredTabs } = getRegisteredTabs();\n const previousSelectedTabRect = getRegisteredTabRect(registeredTabs, previousSelectedValue);\n const selectedTabRect = getRegisteredTabRect(registeredTabs, selectedValue);\n\n if (\n selectedTabRect &&\n previousSelectedTabRect &&\n previousSelectedValue &&\n lastAnimatedFrom !== previousSelectedValue\n ) {\n const offset = vertical\n ? previousSelectedTabRect.y - selectedTabRect.y\n : previousSelectedTabRect.x - selectedTabRect.x;\n\n const scale = vertical\n ? previousSelectedTabRect.height / selectedTabRect.height\n : previousSelectedTabRect.width / selectedTabRect.width;\n\n setAnimationValues({ offset, scale });\n setLastAnimatedFrom(previousSelectedValue);\n }\n } else if (lastAnimatedFrom) {\n // need to clear the last animated from so that if this tab is selected again\n // from the same previous tab as last time, that animation still happens.\n setLastAnimatedFrom(undefined);\n }\n\n // do not apply any animation if the tab is disabled\n if (disabled) {\n return state;\n }\n\n // the animation should only happen as the selection indicator returns to its\n // original position and not when set at the previous tabs position.\n const animating = animationValues.offset === 0 && animationValues.scale === 1;\n\n state.root.className = mergeClasses(\n state.root.className,\n selected && activeIndicatorStyles.base,\n selected && animating && activeIndicatorStyles.animated,\n selected && (vertical ? activeIndicatorStyles.vertical : activeIndicatorStyles.horizontal),\n );\n\n const rootCssVars = {\n [tabIndicatorCssVars_unstable.offsetVar]: `${animationValues.offset}px`,\n [tabIndicatorCssVars_unstable.scaleVar]: `${animationValues.scale}`,\n };\n\n state.root.style = {\n ...rootCssVars,\n ...state.root.style,\n };\n\n return state;\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AAGvB,SAAAC,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ;AACrD,SAASC,0BAA0B,QAAQ;AAE3C,SAASC,MAAM,QAAQ;AAEvB;AACA,MAAMC,4BAAA,GAA+B;EACnCC,SAAA,EAAW;EACXC,QAAA,EAAU;AACZ;AAEA,MAAMC,wBAAA,gBAA2BR,QAAA;EAAAS,IAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAC,QAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,UAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,QAAA;IAAAF,MAAA;IAAAC,MAAA;EAAA;AAAA;EAAAE,CAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,EAgCjC;AAEA,MAAMC,gBAAA,GAAoBC,OAAA,IAAyB;EACjD,IAAIA,OAAA,EAAS;QACQC,sBAAA;IAAnB,MAAMC,UAAA,GAAa,EAAAD,sBAAA,GAAAD,OAAA,CAAQG,aAAa,cAArBF,sBAAA,uBAAAA,sBAAA,CAAuBG,qBAAA,OAA2B;MAAEC,CAAA,EAAG;MAAGC,CAAA,EAAG;MAAGC,KAAA,EAAO;MAAGC,MAAA,EAAQ;IAAE;IACvG,MAAMC,OAAA,GAAUT,OAAA,CAAQI,qBAAqB;IAE7C,OAAO;MACLC,CAAA,EAAGI,OAAA,CAAQJ,CAAC,GAAGH,UAAA,CAAWG,CAAC;MAC3BC,CAAA,EAAGG,OAAA,CAAQH,CAAC,GAAGJ,UAAA,CAAWI,CAAC;MAC3BC,KAAA,EAAOE,OAAA,CAAQF,KAAK;MACpBC,MAAA,EAAQC,OAAA,CAAQD;IAClB;EACF;EACA,OAAOE,SAAA;AACT;AAEA,MAAMC,oBAAA,GAAuBA,CAACC,cAAA,EAAiDC,KAAA,KAAqB;MAExDC,8BAAA;EAD1C,MAAMd,OAAA,GACJa,KAAA,KAAUH,SAAA,IAAaG,KAAA,KAAU,IAAI,GAAG,CAAAC,8BAAA,GAAAF,cAAc,CAACG,IAAA,CAAKC,SAAS,CAACH,KAAA,EAAO,cAArCC,8BAAA,uBAAAA,8BAAA,CAAuCG,GAAA,CAAIC,OAAO,GAAGR,SAAS;EACxG,OAAOV,OAAA,GAAUD,gBAAA,CAAiBC,OAAA,IAAWU,SAAS;AACxD;AAEA;;;AAGA,OAAO,MAAMS,sCAAA,GAA0CC,KAAA,IAA8B;EACnF,MAAM;IAAEC,QAAA;IAAUC,QAAA;IAAU1B;EAAQ,CAAE,GAAGwB,KAAA;EAEzC,MAAMG,qBAAA,GAAwBxC,wBAAA;EAC9B,MAAM,CAACyC,gBAAA,EAAkBC,mBAAA,CAAoB,GAAGnD,KAAA,CAAMoD,QAAQ;EAC9D,MAAM,CAACC,eAAA,EAAiBC,kBAAA,CAAmB,GAAGtD,KAAA,CAAMoD,QAAQ,CAAC;IAAEG,MAAA,EAAQ;IAAGC,KAAA,EAAO;EAAE;EACnF,MAAMC,iBAAA,GAAoBrD,0BAAA,CAA2BsD,GAAA,IAAOA,GAAA,CAAID,iBAAiB;EAEjFzD,KAAA,CAAM2D,SAAS,CAAC,MAAM;IACpB,IAAIT,gBAAA,EAAkB;MACpBI,kBAAA,CAAmB;QAAEC,MAAA,EAAQ;QAAGC,KAAA,EAAO;MAAE;IAC3C;EACF,GAAG,CAACN,gBAAA,CAAiB;EAErB,IAAIF,QAAA,EAAU;IACZ,MAAM;MAAEY,qBAAA;MAAuBC,aAAA;MAAevB;IAAc,CAAE,GAAGmB,iBAAA;IACjE,MAAMK,uBAAA,GAA0BzB,oBAAA,CAAqBC,cAAA,EAAgBsB,qBAAA;IACrE,MAAMG,eAAA,GAAkB1B,oBAAA,CAAqBC,cAAA,EAAgBuB,aAAA;IAE7D,IACEE,eAAA,IACAD,uBAAA,IACAF,qBAAA,IACAV,gBAAA,KAAqBU,qBAAA,EACrB;MACA,MAAML,MAAA,GAASjC,QAAA,GACXwC,uBAAA,CAAwB9B,CAAC,GAAG+B,eAAA,CAAgB/B,CAAC,GAC7C8B,uBAAA,CAAwB/B,CAAC,GAAGgC,eAAA,CAAgBhC,CAAC;MAEjD,MAAMyB,KAAA,GAAQlC,QAAA,GACVwC,uBAAA,CAAwB5B,MAAM,GAAG6B,eAAA,CAAgB7B,MAAM,GACvD4B,uBAAA,CAAwB7B,KAAK,GAAG8B,eAAA,CAAgB9B,KAAK;MAEzDqB,kBAAA,CAAmB;QAAEC,MAAA;QAAQC;MAAM;MACnCL,mBAAA,CAAoBS,qBAAA;IACtB;EACF,OAAO,IAAIV,gBAAA,EAAkB;IAC3B;IACA;IACAC,mBAAA,CAAoBf,SAAA;EACtB;EAEA;EACA,IAAIW,QAAA,EAAU;IACZ,OAAOD,KAAA;EACT;EAEA;EACA;EACA,MAAMkB,SAAA,GAAYX,eAAA,CAAgBE,MAAM,KAAK,KAAKF,eAAA,CAAgBG,KAAK,KAAK;EAE5EV,KAAA,CAAMmB,IAAI,CAACC,SAAS,GAAGhE,YAAA,CACrB4C,KAAA,CAAMmB,IAAI,CAACC,SAAS,EACpBlB,QAAA,IAAYC,qBAAA,CAAsBvC,IAAI,EACtCsC,QAAA,IAAYgB,SAAA,IAAaf,qBAAA,CAAsBpC,QAAQ,EACvDmC,QAAA,KAAa1B,QAAA,GAAW2B,qBAAA,CAAsB3B,QAAQ,GAAG2B,qBAAA,CAAsB9B,UAAU,CAAD;EAG1F,MAAMgD,WAAA,GAAc;IAClB,CAAC7D,4BAAA,CAA6BC,SAAS,GAAI,GAAE8C,eAAA,CAAgBE,MAAO,IAAG;IACvE,CAACjD,4BAAA,CAA6BE,QAAQ,GAAI,GAAE6C,eAAA,CAAgBG,KAAM;EACpE;EAEAV,KAAA,CAAMmB,IAAI,CAACG,KAAK,GAAG;IACjB,GAAGD,WAAW;IACd,GAAGrB,KAAA,CAAMmB,IAAI,CAACG;EAChB;EAEA,OAAOtB,KAAA;AACT"}
|
|
1
|
+
{"version":3,"names":["React","__styles","mergeClasses","shorthands","useTabListContext_unstable","tokens","tabIndicatorCssVars_unstable","offsetVar","scaleVar","useActiveIndicatorStyles","base","B68tc82","Bmxbyg5","animated","Ba2ppi3","F2fol1","B1dyfl9","B0vmy72","u9bimw","horizontal","sjv3b2","b1kco5","vertical","d","m","calculateTabRect","element","_element_parentElement","parentRect","parentElement","getBoundingClientRect","x","y","width","height","tabRect","undefined","getRegisteredTabRect","registeredTabs","value","_registeredTabs_JSON_stringify","JSON","stringify","ref","current","useTabAnimatedIndicatorStyles_unstable","state","disabled","selected","activeIndicatorStyles","lastAnimatedFrom","setLastAnimatedFrom","useState","animationValues","setAnimationValues","offset","scale","getRegisteredTabs","ctx","useEffect","previousSelectedValue","selectedValue","previousSelectedTabRect","selectedTabRect","animating","root","className","rootCssVars","style"],"sources":["useTabAnimatedIndicator.styles.js"],"sourcesContent":["import * as React from 'react';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { useTabListContext_unstable } from '../TabList/TabListContext';\nimport { tokens } from '@fluentui/react-theme';\n// eslint-disable-next-line @typescript-eslint/naming-convention\nconst tabIndicatorCssVars_unstable = {\n offsetVar: '--fui-Tab__indicator--offset',\n scaleVar: '--fui-Tab__indicator--scale'\n};\nconst useActiveIndicatorStyles = makeStyles({\n base: {\n // overflow is required to allow the selection indicator to animate outside the tab area.\n ...shorthands.overflow('visible')\n },\n animated: {\n '::after': {\n transitionProperty: 'transform',\n transitionDuration: `${tokens.durationSlow}`,\n transitionTimingFunction: `${tokens.curveDecelerateMax}`\n },\n '@media (prefers-reduced-motion: reduce)': {\n '::after': {\n transitionProperty: 'none',\n transitionDuration: '0.01ms'\n }\n }\n },\n horizontal: {\n '::after': {\n transformOrigin: 'left',\n transform: `translateX(var(${tabIndicatorCssVars_unstable.offsetVar}))\n scaleX(var(${tabIndicatorCssVars_unstable.scaleVar}))`\n }\n },\n vertical: {\n '::after': {\n transformOrigin: 'top',\n transform: `translateY(var(${tabIndicatorCssVars_unstable.offsetVar}))\n scaleY(var(${tabIndicatorCssVars_unstable.scaleVar}))`\n }\n }\n});\nconst calculateTabRect = (element)=>{\n if (element) {\n var _element_parentElement;\n const parentRect = ((_element_parentElement = element.parentElement) === null || _element_parentElement === void 0 ? void 0 : _element_parentElement.getBoundingClientRect()) || {\n x: 0,\n y: 0,\n width: 0,\n height: 0\n };\n const tabRect = element.getBoundingClientRect();\n return {\n x: tabRect.x - parentRect.x,\n y: tabRect.y - parentRect.y,\n width: tabRect.width,\n height: tabRect.height\n };\n }\n return undefined;\n};\nconst getRegisteredTabRect = (registeredTabs, value)=>{\n var _registeredTabs_JSON_stringify;\n const element = value !== undefined && value !== null ? (_registeredTabs_JSON_stringify = registeredTabs[JSON.stringify(value)]) === null || _registeredTabs_JSON_stringify === void 0 ? void 0 : _registeredTabs_JSON_stringify.ref.current : undefined;\n return element ? calculateTabRect(element) : undefined;\n};\n/**\n * Adds additional styling to the active tab selection indicator to create a sliding animation.\n */ export const useTabAnimatedIndicatorStyles_unstable = (state)=>{\n const { disabled , selected , vertical } = state;\n const activeIndicatorStyles = useActiveIndicatorStyles();\n const [lastAnimatedFrom, setLastAnimatedFrom] = React.useState();\n const [animationValues, setAnimationValues] = React.useState({\n offset: 0,\n scale: 1\n });\n const getRegisteredTabs = useTabListContext_unstable((ctx)=>ctx.getRegisteredTabs);\n React.useEffect(()=>{\n if (lastAnimatedFrom) {\n setAnimationValues({\n offset: 0,\n scale: 1\n });\n }\n }, [\n lastAnimatedFrom\n ]);\n if (selected) {\n const { previousSelectedValue , selectedValue , registeredTabs } = getRegisteredTabs();\n const previousSelectedTabRect = getRegisteredTabRect(registeredTabs, previousSelectedValue);\n const selectedTabRect = getRegisteredTabRect(registeredTabs, selectedValue);\n if (selectedTabRect && previousSelectedTabRect && previousSelectedValue && lastAnimatedFrom !== previousSelectedValue) {\n const offset = vertical ? previousSelectedTabRect.y - selectedTabRect.y : previousSelectedTabRect.x - selectedTabRect.x;\n const scale = vertical ? previousSelectedTabRect.height / selectedTabRect.height : previousSelectedTabRect.width / selectedTabRect.width;\n setAnimationValues({\n offset,\n scale\n });\n setLastAnimatedFrom(previousSelectedValue);\n }\n } else if (lastAnimatedFrom) {\n // need to clear the last animated from so that if this tab is selected again\n // from the same previous tab as last time, that animation still happens.\n setLastAnimatedFrom(undefined);\n }\n // do not apply any animation if the tab is disabled\n if (disabled) {\n return state;\n }\n // the animation should only happen as the selection indicator returns to its\n // original position and not when set at the previous tabs position.\n const animating = animationValues.offset === 0 && animationValues.scale === 1;\n state.root.className = mergeClasses(state.root.className, selected && activeIndicatorStyles.base, selected && animating && activeIndicatorStyles.animated, selected && (vertical ? activeIndicatorStyles.vertical : activeIndicatorStyles.horizontal));\n const rootCssVars = {\n [tabIndicatorCssVars_unstable.offsetVar]: `${animationValues.offset}px`,\n [tabIndicatorCssVars_unstable.scaleVar]: `${animationValues.scale}`\n };\n state.root.style = {\n ...rootCssVars,\n ...state.root.style\n };\n return state;\n};\n"],"mappings":"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"}
|