@fluentui/react-tabs 9.2.4 → 9.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.json +48 -1
- package/CHANGELOG.md +19 -2
- package/lib/components/Tab/Tab.js +5 -0
- package/lib/components/Tab/Tab.js.map +1 -1
- package/lib/components/Tab/renderTab.js.map +1 -1
- package/lib/components/Tab/useTab.js.map +1 -1
- package/lib/components/Tab/useTabAnimatedIndicator.js.map +1 -1
- package/lib/components/Tab/useTabStyles.js +0 -4
- package/lib/components/Tab/useTabStyles.js.map +1 -1
- package/lib/components/TabList/TabList.js +5 -0
- package/lib/components/TabList/TabList.js.map +1 -1
- package/lib/components/TabList/TabListContext.js.map +1 -1
- package/lib/components/TabList/renderTabList.js.map +1 -1
- package/lib/components/TabList/useTabList.js.map +1 -1
- package/lib/components/TabList/useTabListContextValues.js.map +1 -1
- package/lib/components/TabList/useTabListStyles.js.map +1 -1
- package/lib/index.js.map +1 -1
- package/lib-amd/components/Tab/Tab.js +3 -1
- package/lib-amd/components/Tab/Tab.js.map +1 -1
- package/lib-amd/components/Tab/useTabStyles.js +1 -1
- package/lib-amd/components/Tab/useTabStyles.js.map +1 -1
- package/lib-amd/components/TabList/TabList.js +3 -1
- package/lib-amd/components/TabList/TabList.js.map +1 -1
- package/lib-commonjs/Tab.js.map +1 -1
- package/lib-commonjs/TabList.js.map +1 -1
- package/lib-commonjs/components/Tab/Tab.js +5 -0
- package/lib-commonjs/components/Tab/Tab.js.map +1 -1
- package/lib-commonjs/components/Tab/Tab.types.js.map +1 -1
- package/lib-commonjs/components/Tab/index.js.map +1 -1
- package/lib-commonjs/components/Tab/renderTab.js.map +1 -1
- package/lib-commonjs/components/Tab/useTab.js.map +1 -1
- package/lib-commonjs/components/Tab/useTabAnimatedIndicator.js.map +1 -1
- package/lib-commonjs/components/Tab/useTabStyles.js +0 -4
- package/lib-commonjs/components/Tab/useTabStyles.js.map +1 -1
- package/lib-commonjs/components/TabList/TabList.js +5 -0
- package/lib-commonjs/components/TabList/TabList.js.map +1 -1
- package/lib-commonjs/components/TabList/TabList.types.js.map +1 -1
- package/lib-commonjs/components/TabList/TabListContext.js.map +1 -1
- package/lib-commonjs/components/TabList/index.js.map +1 -1
- package/lib-commonjs/components/TabList/renderTabList.js.map +1 -1
- package/lib-commonjs/components/TabList/useTabList.js.map +1 -1
- package/lib-commonjs/components/TabList/useTabListContextValues.js.map +1 -1
- package/lib-commonjs/components/TabList/useTabListStyles.js.map +1 -1
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +5 -4
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useTabStyles.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-tabs/src/components/Tab/useTabStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import type { TabSlots, TabState } from './Tab.types';\n\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport { useTabAnimatedIndicatorStyles_unstable } from './useTabAnimatedIndicator';\n\nexport const tabClassNames: SlotClassNames<TabSlots> = {\n root: 'fui-Tab',\n icon: 'fui-Tab__icon',\n content: 'fui-Tab__content',\n};\n\nconst reservedSpaceClassNames = {\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 */\n/* eslint-disable @typescript-eslint/naming-convention */\nconst useRootStyles = makeStyles({\n base: {\n alignItems: 'center',\n ...shorthands.borderColor('none'),\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n ...shorthands.borderWidth(0),\n cursor: 'pointer',\n display: 'grid',\n flexShrink: 0,\n gridAutoFlow: 'column',\n gridTemplateColumns: 'auto',\n gridTemplateRows: 'auto',\n fontFamily: tokens.fontFamilyBase,\n lineHeight: tokens.lineHeightBase300,\n outlineStyle: 'none',\n position: 'relative',\n ...shorthands.overflow('hidden'),\n textTransform: 'none',\n },\n horizontal: {\n justifyContent: 'center',\n },\n vertical: {\n justifyContent: 'start',\n },\n smallHorizontal: {\n columnGap: tokens.spacingHorizontalXXS,\n ...shorthands.padding(tokens.spacingVerticalSNudge, tokens.spacingHorizontalSNudge),\n },\n smallVertical: {\n // horizontal spacing is deliberate. This is the gap between icon and content.\n columnGap: tokens.spacingHorizontalXXS,\n ...shorthands.padding(tokens.spacingVerticalXXS, tokens.spacingHorizontalSNudge),\n },\n mediumHorizontal: {\n columnGap: tokens.spacingHorizontalSNudge,\n ...shorthands.padding(tokens.spacingVerticalM, tokens.spacingHorizontalMNudge),\n },\n mediumVertical: {\n // horizontal spacing is deliberate. This is the gap between icon and content.\n columnGap: tokens.spacingHorizontalSNudge,\n ...shorthands.padding(tokens.spacingVerticalSNudge, tokens.spacingHorizontalMNudge),\n },\n largeHorizontal: {\n columnGap: tokens.spacingHorizontalSNudge,\n ...shorthands.padding(tokens.spacingVerticalL, tokens.spacingHorizontalMNudge),\n },\n largeVertical: {\n // horizontal spacing is deliberate. This is the gap between icon and content.\n columnGap: tokens.spacingHorizontalSNudge,\n ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalMNudge),\n },\n transparent: {\n backgroundColor: tokens.colorTransparentBackground,\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n },\n ':active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n },\n '& .fui-Tab__icon': {\n color: tokens.colorNeutralForeground2,\n },\n ':hover .fui-Tab__icon': {\n color: tokens.colorNeutralForeground2Hover,\n },\n ':active .fui-Tab__icon': {\n color: tokens.colorNeutralForeground2Pressed,\n },\n '& .fui-Tab__content': {\n color: tokens.colorNeutralForeground2,\n },\n ':hover .fui-Tab__content': {\n color: tokens.colorNeutralForeground2Hover,\n },\n ':active .fui-Tab__content': {\n color: tokens.colorNeutralForeground2Pressed,\n },\n },\n subtle: {\n backgroundColor: tokens.colorSubtleBackground,\n ':hover': {\n backgroundColor: tokens.colorSubtleBackgroundHover,\n },\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n },\n '& .fui-Tab__icon': {\n color: tokens.colorNeutralForeground2,\n },\n ':hover .fui-Tab__icon': {\n color: tokens.colorNeutralForeground2Hover,\n },\n ':active .fui-Tab__icon': {\n color: tokens.colorNeutralForeground2Pressed,\n },\n '& .fui-Tab__content': {\n color: tokens.colorNeutralForeground2,\n },\n ':hover .fui-Tab__content': {\n color: tokens.colorNeutralForeground2Hover,\n },\n ':active .fui-Tab__content': {\n color: tokens.colorNeutralForeground2Pressed,\n },\n },\n disabled: {\n backgroundColor: tokens.colorTransparentBackground,\n\n '& .fui-Tab__icon': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n '& .fui-Tab__content': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n cursor: 'not-allowed',\n },\n selected: {\n '& .fui-Tab__icon': {\n color: tokens.colorCompoundBrandForeground1,\n },\n ':hover .fui-Tab__icon': {\n color: tokens.colorCompoundBrandForeground1Hover,\n },\n ':active .fui-Tab__icon': {\n color: tokens.colorCompoundBrandForeground1Pressed,\n },\n '& .fui-Tab__content': {\n color: tokens.colorNeutralForeground1,\n },\n ':hover .fui-Tab__content': {\n color: tokens.colorNeutralForeground1Hover,\n },\n ':active .fui-Tab__content': {\n color: tokens.colorNeutralForeground1Pressed,\n },\n },\n});\n/* eslint-enable @typescript-eslint/naming-convention */\n\n/**\n * Focus styles for the root slot\n */\nconst useFocusStyles = makeStyles({\n // Tab creates a custom focus indicator because the default focus indicator\n // is applied using an ::after pseudo-element on the root. Since the selection\n // indicator uses an ::after pseudo-element on the root, there is a conflict.\n base: createCustomFocusIndicatorStyle({\n ...shorthands.borderColor('transparent'),\n outlineWidth: tokens.strokeWidthThick,\n outlineColor: 'transparent',\n outlineStyle: 'solid',\n boxShadow: `\n ${tokens.shadow4},\n 0 0 0 ${tokens.strokeWidthThick} ${tokens.colorStrokeFocus2}\n `,\n zIndex: 1,\n }),\n});\n\n/** Indicator styles for when pending selection */\nconst usePendingIndicatorStyles = makeStyles({\n base: {\n ':hover::before': {\n backgroundColor: tokens.colorNeutralStroke1Hover,\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n content: '\"\"',\n position: 'absolute',\n },\n ':active::before': {\n backgroundColor: tokens.colorNeutralStroke1Pressed,\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n content: '\"\"',\n position: 'absolute',\n },\n '@media (forced-colors: active)': {\n ':hover::before': {\n backgroundColor: 'Highlight',\n },\n ':active::before': {\n backgroundColor: 'Highlight',\n },\n },\n },\n disabled: {\n ':hover::before': {\n backgroundColor: tokens.colorTransparentStroke,\n },\n ':active::before': {\n backgroundColor: tokens.colorTransparentStroke,\n },\n },\n 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 ...shorthands.borderRadius(tokens.borderRadiusCircular),\n content: '\"\"',\n position: 'absolute',\n zIndex: 1,\n },\n },\n selected: {\n '::after': {\n backgroundColor: tokens.colorCompoundBrandStroke,\n },\n ':hover::after': {\n backgroundColor: tokens.colorCompoundBrandStrokeHover,\n },\n ':active::after': {\n backgroundColor: tokens.colorCompoundBrandStrokePressed,\n },\n '@media (forced-colors: active)': {\n '::after': {\n backgroundColor: 'ButtonText',\n },\n ':hover::after': {\n backgroundColor: 'ButtonText',\n },\n ':active::after': {\n backgroundColor: 'ButtonText',\n },\n },\n },\n disabled: {\n '::after': {\n backgroundColor: tokens.colorNeutralForegroundDisabled,\n },\n },\n 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 ...shorthands.overflow('hidden'),\n [`& .${iconClassNames.filled}`]: {\n display: 'none',\n },\n [`& .${iconClassNames.regular}`]: {\n display: 'inline',\n },\n },\n // per design, the small and medium font sizes are the same.\n // the size prop only affects spacing.\n small: {\n fontSize: '20px',\n height: '20px',\n width: '20px',\n },\n medium: {\n fontSize: '20px',\n height: '20px',\n width: '20px',\n },\n large: {\n fontSize: '24px',\n height: '24px',\n width: '24px',\n },\n selected: {\n [`& .${iconClassNames.filled}`]: {\n display: 'inline',\n },\n [`& .${iconClassNames.regular}`]: {\n display: 'none',\n },\n },\n});\n\n/**\n * Styles for the content slot (children)\n */\nconst useContentStyles = makeStyles({\n base: {\n ...typographyStyles.body1,\n ...shorthands.overflow('hidden'),\n // content padding is the same for medium & small, horiztonal & vertical\n ...shorthands.padding(tokens.spacingVerticalNone, tokens.spacingHorizontalXXS),\n },\n selected: {\n ...typographyStyles.body1Strong,\n },\n 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 const rootStyles = useRootStyles();\n const focusStyles = useFocusStyles();\n const pendingIndicatorStyles = usePendingIndicatorStyles();\n const activeIndicatorStyles = useActiveIndicatorStyles();\n const iconStyles = useIconStyles();\n const contentStyles = useContentStyles();\n\n const { appearance, disabled, selected, size, vertical } = state;\n\n state.root.className = mergeClasses(\n tabClassNames.root,\n rootStyles.base,\n vertical ? rootStyles.vertical : rootStyles.horizontal,\n size === 'small' && (vertical ? rootStyles.smallVertical : rootStyles.smallHorizontal),\n size === 'medium' && (vertical ? rootStyles.mediumVertical : rootStyles.mediumHorizontal),\n size === 'large' && (vertical ? rootStyles.largeVertical : rootStyles.largeHorizontal),\n focusStyles.base,\n !disabled && appearance === 'subtle' && rootStyles.subtle,\n !disabled && appearance === 'transparent' && rootStyles.transparent,\n !disabled && selected && rootStyles.selected,\n disabled && rootStyles.disabled,\n\n // pending indicator (before pseudo element)\n pendingIndicatorStyles.base,\n size === 'small' && (vertical ? pendingIndicatorStyles.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 state.root.className,\n );\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.contentReservedSpaceClassName !== undefined) {\n state.contentReservedSpaceClassName = mergeClasses(\n reservedSpaceClassNames.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 }\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 useTabAnimatedIndicatorStyles_unstable(state);\n\n return state;\n};\n"]}
|
|
1
|
+
{"version":3,"file":"useTabStyles.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-tabs/src/components/Tab/useTabStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import type { TabSlots, TabState } from './Tab.types';\n\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport { useTabAnimatedIndicatorStyles_unstable } from './useTabAnimatedIndicator';\n\nexport const tabClassNames: SlotClassNames<TabSlots> = {\n root: 'fui-Tab',\n icon: 'fui-Tab__icon',\n content: 'fui-Tab__content',\n};\n\nconst reservedSpaceClassNames = {\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 */\n/* eslint-disable @typescript-eslint/naming-convention */\nconst useRootStyles = makeStyles({\n base: {\n alignItems: 'center',\n ...shorthands.borderColor('none'),\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n ...shorthands.borderWidth(0),\n cursor: 'pointer',\n display: 'grid',\n flexShrink: 0,\n gridAutoFlow: 'column',\n gridTemplateColumns: 'auto',\n gridTemplateRows: 'auto',\n fontFamily: tokens.fontFamilyBase,\n lineHeight: tokens.lineHeightBase300,\n outlineStyle: 'none',\n position: 'relative',\n ...shorthands.overflow('hidden'),\n textTransform: 'none',\n },\n horizontal: {\n justifyContent: 'center',\n },\n vertical: {\n justifyContent: 'start',\n },\n smallHorizontal: {\n columnGap: tokens.spacingHorizontalXXS,\n ...shorthands.padding(tokens.spacingVerticalSNudge, tokens.spacingHorizontalSNudge),\n },\n smallVertical: {\n // horizontal spacing is deliberate. This is the gap between icon and content.\n columnGap: tokens.spacingHorizontalXXS,\n ...shorthands.padding(tokens.spacingVerticalXXS, tokens.spacingHorizontalSNudge),\n },\n mediumHorizontal: {\n columnGap: tokens.spacingHorizontalSNudge,\n ...shorthands.padding(tokens.spacingVerticalM, tokens.spacingHorizontalMNudge),\n },\n mediumVertical: {\n // horizontal spacing is deliberate. This is the gap between icon and content.\n columnGap: tokens.spacingHorizontalSNudge,\n ...shorthands.padding(tokens.spacingVerticalSNudge, tokens.spacingHorizontalMNudge),\n },\n largeHorizontal: {\n columnGap: tokens.spacingHorizontalSNudge,\n ...shorthands.padding(tokens.spacingVerticalL, tokens.spacingHorizontalMNudge),\n },\n largeVertical: {\n // horizontal spacing is deliberate. This is the gap between icon and content.\n columnGap: tokens.spacingHorizontalSNudge,\n ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalMNudge),\n },\n transparent: {\n backgroundColor: tokens.colorTransparentBackground,\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n },\n ':active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n },\n '& .fui-Tab__icon': {\n color: tokens.colorNeutralForeground2,\n },\n ':hover .fui-Tab__icon': {\n color: tokens.colorNeutralForeground2Hover,\n },\n ':active .fui-Tab__icon': {\n color: tokens.colorNeutralForeground2Pressed,\n },\n '& .fui-Tab__content': {\n color: tokens.colorNeutralForeground2,\n },\n ':hover .fui-Tab__content': {\n color: tokens.colorNeutralForeground2Hover,\n },\n ':active .fui-Tab__content': {\n color: tokens.colorNeutralForeground2Pressed,\n },\n },\n subtle: {\n backgroundColor: tokens.colorSubtleBackground,\n ':hover': {\n backgroundColor: tokens.colorSubtleBackgroundHover,\n },\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n },\n '& .fui-Tab__icon': {\n color: tokens.colorNeutralForeground2,\n },\n ':hover .fui-Tab__icon': {\n color: tokens.colorNeutralForeground2Hover,\n },\n ':active .fui-Tab__icon': {\n color: tokens.colorNeutralForeground2Pressed,\n },\n '& .fui-Tab__content': {\n color: tokens.colorNeutralForeground2,\n },\n ':hover .fui-Tab__content': {\n color: tokens.colorNeutralForeground2Hover,\n },\n ':active .fui-Tab__content': {\n color: tokens.colorNeutralForeground2Pressed,\n },\n },\n disabled: {\n backgroundColor: tokens.colorTransparentBackground,\n\n '& .fui-Tab__icon': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n '& .fui-Tab__content': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n cursor: 'not-allowed',\n },\n selected: {\n '& .fui-Tab__icon': {\n color: tokens.colorCompoundBrandForeground1,\n },\n ':hover .fui-Tab__icon': {\n color: tokens.colorCompoundBrandForeground1Hover,\n },\n ':active .fui-Tab__icon': {\n color: tokens.colorCompoundBrandForeground1Pressed,\n },\n '& .fui-Tab__content': {\n color: tokens.colorNeutralForeground1,\n },\n ':hover .fui-Tab__content': {\n color: tokens.colorNeutralForeground1Hover,\n },\n ':active .fui-Tab__content': {\n color: tokens.colorNeutralForeground1Pressed,\n },\n },\n});\n/* eslint-enable @typescript-eslint/naming-convention */\n\n/**\n * Focus styles for the root slot\n */\nconst useFocusStyles = makeStyles({\n // Tab creates a custom focus indicator because the default focus indicator\n // is applied using an ::after pseudo-element on the root. Since the selection\n // indicator uses an ::after pseudo-element on the root, there is a conflict.\n base: createCustomFocusIndicatorStyle(\n {\n ...shorthands.borderColor('transparent'),\n outlineWidth: tokens.strokeWidthThick,\n outlineColor: 'transparent',\n outlineStyle: 'solid',\n boxShadow: `\n ${tokens.shadow4},\n 0 0 0 ${tokens.strokeWidthThick} ${tokens.colorStrokeFocus2}\n `,\n zIndex: 1,\n },\n { enableOutline: true },\n ),\n});\n\n/** Indicator styles for when pending selection */\nconst usePendingIndicatorStyles = makeStyles({\n base: {\n ':hover::before': {\n backgroundColor: tokens.colorNeutralStroke1Hover,\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n content: '\"\"',\n position: 'absolute',\n },\n ':active::before': {\n backgroundColor: tokens.colorNeutralStroke1Pressed,\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n content: '\"\"',\n position: 'absolute',\n },\n '@media (forced-colors: active)': {\n ':hover::before': {\n backgroundColor: 'Highlight',\n },\n ':active::before': {\n backgroundColor: 'Highlight',\n },\n },\n },\n disabled: {\n ':hover::before': {\n backgroundColor: tokens.colorTransparentStroke,\n },\n ':active::before': {\n backgroundColor: tokens.colorTransparentStroke,\n },\n },\n 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 ...shorthands.borderRadius(tokens.borderRadiusCircular),\n content: '\"\"',\n position: 'absolute',\n zIndex: 1,\n },\n },\n selected: {\n '::after': {\n backgroundColor: tokens.colorCompoundBrandStroke,\n },\n ':hover::after': {\n backgroundColor: tokens.colorCompoundBrandStrokeHover,\n },\n ':active::after': {\n backgroundColor: tokens.colorCompoundBrandStrokePressed,\n },\n '@media (forced-colors: active)': {\n '::after': {\n backgroundColor: 'ButtonText',\n },\n ':hover::after': {\n backgroundColor: 'ButtonText',\n },\n ':active::after': {\n backgroundColor: 'ButtonText',\n },\n },\n },\n disabled: {\n '::after': {\n backgroundColor: tokens.colorNeutralForegroundDisabled,\n },\n },\n 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 ...shorthands.overflow('hidden'),\n [`& .${iconClassNames.filled}`]: {\n display: 'none',\n },\n [`& .${iconClassNames.regular}`]: {\n display: 'inline',\n },\n },\n // per design, the small and medium font sizes are the same.\n // the size prop only affects spacing.\n small: {\n fontSize: '20px',\n height: '20px',\n width: '20px',\n },\n medium: {\n fontSize: '20px',\n height: '20px',\n width: '20px',\n },\n large: {\n fontSize: '24px',\n height: '24px',\n width: '24px',\n },\n selected: {\n [`& .${iconClassNames.filled}`]: {\n display: 'inline',\n },\n [`& .${iconClassNames.regular}`]: {\n display: 'none',\n },\n },\n});\n\n/**\n * Styles for the content slot (children)\n */\nconst useContentStyles = makeStyles({\n base: {\n ...typographyStyles.body1,\n ...shorthands.overflow('hidden'),\n // content padding is the same for medium & small, horiztonal & vertical\n ...shorthands.padding(tokens.spacingVerticalNone, tokens.spacingHorizontalXXS),\n },\n selected: {\n ...typographyStyles.body1Strong,\n },\n 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 const rootStyles = useRootStyles();\n const focusStyles = useFocusStyles();\n const pendingIndicatorStyles = usePendingIndicatorStyles();\n const activeIndicatorStyles = useActiveIndicatorStyles();\n const iconStyles = useIconStyles();\n const contentStyles = useContentStyles();\n\n const { appearance, disabled, selected, size, vertical } = state;\n\n state.root.className = mergeClasses(\n tabClassNames.root,\n rootStyles.base,\n vertical ? rootStyles.vertical : rootStyles.horizontal,\n size === 'small' && (vertical ? rootStyles.smallVertical : rootStyles.smallHorizontal),\n size === 'medium' && (vertical ? rootStyles.mediumVertical : rootStyles.mediumHorizontal),\n size === 'large' && (vertical ? rootStyles.largeVertical : rootStyles.largeHorizontal),\n focusStyles.base,\n !disabled && appearance === 'subtle' && rootStyles.subtle,\n !disabled && appearance === 'transparent' && rootStyles.transparent,\n !disabled && selected && rootStyles.selected,\n disabled && rootStyles.disabled,\n\n // pending indicator (before pseudo element)\n pendingIndicatorStyles.base,\n size === 'small' && (vertical ? pendingIndicatorStyles.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 state.root.className,\n );\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.contentReservedSpaceClassName !== undefined) {\n state.contentReservedSpaceClassName = mergeClasses(\n reservedSpaceClassNames.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 }\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 useTabAnimatedIndicatorStyles_unstable(state);\n\n return state;\n};\n"]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
define(["require", "exports", "react", "./useTabList", "./renderTabList", "./useTabListStyles", "./useTabListContextValues"], function (require, exports, React, useTabList_1, renderTabList_1, useTabListStyles_1, useTabListContextValues_1) {
|
|
1
|
+
define(["require", "exports", "react", "./useTabList", "./renderTabList", "./useTabListStyles", "./useTabListContextValues", "@fluentui/react-shared-contexts"], function (require, exports, React, useTabList_1, renderTabList_1, useTabListStyles_1, useTabListContextValues_1, react_shared_contexts_1) {
|
|
2
2
|
"use strict";
|
|
3
3
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
4
|
exports.TabList = void 0;
|
|
@@ -9,6 +9,8 @@ define(["require", "exports", "react", "./useTabList", "./renderTabList", "./use
|
|
|
9
9
|
var state = useTabList_1.useTabList_unstable(props, ref);
|
|
10
10
|
var contextValues = useTabListContextValues_1.useTabListContextValues_unstable(state);
|
|
11
11
|
useTabListStyles_1.useTabListStyles_unstable(state);
|
|
12
|
+
var useCustomStyles = react_shared_contexts_1.useCustomStyleHooks_unstable().useTabListStyles_unstable;
|
|
13
|
+
useCustomStyles(state);
|
|
12
14
|
return renderTabList_1.renderTabList_unstable(state, contextValues);
|
|
13
15
|
});
|
|
14
16
|
exports.TabList.displayName = 'TabList';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TabList.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-tabs/src/components/TabList/TabList.tsx"],"names":[],"mappings":";;;;
|
|
1
|
+
{"version":3,"file":"TabList.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-tabs/src/components/TabList/TabList.tsx"],"names":[],"mappings":";;;;IASA;;OAEG;IACU,QAAA,OAAO,GAAsC,KAAK,CAAC,UAAU,CAAC,UAAC,KAAK,EAAE,GAAG;QACpF,IAAM,KAAK,GAAG,gCAAmB,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;QAC9C,IAAM,aAAa,GAAG,0DAAgC,CAAC,KAAK,CAAC,CAAC;QAE9D,4CAAyB,CAAC,KAAK,CAAC,CAAC;QAEzB,IAA2B,eAAe,GAAK,oDAA4B,EAAE,0BAAnC,CAAoC;QACtF,eAAe,CAAC,KAAK,CAAC,CAAC;QAEvB,OAAO,sCAAsB,CAAC,KAAK,EAAE,aAAa,CAAC,CAAC;IACtD,CAAC,CAAC,CAAC;IAEH,eAAO,CAAC,WAAW,GAAG,SAAS,CAAC","sourcesContent":["import * as React from 'react';\nimport { useTabList_unstable } from './useTabList';\nimport { renderTabList_unstable } from './renderTabList';\nimport { useTabListStyles_unstable } from './useTabListStyles';\nimport type { TabListProps } from './TabList.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTabListContextValues_unstable } from './useTabListContextValues';\nimport { useCustomStyleHooks_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 const { useTabListStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n useCustomStyles(state);\n\n return renderTabList_unstable(state, contextValues);\n});\n\nTabList.displayName = 'TabList';\n"]}
|
package/lib-commonjs/Tab.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":["tslib_1","__exportStar","require","exports"],"sources":["../src/packages/react-components/react-tabs/src/Tab.ts"],"sourcesContent":["export * from './components/Tab/index';\n"],"mappings":";;;;;;AAAAA,OAAA,CAAAC,YAAA,CAAAC,OAAA,4BAAAC,OAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":["tslib_1","__exportStar","require","exports"],"sources":["../src/packages/react-components/react-tabs/src/TabList.ts"],"sourcesContent":["export * from './components/TabList/index';\n"],"mappings":";;;;;;AAAAA,OAAA,CAAAC,YAAA,CAAAC,OAAA,gCAAAC,OAAA"}
|
|
@@ -8,12 +8,17 @@ const React = /*#__PURE__*/require("react");
|
|
|
8
8
|
const useTab_1 = /*#__PURE__*/require("./useTab");
|
|
9
9
|
const renderTab_1 = /*#__PURE__*/require("./renderTab");
|
|
10
10
|
const useTabStyles_1 = /*#__PURE__*/require("./useTabStyles");
|
|
11
|
+
const react_shared_contexts_1 = /*#__PURE__*/require("@fluentui/react-shared-contexts");
|
|
11
12
|
/**
|
|
12
13
|
* A tab provides a selectable item in a tab list.
|
|
13
14
|
*/
|
|
14
15
|
exports.Tab = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
15
16
|
const state = useTab_1.useTab_unstable(props, ref);
|
|
16
17
|
useTabStyles_1.useTabStyles_unstable(state);
|
|
18
|
+
const {
|
|
19
|
+
useTabStyles_unstable: useCustomStyles
|
|
20
|
+
} = react_shared_contexts_1.useCustomStyleHooks_unstable();
|
|
21
|
+
useCustomStyles(state);
|
|
17
22
|
return renderTab_1.renderTab_unstable(state);
|
|
18
23
|
});
|
|
19
24
|
exports.Tab.displayName = 'Tab';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":["React","require","useTab_1","renderTab_1","useTabStyles_1","react_shared_contexts_1","exports","Tab","forwardRef","props","ref","state","useTab_unstable","useTabStyles_unstable","useCustomStyles","useCustomStyleHooks_unstable","renderTab_unstable","displayName"],"sources":["../src/packages/react-components/react-tabs/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';\nimport type { TabProps } from './Tab.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHooks_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 const { useTabStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n useCustomStyles(state);\n\n return renderTab_unstable(state);\n});\n\nTab.displayName = 'Tab';\n"],"mappings":";;;;;;AAAA,MAAAA,KAAA,gBAAAC,OAAA;AACA,MAAAC,QAAA,gBAAAD,OAAA;AACA,MAAAE,WAAA,gBAAAF,OAAA;AACA,MAAAG,cAAA,gBAAAH,OAAA;AAGA,MAAAI,uBAAA,gBAAAJ,OAAA;AAEA;;;AAGaK,OAAA,CAAAC,GAAG,gBAAkCP,KAAK,CAACQ,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAChF,MAAMC,KAAK,GAAGT,QAAA,CAAAU,eAAe,CAACH,KAAK,EAAEC,GAAG,CAAC;EAEzCN,cAAA,CAAAS,qBAAqB,CAACF,KAAK,CAAC;EAE5B,MAAM;IAAEE,qBAAqB,EAAEC;EAAe,CAAE,GAAGT,uBAAA,CAAAU,4BAA4B,EAAE;EACjFD,eAAe,CAACH,KAAK,CAAC;EAEtB,OAAOR,WAAA,CAAAa,kBAAkB,CAACL,KAAK,CAAC;AAClC,CAAC,CAAC;AAEFL,OAAA,CAAAC,GAAG,CAACU,WAAW,GAAG,KAAK"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":[],"sources":["../src/packages/react-components/react-tabs/src/components/Tab/Tab.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\n/**\n * Any value that identifies a specific tab.\n */\nexport type TabValue = unknown;\n\nexport type TabSlots = {\n /**\n * Root of the component.\n */\n root: Slot<'button'>;\n\n /**\n * Icon that renders before the content.\n */\n icon?: Slot<'span'>;\n\n /**\n * Component children are placed in this slot\n * Avoid using the `children` property in this slot in favour of Component children whenever possible.\n */\n content: NonNullable<Slot<'span'>>;\n};\n\n/**\n * Tab Props\n */\nexport type TabProps = ComponentProps<Partial<TabSlots>> & {\n /**\n * A tab can be set to disable interaction.\n * @default false\n */\n disabled?: boolean;\n /**\n * The value that identifies this tab when selected.\n */\n value: TabValue;\n};\n\n/**\n * State used in rendering Tab\n */\nexport type TabState = ComponentState<TabSlots> &\n Pick<TabProps, 'value'> &\n Required<Pick<TabProps, 'disabled'>> & {\n /**\n * A tab supports 'transparent' and 'subtle' appearance.\n */\n appearance?: 'transparent' | 'subtle';\n /**\n * A tab can have only an icon slot filled and no content.\n */\n iconOnly: boolean;\n /**\n * If this tab is selected\n */\n selected: boolean;\n /**\n * When defined, tab content with selected style is rendered hidden to reserve space.\n * This keeps consistent content size between unselected and selected states.\n */\n contentReservedSpaceClassName?: string;\n /**\n * A tab can be either 'small', 'medium', or 'large' size.\n */\n size: 'small' | 'medium' | 'large';\n /**\n * A tab can arrange its content based on if the tabs in the list are arranged vertically.\n */\n vertical: boolean;\n };\n"],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":["tslib_1","__exportStar","require","exports"],"sources":["../src/packages/react-components/react-tabs/src/components/Tab/index.ts"],"sourcesContent":["export * from './Tab';\nexport * from './Tab.types';\nexport * from './renderTab';\nexport * from './useTab';\nexport * from './useTabStyles';\nexport * from './useTabAnimatedIndicator';\n"],"mappings":";;;;;;AAAAA,OAAA,CAAAC,YAAA,CAAAC,OAAA,WAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,iBAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,iBAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,cAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,oBAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,+BAAAC,OAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":["React","require","react_utilities_1","renderTab_unstable","state","slots","slotProps","getSlots","createElement","root","icon","iconOnly","content","selected","contentReservedSpaceClassName","undefined","className","exports"],"sources":["../src/packages/react-components/react-tabs/src/components/Tab/renderTab.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { TabState, TabSlots } from './Tab.types';\n\n/**\n * Render the final JSX of Tab\n */\nexport const renderTab_unstable = (state: TabState) => {\n const { slots, slotProps } = getSlots<TabSlots>(state);\n\n return (\n <slots.root {...slotProps.root}>\n {slots.icon && <slots.icon {...slotProps.icon} />}\n {!state.iconOnly && <slots.content {...slotProps.content} />}\n {!state.selected && !state.iconOnly && state.contentReservedSpaceClassName !== undefined && (\n <slots.content {...slotProps.content} className={state.contentReservedSpaceClassName} />\n )}\n </slots.root>\n );\n};\n"],"mappings":";;;;;;AAAA,MAAAA,KAAA,gBAAAC,OAAA;AACA,MAAAC,iBAAA,gBAAAD,OAAA;AAGA;;;AAGO,MAAME,kBAAkB,GAAIC,KAAe,IAAI;EACpD,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGJ,iBAAA,CAAAK,QAAQ,CAAWH,KAAK,CAAC;EAEtD,OACEJ,KAAA,CAAAQ,aAAA,CAACH,KAAK,CAACI,IAAI;IAAA,GAAKH,SAAS,CAACG;EAAI,GAC3BJ,KAAK,CAACK,IAAI,IAAIV,KAAA,CAAAQ,aAAA,CAACH,KAAK,CAACK,IAAI;IAAA,GAAKJ,SAAS,CAACI;EAAI,EAAI,EAChD,CAACN,KAAK,CAACO,QAAQ,IAAIX,KAAA,CAAAQ,aAAA,CAACH,KAAK,CAACO,OAAO;IAAA,GAAKN,SAAS,CAACM;EAAO,EAAI,EAC3D,CAACR,KAAK,CAACS,QAAQ,IAAI,CAACT,KAAK,CAACO,QAAQ,IAAIP,KAAK,CAACU,6BAA6B,KAAKC,SAAS,IACtFf,KAAA,CAAAQ,aAAA,CAACH,KAAK,CAACO,OAAO;IAAA,GAAKN,SAAS,CAACM,OAAO;IAAEI,SAAS,EAAEZ,KAAK,CAACU;EAA6B,EACrF,CACU;AAEjB,CAAC;AAZYG,OAAA,CAAAd,kBAAkB,GAAAA,kBAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":["React","require","react_utilities_1","TabListContext_1","useTab_unstable","props","ref","content","disabled","tabDisabled","icon","value","appearance","useTabListContext_unstable","ctx","reserveSelectedTabSpace","listDisabled","selected","selectedValue","onRegister","onUnregister","onSelect","size","vertical","innerRef","useRef","onClick","useEventCallback","event","useEffect","iconShorthand","resolveShorthand","contentShorthand","required","defaultProps","children","components","root","getNativeElementProps","useMergedRefs","role","type","undefined","iconOnly","Boolean","contentReservedSpaceClassName","exports"],"sources":["../src/packages/react-components/react-tabs/src/components/Tab/useTab.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useEventCallback, useMergedRefs } 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, value } = props;\n\n const appearance = useTabListContext_unstable(ctx => ctx.appearance);\n const reserveSelectedTabSpace = useTabListContext_unstable(ctx => ctx.reserveSelectedTabSpace);\n const listDisabled = useTabListContext_unstable(ctx => ctx.disabled);\n const selected = useTabListContext_unstable(ctx => ctx.selectedValue === value);\n const onRegister = useTabListContext_unstable(ctx => ctx.onRegister);\n const onUnregister = useTabListContext_unstable(ctx => ctx.onUnregister);\n const onSelect = useTabListContext_unstable(ctx => ctx.onSelect);\n const size = useTabListContext_unstable(ctx => ctx.size);\n const vertical = useTabListContext_unstable(ctx => !!ctx.vertical);\n const disabled = listDisabled || tabDisabled;\n\n const innerRef = React.useRef<HTMLElement>(null);\n const onClick = useEventCallback((event: SelectTabEvent) => onSelect(event, { value }));\n\n React.useEffect(() => {\n onRegister({\n value,\n ref: innerRef,\n });\n\n return () => {\n onUnregister({ value, ref: innerRef });\n };\n }, [onRegister, onUnregister, innerRef, value]);\n\n const iconShorthand = resolveShorthand(icon);\n const contentShorthand = resolveShorthand(content, { required: true, defaultProps: { children: props.children } });\n return {\n components: {\n root: 'button',\n icon: 'span',\n content: 'span',\n },\n root: getNativeElementProps('button', {\n ref: useMergedRefs(ref, innerRef),\n role: 'tab',\n type: 'button',\n // aria-selected undefined indicates it is not selectable\n // according to https://www.w3.org/TR/wai-aria-1.1/#aria-selected\n 'aria-selected': disabled ? undefined : `${selected}`,\n ...props,\n disabled,\n onClick,\n }),\n icon: iconShorthand,\n iconOnly: Boolean(iconShorthand?.children && !contentShorthand.children),\n content: contentShorthand,\n appearance,\n contentReservedSpaceClassName: reserveSelectedTabSpace ? '' : undefined,\n disabled,\n selected,\n size,\n value,\n vertical,\n };\n};\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":["React","require","react_1","TabListContext_1","react_theme_1","tabIndicatorCssVars_unstable","offsetVar","scaleVar","useActiveIndicatorStyles","__styles","base","B68tc82","Bmxbyg5","animated","Ba2ppi3","F2fol1","B1dyfl9","B0vmy72","u9bimw","horizontal","sjv3b2","b1kco5","vertical","d","m","calculateTabRect","element","parentRect","_a","parentElement","getBoundingClientRect","x","y","width","height","tabRect","undefined","getRegisteredTabRect","registeredTabs","value","JSON","stringify","ref","current","useTabAnimatedIndicatorStyles_unstable","state","disabled","selected","activeIndicatorStyles","lastAnimatedFrom","setLastAnimatedFrom","useState","animationValues","setAnimationValues","offset","scale","getRegisteredTabs","useTabListContext_unstable","ctx","useEffect","previousSelectedValue","selectedValue","previousSelectedTabRect","selectedTabRect","animating","root","className","mergeClasses","rootCssVars","style","exports"],"sources":["../src/packages/react-components/react-tabs/src/components/Tab/useTabAnimatedIndicator.ts"],"sourcesContent":["import * as React from 'react';\nimport type { TabState, TabValue } from './Tab.types';\n\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { useTabListContext_unstable } from '../TabList/TabListContext';\nimport { TabRegisterData } from '../TabList/TabList.types';\nimport { tokens } from '@fluentui/react-theme';\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nconst tabIndicatorCssVars_unstable = {\n offsetVar: '--fui-Tab__indicator--offset',\n scaleVar: '--fui-Tab__indicator--scale',\n};\n\nconst useActiveIndicatorStyles = makeStyles({\n base: {\n // overflow is required to allow the selection indicator to animate outside the tab area.\n ...shorthands.overflow('visible'),\n },\n animated: {\n '::after': {\n transitionProperty: 'transform',\n transitionDuration: `${tokens.durationSlow}`,\n transitionTimingFunction: `${tokens.curveDecelerateMax}`,\n },\n '@media (prefers-reduced-motion: reduce)': {\n '::after': {\n transitionProperty: 'none',\n transitionDuration: '0.01ms',\n },\n },\n },\n horizontal: {\n '::after': {\n transformOrigin: 'left',\n transform: `translateX(var(${tabIndicatorCssVars_unstable.offsetVar}))\n scaleX(var(${tabIndicatorCssVars_unstable.scaleVar}))`,\n },\n },\n vertical: {\n '::after': {\n transformOrigin: 'top',\n transform: `translateY(var(${tabIndicatorCssVars_unstable.offsetVar}))\n scaleY(var(${tabIndicatorCssVars_unstable.scaleVar}))`,\n },\n },\n});\n\nconst calculateTabRect = (element: HTMLElement) => {\n if (element) {\n const parentRect = element.parentElement?.getBoundingClientRect() || { x: 0, y: 0, width: 0, height: 0 };\n const tabRect = element.getBoundingClientRect();\n\n return {\n x: tabRect.x - parentRect.x,\n y: tabRect.y - parentRect.y,\n width: tabRect.width,\n height: tabRect.height,\n };\n }\n return undefined;\n};\n\nconst getRegisteredTabRect = (registeredTabs: Record<string, TabRegisterData>, value?: TabValue) => {\n const element =\n value !== undefined && value !== null ? registeredTabs[JSON.stringify(value)]?.ref.current : undefined;\n return element ? calculateTabRect(element) : undefined;\n};\n\n/**\n * Adds additional styling to the active tab selection indicator to create a sliding animation.\n */\nexport const useTabAnimatedIndicatorStyles_unstable = (state: TabState): TabState => {\n const { disabled, selected, vertical } = state;\n\n const activeIndicatorStyles = useActiveIndicatorStyles();\n const [lastAnimatedFrom, setLastAnimatedFrom] = React.useState<TabValue>();\n const [animationValues, setAnimationValues] = React.useState({ offset: 0, scale: 1 });\n const getRegisteredTabs = useTabListContext_unstable(ctx => ctx.getRegisteredTabs);\n\n React.useEffect(() => {\n if (lastAnimatedFrom) {\n setAnimationValues({ offset: 0, scale: 1 });\n }\n }, [lastAnimatedFrom]);\n\n if (selected) {\n const { previousSelectedValue, selectedValue, registeredTabs } = getRegisteredTabs();\n const previousSelectedTabRect = getRegisteredTabRect(registeredTabs, previousSelectedValue);\n const selectedTabRect = getRegisteredTabRect(registeredTabs, selectedValue);\n\n if (\n selectedTabRect &&\n previousSelectedTabRect &&\n previousSelectedValue &&\n lastAnimatedFrom !== previousSelectedValue\n ) {\n const offset = vertical\n ? previousSelectedTabRect.y - selectedTabRect.y\n : previousSelectedTabRect.x - selectedTabRect.x;\n\n const scale = vertical\n ? previousSelectedTabRect.height / selectedTabRect.height\n : previousSelectedTabRect.width / selectedTabRect.width;\n\n setAnimationValues({ offset, scale });\n setLastAnimatedFrom(previousSelectedValue);\n }\n } else if (lastAnimatedFrom) {\n // need to clear the last animated from so that if this tab is selected again\n // from the same previous tab as last time, that animation still happens.\n setLastAnimatedFrom(undefined);\n }\n\n // do not apply any animation if the tab is disabled\n if (disabled) {\n return state;\n }\n\n // the animation should only happen as the selection indicator returns to its\n // original position and not when set at the previous tabs position.\n const animating = animationValues.offset === 0 && animationValues.scale === 1;\n\n state.root.className = mergeClasses(\n state.root.className,\n selected && activeIndicatorStyles.base,\n selected && animating && activeIndicatorStyles.animated,\n selected && (vertical ? activeIndicatorStyles.vertical : activeIndicatorStyles.horizontal),\n );\n\n const rootCssVars = {\n [tabIndicatorCssVars_unstable.offsetVar]: `${animationValues.offset}px`,\n [tabIndicatorCssVars_unstable.scaleVar]: `${animationValues.scale}`,\n };\n\n state.root.style = {\n ...rootCssVars,\n ...state.root.style,\n };\n\n return state;\n};\n"],"mappings":"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"}
|
|
@@ -150,8 +150,6 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
|
|
|
150
150
|
*/
|
|
151
151
|
const useFocusStyles = /*#__PURE__*/react_1.__styles({
|
|
152
152
|
base: {
|
|
153
|
-
Brovlpu: "ftqa4ok",
|
|
154
|
-
B486eqv: "f2hkw1w",
|
|
155
153
|
B8q5s1w: "f8hki3x",
|
|
156
154
|
Bci5o5g: ["f1d2448m", "ffh67wi"],
|
|
157
155
|
n8qw10: "f1bjia2o",
|
|
@@ -163,8 +161,6 @@ const useFocusStyles = /*#__PURE__*/react_1.__styles({
|
|
|
163
161
|
Bhxq17a: "f1vjpng2"
|
|
164
162
|
}
|
|
165
163
|
}, {
|
|
166
|
-
f: [".ftqa4ok:focus{outline-style:none;}"],
|
|
167
|
-
i: [".f2hkw1w:focus-visible{outline-style:none;}"],
|
|
168
164
|
d: [".f8hki3x[data-fui-focus-visible]{border-top-color:transparent;}", ".f1d2448m[data-fui-focus-visible]{border-right-color:transparent;}", ".ffh67wi[data-fui-focus-visible]{border-left-color:transparent;}", ".f1bjia2o[data-fui-focus-visible]{border-bottom-color:transparent;}", ".f1p7hgxw[data-fui-focus-visible]{outline-width:var(--strokeWidthThick);}", ".f1way5bb[data-fui-focus-visible]{outline-color:transparent;}", ".f9znhxp[data-fui-focus-visible]{outline-style:solid;}", ".fqa318h[data-fui-focus-visible]{box-shadow:var(--shadow4),0 0 0 var(--strokeWidthThick) var(--colorStrokeFocus2);}", ".f1vjpng2[data-fui-focus-visible]{z-index:1;}"]
|
|
169
165
|
});
|
|
170
166
|
/** Indicator styles for when pending selection */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":"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","names":["exports","root","icon","content","reservedSpaceClassNames","iconClassNames","filled","regular","useRootStyles","react_1","useFocusStyles","usePendingIndicatorStyles","useActiveIndicatorStyles","useIconStyles","useContentStyles","useTabStyles_unstable","state","rootStyles","focusStyles","pendingIndicatorStyles","activeIndicatorStyles","iconStyles","contentStyles","appearance","disabled","selected","size","vertical","className","base","horizontal","smallVertical","smallHorizontal","mediumVertical","mediumHorizontal","largeVertical","largeHorizontal","subtle","transparent","contentReservedSpaceClassName","undefined","largeSelected","iconBefore","noIconBefore","placeholder","large","useTabAnimatedIndicator_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-tabs/src/components/Tab/useTabStyles.ts"],"sourcesContent":["import type { TabSlots, TabState } from './Tab.types';\n\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport { useTabAnimatedIndicatorStyles_unstable } from './useTabAnimatedIndicator';\n\nexport const tabClassNames: SlotClassNames<TabSlots> = {\n root: 'fui-Tab',\n icon: 'fui-Tab__icon',\n content: 'fui-Tab__content',\n};\n\nconst reservedSpaceClassNames = {\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 */\n/* eslint-disable @typescript-eslint/naming-convention */\nconst useRootStyles = makeStyles({\n base: {\n alignItems: 'center',\n ...shorthands.borderColor('none'),\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n ...shorthands.borderWidth(0),\n cursor: 'pointer',\n display: 'grid',\n flexShrink: 0,\n gridAutoFlow: 'column',\n gridTemplateColumns: 'auto',\n gridTemplateRows: 'auto',\n fontFamily: tokens.fontFamilyBase,\n lineHeight: tokens.lineHeightBase300,\n outlineStyle: 'none',\n position: 'relative',\n ...shorthands.overflow('hidden'),\n textTransform: 'none',\n },\n horizontal: {\n justifyContent: 'center',\n },\n vertical: {\n justifyContent: 'start',\n },\n smallHorizontal: {\n columnGap: tokens.spacingHorizontalXXS,\n ...shorthands.padding(tokens.spacingVerticalSNudge, tokens.spacingHorizontalSNudge),\n },\n smallVertical: {\n // horizontal spacing is deliberate. This is the gap between icon and content.\n columnGap: tokens.spacingHorizontalXXS,\n ...shorthands.padding(tokens.spacingVerticalXXS, tokens.spacingHorizontalSNudge),\n },\n mediumHorizontal: {\n columnGap: tokens.spacingHorizontalSNudge,\n ...shorthands.padding(tokens.spacingVerticalM, tokens.spacingHorizontalMNudge),\n },\n mediumVertical: {\n // horizontal spacing is deliberate. This is the gap between icon and content.\n columnGap: tokens.spacingHorizontalSNudge,\n ...shorthands.padding(tokens.spacingVerticalSNudge, tokens.spacingHorizontalMNudge),\n },\n largeHorizontal: {\n columnGap: tokens.spacingHorizontalSNudge,\n ...shorthands.padding(tokens.spacingVerticalL, tokens.spacingHorizontalMNudge),\n },\n largeVertical: {\n // horizontal spacing is deliberate. This is the gap between icon and content.\n columnGap: tokens.spacingHorizontalSNudge,\n ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalMNudge),\n },\n transparent: {\n backgroundColor: tokens.colorTransparentBackground,\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n },\n ':active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n },\n '& .fui-Tab__icon': {\n color: tokens.colorNeutralForeground2,\n },\n ':hover .fui-Tab__icon': {\n color: tokens.colorNeutralForeground2Hover,\n },\n ':active .fui-Tab__icon': {\n color: tokens.colorNeutralForeground2Pressed,\n },\n '& .fui-Tab__content': {\n color: tokens.colorNeutralForeground2,\n },\n ':hover .fui-Tab__content': {\n color: tokens.colorNeutralForeground2Hover,\n },\n ':active .fui-Tab__content': {\n color: tokens.colorNeutralForeground2Pressed,\n },\n },\n subtle: {\n backgroundColor: tokens.colorSubtleBackground,\n ':hover': {\n backgroundColor: tokens.colorSubtleBackgroundHover,\n },\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n },\n '& .fui-Tab__icon': {\n color: tokens.colorNeutralForeground2,\n },\n ':hover .fui-Tab__icon': {\n color: tokens.colorNeutralForeground2Hover,\n },\n ':active .fui-Tab__icon': {\n color: tokens.colorNeutralForeground2Pressed,\n },\n '& .fui-Tab__content': {\n color: tokens.colorNeutralForeground2,\n },\n ':hover .fui-Tab__content': {\n color: tokens.colorNeutralForeground2Hover,\n },\n ':active .fui-Tab__content': {\n color: tokens.colorNeutralForeground2Pressed,\n },\n },\n disabled: {\n backgroundColor: tokens.colorTransparentBackground,\n\n '& .fui-Tab__icon': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n '& .fui-Tab__content': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n cursor: 'not-allowed',\n },\n selected: {\n '& .fui-Tab__icon': {\n color: tokens.colorCompoundBrandForeground1,\n },\n ':hover .fui-Tab__icon': {\n color: tokens.colorCompoundBrandForeground1Hover,\n },\n ':active .fui-Tab__icon': {\n color: tokens.colorCompoundBrandForeground1Pressed,\n },\n '& .fui-Tab__content': {\n color: tokens.colorNeutralForeground1,\n },\n ':hover .fui-Tab__content': {\n color: tokens.colorNeutralForeground1Hover,\n },\n ':active .fui-Tab__content': {\n color: tokens.colorNeutralForeground1Pressed,\n },\n },\n});\n/* eslint-enable @typescript-eslint/naming-convention */\n\n/**\n * Focus styles for the root slot\n */\nconst useFocusStyles = makeStyles({\n // Tab creates a custom focus indicator because the default focus indicator\n // is applied using an ::after pseudo-element on the root. Since the selection\n // indicator uses an ::after pseudo-element on the root, there is a conflict.\n base: createCustomFocusIndicatorStyle({\n ...shorthands.borderColor('transparent'),\n outlineWidth: tokens.strokeWidthThick,\n outlineColor: 'transparent',\n outlineStyle: 'solid',\n boxShadow: `\n ${tokens.shadow4},\n 0 0 0 ${tokens.strokeWidthThick} ${tokens.colorStrokeFocus2}\n `,\n zIndex: 1,\n }),\n});\n\n/** Indicator styles for when pending selection */\nconst usePendingIndicatorStyles = makeStyles({\n base: {\n ':hover::before': {\n backgroundColor: tokens.colorNeutralStroke1Hover,\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n content: '\"\"',\n position: 'absolute',\n },\n ':active::before': {\n backgroundColor: tokens.colorNeutralStroke1Pressed,\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n content: '\"\"',\n position: 'absolute',\n },\n '@media (forced-colors: active)': {\n ':hover::before': {\n backgroundColor: 'Highlight',\n },\n ':active::before': {\n backgroundColor: 'Highlight',\n },\n },\n },\n disabled: {\n ':hover::before': {\n backgroundColor: tokens.colorTransparentStroke,\n },\n ':active::before': {\n backgroundColor: tokens.colorTransparentStroke,\n },\n },\n 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 ...shorthands.borderRadius(tokens.borderRadiusCircular),\n content: '\"\"',\n position: 'absolute',\n zIndex: 1,\n },\n },\n selected: {\n '::after': {\n backgroundColor: tokens.colorCompoundBrandStroke,\n },\n ':hover::after': {\n backgroundColor: tokens.colorCompoundBrandStrokeHover,\n },\n ':active::after': {\n backgroundColor: tokens.colorCompoundBrandStrokePressed,\n },\n '@media (forced-colors: active)': {\n '::after': {\n backgroundColor: 'ButtonText',\n },\n ':hover::after': {\n backgroundColor: 'ButtonText',\n },\n ':active::after': {\n backgroundColor: 'ButtonText',\n },\n },\n },\n disabled: {\n '::after': {\n backgroundColor: tokens.colorNeutralForegroundDisabled,\n },\n },\n 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 ...shorthands.overflow('hidden'),\n [`& .${iconClassNames.filled}`]: {\n display: 'none',\n },\n [`& .${iconClassNames.regular}`]: {\n display: 'inline',\n },\n },\n // per design, the small and medium font sizes are the same.\n // the size prop only affects spacing.\n small: {\n fontSize: '20px',\n height: '20px',\n width: '20px',\n },\n medium: {\n fontSize: '20px',\n height: '20px',\n width: '20px',\n },\n large: {\n fontSize: '24px',\n height: '24px',\n width: '24px',\n },\n selected: {\n [`& .${iconClassNames.filled}`]: {\n display: 'inline',\n },\n [`& .${iconClassNames.regular}`]: {\n display: 'none',\n },\n },\n});\n\n/**\n * Styles for the content slot (children)\n */\nconst useContentStyles = makeStyles({\n base: {\n ...typographyStyles.body1,\n ...shorthands.overflow('hidden'),\n // content padding is the same for medium & small, horiztonal & vertical\n ...shorthands.padding(tokens.spacingVerticalNone, tokens.spacingHorizontalXXS),\n },\n selected: {\n ...typographyStyles.body1Strong,\n },\n 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 const rootStyles = useRootStyles();\n const focusStyles = useFocusStyles();\n const pendingIndicatorStyles = usePendingIndicatorStyles();\n const activeIndicatorStyles = useActiveIndicatorStyles();\n const iconStyles = useIconStyles();\n const contentStyles = useContentStyles();\n\n const { appearance, disabled, selected, size, vertical } = state;\n\n state.root.className = mergeClasses(\n tabClassNames.root,\n rootStyles.base,\n vertical ? rootStyles.vertical : rootStyles.horizontal,\n size === 'small' && (vertical ? rootStyles.smallVertical : rootStyles.smallHorizontal),\n size === 'medium' && (vertical ? rootStyles.mediumVertical : rootStyles.mediumHorizontal),\n size === 'large' && (vertical ? rootStyles.largeVertical : rootStyles.largeHorizontal),\n focusStyles.base,\n !disabled && appearance === 'subtle' && rootStyles.subtle,\n !disabled && appearance === 'transparent' && rootStyles.transparent,\n !disabled && selected && rootStyles.selected,\n disabled && rootStyles.disabled,\n\n // pending indicator (before pseudo element)\n pendingIndicatorStyles.base,\n size === 'small' && (vertical ? pendingIndicatorStyles.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 state.root.className,\n );\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.contentReservedSpaceClassName !== undefined) {\n state.contentReservedSpaceClassName = mergeClasses(\n reservedSpaceClassNames.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 }\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 useTabAnimatedIndicatorStyles_unstable(state);\n\n return state;\n};\n"]}
|
|
1
|
+
{"version":3,"names":["react_1","require","react_tabster_1","react_theme_1","useTabAnimatedIndicator_1","exports","tabClassNames","root","icon","content","reservedSpaceClassNames","iconClassNames","filled","regular","useRootStyles","__styles","base","Bt984gj","g2u3we","h3c5rm","B9xav0g","zhjwy3","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","Bceei9c","mc9l5x","Bnnss6s","Bxotwcr","Budl1dq","wkccdc","Bahqtrf","Bg96gwp","oeaueh","qhf8xq","B68tc82","Bmxbyg5","B9bfxx9","horizontal","Brf1p80","vertical","smallHorizontal","i8kkvl","z8tnut","z189sj","Byoj8tv","uwmqm3","smallVertical","mediumHorizontal","mediumVertical","largeHorizontal","largeVertical","transparent","De3pzq","Jwef8y","ecr2s2","Bptxc3x","B076xvk","q9r9w5","cl4aha","Bk452zc","a4hkcw","subtle","disabled","selected","d","h","a","useFocusStyles","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","Bn4voq9","Bfpq7zp","g9k6zt","j6ew2k","Bhxq17a","usePendingIndicatorStyles","az7l2e","Bv4n3vi","vqofr","B0uxbk8","Bgqb9hq","amg5m6","zkfqfm","Bkydozb","vzq8l0","Bka2azo","Br4ovkg","csmgbd","y36c18","B1ctymy","Bgvrrv0","ddr6p5","lawp4y","Baz25je","Fbdkly","mdwyqc","Bciustq","Ccq8qp","m","useActiveIndicatorStyles","Bjyk6c5","B3778ie","d9w3h3","Bl18szs","B4j8arr","Bsft5z2","E3zdtr","t2ki1e","Glksuk","Blzl0y7","f7digc","Biqphg1","Bntoloa","By385i5","Dlnsje","Eqx8gd","B1piin3","bn5sak","a2br6o","useIconStyles","Br312pm","Ijaq50","D0sxk3","t6yez3","small","Be2twd7","Bqenvij","a9b677","medium","large","useContentStyles","Bhrd7zp","largeSelected","noIconBefore","iconBefore","placeholder","Bcdw1i0","useTabStyles_unstable","state","rootStyles","focusStyles","pendingIndicatorStyles","activeIndicatorStyles","iconStyles","contentStyles","appearance","size","className","mergeClasses","contentReservedSpaceClassName","undefined","useTabAnimatedIndicatorStyles_unstable"],"sources":["../src/packages/react-components/react-tabs/src/components/Tab/useTabStyles.ts"],"sourcesContent":["import type { TabSlots, TabState } from './Tab.types';\n\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport { useTabAnimatedIndicatorStyles_unstable } from './useTabAnimatedIndicator';\n\nexport const tabClassNames: SlotClassNames<TabSlots> = {\n root: 'fui-Tab',\n icon: 'fui-Tab__icon',\n content: 'fui-Tab__content',\n};\n\nconst reservedSpaceClassNames = {\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 */\n/* eslint-disable @typescript-eslint/naming-convention */\nconst useRootStyles = makeStyles({\n base: {\n alignItems: 'center',\n ...shorthands.borderColor('none'),\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n ...shorthands.borderWidth(0),\n cursor: 'pointer',\n display: 'grid',\n flexShrink: 0,\n gridAutoFlow: 'column',\n gridTemplateColumns: 'auto',\n gridTemplateRows: 'auto',\n fontFamily: tokens.fontFamilyBase,\n lineHeight: tokens.lineHeightBase300,\n outlineStyle: 'none',\n position: 'relative',\n ...shorthands.overflow('hidden'),\n textTransform: 'none',\n },\n horizontal: {\n justifyContent: 'center',\n },\n vertical: {\n justifyContent: 'start',\n },\n smallHorizontal: {\n columnGap: tokens.spacingHorizontalXXS,\n ...shorthands.padding(tokens.spacingVerticalSNudge, tokens.spacingHorizontalSNudge),\n },\n smallVertical: {\n // horizontal spacing is deliberate. This is the gap between icon and content.\n columnGap: tokens.spacingHorizontalXXS,\n ...shorthands.padding(tokens.spacingVerticalXXS, tokens.spacingHorizontalSNudge),\n },\n mediumHorizontal: {\n columnGap: tokens.spacingHorizontalSNudge,\n ...shorthands.padding(tokens.spacingVerticalM, tokens.spacingHorizontalMNudge),\n },\n mediumVertical: {\n // horizontal spacing is deliberate. This is the gap between icon and content.\n columnGap: tokens.spacingHorizontalSNudge,\n ...shorthands.padding(tokens.spacingVerticalSNudge, tokens.spacingHorizontalMNudge),\n },\n largeHorizontal: {\n columnGap: tokens.spacingHorizontalSNudge,\n ...shorthands.padding(tokens.spacingVerticalL, tokens.spacingHorizontalMNudge),\n },\n largeVertical: {\n // horizontal spacing is deliberate. This is the gap between icon and content.\n columnGap: tokens.spacingHorizontalSNudge,\n ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalMNudge),\n },\n transparent: {\n backgroundColor: tokens.colorTransparentBackground,\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n },\n ':active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n },\n '& .fui-Tab__icon': {\n color: tokens.colorNeutralForeground2,\n },\n ':hover .fui-Tab__icon': {\n color: tokens.colorNeutralForeground2Hover,\n },\n ':active .fui-Tab__icon': {\n color: tokens.colorNeutralForeground2Pressed,\n },\n '& .fui-Tab__content': {\n color: tokens.colorNeutralForeground2,\n },\n ':hover .fui-Tab__content': {\n color: tokens.colorNeutralForeground2Hover,\n },\n ':active .fui-Tab__content': {\n color: tokens.colorNeutralForeground2Pressed,\n },\n },\n subtle: {\n backgroundColor: tokens.colorSubtleBackground,\n ':hover': {\n backgroundColor: tokens.colorSubtleBackgroundHover,\n },\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n },\n '& .fui-Tab__icon': {\n color: tokens.colorNeutralForeground2,\n },\n ':hover .fui-Tab__icon': {\n color: tokens.colorNeutralForeground2Hover,\n },\n ':active .fui-Tab__icon': {\n color: tokens.colorNeutralForeground2Pressed,\n },\n '& .fui-Tab__content': {\n color: tokens.colorNeutralForeground2,\n },\n ':hover .fui-Tab__content': {\n color: tokens.colorNeutralForeground2Hover,\n },\n ':active .fui-Tab__content': {\n color: tokens.colorNeutralForeground2Pressed,\n },\n },\n disabled: {\n backgroundColor: tokens.colorTransparentBackground,\n\n '& .fui-Tab__icon': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n '& .fui-Tab__content': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n cursor: 'not-allowed',\n },\n selected: {\n '& .fui-Tab__icon': {\n color: tokens.colorCompoundBrandForeground1,\n },\n ':hover .fui-Tab__icon': {\n color: tokens.colorCompoundBrandForeground1Hover,\n },\n ':active .fui-Tab__icon': {\n color: tokens.colorCompoundBrandForeground1Pressed,\n },\n '& .fui-Tab__content': {\n color: tokens.colorNeutralForeground1,\n },\n ':hover .fui-Tab__content': {\n color: tokens.colorNeutralForeground1Hover,\n },\n ':active .fui-Tab__content': {\n color: tokens.colorNeutralForeground1Pressed,\n },\n },\n});\n/* eslint-enable @typescript-eslint/naming-convention */\n\n/**\n * Focus styles for the root slot\n */\nconst useFocusStyles = makeStyles({\n // Tab creates a custom focus indicator because the default focus indicator\n // is applied using an ::after pseudo-element on the root. Since the selection\n // indicator uses an ::after pseudo-element on the root, there is a conflict.\n base: createCustomFocusIndicatorStyle(\n {\n ...shorthands.borderColor('transparent'),\n outlineWidth: tokens.strokeWidthThick,\n outlineColor: 'transparent',\n outlineStyle: 'solid',\n boxShadow: `\n ${tokens.shadow4},\n 0 0 0 ${tokens.strokeWidthThick} ${tokens.colorStrokeFocus2}\n `,\n zIndex: 1,\n },\n { enableOutline: true },\n ),\n});\n\n/** Indicator styles for when pending selection */\nconst usePendingIndicatorStyles = makeStyles({\n base: {\n ':hover::before': {\n backgroundColor: tokens.colorNeutralStroke1Hover,\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n content: '\"\"',\n position: 'absolute',\n },\n ':active::before': {\n backgroundColor: tokens.colorNeutralStroke1Pressed,\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n content: '\"\"',\n position: 'absolute',\n },\n '@media (forced-colors: active)': {\n ':hover::before': {\n backgroundColor: 'Highlight',\n },\n ':active::before': {\n backgroundColor: 'Highlight',\n },\n },\n },\n disabled: {\n ':hover::before': {\n backgroundColor: tokens.colorTransparentStroke,\n },\n ':active::before': {\n backgroundColor: tokens.colorTransparentStroke,\n },\n },\n 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 ...shorthands.borderRadius(tokens.borderRadiusCircular),\n content: '\"\"',\n position: 'absolute',\n zIndex: 1,\n },\n },\n selected: {\n '::after': {\n backgroundColor: tokens.colorCompoundBrandStroke,\n },\n ':hover::after': {\n backgroundColor: tokens.colorCompoundBrandStrokeHover,\n },\n ':active::after': {\n backgroundColor: tokens.colorCompoundBrandStrokePressed,\n },\n '@media (forced-colors: active)': {\n '::after': {\n backgroundColor: 'ButtonText',\n },\n ':hover::after': {\n backgroundColor: 'ButtonText',\n },\n ':active::after': {\n backgroundColor: 'ButtonText',\n },\n },\n },\n disabled: {\n '::after': {\n backgroundColor: tokens.colorNeutralForegroundDisabled,\n },\n },\n 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 ...shorthands.overflow('hidden'),\n [`& .${iconClassNames.filled}`]: {\n display: 'none',\n },\n [`& .${iconClassNames.regular}`]: {\n display: 'inline',\n },\n },\n // per design, the small and medium font sizes are the same.\n // the size prop only affects spacing.\n small: {\n fontSize: '20px',\n height: '20px',\n width: '20px',\n },\n medium: {\n fontSize: '20px',\n height: '20px',\n width: '20px',\n },\n large: {\n fontSize: '24px',\n height: '24px',\n width: '24px',\n },\n selected: {\n [`& .${iconClassNames.filled}`]: {\n display: 'inline',\n },\n [`& .${iconClassNames.regular}`]: {\n display: 'none',\n },\n },\n});\n\n/**\n * Styles for the content slot (children)\n */\nconst useContentStyles = makeStyles({\n base: {\n ...typographyStyles.body1,\n ...shorthands.overflow('hidden'),\n // content padding is the same for medium & small, horiztonal & vertical\n ...shorthands.padding(tokens.spacingVerticalNone, tokens.spacingHorizontalXXS),\n },\n selected: {\n ...typographyStyles.body1Strong,\n },\n 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 const rootStyles = useRootStyles();\n const focusStyles = useFocusStyles();\n const pendingIndicatorStyles = usePendingIndicatorStyles();\n const activeIndicatorStyles = useActiveIndicatorStyles();\n const iconStyles = useIconStyles();\n const contentStyles = useContentStyles();\n\n const { appearance, disabled, selected, size, vertical } = state;\n\n state.root.className = mergeClasses(\n tabClassNames.root,\n rootStyles.base,\n vertical ? rootStyles.vertical : rootStyles.horizontal,\n size === 'small' && (vertical ? rootStyles.smallVertical : rootStyles.smallHorizontal),\n size === 'medium' && (vertical ? rootStyles.mediumVertical : rootStyles.mediumHorizontal),\n size === 'large' && (vertical ? rootStyles.largeVertical : rootStyles.largeHorizontal),\n focusStyles.base,\n !disabled && appearance === 'subtle' && rootStyles.subtle,\n !disabled && appearance === 'transparent' && rootStyles.transparent,\n !disabled && selected && rootStyles.selected,\n disabled && rootStyles.disabled,\n\n // pending indicator (before pseudo element)\n pendingIndicatorStyles.base,\n size === 'small' && (vertical ? pendingIndicatorStyles.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 state.root.className,\n );\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.contentReservedSpaceClassName !== undefined) {\n state.contentReservedSpaceClassName = mergeClasses(\n reservedSpaceClassNames.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 }\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 useTabAnimatedIndicatorStyles_unstable(state);\n\n return state;\n};\n"],"mappings":"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"}
|
|
@@ -9,6 +9,7 @@ const useTabList_1 = /*#__PURE__*/require("./useTabList");
|
|
|
9
9
|
const renderTabList_1 = /*#__PURE__*/require("./renderTabList");
|
|
10
10
|
const useTabListStyles_1 = /*#__PURE__*/require("./useTabListStyles");
|
|
11
11
|
const useTabListContextValues_1 = /*#__PURE__*/require("./useTabListContextValues");
|
|
12
|
+
const react_shared_contexts_1 = /*#__PURE__*/require("@fluentui/react-shared-contexts");
|
|
12
13
|
/**
|
|
13
14
|
* A tab list provides single selection from a set of tabs.
|
|
14
15
|
*/
|
|
@@ -16,6 +17,10 @@ exports.TabList = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
|
16
17
|
const state = useTabList_1.useTabList_unstable(props, ref);
|
|
17
18
|
const contextValues = useTabListContextValues_1.useTabListContextValues_unstable(state);
|
|
18
19
|
useTabListStyles_1.useTabListStyles_unstable(state);
|
|
20
|
+
const {
|
|
21
|
+
useTabListStyles_unstable: useCustomStyles
|
|
22
|
+
} = react_shared_contexts_1.useCustomStyleHooks_unstable();
|
|
23
|
+
useCustomStyles(state);
|
|
19
24
|
return renderTabList_1.renderTabList_unstable(state, contextValues);
|
|
20
25
|
});
|
|
21
26
|
exports.TabList.displayName = 'TabList';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":["React","require","useTabList_1","renderTabList_1","useTabListStyles_1","useTabListContextValues_1","react_shared_contexts_1","exports","TabList","forwardRef","props","ref","state","useTabList_unstable","contextValues","useTabListContextValues_unstable","useTabListStyles_unstable","useCustomStyles","useCustomStyleHooks_unstable","renderTabList_unstable","displayName"],"sources":["../src/packages/react-components/react-tabs/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';\nimport type { TabListProps } from './TabList.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTabListContextValues_unstable } from './useTabListContextValues';\nimport { useCustomStyleHooks_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 const { useTabListStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n useCustomStyles(state);\n\n return renderTabList_unstable(state, contextValues);\n});\n\nTabList.displayName = 'TabList';\n"],"mappings":";;;;;;AAAA,MAAAA,KAAA,gBAAAC,OAAA;AACA,MAAAC,YAAA,gBAAAD,OAAA;AACA,MAAAE,eAAA,gBAAAF,OAAA;AACA,MAAAG,kBAAA,gBAAAH,OAAA;AAGA,MAAAI,yBAAA,gBAAAJ,OAAA;AACA,MAAAK,uBAAA,gBAAAL,OAAA;AAEA;;;AAGaM,OAAA,CAAAC,OAAO,gBAAsCR,KAAK,CAACS,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACxF,MAAMC,KAAK,GAAGV,YAAA,CAAAW,mBAAmB,CAACH,KAAK,EAAEC,GAAG,CAAC;EAC7C,MAAMG,aAAa,GAAGT,yBAAA,CAAAU,gCAAgC,CAACH,KAAK,CAAC;EAE7DR,kBAAA,CAAAY,yBAAyB,CAACJ,KAAK,CAAC;EAEhC,MAAM;IAAEI,yBAAyB,EAAEC;EAAe,CAAE,GAAGX,uBAAA,CAAAY,4BAA4B,EAAE;EACrFD,eAAe,CAACL,KAAK,CAAC;EAEtB,OAAOT,eAAA,CAAAgB,sBAAsB,CAACP,KAAK,EAAEE,aAAa,CAAC;AACrD,CAAC,CAAC;AAEFP,OAAA,CAAAC,OAAO,CAACY,WAAW,GAAG,SAAS"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":[],"sources":["../src/packages/react-components/react-tabs/src/components/TabList/TabList.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { TabValue } from '../Tab/Tab.types';\n\nexport type TabRegisterData = {\n /**\n * The value of the tab.\n */\n value: TabValue;\n\n /**\n * The reference to the tab HTML element.\n */\n ref: React.RefObject<HTMLElement>;\n};\n\nexport type RegisterTabEventHandler = (data: TabRegisterData) => void;\n\nexport type SelectTabData = {\n /**\n * The value of the selected tab.\n */\n value: TabValue;\n};\n\nexport type SelectTabEvent<E = HTMLElement> = React.MouseEvent<E> | React.KeyboardEvent<E>;\n\nexport type SelectTabEventHandler = (event: SelectTabEvent, data: SelectTabData) => void;\n\nexport type TabListSlots = {\n /**\n * The slot associated with the root element of this tab list.\n */\n root: Slot<'div'>;\n};\n\n/**\n * TabList Props\n */\nexport type TabListProps = ComponentProps<TabListSlots> & {\n /**\n * A tab list can supports 'transparent' and 'subtle' appearance.\n *- 'subtle': Minimizes emphasis to blend into the background until hovered or focused.\n *- 'transparent': No background and border styling\n * The appearance affects each of the contained tabs.\n * @default 'transparent'\n */\n appearance?: 'transparent' | 'subtle';\n\n /**\n * Tab size may change between unselected and selected states.\n * The default scenario is a selected tab has bold text.\n *\n * When true, this property requests tabs be the same size whether unselected or selected.\n * @default true\n */\n reserveSelectedTabSpace?: boolean;\n\n /**\n * The value of the tab to be selected by default.\n * Typically useful when the selectedValue is uncontrolled.\n */\n defaultSelectedValue?: TabValue;\n /**\n * A tab list can be set to disable interaction.\n * @default false\n */\n disabled?: boolean;\n\n /**\n * Raised when a tab is selected.\n */\n onTabSelect?: SelectTabEventHandler;\n\n /**\n * The value of the currently selected tab.\n */\n selectedValue?: TabValue;\n\n /**\n * A tab list can be either 'small', 'medium', or 'large' size.\n * The size affects each of the contained tabs.\n * @default 'medium'\n */\n size?: 'small' | 'medium' | 'large';\n\n /**\n * A tab list can arrange its tabs vertically.\n * @default false\n */\n vertical?: boolean;\n};\n\nexport type TabListContextValue = Pick<TabListProps, 'onTabSelect' | 'selectedValue' | 'reserveSelectedTabSpace'> &\n Required<Pick<TabListProps, 'appearance' | 'disabled' | 'size' | 'vertical'>> & {\n /** A callback to allow a tab to register itself with the tab list. */\n onRegister: RegisterTabEventHandler;\n\n /** A callback to allow a tab to unregister itself with the tab list. */\n onUnregister: RegisterTabEventHandler;\n /**\n * A callback to allow a tab to select itself when pressed.\n */\n onSelect: SelectTabEventHandler;\n /**\n * Gets the registered tab data along with current and previous selected values.\n */\n getRegisteredTabs: () => {\n selectedValue?: TabValue;\n previousSelectedValue?: TabValue;\n registeredTabs: Record<string, TabRegisterData>;\n };\n };\n\n/**\n * Context values used in rendering TabList.\n */\nexport type TabListContextValues = {\n /**\n * The context of the tab list available to each tab.\n */\n tabList: TabListContextValue;\n};\n\n/**\n * State used in rendering TabList.\n */\nexport type TabListState = ComponentState<Required<TabListSlots>> & TabListContextValue;\n"],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":["react_context_selector_1","require","tabListContextDefaultValue","appearance","reserveSelectedTabSpace","disabled","selectedValue","undefined","onRegister","onUnregister","onSelect","getRegisteredTabs","registeredTabs","size","vertical","exports","TabListContext","createContext","TabListProvider","Provider","useTabListContext_unstable","selector","useContextSelector","ctx"],"sources":["../src/packages/react-components/react-tabs/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 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"],"mappings":";;;;;;AAAA,MAAAA,wBAAA,gBAAAC,OAAA;AAIA,MAAMC,0BAA0B,GAAwB;EACtDC,UAAU,EAAE,aAAa;EACzBC,uBAAuB,EAAE,IAAI;EAC7BC,QAAQ,EAAE,KAAK;EACfC,aAAa,EAAEC,SAAS;EACxBC,UAAU,EAAEA,CAAA,KAAK;IACf;EAAA,CACD;EACDC,YAAY,EAAEA,CAAA,KAAK;IACjB;EAAA,CACD;EACDC,QAAQ,EAAEA,CAAA,KAAK;IACb;EAAA,CACD;EACDC,iBAAiB,EAAEA,CAAA,KAAK;IACtB,OAAO;MACLC,cAAc,EAAE;KACjB;EACH,CAAC;EACDC,IAAI,EAAE,QAAQ;EACdC,QAAQ,EAAE;CACX;AAEYC,OAAA,CAAAC,cAAc,gBAAiChB,wBAAA,CAAAiB,aAAa,CACvEV,SAAS,CACsB;AAEpBQ,OAAA,CAAAG,eAAe,GAAGH,OAAA,CAAAC,cAAc,CAACG,QAAQ;AAC/C,MAAMC,0BAA0B,GAAOC,QAAiD,IAC7FrB,wBAAA,CAAAsB,kBAAkB,CAACP,OAAA,CAAAC,cAAc,EAAE,CAACO,GAAG,GAAGrB,0BAA0B,KAAKmB,QAAQ,CAACE,GAAG,CAAC,CAAC;AAD5ER,OAAA,CAAAK,0BAA0B,GAAAA,0BAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":["tslib_1","__exportStar","require","exports"],"sources":["../src/packages/react-components/react-tabs/src/components/TabList/index.ts"],"sourcesContent":["export * from './TabList';\nexport * from './TabList.types';\nexport * from './TabListContext';\nexport * from './renderTabList';\nexport * from './useTabList';\nexport * from './useTabListContextValues';\nexport * from './useTabListStyles';\n"],"mappings":";;;;;;AAAAA,OAAA,CAAAC,YAAA,CAAAC,OAAA,eAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,qBAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,sBAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,qBAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,kBAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,+BAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,wBAAAC,OAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":["React","require","react_utilities_1","TabListContext_1","renderTabList_unstable","state","contextValues","slots","slotProps","getSlots","createElement","root","TabListProvider","value","tabList","children","exports"],"sources":["../src/packages/react-components/react-tabs/src/components/TabList/renderTabList.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { TabListState, TabListSlots, TabListContextValues } from './TabList.types';\nimport { TabListProvider } from './TabListContext';\n\n/**\n * Render the final JSX of TabList\n */\nexport const renderTabList_unstable = (state: TabListState, contextValues: TabListContextValues) => {\n const { slots, slotProps } = getSlots<TabListSlots>(state);\n\n return (\n <slots.root {...slotProps.root}>\n <TabListProvider value={contextValues.tabList}>{state.root.children}</TabListProvider>\n </slots.root>\n );\n};\n"],"mappings":";;;;;;AAAA,MAAAA,KAAA,gBAAAC,OAAA;AACA,MAAAC,iBAAA,gBAAAD,OAAA;AAEA,MAAAE,gBAAA,gBAAAF,OAAA;AAEA;;;AAGO,MAAMG,sBAAsB,GAAGA,CAACC,KAAmB,EAAEC,aAAmC,KAAI;EACjG,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGN,iBAAA,CAAAO,QAAQ,CAAeJ,KAAK,CAAC;EAE1D,OACEL,KAAA,CAAAU,aAAA,CAACH,KAAK,CAACI,IAAI;IAAA,GAAKH,SAAS,CAACG;EAAI,GAC5BX,KAAA,CAAAU,aAAA,CAACP,gBAAA,CAAAS,eAAe;IAACC,KAAK,EAAEP,aAAa,CAACQ;EAAO,GAAGT,KAAK,CAACM,IAAI,CAACI,QAAQ,CAAmB,CAC3E;AAEjB,CAAC;AARYC,OAAA,CAAAZ,sBAAsB,GAAAA,sBAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":["React","require","react_tabster_1","react_utilities_1","useTabList_unstable","props","ref","appearance","reserveSelectedTabSpace","disabled","onTabSelect","size","vertical","innerRef","useRef","focusAttributes","useArrowNavigationGroup","circular","axis","memorizeCurrent","selectedValue","setSelectedValue","useControllableState","state","defaultState","defaultSelectedValue","initialState","undefined","currentSelectedValue","previousSelectedValue","useEffect","current","onSelect","useEventCallback","event","data","value","registeredTabs","onRegister","JSON","stringify","onUnregister","getRegisteredTabs","useCallback","components","root","getNativeElementProps","useMergedRefs","role","exports"],"sources":["../src/packages/react-components/react-tabs/src/components/TabList/useTabList.ts"],"sourcesContent":["import * as React from 'react';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport {\n getNativeElementProps,\n useControllableState,\n useEventCallback,\n useMergedRefs,\n} from '@fluentui/react-utilities';\nimport type { TabRegisterData, SelectTabData, SelectTabEvent, TabListProps, TabListState } from './TabList.types';\nimport { TabValue } from '../Tab/Tab.types';\n\n/**\n * Create the state required to render TabList.\n *\n * The returned state can be modified with hooks such as useTabListStyles_unstable,\n * before being passed to renderTabList_unstable.\n *\n * @param props - props from this instance of TabList\n * @param ref - reference to root HTMLElement of TabList\n */\nexport const useTabList_unstable = (props: TabListProps, ref: React.Ref<HTMLElement>): TabListState => {\n const {\n appearance = 'transparent',\n reserveSelectedTabSpace = true,\n disabled = false,\n onTabSelect,\n size = 'medium',\n vertical = false,\n } = props;\n\n const innerRef = React.useRef<HTMLElement>(null);\n\n const focusAttributes = useArrowNavigationGroup({\n circular: true,\n axis: vertical ? 'vertical' : 'horizontal',\n memorizeCurrent: true,\n });\n\n const [selectedValue, setSelectedValue] = useControllableState({\n state: props.selectedValue,\n defaultState: props.defaultSelectedValue,\n initialState: undefined,\n });\n\n // considered usePrevious, but it is sensitive to re-renders\n // this could cause the previous to move to current in the case where the tab list re-renders.\n // these refs avoid getRegisteredTabs changing when selectedValue changes and causing\n // renders for tabs that have not changed.\n const currentSelectedValue = React.useRef<TabValue | undefined>(undefined);\n const previousSelectedValue = React.useRef<TabValue | undefined>(undefined);\n\n React.useEffect(() => {\n previousSelectedValue.current = currentSelectedValue.current;\n currentSelectedValue.current = selectedValue;\n }, [selectedValue]);\n\n const onSelect = useEventCallback((event: SelectTabEvent, data: SelectTabData) => {\n setSelectedValue(data.value);\n onTabSelect?.(event, data);\n });\n\n const registeredTabs = React.useRef<Record<string, TabRegisterData>>({});\n\n const onRegister = useEventCallback((data: TabRegisterData) => {\n registeredTabs.current[JSON.stringify(data.value)] = data;\n });\n\n const onUnregister = useEventCallback((data: TabRegisterData) => {\n delete registeredTabs.current[JSON.stringify(data.value)];\n });\n\n const getRegisteredTabs = React.useCallback(() => {\n return {\n selectedValue: currentSelectedValue.current,\n previousSelectedValue: previousSelectedValue.current,\n registeredTabs: registeredTabs.current,\n };\n }, []);\n\n return {\n components: {\n root: 'div',\n },\n root: getNativeElementProps('div', {\n ref: useMergedRefs(ref, innerRef),\n role: 'tablist',\n ...focusAttributes,\n ...props,\n }),\n appearance,\n reserveSelectedTabSpace,\n disabled,\n selectedValue,\n size,\n vertical,\n onRegister,\n onUnregister,\n onSelect,\n getRegisteredTabs,\n };\n};\n"],"mappings":"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"}
|