@fluentui/react-tabs 9.0.8 → 9.0.10
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 +97 -1
- package/CHANGELOG.md +31 -2
- package/lib/Tab.js.map +1 -1
- package/lib/TabList.js.map +1 -1
- package/lib/components/Tab/Tab.js.map +1 -1
- package/lib/components/Tab/Tab.types.js.map +1 -1
- package/lib/components/Tab/index.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.map +1 -1
- package/lib/components/TabList/TabList.js.map +1 -1
- package/lib/components/TabList/TabList.types.js.map +1 -1
- package/lib/components/TabList/TabListContext.js.map +1 -1
- package/lib/components/TabList/index.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-commonjs/Tab.js.map +1 -1
- package/lib-commonjs/TabList.js.map +1 -1
- package/lib-commonjs/components/Tab/Tab.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.map +1 -1
- package/lib-commonjs/components/TabList/TabList.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 +17 -17
- package/MIGRATION.md +0 -14
- package/Spec.md +0 -363
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/Tab/useTabStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import type { TabSlots, TabState } from './Tab.types';\n\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport { useTabAnimatedIndicatorStyles_unstable } from './useTabAnimatedIndicator';\n\nexport const tabClassNames: SlotClassNames<TabSlots> = {\n root: 'fui-Tab',\n icon: 'fui-Tab__icon',\n content: 'fui-Tab__content',\n};\n\n/**\n * Styles for the root slot\n */\n/* eslint-disable @typescript-eslint/naming-convention */\nconst useRootStyles = makeStyles({\n base: {\n alignItems: 'center',\n ...shorthands.borderColor('none'),\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n ...shorthands.borderWidth(0),\n cursor: 'pointer',\n display: 'grid',\n flexShrink: 0,\n gridAutoFlow: 'column',\n gridTemplateColumns: 'auto',\n gridTemplateRows: 'auto',\n fontFamily: tokens.fontFamilyBase,\n lineHeight: tokens.lineHeightBase300,\n outlineStyle: 'none',\n position: 'relative',\n ...shorthands.overflow('hidden'),\n textTransform: 'none',\n },\n horizontal: {\n justifyContent: 'center',\n },\n vertical: {\n justifyContent: 'start',\n },\n mediumHorizontal: {\n columnGap: tokens.spacingHorizontalSNudge,\n ...shorthands.padding(tokens.spacingVerticalM, tokens.spacingHorizontalMNudge),\n },\n mediumVertical: {\n // horizontal spacing is deliberate. This is the gap between icon and content.\n columnGap: tokens.spacingHorizontalSNudge,\n ...shorthands.padding(tokens.spacingVerticalSNudge, tokens.spacingHorizontalMNudge),\n },\n smallHorizontal: {\n columnGap: tokens.spacingHorizontalXXS,\n ...shorthands.padding(tokens.spacingVerticalSNudge, tokens.spacingHorizontalSNudge),\n },\n smallVertical: {\n // horizontal spacing is deliberate. This is the gap between icon and content.\n columnGap: tokens.spacingHorizontalXXS,\n ...shorthands.padding(tokens.spacingVerticalXXS, tokens.spacingHorizontalSNudge),\n },\n transparent: {\n backgroundColor: tokens.colorTransparentBackground,\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n },\n ':active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n },\n '& .fui-Tab__icon': {\n color: tokens.colorNeutralForeground2,\n },\n ':hover .fui-Tab__icon': {\n color: tokens.colorNeutralForeground2Hover,\n },\n ':active .fui-Tab__icon': {\n color: tokens.colorNeutralForeground2Pressed,\n },\n '& .fui-Tab__content': {\n color: tokens.colorNeutralForeground2,\n },\n ':hover .fui-Tab__content': {\n color: tokens.colorNeutralForeground2Hover,\n },\n ':active .fui-Tab__content': {\n color: tokens.colorNeutralForeground2Pressed,\n },\n },\n subtle: {\n backgroundColor: tokens.colorSubtleBackground,\n ':hover': {\n backgroundColor: tokens.colorSubtleBackgroundHover,\n },\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n },\n '& .fui-Tab__icon': {\n color: tokens.colorNeutralForeground2,\n },\n ':hover .fui-Tab__icon': {\n color: tokens.colorNeutralForeground2Hover,\n },\n ':active .fui-Tab__icon': {\n color: tokens.colorNeutralForeground2Pressed,\n },\n '& .fui-Tab__content': {\n color: tokens.colorNeutralForeground2,\n },\n ':hover .fui-Tab__content': {\n color: tokens.colorNeutralForeground2Hover,\n },\n ':active .fui-Tab__content': {\n color: tokens.colorNeutralForeground2Pressed,\n },\n },\n disabled: {\n backgroundColor: tokens.colorTransparentBackground,\n\n '& .fui-Tab__icon': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n '& .fui-Tab__content': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n cursor: 'not-allowed',\n },\n selected: {\n '& .fui-Tab__icon': {\n color: tokens.colorCompoundBrandForeground1,\n },\n ':hover .fui-Tab__icon': {\n color: tokens.colorCompoundBrandForeground1Hover,\n },\n ':active .fui-Tab__icon': {\n color: tokens.colorCompoundBrandForeground1Pressed,\n },\n '& .fui-Tab__content': {\n color: tokens.colorNeutralForeground1,\n },\n ':hover .fui-Tab__content': {\n color: tokens.colorNeutralForeground1Hover,\n },\n ':active .fui-Tab__content': {\n color: tokens.colorNeutralForeground1Pressed,\n },\n },\n});\n/* eslint-enable @typescript-eslint/naming-convention */\n\n/**\n * Focus styles for the root slot\n */\nconst useFocusStyles = makeStyles({\n // Tab creates a custom focus indicator because the default focus indicator\n // is applied using an ::after pseudo-element on the root. Since the selection\n // indicator uses an ::after pseudo-element on the root, there is a conflict.\n base: createCustomFocusIndicatorStyle({\n ...shorthands.borderColor('transparent'),\n outlineWidth: tokens.strokeWidthThick,\n outlineColor: 'transparent',\n outlineStyle: 'solid',\n boxShadow: `\n ${tokens.shadow4},\n 0 0 0 ${tokens.strokeWidthThick} ${tokens.colorStrokeFocus2}\n `,\n zIndex: 1,\n }),\n});\n\n/** Indicator styles for when pending selection */\nconst usePendingIndicatorStyles = makeStyles({\n base: {\n ':hover::before': {\n backgroundColor: tokens.colorNeutralStroke1Hover,\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n content: '\"\"',\n position: 'absolute',\n },\n ':active::before': {\n backgroundColor: tokens.colorNeutralStroke1Pressed,\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n content: '\"\"',\n position: 'absolute',\n },\n '@media (forced-colors: active)': {\n ':hover::before': {\n backgroundColor: 'Highlight',\n },\n ':active::before': {\n backgroundColor: 'Highlight',\n },\n },\n },\n disabled: {\n ':hover::before': {\n backgroundColor: tokens.colorTransparentStroke,\n },\n ':active::before': {\n backgroundColor: tokens.colorTransparentStroke,\n },\n },\n mediumHorizontal: {\n '::before': {\n bottom: 0,\n height: tokens.strokeWidthThicker,\n left: tokens.spacingHorizontalM,\n right: tokens.spacingHorizontalM,\n },\n },\n mediumVertical: {\n '::before': {\n bottom: tokens.spacingVerticalS,\n left: 0,\n top: tokens.spacingVerticalS,\n width: tokens.strokeWidthThicker,\n },\n },\n smallHorizontal: {\n '::before': {\n bottom: 0,\n height: tokens.strokeWidthThick,\n left: tokens.spacingHorizontalSNudge,\n right: tokens.spacingHorizontalSNudge,\n },\n },\n smallVertical: {\n '::before': {\n bottom: tokens.spacingVerticalXS,\n left: 0,\n top: tokens.spacingVerticalXS,\n width: tokens.strokeWidthThicker,\n },\n },\n});\n\nconst useActiveIndicatorStyles = makeStyles({\n base: {\n '::after': {\n backgroundColor: tokens.colorTransparentStroke,\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n content: '\"\"',\n position: 'absolute',\n zIndex: 1,\n },\n },\n selected: {\n '::after': {\n backgroundColor: tokens.colorCompoundBrandStroke,\n },\n ':hover::after': {\n backgroundColor: tokens.colorCompoundBrandStrokeHover,\n },\n ':active::after': {\n backgroundColor: tokens.colorCompoundBrandStrokePressed,\n },\n '@media (forced-colors: active)': {\n '::after': {\n backgroundColor: 'ButtonText',\n },\n ':hover::after': {\n backgroundColor: 'ButtonText',\n },\n ':active::after': {\n backgroundColor: 'ButtonText',\n },\n },\n },\n disabled: {\n '::after': {\n backgroundColor: tokens.colorNeutralForegroundDisabled,\n },\n },\n mediumHorizontal: {\n '::after': {\n bottom: '0',\n height: tokens.strokeWidthThicker,\n left: tokens.spacingHorizontalM,\n right: tokens.spacingHorizontalM,\n },\n },\n mediumVertical: {\n '::after': {\n bottom: tokens.spacingVerticalS,\n left: 0,\n top: tokens.spacingVerticalS,\n width: tokens.strokeWidthThicker,\n },\n },\n smallHorizontal: {\n '::after': {\n bottom: 0,\n height: tokens.strokeWidthThick,\n left: tokens.spacingHorizontalSNudge,\n right: tokens.spacingHorizontalSNudge,\n },\n },\n smallVertical: {\n '::after': {\n bottom: tokens.spacingVerticalXS,\n left: '0',\n top: tokens.spacingVerticalXS,\n width: tokens.strokeWidthThicker,\n },\n },\n});\n\n/**\n * Styles for the icon slot.\n */\nconst useIconStyles = makeStyles({\n base: {\n alignItems: 'center',\n display: 'inline-flex',\n justifyContent: 'center',\n ...shorthands.overflow('hidden'),\n },\n // per design, the small and medium font sizes are the same.\n // the size prop only affects spacing.\n small: {\n fontSize: '20px',\n height: '20px',\n width: '20px',\n },\n medium: {\n fontSize: '20px',\n height: '20px',\n width: '20px',\n },\n});\n\n/**\n * Styles for the content slot (children)\n */\nconst useContentStyles = makeStyles({\n base: {\n ...typographyStyles.body1,\n ...shorthands.overflow('hidden'),\n // content padding is the same for medium & small, horiztonal & vertical\n ...shorthands.padding(tokens.spacingVerticalNone, tokens.spacingHorizontalXXS),\n },\n selected: {\n ...typographyStyles.body1Strong,\n },\n});\n\n/**\n * Apply styling to the Tab slots based on the state\n */\nexport const useTabStyles_unstable = (state: TabState): TabState => {\n const rootStyles = useRootStyles();\n const focusStyles = useFocusStyles();\n const pendingIndicatorStyles = usePendingIndicatorStyles();\n const activeIndicatorStyles = useActiveIndicatorStyles();\n const iconStyles = useIconStyles();\n const contentStyles = useContentStyles();\n\n const { appearance, disabled, selected, size, vertical } = state;\n\n state.root.className = mergeClasses(\n tabClassNames.root,\n rootStyles.base,\n vertical ? rootStyles.vertical : rootStyles.horizontal,\n size !== 'small' && (vertical ? rootStyles.mediumVertical : rootStyles.mediumHorizontal),\n size === 'small' && (vertical ? rootStyles.smallVertical : rootStyles.smallHorizontal),\n focusStyles.base,\n !disabled && appearance === 'subtle' && rootStyles.subtle,\n !disabled && appearance === 'transparent' && rootStyles.transparent,\n !disabled && selected && rootStyles.selected,\n disabled && rootStyles.disabled,\n\n // pending indicator (before pseudo element)\n pendingIndicatorStyles.base,\n size !== 'small' && (vertical ? pendingIndicatorStyles.mediumVertical : pendingIndicatorStyles.mediumHorizontal),\n size === 'small' && (vertical ? pendingIndicatorStyles.smallVertical : pendingIndicatorStyles.smallHorizontal),\n disabled && pendingIndicatorStyles.disabled,\n\n // active indicator (after pseudo element)\n selected && activeIndicatorStyles.base,\n selected && !disabled && activeIndicatorStyles.selected,\n selected &&\n size !== 'small' &&\n (vertical ? activeIndicatorStyles.mediumVertical : activeIndicatorStyles.mediumHorizontal),\n selected &&\n size === 'small' &&\n (vertical ? activeIndicatorStyles.smallVertical : activeIndicatorStyles.smallHorizontal),\n selected && disabled && activeIndicatorStyles.disabled,\n state.root.className,\n );\n\n if (state.icon) {\n state.icon.className = mergeClasses(tabClassNames.icon, iconStyles.base, iconStyles[size], state.icon.className);\n }\n\n state.content.className = mergeClasses(\n tabClassNames.content,\n contentStyles.base,\n selected && contentStyles.selected,\n state.content.className,\n );\n\n useTabAnimatedIndicatorStyles_unstable(state);\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
|
1
|
+
{"version":3,"sources":["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\n/**\n * Styles for the root slot\n */\n/* eslint-disable @typescript-eslint/naming-convention */\nconst useRootStyles = makeStyles({\n base: {\n alignItems: 'center',\n ...shorthands.borderColor('none'),\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n ...shorthands.borderWidth(0),\n cursor: 'pointer',\n display: 'grid',\n flexShrink: 0,\n gridAutoFlow: 'column',\n gridTemplateColumns: 'auto',\n gridTemplateRows: 'auto',\n fontFamily: tokens.fontFamilyBase,\n lineHeight: tokens.lineHeightBase300,\n outlineStyle: 'none',\n position: 'relative',\n ...shorthands.overflow('hidden'),\n textTransform: 'none',\n },\n horizontal: {\n justifyContent: 'center',\n },\n vertical: {\n justifyContent: 'start',\n },\n mediumHorizontal: {\n columnGap: tokens.spacingHorizontalSNudge,\n ...shorthands.padding(tokens.spacingVerticalM, tokens.spacingHorizontalMNudge),\n },\n mediumVertical: {\n // horizontal spacing is deliberate. This is the gap between icon and content.\n columnGap: tokens.spacingHorizontalSNudge,\n ...shorthands.padding(tokens.spacingVerticalSNudge, tokens.spacingHorizontalMNudge),\n },\n smallHorizontal: {\n columnGap: tokens.spacingHorizontalXXS,\n ...shorthands.padding(tokens.spacingVerticalSNudge, tokens.spacingHorizontalSNudge),\n },\n smallVertical: {\n // horizontal spacing is deliberate. This is the gap between icon and content.\n columnGap: tokens.spacingHorizontalXXS,\n ...shorthands.padding(tokens.spacingVerticalXXS, tokens.spacingHorizontalSNudge),\n },\n transparent: {\n backgroundColor: tokens.colorTransparentBackground,\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n },\n ':active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n },\n '& .fui-Tab__icon': {\n color: tokens.colorNeutralForeground2,\n },\n ':hover .fui-Tab__icon': {\n color: tokens.colorNeutralForeground2Hover,\n },\n ':active .fui-Tab__icon': {\n color: tokens.colorNeutralForeground2Pressed,\n },\n '& .fui-Tab__content': {\n color: tokens.colorNeutralForeground2,\n },\n ':hover .fui-Tab__content': {\n color: tokens.colorNeutralForeground2Hover,\n },\n ':active .fui-Tab__content': {\n color: tokens.colorNeutralForeground2Pressed,\n },\n },\n subtle: {\n backgroundColor: tokens.colorSubtleBackground,\n ':hover': {\n backgroundColor: tokens.colorSubtleBackgroundHover,\n },\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n },\n '& .fui-Tab__icon': {\n color: tokens.colorNeutralForeground2,\n },\n ':hover .fui-Tab__icon': {\n color: tokens.colorNeutralForeground2Hover,\n },\n ':active .fui-Tab__icon': {\n color: tokens.colorNeutralForeground2Pressed,\n },\n '& .fui-Tab__content': {\n color: tokens.colorNeutralForeground2,\n },\n ':hover .fui-Tab__content': {\n color: tokens.colorNeutralForeground2Hover,\n },\n ':active .fui-Tab__content': {\n color: tokens.colorNeutralForeground2Pressed,\n },\n },\n disabled: {\n backgroundColor: tokens.colorTransparentBackground,\n\n '& .fui-Tab__icon': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n '& .fui-Tab__content': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n cursor: 'not-allowed',\n },\n selected: {\n '& .fui-Tab__icon': {\n color: tokens.colorCompoundBrandForeground1,\n },\n ':hover .fui-Tab__icon': {\n color: tokens.colorCompoundBrandForeground1Hover,\n },\n ':active .fui-Tab__icon': {\n color: tokens.colorCompoundBrandForeground1Pressed,\n },\n '& .fui-Tab__content': {\n color: tokens.colorNeutralForeground1,\n },\n ':hover .fui-Tab__content': {\n color: tokens.colorNeutralForeground1Hover,\n },\n ':active .fui-Tab__content': {\n color: tokens.colorNeutralForeground1Pressed,\n },\n },\n});\n/* eslint-enable @typescript-eslint/naming-convention */\n\n/**\n * Focus styles for the root slot\n */\nconst useFocusStyles = makeStyles({\n // Tab creates a custom focus indicator because the default focus indicator\n // is applied using an ::after pseudo-element on the root. Since the selection\n // indicator uses an ::after pseudo-element on the root, there is a conflict.\n base: createCustomFocusIndicatorStyle({\n ...shorthands.borderColor('transparent'),\n outlineWidth: tokens.strokeWidthThick,\n outlineColor: 'transparent',\n outlineStyle: 'solid',\n boxShadow: `\n ${tokens.shadow4},\n 0 0 0 ${tokens.strokeWidthThick} ${tokens.colorStrokeFocus2}\n `,\n zIndex: 1,\n }),\n});\n\n/** Indicator styles for when pending selection */\nconst usePendingIndicatorStyles = makeStyles({\n base: {\n ':hover::before': {\n backgroundColor: tokens.colorNeutralStroke1Hover,\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n content: '\"\"',\n position: 'absolute',\n },\n ':active::before': {\n backgroundColor: tokens.colorNeutralStroke1Pressed,\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n content: '\"\"',\n position: 'absolute',\n },\n '@media (forced-colors: active)': {\n ':hover::before': {\n backgroundColor: 'Highlight',\n },\n ':active::before': {\n backgroundColor: 'Highlight',\n },\n },\n },\n disabled: {\n ':hover::before': {\n backgroundColor: tokens.colorTransparentStroke,\n },\n ':active::before': {\n backgroundColor: tokens.colorTransparentStroke,\n },\n },\n mediumHorizontal: {\n '::before': {\n bottom: 0,\n height: tokens.strokeWidthThicker,\n left: tokens.spacingHorizontalM,\n right: tokens.spacingHorizontalM,\n },\n },\n mediumVertical: {\n '::before': {\n bottom: tokens.spacingVerticalS,\n left: 0,\n top: tokens.spacingVerticalS,\n width: tokens.strokeWidthThicker,\n },\n },\n smallHorizontal: {\n '::before': {\n bottom: 0,\n height: tokens.strokeWidthThick,\n left: tokens.spacingHorizontalSNudge,\n right: tokens.spacingHorizontalSNudge,\n },\n },\n smallVertical: {\n '::before': {\n bottom: tokens.spacingVerticalXS,\n left: 0,\n top: tokens.spacingVerticalXS,\n width: tokens.strokeWidthThicker,\n },\n },\n});\n\nconst useActiveIndicatorStyles = makeStyles({\n base: {\n '::after': {\n backgroundColor: tokens.colorTransparentStroke,\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n content: '\"\"',\n position: 'absolute',\n zIndex: 1,\n },\n },\n selected: {\n '::after': {\n backgroundColor: tokens.colorCompoundBrandStroke,\n },\n ':hover::after': {\n backgroundColor: tokens.colorCompoundBrandStrokeHover,\n },\n ':active::after': {\n backgroundColor: tokens.colorCompoundBrandStrokePressed,\n },\n '@media (forced-colors: active)': {\n '::after': {\n backgroundColor: 'ButtonText',\n },\n ':hover::after': {\n backgroundColor: 'ButtonText',\n },\n ':active::after': {\n backgroundColor: 'ButtonText',\n },\n },\n },\n disabled: {\n '::after': {\n backgroundColor: tokens.colorNeutralForegroundDisabled,\n },\n },\n mediumHorizontal: {\n '::after': {\n bottom: '0',\n height: tokens.strokeWidthThicker,\n left: tokens.spacingHorizontalM,\n right: tokens.spacingHorizontalM,\n },\n },\n mediumVertical: {\n '::after': {\n bottom: tokens.spacingVerticalS,\n left: 0,\n top: tokens.spacingVerticalS,\n width: tokens.strokeWidthThicker,\n },\n },\n smallHorizontal: {\n '::after': {\n bottom: 0,\n height: tokens.strokeWidthThick,\n left: tokens.spacingHorizontalSNudge,\n right: tokens.spacingHorizontalSNudge,\n },\n },\n smallVertical: {\n '::after': {\n bottom: tokens.spacingVerticalXS,\n left: '0',\n top: tokens.spacingVerticalXS,\n width: tokens.strokeWidthThicker,\n },\n },\n});\n\n/**\n * Styles for the icon slot.\n */\nconst useIconStyles = makeStyles({\n base: {\n alignItems: 'center',\n display: 'inline-flex',\n justifyContent: 'center',\n ...shorthands.overflow('hidden'),\n },\n // per design, the small and medium font sizes are the same.\n // the size prop only affects spacing.\n small: {\n fontSize: '20px',\n height: '20px',\n width: '20px',\n },\n medium: {\n fontSize: '20px',\n height: '20px',\n width: '20px',\n },\n});\n\n/**\n * Styles for the content slot (children)\n */\nconst useContentStyles = makeStyles({\n base: {\n ...typographyStyles.body1,\n ...shorthands.overflow('hidden'),\n // content padding is the same for medium & small, horiztonal & vertical\n ...shorthands.padding(tokens.spacingVerticalNone, tokens.spacingHorizontalXXS),\n },\n selected: {\n ...typographyStyles.body1Strong,\n },\n});\n\n/**\n * Apply styling to the Tab slots based on the state\n */\nexport const useTabStyles_unstable = (state: TabState): TabState => {\n const rootStyles = useRootStyles();\n const focusStyles = useFocusStyles();\n const pendingIndicatorStyles = usePendingIndicatorStyles();\n const activeIndicatorStyles = useActiveIndicatorStyles();\n const iconStyles = useIconStyles();\n const contentStyles = useContentStyles();\n\n const { appearance, disabled, selected, size, vertical } = state;\n\n state.root.className = mergeClasses(\n tabClassNames.root,\n rootStyles.base,\n vertical ? rootStyles.vertical : rootStyles.horizontal,\n size !== 'small' && (vertical ? rootStyles.mediumVertical : rootStyles.mediumHorizontal),\n size === 'small' && (vertical ? rootStyles.smallVertical : rootStyles.smallHorizontal),\n focusStyles.base,\n !disabled && appearance === 'subtle' && rootStyles.subtle,\n !disabled && appearance === 'transparent' && rootStyles.transparent,\n !disabled && selected && rootStyles.selected,\n disabled && rootStyles.disabled,\n\n // pending indicator (before pseudo element)\n pendingIndicatorStyles.base,\n size !== 'small' && (vertical ? pendingIndicatorStyles.mediumVertical : pendingIndicatorStyles.mediumHorizontal),\n size === 'small' && (vertical ? pendingIndicatorStyles.smallVertical : pendingIndicatorStyles.smallHorizontal),\n disabled && pendingIndicatorStyles.disabled,\n\n // active indicator (after pseudo element)\n selected && activeIndicatorStyles.base,\n selected && !disabled && activeIndicatorStyles.selected,\n selected &&\n size !== 'small' &&\n (vertical ? activeIndicatorStyles.mediumVertical : activeIndicatorStyles.mediumHorizontal),\n selected &&\n size === 'small' &&\n (vertical ? activeIndicatorStyles.smallVertical : activeIndicatorStyles.smallHorizontal),\n selected && disabled && activeIndicatorStyles.disabled,\n state.root.className,\n );\n\n if (state.icon) {\n state.icon.className = mergeClasses(tabClassNames.icon, iconStyles.base, iconStyles[size], state.icon.className);\n }\n\n state.content.className = mergeClasses(\n tabClassNames.content,\n contentStyles.base,\n selected && contentStyles.selected,\n state.content.className,\n );\n\n useTabAnimatedIndicatorStyles_unstable(state);\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/TabList/TabList.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,YAAA,gBAAA,OAAA,CAAA,cAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,iBAAA,CAAA;;AACA,MAAA,kBAAA,gBAAA,OAAA,CAAA,oBAAA,CAAA;;AAGA,MAAA,yBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAEA;;AAEG;;;AACU,OAAA,CAAA,OAAA,gBAA6C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACxF,MAAM,KAAK,GAAG,YAAA,CAAA,mBAAA,CAAoB,KAApB,EAA2B,GAA3B,CAAd;EACA,MAAM,aAAa,GAAG,yBAAA,CAAA,uBAAA,CAAwB,KAAxB,CAAtB;EAEA,kBAAA,CAAA,yBAAA,CAA0B,KAA1B;EACA,OAAO,eAAA,CAAA,sBAAA,CAAuB,KAAvB,EAA8B,aAA9B,CAAP;AACD,CANyD,CAA7C;AAQb,OAAA,CAAA,OAAA,CAAQ,WAAR,GAAsB,SAAtB","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 } from './useTabListContextValues';\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(state);\n\n useTabListStyles_unstable(state);\n return renderTabList_unstable(state, contextValues);\n});\n\nTabList.displayName = 'TabList';\n"],"sourceRoot":"../src/"}
|
|
1
|
+
{"version":3,"sources":["packages/react-components/react-tabs/src/components/TabList/TabList.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,YAAA,gBAAA,OAAA,CAAA,cAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,iBAAA,CAAA;;AACA,MAAA,kBAAA,gBAAA,OAAA,CAAA,oBAAA,CAAA;;AAGA,MAAA,yBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAEA;;AAEG;;;AACU,OAAA,CAAA,OAAA,gBAA6C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACxF,MAAM,KAAK,GAAG,YAAA,CAAA,mBAAA,CAAoB,KAApB,EAA2B,GAA3B,CAAd;EACA,MAAM,aAAa,GAAG,yBAAA,CAAA,uBAAA,CAAwB,KAAxB,CAAtB;EAEA,kBAAA,CAAA,yBAAA,CAA0B,KAA1B;EACA,OAAO,eAAA,CAAA,sBAAA,CAAuB,KAAvB,EAA8B,aAA9B,CAAP;AACD,CANyD,CAA7C;AAQb,OAAA,CAAA,OAAA,CAAQ,WAAR,GAAsB,SAAtB","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 } from './useTabListContextValues';\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(state);\n\n useTabListStyles_unstable(state);\n return renderTabList_unstable(state, contextValues);\n});\n\nTabList.displayName = 'TabList';\n"],"sourceRoot":"../src/"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/TabList/TabListContext.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,wBAAA,gBAAA,OAAA,CAAA,kCAAA,CAAA,C,CAIA;;;AACa,OAAA,CAAA,cAAA,gBAA+C,wBAAA,CAAA,aAAA,CAAmC;EAC7F,UAAU,EAAE,aADiF;EAE7F,QAAQ,EAAE,KAFmF;EAG7F,aAAa,EAAE,SAH8E;EAI7F,UAAU,EAAE,MAAK;IACf;EACD,CAN4F;EAO7F,YAAY,EAAE,MAAK;IACjB;EACD,CAT4F;EAU7F,QAAQ,EAAE,MAAK;IACb;EACD,CAZ4F;EAa7F,iBAAiB,EAAE,MAAK;IACtB,OAAO;MACL,cAAc,EAAE;IADX,CAAP;EAGD,CAjB4F;EAkB7F,IAAI,EAAE,QAlBuF;EAmB7F,QAAQ,EAAE;AAnBmF,CAAnC,CAA/C","sourcesContent":["import { createContext } from '@fluentui/react-context-selector';\nimport type { Context } from '@fluentui/react-context-selector';\nimport { TabListContextValue } from './TabList.types';\n\n// eslint-disable-next-line @fluentui/no-context-default-value\nexport const TabListContext: Context<TabListContextValue> = createContext<TabListContextValue>({\n appearance: 'transparent',\n disabled: false,\n selectedValue: undefined,\n onRegister: () => {\n /* noop */\n },\n onUnregister: () => {\n /* noop */\n },\n onSelect: () => {\n /* noop */\n },\n getRegisteredTabs: () => {\n return {\n registeredTabs: {},\n };\n },\n size: 'medium',\n vertical: false,\n});\n"],"sourceRoot":"../src/"}
|
|
1
|
+
{"version":3,"sources":["packages/react-components/react-tabs/src/components/TabList/TabListContext.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,wBAAA,gBAAA,OAAA,CAAA,kCAAA,CAAA,C,CAIA;;;AACa,OAAA,CAAA,cAAA,gBAA+C,wBAAA,CAAA,aAAA,CAAmC;EAC7F,UAAU,EAAE,aADiF;EAE7F,QAAQ,EAAE,KAFmF;EAG7F,aAAa,EAAE,SAH8E;EAI7F,UAAU,EAAE,MAAK;IACf;EACD,CAN4F;EAO7F,YAAY,EAAE,MAAK;IACjB;EACD,CAT4F;EAU7F,QAAQ,EAAE,MAAK;IACb;EACD,CAZ4F;EAa7F,iBAAiB,EAAE,MAAK;IACtB,OAAO;MACL,cAAc,EAAE;IADX,CAAP;EAGD,CAjB4F;EAkB7F,IAAI,EAAE,QAlBuF;EAmB7F,QAAQ,EAAE;AAnBmF,CAAnC,CAA/C","sourcesContent":["import { createContext } from '@fluentui/react-context-selector';\nimport type { Context } from '@fluentui/react-context-selector';\nimport { TabListContextValue } from './TabList.types';\n\n// eslint-disable-next-line @fluentui/no-context-default-value\nexport const TabListContext: Context<TabListContextValue> = createContext<TabListContextValue>({\n appearance: 'transparent',\n disabled: false,\n selectedValue: undefined,\n onRegister: () => {\n /* noop */\n },\n onUnregister: () => {\n /* noop */\n },\n onSelect: () => {\n /* noop */\n },\n getRegisteredTabs: () => {\n return {\n registeredTabs: {},\n };\n },\n size: 'medium',\n vertical: false,\n});\n"],"sourceRoot":"../src/"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/TabList/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,WAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,cAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,oBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './TabList';\nexport * from './TabList.types';\nexport * from './renderTabList';\nexport * from './useTabList';\nexport * from './useTabListStyles';\n"],"sourceRoot":"../src/"}
|
|
1
|
+
{"version":3,"sources":["packages/react-components/react-tabs/src/components/TabList/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,WAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,cAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,oBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './TabList';\nexport * from './TabList.types';\nexport * from './renderTabList';\nexport * from './useTabList';\nexport * from './useTabListStyles';\n"],"sourceRoot":"../src/"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/TabList/renderTabList.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAEA,MAAA,gBAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;AAEA;;AAEG;;;AACI,MAAM,sBAAsB,GAAG,CAAC,KAAD,EAAsB,aAAtB,KAA6D;EACjG,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAAuB,KAAvB,CAA7B;EAEA,OACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACE,KAAA,CAAA,aAAA,CAAC,gBAAA,CAAA,cAAA,CAAe,QAAhB,EAAwB;IAAC,KAAK,EAAE,aAAa,CAAC;EAAtB,CAAxB,EAAwD,KAAK,CAAC,IAAN,CAAW,QAAnE,CADF,CADF;AAKD,CARM;;AAAM,OAAA,CAAA,sBAAA,GAAsB,sBAAtB","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { TabListState, TabListSlots, TabListContextValues } from './TabList.types';\nimport { TabListContext } 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 <TabListContext.Provider value={contextValues.tabList}>{state.root.children}</TabListContext.Provider>\n </slots.root>\n );\n};\n"],"sourceRoot":"../src/"}
|
|
1
|
+
{"version":3,"sources":["packages/react-components/react-tabs/src/components/TabList/renderTabList.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAEA,MAAA,gBAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;AAEA;;AAEG;;;AACI,MAAM,sBAAsB,GAAG,CAAC,KAAD,EAAsB,aAAtB,KAA6D;EACjG,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAAuB,KAAvB,CAA7B;EAEA,OACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACE,KAAA,CAAA,aAAA,CAAC,gBAAA,CAAA,cAAA,CAAe,QAAhB,EAAwB;IAAC,KAAK,EAAE,aAAa,CAAC;EAAtB,CAAxB,EAAwD,KAAK,CAAC,IAAN,CAAW,QAAnE,CADF,CADF;AAKD,CARM;;AAAM,OAAA,CAAA,sBAAA,GAAsB,sBAAtB","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { TabListState, TabListSlots, TabListContextValues } from './TabList.types';\nimport { TabListContext } 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 <TabListContext.Provider value={contextValues.tabList}>{state.root.children}</TabListContext.Provider>\n </slots.root>\n );\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/TabList/useTabList.ts"],"names":[],"mappings":"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","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 { appearance = 'transparent', disabled = false, onTabSelect, size = 'medium', vertical = false } = 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 disabled,\n selectedValue,\n size,\n vertical,\n onRegister,\n onUnregister,\n onSelect,\n getRegisteredTabs,\n };\n};\n"],"sourceRoot":"../src/"}
|
|
1
|
+
{"version":3,"sources":["packages/react-components/react-tabs/src/components/TabList/useTabList.ts"],"names":[],"mappings":"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","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 { appearance = 'transparent', disabled = false, onTabSelect, size = 'medium', vertical = false } = 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 disabled,\n selectedValue,\n size,\n vertical,\n onRegister,\n onUnregister,\n onSelect,\n getRegisteredTabs,\n };\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/TabList/useTabListContextValues.tsx"],"names":[],"mappings":";;;;;;;AAEA,SAAgB,uBAAhB,CAAwC,KAAxC,EAA2D;EACzD,MAAM;IACJ,UADI;IAEJ,QAFI;IAGJ,aAAa,EAAE,WAHX;IAIJ,UAJI;IAKJ,YALI;IAMJ,QANI;IAOJ,iBAPI;IAQJ,IARI;IASJ;EATI,IAUF,KAVJ;EAYA,MAAM,OAAO,GAAwB;IACnC,UADmC;IAEnC,QAFmC;IAGnC,aAAa,EAAE,WAHoB;IAInC,QAJmC;IAKnC,UALmC;IAMnC,YANmC;IAOnC,iBAPmC;IAQnC,IARmC;IASnC;EATmC,CAArC;EAYA,OAAO;IAAE;EAAF,CAAP;AACD;;AA1BD,OAAA,CAAA,uBAAA,GAAA,uBAAA","sourcesContent":["import { TabListContextValue, TabListContextValues, TabListState } from './TabList.types';\n\nexport function useTabListContextValues(state: TabListState): TabListContextValues {\n const {\n appearance,\n disabled,\n selectedValue: selectedKey,\n onRegister,\n onUnregister,\n onSelect,\n getRegisteredTabs,\n size,\n vertical,\n } = state;\n\n const tabList: TabListContextValue = {\n appearance,\n disabled,\n selectedValue: selectedKey,\n onSelect,\n onRegister,\n onUnregister,\n getRegisteredTabs,\n size,\n vertical,\n };\n\n return { tabList };\n}\n"],"sourceRoot":"../src/"}
|
|
1
|
+
{"version":3,"sources":["packages/react-components/react-tabs/src/components/TabList/useTabListContextValues.tsx"],"names":[],"mappings":";;;;;;;AAEA,SAAgB,uBAAhB,CAAwC,KAAxC,EAA2D;EACzD,MAAM;IACJ,UADI;IAEJ,QAFI;IAGJ,aAAa,EAAE,WAHX;IAIJ,UAJI;IAKJ,YALI;IAMJ,QANI;IAOJ,iBAPI;IAQJ,IARI;IASJ;EATI,IAUF,KAVJ;EAYA,MAAM,OAAO,GAAwB;IACnC,UADmC;IAEnC,QAFmC;IAGnC,aAAa,EAAE,WAHoB;IAInC,QAJmC;IAKnC,UALmC;IAMnC,YANmC;IAOnC,iBAPmC;IAQnC,IARmC;IASnC;EATmC,CAArC;EAYA,OAAO;IAAE;EAAF,CAAP;AACD;;AA1BD,OAAA,CAAA,uBAAA,GAAA,uBAAA","sourcesContent":["import { TabListContextValue, TabListContextValues, TabListState } from './TabList.types';\n\nexport function useTabListContextValues(state: TabListState): TabListContextValues {\n const {\n appearance,\n disabled,\n selectedValue: selectedKey,\n onRegister,\n onUnregister,\n onSelect,\n getRegisteredTabs,\n size,\n vertical,\n } = state;\n\n const tabList: TabListContextValue = {\n appearance,\n disabled,\n selectedValue: selectedKey,\n onSelect,\n onRegister,\n onUnregister,\n getRegisteredTabs,\n size,\n vertical,\n };\n\n return { tabList };\n}\n"],"sourceRoot":"../src/"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/TabList/useTabListStyles.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AAGa,OAAA,CAAA,iBAAA,GAAkD;EAC7D,IAAI,EAAE;AADuD,CAAlD;AAIb;;AAEG;;AACH,MAAM,SAAS,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;AAkBA;;AAEG;;;AACI,MAAM,yBAAyB,GAAI,KAAD,IAAsC;EAC7E,MAAM;IAAE;EAAF,IAAe,KAArB;EAEA,MAAM,MAAM,GAAG,SAAS,EAAxB;EAEA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,OAAA,CAAA,iBAAA,CAAkB,IADG,EAErB,MAAM,CAAC,IAFc,EAGrB,QAAQ,GAAG,MAAM,CAAC,QAAV,GAAqB,MAAM,CAAC,UAHf,EAIrB,KAAK,CAAC,IAAN,CAAW,SAJU,CAAvB;EAOA,OAAO,KAAP;AACD,CAbM;;AAAM,OAAA,CAAA,yBAAA,GAAyB,yBAAzB","sourcesContent":["import { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { TabListSlots, TabListState } from './TabList.types';\n\nexport const tabListClassNames: SlotClassNames<TabListSlots> = {\n root: 'fui-TabList',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'row',\n flexShrink: 0,\n flexWrap: 'nowrap',\n position: 'relative',\n },\n horizontal: {\n alignItems: 'stretch',\n flexDirection: 'row',\n },\n vertical: {\n alignItems: 'stretch',\n flexDirection: 'column',\n },\n});\n\n/**\n * Apply styling to the TabList slots based on the state\n */\nexport const useTabListStyles_unstable = (state: TabListState): TabListState => {\n const { vertical } = state;\n\n const styles = useStyles();\n\n state.root.className = mergeClasses(\n tabListClassNames.root,\n styles.root,\n vertical ? styles.vertical : styles.horizontal,\n state.root.className,\n );\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
|
1
|
+
{"version":3,"sources":["packages/react-components/react-tabs/src/components/TabList/useTabListStyles.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AAGa,OAAA,CAAA,iBAAA,GAAkD;EAC7D,IAAI,EAAE;AADuD,CAAlD;AAIb;;AAEG;;AACH,MAAM,SAAS,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;AAkBA;;AAEG;;;AACI,MAAM,yBAAyB,GAAI,KAAD,IAAsC;EAC7E,MAAM;IAAE;EAAF,IAAe,KAArB;EAEA,MAAM,MAAM,GAAG,SAAS,EAAxB;EAEA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,OAAA,CAAA,iBAAA,CAAkB,IADG,EAErB,MAAM,CAAC,IAFc,EAGrB,QAAQ,GAAG,MAAM,CAAC,QAAV,GAAqB,MAAM,CAAC,UAHf,EAIrB,KAAK,CAAC,IAAN,CAAW,SAJU,CAAvB;EAOA,OAAO,KAAP;AACD,CAbM;;AAAM,OAAA,CAAA,yBAAA,GAAyB,yBAAzB","sourcesContent":["import { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { TabListSlots, TabListState } from './TabList.types';\n\nexport const tabListClassNames: SlotClassNames<TabListSlots> = {\n root: 'fui-TabList',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'row',\n flexShrink: 0,\n flexWrap: 'nowrap',\n position: 'relative',\n },\n horizontal: {\n alignItems: 'stretch',\n flexDirection: 'row',\n },\n vertical: {\n alignItems: 'stretch',\n flexDirection: 'column',\n },\n});\n\n/**\n * Apply styling to the TabList slots based on the state\n */\nexport const useTabListStyles_unstable = (state: TabListState): TabListState => {\n const { vertical } = state;\n\n const styles = useStyles();\n\n state.root.className = mergeClasses(\n tabListClassNames.root,\n styles.root,\n vertical ? styles.vertical : styles.horizontal,\n state.root.className,\n );\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;AACA,IAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,oBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,KAAA,CAAA,kBAAA;EAAkB;AAAlB,CAAA;AAAoB,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,KAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,KAAA,CAAA,GAAA;EAAG;AAAH,CAAA;AAAK,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,eAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,KAAA,CAAA,aAAA;EAAa;AAAb,CAAA;AAAe,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,uBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,KAAA,CAAA,qBAAA;EAAqB;AAArB,CAAA;AAAuB,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,iBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,KAAA,CAAA,eAAA;EAAe;AAAf,CAAA;;AAaxE,IAAA,SAAA,gBAAA,OAAA,CAAA,WAAA,CAAA;;AACE,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,wBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,SAAA,CAAA,sBAAA;EAAsB;AAAtB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,SAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,SAAA,CAAA,OAAA;EAAO;AAAP,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,mBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,SAAA,CAAA,iBAAA;EAAiB;AAAjB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,2BAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,SAAA,CAAA,yBAAA;EAAyB;AAAzB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,qBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,SAAA,CAAA,mBAAA;EAAmB;AAAnB,CAAA","sourcesContent":["export type { TabProps, TabSlots, TabState, TabValue } from './Tab';\nexport { renderTab_unstable, Tab, tabClassNames, useTabStyles_unstable, useTab_unstable } from './Tab';\nexport type {\n TabRegisterData,\n RegisterTabEventHandler,\n SelectTabData,\n SelectTabEvent,\n SelectTabEventHandler,\n TabListContextValue,\n TabListContextValues,\n TabListProps,\n TabListSlots,\n TabListState,\n} from './TabList';\nexport {\n renderTabList_unstable,\n TabList,\n tabListClassNames,\n useTabListStyles_unstable,\n useTabList_unstable,\n} from './TabList';\n"],"sourceRoot":"../src/"}
|
|
1
|
+
{"version":3,"sources":["packages/react-components/react-tabs/src/index.ts"],"names":[],"mappings":";;;;;;;AACA,IAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,oBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,KAAA,CAAA,kBAAA;EAAkB;AAAlB,CAAA;AAAoB,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,KAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,KAAA,CAAA,GAAA;EAAG;AAAH,CAAA;AAAK,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,eAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,KAAA,CAAA,aAAA;EAAa;AAAb,CAAA;AAAe,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,uBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,KAAA,CAAA,qBAAA;EAAqB;AAArB,CAAA;AAAuB,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,iBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,KAAA,CAAA,eAAA;EAAe;AAAf,CAAA;;AAaxE,IAAA,SAAA,gBAAA,OAAA,CAAA,WAAA,CAAA;;AACE,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,wBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,SAAA,CAAA,sBAAA;EAAsB;AAAtB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,SAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,SAAA,CAAA,OAAA;EAAO;AAAP,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,mBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,SAAA,CAAA,iBAAA;EAAiB;AAAjB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,2BAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,SAAA,CAAA,yBAAA;EAAyB;AAAzB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,qBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,SAAA,CAAA,mBAAA;EAAmB;AAAnB,CAAA","sourcesContent":["export type { TabProps, TabSlots, TabState, TabValue } from './Tab';\nexport { renderTab_unstable, Tab, tabClassNames, useTabStyles_unstable, useTab_unstable } from './Tab';\nexport type {\n TabRegisterData,\n RegisterTabEventHandler,\n SelectTabData,\n SelectTabEvent,\n SelectTabEventHandler,\n TabListContextValue,\n TabListContextValues,\n TabListProps,\n TabListSlots,\n TabListState,\n} from './TabList';\nexport {\n renderTabList_unstable,\n TabList,\n tabListClassNames,\n useTabListStyles_unstable,\n useTabList_unstable,\n} from './TabList';\n"],"sourceRoot":"../src/"}
|
package/package.json
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-tabs",
|
|
3
|
-
"version": "9.0.
|
|
3
|
+
"version": "9.0.10",
|
|
4
4
|
"description": "Fluent UI React tabs components",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
7
|
-
"typings": "dist/index.d.ts",
|
|
7
|
+
"typings": "./dist/index.d.ts",
|
|
8
8
|
"sideEffects": false,
|
|
9
9
|
"repository": {
|
|
10
10
|
"type": "git",
|
|
@@ -19,30 +19,29 @@
|
|
|
19
19
|
"lint": "just-scripts lint",
|
|
20
20
|
"start": "yarn storybook",
|
|
21
21
|
"test": "jest --passWithNoTests",
|
|
22
|
-
"docs": "api-extractor run --config=config/api-extractor.local.json --local",
|
|
23
|
-
"build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../../scripts/typescript/normalize-import --output ./dist/types/packages/react-components/react-tabs/src && yarn docs",
|
|
24
22
|
"storybook": "start-storybook",
|
|
25
|
-
"type-check": "tsc -b tsconfig.json"
|
|
23
|
+
"type-check": "tsc -b tsconfig.json",
|
|
24
|
+
"generate-api": "tsc -p ./tsconfig.lib.json --emitDeclarationOnly && just-scripts api-extractor"
|
|
26
25
|
},
|
|
27
26
|
"devDependencies": {
|
|
28
27
|
"@fluentui/eslint-plugin": "*",
|
|
29
28
|
"@fluentui/react-conformance": "*",
|
|
30
|
-
"@fluentui/react-conformance-griffel": "9.0.0-beta.
|
|
29
|
+
"@fluentui/react-conformance-griffel": "9.0.0-beta.17",
|
|
31
30
|
"@fluentui/scripts": "^1.0.0"
|
|
32
31
|
},
|
|
33
32
|
"dependencies": {
|
|
34
|
-
"@fluentui/react-context-selector": "^9.0
|
|
35
|
-
"@fluentui/react-tabster": "^9.1
|
|
36
|
-
"@fluentui/react-theme": "^9.1.
|
|
37
|
-
"@fluentui/react-utilities": "^9.
|
|
38
|
-
"@griffel/react": "^1.4.
|
|
33
|
+
"@fluentui/react-context-selector": "^9.1.0",
|
|
34
|
+
"@fluentui/react-tabster": "^9.2.1",
|
|
35
|
+
"@fluentui/react-theme": "^9.1.1",
|
|
36
|
+
"@fluentui/react-utilities": "^9.2.0",
|
|
37
|
+
"@griffel/react": "^1.4.2",
|
|
39
38
|
"tslib": "^2.1.0"
|
|
40
39
|
},
|
|
41
40
|
"peerDependencies": {
|
|
42
|
-
"@types/react": ">=16.8.0 <
|
|
43
|
-
"@types/react-dom": ">=16.8.0 <
|
|
44
|
-
"react": ">=16.8.0 <
|
|
45
|
-
"react-dom": ">=16.8.0 <
|
|
41
|
+
"@types/react": ">=16.8.0 <19.0.0",
|
|
42
|
+
"@types/react-dom": ">=16.8.0 <19.0.0",
|
|
43
|
+
"react": ">=16.8.0 <19.0.0",
|
|
44
|
+
"react-dom": ">=16.8.0 <19.0.0",
|
|
46
45
|
"scheduler": "^0.19.0 || ^0.20.0"
|
|
47
46
|
},
|
|
48
47
|
"beachball": {
|
|
@@ -53,9 +52,10 @@
|
|
|
53
52
|
},
|
|
54
53
|
"exports": {
|
|
55
54
|
".": {
|
|
56
|
-
"types": "./
|
|
55
|
+
"types": "./dist/index.d.ts",
|
|
57
56
|
"import": "./lib/index.js",
|
|
58
57
|
"require": "./lib-commonjs/index.js"
|
|
59
|
-
}
|
|
58
|
+
},
|
|
59
|
+
"./package.json": "./package.json"
|
|
60
60
|
}
|
|
61
61
|
}
|
package/MIGRATION.md
DELETED
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
# Tab and TabList Migration
|
|
2
|
-
|
|
3
|
-
### Migration from v8
|
|
4
|
-
|
|
5
|
-
1. Replace occurrences of `<Pivot>` with `<TabList>`
|
|
6
|
-
2. Replace occurrences of `<PivotItem>` with `<Tab>`
|
|
7
|
-
3. Replace `<PivotItem>` content with handling onTabSelected to show/hide associated content.
|
|
8
|
-
4. Move PivotItem.headerText to be the content of Tab
|
|
9
|
-
5. Subscribe to onTabSelected to show/hide content when a tab is selected.
|
|
10
|
-
|
|
11
|
-
### Migration from v0
|
|
12
|
-
|
|
13
|
-
1. Replace use of `<Menu>` with `<TabList>`
|
|
14
|
-
2. Replace items data with Tab instances, writing a `map` function as needed.
|
package/Spec.md
DELETED
|
@@ -1,363 +0,0 @@
|
|
|
1
|
-
# @fluentui/react-tabs Spec
|
|
2
|
-
|
|
3
|
-
# Tabs
|
|
4
|
-
|
|
5
|
-
**GitHub Epic issue** - [Tabs/Pivot Convergence #20338](https://github.com/microsoft/fluentui/issues/20338)
|
|
6
|
-
**Figma** - [Tabs](https://www.figma.com/file/dK5AnDvvnSTWV9lduQWeDk/Tabs)
|
|
7
|
-
|
|
8
|
-
## Background
|
|
9
|
-
|
|
10
|
-
Tabs allow for navigation between two or more content views and relies on text headers to
|
|
11
|
-
articulate the different sections of content.
|
|
12
|
-
|
|
13
|
-
There are a few different components typically provided for tabs:
|
|
14
|
-
|
|
15
|
-
- Tab or tab header. This is the individual tab the user clicks to display content. It most often has text, an icon, or both.
|
|
16
|
-
- Tab list or tab strip. This is a container for tabs and provides single selection behavior.
|
|
17
|
-
- Tab panel. This is a container for the content to display when an associated tab is selected.
|
|
18
|
-
|
|
19
|
-
In some cases the tab list and tab panels are provided together in a "tabs" aggregate component. This is historically done to provide the manilla folder tab style where the tab list and tab panels are arranged next to each other.
|
|
20
|
-
|
|
21
|
-
## Prior Art - Open UI
|
|
22
|
-
|
|
23
|
-
Naming: The Open UI component naming matrix indicates Tabs is the most common and popular name for this component.
|
|
24
|
-
Only Fabric/Fluent UI v8 and earlier named it Pivot.
|
|
25
|
-
|
|
26
|
-
The [Tabs Research](https://open-ui.org/components/tabs.research) notes part naming and terminology are not
|
|
27
|
-
very consistent across libraries.
|
|
28
|
-
|
|
29
|
-
The API and implementations depend on how tabs are conceptualized and integrated with existing components.
|
|
30
|
-
For example, a set of tabs can be thought of as:
|
|
31
|
-
|
|
32
|
-
- a set styled buttons with radio selection behavior
|
|
33
|
-
- a menu list of menu items that toggle
|
|
34
|
-
- a command bar with radio buttons plus other commands and components
|
|
35
|
-
- a stack of components expected to render their state based on single/multi-select data.
|
|
36
|
-
|
|
37
|
-
Features common to most libraries:
|
|
38
|
-
|
|
39
|
-
- Grouping and consistent appearance across tabs within the same tab list
|
|
40
|
-
- Focus trap and keyboard commands for switching tabs
|
|
41
|
-
- Left/Right and Up/Down arrow keys when focus trapped
|
|
42
|
-
- Ctrl+Tab/Ctrl+Shift+Tab for cycling next/previous
|
|
43
|
-
- Text, an icon, or text with icon for tab content
|
|
44
|
-
- Horizontal or vertical layout
|
|
45
|
-
- LTR and RTL layout (i.e. ordering of tabs)
|
|
46
|
-
- Overflow or scrolling when tabs do not fit within available space
|
|
47
|
-
|
|
48
|
-
Features common to some libraries:
|
|
49
|
-
|
|
50
|
-
- Keyboard commands for individual tab focus navigation
|
|
51
|
-
- Tab/Shift+Tab to cycle focus through tabs
|
|
52
|
-
- Space bar to select currently focused tab
|
|
53
|
-
- Tab list containing both tabs and tab panels.
|
|
54
|
-
- Conditionally render or show/hide of tab panels based on current tab selection.
|
|
55
|
-
|
|
56
|
-
Advanced features supported by only a few libraries:
|
|
57
|
-
|
|
58
|
-
- Close/Hide individual tabs
|
|
59
|
-
- Tabs with drop-down content menus
|
|
60
|
-
- Reordering tabs, sometimes with drag-and-drop
|
|
61
|
-
- State indicators via badges
|
|
62
|
-
- Show or scroll to a specific tab (i.e. ensure visible and selected)
|
|
63
|
-
|
|
64
|
-
Given the ARIA standard roles of tablist and tab we can follow with TabList and Tab components.
|
|
65
|
-
|
|
66
|
-
## Prior Art - Comparison with v0 and v8
|
|
67
|
-
|
|
68
|
-
The existing components are:
|
|
69
|
-
|
|
70
|
-
- v0 - [Menu](https://fluentsite.z22.web.core.windows.net/0.59.0/components/menu/definition)
|
|
71
|
-
- v8 - [Pivot](https://developer.microsoft.com/en-us/fluentui#/controls/web/pivot)
|
|
72
|
-
|
|
73
|
-
### Approach
|
|
74
|
-
|
|
75
|
-
v0 Menu provides tabs, toolbars, menus, and breadcrumbs.
|
|
76
|
-
v0 Menu supports tabs interaction when accessibility={tabListBehavior}
|
|
77
|
-
|
|
78
|
-
v8 provides a separate Pivot component with tabs behavior and appearance customization.
|
|
79
|
-
|
|
80
|
-
### Appearances
|
|
81
|
-
|
|
82
|
-
#### **Pivot**
|
|
83
|
-
|
|
84
|
-
A 'Pivot' appears as a horizontal set of borderless buttons with an underline indicating current selection.
|
|
85
|
-
|
|
86
|
-
v0 and v8 provide a 'Pivot' appearance.
|
|
87
|
-
v0: underlined=true
|
|
88
|
-
v8: by default
|
|
89
|
-
|
|
90
|
-
#### **Block Tab**
|
|
91
|
-
|
|
92
|
-
A 'Block Tab' appears as a horizontal set of borderless buttons.
|
|
93
|
-
The selection has an active color, rectangular background.
|
|
94
|
-
|
|
95
|
-
Both v0 and v8 provide the 'Block Tab' appearance.
|
|
96
|
-
v0: by default
|
|
97
|
-
v8: linkFormat="tabs"
|
|
98
|
-
|
|
99
|
-
#### **Variations**
|
|
100
|
-
|
|
101
|
-
v0 supports decorating tabs with arrows pointing toward the associated content.
|
|
102
|
-
v0: pointing=true
|
|
103
|
-
|
|
104
|
-
v8 supports a large tab style with increased padding per tab.
|
|
105
|
-
v8: linkSize="large"
|
|
106
|
-
|
|
107
|
-
### Tab Item Content
|
|
108
|
-
|
|
109
|
-
Both v0 and v8 support text, icon, and text and icon as tab content.
|
|
110
|
-
v0 additionally supports menus as tab content.
|
|
111
|
-
|
|
112
|
-
Both v0 and v8 support custom rendering of tab content through a render props per item.
|
|
113
|
-
|
|
114
|
-
### Tab Panel
|
|
115
|
-
|
|
116
|
-
v0 does not provide a tab panel since it is implemented through the menu component.
|
|
117
|
-
v8 supports the tab panel as the children of PivotItem. The tab content is provided through the header property.
|
|
118
|
-
|
|
119
|
-
## Sample Code
|
|
120
|
-
|
|
121
|
-
### Default
|
|
122
|
-
|
|
123
|
-
By default tabs are arranged horizontally.
|
|
124
|
-
Content within the tab is arranged horizontally.
|
|
125
|
-
It is centered (horizontally and vertically).
|
|
126
|
-
The default appearance is transparent.
|
|
127
|
-
|
|
128
|
-
```tsx
|
|
129
|
-
<TabList>
|
|
130
|
-
<Tab value="tab1">One</Tab>
|
|
131
|
-
<Tab value="tab2">Two</Tab>
|
|
132
|
-
<Tab value="tab3">Three</Tab>
|
|
133
|
-
</TabList>
|
|
134
|
-
```
|
|
135
|
-
|
|
136
|
-
### Vertical
|
|
137
|
-
|
|
138
|
-
The vertical prop causes the tabs to be arranged vertically.
|
|
139
|
-
Content within the tab is still arranged horizontally and centered.
|
|
140
|
-
|
|
141
|
-
```tsx
|
|
142
|
-
<TabList vertical>
|
|
143
|
-
<Tab value="tab1">One</Tab>
|
|
144
|
-
<Tab value="tab2">Two</Tab>
|
|
145
|
-
<Tab value="tab3">Three</Tab>
|
|
146
|
-
</TabList>
|
|
147
|
-
```
|
|
148
|
-
|
|
149
|
-
### Vertical Tab content
|
|
150
|
-
|
|
151
|
-
The verticalTabContent prop causes the content within the tab to be arranged vertically.
|
|
152
|
-
The content is still centered.
|
|
153
|
-
If the icon prop is set, the rendered icon is part of the vertical tab content.
|
|
154
|
-
|
|
155
|
-
```tsx
|
|
156
|
-
<TabList verticalTabContent>
|
|
157
|
-
<Tab value="tab1">One</Tab>
|
|
158
|
-
<Tab value="tab2">Two</Tab>
|
|
159
|
-
<Tab value="tab3">Three</Tab>
|
|
160
|
-
</TabList>
|
|
161
|
-
|
|
162
|
-
<TabList vertical verticalTabContent>
|
|
163
|
-
<Tab value="tab1">One</Tab>
|
|
164
|
-
<Tab value="tab2">Two</Tab>
|
|
165
|
-
<Tab value="tab3">Three</Tab>
|
|
166
|
-
</TabList>
|
|
167
|
-
```
|
|
168
|
-
|
|
169
|
-
### Appearance
|
|
170
|
-
|
|
171
|
-
The default appearance is transparent.
|
|
172
|
-
Transparent has no border and background styles.
|
|
173
|
-
The selection indicator is a brand color line below the tab.
|
|
174
|
-
Hovering over a tab shows a gray line below the tab.
|
|
175
|
-
|
|
176
|
-
```tsx
|
|
177
|
-
<TabList>
|
|
178
|
-
{/* ... */}
|
|
179
|
-
</TabList>
|
|
180
|
-
|
|
181
|
-
<TabList appearance="transparent">
|
|
182
|
-
{/* ... */}
|
|
183
|
-
</TabList>
|
|
184
|
-
```
|
|
185
|
-
|
|
186
|
-
The subtle appearance is similar to transparent, but a light background is displayed when hovering over a tab.
|
|
187
|
-
|
|
188
|
-
```tsx
|
|
189
|
-
<TabList appearance="subtle">{/* ... */}</TabList>
|
|
190
|
-
```
|
|
191
|
-
|
|
192
|
-
### Size
|
|
193
|
-
|
|
194
|
-
Small and medium sizes are supported.
|
|
195
|
-
The size affects the padding and spacing between elements.
|
|
196
|
-
Size can also affect the default icon (and badge) size.
|
|
197
|
-
The default size is medium.
|
|
198
|
-
|
|
199
|
-
```tsx
|
|
200
|
-
<TabList size="small">
|
|
201
|
-
{/* ... */}
|
|
202
|
-
</TabList>
|
|
203
|
-
|
|
204
|
-
<TabList size="medium">
|
|
205
|
-
{/* ... */}
|
|
206
|
-
</TabList>
|
|
207
|
-
```
|
|
208
|
-
|
|
209
|
-
### With Icon
|
|
210
|
-
|
|
211
|
-
When the icon slot is filled, an icon is positioned before the tab content.
|
|
212
|
-
|
|
213
|
-
```tsx
|
|
214
|
-
<TabList>
|
|
215
|
-
<Tab icon={<CheckboxComposite />} value="allowed">
|
|
216
|
-
Allowed
|
|
217
|
-
</Tab>
|
|
218
|
-
<Tab icon={<BlockedSite />} value="blocked">
|
|
219
|
-
Blocked
|
|
220
|
-
</Tab>
|
|
221
|
-
</TabList>
|
|
222
|
-
```
|
|
223
|
-
|
|
224
|
-
An icon only tab is displayed when the icon slot is filled and tab content is omitted.
|
|
225
|
-
|
|
226
|
-
```tsx
|
|
227
|
-
<TabList>
|
|
228
|
-
<Tab icon={<CheckboxComposite />} value="allowed" />
|
|
229
|
-
<Tab icon={<BlockedSite />} value="blocked" />
|
|
230
|
-
</TabList>
|
|
231
|
-
```
|
|
232
|
-
|
|
233
|
-
## API
|
|
234
|
-
|
|
235
|
-
### Tab
|
|
236
|
-
|
|
237
|
-
See API at [Tab.types.ts](./src/components/Tab/Tab.types.ts).
|
|
238
|
-
|
|
239
|
-
Notes:
|
|
240
|
-
|
|
241
|
-
- `TabCommons.value` supports an arbitrary identifier value. This is similar to Accordion's selection approach.
|
|
242
|
-
- Each tab has an `icon` slot.
|
|
243
|
-
|
|
244
|
-
### TabList
|
|
245
|
-
|
|
246
|
-
See API at [TabList.types.ts](./src/components/TabList/TabList.types.ts).
|
|
247
|
-
|
|
248
|
-
Notes:
|
|
249
|
-
|
|
250
|
-
- The tab list only has the `root` slot.
|
|
251
|
-
- The tab list supports tab selection events that include the value of the tab selected.
|
|
252
|
-
- Tab list supports default and selected values for controlled and uncontrolled scenarios.
|
|
253
|
-
- The tab list communicates with tabs via context. This applies `appearance`, `size`, and `layout`.
|
|
254
|
-
- The tab can leverage the `selectedValue` and is expected to call `selectTab` when clicked.
|
|
255
|
-
- By adding these context properties to `TabProps` we could allow individual tabs to override these values. However the expectation is that the tabs within a tab list have a consistent layout and appearance.
|
|
256
|
-
|
|
257
|
-
## Structure
|
|
258
|
-
|
|
259
|
-
- _**Public**_
|
|
260
|
-
|
|
261
|
-
```tsx
|
|
262
|
-
<TabList>
|
|
263
|
-
<Tab>One</Tab>
|
|
264
|
-
<Tab>Two</Tab>
|
|
265
|
-
<Tab>Three</Tab>
|
|
266
|
-
</TabList>
|
|
267
|
-
```
|
|
268
|
-
|
|
269
|
-
- _**DOM**_
|
|
270
|
-
|
|
271
|
-
```html
|
|
272
|
-
<div role="tablist">
|
|
273
|
-
<div role="tab">One</div>
|
|
274
|
-
<div role="tab">Two</div>
|
|
275
|
-
<div role="tab">Three</div>
|
|
276
|
-
</div>
|
|
277
|
-
```
|
|
278
|
-
|
|
279
|
-
## Migration
|
|
280
|
-
|
|
281
|
-
See [MIGRATION.md](./MIGRATION.md).
|
|
282
|
-
|
|
283
|
-
## Behaviors
|
|
284
|
-
|
|
285
|
-
### Selection
|
|
286
|
-
|
|
287
|
-
TabList provides single selection of a tab.
|
|
288
|
-
|
|
289
|
-
#### **Programmatic**
|
|
290
|
-
|
|
291
|
-
The TabList.selectedKey can control the currently selected tab.
|
|
292
|
-
The onTabSelected event informs callers of a selection change.
|
|
293
|
-
The event data includes the tab value.
|
|
294
|
-
|
|
295
|
-
#### **Mouse/Touch**
|
|
296
|
-
|
|
297
|
-
Clicking the tab selects it.
|
|
298
|
-
|
|
299
|
-
#### **Keyboard**
|
|
300
|
-
|
|
301
|
-
The tab list will support the prescribed [ARIA keyboard interaction](https://www.w3.org/TR/wai-aria-practices-1.1/#keyboard-interaction-19).
|
|
302
|
-
|
|
303
|
-
A Tablist allows focus of individual tabs.
|
|
304
|
-
|
|
305
|
-
When the TabList has focus, the user can use arrow keys to move focus to the next or previous tab.
|
|
306
|
-
The keys are based on layout. Horizontal uses left/right arrows and vertical uses up/down arrows.
|
|
307
|
-
|
|
308
|
-
When the TabList has focus, the user can use the home/end keys to move focus to the first/last tab.
|
|
309
|
-
|
|
310
|
-
A tab is selected when the spacebar/enter key is pressed for a focused tab.
|
|
311
|
-
|
|
312
|
-
The `TAB` key moves focus out of the tabs.
|
|
313
|
-
|
|
314
|
-
## Accessibility
|
|
315
|
-
|
|
316
|
-
ARIA provides tab-specific roles:
|
|
317
|
-
|
|
318
|
-
- [tab](https://www.w3.org/TR/wai-aria-1.1/#tab): A grouping label providing a mechanism for selecting the tab content that is to be rendered to the user.
|
|
319
|
-
- [tablist](https://www.w3.org/TR/wai-aria-1.1/#tablist): A list of tab elements, which are references to tabpanel elements.
|
|
320
|
-
- [tabpanel](https://www.w3.org/TR/wai-aria-1.1/#tabpanel): A container for the resources associated with a tab, where each tab is contained in a tablist.
|
|
321
|
-
|
|
322
|
-
TabList and Tab will apply the `tablist` and `tab` ARIA roles.
|
|
323
|
-
The `tabpanel` will be reserved for possible future component.
|
|
324
|
-
|
|
325
|
-
### Screen readers
|
|
326
|
-
|
|
327
|
-
Screen readers will read each tab's content.
|
|
328
|
-
|
|
329
|
-
# Future
|
|
330
|
-
|
|
331
|
-
## Overflow Button/Dropdown
|
|
332
|
-
|
|
333
|
-
The design spec details a menu button (...) that displays the list of tabs that were not able to be displayed due to limited space. We have some concerns providing overflow as a default feature of tabs. The v1 of TabList and Tab will not include overflow.
|
|
334
|
-
|
|
335
|
-
- Overflow made the v0 toolbar difficult to maintain. Customers hacked around it when it did not meet app requirements.
|
|
336
|
-
- In v8, taking a dependency on menu over-complicated the button component and increased the default footprint. It also created a tighter binding with the overflow props matching the menu props and children.
|
|
337
|
-
- Overflow dropdown is one of many possible approaches such as scrolling, paging, multi-row, scroll-into-view. This may be best left as an application-level concern.
|
|
338
|
-
- The dropdown approach is called out by bootstrap as [problematic for usability and accessibility](https://react-bootstrap.github.io/components/tabs/#tabs-with-dropdown).
|
|
339
|
-
- Many (if not most) component libraries do not support dropdown overflow.
|
|
340
|
-
- There is not a general purpose overflow solution in vNext infrastructure. The team needs to explore options and formulate an approach.
|
|
341
|
-
|
|
342
|
-
### Tab with Badge
|
|
343
|
-
|
|
344
|
-
The design spec shows a badge which is arranged near the icon or text. The initial vNext package will not provide a badge variant or badge slot.
|
|
345
|
-
|
|
346
|
-
- It is unclear if the badge is a common enough scenario to warrant the package dependency on react-badge.
|
|
347
|
-
- The positioning of the badge relative to other parts is not confirmed in the design spec
|
|
348
|
-
- Other controls may want to overlay a badge. We may want a general purpose badge overlay solution.
|
|
349
|
-
- The badge appears most often in an app bar scenario. It is unclear if the items with badges are really tabs, or some other kind of command button. We may have a future app bar/nav bar/toolbar component that handles the badge scenario.
|
|
350
|
-
|
|
351
|
-
> The intial work to explore supporting a badge used a BadgeTab variant.
|
|
352
|
-
|
|
353
|
-
### TabPanel
|
|
354
|
-
|
|
355
|
-
While the design spec does not cover tab panels, v8 Pivot supports them through the content of the PivotItem. They are also a common scenario when the tabs are adjacent to the content associated with each tab.
|
|
356
|
-
|
|
357
|
-
- There are many approaches to handling tab panel content: show/hide, conditional render, navigation through a router
|
|
358
|
-
- We're not providing a manilla folder tab appearance, so there is no need for the tab panel to support styling for when the components are co-located. We may want to have a manilla folder appearance.
|
|
359
|
-
|
|
360
|
-
If/When we do support tab panels,
|
|
361
|
-
|
|
362
|
-
- we should provide flexible composition. The tabs should be able to be placed independent of the tab panels in the DOM. The caller should be able to wire the two together easily through event callbacks or state binding.
|
|
363
|
-
- we should make connecting tabs and tab panels easy by a Tabs container component that wires them together.
|