@fluentui/react-tabs 9.0.1 → 9.0.4

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 (12) hide show
  1. package/CHANGELOG.json +116 -1
  2. package/CHANGELOG.md +37 -2
  3. package/README.md +2 -2
  4. package/lib/components/Tab/useTabStyles.js +12 -10
  5. package/lib/components/Tab/useTabStyles.js.map +1 -1
  6. package/lib/components/TabList/TabListContext.js +2 -1
  7. package/lib/components/TabList/TabListContext.js.map +1 -1
  8. package/lib-commonjs/components/Tab/useTabStyles.js +12 -10
  9. package/lib-commonjs/components/Tab/useTabStyles.js.map +1 -1
  10. package/lib-commonjs/components/TabList/TabListContext.js +2 -1
  11. package/lib-commonjs/components/TabList/TabListContext.js.map +1 -1
  12. package/package.json +8 -7
package/CHANGELOG.json CHANGED
@@ -2,7 +2,122 @@
2
2
  "name": "@fluentui/react-tabs",
3
3
  "entries": [
4
4
  {
5
- "date": "Tue, 28 Jun 2022 17:37:53 GMT",
5
+ "date": "Wed, 03 Aug 2022 16:00:31 GMT",
6
+ "tag": "@fluentui/react-tabs_v9.0.4",
7
+ "version": "9.0.4",
8
+ "comments": {
9
+ "none": [
10
+ {
11
+ "author": "lingfangao@hotmail.com",
12
+ "package": "@fluentui/react-tabs",
13
+ "commit": "99cc385631d04a76ee10ebc143cb9fecd99640b6",
14
+ "comment": "chore: Add `prerelease` as disallowed changetype for 9.0.0 packages"
15
+ },
16
+ {
17
+ "author": "bernardo.sunderhus@gmail.com",
18
+ "package": "@fluentui/react-tabs",
19
+ "commit": "d966ea3d9169f2e8d69f0d2a4daf86fe4ca328d6",
20
+ "comment": "disables eslint rule @fluentui/no-context-default-value for local component context"
21
+ }
22
+ ],
23
+ "patch": [
24
+ {
25
+ "author": "miroslav.stastny@microsoft.com",
26
+ "package": "@fluentui/react-tabs",
27
+ "commit": "08563664778fd80284561d3c9d254307a0a32362",
28
+ "comment": "chore: Bump Griffel dependencies"
29
+ },
30
+ {
31
+ "author": "beachball",
32
+ "package": "@fluentui/react-tabs",
33
+ "comment": "Bump @fluentui/react-tabster to v9.1.0",
34
+ "commit": "54bc6105c5c9c9023da35d4670239e44117ed4a5"
35
+ },
36
+ {
37
+ "author": "beachball",
38
+ "package": "@fluentui/react-tabs",
39
+ "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.12",
40
+ "commit": "54bc6105c5c9c9023da35d4670239e44117ed4a5"
41
+ }
42
+ ]
43
+ }
44
+ },
45
+ {
46
+ "date": "Thu, 14 Jul 2022 21:21:05 GMT",
47
+ "tag": "@fluentui/react-tabs_v9.0.3",
48
+ "version": "9.0.3",
49
+ "comments": {
50
+ "patch": [
51
+ {
52
+ "author": "Humberto.Morimoto@microsoft.com",
53
+ "package": "@fluentui/react-tabs",
54
+ "commit": "802bc4e3730a88b0fc61b5bf42ef7fc6b6543fe2",
55
+ "comment": "fix: Fixing bad version bump of @fluentui/react-utilities."
56
+ },
57
+ {
58
+ "author": "beachball",
59
+ "package": "@fluentui/react-tabs",
60
+ "comment": "Bump @fluentui/react-context-selector to v9.0.2",
61
+ "commit": "79b513146194367544160f364b0a7dd749ed93e4"
62
+ },
63
+ {
64
+ "author": "beachball",
65
+ "package": "@fluentui/react-tabs",
66
+ "comment": "Bump @fluentui/react-tabster to v9.0.3",
67
+ "commit": "79b513146194367544160f364b0a7dd749ed93e4"
68
+ },
69
+ {
70
+ "author": "beachball",
71
+ "package": "@fluentui/react-tabs",
72
+ "comment": "Bump @fluentui/react-utilities to v9.0.2",
73
+ "commit": "79b513146194367544160f364b0a7dd749ed93e4"
74
+ }
75
+ ]
76
+ }
77
+ },
78
+ {
79
+ "date": "Thu, 14 Jul 2022 17:06:24 GMT",
80
+ "tag": "@fluentui/react-tabs_v9.0.2",
81
+ "version": "9.0.2",
82
+ "comments": {
83
+ "none": [
84
+ {
85
+ "author": "Humberto.Morimoto@microsoft.com",
86
+ "package": "@fluentui/react-tabs",
87
+ "commit": "422636fffd66758c1a6dd617063582d902b61927",
88
+ "comment": "docs: Replacing https://aka.ms/fluentui-storybook with https://react.fluentui.dev/ to point to the official documentation site."
89
+ }
90
+ ],
91
+ "patch": [
92
+ {
93
+ "author": "beachball",
94
+ "package": "@fluentui/react-tabs",
95
+ "comment": "Bump @fluentui/react-context-selector to v9.0.1",
96
+ "commit": "35237381e941c8935b1892c9217096cea3e5601f"
97
+ },
98
+ {
99
+ "author": "beachball",
100
+ "package": "@fluentui/react-tabs",
101
+ "comment": "Bump @fluentui/react-tabster to v9.0.2",
102
+ "commit": "35237381e941c8935b1892c9217096cea3e5601f"
103
+ },
104
+ {
105
+ "author": "beachball",
106
+ "package": "@fluentui/react-tabs",
107
+ "comment": "Bump @fluentui/react-utilities to v9.0.1-0",
108
+ "commit": "35237381e941c8935b1892c9217096cea3e5601f"
109
+ },
110
+ {
111
+ "author": "beachball",
112
+ "package": "@fluentui/react-tabs",
113
+ "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.11",
114
+ "commit": "35237381e941c8935b1892c9217096cea3e5601f"
115
+ }
116
+ ]
117
+ }
118
+ },
119
+ {
120
+ "date": "Tue, 28 Jun 2022 17:39:53 GMT",
6
121
  "tag": "@fluentui/react-tabs_v9.0.1",
7
122
  "version": "9.0.1",
8
123
  "comments": {
package/CHANGELOG.md CHANGED
@@ -1,12 +1,47 @@
1
1
  # Change Log - @fluentui/react-tabs
2
2
 
3
- This log was last generated on Tue, 28 Jun 2022 17:37:53 GMT and should not be manually modified.
3
+ This log was last generated on Wed, 03 Aug 2022 16:00:31 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.0.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabs_v9.0.4)
8
+
9
+ Wed, 03 Aug 2022 16:00:31 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabs_v9.0.3..@fluentui/react-tabs_v9.0.4)
11
+
12
+ ### Patches
13
+
14
+ - chore: Bump Griffel dependencies ([PR #24114](https://github.com/microsoft/fluentui/pull/24114) by miroslav.stastny@microsoft.com)
15
+ - Bump @fluentui/react-tabster to v9.1.0 ([PR #24201](https://github.com/microsoft/fluentui/pull/24201) by beachball)
16
+ - Bump @fluentui/react-conformance-griffel to v9.0.0-beta.12 ([PR #24201](https://github.com/microsoft/fluentui/pull/24201) by beachball)
17
+
18
+ ## [9.0.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabs_v9.0.3)
19
+
20
+ Thu, 14 Jul 2022 21:21:05 GMT
21
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabs_v9.0.2..@fluentui/react-tabs_v9.0.3)
22
+
23
+ ### Patches
24
+
25
+ - fix: Fixing bad version bump of @fluentui/react-utilities. ([PR #23920](https://github.com/microsoft/fluentui/pull/23920) by Humberto.Morimoto@microsoft.com)
26
+ - Bump @fluentui/react-context-selector to v9.0.2 ([PR #23918](https://github.com/microsoft/fluentui/pull/23918) by beachball)
27
+ - Bump @fluentui/react-tabster to v9.0.3 ([PR #23918](https://github.com/microsoft/fluentui/pull/23918) by beachball)
28
+ - Bump @fluentui/react-utilities to v9.0.2 ([PR #23918](https://github.com/microsoft/fluentui/pull/23918) by beachball)
29
+
30
+ ## [9.0.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabs_v9.0.2)
31
+
32
+ Thu, 14 Jul 2022 17:06:24 GMT
33
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabs_v9.0.1..@fluentui/react-tabs_v9.0.2)
34
+
35
+ ### Patches
36
+
37
+ - Bump @fluentui/react-context-selector to v9.0.1 ([PR #23897](https://github.com/microsoft/fluentui/pull/23897) by beachball)
38
+ - Bump @fluentui/react-tabster to v9.0.2 ([PR #23897](https://github.com/microsoft/fluentui/pull/23897) by beachball)
39
+ - Bump @fluentui/react-utilities to v9.0.1-0 ([PR #23897](https://github.com/microsoft/fluentui/pull/23897) by beachball)
40
+ - Bump @fluentui/react-conformance-griffel to v9.0.0-beta.11 ([PR #23897](https://github.com/microsoft/fluentui/pull/23897) by beachball)
41
+
7
42
  ## [9.0.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabs_v9.0.1)
8
43
 
9
- Tue, 28 Jun 2022 17:37:53 GMT
44
+ Tue, 28 Jun 2022 17:39:53 GMT
10
45
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabs_v9.0.0..@fluentui/react-tabs_v9.0.1)
11
46
 
12
47
  ### Patches
package/README.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # @fluentui/react-tabs
2
2
 
3
- **Tabs components for [Fluent UI React](https://aka.ms/fluentui-storybook)**
3
+ **Tabs components for [Fluent UI React](https://react.fluentui.dev/)**
4
4
 
5
5
  - A `TabList` provides single selection from a list of tabs.
6
6
  - When a `Tab` is selected, the content associated with the selected tab is displayed and other content is hidden.
@@ -54,7 +54,7 @@ export const TabExample = () => {
54
54
  };
55
55
  ```
56
56
 
57
- See [Fluent UI Storybook](https://aka.ms/fluentui-storybook) for more detailed usage examples.
57
+ See [Fluent UI Storybook](https://react.fluentui.dev/) for more detailed usage examples.
58
58
 
59
59
  Alternatively, run Storybook locally with:
60
60
 
package/lib/components/Tab/useTabStyles.js CHANGED
@@ -127,19 +127,21 @@ const useRootStyles = /*#__PURE__*/__styles({
127
127
  const useFocusStyles = /*#__PURE__*/__styles({
128
128
  "base": {
129
129
  "Brovlpu": "ftqa4ok",
130
- "Bnmjwt4": "flfsvnh",
131
- "Jopkrh": ["f1781m5e", "flvaaa9"],
132
- "hhrs2v": "f50u1b5",
133
- "B7jbng7": ["flvaaa9", "f1781m5e"],
134
- "B32s92o": "fgeg2qa",
135
- "Bh48x57": "f19j8a82",
136
- "B5hngm5": "fhcq1yo",
137
- "D4py6b": "f1gkya50",
138
- "Bgwpjed": "fpt6wn7"
130
+ "B486eqv": "f2hkw1w",
131
+ "Bvjrn4i": "fvvvjju",
132
+ "Bfjx6ro": ["f1j42xvt", "ftiyk5j"],
133
+ "vkx7if": "f3za06g",
134
+ "Bhdpb9s": ["ftiyk5j", "f1j42xvt"],
135
+ "ns4vmj": "f149st4k",
136
+ "H7go31": "fsr4n9e",
137
+ "me5axj": "f1tn340u",
138
+ "rxxk6d": ["for5ytj", "for5ytj"],
139
+ "Bvty6zf": "f17m5bi4"
139
140
  }
140
141
  }, {
141
142
  "f": [".ftqa4ok:focus{outline-style:none;}"],
142
- "d": ["[data-keyboard-nav] .flfsvnh:focus{border-top-color:transparent;}", "[data-keyboard-nav] .f1781m5e:focus{border-right-color:transparent;}", "[data-keyboard-nav] .flvaaa9:focus{border-left-color:transparent;}", "[data-keyboard-nav] .f50u1b5:focus{border-bottom-color:transparent;}", "[data-keyboard-nav] .fgeg2qa:focus{outline-width:var(--strokeWidthThick);}", "[data-keyboard-nav] .f19j8a82:focus{outline-color:transparent;}", "[data-keyboard-nav] .fhcq1yo:focus{outline-style:solid;}", "[data-keyboard-nav] .f1gkya50:focus{box-shadow:var(--shadow4),0 0 0 var(--strokeWidthThick) var(--colorStrokeFocus2);}", "[data-keyboard-nav] .fpt6wn7:focus{z-index:1;}"]
143
+ "i": [".f2hkw1w:focus-visible{outline-style:none;}"],
144
+ "d": [".fui-FluentProvider .fvvvjju.fui-focus-visible{border-top-color:transparent;}", ".fui-FluentProvider .f1j42xvt.fui-focus-visible{border-right-color:transparent;}", ".fui-FluentProvider .ftiyk5j.fui-focus-visible{border-left-color:transparent;}", ".fui-FluentProvider .f3za06g.fui-focus-visible{border-bottom-color:transparent;}", ".fui-FluentProvider .f149st4k.fui-focus-visible{outline-width:var(--strokeWidthThick);}", ".fui-FluentProvider .fsr4n9e.fui-focus-visible{outline-color:transparent;}", ".fui-FluentProvider .f1tn340u.fui-focus-visible{outline-style:solid;}", ".fui-FluentProvider .for5ytj.fui-focus-visible{box-shadow:var(--shadow4),0 0 0 var(--strokeWidthThick) var(--colorStrokeFocus2);}", ".fui-FluentProvider .f17m5bi4.fui-focus-visible{z-index:1;}"]
143
145
  });
144
146
  /** Indicator styles for when pending selection */
145
147
 
package/lib/components/Tab/useTabStyles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["components/Tab/useTabStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import type { TabSlots, TabState } from './Tab.types';\n\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport { useTabAnimatedIndicatorStyles_unstable } from './useTabAnimatedIndicator';\n\nexport const tabClassNames: SlotClassNames<TabSlots> = {\n root: 'fui-Tab',\n icon: 'fui-Tab__icon',\n content: 'fui-Tab__content',\n};\n\n/**\n * Styles for the root slot\n */\n/* eslint-disable @typescript-eslint/naming-convention */\nconst useRootStyles = makeStyles({\n base: {\n alignItems: 'center',\n ...shorthands.borderColor('none'),\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n ...shorthands.borderWidth(0),\n cursor: 'pointer',\n display: 'grid',\n flexShrink: 0,\n gridAutoFlow: 'column',\n gridTemplateColumns: 'auto',\n gridTemplateRows: 'auto',\n fontFamily: tokens.fontFamilyBase,\n lineHeight: tokens.lineHeightBase300,\n outlineStyle: 'none',\n position: 'relative',\n ...shorthands.overflow('hidden'),\n textTransform: 'none',\n },\n horizontal: {\n justifyContent: 'center',\n },\n vertical: {\n justifyContent: 'start',\n },\n mediumHorizontal: {\n columnGap: tokens.spacingHorizontalSNudge,\n ...shorthands.padding(tokens.spacingVerticalM, tokens.spacingHorizontalMNudge),\n },\n mediumVertical: {\n // horizontal spacing is deliberate. This is the gap between icon and content.\n columnGap: tokens.spacingHorizontalSNudge,\n ...shorthands.padding(tokens.spacingVerticalSNudge, tokens.spacingHorizontalMNudge),\n },\n smallHorizontal: {\n columnGap: tokens.spacingHorizontalXXS,\n ...shorthands.padding(tokens.spacingVerticalSNudge, tokens.spacingHorizontalSNudge),\n },\n smallVertical: {\n // horizontal spacing is deliberate. This is the gap between icon and content.\n columnGap: tokens.spacingHorizontalXXS,\n ...shorthands.padding(tokens.spacingVerticalXXS, tokens.spacingHorizontalSNudge),\n },\n transparent: {\n backgroundColor: tokens.colorTransparentBackground,\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n },\n ':active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n },\n '& .fui-Tab__icon': {\n color: tokens.colorNeutralForeground2,\n },\n ':hover .fui-Tab__icon': {\n color: tokens.colorNeutralForeground2Hover,\n },\n ':active .fui-Tab__icon': {\n color: tokens.colorNeutralForeground2Pressed,\n },\n '& .fui-Tab__content': {\n color: tokens.colorNeutralForeground2,\n },\n ':hover .fui-Tab__content': {\n color: tokens.colorNeutralForeground2Hover,\n },\n ':active .fui-Tab__content': {\n color: tokens.colorNeutralForeground2Pressed,\n },\n },\n subtle: {\n backgroundColor: tokens.colorSubtleBackground,\n ':hover': {\n backgroundColor: tokens.colorSubtleBackgroundHover,\n },\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n },\n '& .fui-Tab__icon': {\n color: tokens.colorNeutralForeground2,\n },\n ':hover .fui-Tab__icon': {\n color: tokens.colorNeutralForeground2Hover,\n },\n ':active .fui-Tab__icon': {\n color: tokens.colorNeutralForeground2Pressed,\n },\n '& .fui-Tab__content': {\n color: tokens.colorNeutralForeground2,\n },\n ':hover .fui-Tab__content': {\n color: tokens.colorNeutralForeground2Hover,\n },\n ':active .fui-Tab__content': {\n color: tokens.colorNeutralForeground2Pressed,\n },\n },\n disabled: {\n backgroundColor: tokens.colorTransparentBackground,\n\n '& .fui-Tab__icon': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n '& .fui-Tab__content': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n cursor: 'not-allowed',\n },\n selected: {\n '& .fui-Tab__icon': {\n color: tokens.colorCompoundBrandForeground1,\n },\n ':hover .fui-Tab__icon': {\n color: tokens.colorCompoundBrandForeground1Hover,\n },\n ':active .fui-Tab__icon': {\n color: tokens.colorCompoundBrandForeground1Pressed,\n },\n '& .fui-Tab__content': {\n color: tokens.colorNeutralForeground1,\n },\n ':hover .fui-Tab__content': {\n color: tokens.colorNeutralForeground1Hover,\n },\n ':active .fui-Tab__content': {\n color: tokens.colorNeutralForeground1Pressed,\n },\n },\n});\n/* eslint-enable @typescript-eslint/naming-convention */\n\n/**\n * Focus styles for the root slot\n */\nconst useFocusStyles = makeStyles({\n // Tab creates a custom focus indicator because the default focus indicator\n // is applied using an ::after pseudo-element on the root. Since the selection\n // indicator uses an ::after pseudo-element on the root, there is a conflict.\n base: createCustomFocusIndicatorStyle({\n ...shorthands.borderColor('transparent'),\n outlineWidth: tokens.strokeWidthThick,\n outlineColor: 'transparent',\n outlineStyle: 'solid',\n boxShadow: `\n ${tokens.shadow4},\n 0 0 0 ${tokens.strokeWidthThick} ${tokens.colorStrokeFocus2}\n `,\n zIndex: 1,\n }),\n});\n\n/** Indicator styles for when pending selection */\nconst usePendingIndicatorStyles = makeStyles({\n base: {\n ':hover::before': {\n backgroundColor: tokens.colorNeutralStroke1Hover,\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n content: '\"\"',\n position: 'absolute',\n },\n ':active::before': {\n backgroundColor: tokens.colorNeutralStroke1Pressed,\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n content: '\"\"',\n position: 'absolute',\n },\n '@media (forced-colors: active)': {\n ':hover::before': {\n backgroundColor: 'Highlight',\n },\n ':active::before': {\n backgroundColor: 'Highlight',\n },\n },\n },\n disabled: {\n ':hover::before': {\n backgroundColor: tokens.colorTransparentStroke,\n },\n ':active::before': {\n backgroundColor: tokens.colorTransparentStroke,\n },\n },\n mediumHorizontal: {\n '::before': {\n bottom: 0,\n height: tokens.strokeWidthThicker,\n left: tokens.spacingHorizontalM,\n right: tokens.spacingHorizontalM,\n },\n },\n mediumVertical: {\n '::before': {\n bottom: tokens.spacingVerticalS,\n left: 0,\n top: tokens.spacingVerticalS,\n width: tokens.strokeWidthThicker,\n },\n },\n smallHorizontal: {\n '::before': {\n bottom: 0,\n height: tokens.strokeWidthThick,\n left: tokens.spacingHorizontalSNudge,\n right: tokens.spacingHorizontalSNudge,\n },\n },\n smallVertical: {\n '::before': {\n bottom: tokens.spacingVerticalXS,\n left: 0,\n top: tokens.spacingVerticalXS,\n width: tokens.strokeWidthThicker,\n },\n },\n});\n\nconst useActiveIndicatorStyles = makeStyles({\n base: {\n '::after': {\n backgroundColor: tokens.colorTransparentStroke,\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n content: '\"\"',\n position: 'absolute',\n zIndex: 1,\n },\n },\n selected: {\n '::after': {\n backgroundColor: tokens.colorCompoundBrandStroke,\n },\n ':hover::after': {\n backgroundColor: tokens.colorCompoundBrandStrokeHover,\n },\n ':active::after': {\n backgroundColor: tokens.colorCompoundBrandStrokePressed,\n },\n '@media (forced-colors: active)': {\n '::after': {\n backgroundColor: 'ButtonText',\n },\n ':hover::after': {\n backgroundColor: 'ButtonText',\n },\n ':active::after': {\n backgroundColor: 'ButtonText',\n },\n },\n },\n disabled: {\n '::after': {\n backgroundColor: tokens.colorNeutralForegroundDisabled,\n },\n },\n mediumHorizontal: {\n '::after': {\n bottom: '0',\n height: tokens.strokeWidthThicker,\n left: tokens.spacingHorizontalM,\n right: tokens.spacingHorizontalM,\n },\n },\n mediumVertical: {\n '::after': {\n bottom: tokens.spacingVerticalS,\n left: 0,\n top: tokens.spacingVerticalS,\n width: tokens.strokeWidthThicker,\n },\n },\n smallHorizontal: {\n '::after': {\n bottom: 0,\n height: tokens.strokeWidthThick,\n left: tokens.spacingHorizontalSNudge,\n right: tokens.spacingHorizontalSNudge,\n },\n },\n smallVertical: {\n '::after': {\n bottom: tokens.spacingVerticalXS,\n left: '0',\n top: tokens.spacingVerticalXS,\n width: tokens.strokeWidthThicker,\n },\n },\n});\n\n/**\n * Styles for the icon slot.\n */\nconst useIconStyles = makeStyles({\n base: {\n alignItems: 'center',\n display: 'inline-flex',\n justifyContent: 'center',\n ...shorthands.overflow('hidden'),\n },\n // per design, the small and medium font sizes are the same.\n // the size prop only affects spacing.\n small: {\n fontSize: '20px',\n height: '20px',\n width: '20px',\n },\n medium: {\n fontSize: '20px',\n height: '20px',\n width: '20px',\n },\n});\n\n/**\n * Styles for the content slot (children)\n */\nconst useContentStyles = makeStyles({\n base: {\n ...typographyStyles.body1,\n ...shorthands.overflow('hidden'),\n // content padding is the same for medium & small, horiztonal & vertical\n ...shorthands.padding(tokens.spacingVerticalNone, tokens.spacingHorizontalXXS),\n },\n selected: {\n ...typographyStyles.body1Strong,\n },\n});\n\n/**\n * Apply styling to the Tab slots based on the state\n */\nexport const useTabStyles_unstable = (state: TabState): TabState => {\n const rootStyles = useRootStyles();\n const focusStyles = useFocusStyles();\n const pendingIndicatorStyles = usePendingIndicatorStyles();\n const activeIndicatorStyles = useActiveIndicatorStyles();\n const iconStyles = useIconStyles();\n const contentStyles = useContentStyles();\n\n const { appearance, disabled, selected, size, vertical } = state;\n\n state.root.className = mergeClasses(\n tabClassNames.root,\n rootStyles.base,\n vertical ? rootStyles.vertical : rootStyles.horizontal,\n size !== 'small' && (vertical ? rootStyles.mediumVertical : rootStyles.mediumHorizontal),\n size === 'small' && (vertical ? rootStyles.smallVertical : rootStyles.smallHorizontal),\n focusStyles.base,\n !disabled && appearance === 'subtle' && rootStyles.subtle,\n !disabled && appearance === 'transparent' && rootStyles.transparent,\n !disabled && selected && rootStyles.selected,\n disabled && rootStyles.disabled,\n\n // pending indicator (before pseudo element)\n pendingIndicatorStyles.base,\n size !== 'small' && (vertical ? pendingIndicatorStyles.mediumVertical : pendingIndicatorStyles.mediumHorizontal),\n size === 'small' && (vertical ? pendingIndicatorStyles.smallVertical : pendingIndicatorStyles.smallHorizontal),\n disabled && pendingIndicatorStyles.disabled,\n\n // active indicator (after pseudo element)\n selected && activeIndicatorStyles.base,\n selected && !disabled && activeIndicatorStyles.selected,\n selected &&\n size !== 'small' &&\n (vertical ? activeIndicatorStyles.mediumVertical : activeIndicatorStyles.mediumHorizontal),\n selected &&\n size === 'small' &&\n (vertical ? activeIndicatorStyles.smallVertical : activeIndicatorStyles.smallHorizontal),\n selected && disabled && activeIndicatorStyles.disabled,\n state.root.className,\n );\n\n if (state.icon) {\n state.icon.className = mergeClasses(tabClassNames.icon, iconStyles.base, iconStyles[size], state.icon.className);\n }\n\n state.content.className = mergeClasses(\n tabClassNames.content,\n contentStyles.base,\n selected && contentStyles.selected,\n state.content.className,\n );\n\n useTabAnimatedIndicatorStyles_unstable(state);\n\n return state;\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["components/Tab/useTabStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import type { TabSlots, TabState } from './Tab.types';\n\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport { useTabAnimatedIndicatorStyles_unstable } from './useTabAnimatedIndicator';\n\nexport const tabClassNames: SlotClassNames<TabSlots> = {\n root: 'fui-Tab',\n icon: 'fui-Tab__icon',\n content: 'fui-Tab__content',\n};\n\n/**\n * Styles for the root slot\n */\n/* eslint-disable @typescript-eslint/naming-convention */\nconst useRootStyles = makeStyles({\n base: {\n alignItems: 'center',\n ...shorthands.borderColor('none'),\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n ...shorthands.borderWidth(0),\n cursor: 'pointer',\n display: 'grid',\n flexShrink: 0,\n gridAutoFlow: 'column',\n gridTemplateColumns: 'auto',\n gridTemplateRows: 'auto',\n fontFamily: tokens.fontFamilyBase,\n lineHeight: tokens.lineHeightBase300,\n outlineStyle: 'none',\n position: 'relative',\n ...shorthands.overflow('hidden'),\n textTransform: 'none',\n },\n horizontal: {\n justifyContent: 'center',\n },\n vertical: {\n justifyContent: 'start',\n },\n mediumHorizontal: {\n columnGap: tokens.spacingHorizontalSNudge,\n ...shorthands.padding(tokens.spacingVerticalM, tokens.spacingHorizontalMNudge),\n },\n mediumVertical: {\n // horizontal spacing is deliberate. This is the gap between icon and content.\n columnGap: tokens.spacingHorizontalSNudge,\n ...shorthands.padding(tokens.spacingVerticalSNudge, tokens.spacingHorizontalMNudge),\n },\n smallHorizontal: {\n columnGap: tokens.spacingHorizontalXXS,\n ...shorthands.padding(tokens.spacingVerticalSNudge, tokens.spacingHorizontalSNudge),\n },\n smallVertical: {\n // horizontal spacing is deliberate. This is the gap between icon and content.\n columnGap: tokens.spacingHorizontalXXS,\n ...shorthands.padding(tokens.spacingVerticalXXS, tokens.spacingHorizontalSNudge),\n },\n transparent: {\n backgroundColor: tokens.colorTransparentBackground,\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n },\n ':active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n },\n '& .fui-Tab__icon': {\n color: tokens.colorNeutralForeground2,\n },\n ':hover .fui-Tab__icon': {\n color: tokens.colorNeutralForeground2Hover,\n },\n ':active .fui-Tab__icon': {\n color: tokens.colorNeutralForeground2Pressed,\n },\n '& .fui-Tab__content': {\n color: tokens.colorNeutralForeground2,\n },\n ':hover .fui-Tab__content': {\n color: tokens.colorNeutralForeground2Hover,\n },\n ':active .fui-Tab__content': {\n color: tokens.colorNeutralForeground2Pressed,\n },\n },\n subtle: {\n backgroundColor: tokens.colorSubtleBackground,\n ':hover': {\n backgroundColor: tokens.colorSubtleBackgroundHover,\n },\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n },\n '& .fui-Tab__icon': {\n color: tokens.colorNeutralForeground2,\n },\n ':hover .fui-Tab__icon': {\n color: tokens.colorNeutralForeground2Hover,\n },\n ':active .fui-Tab__icon': {\n color: tokens.colorNeutralForeground2Pressed,\n },\n '& .fui-Tab__content': {\n color: tokens.colorNeutralForeground2,\n },\n ':hover .fui-Tab__content': {\n color: tokens.colorNeutralForeground2Hover,\n },\n ':active .fui-Tab__content': {\n color: tokens.colorNeutralForeground2Pressed,\n },\n },\n disabled: {\n backgroundColor: tokens.colorTransparentBackground,\n\n '& .fui-Tab__icon': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n '& .fui-Tab__content': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n cursor: 'not-allowed',\n },\n selected: {\n '& .fui-Tab__icon': {\n color: tokens.colorCompoundBrandForeground1,\n },\n ':hover .fui-Tab__icon': {\n color: tokens.colorCompoundBrandForeground1Hover,\n },\n ':active .fui-Tab__icon': {\n color: tokens.colorCompoundBrandForeground1Pressed,\n },\n '& .fui-Tab__content': {\n color: tokens.colorNeutralForeground1,\n },\n ':hover .fui-Tab__content': {\n color: tokens.colorNeutralForeground1Hover,\n },\n ':active .fui-Tab__content': {\n color: tokens.colorNeutralForeground1Pressed,\n },\n },\n});\n/* eslint-enable @typescript-eslint/naming-convention */\n\n/**\n * Focus styles for the root slot\n */\nconst useFocusStyles = makeStyles({\n // Tab creates a custom focus indicator because the default focus indicator\n // is applied using an ::after pseudo-element on the root. Since the selection\n // indicator uses an ::after pseudo-element on the root, there is a conflict.\n base: createCustomFocusIndicatorStyle({\n ...shorthands.borderColor('transparent'),\n outlineWidth: tokens.strokeWidthThick,\n outlineColor: 'transparent',\n outlineStyle: 'solid',\n boxShadow: `\n ${tokens.shadow4},\n 0 0 0 ${tokens.strokeWidthThick} ${tokens.colorStrokeFocus2}\n `,\n zIndex: 1,\n }),\n});\n\n/** Indicator styles for when pending selection */\nconst usePendingIndicatorStyles = makeStyles({\n base: {\n ':hover::before': {\n backgroundColor: tokens.colorNeutralStroke1Hover,\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n content: '\"\"',\n position: 'absolute',\n },\n ':active::before': {\n backgroundColor: tokens.colorNeutralStroke1Pressed,\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n content: '\"\"',\n position: 'absolute',\n },\n '@media (forced-colors: active)': {\n ':hover::before': {\n backgroundColor: 'Highlight',\n },\n ':active::before': {\n backgroundColor: 'Highlight',\n },\n },\n },\n disabled: {\n ':hover::before': {\n backgroundColor: tokens.colorTransparentStroke,\n },\n ':active::before': {\n backgroundColor: tokens.colorTransparentStroke,\n },\n },\n mediumHorizontal: {\n '::before': {\n bottom: 0,\n height: tokens.strokeWidthThicker,\n left: tokens.spacingHorizontalM,\n right: tokens.spacingHorizontalM,\n },\n },\n mediumVertical: {\n '::before': {\n bottom: tokens.spacingVerticalS,\n left: 0,\n top: tokens.spacingVerticalS,\n width: tokens.strokeWidthThicker,\n },\n },\n smallHorizontal: {\n '::before': {\n bottom: 0,\n height: tokens.strokeWidthThick,\n left: tokens.spacingHorizontalSNudge,\n right: tokens.spacingHorizontalSNudge,\n },\n },\n smallVertical: {\n '::before': {\n bottom: tokens.spacingVerticalXS,\n left: 0,\n top: tokens.spacingVerticalXS,\n width: tokens.strokeWidthThicker,\n },\n },\n});\n\nconst useActiveIndicatorStyles = makeStyles({\n base: {\n '::after': {\n backgroundColor: tokens.colorTransparentStroke,\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n content: '\"\"',\n position: 'absolute',\n zIndex: 1,\n },\n },\n selected: {\n '::after': {\n backgroundColor: tokens.colorCompoundBrandStroke,\n },\n ':hover::after': {\n backgroundColor: tokens.colorCompoundBrandStrokeHover,\n },\n ':active::after': {\n backgroundColor: tokens.colorCompoundBrandStrokePressed,\n },\n '@media (forced-colors: active)': {\n '::after': {\n backgroundColor: 'ButtonText',\n },\n ':hover::after': {\n backgroundColor: 'ButtonText',\n },\n ':active::after': {\n backgroundColor: 'ButtonText',\n },\n },\n },\n disabled: {\n '::after': {\n backgroundColor: tokens.colorNeutralForegroundDisabled,\n },\n },\n mediumHorizontal: {\n '::after': {\n bottom: '0',\n height: tokens.strokeWidthThicker,\n left: tokens.spacingHorizontalM,\n right: tokens.spacingHorizontalM,\n },\n },\n mediumVertical: {\n '::after': {\n bottom: tokens.spacingVerticalS,\n left: 0,\n top: tokens.spacingVerticalS,\n width: tokens.strokeWidthThicker,\n },\n },\n smallHorizontal: {\n '::after': {\n bottom: 0,\n height: tokens.strokeWidthThick,\n left: tokens.spacingHorizontalSNudge,\n right: tokens.spacingHorizontalSNudge,\n },\n },\n smallVertical: {\n '::after': {\n bottom: tokens.spacingVerticalXS,\n left: '0',\n top: tokens.spacingVerticalXS,\n width: tokens.strokeWidthThicker,\n },\n },\n});\n\n/**\n * Styles for the icon slot.\n */\nconst useIconStyles = makeStyles({\n base: {\n alignItems: 'center',\n display: 'inline-flex',\n justifyContent: 'center',\n ...shorthands.overflow('hidden'),\n },\n // per design, the small and medium font sizes are the same.\n // the size prop only affects spacing.\n small: {\n fontSize: '20px',\n height: '20px',\n width: '20px',\n },\n medium: {\n fontSize: '20px',\n height: '20px',\n width: '20px',\n },\n});\n\n/**\n * Styles for the content slot (children)\n */\nconst useContentStyles = makeStyles({\n base: {\n ...typographyStyles.body1,\n ...shorthands.overflow('hidden'),\n // content padding is the same for medium & small, horiztonal & vertical\n ...shorthands.padding(tokens.spacingVerticalNone, tokens.spacingHorizontalXXS),\n },\n selected: {\n ...typographyStyles.body1Strong,\n },\n});\n\n/**\n * Apply styling to the Tab slots based on the state\n */\nexport const useTabStyles_unstable = (state: TabState): TabState => {\n const rootStyles = useRootStyles();\n const focusStyles = useFocusStyles();\n const pendingIndicatorStyles = usePendingIndicatorStyles();\n const activeIndicatorStyles = useActiveIndicatorStyles();\n const iconStyles = useIconStyles();\n const contentStyles = useContentStyles();\n\n const { appearance, disabled, selected, size, vertical } = state;\n\n state.root.className = mergeClasses(\n tabClassNames.root,\n rootStyles.base,\n vertical ? rootStyles.vertical : rootStyles.horizontal,\n size !== 'small' && (vertical ? rootStyles.mediumVertical : rootStyles.mediumHorizontal),\n size === 'small' && (vertical ? rootStyles.smallVertical : rootStyles.smallHorizontal),\n focusStyles.base,\n !disabled && appearance === 'subtle' && rootStyles.subtle,\n !disabled && appearance === 'transparent' && rootStyles.transparent,\n !disabled && selected && rootStyles.selected,\n disabled && rootStyles.disabled,\n\n // pending indicator (before pseudo element)\n pendingIndicatorStyles.base,\n size !== 'small' && (vertical ? pendingIndicatorStyles.mediumVertical : pendingIndicatorStyles.mediumHorizontal),\n size === 'small' && (vertical ? pendingIndicatorStyles.smallVertical : pendingIndicatorStyles.smallHorizontal),\n disabled && pendingIndicatorStyles.disabled,\n\n // active indicator (after pseudo element)\n selected && activeIndicatorStyles.base,\n selected && !disabled && activeIndicatorStyles.selected,\n selected &&\n size !== 'small' &&\n (vertical ? activeIndicatorStyles.mediumVertical : activeIndicatorStyles.mediumHorizontal),\n selected &&\n size === 'small' &&\n (vertical ? activeIndicatorStyles.smallVertical : activeIndicatorStyles.smallHorizontal),\n selected && disabled && activeIndicatorStyles.disabled,\n state.root.className,\n );\n\n if (state.icon) {\n state.icon.className = mergeClasses(tabClassNames.icon, iconStyles.base, iconStyles[size], state.icon.className);\n }\n\n state.content.className = mergeClasses(\n tabClassNames.content,\n contentStyles.base,\n selected && contentStyles.selected,\n state.content.className,\n );\n\n useTabAnimatedIndicatorStyles_unstable(state);\n\n return state;\n};\n"],"sourceRoot":"../src/"}
package/lib/components/TabList/TabListContext.js CHANGED
@@ -1,4 +1,5 @@
1
- import { createContext } from '@fluentui/react-context-selector';
1
+ import { createContext } from '@fluentui/react-context-selector'; // eslint-disable-next-line @fluentui/no-context-default-value
2
+
2
3
  export const TabListContext = /*#__PURE__*/createContext({
3
4
  appearance: 'transparent',
4
5
  disabled: false,
package/lib/components/TabList/TabListContext.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["components/TabList/TabListContext.ts"],"names":[],"mappings":"AAAA,SAAS,aAAT,QAA8B,kCAA9B;AAIA,OAAO,MAAM,cAAc,gBAAiC,aAAa,CAAsB;EAC7F,UAAU,EAAE,aADiF;EAE7F,QAAQ,EAAE,KAFmF;EAG7F,aAAa,EAAE,SAH8E;EAI7F,UAAU,EAAE,MAAK;IACf;EACD,CAN4F;EAO7F,YAAY,EAAE,MAAK;IACjB;EACD,CAT4F;EAU7F,QAAQ,EAAE,MAAK;IACb;EACD,CAZ4F;EAa7F,iBAAiB,EAAE,MAAK;IACtB,OAAO;MACL,cAAc,EAAE;IADX,CAAP;EAGD,CAjB4F;EAkB7F,IAAI,EAAE,QAlBuF;EAmB7F,QAAQ,EAAE;AAnBmF,CAAtB,CAAlE","sourcesContent":["import { createContext } from '@fluentui/react-context-selector';\nimport type { Context } from '@fluentui/react-context-selector';\nimport { TabListContextValue } from './TabList.types';\n\nexport const TabListContext: Context<TabListContextValue> = createContext<TabListContextValue>({\n appearance: 'transparent',\n disabled: false,\n selectedValue: undefined,\n onRegister: () => {\n /* noop */\n },\n onUnregister: () => {\n /* noop */\n },\n onSelect: () => {\n /* noop */\n },\n getRegisteredTabs: () => {\n return {\n registeredTabs: {},\n };\n },\n size: 'medium',\n vertical: false,\n});\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["components/TabList/TabListContext.ts"],"names":[],"mappings":"AAAA,SAAS,aAAT,QAA8B,kCAA9B,C,CAIA;;AACA,OAAO,MAAM,cAAc,gBAAiC,aAAa,CAAsB;EAC7F,UAAU,EAAE,aADiF;EAE7F,QAAQ,EAAE,KAFmF;EAG7F,aAAa,EAAE,SAH8E;EAI7F,UAAU,EAAE,MAAK;IACf;EACD,CAN4F;EAO7F,YAAY,EAAE,MAAK;IACjB;EACD,CAT4F;EAU7F,QAAQ,EAAE,MAAK;IACb;EACD,CAZ4F;EAa7F,iBAAiB,EAAE,MAAK;IACtB,OAAO;MACL,cAAc,EAAE;IADX,CAAP;EAGD,CAjB4F;EAkB7F,IAAI,EAAE,QAlBuF;EAmB7F,QAAQ,EAAE;AAnBmF,CAAtB,CAAlE","sourcesContent":["import { createContext } from '@fluentui/react-context-selector';\nimport type { Context } from '@fluentui/react-context-selector';\nimport { TabListContextValue } from './TabList.types';\n\n// eslint-disable-next-line @fluentui/no-context-default-value\nexport const TabListContext: Context<TabListContextValue> = createContext<TabListContextValue>({\n appearance: 'transparent',\n disabled: false,\n selectedValue: undefined,\n onRegister: () => {\n /* noop */\n },\n onUnregister: () => {\n /* noop */\n },\n onSelect: () => {\n /* noop */\n },\n getRegisteredTabs: () => {\n return {\n registeredTabs: {},\n };\n },\n size: 'medium',\n vertical: false,\n});\n"],"sourceRoot":"../src/"}
package/lib-commonjs/components/Tab/useTabStyles.js CHANGED
@@ -138,19 +138,21 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
138
138
  const useFocusStyles = /*#__PURE__*/react_1.__styles({
139
139
  "base": {
140
140
  "Brovlpu": "ftqa4ok",
141
- "Bnmjwt4": "flfsvnh",
142
- "Jopkrh": ["f1781m5e", "flvaaa9"],
143
- "hhrs2v": "f50u1b5",
144
- "B7jbng7": ["flvaaa9", "f1781m5e"],
145
- "B32s92o": "fgeg2qa",
146
- "Bh48x57": "f19j8a82",
147
- "B5hngm5": "fhcq1yo",
148
- "D4py6b": "f1gkya50",
149
- "Bgwpjed": "fpt6wn7"
141
+ "B486eqv": "f2hkw1w",
142
+ "Bvjrn4i": "fvvvjju",
143
+ "Bfjx6ro": ["f1j42xvt", "ftiyk5j"],
144
+ "vkx7if": "f3za06g",
145
+ "Bhdpb9s": ["ftiyk5j", "f1j42xvt"],
146
+ "ns4vmj": "f149st4k",
147
+ "H7go31": "fsr4n9e",
148
+ "me5axj": "f1tn340u",
149
+ "rxxk6d": ["for5ytj", "for5ytj"],
150
+ "Bvty6zf": "f17m5bi4"
150
151
  }
151
152
  }, {
152
153
  "f": [".ftqa4ok:focus{outline-style:none;}"],
153
- "d": ["[data-keyboard-nav] .flfsvnh:focus{border-top-color:transparent;}", "[data-keyboard-nav] .f1781m5e:focus{border-right-color:transparent;}", "[data-keyboard-nav] .flvaaa9:focus{border-left-color:transparent;}", "[data-keyboard-nav] .f50u1b5:focus{border-bottom-color:transparent;}", "[data-keyboard-nav] .fgeg2qa:focus{outline-width:var(--strokeWidthThick);}", "[data-keyboard-nav] .f19j8a82:focus{outline-color:transparent;}", "[data-keyboard-nav] .fhcq1yo:focus{outline-style:solid;}", "[data-keyboard-nav] .f1gkya50:focus{box-shadow:var(--shadow4),0 0 0 var(--strokeWidthThick) var(--colorStrokeFocus2);}", "[data-keyboard-nav] .fpt6wn7:focus{z-index:1;}"]
154
+ "i": [".f2hkw1w:focus-visible{outline-style:none;}"],
155
+ "d": [".fui-FluentProvider .fvvvjju.fui-focus-visible{border-top-color:transparent;}", ".fui-FluentProvider .f1j42xvt.fui-focus-visible{border-right-color:transparent;}", ".fui-FluentProvider .ftiyk5j.fui-focus-visible{border-left-color:transparent;}", ".fui-FluentProvider .f3za06g.fui-focus-visible{border-bottom-color:transparent;}", ".fui-FluentProvider .f149st4k.fui-focus-visible{outline-width:var(--strokeWidthThick);}", ".fui-FluentProvider .fsr4n9e.fui-focus-visible{outline-color:transparent;}", ".fui-FluentProvider .f1tn340u.fui-focus-visible{outline-style:solid;}", ".fui-FluentProvider .for5ytj.fui-focus-visible{box-shadow:var(--shadow4),0 0 0 var(--strokeWidthThick) var(--colorStrokeFocus2);}", ".fui-FluentProvider .f17m5bi4.fui-focus-visible{z-index:1;}"]
154
156
  });
155
157
  /** Indicator styles for when pending selection */
156
158
 
package/lib-commonjs/components/Tab/useTabStyles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["components/Tab/useTabStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import type { TabSlots, TabState } from './Tab.types';\n\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport { useTabAnimatedIndicatorStyles_unstable } from './useTabAnimatedIndicator';\n\nexport const tabClassNames: SlotClassNames<TabSlots> = {\n root: 'fui-Tab',\n icon: 'fui-Tab__icon',\n content: 'fui-Tab__content',\n};\n\n/**\n * Styles for the root slot\n */\n/* eslint-disable @typescript-eslint/naming-convention */\nconst useRootStyles = makeStyles({\n base: {\n alignItems: 'center',\n ...shorthands.borderColor('none'),\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n ...shorthands.borderWidth(0),\n cursor: 'pointer',\n display: 'grid',\n flexShrink: 0,\n gridAutoFlow: 'column',\n gridTemplateColumns: 'auto',\n gridTemplateRows: 'auto',\n fontFamily: tokens.fontFamilyBase,\n lineHeight: tokens.lineHeightBase300,\n outlineStyle: 'none',\n position: 'relative',\n ...shorthands.overflow('hidden'),\n textTransform: 'none',\n },\n horizontal: {\n justifyContent: 'center',\n },\n vertical: {\n justifyContent: 'start',\n },\n mediumHorizontal: {\n columnGap: tokens.spacingHorizontalSNudge,\n ...shorthands.padding(tokens.spacingVerticalM, tokens.spacingHorizontalMNudge),\n },\n mediumVertical: {\n // horizontal spacing is deliberate. This is the gap between icon and content.\n columnGap: tokens.spacingHorizontalSNudge,\n ...shorthands.padding(tokens.spacingVerticalSNudge, tokens.spacingHorizontalMNudge),\n },\n smallHorizontal: {\n columnGap: tokens.spacingHorizontalXXS,\n ...shorthands.padding(tokens.spacingVerticalSNudge, tokens.spacingHorizontalSNudge),\n },\n smallVertical: {\n // horizontal spacing is deliberate. This is the gap between icon and content.\n columnGap: tokens.spacingHorizontalXXS,\n ...shorthands.padding(tokens.spacingVerticalXXS, tokens.spacingHorizontalSNudge),\n },\n transparent: {\n backgroundColor: tokens.colorTransparentBackground,\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n },\n ':active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n },\n '& .fui-Tab__icon': {\n color: tokens.colorNeutralForeground2,\n },\n ':hover .fui-Tab__icon': {\n color: tokens.colorNeutralForeground2Hover,\n },\n ':active .fui-Tab__icon': {\n color: tokens.colorNeutralForeground2Pressed,\n },\n '& .fui-Tab__content': {\n color: tokens.colorNeutralForeground2,\n },\n ':hover .fui-Tab__content': {\n color: tokens.colorNeutralForeground2Hover,\n },\n ':active .fui-Tab__content': {\n color: tokens.colorNeutralForeground2Pressed,\n },\n },\n subtle: {\n backgroundColor: tokens.colorSubtleBackground,\n ':hover': {\n backgroundColor: tokens.colorSubtleBackgroundHover,\n },\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n },\n '& .fui-Tab__icon': {\n color: tokens.colorNeutralForeground2,\n },\n ':hover .fui-Tab__icon': {\n color: tokens.colorNeutralForeground2Hover,\n },\n ':active .fui-Tab__icon': {\n color: tokens.colorNeutralForeground2Pressed,\n },\n '& .fui-Tab__content': {\n color: tokens.colorNeutralForeground2,\n },\n ':hover .fui-Tab__content': {\n color: tokens.colorNeutralForeground2Hover,\n },\n ':active .fui-Tab__content': {\n color: tokens.colorNeutralForeground2Pressed,\n },\n },\n disabled: {\n backgroundColor: tokens.colorTransparentBackground,\n\n '& .fui-Tab__icon': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n '& .fui-Tab__content': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n cursor: 'not-allowed',\n },\n selected: {\n '& .fui-Tab__icon': {\n color: tokens.colorCompoundBrandForeground1,\n },\n ':hover .fui-Tab__icon': {\n color: tokens.colorCompoundBrandForeground1Hover,\n },\n ':active .fui-Tab__icon': {\n color: tokens.colorCompoundBrandForeground1Pressed,\n },\n '& .fui-Tab__content': {\n color: tokens.colorNeutralForeground1,\n },\n ':hover .fui-Tab__content': {\n color: tokens.colorNeutralForeground1Hover,\n },\n ':active .fui-Tab__content': {\n color: tokens.colorNeutralForeground1Pressed,\n },\n },\n});\n/* eslint-enable @typescript-eslint/naming-convention */\n\n/**\n * Focus styles for the root slot\n */\nconst useFocusStyles = makeStyles({\n // Tab creates a custom focus indicator because the default focus indicator\n // is applied using an ::after pseudo-element on the root. Since the selection\n // indicator uses an ::after pseudo-element on the root, there is a conflict.\n base: createCustomFocusIndicatorStyle({\n ...shorthands.borderColor('transparent'),\n outlineWidth: tokens.strokeWidthThick,\n outlineColor: 'transparent',\n outlineStyle: 'solid',\n boxShadow: `\n ${tokens.shadow4},\n 0 0 0 ${tokens.strokeWidthThick} ${tokens.colorStrokeFocus2}\n `,\n zIndex: 1,\n }),\n});\n\n/** Indicator styles for when pending selection */\nconst usePendingIndicatorStyles = makeStyles({\n base: {\n ':hover::before': {\n backgroundColor: tokens.colorNeutralStroke1Hover,\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n content: '\"\"',\n position: 'absolute',\n },\n ':active::before': {\n backgroundColor: tokens.colorNeutralStroke1Pressed,\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n content: '\"\"',\n position: 'absolute',\n },\n '@media (forced-colors: active)': {\n ':hover::before': {\n backgroundColor: 'Highlight',\n },\n ':active::before': {\n backgroundColor: 'Highlight',\n },\n },\n },\n disabled: {\n ':hover::before': {\n backgroundColor: tokens.colorTransparentStroke,\n },\n ':active::before': {\n backgroundColor: tokens.colorTransparentStroke,\n },\n },\n mediumHorizontal: {\n '::before': {\n bottom: 0,\n height: tokens.strokeWidthThicker,\n left: tokens.spacingHorizontalM,\n right: tokens.spacingHorizontalM,\n },\n },\n mediumVertical: {\n '::before': {\n bottom: tokens.spacingVerticalS,\n left: 0,\n top: tokens.spacingVerticalS,\n width: tokens.strokeWidthThicker,\n },\n },\n smallHorizontal: {\n '::before': {\n bottom: 0,\n height: tokens.strokeWidthThick,\n left: tokens.spacingHorizontalSNudge,\n right: tokens.spacingHorizontalSNudge,\n },\n },\n smallVertical: {\n '::before': {\n bottom: tokens.spacingVerticalXS,\n left: 0,\n top: tokens.spacingVerticalXS,\n width: tokens.strokeWidthThicker,\n },\n },\n});\n\nconst useActiveIndicatorStyles = makeStyles({\n base: {\n '::after': {\n backgroundColor: tokens.colorTransparentStroke,\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n content: '\"\"',\n position: 'absolute',\n zIndex: 1,\n },\n },\n selected: {\n '::after': {\n backgroundColor: tokens.colorCompoundBrandStroke,\n },\n ':hover::after': {\n backgroundColor: tokens.colorCompoundBrandStrokeHover,\n },\n ':active::after': {\n backgroundColor: tokens.colorCompoundBrandStrokePressed,\n },\n '@media (forced-colors: active)': {\n '::after': {\n backgroundColor: 'ButtonText',\n },\n ':hover::after': {\n backgroundColor: 'ButtonText',\n },\n ':active::after': {\n backgroundColor: 'ButtonText',\n },\n },\n },\n disabled: {\n '::after': {\n backgroundColor: tokens.colorNeutralForegroundDisabled,\n },\n },\n mediumHorizontal: {\n '::after': {\n bottom: '0',\n height: tokens.strokeWidthThicker,\n left: tokens.spacingHorizontalM,\n right: tokens.spacingHorizontalM,\n },\n },\n mediumVertical: {\n '::after': {\n bottom: tokens.spacingVerticalS,\n left: 0,\n top: tokens.spacingVerticalS,\n width: tokens.strokeWidthThicker,\n },\n },\n smallHorizontal: {\n '::after': {\n bottom: 0,\n height: tokens.strokeWidthThick,\n left: tokens.spacingHorizontalSNudge,\n right: tokens.spacingHorizontalSNudge,\n },\n },\n smallVertical: {\n '::after': {\n bottom: tokens.spacingVerticalXS,\n left: '0',\n top: tokens.spacingVerticalXS,\n width: tokens.strokeWidthThicker,\n },\n },\n});\n\n/**\n * Styles for the icon slot.\n */\nconst useIconStyles = makeStyles({\n base: {\n alignItems: 'center',\n display: 'inline-flex',\n justifyContent: 'center',\n ...shorthands.overflow('hidden'),\n },\n // per design, the small and medium font sizes are the same.\n // the size prop only affects spacing.\n small: {\n fontSize: '20px',\n height: '20px',\n width: '20px',\n },\n medium: {\n fontSize: '20px',\n height: '20px',\n width: '20px',\n },\n});\n\n/**\n * Styles for the content slot (children)\n */\nconst useContentStyles = makeStyles({\n base: {\n ...typographyStyles.body1,\n ...shorthands.overflow('hidden'),\n // content padding is the same for medium & small, horiztonal & vertical\n ...shorthands.padding(tokens.spacingVerticalNone, tokens.spacingHorizontalXXS),\n },\n selected: {\n ...typographyStyles.body1Strong,\n },\n});\n\n/**\n * Apply styling to the Tab slots based on the state\n */\nexport const useTabStyles_unstable = (state: TabState): TabState => {\n const rootStyles = useRootStyles();\n const focusStyles = useFocusStyles();\n const pendingIndicatorStyles = usePendingIndicatorStyles();\n const activeIndicatorStyles = useActiveIndicatorStyles();\n const iconStyles = useIconStyles();\n const contentStyles = useContentStyles();\n\n const { appearance, disabled, selected, size, vertical } = state;\n\n state.root.className = mergeClasses(\n tabClassNames.root,\n rootStyles.base,\n vertical ? rootStyles.vertical : rootStyles.horizontal,\n size !== 'small' && (vertical ? rootStyles.mediumVertical : rootStyles.mediumHorizontal),\n size === 'small' && (vertical ? rootStyles.smallVertical : rootStyles.smallHorizontal),\n focusStyles.base,\n !disabled && appearance === 'subtle' && rootStyles.subtle,\n !disabled && appearance === 'transparent' && rootStyles.transparent,\n !disabled && selected && rootStyles.selected,\n disabled && rootStyles.disabled,\n\n // pending indicator (before pseudo element)\n pendingIndicatorStyles.base,\n size !== 'small' && (vertical ? pendingIndicatorStyles.mediumVertical : pendingIndicatorStyles.mediumHorizontal),\n size === 'small' && (vertical ? pendingIndicatorStyles.smallVertical : pendingIndicatorStyles.smallHorizontal),\n disabled && pendingIndicatorStyles.disabled,\n\n // active indicator (after pseudo element)\n selected && activeIndicatorStyles.base,\n selected && !disabled && activeIndicatorStyles.selected,\n selected &&\n size !== 'small' &&\n (vertical ? activeIndicatorStyles.mediumVertical : activeIndicatorStyles.mediumHorizontal),\n selected &&\n size === 'small' &&\n (vertical ? activeIndicatorStyles.smallVertical : activeIndicatorStyles.smallHorizontal),\n selected && disabled && activeIndicatorStyles.disabled,\n state.root.className,\n );\n\n if (state.icon) {\n state.icon.className = mergeClasses(tabClassNames.icon, iconStyles.base, iconStyles[size], state.icon.className);\n }\n\n state.content.className = mergeClasses(\n tabClassNames.content,\n contentStyles.base,\n selected && contentStyles.selected,\n state.content.className,\n );\n\n useTabAnimatedIndicatorStyles_unstable(state);\n\n return state;\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["components/Tab/useTabStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import type { TabSlots, TabState } from './Tab.types';\n\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport { useTabAnimatedIndicatorStyles_unstable } from './useTabAnimatedIndicator';\n\nexport const tabClassNames: SlotClassNames<TabSlots> = {\n root: 'fui-Tab',\n icon: 'fui-Tab__icon',\n content: 'fui-Tab__content',\n};\n\n/**\n * Styles for the root slot\n */\n/* eslint-disable @typescript-eslint/naming-convention */\nconst useRootStyles = makeStyles({\n base: {\n alignItems: 'center',\n ...shorthands.borderColor('none'),\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n ...shorthands.borderWidth(0),\n cursor: 'pointer',\n display: 'grid',\n flexShrink: 0,\n gridAutoFlow: 'column',\n gridTemplateColumns: 'auto',\n gridTemplateRows: 'auto',\n fontFamily: tokens.fontFamilyBase,\n lineHeight: tokens.lineHeightBase300,\n outlineStyle: 'none',\n position: 'relative',\n ...shorthands.overflow('hidden'),\n textTransform: 'none',\n },\n horizontal: {\n justifyContent: 'center',\n },\n vertical: {\n justifyContent: 'start',\n },\n mediumHorizontal: {\n columnGap: tokens.spacingHorizontalSNudge,\n ...shorthands.padding(tokens.spacingVerticalM, tokens.spacingHorizontalMNudge),\n },\n mediumVertical: {\n // horizontal spacing is deliberate. This is the gap between icon and content.\n columnGap: tokens.spacingHorizontalSNudge,\n ...shorthands.padding(tokens.spacingVerticalSNudge, tokens.spacingHorizontalMNudge),\n },\n smallHorizontal: {\n columnGap: tokens.spacingHorizontalXXS,\n ...shorthands.padding(tokens.spacingVerticalSNudge, tokens.spacingHorizontalSNudge),\n },\n smallVertical: {\n // horizontal spacing is deliberate. This is the gap between icon and content.\n columnGap: tokens.spacingHorizontalXXS,\n ...shorthands.padding(tokens.spacingVerticalXXS, tokens.spacingHorizontalSNudge),\n },\n transparent: {\n backgroundColor: tokens.colorTransparentBackground,\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n },\n ':active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n },\n '& .fui-Tab__icon': {\n color: tokens.colorNeutralForeground2,\n },\n ':hover .fui-Tab__icon': {\n color: tokens.colorNeutralForeground2Hover,\n },\n ':active .fui-Tab__icon': {\n color: tokens.colorNeutralForeground2Pressed,\n },\n '& .fui-Tab__content': {\n color: tokens.colorNeutralForeground2,\n },\n ':hover .fui-Tab__content': {\n color: tokens.colorNeutralForeground2Hover,\n },\n ':active .fui-Tab__content': {\n color: tokens.colorNeutralForeground2Pressed,\n },\n },\n subtle: {\n backgroundColor: tokens.colorSubtleBackground,\n ':hover': {\n backgroundColor: tokens.colorSubtleBackgroundHover,\n },\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n },\n '& .fui-Tab__icon': {\n color: tokens.colorNeutralForeground2,\n },\n ':hover .fui-Tab__icon': {\n color: tokens.colorNeutralForeground2Hover,\n },\n ':active .fui-Tab__icon': {\n color: tokens.colorNeutralForeground2Pressed,\n },\n '& .fui-Tab__content': {\n color: tokens.colorNeutralForeground2,\n },\n ':hover .fui-Tab__content': {\n color: tokens.colorNeutralForeground2Hover,\n },\n ':active .fui-Tab__content': {\n color: tokens.colorNeutralForeground2Pressed,\n },\n },\n disabled: {\n backgroundColor: tokens.colorTransparentBackground,\n\n '& .fui-Tab__icon': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n '& .fui-Tab__content': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n cursor: 'not-allowed',\n },\n selected: {\n '& .fui-Tab__icon': {\n color: tokens.colorCompoundBrandForeground1,\n },\n ':hover .fui-Tab__icon': {\n color: tokens.colorCompoundBrandForeground1Hover,\n },\n ':active .fui-Tab__icon': {\n color: tokens.colorCompoundBrandForeground1Pressed,\n },\n '& .fui-Tab__content': {\n color: tokens.colorNeutralForeground1,\n },\n ':hover .fui-Tab__content': {\n color: tokens.colorNeutralForeground1Hover,\n },\n ':active .fui-Tab__content': {\n color: tokens.colorNeutralForeground1Pressed,\n },\n },\n});\n/* eslint-enable @typescript-eslint/naming-convention */\n\n/**\n * Focus styles for the root slot\n */\nconst useFocusStyles = makeStyles({\n // Tab creates a custom focus indicator because the default focus indicator\n // is applied using an ::after pseudo-element on the root. Since the selection\n // indicator uses an ::after pseudo-element on the root, there is a conflict.\n base: createCustomFocusIndicatorStyle({\n ...shorthands.borderColor('transparent'),\n outlineWidth: tokens.strokeWidthThick,\n outlineColor: 'transparent',\n outlineStyle: 'solid',\n boxShadow: `\n ${tokens.shadow4},\n 0 0 0 ${tokens.strokeWidthThick} ${tokens.colorStrokeFocus2}\n `,\n zIndex: 1,\n }),\n});\n\n/** Indicator styles for when pending selection */\nconst usePendingIndicatorStyles = makeStyles({\n base: {\n ':hover::before': {\n backgroundColor: tokens.colorNeutralStroke1Hover,\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n content: '\"\"',\n position: 'absolute',\n },\n ':active::before': {\n backgroundColor: tokens.colorNeutralStroke1Pressed,\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n content: '\"\"',\n position: 'absolute',\n },\n '@media (forced-colors: active)': {\n ':hover::before': {\n backgroundColor: 'Highlight',\n },\n ':active::before': {\n backgroundColor: 'Highlight',\n },\n },\n },\n disabled: {\n ':hover::before': {\n backgroundColor: tokens.colorTransparentStroke,\n },\n ':active::before': {\n backgroundColor: tokens.colorTransparentStroke,\n },\n },\n mediumHorizontal: {\n '::before': {\n bottom: 0,\n height: tokens.strokeWidthThicker,\n left: tokens.spacingHorizontalM,\n right: tokens.spacingHorizontalM,\n },\n },\n mediumVertical: {\n '::before': {\n bottom: tokens.spacingVerticalS,\n left: 0,\n top: tokens.spacingVerticalS,\n width: tokens.strokeWidthThicker,\n },\n },\n smallHorizontal: {\n '::before': {\n bottom: 0,\n height: tokens.strokeWidthThick,\n left: tokens.spacingHorizontalSNudge,\n right: tokens.spacingHorizontalSNudge,\n },\n },\n smallVertical: {\n '::before': {\n bottom: tokens.spacingVerticalXS,\n left: 0,\n top: tokens.spacingVerticalXS,\n width: tokens.strokeWidthThicker,\n },\n },\n});\n\nconst useActiveIndicatorStyles = makeStyles({\n base: {\n '::after': {\n backgroundColor: tokens.colorTransparentStroke,\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n content: '\"\"',\n position: 'absolute',\n zIndex: 1,\n },\n },\n selected: {\n '::after': {\n backgroundColor: tokens.colorCompoundBrandStroke,\n },\n ':hover::after': {\n backgroundColor: tokens.colorCompoundBrandStrokeHover,\n },\n ':active::after': {\n backgroundColor: tokens.colorCompoundBrandStrokePressed,\n },\n '@media (forced-colors: active)': {\n '::after': {\n backgroundColor: 'ButtonText',\n },\n ':hover::after': {\n backgroundColor: 'ButtonText',\n },\n ':active::after': {\n backgroundColor: 'ButtonText',\n },\n },\n },\n disabled: {\n '::after': {\n backgroundColor: tokens.colorNeutralForegroundDisabled,\n },\n },\n mediumHorizontal: {\n '::after': {\n bottom: '0',\n height: tokens.strokeWidthThicker,\n left: tokens.spacingHorizontalM,\n right: tokens.spacingHorizontalM,\n },\n },\n mediumVertical: {\n '::after': {\n bottom: tokens.spacingVerticalS,\n left: 0,\n top: tokens.spacingVerticalS,\n width: tokens.strokeWidthThicker,\n },\n },\n smallHorizontal: {\n '::after': {\n bottom: 0,\n height: tokens.strokeWidthThick,\n left: tokens.spacingHorizontalSNudge,\n right: tokens.spacingHorizontalSNudge,\n },\n },\n smallVertical: {\n '::after': {\n bottom: tokens.spacingVerticalXS,\n left: '0',\n top: tokens.spacingVerticalXS,\n width: tokens.strokeWidthThicker,\n },\n },\n});\n\n/**\n * Styles for the icon slot.\n */\nconst useIconStyles = makeStyles({\n base: {\n alignItems: 'center',\n display: 'inline-flex',\n justifyContent: 'center',\n ...shorthands.overflow('hidden'),\n },\n // per design, the small and medium font sizes are the same.\n // the size prop only affects spacing.\n small: {\n fontSize: '20px',\n height: '20px',\n width: '20px',\n },\n medium: {\n fontSize: '20px',\n height: '20px',\n width: '20px',\n },\n});\n\n/**\n * Styles for the content slot (children)\n */\nconst useContentStyles = makeStyles({\n base: {\n ...typographyStyles.body1,\n ...shorthands.overflow('hidden'),\n // content padding is the same for medium & small, horiztonal & vertical\n ...shorthands.padding(tokens.spacingVerticalNone, tokens.spacingHorizontalXXS),\n },\n selected: {\n ...typographyStyles.body1Strong,\n },\n});\n\n/**\n * Apply styling to the Tab slots based on the state\n */\nexport const useTabStyles_unstable = (state: TabState): TabState => {\n const rootStyles = useRootStyles();\n const focusStyles = useFocusStyles();\n const pendingIndicatorStyles = usePendingIndicatorStyles();\n const activeIndicatorStyles = useActiveIndicatorStyles();\n const iconStyles = useIconStyles();\n const contentStyles = useContentStyles();\n\n const { appearance, disabled, selected, size, vertical } = state;\n\n state.root.className = mergeClasses(\n tabClassNames.root,\n rootStyles.base,\n vertical ? rootStyles.vertical : rootStyles.horizontal,\n size !== 'small' && (vertical ? rootStyles.mediumVertical : rootStyles.mediumHorizontal),\n size === 'small' && (vertical ? rootStyles.smallVertical : rootStyles.smallHorizontal),\n focusStyles.base,\n !disabled && appearance === 'subtle' && rootStyles.subtle,\n !disabled && appearance === 'transparent' && rootStyles.transparent,\n !disabled && selected && rootStyles.selected,\n disabled && rootStyles.disabled,\n\n // pending indicator (before pseudo element)\n pendingIndicatorStyles.base,\n size !== 'small' && (vertical ? pendingIndicatorStyles.mediumVertical : pendingIndicatorStyles.mediumHorizontal),\n size === 'small' && (vertical ? pendingIndicatorStyles.smallVertical : pendingIndicatorStyles.smallHorizontal),\n disabled && pendingIndicatorStyles.disabled,\n\n // active indicator (after pseudo element)\n selected && activeIndicatorStyles.base,\n selected && !disabled && activeIndicatorStyles.selected,\n selected &&\n size !== 'small' &&\n (vertical ? activeIndicatorStyles.mediumVertical : activeIndicatorStyles.mediumHorizontal),\n selected &&\n size === 'small' &&\n (vertical ? activeIndicatorStyles.smallVertical : activeIndicatorStyles.smallHorizontal),\n selected && disabled && activeIndicatorStyles.disabled,\n state.root.className,\n );\n\n if (state.icon) {\n state.icon.className = mergeClasses(tabClassNames.icon, iconStyles.base, iconStyles[size], state.icon.className);\n }\n\n state.content.className = mergeClasses(\n tabClassNames.content,\n contentStyles.base,\n selected && contentStyles.selected,\n state.content.className,\n );\n\n useTabAnimatedIndicatorStyles_unstable(state);\n\n return state;\n};\n"],"sourceRoot":"../src/"}
package/lib-commonjs/components/TabList/TabListContext.js CHANGED
@@ -5,7 +5,8 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.TabListContext = void 0;
7
7
 
8
- const react_context_selector_1 = /*#__PURE__*/require("@fluentui/react-context-selector");
8
+ const react_context_selector_1 = /*#__PURE__*/require("@fluentui/react-context-selector"); // eslint-disable-next-line @fluentui/no-context-default-value
9
+
9
10
 
10
11
  exports.TabListContext = /*#__PURE__*/react_context_selector_1.createContext({
11
12
  appearance: 'transparent',
package/lib-commonjs/components/TabList/TabListContext.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["components/TabList/TabListContext.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,wBAAA,gBAAA,OAAA,CAAA,kCAAA,CAAA;;AAIa,OAAA,CAAA,cAAA,gBAA+C,wBAAA,CAAA,aAAA,CAAmC;EAC7F,UAAU,EAAE,aADiF;EAE7F,QAAQ,EAAE,KAFmF;EAG7F,aAAa,EAAE,SAH8E;EAI7F,UAAU,EAAE,MAAK;IACf;EACD,CAN4F;EAO7F,YAAY,EAAE,MAAK;IACjB;EACD,CAT4F;EAU7F,QAAQ,EAAE,MAAK;IACb;EACD,CAZ4F;EAa7F,iBAAiB,EAAE,MAAK;IACtB,OAAO;MACL,cAAc,EAAE;IADX,CAAP;EAGD,CAjB4F;EAkB7F,IAAI,EAAE,QAlBuF;EAmB7F,QAAQ,EAAE;AAnBmF,CAAnC,CAA/C","sourcesContent":["import { createContext } from '@fluentui/react-context-selector';\nimport type { Context } from '@fluentui/react-context-selector';\nimport { TabListContextValue } from './TabList.types';\n\nexport const TabListContext: Context<TabListContextValue> = createContext<TabListContextValue>({\n appearance: 'transparent',\n disabled: false,\n selectedValue: undefined,\n onRegister: () => {\n /* noop */\n },\n onUnregister: () => {\n /* noop */\n },\n onSelect: () => {\n /* noop */\n },\n getRegisteredTabs: () => {\n return {\n registeredTabs: {},\n };\n },\n size: 'medium',\n vertical: false,\n});\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["components/TabList/TabListContext.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,wBAAA,gBAAA,OAAA,CAAA,kCAAA,CAAA,C,CAIA;;;AACa,OAAA,CAAA,cAAA,gBAA+C,wBAAA,CAAA,aAAA,CAAmC;EAC7F,UAAU,EAAE,aADiF;EAE7F,QAAQ,EAAE,KAFmF;EAG7F,aAAa,EAAE,SAH8E;EAI7F,UAAU,EAAE,MAAK;IACf;EACD,CAN4F;EAO7F,YAAY,EAAE,MAAK;IACjB;EACD,CAT4F;EAU7F,QAAQ,EAAE,MAAK;IACb;EACD,CAZ4F;EAa7F,iBAAiB,EAAE,MAAK;IACtB,OAAO;MACL,cAAc,EAAE;IADX,CAAP;EAGD,CAjB4F;EAkB7F,IAAI,EAAE,QAlBuF;EAmB7F,QAAQ,EAAE;AAnBmF,CAAnC,CAA/C","sourcesContent":["import { createContext } from '@fluentui/react-context-selector';\nimport type { Context } from '@fluentui/react-context-selector';\nimport { TabListContextValue } from './TabList.types';\n\n// eslint-disable-next-line @fluentui/no-context-default-value\nexport const TabListContext: Context<TabListContextValue> = createContext<TabListContextValue>({\n appearance: 'transparent',\n disabled: false,\n selectedValue: undefined,\n onRegister: () => {\n /* noop */\n },\n onUnregister: () => {\n /* noop */\n },\n onSelect: () => {\n /* noop */\n },\n getRegisteredTabs: () => {\n return {\n registeredTabs: {},\n };\n },\n size: 'medium',\n vertical: false,\n});\n"],"sourceRoot":"../src/"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-tabs",
3
- "version": "9.0.1",
3
+ "version": "9.0.4",
4
4
  "description": "Fluent UI React tabs components",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -27,15 +27,15 @@
27
27
  "devDependencies": {
28
28
  "@fluentui/eslint-plugin": "*",
29
29
  "@fluentui/react-conformance": "*",
30
- "@fluentui/react-conformance-griffel": "9.0.0-beta.10",
30
+ "@fluentui/react-conformance-griffel": "9.0.0-beta.12",
31
31
  "@fluentui/scripts": "^1.0.0"
32
32
  },
33
33
  "dependencies": {
34
- "@fluentui/react-context-selector": "^9.0.0",
35
- "@fluentui/react-tabster": "^9.0.1",
34
+ "@fluentui/react-context-selector": "^9.0.2",
35
+ "@fluentui/react-tabster": "^9.1.0",
36
36
  "@fluentui/react-theme": "^9.0.0",
37
- "@fluentui/react-utilities": "^9.0.0",
38
- "@griffel/react": "^1.2.0",
37
+ "@fluentui/react-utilities": "^9.0.2",
38
+ "@griffel/react": "^1.2.3",
39
39
  "tslib": "^2.1.0"
40
40
  },
41
41
  "peerDependencies": {
@@ -47,7 +47,8 @@
47
47
  },
48
48
  "beachball": {
49
49
  "disallowedChangeTypes": [
50
- "major"
50
+ "major",
51
+ "prerelease"
51
52
  ]
52
53
  },
53
54
  "exports": {