npm - @fluentui/react-tabs - Versions diffs - 9.4.19 → 9.4.21 - Mend

@fluentui/react-tabs 9.4.19 → 9.4.21

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 (5) hide show

package/CHANGELOG.md +25 -2
package/lib/components/Tab/useTabAnimatedIndicator.styles.js.map +1 -1
package/lib/components/Tab/useTabStyles.styles.js.map +1 -1
package/lib/components/TabList/useTabListStyles.styles.js.map +1 -1
package/package.json +7 -7

package/CHANGELOG.md CHANGED Viewed

@@ -1,12 +1,35 @@
 # Change Log - @fluentui/react-tabs
-This log was last generated on Mon, 06 May 2024 12:48:54 GMT and should not be manually modified.
+This log was last generated on Mon, 20 May 2024 12:36:41 GMT and should not be manually modified.
 <!-- Start content -->
+## [9.4.21](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabs_v9.4.21)
+Mon, 20 May 2024 12:36:41 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabs_v9.4.20..@fluentui/react-tabs_v9.4.21)
+### Patches
+- chore: bump @griffel/react ([PR #31258](https://github.com/microsoft/fluentui/pull/31258) by olfedias@microsoft.com)
+- Bump @fluentui/react-context-selector to v9.1.60 ([PR #26682](https://github.com/microsoft/fluentui/pull/26682) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.38 ([PR #26682](https://github.com/microsoft/fluentui/pull/26682) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.19.0 ([PR #26682](https://github.com/microsoft/fluentui/pull/26682) by beachball)
+- Bump @fluentui/react-tabster to v9.21.3 ([PR #26682](https://github.com/microsoft/fluentui/pull/26682) by beachball)
+- Bump @fluentui/react-utilities to v9.18.9 ([PR #26682](https://github.com/microsoft/fluentui/pull/26682) by beachball)
+## [9.4.20](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabs_v9.4.20)
+Thu, 09 May 2024 19:35:12 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabs_v9.4.19..@fluentui/react-tabs_v9.4.20)
+### Patches
+- Bump @fluentui/react-tabster to v9.21.2 ([PR #31321](https://github.com/microsoft/fluentui/pull/31321) by beachball)
 ## [9.4.19](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabs_v9.4.19)
-Mon, 06 May 2024 12:48:54 GMT
+Mon, 06 May 2024 12:55:02 GMT
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabs_v9.4.18..@fluentui/react-tabs_v9.4.19)
 ### Patches

package/lib/components/Tab/useTabAnimatedIndicator.styles.js.map CHANGED Viewed

	@@ -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":["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 if (previousSelectedValue && lastAnimatedFrom !== previousSelectedValue) {\n const previousSelectedTabRect = getRegisteredTabRect(registeredTabs, previousSelectedValue);\n const selectedTabRect = getRegisteredTabRect(registeredTabs, selectedValue);\n if (selectedTabRect && previousSelectedTabRect) {\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 }\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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"}
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 if (previousSelectedValue && lastAnimatedFrom !== previousSelectedValue) {\n const previousSelectedTabRect = getRegisteredTabRect(registeredTabs, previousSelectedValue);\n const selectedTabRect = getRegisteredTabRect(registeredTabs, selectedValue);\n if (selectedTabRect && previousSelectedTabRect) {\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 }\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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","ignoreList":[]}

package/lib/components/Tab/useTabStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["__styles","mergeClasses","shorthands","createCustomFocusIndicatorStyle","tokens","typographyStyles","useTabAnimatedIndicatorStyles_unstable","tabClassNames","root","icon","content","reservedSpaceClassNames","iconClassNames","filled","regular","useRootStyles","base","Bt984gj","g2u3we","h3c5rm","B9xav0g","zhjwy3","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","Bceei9c","mc9l5x","Bnnss6s","Bxotwcr","Budl1dq","wkccdc","Bahqtrf","Bg96gwp","oeaueh","qhf8xq","B68tc82","Bmxbyg5","B9bfxx9","horizontal","Brf1p80","vertical","smallHorizontal","i8kkvl","z8tnut","z189sj","Byoj8tv","uwmqm3","smallVertical","mediumHorizontal","mediumVertical","largeHorizontal","largeVertical","transparent","De3pzq","Jwef8y","ecr2s2","Bptxc3x","B076xvk","q9r9w5","cl4aha","Bk452zc","a4hkcw","subtle","disabled","selected","d","h","a","useFocusStyles","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","Bn4voq9","Bfpq7zp","g9k6zt","j6ew2k","Bhxq17a","usePendingIndicatorStyles","az7l2e","Bv4n3vi","vqofr","B0uxbk8","Bgqb9hq","amg5m6","zkfqfm","Bkydozb","vzq8l0","Bka2azo","Br4ovkg","csmgbd","y36c18","B1ctymy","Bgvrrv0","ddr6p5","lawp4y","Baz25je","Fbdkly","mdwyqc","Bciustq","Ccq8qp","m","useActiveIndicatorStyles","Bjyk6c5","B3778ie","d9w3h3","Bl18szs","B4j8arr","Bsft5z2","E3zdtr","Glksuk","Blzl0y7","f7digc","Biqphg1","Bntoloa","By385i5","Dlnsje","Eqx8gd","B1piin3","bn5sak","a2br6o","useIconStyles","Br312pm","Ijaq50","D0sxk3","t6yez3","small","Be2twd7","Bqenvij","a9b677","medium","large","useContentStyles","Bhrd7zp","largeSelected","noIconBefore","iconBefore","placeholder","Bcdw1i0","useTabStyles_unstable","state","rootStyles","focusStyles","pendingIndicatorStyles","activeIndicatorStyles","iconStyles","contentStyles","appearance","size","className","contentReservedSpace","contentReservedSpaceClassName"],"sources":["useTabStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { useTabAnimatedIndicatorStyles_unstable } from './useTabAnimatedIndicator.styles';\nexport const tabClassNames = {\n root: 'fui-Tab',\n icon: 'fui-Tab__icon',\n content: 'fui-Tab__content'\n};\nconst reservedSpaceClassNames = {\n content: 'fui-Tab__content--reserved-space'\n};\n// These should match the constants defined in @fluentui/react-icons\n// This package avoids taking a dependency on the icons package for only the constants.\nconst iconClassNames = {\n filled: 'fui-Icon-filled',\n regular: 'fui-Icon-regular'\n};\n/*\n Styles for the root slot\n / / eslint-disable @typescript-eslint/naming-convention / const 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 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 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 largeHorizontal: {\n columnGap: tokens.spacingHorizontalSNudge,\n ...shorthands.padding(tokens.spacingVerticalL, tokens.spacingHorizontalMNudge)\n },\n largeVertical: {\n // horizontal spacing is deliberate. This is the gap between icon and content.\n columnGap: tokens.spacingHorizontalSNudge,\n ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalMNudge)\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 '& .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 Focus styles for the root slot\n / const 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 enableOutline: true\n })\n});\n/* Indicator styles for when pending selection / const 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 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 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 largeHorizontal: {\n '::before': {\n bottom: 0,\n height: tokens.strokeWidthThicker,\n left: tokens.spacingHorizontalM,\n right: tokens.spacingHorizontalM\n }\n },\n largeVertical: {\n '::before': {\n bottom: tokens.spacingVerticalMNudge,\n left: 0,\n top: tokens.spacingVerticalMNudge,\n width: tokens.strokeWidthThicker\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 }\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 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 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 largeHorizontal: {\n '::after': {\n bottom: 0,\n height: tokens.strokeWidthThicker,\n left: tokens.spacingHorizontalM,\n right: tokens.spacingHorizontalM\n }\n },\n largeVertical: {\n '::after': {\n bottom: tokens.spacingVerticalMNudge,\n left: 0,\n top: tokens.spacingVerticalMNudge,\n width: tokens.strokeWidthThicker\n }\n }\n});\n/\n Styles for the icon slot.\n / const useIconStyles = makeStyles({\n base: {\n gridColumnStart: 1,\n gridRowStart: 1,\n alignItems: 'center',\n display: 'inline-flex',\n justifyContent: 'center',\n ...shorthands.overflow('hidden'),\n [`& .${iconClassNames.filled}`]: {\n display: 'none'\n },\n [`& .${iconClassNames.regular}`]: {\n display: 'inline'\n }\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 large: {\n fontSize: '24px',\n height: '24px',\n width: '24px'\n },\n selected: {\n [`& .${iconClassNames.filled}`]: {\n display: 'inline'\n },\n [`& .${iconClassNames.regular}`]: {\n display: 'none'\n }\n }\n});\n/\n Styles for the content slot (children)\n / const 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 large: {\n ...typographyStyles.body2\n },\n largeSelected: {\n ...typographyStyles.subtitle2\n },\n noIconBefore: {\n gridColumnStart: 1,\n gridRowStart: 1\n },\n iconBefore: {\n gridColumnStart: 2,\n gridRowStart: 1\n },\n placeholder: {\n visibility: 'hidden'\n }\n});\n/\n Apply styling to the Tab slots based on the state\n */ export const useTabStyles_unstable = (state)=>{\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 const { appearance, disabled, selected, size, vertical } = state;\n state.root.className = mergeClasses(tabClassNames.root, rootStyles.base, vertical ? rootStyles.vertical : rootStyles.horizontal, size === 'small' && (vertical ? rootStyles.smallVertical : rootStyles.smallHorizontal), size === 'medium' && (vertical ? rootStyles.mediumVertical : rootStyles.mediumHorizontal), size === 'large' && (vertical ? rootStyles.largeVertical : rootStyles.largeHorizontal), focusStyles.base, !disabled && appearance === 'subtle' && rootStyles.subtle, !disabled && appearance === 'transparent' && rootStyles.transparent, !disabled && selected && rootStyles.selected, disabled && rootStyles.disabled, // pending indicator (before pseudo element)\n pendingIndicatorStyles.base, size === 'small' && (vertical ? pendingIndicatorStyles.smallVertical : pendingIndicatorStyles.smallHorizontal), size === 'medium' && (vertical ? pendingIndicatorStyles.mediumVertical : pendingIndicatorStyles.mediumHorizontal), size === 'large' && (vertical ? pendingIndicatorStyles.largeVertical : pendingIndicatorStyles.largeHorizontal), disabled && pendingIndicatorStyles.disabled, // active indicator (after pseudo element)\n selected && activeIndicatorStyles.base, selected && !disabled && activeIndicatorStyles.selected, selected && size === 'small' && (vertical ? activeIndicatorStyles.smallVertical : activeIndicatorStyles.smallHorizontal), selected && size === 'medium' && (vertical ? activeIndicatorStyles.mediumVertical : activeIndicatorStyles.mediumHorizontal), selected && size === 'large' && (vertical ? activeIndicatorStyles.largeVertical : activeIndicatorStyles.largeHorizontal), selected && disabled && activeIndicatorStyles.disabled, state.root.className);\n if (state.icon) {\n state.icon.className = mergeClasses(tabClassNames.icon, iconStyles.base, iconStyles[size], selected && iconStyles.selected, state.icon.className);\n }\n // This needs to be before state.content.className is updated\n if (state.contentReservedSpace) {\n state.contentReservedSpace.className = mergeClasses(reservedSpaceClassNames.content, contentStyles.base, size === 'large' ? contentStyles.largeSelected : contentStyles.selected, state.icon ? contentStyles.iconBefore : contentStyles.noIconBefore, contentStyles.placeholder, state.content.className);\n // FIXME: this is a deprecated API\n // should be removed in the next major version\n // eslint-disable-next-line deprecation/deprecation\n state.contentReservedSpaceClassName = state.contentReservedSpace.className;\n }\n state.content.className = mergeClasses(tabClassNames.content, contentStyles.base, size === 'large' && contentStyles.large, selected && (size === 'large' ? contentStyles.largeSelected : contentStyles.selected), state.icon ? contentStyles.iconBefore : contentStyles.noIconBefore, state.content.className);\n useTabAnimatedIndicatorStyles_unstable(state);\n return state;\n};\n"],"mappings":"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"}
1	+ {"version":3,"names":["__styles","mergeClasses","shorthands","createCustomFocusIndicatorStyle","tokens","typographyStyles","useTabAnimatedIndicatorStyles_unstable","tabClassNames","root","icon","content","reservedSpaceClassNames","iconClassNames","filled","regular","useRootStyles","base","Bt984gj","g2u3we","h3c5rm","B9xav0g","zhjwy3","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","Bceei9c","mc9l5x","Bnnss6s","Bxotwcr","Budl1dq","wkccdc","Bahqtrf","Bg96gwp","oeaueh","qhf8xq","B68tc82","Bmxbyg5","B9bfxx9","horizontal","Brf1p80","vertical","smallHorizontal","i8kkvl","z8tnut","z189sj","Byoj8tv","uwmqm3","smallVertical","mediumHorizontal","mediumVertical","largeHorizontal","largeVertical","transparent","De3pzq","Jwef8y","ecr2s2","Bptxc3x","B076xvk","q9r9w5","cl4aha","Bk452zc","a4hkcw","subtle","disabled","selected","d","h","a","useFocusStyles","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","Bn4voq9","Bfpq7zp","g9k6zt","j6ew2k","Bhxq17a","usePendingIndicatorStyles","az7l2e","Bv4n3vi","vqofr","B0uxbk8","Bgqb9hq","amg5m6","zkfqfm","Bkydozb","vzq8l0","Bka2azo","Br4ovkg","csmgbd","y36c18","B1ctymy","Bgvrrv0","ddr6p5","lawp4y","Baz25je","Fbdkly","mdwyqc","Bciustq","Ccq8qp","m","useActiveIndicatorStyles","Bjyk6c5","B3778ie","d9w3h3","Bl18szs","B4j8arr","Bsft5z2","E3zdtr","Glksuk","Blzl0y7","f7digc","Biqphg1","Bntoloa","By385i5","Dlnsje","Eqx8gd","B1piin3","bn5sak","a2br6o","useIconStyles","Br312pm","Ijaq50","D0sxk3","t6yez3","small","Be2twd7","Bqenvij","a9b677","medium","large","useContentStyles","Bhrd7zp","largeSelected","noIconBefore","iconBefore","placeholder","Bcdw1i0","useTabStyles_unstable","state","rootStyles","focusStyles","pendingIndicatorStyles","activeIndicatorStyles","iconStyles","contentStyles","appearance","size","className","contentReservedSpace","contentReservedSpaceClassName"],"sources":["useTabStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { useTabAnimatedIndicatorStyles_unstable } from './useTabAnimatedIndicator.styles';\nexport const tabClassNames = {\n root: 'fui-Tab',\n icon: 'fui-Tab__icon',\n content: 'fui-Tab__content'\n};\nconst reservedSpaceClassNames = {\n content: 'fui-Tab__content--reserved-space'\n};\n// These should match the constants defined in @fluentui/react-icons\n// This package avoids taking a dependency on the icons package for only the constants.\nconst iconClassNames = {\n filled: 'fui-Icon-filled',\n regular: 'fui-Icon-regular'\n};\n/*\n Styles for the root slot\n / / eslint-disable @typescript-eslint/naming-convention / const 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 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 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 largeHorizontal: {\n columnGap: tokens.spacingHorizontalSNudge,\n ...shorthands.padding(tokens.spacingVerticalL, tokens.spacingHorizontalMNudge)\n },\n largeVertical: {\n // horizontal spacing is deliberate. This is the gap between icon and content.\n columnGap: tokens.spacingHorizontalSNudge,\n ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalMNudge)\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 '& .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 Focus styles for the root slot\n / const 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 enableOutline: true\n })\n});\n/* Indicator styles for when pending selection / const 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 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 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 largeHorizontal: {\n '::before': {\n bottom: 0,\n height: tokens.strokeWidthThicker,\n left: tokens.spacingHorizontalM,\n right: tokens.spacingHorizontalM\n }\n },\n largeVertical: {\n '::before': {\n bottom: tokens.spacingVerticalMNudge,\n left: 0,\n top: tokens.spacingVerticalMNudge,\n width: tokens.strokeWidthThicker\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 }\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 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 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 largeHorizontal: {\n '::after': {\n bottom: 0,\n height: tokens.strokeWidthThicker,\n left: tokens.spacingHorizontalM,\n right: tokens.spacingHorizontalM\n }\n },\n largeVertical: {\n '::after': {\n bottom: tokens.spacingVerticalMNudge,\n left: 0,\n top: tokens.spacingVerticalMNudge,\n width: tokens.strokeWidthThicker\n }\n }\n});\n/\n Styles for the icon slot.\n / const useIconStyles = makeStyles({\n base: {\n gridColumnStart: 1,\n gridRowStart: 1,\n alignItems: 'center',\n display: 'inline-flex',\n justifyContent: 'center',\n ...shorthands.overflow('hidden'),\n [`& .${iconClassNames.filled}`]: {\n display: 'none'\n },\n [`& .${iconClassNames.regular}`]: {\n display: 'inline'\n }\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 large: {\n fontSize: '24px',\n height: '24px',\n width: '24px'\n },\n selected: {\n [`& .${iconClassNames.filled}`]: {\n display: 'inline'\n },\n [`& .${iconClassNames.regular}`]: {\n display: 'none'\n }\n }\n});\n/\n Styles for the content slot (children)\n / const 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 large: {\n ...typographyStyles.body2\n },\n largeSelected: {\n ...typographyStyles.subtitle2\n },\n noIconBefore: {\n gridColumnStart: 1,\n gridRowStart: 1\n },\n iconBefore: {\n gridColumnStart: 2,\n gridRowStart: 1\n },\n placeholder: {\n visibility: 'hidden'\n }\n});\n/\n Apply styling to the Tab slots based on the state\n */ export const useTabStyles_unstable = (state)=>{\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 const { appearance, disabled, selected, size, vertical } = state;\n state.root.className = mergeClasses(tabClassNames.root, rootStyles.base, vertical ? rootStyles.vertical : rootStyles.horizontal, size === 'small' && (vertical ? rootStyles.smallVertical : rootStyles.smallHorizontal), size === 'medium' && (vertical ? rootStyles.mediumVertical : rootStyles.mediumHorizontal), size === 'large' && (vertical ? rootStyles.largeVertical : rootStyles.largeHorizontal), focusStyles.base, !disabled && appearance === 'subtle' && rootStyles.subtle, !disabled && appearance === 'transparent' && rootStyles.transparent, !disabled && selected && rootStyles.selected, disabled && rootStyles.disabled, // pending indicator (before pseudo element)\n pendingIndicatorStyles.base, size === 'small' && (vertical ? pendingIndicatorStyles.smallVertical : pendingIndicatorStyles.smallHorizontal), size === 'medium' && (vertical ? pendingIndicatorStyles.mediumVertical : pendingIndicatorStyles.mediumHorizontal), size === 'large' && (vertical ? pendingIndicatorStyles.largeVertical : pendingIndicatorStyles.largeHorizontal), disabled && pendingIndicatorStyles.disabled, // active indicator (after pseudo element)\n selected && activeIndicatorStyles.base, selected && !disabled && activeIndicatorStyles.selected, selected && size === 'small' && (vertical ? activeIndicatorStyles.smallVertical : activeIndicatorStyles.smallHorizontal), selected && size === 'medium' && (vertical ? activeIndicatorStyles.mediumVertical : activeIndicatorStyles.mediumHorizontal), selected && size === 'large' && (vertical ? activeIndicatorStyles.largeVertical : activeIndicatorStyles.largeHorizontal), selected && disabled && activeIndicatorStyles.disabled, state.root.className);\n if (state.icon) {\n state.icon.className = mergeClasses(tabClassNames.icon, iconStyles.base, iconStyles[size], selected && iconStyles.selected, state.icon.className);\n }\n // This needs to be before state.content.className is updated\n if (state.contentReservedSpace) {\n state.contentReservedSpace.className = mergeClasses(reservedSpaceClassNames.content, contentStyles.base, size === 'large' ? contentStyles.largeSelected : contentStyles.selected, state.icon ? contentStyles.iconBefore : contentStyles.noIconBefore, contentStyles.placeholder, state.content.className);\n // FIXME: this is a deprecated API\n // should be removed in the next major version\n // eslint-disable-next-line deprecation/deprecation\n state.contentReservedSpaceClassName = state.contentReservedSpace.className;\n }\n state.content.className = mergeClasses(tabClassNames.content, contentStyles.base, size === 'large' && contentStyles.large, selected && (size === 'large' ? contentStyles.largeSelected : contentStyles.selected), state.icon ? contentStyles.iconBefore : contentStyles.noIconBefore, state.content.className);\n useTabAnimatedIndicatorStyles_unstable(state);\n return state;\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/components/TabList/useTabListStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["__styles","mergeClasses","tabListClassNames","root","useStyles","mc9l5x","Beiy3e4","Bnnss6s","Eh141a","qhf8xq","horizontal","Bt984gj","vertical","d","useTabListStyles_unstable","state","styles","className"],"sources":["useTabListStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nexport const tabListClassNames = {\n root: 'fui-TabList'\n};\n/*\n Styles for the root slot\n / const useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'row',\n flexShrink: 0,\n flexWrap: 'nowrap',\n position: 'relative'\n },\n horizontal: {\n alignItems: 'stretch',\n flexDirection: 'row'\n },\n vertical: {\n alignItems: 'stretch',\n flexDirection: 'column'\n }\n});\n/\n Apply styling to the TabList slots based on the state\n */ export const useTabListStyles_unstable = (state)=>{\n const { vertical } = state;\n const styles = useStyles();\n state.root.className = mergeClasses(tabListClassNames.root, styles.root, vertical ? styles.vertical : styles.horizontal, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,OAAO,MAAMC,iBAAiB,GAAG;EAC7BC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGJ,QAAA;EAAAG,IAAA;IAAAE,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,UAAA;IAAAC,OAAA;IAAAL,OAAA;EAAA;EAAAM,QAAA;IAAAD,OAAA;IAAAL,OAAA;EAAA;AAAA;EAAAO,CAAA;AAAA,CAgBrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,yBAAyB,GAAIC,KAAK,IAAG;EAClD,MAAM;IAAEH;EAAS,CAAC,GAAGG,KAAK;EAC1B,MAAMC,MAAM,GAAGZ,SAAS,CAAC,CAAC;EAC1BW,KAAK,CAACZ,IAAI,CAACc,SAAS,GAAGhB,YAAY,CAACC,iBAAiB,CAACC,IAAI,EAAEa,MAAM,CAACb,IAAI,EAAES,QAAQ,GAAGI,MAAM,CAACJ,QAAQ,GAAGI,MAAM,CAACN,UAAU,EAAEK,KAAK,CAACZ,IAAI,CAACc,SAAS,CAAC;EAC9I,OAAOF,KAAK;AAChB,CAAC"}
1	+ {"version":3,"names":["__styles","mergeClasses","tabListClassNames","root","useStyles","mc9l5x","Beiy3e4","Bnnss6s","Eh141a","qhf8xq","horizontal","Bt984gj","vertical","d","useTabListStyles_unstable","state","styles","className"],"sources":["useTabListStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nexport const tabListClassNames = {\n root: 'fui-TabList'\n};\n/*\n Styles for the root slot\n / const useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'row',\n flexShrink: 0,\n flexWrap: 'nowrap',\n position: 'relative'\n },\n horizontal: {\n alignItems: 'stretch',\n flexDirection: 'row'\n },\n vertical: {\n alignItems: 'stretch',\n flexDirection: 'column'\n }\n});\n/\n Apply styling to the TabList slots based on the state\n */ export const useTabListStyles_unstable = (state)=>{\n const { vertical } = state;\n const styles = useStyles();\n state.root.className = mergeClasses(tabListClassNames.root, styles.root, vertical ? styles.vertical : styles.horizontal, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,OAAO,MAAMC,iBAAiB,GAAG;EAC7BC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGJ,QAAA;EAAAG,IAAA;IAAAE,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,UAAA;IAAAC,OAAA;IAAAL,OAAA;EAAA;EAAAM,QAAA;IAAAD,OAAA;IAAAL,OAAA;EAAA;AAAA;EAAAO,CAAA;AAAA,CAgBrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,yBAAyB,GAAIC,KAAK,IAAG;EAClD,MAAM;IAAEH;EAAS,CAAC,GAAGG,KAAK;EAC1B,MAAMC,MAAM,GAAGZ,SAAS,CAAC,CAAC;EAC1BW,KAAK,CAACZ,IAAI,CAACc,SAAS,GAAGhB,YAAY,CAACC,iBAAiB,CAACC,IAAI,EAAEa,MAAM,CAACb,IAAI,EAAES,QAAQ,GAAGI,MAAM,CAACJ,QAAQ,GAAGI,MAAM,CAACN,UAAU,EAAEK,KAAK,CAACZ,IAAI,CAACc,SAAS,CAAC;EAC9I,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-tabs",
-  "version": "9.4.19",
+  "version": "9.4.21",
   "description": "Fluent UI React tabs components",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -32,13 +32,13 @@
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/react-context-selector": "^9.1.59",
-    "@fluentui/react-jsx-runtime": "^9.0.37",
-    "@fluentui/react-shared-contexts": "^9.18.0",
-    "@fluentui/react-tabster": "^9.21.1",
+    "@fluentui/react-context-selector": "^9.1.60",
+    "@fluentui/react-jsx-runtime": "^9.0.38",
+    "@fluentui/react-shared-contexts": "^9.19.0",
+    "@fluentui/react-tabster": "^9.21.3",
     "@fluentui/react-theme": "^9.1.19",
-    "@fluentui/react-utilities": "^9.18.8",
-    "@griffel/react": "^1.5.14",
+    "@fluentui/react-utilities": "^9.18.9",
+    "@griffel/react": "^1.5.22",
     "@swc/helpers": "^0.5.1"
   },
   "peerDependencies": {