npm - @fluentui/react-tabs - Versions diffs - 9.10.1 → 9.10.2 - Mend

@fluentui/react-tabs 9.10.1 → 9.10.2

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

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/Tab/useTabStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { TabSlots, TabState } from './Tab.types';\nimport { useTabAnimatedIndicatorStyles_unstable } from './useTabAnimatedIndicator.styles';\n\nexport const tabClassNames: SlotClassNames<TabSlots> = {\n root: 'fui-Tab',\n icon: 'fui-Tab__icon',\n content: 'fui-Tab__content',\n};\n\nexport const tabReservedSpaceClassNames = {\n content: 'fui-Tab__content--reserved-space',\n};\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/*\n Styles for the root slot\n /\nconst useRootStyles = makeStyles({\n root: {\n alignItems: 'center',\n display: 'grid',\n flexShrink: 0,\n gridAutoFlow: 'column',\n gridTemplateColumns: 'auto',\n gridTemplateRows: 'auto',\n outlineStyle: 'none',\n position: 'relative',\n },\n button: {\n alignItems: 'center',\n border: 'none',\n borderRadius: tokens.borderRadiusMedium,\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 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 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 padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalSNudge}`,\n },\n mediumHorizontal: {\n columnGap: tokens.spacingHorizontalSNudge,\n 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 padding: `${tokens.spacingVerticalSNudge} ${tokens.spacingHorizontalMNudge}`,\n },\n largeHorizontal: {\n columnGap: tokens.spacingHorizontalSNudge,\n 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 padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalMNudge}`,\n },\n transparent: {\n backgroundColor: tokens.colorTransparentBackground,\n ':enabled:hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n },\n ':enabled:active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n },\n [`& .${tabClassNames.icon}`]: {\n color: tokens.colorNeutralForeground2,\n },\n [`:enabled:hover .${tabClassNames.icon}`]: {\n color: tokens.colorNeutralForeground2Hover,\n },\n [`:enabled:active .${tabClassNames.icon}`]: {\n color: tokens.colorNeutralForeground2Pressed,\n },\n [`& .${tabClassNames.content}`]: {\n color: tokens.colorNeutralForeground2,\n },\n [`:enabled:hover .${tabClassNames.content}`]: {\n color: tokens.colorNeutralForeground2Hover,\n },\n [`:enabled:active .${tabClassNames.content}`]: {\n color: tokens.colorNeutralForeground2Pressed,\n },\n },\n subtle: {\n backgroundColor: tokens.colorSubtleBackground,\n ':enabled:hover': {\n backgroundColor: tokens.colorSubtleBackgroundHover,\n },\n ':enabled:active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n },\n [`& .${tabClassNames.icon}`]: {\n color: tokens.colorNeutralForeground2,\n },\n [`:enabled:hover .${tabClassNames.icon}`]: {\n color: tokens.colorNeutralForeground2Hover,\n },\n [`:enabled:active .${tabClassNames.icon}`]: {\n color: tokens.colorNeutralForeground2Pressed,\n },\n [`& .${tabClassNames.content}`]: {\n color: tokens.colorNeutralForeground2,\n },\n [`:enabled:hover .${tabClassNames.content}`]: {\n color: tokens.colorNeutralForeground2Hover,\n },\n [`:enabled:active .${tabClassNames.content}`]: {\n color: tokens.colorNeutralForeground2Pressed,\n },\n },\n disabledCursor: {\n cursor: 'not-allowed',\n },\n disabled: {\n backgroundColor: tokens.colorTransparentBackground,\n\n [`& .${tabClassNames.icon}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n [`& .${tabClassNames.content}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n selected: {\n [`& .${tabClassNames.icon}`]: {\n color: tokens.colorCompoundBrandForeground1,\n },\n [`:enabled:hover .${tabClassNames.icon}`]: {\n color: tokens.colorCompoundBrandForeground1Hover,\n },\n [`:enabled:active .${tabClassNames.icon}`]: {\n color: tokens.colorCompoundBrandForeground1Pressed,\n },\n [`& .${tabClassNames.content}`]: {\n color: tokens.colorNeutralForeground1,\n },\n [`:enabled:hover .${tabClassNames.content}`]: {\n color: tokens.colorNeutralForeground1Hover,\n },\n [`:enabled:active .${tabClassNames.content}`]: {\n color: tokens.colorNeutralForeground1Pressed,\n },\n },\n});\n\nconst useCircularAppearanceStyles = makeStyles({\n base: {\n borderRadius: tokens.borderRadiusCircular,\n border: `solid ${tokens.strokeWidthThin} ${tokens.colorTransparentStroke}`,\n [`& .${tabClassNames.icon}`]: {\n color: 'inherit',\n },\n [`& .${tabClassNames.content}`]: {\n color: 'inherit',\n },\n },\n small: {\n paddingBlock: `calc(${tokens.spacingVerticalXXS} - ${tokens.strokeWidthThin})`,\n },\n medium: {\n paddingBlock: `calc(${tokens.spacingVerticalSNudge} - ${tokens.strokeWidthThin})`,\n },\n large: {\n paddingBlock: `calc(${tokens.spacingVerticalS} - ${tokens.strokeWidthThin})`,\n },\n subtle: {\n backgroundColor: tokens.colorSubtleBackground,\n color: tokens.colorNeutralForeground2,\n ':enabled:hover': {\n backgroundColor: tokens.colorSubtleBackgroundHover,\n border: `solid ${tokens.strokeWidthThin} ${tokens.colorNeutralStroke1Hover}`,\n color: tokens.colorNeutralForeground2Hover,\n },\n ':enabled:active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n border: `solid ${tokens.strokeWidthThin} ${tokens.colorNeutralStroke1Pressed}`,\n color: tokens.colorNeutralForeground2Pressed,\n },\n '@media (forced-colors: active)': {\n border: `solid ${tokens.strokeWidthThin} Canvas`,\n },\n },\n subtleSelected: {\n backgroundColor: tokens.colorBrandBackground2,\n border: `solid ${tokens.strokeWidthThin} ${tokens.colorCompoundBrandStroke}`,\n color: tokens.colorBrandForeground2,\n ':enabled:hover': {\n backgroundColor: tokens.colorBrandBackground2Hover,\n border: `solid ${tokens.strokeWidthThin} ${tokens.colorCompoundBrandStrokeHover}`,\n color: tokens.colorBrandForeground2Hover,\n },\n ':enabled:active': {\n backgroundColor: tokens.colorBrandBackground2Pressed,\n border: `solid ${tokens.strokeWidthThin} ${tokens.colorCompoundBrandStrokePressed}`,\n color: tokens.colorBrandForeground2Pressed,\n },\n '@media (forced-colors: active)': {\n border: `solid ${tokens.strokeWidthThin} Highlight`,\n },\n },\n subtleDisabled: {\n backgroundColor: tokens.colorSubtleBackground,\n color: tokens.colorNeutralForegroundDisabled,\n },\n subtleDisabledSelected: {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n border: `solid ${tokens.strokeWidthThin} ${tokens.colorNeutralStrokeDisabled}`,\n color: tokens.colorNeutralForegroundDisabled,\n },\n filled: {\n backgroundColor: tokens.colorNeutralBackground3,\n color: tokens.colorNeutralForeground2,\n ':enabled:hover': {\n backgroundColor: tokens.colorNeutralBackground3Hover,\n color: tokens.colorNeutralForeground2Hover,\n },\n ':enabled:active': {\n backgroundColor: tokens.colorNeutralBackground3Pressed,\n color: tokens.colorNeutralForeground2Pressed,\n },\n '@media (forced-colors: active)': {\n ':enabled:hover': {\n backgroundColor: 'Highlight',\n forcedColorAdjust: 'none',\n [`& .${tabClassNames.content}`]: {\n color: 'HighlightText',\n },\n [`& .${iconClassNames.filled}`]: {\n color: 'HighlightText',\n },\n [`& .${iconClassNames.regular}`]: {\n color: 'HighlightText',\n },\n },\n },\n },\n filledSelected: {\n backgroundColor: tokens.colorBrandBackground,\n color: tokens.colorNeutralForegroundOnBrand,\n ':enabled:hover': {\n backgroundColor: tokens.colorBrandBackgroundHover,\n color: tokens.colorNeutralForegroundOnBrand,\n },\n ':enabled:active': {\n backgroundColor: tokens.colorBrandBackgroundPressed,\n color: tokens.colorNeutralForegroundOnBrand,\n },\n '@media (forced-colors: active)': {\n ':enabled': {\n backgroundColor: 'ButtonText',\n [`& .${tabClassNames.content}`]: {\n color: 'ButtonFace',\n forcedColorAdjust: 'none',\n },\n },\n [`:enabled .${tabClassNames.icon}`]: {\n color: 'ButtonFace',\n },\n },\n },\n filledDisabled: {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n color: tokens.colorNeutralForegroundDisabled,\n },\n filledDisabledSelected: {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n border: `solid ${tokens.strokeWidthThin} ${tokens.colorNeutralStrokeDisabled}`,\n color: tokens.colorNeutralForegroundDisabled,\n },\n});\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 {\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 circular: createCustomFocusIndicatorStyle(\n {\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 0 0 0 ${tokens.strokeWidthThin} ${tokens.colorNeutralStrokeOnBrand} inset\n `,\n zIndex: 1,\n },\n { enableOutline: true },\n ),\n});\n\n/* Indicator styles for when pending selection /\nconst usePendingIndicatorStyles = makeStyles({\n base: {\n ':hover::before': {\n backgroundColor: tokens.colorNeutralStroke1Hover,\n borderRadius: tokens.borderRadiusCircular,\n content: '\"\"',\n position: 'absolute',\n },\n ':active::before': {\n backgroundColor: tokens.colorNeutralStroke1Pressed,\n 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 '@media (forced-colors: active)': {\n ':hover::before': {\n backgroundColor: 'transparent',\n },\n ':active::before': {\n backgroundColor: 'transparent',\n },\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});\n\nconst useActiveIndicatorStyles = makeStyles({\n base: {\n '::after': {\n backgroundColor: tokens.colorTransparentStroke,\n borderRadius: tokens.borderRadiusCircular,\n content: '\"\"',\n position: 'absolute',\n },\n },\n selected: {\n '::after': {\n backgroundColor: tokens.colorCompoundBrandStroke,\n },\n ':enabled:hover::after': {\n backgroundColor: tokens.colorCompoundBrandStrokeHover,\n },\n ':enabled:active::after': {\n backgroundColor: tokens.colorCompoundBrandStrokePressed,\n },\n '@media (forced-colors: active)': {\n '::after': {\n backgroundColor: 'ButtonText',\n },\n ':enabled:hover::after': {\n backgroundColor: 'ButtonText',\n },\n ':enabled: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/\n Styles for the icon slot.\n /\nconst useIconStyles = makeStyles({\n base: {\n gridColumnStart: 1,\n gridRowStart: 1,\n alignItems: 'center',\n display: 'inline-flex',\n justifyContent: 'center',\n 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/\n Styles for the content slot (children)\n /\nconst useContentStyles = makeStyles({\n base: {\n ...typographyStyles.body1,\n overflow: 'hidden',\n // content padding is the same for medium & small, horizontal & vertical\n 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/\n Apply styling to the Tab slots based on the state\n /\nexport const useTabStyles_unstable = (state: TabState): TabState => {\n 'use no memo';\n\n useTabIndicatorStyles_unstable(state);\n\n useTabButtonStyles_unstable(state, state.root);\n\n useTabContentStyles_unstable(state);\n\n return state;\n};\n\n/\n Applies styles for the Tab indicator based on its current state.\n \n This hook is typically used internally by `useTabStyles_unstable`. You should\n * only use it directly if you're creating a custom `Tab` component.\n \n @param state - The `Tab` component's current state\n * @returns The state object with updated button styles\n /\nexport const useTabIndicatorStyles_unstable = (state: TabState): TabState => {\n 'use no memo';\n\n const rootStyles = useRootStyles();\n const pendingIndicatorStyles = usePendingIndicatorStyles();\n const activeIndicatorStyles = useActiveIndicatorStyles();\n\n const { appearance, disabled, selected, size, vertical } = state;\n\n const classes: Parameters<typeof mergeClasses> = [tabClassNames.root, rootStyles.root];\n\n if (appearance !== 'subtle-circular' && appearance !== 'filled-circular') {\n classes.push(\n // pending indicator (before pseudo element)\n pendingIndicatorStyles.base,\n size === 'small' && (vertical ? pendingIndicatorStyles.smallVertical : pendingIndicatorStyles.smallHorizontal),\n size === 'medium' && (vertical ? pendingIndicatorStyles.mediumVertical : pendingIndicatorStyles.mediumHorizontal),\n size === 'large' && (vertical ? pendingIndicatorStyles.largeVertical : pendingIndicatorStyles.largeHorizontal),\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.smallVertical : activeIndicatorStyles.smallHorizontal),\n selected &&\n size === 'medium' &&\n (vertical ? activeIndicatorStyles.mediumVertical : activeIndicatorStyles.mediumHorizontal),\n selected &&\n size === 'large' &&\n (vertical ? activeIndicatorStyles.largeVertical : activeIndicatorStyles.largeHorizontal),\n selected && disabled && activeIndicatorStyles.disabled,\n );\n }\n\n state.root.className = mergeClasses(...classes, state.root.className);\n\n useTabAnimatedIndicatorStyles_unstable(state);\n\n return state;\n};\n\n/\n Applies styles to the Tab button slot based on its current state.\n \n This hook is typically used internally by `useTabStyles_unstable`. You should\n * only use it directly if you're creating a custom `Tab` component.\n \n @param state - The Tab component's current state\n * @param slot - The button slot of the Tab component\n * @returns The state object with updated button styles\n /\nexport const useTabButtonStyles_unstable = (state: TabState, slot: TabState['root']): TabState => {\n 'use no memo';\n\n const rootStyles = useRootStyles();\n const focusStyles = useFocusStyles();\n const circularStyles = useCircularAppearanceStyles();\n\n const { appearance, disabled, selected, size, vertical } = state;\n\n const isSubtleCircular = appearance === 'subtle-circular';\n const isFilledCircular = appearance === 'filled-circular';\n const isCircular = isSubtleCircular \|\| isFilledCircular;\n\n const circularAppearance = [\n circularStyles.base,\n focusStyles.circular,\n // sizes\n size === 'small' && circularStyles.small,\n size === 'medium' && circularStyles.medium,\n size === 'large' && circularStyles.large,\n // subtle-circular appearance\n isSubtleCircular && circularStyles.subtle,\n selected && isSubtleCircular && circularStyles.subtleSelected,\n disabled && isSubtleCircular && circularStyles.subtleDisabled,\n selected && disabled && isSubtleCircular && circularStyles.subtleDisabledSelected,\n // filled-circular appearance\n isFilledCircular && circularStyles.filled,\n selected && isFilledCircular && circularStyles.filledSelected,\n disabled && isFilledCircular && circularStyles.filledDisabled,\n selected && disabled && isFilledCircular && circularStyles.filledDisabledSelected,\n ];\n\n const regularAppearance = [\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\n slot.className = mergeClasses(\n rootStyles.button,\n // orientation\n vertical ? rootStyles.vertical : rootStyles.horizontal,\n // size\n size === 'small' && (vertical ? rootStyles.smallVertical : rootStyles.smallHorizontal),\n size === 'medium' && (vertical ? rootStyles.mediumVertical : rootStyles.mediumHorizontal),\n size === 'large' && (vertical ? rootStyles.largeVertical : rootStyles.largeHorizontal),\n ...(isCircular ? circularAppearance : regularAppearance),\n disabled && rootStyles.disabledCursor,\n slot.className,\n );\n\n return state;\n};\n\n/\n Applies styles to the Tab content slot based on its current state.\n \n This hook is typically used internally by `useTabStyles_unstable`. You should\n * only use it directly if you're creating a custom `Tab` component.\n \n @param state - The Tab component's current state\n * @returns The state object with updated content styles\n */\nexport const useTabContentStyles_unstable = (state: TabState): TabState => {\n 'use no memo';\n\n const iconStyles = useIconStyles();\n const contentStyles = useContentStyles();\n\n const { selected, size } = state;\n\n if (state.icon) {\n state.icon.className = mergeClasses(\n tabClassNames.icon,\n iconStyles.base,\n iconStyles[size],\n selected && iconStyles.selected,\n state.icon.className,\n );\n }\n\n // This needs to be before state.content.className is updated\n if (state.contentReservedSpace) {\n state.contentReservedSpace.className = mergeClasses(\n tabReservedSpaceClassNames.content,\n contentStyles.base,\n size === 'large' ? contentStyles.largeSelected : contentStyles.selected,\n state.icon ? contentStyles.iconBefore : contentStyles.noIconBefore,\n contentStyles.placeholder,\n state.content.className,\n );\n // FIXME: this is a deprecated API\n // should be removed in the next major version\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n state.contentReservedSpaceClassName = state.contentReservedSpace.className;\n }\n\n state.content.className = mergeClasses(\n tabClassNames.content,\n contentStyles.base,\n size === 'large' && contentStyles.large,\n selected && (size === 'large' ? contentStyles.largeSelected : contentStyles.selected),\n state.icon ? contentStyles.iconBefore : contentStyles.noIconBefore,\n state.content.className,\n );\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","shorthands","createCustomFocusIndicatorStyle","tokens","typographyStyles","useTabAnimatedIndicatorStyles_unstable","tabClassNames","root","icon","content","tabReservedSpaceClassNames","iconClassNames","filled","regular","useRootStyles","alignItems","display","flexShrink","gridAutoFlow","gridTemplateColumns","gridTemplateRows","outlineStyle","position","button","border","borderRadius","borderRadiusMedium","cursor","fontFamily","fontFamilyBase","lineHeight","lineHeightBase300","overflow","textTransform","horizontal","justifyContent","vertical","smallHorizontal","columnGap","spacingHorizontalXXS","padding","spacingVerticalSNudge","spacingHorizontalSNudge","smallVertical","spacingVerticalXXS","mediumHorizontal","spacingVerticalM","spacingHorizontalMNudge","mediumVertical","largeHorizontal","spacingVerticalL","largeVertical","spacingVerticalS","transparent","backgroundColor","colorTransparentBackground","colorTransparentBackgroundHover","colorTransparentBackgroundPressed","color","colorNeutralForeground2","colorNeutralForeground2Hover","colorNeutralForeground2Pressed","subtle","colorSubtleBackground","colorSubtleBackgroundHover","colorSubtleBackgroundPressed","disabledCursor","disabled","colorNeutralForegroundDisabled","selected","colorCompoundBrandForeground1","colorCompoundBrandForeground1Hover","colorCompoundBrandForeground1Pressed","colorNeutralForeground1","colorNeutralForeground1Hover","colorNeutralForeground1Pressed","useCircularAppearanceStyles","base","borderRadiusCircular","strokeWidthThin","colorTransparentStroke","small","paddingBlock","medium","large","colorNeutralStroke1Hover","colorNeutralStroke1Pressed","subtleSelected","colorBrandBackground2","colorCompoundBrandStroke","colorBrandForeground2","colorBrandBackground2Hover","colorCompoundBrandStrokeHover","colorBrandForeground2Hover","colorBrandBackground2Pressed","colorCompoundBrandStrokePressed","colorBrandForeground2Pressed","subtleDisabled","subtleDisabledSelected","colorNeutralBackgroundDisabled","colorNeutralStrokeDisabled","colorNeutralBackground3","colorNeutralBackground3Hover","colorNeutralBackground3Pressed","forcedColorAdjust","filledSelected","colorBrandBackground","colorNeutralForegroundOnBrand","colorBrandBackgroundHover","colorBrandBackgroundPressed","filledDisabled","filledDisabledSelected","useFocusStyles","borderColor","outlineWidth","strokeWidthThick","outlineColor","boxShadow","shadow4","colorStrokeFocus2","zIndex","enableOutline","circular","colorNeutralStrokeOnBrand","usePendingIndicatorStyles","bottom","height","left","right","spacingVerticalXS","top","width","strokeWidthThicker","spacingHorizontalM","spacingVerticalMNudge","useActiveIndicatorStyles","useIconStyles","gridColumnStart","gridRowStart","fontSize","useContentStyles","body1","spacingVerticalNone","body1Strong","body2","largeSelected","subtitle2","noIconBefore","iconBefore","placeholder","visibility","useTabStyles_unstable","state","useTabIndicatorStyles_unstable","useTabButtonStyles_unstable","useTabContentStyles_unstable","rootStyles","pendingIndicatorStyles","activeIndicatorStyles","appearance","size","classes","push","className","slot","focusStyles","circularStyles","isSubtleCircular","isFilledCircular","isCircular","circularAppearance","regularAppearance","iconStyles","contentStyles","contentReservedSpace","contentReservedSpaceClassName"],"mappings":"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"}
1	+ {"version":3,"sources":["../src/components/Tab/useTabStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { TabSlots, TabState } from './Tab.types';\nimport { useTabAnimatedIndicatorStyles_unstable } from './useTabAnimatedIndicator.styles';\n\nexport const tabClassNames: SlotClassNames<TabSlots> = {\n root: 'fui-Tab',\n icon: 'fui-Tab__icon',\n content: 'fui-Tab__content',\n};\n\nexport const tabReservedSpaceClassNames = {\n content: 'fui-Tab__content--reserved-space',\n};\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/*\n Styles for the root slot\n /\nconst useRootStyles = makeStyles({\n root: {\n alignItems: 'center',\n display: 'grid',\n flexShrink: 0,\n gridAutoFlow: 'column',\n gridTemplateColumns: 'auto',\n gridTemplateRows: 'auto',\n outlineStyle: 'none',\n position: 'relative',\n },\n button: {\n alignItems: 'center',\n border: 'none',\n borderRadius: tokens.borderRadiusMedium,\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 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 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 padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalSNudge}`,\n },\n mediumHorizontal: {\n columnGap: tokens.spacingHorizontalSNudge,\n 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 padding: `${tokens.spacingVerticalSNudge} ${tokens.spacingHorizontalMNudge}`,\n },\n largeHorizontal: {\n columnGap: tokens.spacingHorizontalSNudge,\n 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 padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalMNudge}`,\n },\n transparent: {\n backgroundColor: tokens.colorTransparentBackground,\n ':enabled:hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n },\n ':enabled:active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n },\n [`& .${tabClassNames.icon}`]: {\n color: tokens.colorNeutralForeground2,\n },\n [`:enabled:hover .${tabClassNames.icon}`]: {\n color: tokens.colorNeutralForeground2Hover,\n },\n [`:enabled:active .${tabClassNames.icon}`]: {\n color: tokens.colorNeutralForeground2Pressed,\n },\n [`& .${tabClassNames.content}`]: {\n color: tokens.colorNeutralForeground2,\n },\n [`:enabled:hover .${tabClassNames.content}`]: {\n color: tokens.colorNeutralForeground2Hover,\n },\n [`:enabled:active .${tabClassNames.content}`]: {\n color: tokens.colorNeutralForeground2Pressed,\n },\n },\n subtle: {\n backgroundColor: tokens.colorSubtleBackground,\n ':enabled:hover': {\n backgroundColor: tokens.colorSubtleBackgroundHover,\n },\n ':enabled:active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n },\n [`& .${tabClassNames.icon}`]: {\n color: tokens.colorNeutralForeground2,\n },\n [`:enabled:hover .${tabClassNames.icon}`]: {\n color: tokens.colorNeutralForeground2Hover,\n },\n [`:enabled:active .${tabClassNames.icon}`]: {\n color: tokens.colorNeutralForeground2Pressed,\n },\n [`& .${tabClassNames.content}`]: {\n color: tokens.colorNeutralForeground2,\n },\n [`:enabled:hover .${tabClassNames.content}`]: {\n color: tokens.colorNeutralForeground2Hover,\n },\n [`:enabled:active .${tabClassNames.content}`]: {\n color: tokens.colorNeutralForeground2Pressed,\n },\n },\n disabledCursor: {\n cursor: 'not-allowed',\n },\n disabled: {\n backgroundColor: tokens.colorTransparentBackground,\n\n [`& .${tabClassNames.icon}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n [`& .${tabClassNames.content}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n selected: {\n [`& .${tabClassNames.icon}`]: {\n color: tokens.colorCompoundBrandForeground1,\n },\n [`:enabled:hover .${tabClassNames.icon}`]: {\n color: tokens.colorCompoundBrandForeground1Hover,\n },\n [`:enabled:active .${tabClassNames.icon}`]: {\n color: tokens.colorCompoundBrandForeground1Pressed,\n },\n [`& .${tabClassNames.content}`]: {\n color: tokens.colorNeutralForeground1,\n },\n [`:enabled:hover .${tabClassNames.content}`]: {\n color: tokens.colorNeutralForeground1Hover,\n },\n [`:enabled:active .${tabClassNames.content}`]: {\n color: tokens.colorNeutralForeground1Pressed,\n },\n },\n});\n\nconst useCircularAppearanceStyles = makeStyles({\n base: {\n borderRadius: tokens.borderRadiusCircular,\n border: `solid ${tokens.strokeWidthThin} ${tokens.colorTransparentStroke}`,\n [`& .${tabClassNames.icon}`]: {\n color: 'inherit',\n },\n [`& .${tabClassNames.content}`]: {\n color: 'inherit',\n },\n },\n small: {\n paddingBlock: `calc(${tokens.spacingVerticalXXS} - ${tokens.strokeWidthThin})`,\n },\n medium: {\n paddingBlock: `calc(${tokens.spacingVerticalSNudge} - ${tokens.strokeWidthThin})`,\n },\n large: {\n paddingBlock: `calc(${tokens.spacingVerticalS} - ${tokens.strokeWidthThin})`,\n },\n subtle: {\n backgroundColor: tokens.colorSubtleBackground,\n color: tokens.colorNeutralForeground2,\n ':enabled:hover': {\n backgroundColor: tokens.colorSubtleBackgroundHover,\n border: `solid ${tokens.strokeWidthThin} ${tokens.colorNeutralStroke1Hover}`,\n color: tokens.colorNeutralForeground2Hover,\n },\n ':enabled:active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n border: `solid ${tokens.strokeWidthThin} ${tokens.colorNeutralStroke1Pressed}`,\n color: tokens.colorNeutralForeground2Pressed,\n },\n '@media (forced-colors: active)': {\n border: `solid ${tokens.strokeWidthThin} Canvas`,\n },\n },\n subtleSelected: {\n backgroundColor: tokens.colorBrandBackground2,\n border: `solid ${tokens.strokeWidthThin} ${tokens.colorCompoundBrandStroke}`,\n color: tokens.colorBrandForeground2,\n ':enabled:hover': {\n backgroundColor: tokens.colorBrandBackground2Hover,\n border: `solid ${tokens.strokeWidthThin} ${tokens.colorCompoundBrandStrokeHover}`,\n color: tokens.colorBrandForeground2Hover,\n },\n ':enabled:active': {\n backgroundColor: tokens.colorBrandBackground2Pressed,\n border: `solid ${tokens.strokeWidthThin} ${tokens.colorCompoundBrandStrokePressed}`,\n color: tokens.colorBrandForeground2Pressed,\n },\n '@media (forced-colors: active)': {\n border: `solid ${tokens.strokeWidthThin} Highlight`,\n },\n },\n subtleDisabled: {\n backgroundColor: tokens.colorSubtleBackground,\n color: tokens.colorNeutralForegroundDisabled,\n },\n subtleDisabledSelected: {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n border: `solid ${tokens.strokeWidthThin} ${tokens.colorNeutralStrokeDisabled}`,\n color: tokens.colorNeutralForegroundDisabled,\n },\n filled: {\n backgroundColor: tokens.colorNeutralBackground3,\n color: tokens.colorNeutralForeground2,\n ':enabled:hover': {\n backgroundColor: tokens.colorNeutralBackground3Hover,\n color: tokens.colorNeutralForeground2Hover,\n },\n ':enabled:active': {\n backgroundColor: tokens.colorNeutralBackground3Pressed,\n color: tokens.colorNeutralForeground2Pressed,\n },\n '@media (forced-colors: active)': {\n ':enabled:hover': {\n backgroundColor: 'Highlight',\n forcedColorAdjust: 'none',\n [`& .${tabClassNames.content}`]: {\n color: 'HighlightText',\n },\n [`& .${iconClassNames.filled}`]: {\n color: 'HighlightText',\n },\n [`& .${iconClassNames.regular}`]: {\n color: 'HighlightText',\n },\n },\n },\n },\n filledSelected: {\n backgroundColor: tokens.colorBrandBackground,\n color: tokens.colorNeutralForegroundOnBrand,\n ':enabled:hover': {\n backgroundColor: tokens.colorBrandBackgroundHover,\n color: tokens.colorNeutralForegroundOnBrand,\n },\n ':enabled:active': {\n backgroundColor: tokens.colorBrandBackgroundPressed,\n color: tokens.colorNeutralForegroundOnBrand,\n },\n '@media (forced-colors: active)': {\n ':enabled': {\n backgroundColor: 'ButtonText',\n [`& .${tabClassNames.content}`]: {\n color: 'ButtonFace',\n forcedColorAdjust: 'none',\n },\n },\n [`:enabled .${tabClassNames.icon}`]: {\n color: 'ButtonFace',\n },\n },\n },\n filledDisabled: {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n color: tokens.colorNeutralForegroundDisabled,\n },\n filledDisabledSelected: {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n border: `solid ${tokens.strokeWidthThin} ${tokens.colorNeutralStrokeDisabled}`,\n color: tokens.colorNeutralForegroundDisabled,\n },\n});\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 {\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 circular: createCustomFocusIndicatorStyle(\n {\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 0 0 0 ${tokens.strokeWidthThin} ${tokens.colorNeutralStrokeOnBrand} inset\n `,\n zIndex: 1,\n },\n { enableOutline: true },\n ),\n});\n\n/* Indicator styles for when pending selection /\nconst usePendingIndicatorStyles = makeStyles({\n base: {\n ':hover::before': {\n backgroundColor: tokens.colorNeutralStroke1Hover,\n borderRadius: tokens.borderRadiusCircular,\n content: '\"\"',\n position: 'absolute',\n },\n ':active::before': {\n backgroundColor: tokens.colorNeutralStroke1Pressed,\n 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 '@media (forced-colors: active)': {\n ':hover::before': {\n backgroundColor: 'transparent',\n },\n ':active::before': {\n backgroundColor: 'transparent',\n },\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});\n\nconst useActiveIndicatorStyles = makeStyles({\n base: {\n '::after': {\n backgroundColor: tokens.colorTransparentStroke,\n borderRadius: tokens.borderRadiusCircular,\n content: '\"\"',\n position: 'absolute',\n },\n },\n selected: {\n '::after': {\n backgroundColor: tokens.colorCompoundBrandStroke,\n },\n ':enabled:hover::after': {\n backgroundColor: tokens.colorCompoundBrandStrokeHover,\n },\n ':enabled:active::after': {\n backgroundColor: tokens.colorCompoundBrandStrokePressed,\n },\n '@media (forced-colors: active)': {\n '::after': {\n backgroundColor: 'ButtonText',\n },\n ':enabled:hover::after': {\n backgroundColor: 'ButtonText',\n },\n ':enabled: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/\n Styles for the icon slot.\n /\nconst useIconStyles = makeStyles({\n base: {\n gridColumnStart: 1,\n gridRowStart: 1,\n alignItems: 'center',\n display: 'inline-flex',\n justifyContent: 'center',\n 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/\n Styles for the content slot (children)\n /\nconst useContentStyles = makeStyles({\n base: {\n ...typographyStyles.body1,\n overflow: 'hidden',\n // content padding is the same for medium & small, horizontal & vertical\n 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/\n Apply styling to the Tab slots based on the state\n /\nexport const useTabStyles_unstable = (state: TabState): TabState => {\n 'use no memo';\n\n useTabIndicatorStyles_unstable(state);\n\n useTabButtonStyles_unstable(state, state.root);\n\n useTabContentStyles_unstable(state);\n\n return state;\n};\n\n/\n Applies styles for the Tab indicator based on its current state.\n \n This hook is typically used internally by `useTabStyles_unstable`. You should\n * only use it directly if you're creating a custom `Tab` component.\n \n @param state - The `Tab` component's current state\n * @returns The state object with updated button styles\n /\nexport const useTabIndicatorStyles_unstable = (state: TabState): TabState => {\n 'use no memo';\n\n const rootStyles = useRootStyles();\n const pendingIndicatorStyles = usePendingIndicatorStyles();\n const activeIndicatorStyles = useActiveIndicatorStyles();\n\n const { appearance, disabled, selected, size, vertical } = state;\n\n const classes: Parameters<typeof mergeClasses> = [tabClassNames.root, rootStyles.root];\n\n if (appearance !== 'subtle-circular' && appearance !== 'filled-circular') {\n classes.push(\n // pending indicator (before pseudo element)\n pendingIndicatorStyles.base,\n size === 'small' && (vertical ? pendingIndicatorStyles.smallVertical : pendingIndicatorStyles.smallHorizontal),\n size === 'medium' && (vertical ? pendingIndicatorStyles.mediumVertical : pendingIndicatorStyles.mediumHorizontal),\n size === 'large' && (vertical ? pendingIndicatorStyles.largeVertical : pendingIndicatorStyles.largeHorizontal),\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.smallVertical : activeIndicatorStyles.smallHorizontal),\n selected &&\n size === 'medium' &&\n (vertical ? activeIndicatorStyles.mediumVertical : activeIndicatorStyles.mediumHorizontal),\n selected &&\n size === 'large' &&\n (vertical ? activeIndicatorStyles.largeVertical : activeIndicatorStyles.largeHorizontal),\n selected && disabled && activeIndicatorStyles.disabled,\n );\n }\n\n state.root.className = mergeClasses(...classes, state.root.className);\n\n useTabAnimatedIndicatorStyles_unstable(state);\n\n return state;\n};\n\n/\n Applies styles to the Tab button slot based on its current state.\n \n This hook is typically used internally by `useTabStyles_unstable`. You should\n * only use it directly if you're creating a custom `Tab` component.\n \n @param state - The Tab component's current state\n * @param slot - The button slot of the Tab component\n * @returns The state object with updated button styles\n /\nexport const useTabButtonStyles_unstable = (state: TabState, slot: TabState['root']): TabState => {\n 'use no memo';\n\n const rootStyles = useRootStyles();\n const focusStyles = useFocusStyles();\n const circularStyles = useCircularAppearanceStyles();\n\n const { appearance, disabled, selected, size, vertical } = state;\n\n const isSubtleCircular = appearance === 'subtle-circular';\n const isFilledCircular = appearance === 'filled-circular';\n const isCircular = isSubtleCircular \|\| isFilledCircular;\n\n const circularAppearance = [\n circularStyles.base,\n focusStyles.circular,\n // sizes\n size === 'small' && circularStyles.small,\n size === 'medium' && circularStyles.medium,\n size === 'large' && circularStyles.large,\n // subtle-circular appearance\n isSubtleCircular && circularStyles.subtle,\n selected && isSubtleCircular && circularStyles.subtleSelected,\n disabled && isSubtleCircular && circularStyles.subtleDisabled,\n selected && disabled && isSubtleCircular && circularStyles.subtleDisabledSelected,\n // filled-circular appearance\n isFilledCircular && circularStyles.filled,\n selected && isFilledCircular && circularStyles.filledSelected,\n disabled && isFilledCircular && circularStyles.filledDisabled,\n selected && disabled && isFilledCircular && circularStyles.filledDisabledSelected,\n ];\n\n const regularAppearance = [\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\n slot.className = mergeClasses(\n rootStyles.button,\n // orientation\n vertical ? rootStyles.vertical : rootStyles.horizontal,\n // size\n size === 'small' && (vertical ? rootStyles.smallVertical : rootStyles.smallHorizontal),\n size === 'medium' && (vertical ? rootStyles.mediumVertical : rootStyles.mediumHorizontal),\n size === 'large' && (vertical ? rootStyles.largeVertical : rootStyles.largeHorizontal),\n ...(isCircular ? circularAppearance : regularAppearance),\n disabled && rootStyles.disabledCursor,\n slot.className,\n );\n\n return state;\n};\n\n/\n Applies styles to the Tab content slot based on its current state.\n \n This hook is typically used internally by `useTabStyles_unstable`. You should\n * only use it directly if you're creating a custom `Tab` component.\n \n @param state - The Tab component's current state\n * @returns The state object with updated content styles\n */\nexport const useTabContentStyles_unstable = (state: TabState): TabState => {\n 'use no memo';\n\n const iconStyles = useIconStyles();\n const contentStyles = useContentStyles();\n\n const { selected, size } = state;\n\n if (state.icon) {\n state.icon.className = mergeClasses(\n tabClassNames.icon,\n iconStyles.base,\n iconStyles[size],\n selected && iconStyles.selected,\n state.icon.className,\n );\n }\n\n // This needs to be before state.content.className is updated\n if (state.contentReservedSpace) {\n state.contentReservedSpace.className = mergeClasses(\n tabReservedSpaceClassNames.content,\n contentStyles.base,\n size === 'large' ? contentStyles.largeSelected : contentStyles.selected,\n state.icon ? contentStyles.iconBefore : contentStyles.noIconBefore,\n contentStyles.placeholder,\n state.content.className,\n );\n // FIXME: this is a deprecated API\n // should be removed in the next major version\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n state.contentReservedSpaceClassName = state.contentReservedSpace.className;\n }\n\n state.content.className = mergeClasses(\n tabClassNames.content,\n contentStyles.base,\n size === 'large' && contentStyles.large,\n selected && (size === 'large' ? contentStyles.largeSelected : contentStyles.selected),\n state.icon ? contentStyles.iconBefore : contentStyles.noIconBefore,\n state.content.className,\n );\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","shorthands","createCustomFocusIndicatorStyle","tokens","typographyStyles","useTabAnimatedIndicatorStyles_unstable","tabClassNames","root","icon","content","tabReservedSpaceClassNames","iconClassNames","filled","regular","useRootStyles","alignItems","display","flexShrink","gridAutoFlow","gridTemplateColumns","gridTemplateRows","outlineStyle","position","button","border","borderRadius","borderRadiusMedium","cursor","fontFamily","fontFamilyBase","lineHeight","lineHeightBase300","overflow","textTransform","horizontal","justifyContent","vertical","smallHorizontal","columnGap","spacingHorizontalXXS","padding","spacingVerticalSNudge","spacingHorizontalSNudge","smallVertical","spacingVerticalXXS","mediumHorizontal","spacingVerticalM","spacingHorizontalMNudge","mediumVertical","largeHorizontal","spacingVerticalL","largeVertical","spacingVerticalS","transparent","backgroundColor","colorTransparentBackground","colorTransparentBackgroundHover","colorTransparentBackgroundPressed","color","colorNeutralForeground2","colorNeutralForeground2Hover","colorNeutralForeground2Pressed","subtle","colorSubtleBackground","colorSubtleBackgroundHover","colorSubtleBackgroundPressed","disabledCursor","disabled","colorNeutralForegroundDisabled","selected","colorCompoundBrandForeground1","colorCompoundBrandForeground1Hover","colorCompoundBrandForeground1Pressed","colorNeutralForeground1","colorNeutralForeground1Hover","colorNeutralForeground1Pressed","useCircularAppearanceStyles","base","borderRadiusCircular","strokeWidthThin","colorTransparentStroke","small","paddingBlock","medium","large","colorNeutralStroke1Hover","colorNeutralStroke1Pressed","subtleSelected","colorBrandBackground2","colorCompoundBrandStroke","colorBrandForeground2","colorBrandBackground2Hover","colorCompoundBrandStrokeHover","colorBrandForeground2Hover","colorBrandBackground2Pressed","colorCompoundBrandStrokePressed","colorBrandForeground2Pressed","subtleDisabled","subtleDisabledSelected","colorNeutralBackgroundDisabled","colorNeutralStrokeDisabled","colorNeutralBackground3","colorNeutralBackground3Hover","colorNeutralBackground3Pressed","forcedColorAdjust","filledSelected","colorBrandBackground","colorNeutralForegroundOnBrand","colorBrandBackgroundHover","colorBrandBackgroundPressed","filledDisabled","filledDisabledSelected","useFocusStyles","borderColor","outlineWidth","strokeWidthThick","outlineColor","boxShadow","shadow4","colorStrokeFocus2","zIndex","enableOutline","circular","colorNeutralStrokeOnBrand","usePendingIndicatorStyles","bottom","height","left","right","spacingVerticalXS","top","width","strokeWidthThicker","spacingHorizontalM","spacingVerticalMNudge","useActiveIndicatorStyles","useIconStyles","gridColumnStart","gridRowStart","fontSize","useContentStyles","body1","spacingVerticalNone","body1Strong","body2","largeSelected","subtitle2","noIconBefore","iconBefore","placeholder","visibility","useTabStyles_unstable","state","useTabIndicatorStyles_unstable","useTabButtonStyles_unstable","useTabContentStyles_unstable","rootStyles","pendingIndicatorStyles","activeIndicatorStyles","appearance","size","classes","push","className","slot","focusStyles","circularStyles","isSubtleCircular","isFilledCircular","isCircular","circularAppearance","regularAppearance","iconStyles","contentStyles","contentReservedSpace","contentReservedSpaceClassName"],"mappings":"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"}

package/lib/components/TabList/TabList.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { useTabList_unstable } from './useTabList';
 import { renderTabList_unstable } from './renderTabList';

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/TabList/TabList.tsx"],"sourcesContent":["~~import~~ * as React from 'react';\nimport { useTabList_unstable } from './useTabList';\nimport { renderTabList_unstable } from './renderTabList';\nimport { useTabListStyles_unstable } from './useTabListStyles.styles';\nimport type { TabListProps } from './TabList.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTabListContextValues_unstable } from './useTabListContextValues';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/*\n A tab list provides single selection from a set of tabs.\n */\nexport const TabList: ForwardRefComponent<TabListProps> = React.forwardRef((props, ref) => {\n const state = useTabList_unstable(props, ref);\n const contextValues = useTabListContextValues_unstable(state);\n\n useTabListStyles_unstable(state);\n\n useCustomStyleHook_unstable('useTabListStyles_unstable')(state);\n\n return renderTabList_unstable(state, contextValues);\n});\n\nTabList.displayName = 'TabList';\n"],"names":["React","useTabList_unstable","renderTabList_unstable","useTabListStyles_unstable","useTabListContextValues_unstable","useCustomStyleHook_unstable","TabList","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,mBAAmB,QAAQ,eAAe;AACnD,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,yBAAyB,QAAQ,4BAA4B;AAGtE,SAASC,gCAAgC,QAAQ,4BAA4B;AAC7E,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,wBAA6CN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IACjF,MAAMC,QAAQT,oBAAoBO,OAAOC;IACzC,MAAME,gBAAgBP,iCAAiCM;IAEvDP,0BAA0BO;IAE1BL,4BAA4B,6BAA6BK;IAEzD,OAAOR,uBAAuBQ,OAAOC;AACvC,GAAG;AAEHL,QAAQM,WAAW,GAAG"}
1	+ {"version":3,"sources":["../src/components/TabList/TabList.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useTabList_unstable } from './useTabList';\nimport { renderTabList_unstable } from './renderTabList';\nimport { useTabListStyles_unstable } from './useTabListStyles.styles';\nimport type { TabListProps } from './TabList.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTabListContextValues_unstable } from './useTabListContextValues';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/*\n A tab list provides single selection from a set of tabs.\n */\nexport const TabList: ForwardRefComponent<TabListProps> = React.forwardRef((props, ref) => {\n const state = useTabList_unstable(props, ref);\n const contextValues = useTabListContextValues_unstable(state);\n\n useTabListStyles_unstable(state);\n\n useCustomStyleHook_unstable('useTabListStyles_unstable')(state);\n\n return renderTabList_unstable(state, contextValues);\n});\n\nTabList.displayName = 'TabList';\n"],"names":["React","useTabList_unstable","renderTabList_unstable","useTabListStyles_unstable","useTabListContextValues_unstable","useCustomStyleHook_unstable","TabList","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,mBAAmB,QAAQ,eAAe;AACnD,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,yBAAyB,QAAQ,4BAA4B;AAGtE,SAASC,gCAAgC,QAAQ,4BAA4B;AAC7E,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,wBAA6CN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IACjF,MAAMC,QAAQT,oBAAoBO,OAAOC;IACzC,MAAME,gBAAgBP,iCAAiCM;IAEvDP,0BAA0BO;IAE1BL,4BAA4B,6BAA6BK;IAEzD,OAAOR,uBAAuBQ,OAAOC;AACvC,GAAG;AAEHL,QAAQM,WAAW,GAAG"}

package/lib/components/TabList/TabListContext.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 import { createContext, useContextSelector } from '@fluentui/react-context-selector';
 const tabListContextDefaultValue = {
     appearance: 'transparent',

package/lib/components/TabList/TabListContext.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/TabList/TabListContext.ts"],"sourcesContent":["~~import~~ { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { Context, ContextSelector } from '@fluentui/react-context-selector';\nimport { TabListContextValue } from './TabList.types';\n\nconst tabListContextDefaultValue: TabListContextValue = {\n appearance: 'transparent',\n reserveSelectedTabSpace: true,\n selectTabOnFocus: false,\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\nexport const TabListContext: Context<TabListContextValue> = createContext<TabListContextValue \| undefined>(\n undefined,\n) as Context<TabListContextValue>;\n\nexport const TabListProvider = TabListContext.Provider;\nexport const useTabListContext_unstable = <T>(selector: ContextSelector<TabListContextValue, T>): T =>\n useContextSelector(TabListContext, (ctx = tabListContextDefaultValue) => selector(ctx));\n"],"names":["createContext","useContextSelector","tabListContextDefaultValue","appearance","reserveSelectedTabSpace","selectTabOnFocus","disabled","selectedValue","undefined","onRegister","onUnregister","onSelect","getRegisteredTabs","registeredTabs","size","vertical","TabListContext","TabListProvider","Provider","useTabListContext_unstable","selector","ctx"],"mappings":"AAAA,SAASA,aAAa,EAAEC,kBAAkB,QAAQ,mCAAmC;AAIrF,MAAMC,6BAAkD;IACtDC,YAAY;IACZC,yBAAyB;IACzBC,kBAAkB;IAClBC,UAAU;IACVC,eAAeC;IACfC,YAAY;IACV,QAAQ,GACV;IACAC,cAAc;IACZ,QAAQ,GACV;IACAC,UAAU;IACR,QAAQ,GACV;IACAC,mBAAmB;QACjB,OAAO;YACLC,gBAAgB,CAAC;QACnB;IACF;IACAC,MAAM;IACNC,UAAU;AACZ;AAEA,OAAO,MAAMC,iBAA+ChB,cAC1DQ,WACgC;AAElC,OAAO,MAAMS,kBAAkBD,eAAeE,QAAQ,CAAC;AACvD,OAAO,MAAMC,6BAA6B,CAAIC,WAC5CnB,mBAAmBe,gBAAgB,CAACK,MAAMnB,0BAA0B,GAAKkB,SAASC,MAAM"}
1	+ {"version":3,"sources":["../src/components/TabList/TabListContext.ts"],"sourcesContent":["'use client';\n\nimport { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { Context, ContextSelector } from '@fluentui/react-context-selector';\nimport { TabListContextValue } from './TabList.types';\n\nconst tabListContextDefaultValue: TabListContextValue = {\n appearance: 'transparent',\n reserveSelectedTabSpace: true,\n selectTabOnFocus: false,\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\nexport const TabListContext: Context<TabListContextValue> = createContext<TabListContextValue \| undefined>(\n undefined,\n) as Context<TabListContextValue>;\n\nexport const TabListProvider = TabListContext.Provider;\nexport const useTabListContext_unstable = <T>(selector: ContextSelector<TabListContextValue, T>): T =>\n useContextSelector(TabListContext, (ctx = tabListContextDefaultValue) => selector(ctx));\n"],"names":["createContext","useContextSelector","tabListContextDefaultValue","appearance","reserveSelectedTabSpace","selectTabOnFocus","disabled","selectedValue","undefined","onRegister","onUnregister","onSelect","getRegisteredTabs","registeredTabs","size","vertical","TabListContext","TabListProvider","Provider","useTabListContext_unstable","selector","ctx"],"mappings":"AAAA;AAEA,SAASA,aAAa,EAAEC,kBAAkB,QAAQ,mCAAmC;AAIrF,MAAMC,6BAAkD;IACtDC,YAAY;IACZC,yBAAyB;IACzBC,kBAAkB;IAClBC,UAAU;IACVC,eAAeC;IACfC,YAAY;IACV,QAAQ,GACV;IACAC,cAAc;IACZ,QAAQ,GACV;IACAC,UAAU;IACR,QAAQ,GACV;IACAC,mBAAmB;QACjB,OAAO;YACLC,gBAAgB,CAAC;QACnB;IACF;IACAC,MAAM;IACNC,UAAU;AACZ;AAEA,OAAO,MAAMC,iBAA+ChB,cAC1DQ,WACgC;AAElC,OAAO,MAAMS,kBAAkBD,eAAeE,QAAQ,CAAC;AACvD,OAAO,MAAMC,6BAA6B,CAAIC,WAC5CnB,mBAAmBe,gBAAgB,CAACK,MAAMnB,0BAA0B,GAAKkB,SAASC,MAAM"}

package/lib/components/TabList/useTabList.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { useArrowNavigationGroup } from '@fluentui/react-tabster';
 import { getIntrinsicElementProps, useControllableState, useEventCallback, useMergedRefs, slot } from '@fluentui/react-utilities';

package/lib/components/TabList/useTabList.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/TabList/useTabList.ts"],"sourcesContent":["~~import~~ * as React from 'react';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport {\n getIntrinsicElementProps,\n useControllableState,\n useEventCallback,\n useMergedRefs,\n slot,\n} from '@fluentui/react-utilities';\nimport type { TabRegisterData, SelectTabData, SelectTabEvent, TabListProps, TabListState } from './TabList.types';\nimport { TabValue } from '../Tab/Tab.types';\n\n/*\n Create the state required to render TabList.\n \n The returned state can be modified with hooks such as useTabListStyles_unstable,\n * before being passed to renderTabList_unstable.\n \n @param props - props from this instance of TabList\n * @param ref - reference to root HTMLElement of TabList\n */\nexport const useTabList_unstable = (props: TabListProps, ref: React.Ref<HTMLElement>): TabListState => {\n const {\n appearance = 'transparent',\n reserveSelectedTabSpace = true,\n disabled = false,\n onTabSelect,\n selectTabOnFocus = false,\n size = 'medium',\n vertical = false,\n } = props;\n\n const innerRef = React.useRef<HTMLElement>(null);\n\n const focusAttributes = useArrowNavigationGroup({\n circular: true,\n axis: vertical ? 'vertical' : 'horizontal',\n memorizeCurrent: false,\n // eslint-disable-next-line @typescript-eslint/naming-convention\n unstable_hasDefault: true,\n });\n\n const [selectedValue, setSelectedValue] = useControllableState({\n state: props.selectedValue,\n defaultState: props.defaultSelectedValue,\n initialState: undefined,\n });\n\n // considered usePrevious, but it is sensitive to re-renders\n // this could cause the previous to move to current in the case where the tab list re-renders.\n // these refs avoid getRegisteredTabs changing when selectedValue changes and causing\n // renders for tabs that have not changed.\n const currentSelectedValue = React.useRef<TabValue \| undefined>(undefined);\n const previousSelectedValue = React.useRef<TabValue \| undefined>(undefined);\n\n React.useEffect(() => {\n previousSelectedValue.current = currentSelectedValue.current;\n currentSelectedValue.current = selectedValue;\n }, [selectedValue]);\n\n const onSelect = useEventCallback((event: SelectTabEvent, data: SelectTabData) => {\n setSelectedValue(data.value);\n onTabSelect?.(event, data);\n });\n\n const registeredTabs = React.useRef<Record<string, TabRegisterData>>({});\n\n const onRegister = useEventCallback((data: TabRegisterData) => {\n const key = JSON.stringify(data.value);\n\n if (!key && process.env.NODE_ENV !== 'production') {\n // eslint-disable-next-line no-console\n console.error(\n [\n `[@fluentui/react-tabs] The value \"${data.value}\" cannot be serialized to JSON string.`,\n 'Tab component requires serializable values.',\n 'Please provide a primitive value (string, number, boolean),',\n `or a plain object/array that doesn't contain functions, symbols, or circular references.`,\n ].join(' '),\n );\n }\n\n registeredTabs.current[key] = data;\n });\n\n const onUnregister = useEventCallback((data: TabRegisterData) => {\n delete registeredTabs.current[JSON.stringify(data.value)];\n });\n\n const getRegisteredTabs = React.useCallback(() => {\n return {\n selectedValue: currentSelectedValue.current,\n previousSelectedValue: previousSelectedValue.current,\n registeredTabs: registeredTabs.current,\n };\n }, []);\n\n return {\n components: {\n root: 'div',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n // FIXME:\n // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n ref: useMergedRefs(ref, innerRef) as React.Ref<HTMLDivElement>,\n role: 'tablist',\n 'aria-orientation': vertical ? 'vertical' : 'horizontal',\n ...focusAttributes,\n ...props,\n } as const),\n { elementType: 'div' },\n ),\n appearance,\n reserveSelectedTabSpace,\n disabled,\n selectTabOnFocus,\n selectedValue,\n size,\n vertical,\n onRegister,\n onUnregister,\n onSelect,\n getRegisteredTabs,\n };\n};\n"],"names":["React","useArrowNavigationGroup","getIntrinsicElementProps","useControllableState","useEventCallback","useMergedRefs","slot","useTabList_unstable","props","ref","appearance","reserveSelectedTabSpace","disabled","onTabSelect","selectTabOnFocus","size","vertical","innerRef","useRef","focusAttributes","circular","axis","memorizeCurrent","unstable_hasDefault","selectedValue","setSelectedValue","state","defaultState","defaultSelectedValue","initialState","undefined","currentSelectedValue","previousSelectedValue","useEffect","current","onSelect","event","data","value","registeredTabs","onRegister","key","JSON","stringify","process","env","NODE_ENV","console","error","join","onUnregister","getRegisteredTabs","useCallback","components","root","always","role","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,uBAAuB,QAAQ,0BAA0B;AAClE,SACEC,wBAAwB,EACxBC,oBAAoB,EACpBC,gBAAgB,EAChBC,aAAa,EACbC,IAAI,QACC,4BAA4B;AAInC;;;;;;;;CAQC,GACD,OAAO,MAAMC,sBAAsB,CAACC,OAAqBC;IACvD,MAAM,EACJC,aAAa,aAAa,EAC1BC,0BAA0B,IAAI,EAC9BC,WAAW,KAAK,EAChBC,WAAW,EACXC,mBAAmB,KAAK,EACxBC,OAAO,QAAQ,EACfC,WAAW,KAAK,EACjB,GAAGR;IAEJ,MAAMS,WAAWjB,MAAMkB,MAAM,CAAc;IAE3C,MAAMC,kBAAkBlB,wBAAwB;QAC9CmB,UAAU;QACVC,MAAML,WAAW,aAAa;QAC9BM,iBAAiB;QACjB,gEAAgE;QAChEC,qBAAqB;IACvB;IAEA,MAAM,CAACC,eAAeC,iBAAiB,GAAGtB,qBAAqB;QAC7DuB,OAAOlB,MAAMgB,aAAa;QAC1BG,cAAcnB,MAAMoB,oBAAoB;QACxCC,cAAcC;IAChB;IAEA,4DAA4D;IAC5D,8FAA8F;IAC9F,qFAAqF;IACrF,0CAA0C;IAC1C,MAAMC,uBAAuB/B,MAAMkB,MAAM,CAAuBY;IAChE,MAAME,wBAAwBhC,MAAMkB,MAAM,CAAuBY;IAEjE9B,MAAMiC,SAAS,CAAC;QACdD,sBAAsBE,OAAO,GAAGH,qBAAqBG,OAAO;QAC5DH,qBAAqBG,OAAO,GAAGV;IACjC,GAAG;QAACA;KAAc;IAElB,MAAMW,WAAW/B,iBAAiB,CAACgC,OAAuBC;QACxDZ,iBAAiBY,KAAKC,KAAK;QAC3BzB,wBAAAA,kCAAAA,YAAcuB,OAAOC;IACvB;IAEA,MAAME,iBAAiBvC,MAAMkB,MAAM,CAAkC,CAAC;IAEtE,MAAMsB,aAAapC,iBAAiB,CAACiC;QACnC,MAAMI,MAAMC,KAAKC,SAAS,CAACN,KAAKC,KAAK;QAErC,IAAI,CAACG,OAAOG,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;YACjD,sCAAsC;YACtCC,QAAQC,KAAK,CACX;gBACE,CAAC,kCAAkC,EAAEX,KAAKC,KAAK,CAAC,sCAAsC,CAAC;gBACvF;gBACA;gBACA,CAAC,wFAAwF,CAAC;aAC3F,CAACW,IAAI,CAAC;QAEX;QAEAV,eAAeL,OAAO,CAACO,IAAI,GAAGJ;IAChC;IAEA,MAAMa,eAAe9C,iBAAiB,CAACiC;QACrC,OAAOE,eAAeL,OAAO,CAACQ,KAAKC,SAAS,CAACN,KAAKC,KAAK,EAAE;IAC3D;IAEA,MAAMa,oBAAoBnD,MAAMoD,WAAW,CAAC;QAC1C,OAAO;YACL5B,eAAeO,qBAAqBG,OAAO;YAC3CF,uBAAuBA,sBAAsBE,OAAO;YACpDK,gBAAgBA,eAAeL,OAAO;QACxC;IACF,GAAG,EAAE;IAEL,OAAO;QACLmB,YAAY;YACVC,MAAM;QACR;QACAA,MAAMhD,KAAKiD,MAAM,CACfrD,yBAAyB,OAAO;YAC9B,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FO,KAAKJ,cAAcI,KAAKQ;YACxBuC,MAAM;YACN,oBAAoBxC,WAAW,aAAa;YAC5C,GAAGG,eAAe;YAClB,GAAGX,KAAK;QACV,IACA;YAAEiD,aAAa;QAAM;QAEvB/C;QACAC;QACAC;QACAE;QACAU;QACAT;QACAC;QACAwB;QACAU;QACAf;QACAgB;IACF;AACF,EAAE"}
1	+ {"version":3,"sources":["../src/components/TabList/useTabList.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport {\n getIntrinsicElementProps,\n useControllableState,\n useEventCallback,\n useMergedRefs,\n slot,\n} from '@fluentui/react-utilities';\nimport type { TabRegisterData, SelectTabData, SelectTabEvent, TabListProps, TabListState } from './TabList.types';\nimport { TabValue } from '../Tab/Tab.types';\n\n/*\n Create the state required to render TabList.\n \n The returned state can be modified with hooks such as useTabListStyles_unstable,\n * before being passed to renderTabList_unstable.\n \n @param props - props from this instance of TabList\n * @param ref - reference to root HTMLElement of TabList\n */\nexport const useTabList_unstable = (props: TabListProps, ref: React.Ref<HTMLElement>): TabListState => {\n const {\n appearance = 'transparent',\n reserveSelectedTabSpace = true,\n disabled = false,\n onTabSelect,\n selectTabOnFocus = false,\n size = 'medium',\n vertical = false,\n } = props;\n\n const innerRef = React.useRef<HTMLElement>(null);\n\n const focusAttributes = useArrowNavigationGroup({\n circular: true,\n axis: vertical ? 'vertical' : 'horizontal',\n memorizeCurrent: false,\n // eslint-disable-next-line @typescript-eslint/naming-convention\n unstable_hasDefault: true,\n });\n\n const [selectedValue, setSelectedValue] = useControllableState({\n state: props.selectedValue,\n defaultState: props.defaultSelectedValue,\n initialState: undefined,\n });\n\n // considered usePrevious, but it is sensitive to re-renders\n // this could cause the previous to move to current in the case where the tab list re-renders.\n // these refs avoid getRegisteredTabs changing when selectedValue changes and causing\n // renders for tabs that have not changed.\n const currentSelectedValue = React.useRef<TabValue \| undefined>(undefined);\n const previousSelectedValue = React.useRef<TabValue \| undefined>(undefined);\n\n React.useEffect(() => {\n previousSelectedValue.current = currentSelectedValue.current;\n currentSelectedValue.current = selectedValue;\n }, [selectedValue]);\n\n const onSelect = useEventCallback((event: SelectTabEvent, data: SelectTabData) => {\n setSelectedValue(data.value);\n onTabSelect?.(event, data);\n });\n\n const registeredTabs = React.useRef<Record<string, TabRegisterData>>({});\n\n const onRegister = useEventCallback((data: TabRegisterData) => {\n const key = JSON.stringify(data.value);\n\n if (!key && process.env.NODE_ENV !== 'production') {\n // eslint-disable-next-line no-console\n console.error(\n [\n `[@fluentui/react-tabs] The value \"${data.value}\" cannot be serialized to JSON string.`,\n 'Tab component requires serializable values.',\n 'Please provide a primitive value (string, number, boolean),',\n `or a plain object/array that doesn't contain functions, symbols, or circular references.`,\n ].join(' '),\n );\n }\n\n registeredTabs.current[key] = data;\n });\n\n const onUnregister = useEventCallback((data: TabRegisterData) => {\n delete registeredTabs.current[JSON.stringify(data.value)];\n });\n\n const getRegisteredTabs = React.useCallback(() => {\n return {\n selectedValue: currentSelectedValue.current,\n previousSelectedValue: previousSelectedValue.current,\n registeredTabs: registeredTabs.current,\n };\n }, []);\n\n return {\n components: {\n root: 'div',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n // FIXME:\n // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n ref: useMergedRefs(ref, innerRef) as React.Ref<HTMLDivElement>,\n role: 'tablist',\n 'aria-orientation': vertical ? 'vertical' : 'horizontal',\n ...focusAttributes,\n ...props,\n } as const),\n { elementType: 'div' },\n ),\n appearance,\n reserveSelectedTabSpace,\n disabled,\n selectTabOnFocus,\n selectedValue,\n size,\n vertical,\n onRegister,\n onUnregister,\n onSelect,\n getRegisteredTabs,\n };\n};\n"],"names":["React","useArrowNavigationGroup","getIntrinsicElementProps","useControllableState","useEventCallback","useMergedRefs","slot","useTabList_unstable","props","ref","appearance","reserveSelectedTabSpace","disabled","onTabSelect","selectTabOnFocus","size","vertical","innerRef","useRef","focusAttributes","circular","axis","memorizeCurrent","unstable_hasDefault","selectedValue","setSelectedValue","state","defaultState","defaultSelectedValue","initialState","undefined","currentSelectedValue","previousSelectedValue","useEffect","current","onSelect","event","data","value","registeredTabs","onRegister","key","JSON","stringify","process","env","NODE_ENV","console","error","join","onUnregister","getRegisteredTabs","useCallback","components","root","always","role","elementType"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,uBAAuB,QAAQ,0BAA0B;AAClE,SACEC,wBAAwB,EACxBC,oBAAoB,EACpBC,gBAAgB,EAChBC,aAAa,EACbC,IAAI,QACC,4BAA4B;AAInC;;;;;;;;CAQC,GACD,OAAO,MAAMC,sBAAsB,CAACC,OAAqBC;IACvD,MAAM,EACJC,aAAa,aAAa,EAC1BC,0BAA0B,IAAI,EAC9BC,WAAW,KAAK,EAChBC,WAAW,EACXC,mBAAmB,KAAK,EACxBC,OAAO,QAAQ,EACfC,WAAW,KAAK,EACjB,GAAGR;IAEJ,MAAMS,WAAWjB,MAAMkB,MAAM,CAAc;IAE3C,MAAMC,kBAAkBlB,wBAAwB;QAC9CmB,UAAU;QACVC,MAAML,WAAW,aAAa;QAC9BM,iBAAiB;QACjB,gEAAgE;QAChEC,qBAAqB;IACvB;IAEA,MAAM,CAACC,eAAeC,iBAAiB,GAAGtB,qBAAqB;QAC7DuB,OAAOlB,MAAMgB,aAAa;QAC1BG,cAAcnB,MAAMoB,oBAAoB;QACxCC,cAAcC;IAChB;IAEA,4DAA4D;IAC5D,8FAA8F;IAC9F,qFAAqF;IACrF,0CAA0C;IAC1C,MAAMC,uBAAuB/B,MAAMkB,MAAM,CAAuBY;IAChE,MAAME,wBAAwBhC,MAAMkB,MAAM,CAAuBY;IAEjE9B,MAAMiC,SAAS,CAAC;QACdD,sBAAsBE,OAAO,GAAGH,qBAAqBG,OAAO;QAC5DH,qBAAqBG,OAAO,GAAGV;IACjC,GAAG;QAACA;KAAc;IAElB,MAAMW,WAAW/B,iBAAiB,CAACgC,OAAuBC;QACxDZ,iBAAiBY,KAAKC,KAAK;QAC3BzB,wBAAAA,kCAAAA,YAAcuB,OAAOC;IACvB;IAEA,MAAME,iBAAiBvC,MAAMkB,MAAM,CAAkC,CAAC;IAEtE,MAAMsB,aAAapC,iBAAiB,CAACiC;QACnC,MAAMI,MAAMC,KAAKC,SAAS,CAACN,KAAKC,KAAK;QAErC,IAAI,CAACG,OAAOG,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;YACjD,sCAAsC;YACtCC,QAAQC,KAAK,CACX;gBACE,CAAC,kCAAkC,EAAEX,KAAKC,KAAK,CAAC,sCAAsC,CAAC;gBACvF;gBACA;gBACA,CAAC,wFAAwF,CAAC;aAC3F,CAACW,IAAI,CAAC;QAEX;QAEAV,eAAeL,OAAO,CAACO,IAAI,GAAGJ;IAChC;IAEA,MAAMa,eAAe9C,iBAAiB,CAACiC;QACrC,OAAOE,eAAeL,OAAO,CAACQ,KAAKC,SAAS,CAACN,KAAKC,KAAK,EAAE;IAC3D;IAEA,MAAMa,oBAAoBnD,MAAMoD,WAAW,CAAC;QAC1C,OAAO;YACL5B,eAAeO,qBAAqBG,OAAO;YAC3CF,uBAAuBA,sBAAsBE,OAAO;YACpDK,gBAAgBA,eAAeL,OAAO;QACxC;IACF,GAAG,EAAE;IAEL,OAAO;QACLmB,YAAY;YACVC,MAAM;QACR;QACAA,MAAMhD,KAAKiD,MAAM,CACfrD,yBAAyB,OAAO;YAC9B,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FO,KAAKJ,cAAcI,KAAKQ;YACxBuC,MAAM;YACN,oBAAoBxC,WAAW,aAAa;YAC5C,GAAGG,eAAe;YAClB,GAAGX,KAAK;QACV,IACA;YAAEiD,aAAa;QAAM;QAEvB/C;QACAC;QACAC;QACAE;QACAU;QACAT;QACAC;QACAwB;QACAU;QACAf;QACAgB;IACF;AACF,EAAE"}

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

@@ -1,3 +1,5 @@
+'use client';
 import { __styles, mergeClasses } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
 export const tabListClassNames = {

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

	@@ -1 +1 @@
1	- {"version":3,"names":["__styles","mergeClasses","tokens","tabListClassNames","root","useStyles","mc9l5x","Beiy3e4","Bnnss6s","Eh141a","qhf8xq","horizontal","Bt984gj","vertical","roundedSmall","i8kkvl","Belr9w4","rmohyg","rounded","d","p","useTabListStyles_unstable","state","appearance","size","styles","isRounded","className"],"sources":["useTabListStyles.styles.js"],"sourcesContent":["~~import~~ { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\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 roundedSmall: {\n gap: tokens.spacingHorizontalSNudge\n },\n rounded: {\n gap: tokens.spacingHorizontalS\n }\n});\n/\n Apply styling to the TabList slots based on the state\n */ export const useTabListStyles_unstable = (state)=>{\n 'use no memo';\n const { appearance, vertical, size } = state;\n const styles = useStyles();\n const isRounded = appearance === 'subtle-circular' \|\| appearance === 'filled-circular';\n state.root.className = mergeClasses(tabListClassNames.root, styles.root, vertical ? styles.vertical : styles.horizontal, isRounded && (size === 'small' ? styles.roundedSmall : styles.rounded), state.root.className);\n return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,iBAAiB,GAAG;EAC7BC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGL,QAAA;EAAAI,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;EAAAO,YAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,OAAA;IAAAH,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAE,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAsBrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,yBAAyB,GAAIC,KAAK,IAAG;EAClD,aAAa;;EACb,MAAM;IAAEC,UAAU;IAAEV,QAAQ;IAAEW;EAAK,CAAC,GAAGF,KAAK;EAC5C,MAAMG,MAAM,GAAGpB,SAAS,CAAC,CAAC;EAC1B,MAAMqB,SAAS,GAAGH,UAAU,KAAK,iBAAiB,IAAIA,UAAU,KAAK,iBAAiB;EACtFD,KAAK,CAAClB,IAAI,CAACuB,SAAS,GAAG1B,YAAY,CAACE,iBAAiB,CAACC,IAAI,EAAEqB,MAAM,CAACrB,IAAI,EAAES,QAAQ,GAAGY,MAAM,CAACZ,QAAQ,GAAGY,MAAM,CAACd,UAAU,EAAEe,SAAS,KAAKF,IAAI,KAAK,OAAO,GAAGC,MAAM,CAACX,YAAY,GAAGW,MAAM,CAACP,OAAO,CAAC,EAAEI,KAAK,CAAClB,IAAI,CAACuB,SAAS,CAAC;EACtN,OAAOL,KAAK;AAChB,CAAC","ignoreList":[]}
1	+ {"version":3,"names":["__styles","mergeClasses","tokens","tabListClassNames","root","useStyles","mc9l5x","Beiy3e4","Bnnss6s","Eh141a","qhf8xq","horizontal","Bt984gj","vertical","roundedSmall","i8kkvl","Belr9w4","rmohyg","rounded","d","p","useTabListStyles_unstable","state","appearance","size","styles","isRounded","className"],"sources":["useTabListStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\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 roundedSmall: {\n gap: tokens.spacingHorizontalSNudge\n },\n rounded: {\n gap: tokens.spacingHorizontalS\n }\n});\n/\n Apply styling to the TabList slots based on the state\n */ export const useTabListStyles_unstable = (state)=>{\n 'use no memo';\n const { appearance, vertical, size } = state;\n const styles = useStyles();\n const isRounded = appearance === 'subtle-circular' \|\| appearance === 'filled-circular';\n state.root.className = mergeClasses(tabListClassNames.root, styles.root, vertical ? styles.vertical : styles.horizontal, isRounded && (size === 'small' ? styles.roundedSmall : styles.rounded), state.root.className);\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,iBAAiB,GAAG;EAC7BC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGL,QAAA;EAAAI,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;EAAAO,YAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,OAAA;IAAAH,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAE,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAsBrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,yBAAyB,GAAIC,KAAK,IAAG;EAClD,aAAa;;EACb,MAAM;IAAEC,UAAU;IAAEV,QAAQ;IAAEW;EAAK,CAAC,GAAGF,KAAK;EAC5C,MAAMG,MAAM,GAAGpB,SAAS,CAAC,CAAC;EAC1B,MAAMqB,SAAS,GAAGH,UAAU,KAAK,iBAAiB,IAAIA,UAAU,KAAK,iBAAiB;EACtFD,KAAK,CAAClB,IAAI,CAACuB,SAAS,GAAG1B,YAAY,CAACE,iBAAiB,CAACC,IAAI,EAAEqB,MAAM,CAACrB,IAAI,EAAES,QAAQ,GAAGY,MAAM,CAACZ,QAAQ,GAAGY,MAAM,CAACd,UAAU,EAAEe,SAAS,KAAKF,IAAI,KAAK,OAAO,GAAGC,MAAM,CAACX,YAAY,GAAGW,MAAM,CAACP,OAAO,CAAC,EAAEI,KAAK,CAAClB,IAAI,CAACuB,SAAS,CAAC;EACtN,OAAOL,KAAK;AAChB,CAAC","ignoreList":[]}

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

@@ -1,3 +1,4 @@
+'use client';
 import { makeStyles, mergeClasses } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
 export const tabListClassNames = {

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/TabList/useTabListStyles.styles.ts"],"sourcesContent":["~~import~~ { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { TabListSlots, TabListState } from './TabList.types';\n\nexport const tabListClassNames: SlotClassNames<TabListSlots> = {\n root: 'fui-TabList',\n};\n\n/*\n Styles for the root slot\n /\nconst 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 roundedSmall: {\n gap: tokens.spacingHorizontalSNudge,\n },\n rounded: {\n gap: tokens.spacingHorizontalS,\n },\n});\n\n/\n Apply styling to the TabList slots based on the state\n */\nexport const useTabListStyles_unstable = (state: TabListState): TabListState => {\n 'use no memo';\n\n const { appearance, vertical, size } = state;\n\n const styles = useStyles();\n\n const isRounded = appearance === 'subtle-circular' \|\| appearance === 'filled-circular';\n\n state.root.className = mergeClasses(\n tabListClassNames.root,\n styles.root,\n vertical ? styles.vertical : styles.horizontal,\n isRounded && (size === 'small' ? styles.roundedSmall : styles.rounded),\n state.root.className,\n );\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","tabListClassNames","root","useStyles","display","flexDirection","flexShrink","flexWrap","position","horizontal","alignItems","vertical","roundedSmall","gap","spacingHorizontalSNudge","rounded","spacingHorizontalS","useTabListStyles_unstable","state","appearance","size","styles","isRounded","className"],"mappings":"~~AACA~~,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,MAAM,QAAQ,wBAAwB;AAG/C,OAAO,MAAMC,oBAAkD;IAC7DC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYL,WAAW;IAC3BI,MAAM;QACJE,SAAS;QACTC,eAAe;QACfC,YAAY;QACZC,UAAU;QACVC,UAAU;IACZ;IACAC,YAAY;QACVC,YAAY;QACZL,eAAe;IACjB;IACAM,UAAU;QACRD,YAAY;QACZL,eAAe;IACjB;IACAO,cAAc;QACZC,KAAKb,OAAOc,uBAAuB;IACrC;IACAC,SAAS;QACPF,KAAKb,OAAOgB,kBAAkB;IAChC;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,4BAA4B,CAACC;IACxC;IAEA,MAAM,EAAEC,UAAU,EAAER,QAAQ,EAAES,IAAI,EAAE,GAAGF;IAEvC,MAAMG,SAASlB;IAEf,MAAMmB,YAAYH,eAAe,qBAAqBA,eAAe;IAErED,MAAMhB,IAAI,CAACqB,SAAS,GAAGxB,aACrBE,kBAAkBC,IAAI,EACtBmB,OAAOnB,IAAI,EACXS,WAAWU,OAAOV,QAAQ,GAAGU,OAAOZ,UAAU,EAC9Ca,aAAcF,CAAAA,SAAS,UAAUC,OAAOT,YAAY,GAAGS,OAAON,OAAO,AAAD,GACpEG,MAAMhB,IAAI,CAACqB,SAAS;IAGtB,OAAOL;AACT,EAAE"}
1	+ {"version":3,"sources":["../src/components/TabList/useTabListStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { TabListSlots, TabListState } from './TabList.types';\n\nexport const tabListClassNames: SlotClassNames<TabListSlots> = {\n root: 'fui-TabList',\n};\n\n/*\n Styles for the root slot\n /\nconst 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 roundedSmall: {\n gap: tokens.spacingHorizontalSNudge,\n },\n rounded: {\n gap: tokens.spacingHorizontalS,\n },\n});\n\n/\n Apply styling to the TabList slots based on the state\n */\nexport const useTabListStyles_unstable = (state: TabListState): TabListState => {\n 'use no memo';\n\n const { appearance, vertical, size } = state;\n\n const styles = useStyles();\n\n const isRounded = appearance === 'subtle-circular' \|\| appearance === 'filled-circular';\n\n state.root.className = mergeClasses(\n tabListClassNames.root,\n styles.root,\n vertical ? styles.vertical : styles.horizontal,\n isRounded && (size === 'small' ? styles.roundedSmall : styles.rounded),\n state.root.className,\n );\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","tabListClassNames","root","useStyles","display","flexDirection","flexShrink","flexWrap","position","horizontal","alignItems","vertical","roundedSmall","gap","spacingHorizontalSNudge","rounded","spacingHorizontalS","useTabListStyles_unstable","state","appearance","size","styles","isRounded","className"],"mappings":"AAAA;AAGA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,MAAM,QAAQ,wBAAwB;AAG/C,OAAO,MAAMC,oBAAkD;IAC7DC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYL,WAAW;IAC3BI,MAAM;QACJE,SAAS;QACTC,eAAe;QACfC,YAAY;QACZC,UAAU;QACVC,UAAU;IACZ;IACAC,YAAY;QACVC,YAAY;QACZL,eAAe;IACjB;IACAM,UAAU;QACRD,YAAY;QACZL,eAAe;IACjB;IACAO,cAAc;QACZC,KAAKb,OAAOc,uBAAuB;IACrC;IACAC,SAAS;QACPF,KAAKb,OAAOgB,kBAAkB;IAChC;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,4BAA4B,CAACC;IACxC;IAEA,MAAM,EAAEC,UAAU,EAAER,QAAQ,EAAES,IAAI,EAAE,GAAGF;IAEvC,MAAMG,SAASlB;IAEf,MAAMmB,YAAYH,eAAe,qBAAqBA,eAAe;IAErED,MAAMhB,IAAI,CAACqB,SAAS,GAAGxB,aACrBE,kBAAkBC,IAAI,EACtBmB,OAAOnB,IAAI,EACXS,WAAWU,OAAOV,QAAQ,GAAGU,OAAOZ,UAAU,EAC9Ca,aAAcF,CAAAA,SAAS,UAAUC,OAAOT,YAAY,GAAGS,OAAON,OAAO,AAAD,GACpEG,MAAMhB,IAAI,CAACqB,SAAS;IAGtB,OAAOL;AACT,EAAE"}

package/lib-commonjs/components/Tab/Tab.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

package/lib-commonjs/components/Tab/Tab.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/Tab/Tab.tsx"],"sourcesContent":["~~import~~ * as React from 'react';\nimport { useTab_unstable } from './useTab';\nimport { renderTab_unstable } from './renderTab';\nimport { useTabStyles_unstable } from './useTabStyles.styles';\nimport type { TabProps } from './Tab.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/*\n A tab provides a selectable item in a tab list.\n */\nexport const Tab: ForwardRefComponent<TabProps> = React.forwardRef((props, ref) => {\n const state = useTab_unstable(props, ref);\n\n useTabStyles_unstable(state);\n\n useCustomStyleHook_unstable('useTabStyles_unstable')(state);\n\n return renderTab_unstable(state);\n});\n\nTab.displayName = 'Tab';\n"],"names":["React","useTab_unstable","renderTab_unstable","useTabStyles_unstable","useCustomStyleHook_unstable","Tab","forwardRef","props","ref","state","displayName"],"mappings":"~~;;;;+BAWaK;;;;;;;iEAXU~~,QAAQ;wBACC,WAAW;2BACR,cAAc;oCACX,wBAAwB;qCAGlB,kCAAkC;AAKvE,~~YAAMA~~,WAAAA,GAAqCL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACzE,MAAMC,~~QAAQR~~,~~2BAAAA~~,EAAgBM,OAAOC;QAErCL,yCAAAA,EAAsBM;QAEtBL,gDAAAA,EAA4B,yBAAyBK;IAErD,WAAOP,6BAAAA,EAAmBO;AAC5B,GAAG;AAEHJ,IAAIK,WAAW,GAAG"}
1	+ {"version":3,"sources":["../src/components/Tab/Tab.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useTab_unstable } from './useTab';\nimport { renderTab_unstable } from './renderTab';\nimport { useTabStyles_unstable } from './useTabStyles.styles';\nimport type { TabProps } from './Tab.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/*\n A tab provides a selectable item in a tab list.\n */\nexport const Tab: ForwardRefComponent<TabProps> = React.forwardRef((props, ref) => {\n const state = useTab_unstable(props, ref);\n\n useTabStyles_unstable(state);\n\n useCustomStyleHook_unstable('useTabStyles_unstable')(state);\n\n return renderTab_unstable(state);\n});\n\nTab.displayName = 'Tab';\n"],"names":["React","useTab_unstable","renderTab_unstable","useTabStyles_unstable","useCustomStyleHook_unstable","Tab","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;wBACC,WAAW;2BACR,cAAc;oCACX,wBAAwB;qCAGlB,kCAAkC;AAKvE,MAAMK,MAAAA,WAAAA,GAAqCL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACzE,MAAMC,YAAQR,uBAAAA,EAAgBM,OAAOC;QAErCL,yCAAAA,EAAsBM;QAEtBL,gDAAAA,EAA4B,yBAAyBK;IAErD,WAAOP,6BAAAA,EAAmBO;AAC5B,GAAG;AAEHJ,IAAIK,WAAW,GAAG"}

package/lib-commonjs/components/Tab/useTab.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

package/lib-commonjs/components/Tab/useTab.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/Tab/useTab.ts"],"sourcesContent":["~~import~~ * as React from 'react';\nimport { useTabsterAttributes } from '@fluentui/react-tabster';\nimport {\n getIntrinsicElementProps,\n mergeCallbacks,\n useEventCallback,\n useMergedRefs,\n slot,\n omit,\n} from '@fluentui/react-utilities';\nimport type { TabProps, TabState } from './Tab.types';\nimport { useTabListContext_unstable } from '../TabList/TabListContext';\nimport { SelectTabEvent } from '../TabList/TabList.types';\n\n/*\n Create the state required to render Tab.\n \n The returned state can be modified with hooks such as useTabStyles_unstable,\n * before being passed to renderTab_unstable.\n \n @param props - props from this instance of Tab\n * @param ref - reference to root HTMLElement of Tab\n */\nexport const useTab_unstable = (props: TabProps, ref: React.Ref<HTMLElement>): TabState => {\n const { content, disabled: tabDisabled = false, icon, onClick, onFocus, value } = props;\n\n const appearance = useTabListContext_unstable(ctx => ctx.appearance);\n const reserveSelectedTabSpace = useTabListContext_unstable(ctx => ctx.reserveSelectedTabSpace);\n const selectTabOnFocus = useTabListContext_unstable(ctx => ctx.selectTabOnFocus);\n const listDisabled = useTabListContext_unstable(ctx => ctx.disabled);\n const selected = useTabListContext_unstable(ctx => ctx.selectedValue === value);\n const onRegister = useTabListContext_unstable(ctx => ctx.onRegister);\n const onUnregister = useTabListContext_unstable(ctx => ctx.onUnregister);\n const onSelect = useTabListContext_unstable(ctx => ctx.onSelect);\n const size = useTabListContext_unstable(ctx => ctx.size);\n const vertical = useTabListContext_unstable(ctx => !!ctx.vertical);\n const disabled = listDisabled \|\| tabDisabled;\n\n const innerRef = React.useRef<HTMLElement>(null);\n const onSelectCallback = (event: SelectTabEvent) => onSelect(event, { value });\n const onTabClick = useEventCallback(mergeCallbacks(onClick, onSelectCallback));\n const onTabFocus = useEventCallback(mergeCallbacks(onFocus, onSelectCallback));\n\n const focusProps = useTabsterAttributes({\n focusable: { isDefault: selected },\n });\n\n React.useEffect(() => {\n onRegister({\n value,\n ref: innerRef,\n });\n\n return () => {\n onUnregister({ value, ref: innerRef });\n };\n }, [onRegister, onUnregister, innerRef, value]);\n\n const iconSlot = slot.optional(icon, { elementType: 'span' });\n const contentSlot = slot.always(content, {\n defaultProps: { children: props.children },\n elementType: 'span',\n });\n const contentReservedSpace: typeof content =\n content && typeof content === 'object' ? omit(content, ['ref' as keyof typeof content]) : content;\n const iconOnly = Boolean(iconSlot?.children && !contentSlot.children);\n return {\n components: { root: 'button', icon: 'span', content: 'span', contentReservedSpace: 'span' },\n root: slot.always(\n getIntrinsicElementProps('button', {\n // FIXME:\n // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLButtonElement`\n // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n ref: useMergedRefs(ref, innerRef) as React.Ref<HTMLButtonElement>,\n role: 'tab',\n type: 'button',\n // aria-selected undefined indicates it is not selectable\n // according to https://www.w3.org/TR/wai-aria-1.1/#aria-selected\n 'aria-selected': disabled ? undefined : (`${selected}` as 'true' \| 'false'),\n ...focusProps,\n ...props,\n disabled,\n onClick: onTabClick,\n onFocus: selectTabOnFocus ? onTabFocus : onFocus,\n }),\n { elementType: 'button' },\n ) as TabState['root'],\n icon: iconSlot,\n iconOnly,\n content: contentSlot,\n contentReservedSpace: slot.optional(contentReservedSpace, {\n renderByDefault: !selected && !iconOnly && reserveSelectedTabSpace,\n defaultProps: { children: props.children },\n elementType: 'span',\n }),\n appearance,\n disabled,\n selected,\n size,\n value,\n vertical,\n };\n};\n"],"names":["React","useTabsterAttributes","getIntrinsicElementProps","mergeCallbacks","useEventCallback","useMergedRefs","slot","omit","useTabListContext_unstable","useTab_unstable","props","ref","content","disabled","tabDisabled","icon","onClick","onFocus","value","appearance","ctx","reserveSelectedTabSpace","selectTabOnFocus","listDisabled","selected","selectedValue","onRegister","onUnregister","onSelect","size","vertical","innerRef","useRef","onSelectCallback","event","onTabClick","onTabFocus","focusProps","focusable","isDefault","useEffect","iconSlot","optional","elementType","contentSlot","always","defaultProps","children","contentReservedSpace","iconOnly","Boolean","components","root","role","type","undefined","renderByDefault"],"mappings":"~~;;;;+BAuBaS~~;;;;;;;iEAvBU,QAAQ;8BACM,0BAA0B;gCAQxD,4BAA4B;gCAEQ,4BAA4B;AAYhE,wBAAwB,CAACC,OAAiBC;IAC/C,MAAM,EAAEC,OAAO,EAAEC,UAAUC,cAAc,KAAK,EAAEC,IAAI,EAAEC,OAAO,EAAEC,OAAO,EAAEC,KAAK,EAAE,GAAGR;IAElF,MAAMS,iBAAaX,0CAAAA,EAA2BY,CAAAA,MAAOA,IAAID,UAAU;IACnE,MAAME,8BAA0Bb,0CAAAA,EAA2BY,CAAAA,MAAOA,IAAIC,uBAAuB;IAC7F,MAAMC,uBAAmBd,0CAAAA,EAA2BY,CAAAA,MAAOA,IAAIE,gBAAgB;IAC/E,MAAMC,~~eAAef~~,~~8CAAAA~~,EAA2BY,CAAAA,MAAOA,IAAIP,QAAQ;IACnE,MAAMW,eAAWhB,0CAAAA,EAA2BY,CAAAA,MAAOA,IAAIK,aAAa,KAAKP;IACzE,MAAMQ,iBAAalB,0CAAAA,EAA2BY,CAAAA,MAAOA,IAAIM,UAAU;IACnE,MAAMC,mBAAenB,0CAAAA,EAA2BY,CAAAA,MAAOA,IAAIO,YAAY;IACvE,MAAMC,eAAWpB,0CAAAA,EAA2BY,CAAAA,MAAOA,IAAIQ,QAAQ;IAC/D,MAAMC,~~OAAOrB~~,~~8CAAAA~~,EAA2BY,CAAAA,MAAOA,IAAIS,IAAI;IACvD,MAAMC,eAAWtB,0CAAAA,EAA2BY,CAAAA,MAAO,CAAC,CAACA,IAAIU,QAAQ;IACjE,MAAMjB,WAAWU,gBAAgBT;IAEjC,MAAMiB,WAAW/B,OAAMgC,MAAM,CAAc;IAC3C,MAAMC,mBAAmB,CAACC,QAA0BN,SAASM,OAAO;YAAEhB;QAAM;IAC5E,MAAMiB,iBAAa/B,gCAAAA,MAAiBD,8BAAAA,EAAea,SAASiB;IAC5D,MAAMG,~~aAAahC~~,~~oCAAAA~~,MAAiBD,8BAAAA,EAAec,SAASgB;IAE5D,MAAMI,iBAAapC,kCAAAA,EAAqB;QACtCqC,WAAW;YAAEC,WAAWf;QAAS;IACnC;IAEAxB,OAAMwC,SAAS,CAAC;QACdd,WAAW;YACTR;YACAP,KAAKoB;QACP;QAEA,OAAO;YACLJ,aAAa;gBAAET;gBAAOP,KAAKoB;YAAS;QACtC;IACF,GAAG;QAACL;QAAYC;QAAcI;QAAUb;KAAM;IAE9C,MAAMuB,WAAWnC,oBAAAA,CAAKoC,QAAQ,CAAC3B,MAAM;QAAE4B,aAAa;IAAO;IAC3D,MAAMC,cAActC,oBAAAA,CAAKuC,MAAM,CAACjC,SAAS;QACvCkC,cAAc;YAAEC,UAAUrC,MAAMqC,QAAQ;QAAC;QACzCJ,aAAa;IACf;IACA,MAAMK,uBACJpC,WAAW,OAAOA,YAAY,eAAWL,oBAAAA,EAAKK,SAAS;QAAC;KAA8B,IAAIA;IAC5F,MAAMqC,WAAWC,QAAQT,cAAAA,QAAAA,aAAAA,KAAAA,IAAAA,KAAAA,IAAAA,SAAUM,QAAAA,AAAQ,KAAI,CAACH,YAAYG,QAAQ;IACpE,OAAO;QACLI,YAAY;YAAEC,MAAM;YAAUrC,MAAM;YAAQH,SAAS;YAAQoC,sBAAsB;QAAO;QAC1FI,MAAM9C,oBAAAA,CAAKuC,MAAM,KACf3C,wCAAAA,EAAyB,UAAU;YACjC,SAAS;YACT,+EAA+E;YAC/E,4FAA4F;YAC5FS,SAAKN,6BAAAA,EAAcM,KAAKoB;YACxBsB,MAAM;YACNC,MAAM;YACN,yDAAyD;YACzD,iEAAiE;YACjE,iBAAiBzC,WAAW0C,YAAa,GAAG/B,UAAU;YACtD,GAAGa,UAAU;YACb,GAAG3B,KAAK;YACRG;YACAG,SAASmB;YACTlB,SAASK,mBAAmBc,aAAanB;QAC3C,IACA;YAAE0B,aAAa;QAAS;QAE1B5B,MAAM0B;QACNQ;QACArC,SAASgC;QACTI,sBAAsB1C,oBAAAA,CAAKoC,QAAQ,CAACM,sBAAsB;YACxDQ,iBAAiB,CAAChC,YAAY,CAACyB,YAAY5B;YAC3CyB,cAAc;gBAAEC,UAAUrC,MAAMqC,QAAQ;YAAC;YACzCJ,aAAa;QACf;QACAxB;QACAN;QACAW;QACAK;QACAX;QACAY;IACF;AACF,EAAE"}
1	+ {"version":3,"sources":["../src/components/Tab/useTab.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useTabsterAttributes } from '@fluentui/react-tabster';\nimport {\n getIntrinsicElementProps,\n mergeCallbacks,\n useEventCallback,\n useMergedRefs,\n slot,\n omit,\n} from '@fluentui/react-utilities';\nimport type { TabProps, TabState } from './Tab.types';\nimport { useTabListContext_unstable } from '../TabList/TabListContext';\nimport { SelectTabEvent } from '../TabList/TabList.types';\n\n/*\n Create the state required to render Tab.\n \n The returned state can be modified with hooks such as useTabStyles_unstable,\n * before being passed to renderTab_unstable.\n \n @param props - props from this instance of Tab\n * @param ref - reference to root HTMLElement of Tab\n */\nexport const useTab_unstable = (props: TabProps, ref: React.Ref<HTMLElement>): TabState => {\n const { content, disabled: tabDisabled = false, icon, onClick, onFocus, value } = props;\n\n const appearance = useTabListContext_unstable(ctx => ctx.appearance);\n const reserveSelectedTabSpace = useTabListContext_unstable(ctx => ctx.reserveSelectedTabSpace);\n const selectTabOnFocus = useTabListContext_unstable(ctx => ctx.selectTabOnFocus);\n const listDisabled = useTabListContext_unstable(ctx => ctx.disabled);\n const selected = useTabListContext_unstable(ctx => ctx.selectedValue === value);\n const onRegister = useTabListContext_unstable(ctx => ctx.onRegister);\n const onUnregister = useTabListContext_unstable(ctx => ctx.onUnregister);\n const onSelect = useTabListContext_unstable(ctx => ctx.onSelect);\n const size = useTabListContext_unstable(ctx => ctx.size);\n const vertical = useTabListContext_unstable(ctx => !!ctx.vertical);\n const disabled = listDisabled \|\| tabDisabled;\n\n const innerRef = React.useRef<HTMLElement>(null);\n const onSelectCallback = (event: SelectTabEvent) => onSelect(event, { value });\n const onTabClick = useEventCallback(mergeCallbacks(onClick, onSelectCallback));\n const onTabFocus = useEventCallback(mergeCallbacks(onFocus, onSelectCallback));\n\n const focusProps = useTabsterAttributes({\n focusable: { isDefault: selected },\n });\n\n React.useEffect(() => {\n onRegister({\n value,\n ref: innerRef,\n });\n\n return () => {\n onUnregister({ value, ref: innerRef });\n };\n }, [onRegister, onUnregister, innerRef, value]);\n\n const iconSlot = slot.optional(icon, { elementType: 'span' });\n const contentSlot = slot.always(content, {\n defaultProps: { children: props.children },\n elementType: 'span',\n });\n const contentReservedSpace: typeof content =\n content && typeof content === 'object' ? omit(content, ['ref' as keyof typeof content]) : content;\n const iconOnly = Boolean(iconSlot?.children && !contentSlot.children);\n return {\n components: { root: 'button', icon: 'span', content: 'span', contentReservedSpace: 'span' },\n root: slot.always(\n getIntrinsicElementProps('button', {\n // FIXME:\n // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLButtonElement`\n // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n ref: useMergedRefs(ref, innerRef) as React.Ref<HTMLButtonElement>,\n role: 'tab',\n type: 'button',\n // aria-selected undefined indicates it is not selectable\n // according to https://www.w3.org/TR/wai-aria-1.1/#aria-selected\n 'aria-selected': disabled ? undefined : (`${selected}` as 'true' \| 'false'),\n ...focusProps,\n ...props,\n disabled,\n onClick: onTabClick,\n onFocus: selectTabOnFocus ? onTabFocus : onFocus,\n }),\n { elementType: 'button' },\n ) as TabState['root'],\n icon: iconSlot,\n iconOnly,\n content: contentSlot,\n contentReservedSpace: slot.optional(contentReservedSpace, {\n renderByDefault: !selected && !iconOnly && reserveSelectedTabSpace,\n defaultProps: { children: props.children },\n elementType: 'span',\n }),\n appearance,\n disabled,\n selected,\n size,\n value,\n vertical,\n };\n};\n"],"names":["React","useTabsterAttributes","getIntrinsicElementProps","mergeCallbacks","useEventCallback","useMergedRefs","slot","omit","useTabListContext_unstable","useTab_unstable","props","ref","content","disabled","tabDisabled","icon","onClick","onFocus","value","appearance","ctx","reserveSelectedTabSpace","selectTabOnFocus","listDisabled","selected","selectedValue","onRegister","onUnregister","onSelect","size","vertical","innerRef","useRef","onSelectCallback","event","onTabClick","onTabFocus","focusProps","focusable","isDefault","useEffect","iconSlot","optional","elementType","contentSlot","always","defaultProps","children","contentReservedSpace","iconOnly","Boolean","components","root","role","type","undefined","renderByDefault"],"mappings":"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"}

package/lib-commonjs/components/Tab/useTabAnimatedIndicator.styles.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["useTabAnimatedIndicator.styles.js"],"sourcesContent":["import * as React from 'react';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useTabListContext_unstable } from '../TabList/TabListContext';\nimport { tokens } from '@fluentui/react-theme';\nimport { useAnimationFrame } from '@fluentui/react-utilities';\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 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 = isValueDefined(value) ? (_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// eslint-disable-next-line eqeqeq\nconst isValueDefined = (value)=>value != null;\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 const [requestAnimationFrame] = useAnimationFrame();\n if (selected) {\n const { previousSelectedValue, selectedValue, registeredTabs } = getRegisteredTabs();\n if (isValueDefined(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 // Reset the animation values after the animation is complete\n requestAnimationFrame(()=>setAnimationValues({\n offset: 0,\n scale: 1\n }));\n }\n }\n } else if (isValueDefined(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"],"names":["React","__styles","mergeClasses","useTabListContext_unstable","tokens","useAnimationFrame","tabIndicatorCssVars_unstable","offsetVar","scaleVar","useActiveIndicatorStyles","base","B68tc82","Bmxbyg5","Bpg54ce","animated","Ba2ppi3","F2fol1","B1dyfl9","B0vmy72","u9bimw","horizontal","sjv3b2","b1kco5","vertical","d","p","m","calculateTabRect","element","_element_parentElement","parentRect","parentElement","getBoundingClientRect","x","y","width","height","tabRect","undefined","getRegisteredTabRect","registeredTabs","value","_registeredTabs_JSON_stringify","isValueDefined","JSON","stringify","ref","current","useTabAnimatedIndicatorStyles_unstable","state","disabled","selected","activeIndicatorStyles","lastAnimatedFrom","setLastAnimatedFrom","useState","animationValues","setAnimationValues","offset","scale","getRegisteredTabs","ctx","requestAnimationFrame","previousSelectedValue","selectedValue","previousSelectedTabRect","selectedTabRect","animating","root","className","rootCssVars","style"],"mappings":";;;;+BAuEiBgD,sCAAsC;;;;;;;iEAvEhC,OAAO;wBACW,gBAAgB;gCACd,2BAA2B;gCAEpC,2BAA2B;AAC7D,gEAAA;AACA,MAAM1C,4BAA4B,GAAG;IACjCC,SAAS,EAAE,8BAA8B;IACzCC,QAAQ,EAAE;AACd,CAAC;AACD,MAAMC,wBAAwB,GAAA,WAAA,OAAGR,gBAAA,EAAA;IAAAS,IAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,QAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,UAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,QAAA,EAAA;QAAAF,MAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAE,CAAA,EAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;KAAA;AAAA,CAgChC,CAAC;AACF,MAAMC,gBAAgB,IAAIC,OAAO,IAAG;IAChC,IAAIA,OAAO,EAAE;QACT,IAAIC,sBAAsB;QAC1B,MAAMC,UAAU,GAAG,CAAC,CAACD,sBAAsB,GAAGD,OAAO,CAACG,aAAAA,AAAa,MAAM,IAAI,IAAIF,sBAAsB,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,sBAAsB,CAACG,qBAAqB,EAAC,CAAC,IAAK;YAC7KC,CAAC,EAAE,CAAC;YACJC,CAAC,EAAE,CAAC;YACJC,KAAK,EAAE,CAAC;YACRC,MAAM,EAAE;QACZ,CAAC;QACD,MAAMC,OAAO,GAAGT,OAAO,CAACI,qBAAqB,CAAC,CAAC;QAC/C,OAAO;YACHC,CAAC,EAAEI,OAAO,CAACJ,CAAC,GAAGH,UAAU,CAACG,CAAC;YAC3BC,CAAC,EAAEG,OAAO,CAACH,CAAC,GAAGJ,UAAU,CAACI,CAAC;YAC3BC,KAAK,EAAEE,OAAO,CAACF,KAAK;YACpBC,MAAM,EAAEC,OAAO,CAACD,MAAAA;QACpB,CAAC;IACL;IACA,OAAOE,SAAS;AACpB,CAAC;AACD,MAAMC,oBAAoB,GAAGA,CAACC,cAAc,EAAEC,KAAK,KAAG;IAClD,IAAIC,8BAA8B;IAClC,MAAMd,OAAO,GAAGe,cAAc,CAACF,KAAK,CAAC,GAAG,CAACC,8BAA8B,GAAGF,cAAc,CAACI,IAAI,CAACC,SAAS,CAACJ,KAAK,EAAC,AAAC,MAAM,IAAI,IAAIC,8BAA8B,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,8BAA8B,CAACI,GAAG,CAACC,OAAO,GAAGT,SAAS;IACxO,OAAOV,OAAO,GAAGD,gBAAgB,CAACC,OAAO,CAAC,GAAGU,SAAS;AAC1D,CAAC;AACD,kCAAA;AACA,MAAMK,cAAc,IAAIF,KAAK,GAAGA,KAAK,IAAI,IAAI;AAGlC,gDAAgDQ,KAAK,IAAG;IAC/D,MAAM,EAAEC,QAAQ,EAAEC,QAAQ,EAAE5B,QAAAA,EAAU,GAAG0B,KAAK;IAC9C,MAAMG,qBAAqB,GAAG3C,wBAAwB,CAAC,CAAC;IACxD,MAAM,CAAC4C,gBAAgB,EAAEC,mBAAmB,CAAC,GAAGtD,KAAK,EAACuD,QAAQ,CAAC,CAAC;IAChE,MAAM,CAACC,eAAe,EAAEC,kBAAkB,CAAC,GAAGzD,KAAK,EAACuD,QAAQ,CAAC;QACzDG,MAAM,EAAE,CAAC;QACTC,KAAK,EAAE;IACX,CAAC,CAAC;IACF,MAAMC,iBAAiB,GAAGzD,8CAA0B,GAAE0D,GAAG,GAAGA,GAAG,CAACD,iBAAiB,CAAC;IAClF,MAAM,CAACE,qBAAqB,CAAC,OAAGzD,iCAAiB,CAAC,CAAC;IACnD,IAAI8C,QAAQ,EAAE;QACV,MAAM,EAAEY,qBAAqB,EAAEC,aAAa,EAAExB,cAAAA,EAAgB,GAAGoB,iBAAiB,CAAC,CAAC;QACpF,IAAIjB,cAAc,CAACoB,qBAAqB,CAAC,IAAIV,gBAAgB,KAAKU,qBAAqB,EAAE;YACrF,MAAME,uBAAuB,GAAG1B,oBAAoB,CAACC,cAAc,EAAEuB,qBAAqB,CAAC;YAC3F,MAAMG,eAAe,GAAG3B,oBAAoB,CAACC,cAAc,EAAEwB,aAAa,CAAC;YAC3E,IAAIE,eAAe,IAAID,uBAAuB,EAAE;gBAC5C,MAAMP,MAAM,GAAGnC,QAAQ,GAAG0C,uBAAuB,CAAC/B,CAAC,GAAGgC,eAAe,CAAChC,CAAC,GAAG+B,uBAAuB,CAAChC,CAAC,GAAGiC,eAAe,CAACjC,CAAC;gBACvH,MAAM0B,KAAK,GAAGpC,QAAQ,GAAG0C,uBAAuB,CAAC7B,MAAM,GAAG8B,eAAe,CAAC9B,MAAM,GAAG6B,uBAAuB,CAAC9B,KAAK,GAAG+B,eAAe,CAAC/B,KAAK;gBACxIsB,kBAAkB,CAAC;oBACfC,MAAM;oBACNC;gBACJ,CAAC,CAAC;gBACFL,mBAAmB,CAACS,qBAAqB,CAAC;gBAC1C,6DAAA;gBACAD,qBAAqB,CAAC,IAAIL,kBAAkB,CAAC;wBACrCC,MAAM,EAAE,CAAC;wBACTC,KAAK,EAAE;oBACX,CAAC,CAAC,CAAC;YACX;QACJ;IACJ,CAAC,MAAM,IAAIhB,cAAc,CAACU,gBAAgB,CAAC,EAAE;QACzC,6EAAA;QACA,yEAAA;QACAC,mBAAmB,CAAChB,SAAS,CAAC;IAClC;IACA,oDAAA;IACA,IAAIY,QAAQ,EAAE;QACV,OAAOD,KAAK;IAChB;IACA,6EAAA;IACA,oEAAA;IACA,MAAMkB,SAAS,GAAGX,eAAe,CAACE,MAAM,KAAK,CAAC,IAAIF,eAAe,CAACG,KAAK,KAAK,CAAC;IAC7EV,KAAK,CAACmB,IAAI,CAACC,SAAS,OAAGnE,oBAAY,EAAC+C,KAAK,CAACmB,IAAI,CAACC,SAAS,EAAElB,QAAQ,IAAIC,qBAAqB,CAAC1C,IAAI,EAAEyC,QAAQ,IAAIgB,SAAS,IAAIf,qBAAqB,CAACtC,QAAQ,EAAEqC,QAAQ,KAAK5B,QAAQ,GAAG6B,qBAAqB,CAAC7B,QAAQ,GAAG6B,qBAAqB,CAAChC,UAAAA,AAAU,CAAC,CAAC;IACtP,MAAMkD,WAAW,GAAG;QAChB,CAAChE,4BAA4B,CAACC,SAAS,CAAA,EAAG,GAAGiD,eAAe,CAACE,MAAM,CAAA,EAAA,CAAI;QACvE,CAACpD,4BAA4B,CAACE,QAAQ,CAAA,EAAG,GAAGgD,eAAe,CAACG,KAAK,EAAA;IACrE,CAAC;IACDV,KAAK,CAACmB,IAAI,CAACG,KAAK,GAAG;QACf,GAAGD,WAAW;QACd,GAAGrB,KAAK,CAACmB,IAAI,CAACG,KAAAA;IAClB,CAAC;IACD,OAAOtB,KAAK;AAChB,CAAC"}
1	+ {"version":3,"sources":["useTabAnimatedIndicator.styles.js"],"sourcesContent":["'use client';\nimport * as React from 'react';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useTabListContext_unstable } from '../TabList/TabListContext';\nimport { tokens } from '@fluentui/react-theme';\nimport { useAnimationFrame } from '@fluentui/react-utilities';\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 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 = isValueDefined(value) ? (_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// eslint-disable-next-line eqeqeq\nconst isValueDefined = (value)=>value != null;\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 const [requestAnimationFrame] = useAnimationFrame();\n if (selected) {\n const { previousSelectedValue, selectedValue, registeredTabs } = getRegisteredTabs();\n if (isValueDefined(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 // Reset the animation values after the animation is complete\n requestAnimationFrame(()=>setAnimationValues({\n offset: 0,\n scale: 1\n }));\n }\n }\n } else if (isValueDefined(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"],"names":["React","__styles","mergeClasses","useTabListContext_unstable","tokens","useAnimationFrame","tabIndicatorCssVars_unstable","offsetVar","scaleVar","useActiveIndicatorStyles","base","B68tc82","Bmxbyg5","Bpg54ce","animated","Ba2ppi3","F2fol1","B1dyfl9","B0vmy72","u9bimw","horizontal","sjv3b2","b1kco5","vertical","d","p","m","calculateTabRect","element","_element_parentElement","parentRect","parentElement","getBoundingClientRect","x","y","width","height","tabRect","undefined","getRegisteredTabRect","registeredTabs","value","_registeredTabs_JSON_stringify","isValueDefined","JSON","stringify","ref","current","useTabAnimatedIndicatorStyles_unstable","state","disabled","selected","activeIndicatorStyles","lastAnimatedFrom","setLastAnimatedFrom","useState","animationValues","setAnimationValues","offset","scale","getRegisteredTabs","ctx","requestAnimationFrame","previousSelectedValue","selectedValue","previousSelectedTabRect","selectedTabRect","animating","root","className","rootCssVars","style"],"mappings":"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"}

package/lib-commonjs/components/Tab/useTabAnimatedIndicator.styles.raw.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/Tab/useTabAnimatedIndicator.styles.ts"],"sourcesContent":["~~import~~ * as React from 'react';\nimport type { TabState, TabValue } from './Tab.types';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useTabListContext_unstable } from '../TabList/TabListContext';\nimport { TabRegisterData } from '../TabList/TabList.types';\nimport { tokens } from '@fluentui/react-theme';\nimport { useAnimationFrame } from '@fluentui/react-utilities';\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nconst tabIndicatorCssVars_unstable = {\n offsetVar: '--fui-Tab__indicator--offset',\n scaleVar: '--fui-Tab__indicator--scale',\n};\n\nconst useActiveIndicatorStyles = makeStyles({\n base: {\n // overflow is required to allow the selection indicator to animate outside the tab area.\n overflow: 'visible',\n },\n animated: {\n '::after': {\n transitionProperty: 'transform',\n transitionDuration: `${tokens.durationSlow}`,\n transitionTimingFunction: `${tokens.curveDecelerateMax}`,\n },\n '@media (prefers-reduced-motion: reduce)': {\n '::after': {\n transitionProperty: 'none',\n transitionDuration: '0.01ms',\n },\n },\n },\n horizontal: {\n '::after': {\n transformOrigin: 'left',\n transform: `translateX(var(${tabIndicatorCssVars_unstable.offsetVar}))\n scaleX(var(${tabIndicatorCssVars_unstable.scaleVar}))`,\n },\n },\n vertical: {\n '::after': {\n transformOrigin: 'top',\n transform: `translateY(var(${tabIndicatorCssVars_unstable.offsetVar}))\n scaleY(var(${tabIndicatorCssVars_unstable.scaleVar}))`,\n },\n },\n});\n\nconst calculateTabRect = (element: HTMLElement) => {\n if (element) {\n const parentRect = element.parentElement?.getBoundingClientRect() \|\| { x: 0, y: 0, width: 0, height: 0 };\n const tabRect = element.getBoundingClientRect();\n\n return {\n x: tabRect.x - parentRect.x,\n y: tabRect.y - parentRect.y,\n width: tabRect.width,\n height: tabRect.height,\n };\n }\n return undefined;\n};\n\nconst getRegisteredTabRect = (registeredTabs: Record<string, TabRegisterData>, value?: TabValue) => {\n const element = isValueDefined(value) ? registeredTabs[JSON.stringify(value)]?.ref.current : undefined;\n return element ? calculateTabRect(element) : undefined;\n};\n\n// eslint-disable-next-line eqeqeq\nconst isValueDefined = (value: TabValue) => value != null;\n\n/*\n Adds additional styling to the active tab selection indicator to create a sliding animation.\n */\nexport const useTabAnimatedIndicatorStyles_unstable = (state: TabState): TabState => {\n const { disabled, selected, vertical } = state;\n\n const activeIndicatorStyles = useActiveIndicatorStyles();\n const [lastAnimatedFrom, setLastAnimatedFrom] = React.useState<TabValue>();\n const [animationValues, setAnimationValues] = React.useState({ offset: 0, scale: 1 });\n const getRegisteredTabs = useTabListContext_unstable(ctx => ctx.getRegisteredTabs);\n\n const [requestAnimationFrame] = useAnimationFrame();\n\n if (selected) {\n const { previousSelectedValue, selectedValue, registeredTabs } = getRegisteredTabs();\n\n if (isValueDefined(previousSelectedValue) && lastAnimatedFrom !== previousSelectedValue) {\n const previousSelectedTabRect = getRegisteredTabRect(registeredTabs, previousSelectedValue);\n const selectedTabRect = getRegisteredTabRect(registeredTabs, selectedValue);\n\n if (selectedTabRect && previousSelectedTabRect) {\n const offset = vertical\n ? previousSelectedTabRect.y - selectedTabRect.y\n : previousSelectedTabRect.x - selectedTabRect.x;\n\n const scale = vertical\n ? previousSelectedTabRect.height / selectedTabRect.height\n : previousSelectedTabRect.width / selectedTabRect.width;\n\n setAnimationValues({ offset, scale });\n setLastAnimatedFrom(previousSelectedValue);\n\n // Reset the animation values after the animation is complete\n requestAnimationFrame(() => setAnimationValues({ offset: 0, scale: 1 }));\n }\n }\n } else if (isValueDefined(lastAnimatedFrom)) {\n // need to clear the last animated from so that if this tab is selected again\n // from the same previous tab as last time, that animation still happens.\n setLastAnimatedFrom(undefined);\n }\n\n // do not apply any animation if the tab is disabled\n if (disabled) {\n return state;\n }\n\n // the animation should only happen as the selection indicator returns to its\n // original position and not when set at the previous tabs position.\n const animating = animationValues.offset === 0 && animationValues.scale === 1;\n\n state.root.className = mergeClasses(\n state.root.className,\n selected && activeIndicatorStyles.base,\n selected && animating && activeIndicatorStyles.animated,\n selected && (vertical ? activeIndicatorStyles.vertical : activeIndicatorStyles.horizontal),\n );\n\n const rootCssVars = {\n [tabIndicatorCssVars_unstable.offsetVar]: `${animationValues.offset}px`,\n [tabIndicatorCssVars_unstable.scaleVar]: `${animationValues.scale}`,\n };\n\n state.root.style = {\n ...rootCssVars,\n ...state.root.style,\n };\n\n return state;\n};\n"],"names":["React","makeStyles","mergeClasses","useTabListContext_unstable","tokens","useAnimationFrame","tabIndicatorCssVars_unstable","offsetVar","scaleVar","useActiveIndicatorStyles","base","overflow","animated","transitionProperty","transitionDuration","durationSlow","transitionTimingFunction","curveDecelerateMax","horizontal","transformOrigin","transform","vertical","calculateTabRect","element","parentRect","parentElement","getBoundingClientRect","x","y","width","height","tabRect","undefined","getRegisteredTabRect","registeredTabs","value","isValueDefined","JSON","stringify","ref","current","useTabAnimatedIndicatorStyles_unstable","state","disabled","selected","activeIndicatorStyles","lastAnimatedFrom","setLastAnimatedFrom","useState","animationValues","setAnimationValues","offset","scale","getRegisteredTabs","ctx","requestAnimationFrame","previousSelectedValue","selectedValue","previousSelectedTabRect","selectedTabRect","animating","root","className","rootCssVars","style"],"mappings":"~~;;;;+BA2EayC~~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~~OAAG5D~~,~~oBAAAA~~,EACrBwC,MAAMmB,IAAI,CAACC,SAAS,EACpBlB,YAAYC,sBAAsBnC,IAAI,EACtCkC,YAAYgB,aAAaf,sBAAsBjC,QAAQ,EACvDgC,YAAavB,CAAAA,WAAWwB,sBAAsBxB,QAAQ,GAAGwB,sBAAsB3B,~~UAAS~~,~~AAATA~~;~~IAGjF~~,MAAM6C,cAAc;QAClB,CAACzD,6BAA6BC,SAAS,CAAC,EAAE,GAAG0C,gBAAgBE,MAAM,CAAC,EAAE,CAAC;QACvE,CAAC7C,6BAA6BE,QAAQ,CAAC,EAAE,GAAGyC,gBAAgBG,KAAK,EAAE;IACrE;IAEAV,MAAMmB,IAAI,CAACG,KAAK,GAAG;QACjB,GAAGD,WAAW;QACd,GAAGrB,MAAMmB,IAAI,CAACG,KAAK;IACrB;IAEA,OAAOtB;AACT,EAAE"}
1	+ {"version":3,"sources":["../src/components/Tab/useTabAnimatedIndicator.styles.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { TabState, TabValue } from './Tab.types';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useTabListContext_unstable } from '../TabList/TabListContext';\nimport { TabRegisterData } from '../TabList/TabList.types';\nimport { tokens } from '@fluentui/react-theme';\nimport { useAnimationFrame } from '@fluentui/react-utilities';\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nconst tabIndicatorCssVars_unstable = {\n offsetVar: '--fui-Tab__indicator--offset',\n scaleVar: '--fui-Tab__indicator--scale',\n};\n\nconst useActiveIndicatorStyles = makeStyles({\n base: {\n // overflow is required to allow the selection indicator to animate outside the tab area.\n overflow: 'visible',\n },\n animated: {\n '::after': {\n transitionProperty: 'transform',\n transitionDuration: `${tokens.durationSlow}`,\n transitionTimingFunction: `${tokens.curveDecelerateMax}`,\n },\n '@media (prefers-reduced-motion: reduce)': {\n '::after': {\n transitionProperty: 'none',\n transitionDuration: '0.01ms',\n },\n },\n },\n horizontal: {\n '::after': {\n transformOrigin: 'left',\n transform: `translateX(var(${tabIndicatorCssVars_unstable.offsetVar}))\n scaleX(var(${tabIndicatorCssVars_unstable.scaleVar}))`,\n },\n },\n vertical: {\n '::after': {\n transformOrigin: 'top',\n transform: `translateY(var(${tabIndicatorCssVars_unstable.offsetVar}))\n scaleY(var(${tabIndicatorCssVars_unstable.scaleVar}))`,\n },\n },\n});\n\nconst calculateTabRect = (element: HTMLElement) => {\n if (element) {\n const parentRect = element.parentElement?.getBoundingClientRect() \|\| { x: 0, y: 0, width: 0, height: 0 };\n const tabRect = element.getBoundingClientRect();\n\n return {\n x: tabRect.x - parentRect.x,\n y: tabRect.y - parentRect.y,\n width: tabRect.width,\n height: tabRect.height,\n };\n }\n return undefined;\n};\n\nconst getRegisteredTabRect = (registeredTabs: Record<string, TabRegisterData>, value?: TabValue) => {\n const element = isValueDefined(value) ? registeredTabs[JSON.stringify(value)]?.ref.current : undefined;\n return element ? calculateTabRect(element) : undefined;\n};\n\n// eslint-disable-next-line eqeqeq\nconst isValueDefined = (value: TabValue) => value != null;\n\n/*\n Adds additional styling to the active tab selection indicator to create a sliding animation.\n */\nexport const useTabAnimatedIndicatorStyles_unstable = (state: TabState): TabState => {\n const { disabled, selected, vertical } = state;\n\n const activeIndicatorStyles = useActiveIndicatorStyles();\n const [lastAnimatedFrom, setLastAnimatedFrom] = React.useState<TabValue>();\n const [animationValues, setAnimationValues] = React.useState({ offset: 0, scale: 1 });\n const getRegisteredTabs = useTabListContext_unstable(ctx => ctx.getRegisteredTabs);\n\n const [requestAnimationFrame] = useAnimationFrame();\n\n if (selected) {\n const { previousSelectedValue, selectedValue, registeredTabs } = getRegisteredTabs();\n\n if (isValueDefined(previousSelectedValue) && lastAnimatedFrom !== previousSelectedValue) {\n const previousSelectedTabRect = getRegisteredTabRect(registeredTabs, previousSelectedValue);\n const selectedTabRect = getRegisteredTabRect(registeredTabs, selectedValue);\n\n if (selectedTabRect && previousSelectedTabRect) {\n const offset = vertical\n ? previousSelectedTabRect.y - selectedTabRect.y\n : previousSelectedTabRect.x - selectedTabRect.x;\n\n const scale = vertical\n ? previousSelectedTabRect.height / selectedTabRect.height\n : previousSelectedTabRect.width / selectedTabRect.width;\n\n setAnimationValues({ offset, scale });\n setLastAnimatedFrom(previousSelectedValue);\n\n // Reset the animation values after the animation is complete\n requestAnimationFrame(() => setAnimationValues({ offset: 0, scale: 1 }));\n }\n }\n } else if (isValueDefined(lastAnimatedFrom)) {\n // need to clear the last animated from so that if this tab is selected again\n // from the same previous tab as last time, that animation still happens.\n setLastAnimatedFrom(undefined);\n }\n\n // do not apply any animation if the tab is disabled\n if (disabled) {\n return state;\n }\n\n // the animation should only happen as the selection indicator returns to its\n // original position and not when set at the previous tabs position.\n const animating = animationValues.offset === 0 && animationValues.scale === 1;\n\n state.root.className = mergeClasses(\n state.root.className,\n selected && activeIndicatorStyles.base,\n selected && animating && activeIndicatorStyles.animated,\n selected && (vertical ? activeIndicatorStyles.vertical : activeIndicatorStyles.horizontal),\n );\n\n const rootCssVars = {\n [tabIndicatorCssVars_unstable.offsetVar]: `${animationValues.offset}px`,\n [tabIndicatorCssVars_unstable.scaleVar]: `${animationValues.scale}`,\n };\n\n state.root.style = {\n ...rootCssVars,\n ...state.root.style,\n };\n\n return state;\n};\n"],"names":["React","makeStyles","mergeClasses","useTabListContext_unstable","tokens","useAnimationFrame","tabIndicatorCssVars_unstable","offsetVar","scaleVar","useActiveIndicatorStyles","base","overflow","animated","transitionProperty","transitionDuration","durationSlow","transitionTimingFunction","curveDecelerateMax","horizontal","transformOrigin","transform","vertical","calculateTabRect","element","parentRect","parentElement","getBoundingClientRect","x","y","width","height","tabRect","undefined","getRegisteredTabRect","registeredTabs","value","isValueDefined","JSON","stringify","ref","current","useTabAnimatedIndicatorStyles_unstable","state","disabled","selected","activeIndicatorStyles","lastAnimatedFrom","setLastAnimatedFrom","useState","animationValues","setAnimationValues","offset","scale","getRegisteredTabs","ctx","requestAnimationFrame","previousSelectedValue","selectedValue","previousSelectedTabRect","selectedTabRect","animating","root","className","rootCssVars","style"],"mappings":"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"}

package/lib-commonjs/components/Tab/useTabStyles.styles.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true