npm - @fluentui/react-tabs - Versions diffs - 9.0.0-rc.5 → 9.0.1 - Mend

@fluentui/react-tabs 9.0.0-rc.5 → 9.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (33) hide show

package/CHANGELOG.json +134 -1
package/CHANGELOG.md +44 -2
package/MIGRATION.md +14 -0
package/README.md +22 -3
package/Spec.md +13 -83
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 +15 -11
package/lib/components/Tab/useTabAnimatedIndicator.js.map +1 -1
package/lib/components/Tab/useTabStyles.js +12 -2
package/lib/components/Tab/useTabStyles.js.map +1 -1
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-commonjs/components/Tab/Tab.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 +15 -11
package/lib-commonjs/components/Tab/useTabAnimatedIndicator.js.map +1 -1
package/lib-commonjs/components/Tab/useTabStyles.js +12 -2
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/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 +10 -13

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["components/Tab/useTabStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import type { TabSlots, TabState } from './Tab.types';\n\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport { useTabAnimatedIndicatorStyles_unstable } from './useTabAnimatedIndicator';\n\nexport const tabClassNames: SlotClassNames<TabSlots> = {\n root: 'fui-Tab',\n icon: 'fui-Tab__icon',\n content: 'fui-Tab__content',\n};\n\n/*\n Styles for the root slot\n /\n/ eslint-disable @typescript-eslint/naming-convention /\nconst useRootStyles = makeStyles({\n base: {\n alignItems: 'center',\n ...shorthands.borderColor('none'),\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n ...shorthands.borderWidth(0),\n cursor: 'pointer',\n display: 'grid',\n flexShrink: 0,\n gridAutoFlow: 'column',\n gridTemplateColumns: 'auto',\n gridTemplateRows: 'auto',\n fontFamily: tokens.fontFamilyBase,\n lineHeight: tokens.lineHeightBase300,\n outlineStyle: 'none',\n position: 'relative',\n ...shorthands.overflow('hidden'),\n textTransform: 'none',\n },\n horizontal: {\n justifyContent: 'center',\n },\n vertical: {\n justifyContent: 'start',\n },\n mediumHorizontal: {\n columnGap: tokens.spacingHorizontalSNudge,\n ...shorthands.padding(tokens.spacingVerticalM, tokens.spacingHorizontalMNudge),\n },\n mediumVertical: {\n // horizontal spacing is deliberate. This is the gap between icon and content.\n columnGap: tokens.spacingHorizontalSNudge,\n ...shorthands.padding(tokens.spacingVerticalSNudge, tokens.spacingHorizontalMNudge),\n },\n smallHorizontal: {\n columnGap: tokens.spacingHorizontalXXS,\n ...shorthands.padding(tokens.spacingVerticalSNudge, tokens.spacingHorizontalSNudge),\n },\n smallVertical: {\n // horizontal spacing is deliberate. This is the gap between icon and content.\n columnGap: tokens.spacingHorizontalXXS,\n ...shorthands.padding(tokens.spacingVerticalXXS, tokens.spacingHorizontalSNudge),\n },\n transparent: {\n backgroundColor: tokens.colorTransparentBackground,\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n },\n ':active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n },\n '& .fui-Tab__icon': {\n color: tokens.colorNeutralForeground2,\n },\n ':hover .fui-Tab__icon': {\n color: tokens.colorNeutralForeground2Hover,\n },\n ':active .fui-Tab__icon': {\n color: tokens.colorNeutralForeground2Pressed,\n },\n '& .fui-Tab__content': {\n color: tokens.colorNeutralForeground2,\n },\n ':hover .fui-Tab__content': {\n color: tokens.colorNeutralForeground2Hover,\n },\n ':active .fui-Tab__content': {\n color: tokens.colorNeutralForeground2Pressed,\n },\n },\n subtle: {\n backgroundColor: tokens.colorSubtleBackground,\n ':hover': {\n backgroundColor: tokens.colorSubtleBackgroundHover,\n },\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n },\n '& .fui-Tab__icon': {\n color: tokens.colorNeutralForeground2,\n },\n ':hover .fui-Tab__icon': {\n color: tokens.colorNeutralForeground2Hover,\n },\n ':active .fui-Tab__icon': {\n color: tokens.colorNeutralForeground2Pressed,\n },\n '& .fui-Tab__content': {\n color: tokens.colorNeutralForeground2,\n },\n ':hover .fui-Tab__content': {\n color: tokens.colorNeutralForeground2Hover,\n },\n ':active .fui-Tab__content': {\n color: tokens.colorNeutralForeground2Pressed,\n },\n },\n disabled: {\n backgroundColor: tokens.colorTransparentBackground,\n\n '& .fui-Tab__icon': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n '& .fui-Tab__content': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n cursor: 'not-allowed',\n },\n selected: {\n '& .fui-Tab__icon': {\n color: tokens.colorCompoundBrandForeground1,\n },\n ':hover .fui-Tab__icon': {\n color: tokens.colorCompoundBrandForeground1Hover,\n },\n ':active .fui-Tab__icon': {\n color: tokens.colorCompoundBrandForeground1Pressed,\n },\n '& .fui-Tab__content': {\n color: tokens.colorNeutralForeground1,\n },\n ':hover .fui-Tab__content': {\n color: tokens.colorNeutralForeground1Hover,\n },\n ':active .fui-Tab__content': {\n color: tokens.colorNeutralForeground1Pressed,\n },\n },\n});\n/ eslint-enable @typescript-eslint/naming-convention /\n\n/\n Focus styles for the root slot\n /\nconst useFocusStyles = makeStyles({\n // Tab creates a custom focus indicator because the default focus indicator\n // is applied using an ::after pseudo-element on the root. Since the selection\n // indicator uses an ::after pseudo-element on the root, there is a conflict.\n base: createCustomFocusIndicatorStyle({\n ...shorthands.borderColor('transparent'),\n outlineWidth: tokens.strokeWidthThick,\n outlineColor: 'transparent',\n outlineStyle: 'solid',\n boxShadow: `\n ${tokens.shadow4},\n 0 0 0 ${tokens.strokeWidthThick} ${tokens.colorStrokeFocus2}\n `,\n zIndex: 1,\n }),\n});\n\n/* Indicator styles for when pending selection /\nconst usePendingIndicatorStyles = makeStyles({\n base: {\n ':hover::before': {\n backgroundColor: tokens.colorNeutralStroke1Hover,\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n content: '\"\"',\n position: 'absolute',\n },\n ':active::before': {\n backgroundColor: tokens.colorNeutralStroke1Pressed,\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n content: '\"\"',\n position: 'absolute',\n },\n '@media (forced-colors: active)': {\n ':hover::before': {\n backgroundColor: 'Highlight',\n },\n ':active::before': {\n backgroundColor: 'Highlight',\n },\n },\n },\n disabled: {\n ':hover::before': {\n backgroundColor: tokens.colorTransparentStroke,\n },\n ':active::before': {\n backgroundColor: tokens.colorTransparentStroke,\n },\n },\n mediumHorizontal: {\n '::before': {\n bottom: 0,\n height: tokens.strokeWidthThicker,\n left: tokens.spacingHorizontalM,\n right: tokens.spacingHorizontalM,\n },\n },\n mediumVertical: {\n '::before': {\n bottom: tokens.spacingVerticalS,\n left: 0,\n top: tokens.spacingVerticalS,\n width: tokens.strokeWidthThicker,\n },\n },\n smallHorizontal: {\n '::before': {\n bottom: 0,\n height: tokens.strokeWidthThick,\n left: tokens.spacingHorizontalSNudge,\n right: tokens.spacingHorizontalSNudge,\n },\n },\n smallVertical: {\n '::before': {\n bottom: tokens.spacingVerticalXS,\n left: 0,\n top: tokens.spacingVerticalXS,\n width: tokens.strokeWidthThicker,\n },\n },\n});\n\nconst useActiveIndicatorStyles = makeStyles({\n base: {\n '::after': {\n backgroundColor: tokens.colorTransparentStroke,\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n content: '\"\"',\n position: 'absolute',\n zIndex: 1,\n },\n },\n selected: {\n '::after': {\n backgroundColor: tokens.colorCompoundBrandStroke,\n },\n ':hover::after': {\n backgroundColor: tokens.colorCompoundBrandStrokeHover,\n },\n ':active::after': {\n backgroundColor: tokens.colorCompoundBrandStrokePressed,\n },\n '@media (forced-colors: active)': {\n '::after': {\n backgroundColor: 'ButtonText',\n },\n ':hover::after': {\n backgroundColor: 'ButtonText',\n },\n ':active::after': {\n backgroundColor: 'ButtonText',\n },\n },\n },\n disabled: {\n '::after': {\n backgroundColor: tokens.colorNeutralForegroundDisabled,\n },\n },\n mediumHorizontal: {\n '::after': {\n bottom: '0',\n height: tokens.strokeWidthThicker,\n left: tokens.spacingHorizontalM,\n right: tokens.spacingHorizontalM,\n },\n },\n mediumVertical: {\n '::after': {\n bottom: tokens.spacingVerticalS,\n left: 0,\n top: tokens.spacingVerticalS,\n width: tokens.strokeWidthThicker,\n },\n },\n smallHorizontal: {\n '::after': {\n bottom: 0,\n height: tokens.strokeWidthThick,\n left: tokens.spacingHorizontalSNudge,\n right: tokens.spacingHorizontalSNudge,\n },\n },\n smallVertical: {\n '::after': {\n bottom: tokens.spacingVerticalXS,\n left: '0',\n top: tokens.spacingVerticalXS,\n width: tokens.strokeWidthThicker,\n },\n },\n});\n\n/\n Styles for the icon slot.\n /\nconst useIconStyles = makeStyles({\n base: {\n alignItems: 'center',\n display: 'inline-flex',\n justifyContent: 'center',\n ...shorthands.overflow('hidden'),\n },\n // per design, the small and medium font sizes are the same.\n // the size prop only affects spacing.\n small: {\n fontSize: '20px',\n height: '20px',\n width: '20px',\n },\n medium: {\n fontSize: '20px',\n height: '20px',\n width: '20px',\n },\n});\n\n/\n Styles for the content slot (children)\n /\nconst useContentStyles = makeStyles({\n base: {\n ...typographyStyles.body1,\n ...shorthands.overflow('hidden'),\n // content padding is the same for medium & small, horiztonal & vertical\n ...shorthands.padding(tokens.spacingVerticalNone, tokens.spacingHorizontalXXS),\n },\n selected: {\n ...typographyStyles.body1Strong,\n },\n});\n\n/\n Apply styling to the Tab slots based on the state\n */\nexport const useTabStyles_unstable = (state: TabState): TabState => {\n const rootStyles = useRootStyles();\n const focusStyles = useFocusStyles();\n const pendingIndicatorStyles = usePendingIndicatorStyles();\n const activeIndicatorStyles = useActiveIndicatorStyles();\n const iconStyles = useIconStyles();\n const contentStyles = useContentStyles();\n\n const { appearance, disabled, selected, size, vertical } = state;\n\n state.root.className = mergeClasses(\n tabClassNames.root,\n rootStyles.base,\n vertical ? rootStyles.vertical : rootStyles.horizontal,\n size !== 'small' && (vertical ? rootStyles.mediumVertical : rootStyles.mediumHorizontal),\n size === 'small' && (vertical ? rootStyles.smallVertical : rootStyles.smallHorizontal),\n focusStyles.base,\n !disabled && appearance === 'subtle' && rootStyles.subtle,\n !disabled && appearance === 'transparent' && rootStyles.transparent,\n !disabled && selected && rootStyles.selected,\n disabled && rootStyles.disabled,\n\n // pending indicator (before pseudo element)\n pendingIndicatorStyles.base,\n size !== 'small' && (vertical ? pendingIndicatorStyles.mediumVertical : pendingIndicatorStyles.mediumHorizontal),\n size === 'small' && (vertical ? pendingIndicatorStyles.smallVertical : pendingIndicatorStyles.smallHorizontal),\n disabled && pendingIndicatorStyles.disabled,\n\n // active indicator (after pseudo element)\n selected && activeIndicatorStyles.base,\n selected && !disabled && activeIndicatorStyles.selected,\n selected &&\n size !== 'small' &&\n (vertical ? activeIndicatorStyles.mediumVertical : activeIndicatorStyles.mediumHorizontal),\n selected &&\n size === 'small' &&\n (vertical ? activeIndicatorStyles.smallVertical : activeIndicatorStyles.smallHorizontal),\n selected && disabled && activeIndicatorStyles.disabled,\n state.root.className,\n );\n\n if (state.icon) {\n state.icon.className = mergeClasses(tabClassNames.icon, iconStyles.base, iconStyles[size], state.icon.className);\n }\n\n state.content.className = mergeClasses(\n tabClassNames.content,\n contentStyles.base,\n selected && contentStyles.selected,\n state.content.className,\n );\n\n useTabAnimatedIndicatorStyles_unstable(state);\n\n return state;\n};\n"],"sourceRoot":"../src/"}
1	+ {"version":3,"sources":["components/Tab/useTabStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import type { TabSlots, TabState } from './Tab.types';\n\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport { useTabAnimatedIndicatorStyles_unstable } from './useTabAnimatedIndicator';\n\nexport const tabClassNames: SlotClassNames<TabSlots> = {\n root: 'fui-Tab',\n icon: 'fui-Tab__icon',\n content: 'fui-Tab__content',\n};\n\n/*\n Styles for the root slot\n /\n/ eslint-disable @typescript-eslint/naming-convention /\nconst useRootStyles = makeStyles({\n base: {\n alignItems: 'center',\n ...shorthands.borderColor('none'),\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n ...shorthands.borderWidth(0),\n cursor: 'pointer',\n display: 'grid',\n flexShrink: 0,\n gridAutoFlow: 'column',\n gridTemplateColumns: 'auto',\n gridTemplateRows: 'auto',\n fontFamily: tokens.fontFamilyBase,\n lineHeight: tokens.lineHeightBase300,\n outlineStyle: 'none',\n position: 'relative',\n ...shorthands.overflow('hidden'),\n textTransform: 'none',\n },\n horizontal: {\n justifyContent: 'center',\n },\n vertical: {\n justifyContent: 'start',\n },\n mediumHorizontal: {\n columnGap: tokens.spacingHorizontalSNudge,\n ...shorthands.padding(tokens.spacingVerticalM, tokens.spacingHorizontalMNudge),\n },\n mediumVertical: {\n // horizontal spacing is deliberate. This is the gap between icon and content.\n columnGap: tokens.spacingHorizontalSNudge,\n ...shorthands.padding(tokens.spacingVerticalSNudge, tokens.spacingHorizontalMNudge),\n },\n smallHorizontal: {\n columnGap: tokens.spacingHorizontalXXS,\n ...shorthands.padding(tokens.spacingVerticalSNudge, tokens.spacingHorizontalSNudge),\n },\n smallVertical: {\n // horizontal spacing is deliberate. This is the gap between icon and content.\n columnGap: tokens.spacingHorizontalXXS,\n ...shorthands.padding(tokens.spacingVerticalXXS, tokens.spacingHorizontalSNudge),\n },\n transparent: {\n backgroundColor: tokens.colorTransparentBackground,\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n },\n ':active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n },\n '& .fui-Tab__icon': {\n color: tokens.colorNeutralForeground2,\n },\n ':hover .fui-Tab__icon': {\n color: tokens.colorNeutralForeground2Hover,\n },\n ':active .fui-Tab__icon': {\n color: tokens.colorNeutralForeground2Pressed,\n },\n '& .fui-Tab__content': {\n color: tokens.colorNeutralForeground2,\n },\n ':hover .fui-Tab__content': {\n color: tokens.colorNeutralForeground2Hover,\n },\n ':active .fui-Tab__content': {\n color: tokens.colorNeutralForeground2Pressed,\n },\n },\n subtle: {\n backgroundColor: tokens.colorSubtleBackground,\n ':hover': {\n backgroundColor: tokens.colorSubtleBackgroundHover,\n },\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n },\n '& .fui-Tab__icon': {\n color: tokens.colorNeutralForeground2,\n },\n ':hover .fui-Tab__icon': {\n color: tokens.colorNeutralForeground2Hover,\n },\n ':active .fui-Tab__icon': {\n color: tokens.colorNeutralForeground2Pressed,\n },\n '& .fui-Tab__content': {\n color: tokens.colorNeutralForeground2,\n },\n ':hover .fui-Tab__content': {\n color: tokens.colorNeutralForeground2Hover,\n },\n ':active .fui-Tab__content': {\n color: tokens.colorNeutralForeground2Pressed,\n },\n },\n disabled: {\n backgroundColor: tokens.colorTransparentBackground,\n\n '& .fui-Tab__icon': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n '& .fui-Tab__content': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n cursor: 'not-allowed',\n },\n selected: {\n '& .fui-Tab__icon': {\n color: tokens.colorCompoundBrandForeground1,\n },\n ':hover .fui-Tab__icon': {\n color: tokens.colorCompoundBrandForeground1Hover,\n },\n ':active .fui-Tab__icon': {\n color: tokens.colorCompoundBrandForeground1Pressed,\n },\n '& .fui-Tab__content': {\n color: tokens.colorNeutralForeground1,\n },\n ':hover .fui-Tab__content': {\n color: tokens.colorNeutralForeground1Hover,\n },\n ':active .fui-Tab__content': {\n color: tokens.colorNeutralForeground1Pressed,\n },\n },\n});\n/ eslint-enable @typescript-eslint/naming-convention /\n\n/\n Focus styles for the root slot\n /\nconst useFocusStyles = makeStyles({\n // Tab creates a custom focus indicator because the default focus indicator\n // is applied using an ::after pseudo-element on the root. Since the selection\n // indicator uses an ::after pseudo-element on the root, there is a conflict.\n base: createCustomFocusIndicatorStyle({\n ...shorthands.borderColor('transparent'),\n outlineWidth: tokens.strokeWidthThick,\n outlineColor: 'transparent',\n outlineStyle: 'solid',\n boxShadow: `\n ${tokens.shadow4},\n 0 0 0 ${tokens.strokeWidthThick} ${tokens.colorStrokeFocus2}\n `,\n zIndex: 1,\n }),\n});\n\n/* Indicator styles for when pending selection /\nconst usePendingIndicatorStyles = makeStyles({\n base: {\n ':hover::before': {\n backgroundColor: tokens.colorNeutralStroke1Hover,\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n content: '\"\"',\n position: 'absolute',\n },\n ':active::before': {\n backgroundColor: tokens.colorNeutralStroke1Pressed,\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n content: '\"\"',\n position: 'absolute',\n },\n '@media (forced-colors: active)': {\n ':hover::before': {\n backgroundColor: 'Highlight',\n },\n ':active::before': {\n backgroundColor: 'Highlight',\n },\n },\n },\n disabled: {\n ':hover::before': {\n backgroundColor: tokens.colorTransparentStroke,\n },\n ':active::before': {\n backgroundColor: tokens.colorTransparentStroke,\n },\n },\n mediumHorizontal: {\n '::before': {\n bottom: 0,\n height: tokens.strokeWidthThicker,\n left: tokens.spacingHorizontalM,\n right: tokens.spacingHorizontalM,\n },\n },\n mediumVertical: {\n '::before': {\n bottom: tokens.spacingVerticalS,\n left: 0,\n top: tokens.spacingVerticalS,\n width: tokens.strokeWidthThicker,\n },\n },\n smallHorizontal: {\n '::before': {\n bottom: 0,\n height: tokens.strokeWidthThick,\n left: tokens.spacingHorizontalSNudge,\n right: tokens.spacingHorizontalSNudge,\n },\n },\n smallVertical: {\n '::before': {\n bottom: tokens.spacingVerticalXS,\n left: 0,\n top: tokens.spacingVerticalXS,\n width: tokens.strokeWidthThicker,\n },\n },\n});\n\nconst useActiveIndicatorStyles = makeStyles({\n base: {\n '::after': {\n backgroundColor: tokens.colorTransparentStroke,\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n content: '\"\"',\n position: 'absolute',\n zIndex: 1,\n },\n },\n selected: {\n '::after': {\n backgroundColor: tokens.colorCompoundBrandStroke,\n },\n ':hover::after': {\n backgroundColor: tokens.colorCompoundBrandStrokeHover,\n },\n ':active::after': {\n backgroundColor: tokens.colorCompoundBrandStrokePressed,\n },\n '@media (forced-colors: active)': {\n '::after': {\n backgroundColor: 'ButtonText',\n },\n ':hover::after': {\n backgroundColor: 'ButtonText',\n },\n ':active::after': {\n backgroundColor: 'ButtonText',\n },\n },\n },\n disabled: {\n '::after': {\n backgroundColor: tokens.colorNeutralForegroundDisabled,\n },\n },\n mediumHorizontal: {\n '::after': {\n bottom: '0',\n height: tokens.strokeWidthThicker,\n left: tokens.spacingHorizontalM,\n right: tokens.spacingHorizontalM,\n },\n },\n mediumVertical: {\n '::after': {\n bottom: tokens.spacingVerticalS,\n left: 0,\n top: tokens.spacingVerticalS,\n width: tokens.strokeWidthThicker,\n },\n },\n smallHorizontal: {\n '::after': {\n bottom: 0,\n height: tokens.strokeWidthThick,\n left: tokens.spacingHorizontalSNudge,\n right: tokens.spacingHorizontalSNudge,\n },\n },\n smallVertical: {\n '::after': {\n bottom: tokens.spacingVerticalXS,\n left: '0',\n top: tokens.spacingVerticalXS,\n width: tokens.strokeWidthThicker,\n },\n },\n});\n\n/\n Styles for the icon slot.\n /\nconst useIconStyles = makeStyles({\n base: {\n alignItems: 'center',\n display: 'inline-flex',\n justifyContent: 'center',\n ...shorthands.overflow('hidden'),\n },\n // per design, the small and medium font sizes are the same.\n // the size prop only affects spacing.\n small: {\n fontSize: '20px',\n height: '20px',\n width: '20px',\n },\n medium: {\n fontSize: '20px',\n height: '20px',\n width: '20px',\n },\n});\n\n/\n Styles for the content slot (children)\n /\nconst useContentStyles = makeStyles({\n base: {\n ...typographyStyles.body1,\n ...shorthands.overflow('hidden'),\n // content padding is the same for medium & small, horiztonal & vertical\n ...shorthands.padding(tokens.spacingVerticalNone, tokens.spacingHorizontalXXS),\n },\n selected: {\n ...typographyStyles.body1Strong,\n },\n});\n\n/\n Apply styling to the Tab slots based on the state\n */\nexport const useTabStyles_unstable = (state: TabState): TabState => {\n const rootStyles = useRootStyles();\n const focusStyles = useFocusStyles();\n const pendingIndicatorStyles = usePendingIndicatorStyles();\n const activeIndicatorStyles = useActiveIndicatorStyles();\n const iconStyles = useIconStyles();\n const contentStyles = useContentStyles();\n\n const { appearance, disabled, selected, size, vertical } = state;\n\n state.root.className = mergeClasses(\n tabClassNames.root,\n rootStyles.base,\n vertical ? rootStyles.vertical : rootStyles.horizontal,\n size !== 'small' && (vertical ? rootStyles.mediumVertical : rootStyles.mediumHorizontal),\n size === 'small' && (vertical ? rootStyles.smallVertical : rootStyles.smallHorizontal),\n focusStyles.base,\n !disabled && appearance === 'subtle' && rootStyles.subtle,\n !disabled && appearance === 'transparent' && rootStyles.transparent,\n !disabled && selected && rootStyles.selected,\n disabled && rootStyles.disabled,\n\n // pending indicator (before pseudo element)\n pendingIndicatorStyles.base,\n size !== 'small' && (vertical ? pendingIndicatorStyles.mediumVertical : pendingIndicatorStyles.mediumHorizontal),\n size === 'small' && (vertical ? pendingIndicatorStyles.smallVertical : pendingIndicatorStyles.smallHorizontal),\n disabled && pendingIndicatorStyles.disabled,\n\n // active indicator (after pseudo element)\n selected && activeIndicatorStyles.base,\n selected && !disabled && activeIndicatorStyles.selected,\n selected &&\n size !== 'small' &&\n (vertical ? activeIndicatorStyles.mediumVertical : activeIndicatorStyles.mediumHorizontal),\n selected &&\n size === 'small' &&\n (vertical ? activeIndicatorStyles.smallVertical : activeIndicatorStyles.smallHorizontal),\n selected && disabled && activeIndicatorStyles.disabled,\n state.root.className,\n );\n\n if (state.icon) {\n state.icon.className = mergeClasses(tabClassNames.icon, iconStyles.base, iconStyles[size], state.icon.className);\n }\n\n state.content.className = mergeClasses(\n tabClassNames.content,\n contentStyles.base,\n selected && contentStyles.selected,\n state.content.className,\n );\n\n useTabAnimatedIndicatorStyles_unstable(state);\n\n return state;\n};\n"],"sourceRoot":"../src/"}

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["components/TabList/TabList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,mBAAT,QAAoC,cAApC;AACA,SAAS,sBAAT,QAAuC,iBAAvC;AACA,SAAS,yBAAT,QAA0C,oBAA1C;AAGA,SAAS,uBAAT,QAAwC,2BAAxC;AAEA;;AAEG;;AACH,OAAO,MAAM,OAAO,gBAAsC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;~~AACxF~~,~~QAAM~~,KAAK,GAAG,mBAAmB,CAAC,KAAD,EAAQ,GAAR,CAAjC;~~AACA~~,~~QAAM~~,aAAa,GAAG,uBAAuB,CAAC,KAAD,CAA7C;~~AAEA~~,~~EAAA,~~yBAAyB,CAAC,KAAD,CAAzB;~~AACA~~,~~SAAO~~,sBAAsB,CAAC,KAAD,EAAQ,aAAR,CAA7B;AACD,CANyD,CAAnD;AAQP,OAAO,CAAC,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":["components/TabList/TabList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,mBAAT,QAAoC,cAApC;AACA,SAAS,sBAAT,QAAuC,iBAAvC;AACA,SAAS,yBAAT,QAA0C,oBAA1C;AAGA,SAAS,uBAAT,QAAwC,2BAAxC;AAEA;;AAEG;;AACH,OAAO,MAAM,OAAO,gBAAsC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACxF,MAAM,KAAK,GAAG,mBAAmB,CAAC,KAAD,EAAQ,GAAR,CAAjC;EACA,MAAM,aAAa,GAAG,uBAAuB,CAAC,KAAD,CAA7C;EAEA,yBAAyB,CAAC,KAAD,CAAzB;EACA,OAAO,sBAAsB,CAAC,KAAD,EAAQ,aAAR,CAA7B;AACD,CANyD,CAAnD;AAQP,OAAO,CAAC,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/"}

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["components/TabList/TabListContext.ts"],"names":[],"mappings":"AAAA,SAAS,aAAT,QAA8B,kCAA9B;AAIA,OAAO,MAAM,cAAc,gBAAiC,aAAa,CAAsB;~~AAC7F~~,~~EAAA,~~UAAU,EAAE,aADiF;~~AAE7F~~,~~EAAA,~~QAAQ,EAAE,KAFmF;~~AAG7F~~,~~EAAA,~~aAAa,EAAE,SAH8E;~~AAI7F~~,~~EAAA,~~UAAU,EAAE,MAAK;~~AACf~~;~~AACD~~,~~GAN4F~~;~~AAO7F~~,~~EAAA,~~YAAY,EAAE,MAAK;~~AACjB~~;~~AACD~~,~~GAT4F~~;~~AAU7F~~,~~EAAA,~~QAAQ,EAAE,MAAK;~~AACb~~;~~AACD~~,~~GAZ4F~~;~~AAa7F~~,~~EAAA,~~iBAAiB,EAAE,MAAK;~~AACtB~~,~~WAAO~~;~~AACL~~,~~MAAA,~~cAAc,EAAE;~~AADX~~,~~KAAP~~;~~AAGD~~,~~GAjB4F~~;~~AAkB7F~~,~~EAAA,~~IAAI,EAAE,QAlBuF;~~AAmB7F~~,~~EAAA,~~QAAQ,EAAE;AAnBmF,CAAtB,CAAlE","sourcesContent":["import { createContext } from '@fluentui/react-context-selector';\nimport type { Context } from '@fluentui/react-context-selector';\nimport { TabListContextValue } from './TabList.types';\n\nexport const TabListContext: Context<TabListContextValue> = createContext<TabListContextValue>({\n appearance: 'transparent',\n disabled: false,\n selectedValue: undefined,\n onRegister: () => {\n /* noop /\n },\n onUnregister: () => {\n / noop /\n },\n onSelect: () => {\n / noop */\n },\n getRegisteredTabs: () => {\n return {\n registeredTabs: {},\n };\n },\n size: 'medium',\n vertical: false,\n});\n"],"sourceRoot":"../src/"}
1	+ {"version":3,"sources":["components/TabList/TabListContext.ts"],"names":[],"mappings":"AAAA,SAAS,aAAT,QAA8B,kCAA9B;AAIA,OAAO,MAAM,cAAc,gBAAiC,aAAa,CAAsB;EAC7F,UAAU,EAAE,aADiF;EAE7F,QAAQ,EAAE,KAFmF;EAG7F,aAAa,EAAE,SAH8E;EAI7F,UAAU,EAAE,MAAK;IACf;EACD,CAN4F;EAO7F,YAAY,EAAE,MAAK;IACjB;EACD,CAT4F;EAU7F,QAAQ,EAAE,MAAK;IACb;EACD,CAZ4F;EAa7F,iBAAiB,EAAE,MAAK;IACtB,OAAO;MACL,cAAc,EAAE;IADX,CAAP;EAGD,CAjB4F;EAkB7F,IAAI,EAAE,QAlBuF;EAmB7F,QAAQ,EAAE;AAnBmF,CAAtB,CAAlE","sourcesContent":["import { createContext } from '@fluentui/react-context-selector';\nimport type { Context } from '@fluentui/react-context-selector';\nimport { TabListContextValue } from './TabList.types';\n\nexport const TabListContext: Context<TabListContextValue> = createContext<TabListContextValue>({\n appearance: 'transparent',\n disabled: false,\n selectedValue: undefined,\n onRegister: () => {\n /* noop /\n },\n onUnregister: () => {\n / noop /\n },\n onSelect: () => {\n / noop */\n },\n getRegisteredTabs: () => {\n return {\n registeredTabs: {},\n };\n },\n size: 'medium',\n vertical: false,\n});\n"],"sourceRoot":"../src/"}

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["components/TabList/renderTabList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAEA,SAAS,cAAT,QAA+B,kBAA/B;AAEA;;AAEG;;AACH,OAAO,MAAM,sBAAsB,GAAG,CAAC,KAAD,EAAsB,aAAtB,KAA6D;~~AACjG~~,~~QAAM~~;~~AAAE~~,~~IAAA,~~KAAF;~~AAAS,IAAA~~;~~AAAT~~,~~MAAuB~~,QAAQ,CAAe,KAAf,CAArC;~~AAEA~~,~~sBACE~~,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;~~AAAf~~,~~GAAX~~,eACE,KAAA,CAAA,aAAA,CAAC,cAAc,CAAC,QAAhB,EAAwB;~~AAAC~~,~~IAAA,~~KAAK,EAAE,aAAa,CAAC;~~AAAtB~~,~~GAAxB~~,EAAwD,KAAK,CAAC,IAAN,CAAW,QAAnE,CADF,CADF;AAKD,CARM","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":["components/TabList/renderTabList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAEA,SAAS,cAAT,QAA+B,kBAA/B;AAEA;;AAEG;;AACH,OAAO,MAAM,sBAAsB,GAAG,CAAC,KAAD,EAAsB,aAAtB,KAA6D;EACjG,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAe,KAAf,CAArC;EAEA,oBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,eACE,KAAA,CAAA,aAAA,CAAC,cAAc,CAAC,QAAhB,EAAwB;IAAC,KAAK,EAAE,aAAa,CAAC;EAAtB,CAAxB,EAAwD,KAAK,CAAC,IAAN,CAAW,QAAnE,CADF,CADF;AAKD,CARM","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/"}

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["components/TabList/useTabList.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,uBAAT,QAAwC,yBAAxC;AACA,SACE,qBADF,EAEE,oBAFF,EAGE,gBAHF,EAIE,aAJF,QAKO,2BALP;AASA;;;;;;;;AAQG;;AACH,OAAO,MAAM,mBAAmB,GAAG,CAAC,KAAD,EAAsB,GAAtB,KAAmE;~~AACpG~~,~~QAAM~~;~~AAAE~~,~~IAAA,~~UAAU,GAAG,aAAf;~~AAA8B~~,~~IAAA,~~QAAQ,GAAG,KAAzC;~~AAAgD~~,~~IAAA,~~WAAhD;~~AAA6D~~,~~IAAA,~~IAAI,GAAG,QAApE;~~AAA8E~~,~~IAAA,~~QAAQ,GAAG;~~AAAzF~~,~~MAAmG~~,KAAzG;~~AAEA~~,~~QAAM~~,QAAQ,GAAG,KAAK,CAAC,MAAN,CAA0B,IAA1B,CAAjB;~~AAEA~~,~~QAAM~~,eAAe,GAAG,uBAAuB,CAAC;~~AAC9C~~,~~IAAA,~~QAAQ,EAAE,IADoC;~~AAE9C~~,~~IAAA,~~IAAI,EAAE,QAAQ,GAAG,UAAH,GAAgB,YAFgB;~~AAG9C~~,~~IAAA,~~eAAe,EAAE;~~AAH6B~~,~~GAAD~~,CAA/C;~~AAMA~~,~~QAAM~~,CAAC,aAAD,EAAgB,gBAAhB,IAAoC,oBAAoB,CAAC;~~AAC7D~~,~~IAAA,~~KAAK,EAAE,KAAK,CAAC,aADgD;~~AAE7D~~,~~IAAA,~~YAAY,EAAE,KAAK,CAAC,oBAFyC;~~AAG7D~~,~~IAAA,~~YAAY,EAAE;~~AAH~~+C,~~GAAD~~,CAA9D,CAXoG,CAiBpG;~~AACA~~;~~AACA~~;~~AACA~~;;~~AACA~~,~~QAAM~~,oBAAoB,GAAG,KAAK,CAAC,MAAN,CAAmC,SAAnC,CAA7B;~~AACA~~,~~QAAM~~,qBAAqB,GAAG,KAAK,CAAC,MAAN,CAAmC,SAAnC,CAA9B;~~AAEA~~,~~EAAA,~~KAAK,CAAC,SAAN,CAAgB,MAAK;~~AACnB~~,~~IAAA,~~qBAAqB,CAAC,OAAtB,GAAgC,oBAAoB,CAAC,OAArD;~~AACA~~,~~IAAA,~~oBAAoB,CAAC,OAArB,GAA+B,aAA/B;~~AACD~~,~~GAHD~~,EAGG,CAAC,aAAD,CAHH;~~AAKA~~,~~QAAM~~,QAAQ,GAAG,gBAAgB,CAAC,CAAC,KAAD,EAAwB,IAAxB,KAA+C;~~AAC~~/E,~~IAAA,~~gBAAgB,CAAC,IAAI,CAAC,KAAN,CAAhB;~~AACA~~,~~IAAA,~~WAAW,KAAA,IAAX,IAAA,WAAW,KAAA,KAAA,CAAX,GAAW,KAAA,CAAX,GAAA,WAAW,CAAG,KAAH,EAAU,IAAV,CAAX;~~AACD~~,~~GAHgC~~,CAAjC;~~AAKA~~,~~QAAM~~,cAAc,GAAG,KAAK,CAAC,MAAN,CAA8C,EAA9C,CAAvB;~~AAEA~~,~~QAAM~~,UAAU,GAAG,gBAAgB,CAAE,IAAD,IAA0B;~~AAC5D~~,~~IAAA,~~cAAc,CAAC,OAAf,CAAuB,IAAI,CAAC,SAAL,CAAe,IAAI,CAAC,KAApB,CAAvB,IAAqD,IAArD;~~AACD~~,~~GAFkC~~,CAAnC;~~AAIA~~,~~QAAM~~,YAAY,GAAG,gBAAgB,CAAE,IAAD,IAA0B;~~AAC9D~~,~~WAAO~~,cAAc,CAAC,OAAf,CAAuB,IAAI,CAAC,SAAL,CAAe,IAAI,CAAC,KAApB,CAAvB,CAAP;~~AACD~~,~~GAFoC~~,CAArC;~~AAIA~~,~~QAAM~~,iBAAiB,GAAG,KAAK,CAAC,WAAN,CAAkB,MAAK;~~AAC~~/C,~~WAAO~~;~~AACL~~,~~MAAA,~~aAAa,EAAE,oBAAoB,CAAC,OAD/B;~~AAEL~~,~~MAAA,~~qBAAqB,EAAE,qBAAqB,CAAC,OAFxC;~~AAGL~~,~~MAAA,~~cAAc,EAAE,cAAc,CAAC;~~AAH1B~~,~~KAAP~~;~~AAKD~~,~~GANyB~~,EAMvB,EANuB,CAA1B;~~AAQA~~,~~SAAO~~;~~AACL~~,~~IAAA,~~UAAU,EAAE;~~AACV~~,~~MAAA,~~IAAI,EAAE;~~AADI~~,~~KADP~~;~~AAIL~~,~~IAAA,~~IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ;~~AACjC~~,~~MAAA,~~GAAG,EAAE,aAAa,CAAC,GAAD,EAAM,QAAN,CADe;~~AAEjC~~,~~MAAA,~~IAAI,EAAE,SAF2B;~~AAGjC~~,~~SAAG~~,eAH8B;~~AAIjC~~,~~SAAG~~;~~AAJ8B~~,~~KAAR~~,CAJtB;~~AAUL~~,~~IAAA,~~UAVK;~~AAWL~~,~~IAAA,~~QAXK;~~AAYL~~,~~IAAA,~~aAZK;~~AAaL~~,~~IAAA,~~IAbK;~~AAcL~~,~~IAAA,~~QAdK;~~AAeL~~,~~IAAA,~~UAfK;~~AAgBL~~,~~IAAA,~~YAhBK;~~AAiBL~~,~~IAAA,~~QAjBK;~~AAkBL,IAAA~~;~~AAlBK~~,~~GAAP~~;AAoBD,CAxEM","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":["components/TabList/useTabList.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,uBAAT,QAAwC,yBAAxC;AACA,SACE,qBADF,EAEE,oBAFF,EAGE,gBAHF,EAIE,aAJF,QAKO,2BALP;AASA;;;;;;;;AAQG;;AACH,OAAO,MAAM,mBAAmB,GAAG,CAAC,KAAD,EAAsB,GAAtB,KAAmE;EACpG,MAAM;IAAE,UAAU,GAAG,aAAf;IAA8B,QAAQ,GAAG,KAAzC;IAAgD,WAAhD;IAA6D,IAAI,GAAG,QAApE;IAA8E,QAAQ,GAAG;EAAzF,IAAmG,KAAzG;EAEA,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAN,CAA0B,IAA1B,CAAjB;EAEA,MAAM,eAAe,GAAG,uBAAuB,CAAC;IAC9C,QAAQ,EAAE,IADoC;IAE9C,IAAI,EAAE,QAAQ,GAAG,UAAH,GAAgB,YAFgB;IAG9C,eAAe,EAAE;EAH6B,CAAD,CAA/C;EAMA,MAAM,CAAC,aAAD,EAAgB,gBAAhB,IAAoC,oBAAoB,CAAC;IAC7D,KAAK,EAAE,KAAK,CAAC,aADgD;IAE7D,YAAY,EAAE,KAAK,CAAC,oBAFyC;IAG7D,YAAY,EAAE;EAH+C,CAAD,CAA9D,CAXoG,CAiBpG;EACA;EACA;EACA;;EACA,MAAM,oBAAoB,GAAG,KAAK,CAAC,MAAN,CAAmC,SAAnC,CAA7B;EACA,MAAM,qBAAqB,GAAG,KAAK,CAAC,MAAN,CAAmC,SAAnC,CAA9B;EAEA,KAAK,CAAC,SAAN,CAAgB,MAAK;IACnB,qBAAqB,CAAC,OAAtB,GAAgC,oBAAoB,CAAC,OAArD;IACA,oBAAoB,CAAC,OAArB,GAA+B,aAA/B;EACD,CAHD,EAGG,CAAC,aAAD,CAHH;EAKA,MAAM,QAAQ,GAAG,gBAAgB,CAAC,CAAC,KAAD,EAAwB,IAAxB,KAA+C;IAC/E,gBAAgB,CAAC,IAAI,CAAC,KAAN,CAAhB;IACA,WAAW,KAAA,IAAX,IAAA,WAAW,KAAA,KAAA,CAAX,GAAW,KAAA,CAAX,GAAA,WAAW,CAAG,KAAH,EAAU,IAAV,CAAX;EACD,CAHgC,CAAjC;EAKA,MAAM,cAAc,GAAG,KAAK,CAAC,MAAN,CAA8C,EAA9C,CAAvB;EAEA,MAAM,UAAU,GAAG,gBAAgB,CAAE,IAAD,IAA0B;IAC5D,cAAc,CAAC,OAAf,CAAuB,IAAI,CAAC,SAAL,CAAe,IAAI,CAAC,KAApB,CAAvB,IAAqD,IAArD;EACD,CAFkC,CAAnC;EAIA,MAAM,YAAY,GAAG,gBAAgB,CAAE,IAAD,IAA0B;IAC9D,OAAO,cAAc,CAAC,OAAf,CAAuB,IAAI,CAAC,SAAL,CAAe,IAAI,CAAC,KAApB,CAAvB,CAAP;EACD,CAFoC,CAArC;EAIA,MAAM,iBAAiB,GAAG,KAAK,CAAC,WAAN,CAAkB,MAAK;IAC/C,OAAO;MACL,aAAa,EAAE,oBAAoB,CAAC,OAD/B;MAEL,qBAAqB,EAAE,qBAAqB,CAAC,OAFxC;MAGL,cAAc,EAAE,cAAc,CAAC;IAH1B,CAAP;EAKD,CANyB,EAMvB,EANuB,CAA1B;EAQA,OAAO;IACL,UAAU,EAAE;MACV,IAAI,EAAE;IADI,CADP;IAIL,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ;MACjC,GAAG,EAAE,aAAa,CAAC,GAAD,EAAM,QAAN,CADe;MAEjC,IAAI,EAAE,SAF2B;MAGjC,GAAG,eAH8B;MAIjC,GAAG;IAJ8B,CAAR,CAJtB;IAUL,UAVK;IAWL,QAXK;IAYL,aAZK;IAaL,IAbK;IAcL,QAdK;IAeL,UAfK;IAgBL,YAhBK;IAiBL,QAjBK;IAkBL;EAlBK,CAAP;AAoBD,CAxEM","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/"}

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["components/TabList/useTabListContextValues.tsx"],"names":[],"mappings":"AAEA,OAAM,SAAU,uBAAV,CAAkC,KAAlC,EAAqD;~~AACzD~~,~~QAAM~~;~~AACJ~~,~~IAAA,~~UADI;~~AAEJ~~,~~IAAA,~~QAFI;~~AAGJ~~,~~IAAA,~~aAAa,EAAE,WAHX;~~AAIJ~~,~~IAAA,~~UAJI;~~AAKJ~~,~~IAAA,~~YALI;~~AAMJ~~,~~IAAA,~~QANI;~~AAOJ~~,~~IAAA,~~iBAPI;~~AAQJ~~,~~IAAA,~~IARI;~~AASJ,IAAA~~;~~AATI~~,~~MAUF~~,KAVJ;~~AAYA~~,~~QAAM~~,OAAO,GAAwB;~~AACnC~~,~~IAAA,~~UADmC;~~AAEnC~~,~~IAAA,~~QAFmC;~~AAGnC~~,~~IAAA,~~aAAa,EAAE,WAHoB;~~AAInC~~,~~IAAA,~~QAJmC;~~AAKnC~~,~~IAAA,~~UALmC;~~AAMnC~~,~~IAAA,~~YANmC;~~AAOnC~~,~~IAAA,~~iBAPmC;~~AAQnC~~,~~IAAA,~~IARmC;~~AASnC,IAAA~~;~~AATmC~~,~~GAArC~~;~~AAYA~~,~~SAAO~~;~~AAAE,IAAA~~;~~AAAF~~,~~GAAP~~;AACD","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":["components/TabList/useTabListContextValues.tsx"],"names":[],"mappings":"AAEA,OAAM,SAAU,uBAAV,CAAkC,KAAlC,EAAqD;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","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/"}

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["components/TabList/useTabListStyles.ts"],"names":[],"mappings":"AACA,mBAAqB,YAArB,QAAyC,gBAAzC;AAGA,OAAO,MAAM,iBAAiB,GAAiC;~~AAC7D~~,~~EAAA,~~IAAI,EAAE;AADuD,CAAxD;AAIP;;AAEG;;AACH,MAAM,SAAS,gBAAG;~~AAAA~~;~~AAAA~~;~~AAAA~~;~~AAAA~~;~~AAAA~~;~~AAAA~~;~~AAAA~~;~~AAAA~~;~~AAAA~~;~~AAAA~~;~~AAAA~~;~~AAAA~~;~~AAAA~~;~~AAAA~~;~~AAAA~~;AAAA;~~AAAA~~;AAAA,EAAlB;AAkBA;;AAEG;;;AACH,OAAO,MAAM,yBAAyB,GAAI,KAAD,IAAsC;~~AAC7E~~,~~QAAM~~;~~AAAE,IAAA~~;~~AAAF~~,~~MAAe~~,KAArB;~~AAEA~~,~~QAAM~~,MAAM,GAAG,SAAS,EAAxB;~~AAEA~~,~~EAAA,~~KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,iBAAiB,CAAC,IADe,EAEjC,MAAM,CAAC,IAF0B,EAGjC,QAAQ,GAAG,MAAM,CAAC,QAAV,GAAqB,MAAM,CAAC,UAHH,EAIjC,KAAK,CAAC,IAAN,CAAW,SAJsB,CAAnC;~~AAOA~~,~~SAAO~~,KAAP;AACD,CAbM","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":["components/TabList/useTabListStyles.ts"],"names":[],"mappings":"AACA,mBAAqB,YAArB,QAAyC,gBAAzC;AAGA,OAAO,MAAM,iBAAiB,GAAiC;EAC7D,IAAI,EAAE;AADuD,CAAxD;AAIP;;AAEG;;AACH,MAAM,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;AAkBA;;AAEG;;;AACH,OAAO,MAAM,yBAAyB,GAAI,KAAD,IAAsC;EAC7E,MAAM;IAAE;EAAF,IAAe,KAArB;EAEA,MAAM,MAAM,GAAG,SAAS,EAAxB;EAEA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,iBAAiB,CAAC,IADe,EAEjC,MAAM,CAAC,IAF0B,EAGjC,QAAQ,GAAG,MAAM,CAAC,QAAV,GAAqB,MAAM,CAAC,UAHH,EAIjC,KAAK,CAAC,IAAN,CAAW,SAJsB,CAAnC;EAOA,OAAO,KAAP;AACD,CAbM","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/"}

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["components/Tab/Tab.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,QAAA,gBAAA,OAAA,CAAA,UAAA,CAAA;;AACA,MAAA,WAAA,gBAAA,OAAA,CAAA,aAAA,CAAA;;AACA,MAAA,cAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,GAAA,gBAAqC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;~~AAChF~~,~~QAAM~~,KAAK,GAAG,QAAA,CAAA,eAAA,CAAgB,KAAhB,EAAuB,GAAvB,CAAd;~~AAEA~~,~~EAAA,~~cAAA,CAAA,qBAAA,CAAsB,KAAtB;~~AACA~~,~~SAAO~~,WAAA,CAAA,kBAAA,CAAmB,KAAnB,CAAP;AACD,CALiD,CAArC;AAOb,OAAA,CAAA,GAAA,CAAI,WAAJ,GAAkB,KAAlB","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';\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 return renderTab_unstable(state);\n});\n\nTab.displayName = 'Tab';\n"],"sourceRoot":"../src/"}
1	+ {"version":3,"sources":["components/Tab/Tab.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,QAAA,gBAAA,OAAA,CAAA,UAAA,CAAA;;AACA,MAAA,WAAA,gBAAA,OAAA,CAAA,aAAA,CAAA;;AACA,MAAA,cAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,GAAA,gBAAqC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAChF,MAAM,KAAK,GAAG,QAAA,CAAA,eAAA,CAAgB,KAAhB,EAAuB,GAAvB,CAAd;EAEA,cAAA,CAAA,qBAAA,CAAsB,KAAtB;EACA,OAAO,WAAA,CAAA,kBAAA,CAAmB,KAAnB,CAAP;AACD,CALiD,CAArC;AAOb,OAAA,CAAA,GAAA,CAAI,WAAJ,GAAkB,KAAlB","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';\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 return renderTab_unstable(state);\n});\n\nTab.displayName = 'Tab';\n"],"sourceRoot":"../src/"}

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["components/Tab/renderTab.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,kBAAkB,GAAI,KAAD,IAAoB;~~AACpD~~,~~QAAM~~;~~AAAE~~,~~IAAA,~~KAAF;~~AAAS,IAAA~~;~~AAAT~~,~~MAAuB~~,iBAAA,CAAA,QAAA,CAAmB,KAAnB,CAA7B;~~AAEA~~,~~SACE~~,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;~~AAAf~~,~~GAAX~~,EACG,KAAK,CAAC,IAAN,IAAc,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;~~AAAf~~,~~GAAX~~,CADjB,EAEG,CAAC,KAAK,CAAC,QAAP,IAAmB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,OAAP,EAAc,EAAA,GAAK,SAAS,CAAC;~~AAAf~~,~~GAAd~~,CAFtB,CADF;AAMD,CATM;;AAAM,OAAA,CAAA,kBAAA,GAAkB,kBAAlB","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 </slots.root>\n );\n};\n"],"sourceRoot":"../src/"}
1	+ {"version":3,"sources":["components/Tab/renderTab.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,kBAAkB,GAAI,KAAD,IAAoB;EACpD,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAAmB,KAAnB,CAA7B;EAEA,OACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACG,KAAK,CAAC,IAAN,IAAc,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,CADjB,EAEG,CAAC,KAAK,CAAC,QAAP,IAAmB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,OAAP,EAAc,EAAA,GAAK,SAAS,CAAC;EAAf,CAAd,CAFtB,CADF;AAMD,CATM;;AAAM,OAAA,CAAA,kBAAA,GAAkB,kBAAlB","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 </slots.root>\n );\n};\n"],"sourceRoot":"../src/"}

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["components/Tab/useTab.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAEA,MAAA,gBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,wBAAA,gBAAA,OAAA,CAAA,kCAAA,CAAA;AAGA;;;;;;;;AAQG;;;AACI,MAAM,eAAe,GAAG,CAAC,KAAD,EAAkB,GAAlB,KAA2D;~~AACxF~~,~~QAAM~~;~~AAAE~~,~~IAAA,~~OAAF;~~AAAW~~,~~IAAA,~~QAAQ,EAAE,WAAW,GAAG,KAAnC;~~AAA0C~~,~~IAAA,~~IAA1C;~~AAAgD,IAAA~~;~~AAAhD~~,~~MAA0D~~,KAAhE;~~AAEA~~,~~QAAM~~,UAAU,GAAG,wBAAA,CAAA,kBAAA,CAAmB,gBAAA,CAAA,cAAnB,EAAmC,GAAG,IAAI,GAAG,CAAC,UAA9C,CAAnB;~~AACA~~,~~QAAM~~,YAAY,GAAG,wBAAA,CAAA,kBAAA,CAAmB,gBAAA,CAAA,cAAnB,EAAmC,GAAG,IAAI,GAAG,CAAC,QAA9C,CAArB;~~AACA~~,~~QAAM~~,QAAQ,GAAG,wBAAA,CAAA,kBAAA,CAAmB,gBAAA,CAAA,cAAnB,EAAmC,GAAG,IAAI,GAAG,CAAC,aAAJ,KAAsB,KAAhE,CAAjB;~~AACA~~,~~QAAM~~,UAAU,GAAG,wBAAA,CAAA,kBAAA,CAAmB,gBAAA,CAAA,cAAnB,EAAmC,GAAG,IAAI,GAAG,CAAC,UAA9C,CAAnB;~~AACA~~,~~QAAM~~,YAAY,GAAG,wBAAA,CAAA,kBAAA,CAAmB,gBAAA,CAAA,cAAnB,EAAmC,GAAG,IAAI,GAAG,CAAC,YAA9C,CAArB;~~AACA~~,~~QAAM~~,QAAQ,GAAG,wBAAA,CAAA,kBAAA,CAAmB,gBAAA,CAAA,cAAnB,EAAmC,GAAG,IAAI,GAAG,CAAC,QAA9C,CAAjB;~~AACA~~,~~QAAM~~,IAAI,GAAG,wBAAA,CAAA,kBAAA,CAAmB,gBAAA,CAAA,cAAnB,EAAmC,GAAG,IAAI,GAAG,CAAC,IAA9C,CAAb;~~AACA~~,~~QAAM~~,QAAQ,GAAG,wBAAA,CAAA,kBAAA,CAAmB,gBAAA,CAAA,cAAnB,EAAmC,GAAG,IAAI,CAAC,CAAC,GAAG,CAAC,QAAhD,CAAjB;~~AACA~~,~~QAAM~~,QAAQ,GAAG,YAAY,IAAI,WAAjC;~~AAEA~~,~~QAAM~~,QAAQ,GAAG,KAAK,CAAC,MAAN,CAA0B,IAA1B,CAAjB;~~AACA~~,~~QAAM~~,OAAO,GAAG,iBAAA,CAAA,gBAAA,CAAkB,KAAD,IAA2B,QAAQ,CAAC,KAAD,EAAQ;~~AAAE,IAAA~~;~~AAAF~~,~~GAAR~~,CAApD,CAAhB;~~AAEA~~,~~EAAA,~~KAAK,CAAC,SAAN,CAAgB,MAAK;~~AACnB~~,~~IAAA,~~UAAU,CAAC;~~AACT~~,~~MAAA,~~KADS;~~AAET~~,~~MAAA,~~GAAG,EAAE;~~AAFI~~,~~KAAD~~,CAAV;~~AAKA~~,~~WAAO~~,MAAK;~~AACV~~,~~MAAA,~~YAAY,CAAC;~~AAAE~~,~~QAAA,~~KAAF;~~AAAS~~,~~QAAA,~~GAAG,EAAE;~~AAAd~~,~~OAAD~~,CAAZ;~~AACD~~,~~KAFD~~;~~AAGD~~,~~GATD~~,EASG,CAAC,UAAD,EAAa,YAAb,EAA2B,QAA3B,EAAqC,KAArC,CATH;~~AAWA~~,~~QAAM~~,aAAa,GAAG,iBAAA,CAAA,gBAAA,CAAiB,IAAjB,CAAtB;~~AACA~~,~~QAAM~~,gBAAgB,GAAG,iBAAA,CAAA,gBAAA,CAAiB,OAAjB,EAA0B;~~AAAE~~,~~IAAA,~~QAAQ,EAAE,IAAZ;~~AAAkB~~,~~IAAA,~~YAAY,EAAE;~~AAAE~~,~~MAAA,~~QAAQ,EAAE,KAAK,CAAC;~~AAAlB~~;~~AAAhC~~,~~GAA1B~~,CAAzB;~~AACA~~,~~SAAO~~;~~AACL~~,~~IAAA,~~UAAU,EAAE;~~AACV~~,~~MAAA,~~IAAI,EAAE,QADI;~~AAEV~~,~~MAAA,~~IAAI,EAAE,MAFI;~~AAGV~~,~~MAAA,~~OAAO,EAAE;~~AAHC~~,~~KADP~~;~~AAML~~,~~IAAA,~~IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,QAAtB,EAAgC;~~AACpC~~,~~MAAA,~~GAAG,EAAE,iBAAA,CAAA,aAAA,CAAc,GAAd,EAAmB,QAAnB,CAD+B;~~AAEpC~~,~~MAAA,~~IAAI,EAAE,KAF8B;~~AAGpC~~;~~AACA~~;~~AACA~~,~~uBAAiB~~,QAAQ,GAAG,SAAH,GAAe,GAAG,QAAQ,EALf;~~AAMpC~~,~~SAAG~~,KANiC;~~AAOpC~~,~~MAAA,~~QAPoC;~~AAQpC,MAAA~~;~~AARoC~~,~~KAAhC~~,CAND;~~AAgBL~~,~~IAAA,~~IAAI,EAAE,aAhBD;~~AAiBL~~,~~IAAA,~~QAAQ,EAAE,OAAO,CAAC,CAAA,aAAa,KAAA,IAAb,IAAA,aAAa,KAAA,KAAA,CAAb,GAAa,KAAA,CAAb,GAAA,aAAa,CAAE,QAAf,KAA2B,CAAC,gBAAgB,CAAC,QAA9C,CAjBZ;~~AAkBL~~,~~IAAA,~~OAAO,EAAE,gBAlBJ;~~AAmBL~~,~~IAAA,~~UAnBK;~~AAoBL~~,~~IAAA,~~QApBK;~~AAqBL~~,~~IAAA,~~QArBK;~~AAsBL~~,~~IAAA,~~IAtBK;~~AAuBL~~,~~IAAA,~~KAvBK;~~AAwBL,IAAA~~;~~AAxBK~~,~~GAAP~~;AA0BD,CAvDM;;AAAM,OAAA,CAAA,eAAA,GAAe,eAAf","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport type { TabProps, TabState } from './Tab.types';\nimport { TabListContext } from '../TabList/TabListContext';\nimport { useContextSelector } from '@fluentui/react-context-selector';\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 = useContextSelector(TabListContext, ctx => ctx.appearance);\n const listDisabled = useContextSelector(TabListContext, ctx => ctx.disabled);\n const selected = useContextSelector(TabListContext, ctx => ctx.selectedValue === value);\n const onRegister = useContextSelector(TabListContext, ctx => ctx.onRegister);\n const onUnregister = useContextSelector(TabListContext, ctx => ctx.onUnregister);\n const onSelect = useContextSelector(TabListContext, ctx => ctx.onSelect);\n const size = useContextSelector(TabListContext, ctx => ctx.size);\n const vertical = useContextSelector(TabListContext, 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 // 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 disabled,\n selected,\n size,\n value,\n vertical,\n };\n};\n"],"sourceRoot":"../src/"}
1	+ {"version":3,"sources":["components/Tab/useTab.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport type { TabProps, TabState } from './Tab.types';\nimport { TabListContext } from '../TabList/TabListContext';\nimport { useContextSelector } from '@fluentui/react-context-selector';\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 = useContextSelector(TabListContext, ctx => ctx.appearance);\n const listDisabled = useContextSelector(TabListContext, ctx => ctx.disabled);\n const selected = useContextSelector(TabListContext, ctx => ctx.selectedValue === value);\n const onRegister = useContextSelector(TabListContext, ctx => ctx.onRegister);\n const onUnregister = useContextSelector(TabListContext, ctx => ctx.onUnregister);\n const onSelect = useContextSelector(TabListContext, ctx => ctx.onSelect);\n const size = useContextSelector(TabListContext, ctx => ctx.size);\n const vertical = useContextSelector(TabListContext, 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 // 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 disabled,\n selected,\n size,\n value,\n vertical,\n };\n};\n"],"sourceRoot":"../src/"}

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

@@ -27,23 +27,27 @@ const useActiveIndicatorStyles = /*#__PURE__*/react_1.__styles({
     "Bmxbyg5": "f1y7q3j9"
   },
   "animated": {
-    "wbfbqe": "fopw4to",
-    "mafdb0": "f1gswng4",
-    "Jgwf15": "fjw9r1k",
-    "Bh4j9q1": "f1cif4e6",
-    "Gk6w4d": "fa42t5a"
+    "Ba2ppi3": "fhwpy7i",
+    "F2fol1": "f6zz20j",
+    "B1dyfl9": "f1ai4sc1",
+    "B0vmy72": "f9qxlq5",
+    "u9bimw": "f1aql376"
   },
   "horizontal": {
-    "Blx6ldh": ["f1g89gis", "fcjnwxz"],
-    "xn0juu": "f7m34ad"
+    "sjv3b2": ["fug4aj8", "f1i5xzg7"],
+    "b1kco5": "f1q7ujh"
   },
   "vertical": {
-    "Blx6ldh": "fqfgdei",
-    "xn0juu": "fwvsziq"
+    "sjv3b2": "f1hqboyk",
+    "b1kco5": "f1dxupa6"
   }
 }, {
-  "d": [".f1mtd64y{overflow-x:visible;}", ".f1y7q3j9{overflow-y:visible;}", ".fopw4to:after{transition-property:transform;}", ".f1gswng4:after{transition-duration:var(--durationSlow);}", ".fjw9r1k:after{transition-timing-function:var(--curveDecelerateMax);}", ".f1g89gis:after{transform-origin:left;}", ".fcjnwxz:after{transform-origin:right;}", ".f7m34ad:after{-webkit-transform:translateX(var(--fui-Tab__indicator--offset)) scaleX(var(--fui-Tab__indicator--scale));-moz-transform:translateX(var(--fui-Tab__indicator--offset)) scaleX(var(--fui-Tab__indicator--scale));-ms-transform:translateX(var(--fui-Tab__indicator--offset)) scaleX(var(--fui-Tab__indicator--scale));transform:translateX(var(--fui-Tab__indicator--offset)) scaleX(var(--fui-Tab__indicator--scale));}", ".fqfgdei:after{transform-origin:top;}", ".fwvsziq:after{-webkit-transform:translateY(var(--fui-Tab__indicator--offset)) scaleY(var(--fui-Tab__indicator--scale));-moz-transform:translateY(var(--fui-Tab__indicator--offset)) scaleY(var(--fui-Tab__indicator--scale));-ms-transform:translateY(var(--fui-Tab__indicator--offset)) scaleY(var(--fui-Tab__indicator--scale));transform:translateY(var(--fui-Tab__indicator--offset)) scaleY(var(--fui-Tab__indicator--scale));}"],
-  "t": ["@media (prefers-reduced-motion: reduce){.f1cif4e6:after{transition-property:none;}}", "@media (prefers-reduced-motion: reduce){.fa42t5a:after{transition-duration:0.01ms;}}"]
+  "d": [".f1mtd64y{overflow-x:visible;}", ".f1y7q3j9{overflow-y:visible;}", ".fhwpy7i::after{transition-property:transform;}", ".f6zz20j::after{transition-duration:var(--durationSlow);}", ".f1ai4sc1::after{transition-timing-function:var(--curveDecelerateMax);}", ".fug4aj8::after{transform-origin:left;}", ".f1i5xzg7::after{transform-origin:right;}", ".f1q7ujh::after{-webkit-transform:translateX(var(--fui-Tab__indicator--offset)) scaleX(var(--fui-Tab__indicator--scale));-moz-transform:translateX(var(--fui-Tab__indicator--offset)) scaleX(var(--fui-Tab__indicator--scale));-ms-transform:translateX(var(--fui-Tab__indicator--offset)) scaleX(var(--fui-Tab__indicator--scale));transform:translateX(var(--fui-Tab__indicator--offset)) scaleX(var(--fui-Tab__indicator--scale));}", ".f1hqboyk::after{transform-origin:top;}", ".f1dxupa6::after{-webkit-transform:translateY(var(--fui-Tab__indicator--offset)) scaleY(var(--fui-Tab__indicator--scale));-moz-transform:translateY(var(--fui-Tab__indicator--offset)) scaleY(var(--fui-Tab__indicator--scale));-ms-transform:translateY(var(--fui-Tab__indicator--offset)) scaleY(var(--fui-Tab__indicator--scale));transform:translateY(var(--fui-Tab__indicator--offset)) scaleY(var(--fui-Tab__indicator--scale));}"],
+  "m": [["@media (prefers-reduced-motion: reduce){.f9qxlq5::after{transition-property:none;}}", {
+    "m": "(prefers-reduced-motion: reduce)"
+  }], ["@media (prefers-reduced-motion: reduce){.f1aql376::after{transition-duration:0.01ms;}}", {
+    "m": "(prefers-reduced-motion: reduce)"
+  }]]
 });
 const calculateTabRect = element => {

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["components/Tab/useTabAnimatedIndicator.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAGA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,wBAAA,gBAAA,OAAA,CAAA,kCAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAEA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA,C,CAEA;;;AACA,MAAM,4BAA4B,GAAG;~~AACnC~~,~~EAAA,~~SAAS,EAAE,8BADwB;~~AAEnC~~,~~EAAA,~~QAAQ,EAAE;AAFyB,CAArC;;AAKA,MAAM,wBAAwB,gBAAG,OAAA,SAAA;~~AAAA~~;~~AAAA~~;~~AAAA~~;~~AAAA~~;~~AAAA~~;~~AAAA~~;~~AAAA~~;~~AAAA~~;~~AAAA~~;~~AAAA~~;~~AAAA~~;~~AAAA~~;~~AAAA~~;~~AAAA~~;~~AAAA~~;~~AAAA~~;~~AAAA~~;~~AAAA~~;~~AAAA~~;AAAA;~~AAAA~~;~~AAAA~~;AAAA,EAAjC;;AAkCA,MAAM,gBAAgB,GAAI,OAAD,IAAyB;;;~~AAChD~~,~~MAAI~~,OAAJ,EAAa;~~AACX~~,~~UAAM~~,UAAU,GAAG,CAAA,CAAA,EAAA,GAAA,OAAO,CAAC,aAAR,MAAqB,IAArB,IAAqB,EAAA,KAAA,KAAA,CAArB,GAAqB,KAAA,CAArB,GAAqB,EAAA,CAAE,qBAAF,EAArB,KAAkD;~~AAAE~~,~~MAAA,~~CAAC,EAAE,CAAL;~~AAAQ~~,~~MAAA,~~CAAC,EAAE,CAAX;~~AAAc~~,~~MAAA,~~KAAK,EAAE,CAArB;~~AAAwB~~,~~MAAA,~~MAAM,EAAE;~~AAAhC~~,~~KAArE~~;~~AACA~~,~~UAAM~~,OAAO,GAAG,OAAO,CAAC,qBAAR,EAAhB;~~AAEA~~,~~WAAO~~;~~AACL~~,~~MAAA,~~CAAC,EAAE,OAAO,CAAC,CAAR,GAAY,UAAU,CAAC,CADrB;~~AAEL~~,~~MAAA,~~CAAC,EAAE,OAAO,CAAC,CAAR,GAAY,UAAU,CAAC,CAFrB;~~AAGL~~,~~MAAA,~~KAAK,EAAE,OAAO,CAAC,KAHV;~~AAIL~~,~~MAAA,~~MAAM,EAAE,OAAO,CAAC;~~AAJX~~,~~KAAP~~;~~AAMD~~;;~~AACD~~,~~SAAO~~,SAAP;AACD,CAbD;;AAeA,MAAM,oBAAoB,GAAG,CAAC,cAAD,EAAkD,KAAlD,KAAsE;;;~~AACjG~~,~~QAAM~~,OAAO,GACX,KAAK,KAAK,SAAV,IAAuB,KAAK,KAAK,IAAjC,GAAwC,CAAA,EAAA,GAAA,cAAc,CAAC,IAAI,CAAC,SAAL,CAAe,KAAf,CAAD,CAAd,MAAqC,IAArC,IAAqC,EAAA,KAAA,KAAA,CAArC,GAAqC,KAAA,CAArC,GAAqC,EAAA,CAAE,GAAF,CAAM,OAAnF,GAA6F,SAD/F;~~AAEA~~,~~SAAO~~,OAAO,GAAG,gBAAgB,CAAC,OAAD,CAAnB,GAA+B,SAA7C;AACD,CAJD;AAMA;;AAEG;;;AACI,MAAM,sCAAsC,GAAI,KAAD,IAA8B;~~AAClF~~,~~QAAM~~;~~AAAE~~,~~IAAA,~~QAAF;~~AAAY~~,~~IAAA,~~QAAZ;~~AAAsB,IAAA~~;~~AAAtB~~,~~MAAmC~~,KAAzC;~~AAEA~~,~~QAAM~~,qBAAqB,GAAG,wBAAwB,EAAtD;~~AACA~~,~~QAAM~~,CAAC,gBAAD,EAAmB,mBAAnB,IAA0C,KAAK,CAAC,QAAN,EAAhD;~~AACA~~,~~QAAM~~,CAAC,eAAD,EAAkB,kBAAlB,IAAwC,KAAK,CAAC,QAAN,CAAe;~~AAAE~~,~~IAAA,~~MAAM,EAAE,CAAV;~~AAAa~~,~~IAAA,~~KAAK,EAAE;~~AAApB~~,~~GAAf~~,CAA9C;~~AACA~~,~~QAAM~~,iBAAiB,GAAG,wBAAA,CAAA,kBAAA,CAAmB,gBAAA,CAAA,cAAnB,EAAmC,GAAG,IAAI,GAAG,CAAC,iBAA9C,CAA1B;~~AAEA~~,~~EAAA,~~KAAK,CAAC,SAAN,CAAgB,MAAK;~~AACnB~~,~~QAAI~~,gBAAJ,EAAsB;~~AACpB~~,~~MAAA,~~kBAAkB,CAAC;~~AAAE~~,~~QAAA,~~MAAM,EAAE,CAAV;~~AAAa~~,~~QAAA,~~KAAK,EAAE;~~AAApB~~,~~OAAD~~,CAAlB;~~AACD~~;~~AACF~~,~~GAJD~~,EAIG,CAAC,gBAAD,CAJH;;~~AAMA~~,~~MAAI~~,QAAJ,EAAc;~~AACZ~~,~~UAAM~~;~~AAAE~~,~~MAAA,~~qBAAF;~~AAAyB~~,~~MAAA,~~aAAzB;~~AAAwC,MAAA~~;~~AAAxC~~,~~QAA2D~~,iBAAiB,EAAlF;~~AACA~~,~~UAAM~~,uBAAuB,GAAG,oBAAoB,CAAC,cAAD,EAAiB,qBAAjB,CAApD;~~AACA~~,~~UAAM~~,eAAe,GAAG,oBAAoB,CAAC,cAAD,EAAiB,aAAjB,CAA5C;;~~AAEA~~,~~QACE~~,eAAe,IACf,uBADA,IAEA,qBAFA,IAGA,gBAAgB,KAAK,qBAJvB,EAKE;~~AACA~~,~~YAAM~~,MAAM,GAAG,QAAQ,GACnB,uBAAuB,CAAC,CAAxB,GAA4B,eAAe,CAAC,CADzB,GAEnB,uBAAuB,CAAC,CAAxB,GAA4B,eAAe,CAAC,CAFhD;~~AAIA~~,~~YAAM~~,KAAK,GAAG,QAAQ,GAClB,uBAAuB,CAAC,MAAxB,GAAiC,eAAe,CAAC,MAD/B,GAElB,uBAAuB,CAAC,KAAxB,GAAgC,eAAe,CAAC,KAFpD;~~AAIA~~,~~MAAA,~~kBAAkB,CAAC;~~AAAE~~,~~QAAA,~~MAAF;~~AAAU,QAAA~~;~~AAAV~~,~~OAAD~~,CAAlB;~~AACA~~,~~MAAA,~~mBAAmB,CAAC,qBAAD,CAAnB;~~AACD~~;~~AACF~~,~~GAtBD~~,MAsBO,IAAI,gBAAJ,EAAsB;~~AAC3B~~;~~AACA~~;~~AACA~~,~~IAAA,~~mBAAmB,CAAC,SAAD,CAAnB;~~AACD~~,~~GAxCiF~~,CA0ClF;;;~~AACA~~,~~MAAI~~,QAAJ,EAAc;~~AACZ~~,~~WAAO~~,KAAP;~~AACD~~,~~GA7CiF~~,CA+ClF;~~AACA~~;;;~~AACA~~,~~QAAM~~,SAAS,GAAG,eAAe,CAAC,MAAhB,KAA2B,CAA3B,IAAgC,eAAe,CAAC,KAAhB,KAA0B,CAA5E;~~AAEA~~,~~EAAA,~~KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,KAAK,CAAC,IAAN,CAAW,SADU,EAErB,QAAQ,IAAI,qBAAqB,CAAC,IAFb,EAGrB,QAAQ,IAAI,SAAZ,IAAyB,qBAAqB,CAAC,QAH1B,EAIrB,QAAQ,KAAK,QAAQ,GAAG,qBAAqB,CAAC,QAAzB,GAAoC,qBAAqB,CAAC,UAAvE,CAJa,CAAvB;~~AAOA~~,~~QAAM~~,WAAW,GAAG;~~AAClB~~,~~KAAC~~,4BAA4B,CAAC,SAA9B,GAA0C,GAAG,eAAe,CAAC,MAAM,IADjD;~~AAElB~~,~~KAAC~~,4BAA4B,CAAC,QAA9B,GAAyC,GAAG,eAAe,CAAC,KAAK;~~AAF~~/C,~~GAApB~~;~~AAKA~~,~~EAAA,~~KAAK,CAAC,IAAN,CAAW,KAAX,GAAmB,EACjB,GAAG,WADc;~~AAEjB~~,~~OAAG~~,KAAK,CAAC,IAAN,CAAW;~~AAFG~~,~~GAAnB~~;~~AAKA~~,~~SAAO~~,KAAP;AACD,CArEM;;AAAM,OAAA,CAAA,sCAAA,GAAsC,sCAAtC","sourcesContent":["import * as React from 'react';\nimport type { TabState, TabValue } from './Tab.types';\n\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { useContextSelector } from '@fluentui/react-context-selector';\nimport { TabListContext } 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 = useContextSelector(TabListContext, 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"],"sourceRoot":"../src/"}
1	+ {"version":3,"sources":["components/Tab/useTabAnimatedIndicator.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport type { TabState, TabValue } from './Tab.types';\n\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { useContextSelector } from '@fluentui/react-context-selector';\nimport { TabListContext } 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 = useContextSelector(TabListContext, 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"],"sourceRoot":"../src/"}

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

@@ -205,7 +205,11 @@ const usePendingIndicatorStyles = /*#__PURE__*/react_1.__styles({
 }, {
   "h": [".fhw179n:hover::before{background-color:var(--colorNeutralStroke1Hover);}", ".f10y1uxy:hover::before{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f6aiuy0:hover::before{border-bottom-left-radius:var(--borderRadiusCircular);}", ".f1kfpfnu:hover::before{border-top-right-radius:var(--borderRadiusCircular);}", ".f1dx5wco:hover::before{border-top-left-radius:var(--borderRadiusCircular);}", ".f1kmhr4c:hover::before{content:\"\";}", ".fl1ydde:hover::before{position:absolute;}", ".f1ut20fw:hover::before{background-color:var(--colorTransparentStroke);}"],
   "a": [".f1y7maxz:active::before{background-color:var(--colorNeutralStroke1Pressed);}", ".f105swax:active::before{border-bottom-right-radius:var(--borderRadiusCircular);}", ".fscdmel:active::before{border-bottom-left-radius:var(--borderRadiusCircular);}", ".f1tkcw1w:active::before{border-top-right-radius:var(--borderRadiusCircular);}", ".f1u11x8o:active::before{border-top-left-radius:var(--borderRadiusCircular);}", ".f16cxu0:active::before{content:\"\";}", ".f1nwgacf:active::before{position:absolute;}", ".fhrzcfn:active::before{background-color:var(--colorTransparentStroke);}"],
-  "t": ["@media (forced-colors: active){.f15ovonk:hover::before{background-color:Highlight;}}", "@media (forced-colors: active){.fvje46l:active::before{background-color:Highlight;}}"],
+  "m": [["@media (forced-colors: active){.f15ovonk:hover::before{background-color:Highlight;}}", {
+    "m": "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fvje46l:active::before{background-color:Highlight;}}", {
+    "m": "(forced-colors: active)"
+  }]],
   "d": [".fchca7p::before{bottom:0;}", ".f1s2r9ax::before{height:var(--strokeWidthThicker);}", ".f1o0nnkk::before{left:var(--spacingHorizontalM);}", ".fxb7rol::before{right:var(--spacingHorizontalM);}", ".f17jracn::before{bottom:var(--spacingVerticalS);}", ".f1fzr1x6::before{left:0;}", ".f1f351id::before{right:0;}", ".f117lcb2::before{top:var(--spacingVerticalS);}", ".f1aij3q::before{width:var(--strokeWidthThicker);}", ".f1r53b5e::before{height:var(--strokeWidthThick);}", ".f1s6rxz5::before{left:var(--spacingHorizontalSNudge);}", ".fo35v8s::before{right:var(--spacingHorizontalSNudge);}", ".fze4zud::before{bottom:var(--spacingVerticalXS);}", ".fdp32p8::before{top:var(--spacingVerticalXS);}"]
 });
@@ -259,7 +263,13 @@ const useActiveIndicatorStyles = /*#__PURE__*/react_1.__styles({
   "d": [".f1rp0jgh::after{background-color:var(--colorTransparentStroke);}", ".fprarqb::after{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f14vs0nd::after{border-bottom-left-radius:var(--borderRadiusCircular);}", ".f1gtfqs9::after{border-top-right-radius:var(--borderRadiusCircular);}", ".f18zvfd9::after{border-top-left-radius:var(--borderRadiusCircular);}", ".f13zj6fq::after{content:\"\";}", ".f1mdlcz9::after{position:absolute;}", ".ffmd2fr::after{z-index:1;}", ".f1ksivud::after{background-color:var(--colorCompoundBrandStroke);}", ".f13lkzet::after{background-color:var(--colorNeutralForegroundDisabled);}", ".fo72kxq::after{bottom:0;}", ".f1vx7lu8::after{height:var(--strokeWidthThicker);}", ".fna7m5n::after{left:var(--spacingHorizontalM);}", ".f1oxpfwv::after{right:var(--spacingHorizontalM);}", ".fipylg0::after{bottom:var(--spacingVerticalS);}", ".f1n6gb5g::after{left:0;}", ".f15yvnhg::after{right:0;}", ".fqchiol::after{top:var(--spacingVerticalS);}", ".f1o25lip::after{width:var(--strokeWidthThicker);}", ".f9bb2ob::after{height:var(--strokeWidthThick);}", ".f1q70ajw::after{left:var(--spacingHorizontalSNudge);}", ".f18rbzdx::after{right:var(--spacingHorizontalSNudge);}", ".fqbue9b::after{bottom:var(--spacingVerticalXS);}", ".fk1klkt::after{top:var(--spacingVerticalXS);}"],
   "h": [".f1eytvvh:hover::after{background-color:var(--colorCompoundBrandStrokeHover);}"],
   "a": [".fuaa9s:active::after{background-color:var(--colorCompoundBrandStrokePressed);}"],
-  "t": ["@media (forced-colors: active){.fy7ktjt::after{background-color:ButtonText;}}", "@media (forced-colors: active){.f16tp0gf:hover::after{background-color:ButtonText;}}", "@media (forced-colors: active){.fj0yp7j:active::after{background-color:ButtonText;}}"]
+  "m": [["@media (forced-colors: active){.fy7ktjt::after{background-color:ButtonText;}}", {
+    "m": "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f16tp0gf:hover::after{background-color:ButtonText;}}", {
+    "m": "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fj0yp7j:active::after{background-color:ButtonText;}}", {
+    "m": "(forced-colors: active)"
+  }]]
 });
 /**
  * Styles for the icon slot.

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["components/Tab/useTabStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import type { TabSlots, TabState } from './Tab.types';\n\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport { useTabAnimatedIndicatorStyles_unstable } from './useTabAnimatedIndicator';\n\nexport const tabClassNames: SlotClassNames<TabSlots> = {\n root: 'fui-Tab',\n icon: 'fui-Tab__icon',\n content: 'fui-Tab__content',\n};\n\n/*\n Styles for the root slot\n /\n/ eslint-disable @typescript-eslint/naming-convention /\nconst useRootStyles = makeStyles({\n base: {\n alignItems: 'center',\n ...shorthands.borderColor('none'),\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n ...shorthands.borderWidth(0),\n cursor: 'pointer',\n display: 'grid',\n flexShrink: 0,\n gridAutoFlow: 'column',\n gridTemplateColumns: 'auto',\n gridTemplateRows: 'auto',\n fontFamily: tokens.fontFamilyBase,\n lineHeight: tokens.lineHeightBase300,\n outlineStyle: 'none',\n position: 'relative',\n ...shorthands.overflow('hidden'),\n textTransform: 'none',\n },\n horizontal: {\n justifyContent: 'center',\n },\n vertical: {\n justifyContent: 'start',\n },\n mediumHorizontal: {\n columnGap: tokens.spacingHorizontalSNudge,\n ...shorthands.padding(tokens.spacingVerticalM, tokens.spacingHorizontalMNudge),\n },\n mediumVertical: {\n // horizontal spacing is deliberate. This is the gap between icon and content.\n columnGap: tokens.spacingHorizontalSNudge,\n ...shorthands.padding(tokens.spacingVerticalSNudge, tokens.spacingHorizontalMNudge),\n },\n smallHorizontal: {\n columnGap: tokens.spacingHorizontalXXS,\n ...shorthands.padding(tokens.spacingVerticalSNudge, tokens.spacingHorizontalSNudge),\n },\n smallVertical: {\n // horizontal spacing is deliberate. This is the gap between icon and content.\n columnGap: tokens.spacingHorizontalXXS,\n ...shorthands.padding(tokens.spacingVerticalXXS, tokens.spacingHorizontalSNudge),\n },\n transparent: {\n backgroundColor: tokens.colorTransparentBackground,\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n },\n ':active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n },\n '& .fui-Tab__icon': {\n color: tokens.colorNeutralForeground2,\n },\n ':hover .fui-Tab__icon': {\n color: tokens.colorNeutralForeground2Hover,\n },\n ':active .fui-Tab__icon': {\n color: tokens.colorNeutralForeground2Pressed,\n },\n '& .fui-Tab__content': {\n color: tokens.colorNeutralForeground2,\n },\n ':hover .fui-Tab__content': {\n color: tokens.colorNeutralForeground2Hover,\n },\n ':active .fui-Tab__content': {\n color: tokens.colorNeutralForeground2Pressed,\n },\n },\n subtle: {\n backgroundColor: tokens.colorSubtleBackground,\n ':hover': {\n backgroundColor: tokens.colorSubtleBackgroundHover,\n },\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n },\n '& .fui-Tab__icon': {\n color: tokens.colorNeutralForeground2,\n },\n ':hover .fui-Tab__icon': {\n color: tokens.colorNeutralForeground2Hover,\n },\n ':active .fui-Tab__icon': {\n color: tokens.colorNeutralForeground2Pressed,\n },\n '& .fui-Tab__content': {\n color: tokens.colorNeutralForeground2,\n },\n ':hover .fui-Tab__content': {\n color: tokens.colorNeutralForeground2Hover,\n },\n ':active .fui-Tab__content': {\n color: tokens.colorNeutralForeground2Pressed,\n },\n },\n disabled: {\n backgroundColor: tokens.colorTransparentBackground,\n\n '& .fui-Tab__icon': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n '& .fui-Tab__content': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n cursor: 'not-allowed',\n },\n selected: {\n '& .fui-Tab__icon': {\n color: tokens.colorCompoundBrandForeground1,\n },\n ':hover .fui-Tab__icon': {\n color: tokens.colorCompoundBrandForeground1Hover,\n },\n ':active .fui-Tab__icon': {\n color: tokens.colorCompoundBrandForeground1Pressed,\n },\n '& .fui-Tab__content': {\n color: tokens.colorNeutralForeground1,\n },\n ':hover .fui-Tab__content': {\n color: tokens.colorNeutralForeground1Hover,\n },\n ':active .fui-Tab__content': {\n color: tokens.colorNeutralForeground1Pressed,\n },\n },\n});\n/ eslint-enable @typescript-eslint/naming-convention /\n\n/\n Focus styles for the root slot\n /\nconst useFocusStyles = makeStyles({\n // Tab creates a custom focus indicator because the default focus indicator\n // is applied using an ::after pseudo-element on the root. Since the selection\n // indicator uses an ::after pseudo-element on the root, there is a conflict.\n base: createCustomFocusIndicatorStyle({\n ...shorthands.borderColor('transparent'),\n outlineWidth: tokens.strokeWidthThick,\n outlineColor: 'transparent',\n outlineStyle: 'solid',\n boxShadow: `\n ${tokens.shadow4},\n 0 0 0 ${tokens.strokeWidthThick} ${tokens.colorStrokeFocus2}\n `,\n zIndex: 1,\n }),\n});\n\n/* Indicator styles for when pending selection /\nconst usePendingIndicatorStyles = makeStyles({\n base: {\n ':hover::before': {\n backgroundColor: tokens.colorNeutralStroke1Hover,\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n content: '\"\"',\n position: 'absolute',\n },\n ':active::before': {\n backgroundColor: tokens.colorNeutralStroke1Pressed,\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n content: '\"\"',\n position: 'absolute',\n },\n '@media (forced-colors: active)': {\n ':hover::before': {\n backgroundColor: 'Highlight',\n },\n ':active::before': {\n backgroundColor: 'Highlight',\n },\n },\n },\n disabled: {\n ':hover::before': {\n backgroundColor: tokens.colorTransparentStroke,\n },\n ':active::before': {\n backgroundColor: tokens.colorTransparentStroke,\n },\n },\n mediumHorizontal: {\n '::before': {\n bottom: 0,\n height: tokens.strokeWidthThicker,\n left: tokens.spacingHorizontalM,\n right: tokens.spacingHorizontalM,\n },\n },\n mediumVertical: {\n '::before': {\n bottom: tokens.spacingVerticalS,\n left: 0,\n top: tokens.spacingVerticalS,\n width: tokens.strokeWidthThicker,\n },\n },\n smallHorizontal: {\n '::before': {\n bottom: 0,\n height: tokens.strokeWidthThick,\n left: tokens.spacingHorizontalSNudge,\n right: tokens.spacingHorizontalSNudge,\n },\n },\n smallVertical: {\n '::before': {\n bottom: tokens.spacingVerticalXS,\n left: 0,\n top: tokens.spacingVerticalXS,\n width: tokens.strokeWidthThicker,\n },\n },\n});\n\nconst useActiveIndicatorStyles = makeStyles({\n base: {\n '::after': {\n backgroundColor: tokens.colorTransparentStroke,\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n content: '\"\"',\n position: 'absolute',\n zIndex: 1,\n },\n },\n selected: {\n '::after': {\n backgroundColor: tokens.colorCompoundBrandStroke,\n },\n ':hover::after': {\n backgroundColor: tokens.colorCompoundBrandStrokeHover,\n },\n ':active::after': {\n backgroundColor: tokens.colorCompoundBrandStrokePressed,\n },\n '@media (forced-colors: active)': {\n '::after': {\n backgroundColor: 'ButtonText',\n },\n ':hover::after': {\n backgroundColor: 'ButtonText',\n },\n ':active::after': {\n backgroundColor: 'ButtonText',\n },\n },\n },\n disabled: {\n '::after': {\n backgroundColor: tokens.colorNeutralForegroundDisabled,\n },\n },\n mediumHorizontal: {\n '::after': {\n bottom: '0',\n height: tokens.strokeWidthThicker,\n left: tokens.spacingHorizontalM,\n right: tokens.spacingHorizontalM,\n },\n },\n mediumVertical: {\n '::after': {\n bottom: tokens.spacingVerticalS,\n left: 0,\n top: tokens.spacingVerticalS,\n width: tokens.strokeWidthThicker,\n },\n },\n smallHorizontal: {\n '::after': {\n bottom: 0,\n height: tokens.strokeWidthThick,\n left: tokens.spacingHorizontalSNudge,\n right: tokens.spacingHorizontalSNudge,\n },\n },\n smallVertical: {\n '::after': {\n bottom: tokens.spacingVerticalXS,\n left: '0',\n top: tokens.spacingVerticalXS,\n width: tokens.strokeWidthThicker,\n },\n },\n});\n\n/\n Styles for the icon slot.\n /\nconst useIconStyles = makeStyles({\n base: {\n alignItems: 'center',\n display: 'inline-flex',\n justifyContent: 'center',\n ...shorthands.overflow('hidden'),\n },\n // per design, the small and medium font sizes are the same.\n // the size prop only affects spacing.\n small: {\n fontSize: '20px',\n height: '20px',\n width: '20px',\n },\n medium: {\n fontSize: '20px',\n height: '20px',\n width: '20px',\n },\n});\n\n/\n Styles for the content slot (children)\n /\nconst useContentStyles = makeStyles({\n base: {\n ...typographyStyles.body1,\n ...shorthands.overflow('hidden'),\n // content padding is the same for medium & small, horiztonal & vertical\n ...shorthands.padding(tokens.spacingVerticalNone, tokens.spacingHorizontalXXS),\n },\n selected: {\n ...typographyStyles.body1Strong,\n },\n});\n\n/\n Apply styling to the Tab slots based on the state\n */\nexport const useTabStyles_unstable = (state: TabState): TabState => {\n const rootStyles = useRootStyles();\n const focusStyles = useFocusStyles();\n const pendingIndicatorStyles = usePendingIndicatorStyles();\n const activeIndicatorStyles = useActiveIndicatorStyles();\n const iconStyles = useIconStyles();\n const contentStyles = useContentStyles();\n\n const { appearance, disabled, selected, size, vertical } = state;\n\n state.root.className = mergeClasses(\n tabClassNames.root,\n rootStyles.base,\n vertical ? rootStyles.vertical : rootStyles.horizontal,\n size !== 'small' && (vertical ? rootStyles.mediumVertical : rootStyles.mediumHorizontal),\n size === 'small' && (vertical ? rootStyles.smallVertical : rootStyles.smallHorizontal),\n focusStyles.base,\n !disabled && appearance === 'subtle' && rootStyles.subtle,\n !disabled && appearance === 'transparent' && rootStyles.transparent,\n !disabled && selected && rootStyles.selected,\n disabled && rootStyles.disabled,\n\n // pending indicator (before pseudo element)\n pendingIndicatorStyles.base,\n size !== 'small' && (vertical ? pendingIndicatorStyles.mediumVertical : pendingIndicatorStyles.mediumHorizontal),\n size === 'small' && (vertical ? pendingIndicatorStyles.smallVertical : pendingIndicatorStyles.smallHorizontal),\n disabled && pendingIndicatorStyles.disabled,\n\n // active indicator (after pseudo element)\n selected && activeIndicatorStyles.base,\n selected && !disabled && activeIndicatorStyles.selected,\n selected &&\n size !== 'small' &&\n (vertical ? activeIndicatorStyles.mediumVertical : activeIndicatorStyles.mediumHorizontal),\n selected &&\n size === 'small' &&\n (vertical ? activeIndicatorStyles.smallVertical : activeIndicatorStyles.smallHorizontal),\n selected && disabled && activeIndicatorStyles.disabled,\n state.root.className,\n );\n\n if (state.icon) {\n state.icon.className = mergeClasses(tabClassNames.icon, iconStyles.base, iconStyles[size], state.icon.className);\n }\n\n state.content.className = mergeClasses(\n tabClassNames.content,\n contentStyles.base,\n selected && contentStyles.selected,\n state.content.className,\n );\n\n useTabAnimatedIndicatorStyles_unstable(state);\n\n return state;\n};\n"],"sourceRoot":"../src/"}
1	+ {"version":3,"sources":["components/Tab/useTabStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import type { TabSlots, TabState } from './Tab.types';\n\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport { useTabAnimatedIndicatorStyles_unstable } from './useTabAnimatedIndicator';\n\nexport const tabClassNames: SlotClassNames<TabSlots> = {\n root: 'fui-Tab',\n icon: 'fui-Tab__icon',\n content: 'fui-Tab__content',\n};\n\n/*\n Styles for the root slot\n /\n/ eslint-disable @typescript-eslint/naming-convention /\nconst useRootStyles = makeStyles({\n base: {\n alignItems: 'center',\n ...shorthands.borderColor('none'),\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n ...shorthands.borderWidth(0),\n cursor: 'pointer',\n display: 'grid',\n flexShrink: 0,\n gridAutoFlow: 'column',\n gridTemplateColumns: 'auto',\n gridTemplateRows: 'auto',\n fontFamily: tokens.fontFamilyBase,\n lineHeight: tokens.lineHeightBase300,\n outlineStyle: 'none',\n position: 'relative',\n ...shorthands.overflow('hidden'),\n textTransform: 'none',\n },\n horizontal: {\n justifyContent: 'center',\n },\n vertical: {\n justifyContent: 'start',\n },\n mediumHorizontal: {\n columnGap: tokens.spacingHorizontalSNudge,\n ...shorthands.padding(tokens.spacingVerticalM, tokens.spacingHorizontalMNudge),\n },\n mediumVertical: {\n // horizontal spacing is deliberate. This is the gap between icon and content.\n columnGap: tokens.spacingHorizontalSNudge,\n ...shorthands.padding(tokens.spacingVerticalSNudge, tokens.spacingHorizontalMNudge),\n },\n smallHorizontal: {\n columnGap: tokens.spacingHorizontalXXS,\n ...shorthands.padding(tokens.spacingVerticalSNudge, tokens.spacingHorizontalSNudge),\n },\n smallVertical: {\n // horizontal spacing is deliberate. This is the gap between icon and content.\n columnGap: tokens.spacingHorizontalXXS,\n ...shorthands.padding(tokens.spacingVerticalXXS, tokens.spacingHorizontalSNudge),\n },\n transparent: {\n backgroundColor: tokens.colorTransparentBackground,\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n },\n ':active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n },\n '& .fui-Tab__icon': {\n color: tokens.colorNeutralForeground2,\n },\n ':hover .fui-Tab__icon': {\n color: tokens.colorNeutralForeground2Hover,\n },\n ':active .fui-Tab__icon': {\n color: tokens.colorNeutralForeground2Pressed,\n },\n '& .fui-Tab__content': {\n color: tokens.colorNeutralForeground2,\n },\n ':hover .fui-Tab__content': {\n color: tokens.colorNeutralForeground2Hover,\n },\n ':active .fui-Tab__content': {\n color: tokens.colorNeutralForeground2Pressed,\n },\n },\n subtle: {\n backgroundColor: tokens.colorSubtleBackground,\n ':hover': {\n backgroundColor: tokens.colorSubtleBackgroundHover,\n },\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n },\n '& .fui-Tab__icon': {\n color: tokens.colorNeutralForeground2,\n },\n ':hover .fui-Tab__icon': {\n color: tokens.colorNeutralForeground2Hover,\n },\n ':active .fui-Tab__icon': {\n color: tokens.colorNeutralForeground2Pressed,\n },\n '& .fui-Tab__content': {\n color: tokens.colorNeutralForeground2,\n },\n ':hover .fui-Tab__content': {\n color: tokens.colorNeutralForeground2Hover,\n },\n ':active .fui-Tab__content': {\n color: tokens.colorNeutralForeground2Pressed,\n },\n },\n disabled: {\n backgroundColor: tokens.colorTransparentBackground,\n\n '& .fui-Tab__icon': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n '& .fui-Tab__content': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n cursor: 'not-allowed',\n },\n selected: {\n '& .fui-Tab__icon': {\n color: tokens.colorCompoundBrandForeground1,\n },\n ':hover .fui-Tab__icon': {\n color: tokens.colorCompoundBrandForeground1Hover,\n },\n ':active .fui-Tab__icon': {\n color: tokens.colorCompoundBrandForeground1Pressed,\n },\n '& .fui-Tab__content': {\n color: tokens.colorNeutralForeground1,\n },\n ':hover .fui-Tab__content': {\n color: tokens.colorNeutralForeground1Hover,\n },\n ':active .fui-Tab__content': {\n color: tokens.colorNeutralForeground1Pressed,\n },\n },\n});\n/ eslint-enable @typescript-eslint/naming-convention /\n\n/\n Focus styles for the root slot\n /\nconst useFocusStyles = makeStyles({\n // Tab creates a custom focus indicator because the default focus indicator\n // is applied using an ::after pseudo-element on the root. Since the selection\n // indicator uses an ::after pseudo-element on the root, there is a conflict.\n base: createCustomFocusIndicatorStyle({\n ...shorthands.borderColor('transparent'),\n outlineWidth: tokens.strokeWidthThick,\n outlineColor: 'transparent',\n outlineStyle: 'solid',\n boxShadow: `\n ${tokens.shadow4},\n 0 0 0 ${tokens.strokeWidthThick} ${tokens.colorStrokeFocus2}\n `,\n zIndex: 1,\n }),\n});\n\n/* Indicator styles for when pending selection /\nconst usePendingIndicatorStyles = makeStyles({\n base: {\n ':hover::before': {\n backgroundColor: tokens.colorNeutralStroke1Hover,\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n content: '\"\"',\n position: 'absolute',\n },\n ':active::before': {\n backgroundColor: tokens.colorNeutralStroke1Pressed,\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n content: '\"\"',\n position: 'absolute',\n },\n '@media (forced-colors: active)': {\n ':hover::before': {\n backgroundColor: 'Highlight',\n },\n ':active::before': {\n backgroundColor: 'Highlight',\n },\n },\n },\n disabled: {\n ':hover::before': {\n backgroundColor: tokens.colorTransparentStroke,\n },\n ':active::before': {\n backgroundColor: tokens.colorTransparentStroke,\n },\n },\n mediumHorizontal: {\n '::before': {\n bottom: 0,\n height: tokens.strokeWidthThicker,\n left: tokens.spacingHorizontalM,\n right: tokens.spacingHorizontalM,\n },\n },\n mediumVertical: {\n '::before': {\n bottom: tokens.spacingVerticalS,\n left: 0,\n top: tokens.spacingVerticalS,\n width: tokens.strokeWidthThicker,\n },\n },\n smallHorizontal: {\n '::before': {\n bottom: 0,\n height: tokens.strokeWidthThick,\n left: tokens.spacingHorizontalSNudge,\n right: tokens.spacingHorizontalSNudge,\n },\n },\n smallVertical: {\n '::before': {\n bottom: tokens.spacingVerticalXS,\n left: 0,\n top: tokens.spacingVerticalXS,\n width: tokens.strokeWidthThicker,\n },\n },\n});\n\nconst useActiveIndicatorStyles = makeStyles({\n base: {\n '::after': {\n backgroundColor: tokens.colorTransparentStroke,\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n content: '\"\"',\n position: 'absolute',\n zIndex: 1,\n },\n },\n selected: {\n '::after': {\n backgroundColor: tokens.colorCompoundBrandStroke,\n },\n ':hover::after': {\n backgroundColor: tokens.colorCompoundBrandStrokeHover,\n },\n ':active::after': {\n backgroundColor: tokens.colorCompoundBrandStrokePressed,\n },\n '@media (forced-colors: active)': {\n '::after': {\n backgroundColor: 'ButtonText',\n },\n ':hover::after': {\n backgroundColor: 'ButtonText',\n },\n ':active::after': {\n backgroundColor: 'ButtonText',\n },\n },\n },\n disabled: {\n '::after': {\n backgroundColor: tokens.colorNeutralForegroundDisabled,\n },\n },\n mediumHorizontal: {\n '::after': {\n bottom: '0',\n height: tokens.strokeWidthThicker,\n left: tokens.spacingHorizontalM,\n right: tokens.spacingHorizontalM,\n },\n },\n mediumVertical: {\n '::after': {\n bottom: tokens.spacingVerticalS,\n left: 0,\n top: tokens.spacingVerticalS,\n width: tokens.strokeWidthThicker,\n },\n },\n smallHorizontal: {\n '::after': {\n bottom: 0,\n height: tokens.strokeWidthThick,\n left: tokens.spacingHorizontalSNudge,\n right: tokens.spacingHorizontalSNudge,\n },\n },\n smallVertical: {\n '::after': {\n bottom: tokens.spacingVerticalXS,\n left: '0',\n top: tokens.spacingVerticalXS,\n width: tokens.strokeWidthThicker,\n },\n },\n});\n\n/\n Styles for the icon slot.\n /\nconst useIconStyles = makeStyles({\n base: {\n alignItems: 'center',\n display: 'inline-flex',\n justifyContent: 'center',\n ...shorthands.overflow('hidden'),\n },\n // per design, the small and medium font sizes are the same.\n // the size prop only affects spacing.\n small: {\n fontSize: '20px',\n height: '20px',\n width: '20px',\n },\n medium: {\n fontSize: '20px',\n height: '20px',\n width: '20px',\n },\n});\n\n/\n Styles for the content slot (children)\n /\nconst useContentStyles = makeStyles({\n base: {\n ...typographyStyles.body1,\n ...shorthands.overflow('hidden'),\n // content padding is the same for medium & small, horiztonal & vertical\n ...shorthands.padding(tokens.spacingVerticalNone, tokens.spacingHorizontalXXS),\n },\n selected: {\n ...typographyStyles.body1Strong,\n },\n});\n\n/\n Apply styling to the Tab slots based on the state\n */\nexport const useTabStyles_unstable = (state: TabState): TabState => {\n const rootStyles = useRootStyles();\n const focusStyles = useFocusStyles();\n const pendingIndicatorStyles = usePendingIndicatorStyles();\n const activeIndicatorStyles = useActiveIndicatorStyles();\n const iconStyles = useIconStyles();\n const contentStyles = useContentStyles();\n\n const { appearance, disabled, selected, size, vertical } = state;\n\n state.root.className = mergeClasses(\n tabClassNames.root,\n rootStyles.base,\n vertical ? rootStyles.vertical : rootStyles.horizontal,\n size !== 'small' && (vertical ? rootStyles.mediumVertical : rootStyles.mediumHorizontal),\n size === 'small' && (vertical ? rootStyles.smallVertical : rootStyles.smallHorizontal),\n focusStyles.base,\n !disabled && appearance === 'subtle' && rootStyles.subtle,\n !disabled && appearance === 'transparent' && rootStyles.transparent,\n !disabled && selected && rootStyles.selected,\n disabled && rootStyles.disabled,\n\n // pending indicator (before pseudo element)\n pendingIndicatorStyles.base,\n size !== 'small' && (vertical ? pendingIndicatorStyles.mediumVertical : pendingIndicatorStyles.mediumHorizontal),\n size === 'small' && (vertical ? pendingIndicatorStyles.smallVertical : pendingIndicatorStyles.smallHorizontal),\n disabled && pendingIndicatorStyles.disabled,\n\n // active indicator (after pseudo element)\n selected && activeIndicatorStyles.base,\n selected && !disabled && activeIndicatorStyles.selected,\n selected &&\n size !== 'small' &&\n (vertical ? activeIndicatorStyles.mediumVertical : activeIndicatorStyles.mediumHorizontal),\n selected &&\n size === 'small' &&\n (vertical ? activeIndicatorStyles.smallVertical : activeIndicatorStyles.smallHorizontal),\n selected && disabled && activeIndicatorStyles.disabled,\n state.root.className,\n );\n\n if (state.icon) {\n state.icon.className = mergeClasses(tabClassNames.icon, iconStyles.base, iconStyles[size], state.icon.className);\n }\n\n state.content.className = mergeClasses(\n tabClassNames.content,\n contentStyles.base,\n selected && contentStyles.selected,\n state.content.className,\n );\n\n useTabAnimatedIndicatorStyles_unstable(state);\n\n return state;\n};\n"],"sourceRoot":"../src/"}

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

	@@ -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;~~AACxF~~,~~QAAM~~,KAAK,GAAG,YAAA,CAAA,mBAAA,CAAoB,KAApB,EAA2B,GAA3B,CAAd;~~AACA~~,~~QAAM~~,aAAa,GAAG,yBAAA,CAAA,uBAAA,CAAwB,KAAxB,CAAtB;~~AAEA~~,~~EAAA,~~kBAAA,CAAA,yBAAA,CAA0B,KAA1B;~~AACA~~,~~SAAO~~,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":["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/"}

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["components/TabList/TabListContext.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,wBAAA,gBAAA,OAAA,CAAA,kCAAA,CAAA;;AAIa,OAAA,CAAA,cAAA,gBAA+C,wBAAA,CAAA,aAAA,CAAmC;~~AAC7F~~,~~EAAA,~~UAAU,EAAE,aADiF;~~AAE7F~~,~~EAAA,~~QAAQ,EAAE,KAFmF;~~AAG7F~~,~~EAAA,~~aAAa,EAAE,SAH8E;~~AAI7F~~,~~EAAA,~~UAAU,EAAE,MAAK;~~AACf~~;~~AACD~~,~~GAN4F~~;~~AAO7F~~,~~EAAA,~~YAAY,EAAE,MAAK;~~AACjB~~;~~AACD~~,~~GAT4F~~;~~AAU7F~~,~~EAAA,~~QAAQ,EAAE,MAAK;~~AACb~~;~~AACD~~,~~GAZ4F~~;~~AAa7F~~,~~EAAA,~~iBAAiB,EAAE,MAAK;~~AACtB~~,~~WAAO~~;~~AACL~~,~~MAAA,~~cAAc,EAAE;~~AADX~~,~~KAAP~~;~~AAGD~~,~~GAjB4F~~;~~AAkB7F~~,~~EAAA,~~IAAI,EAAE,QAlBuF;~~AAmB7F~~,~~EAAA,~~QAAQ,EAAE;AAnBmF,CAAnC,CAA/C","sourcesContent":["import { createContext } from '@fluentui/react-context-selector';\nimport type { Context } from '@fluentui/react-context-selector';\nimport { TabListContextValue } from './TabList.types';\n\nexport const TabListContext: Context<TabListContextValue> = createContext<TabListContextValue>({\n appearance: 'transparent',\n disabled: false,\n selectedValue: undefined,\n onRegister: () => {\n /* noop /\n },\n onUnregister: () => {\n / noop /\n },\n onSelect: () => {\n / noop */\n },\n getRegisteredTabs: () => {\n return {\n registeredTabs: {},\n };\n },\n size: 'medium',\n vertical: false,\n});\n"],"sourceRoot":"../src/"}
1	+ {"version":3,"sources":["components/TabList/TabListContext.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,wBAAA,gBAAA,OAAA,CAAA,kCAAA,CAAA;;AAIa,OAAA,CAAA,cAAA,gBAA+C,wBAAA,CAAA,aAAA,CAAmC;EAC7F,UAAU,EAAE,aADiF;EAE7F,QAAQ,EAAE,KAFmF;EAG7F,aAAa,EAAE,SAH8E;EAI7F,UAAU,EAAE,MAAK;IACf;EACD,CAN4F;EAO7F,YAAY,EAAE,MAAK;IACjB;EACD,CAT4F;EAU7F,QAAQ,EAAE,MAAK;IACb;EACD,CAZ4F;EAa7F,iBAAiB,EAAE,MAAK;IACtB,OAAO;MACL,cAAc,EAAE;IADX,CAAP;EAGD,CAjB4F;EAkB7F,IAAI,EAAE,QAlBuF;EAmB7F,QAAQ,EAAE;AAnBmF,CAAnC,CAA/C","sourcesContent":["import { createContext } from '@fluentui/react-context-selector';\nimport type { Context } from '@fluentui/react-context-selector';\nimport { TabListContextValue } from './TabList.types';\n\nexport const TabListContext: Context<TabListContextValue> = createContext<TabListContextValue>({\n appearance: 'transparent',\n disabled: false,\n selectedValue: undefined,\n onRegister: () => {\n /* noop /\n },\n onUnregister: () => {\n / noop /\n },\n onSelect: () => {\n / noop */\n },\n getRegisteredTabs: () => {\n return {\n registeredTabs: {},\n };\n },\n size: 'medium',\n vertical: false,\n});\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/TabList/renderTabList.js.map CHANGED Viewed

	@@ -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;~~AACjG~~,~~QAAM~~;~~AAAE~~,~~IAAA,~~KAAF;~~AAAS,IAAA~~;~~AAAT~~,~~MAAuB~~,iBAAA,CAAA,QAAA,CAAuB,KAAvB,CAA7B;~~AAEA~~,~~SACE~~,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;~~AAAf~~,~~GAAX~~,EACE,KAAA,CAAA,aAAA,CAAC,gBAAA,CAAA,cAAA,CAAe,QAAhB,EAAwB;~~AAAC~~,~~IAAA,~~KAAK,EAAE,aAAa,CAAC;~~AAAtB~~,~~GAAxB~~,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":["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/"}

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["components/TabList/useTabList.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AASA;;;;;;;;AAQG;;;AACI,MAAM,mBAAmB,GAAG,CAAC,KAAD,EAAsB,GAAtB,KAAmE;~~AACpG~~,~~QAAM~~;~~AAAE~~,~~IAAA,~~UAAU,GAAG,aAAf;~~AAA8B~~,~~IAAA,~~QAAQ,GAAG,KAAzC;~~AAAgD~~,~~IAAA,~~WAAhD;~~AAA6D~~,~~IAAA,~~IAAI,GAAG,QAApE;~~AAA8E~~,~~IAAA,~~QAAQ,GAAG;~~AAAzF~~,~~MAAmG~~,KAAzG;~~AAEA~~,~~QAAM~~,QAAQ,GAAG,KAAK,CAAC,MAAN,CAA0B,IAA1B,CAAjB;~~AAEA~~,~~QAAM~~,eAAe,GAAG,eAAA,CAAA,uBAAA,CAAwB;~~AAC9C~~,~~IAAA,~~QAAQ,EAAE,IADoC;~~AAE9C~~,~~IAAA,~~IAAI,EAAE,QAAQ,GAAG,UAAH,GAAgB,YAFgB;~~AAG9C~~,~~IAAA,~~eAAe,EAAE;~~AAH6B~~,~~GAAxB~~,CAAxB;~~AAMA~~,~~QAAM~~,CAAC,aAAD,EAAgB,gBAAhB,IAAoC,iBAAA,CAAA,oBAAA,CAAqB;~~AAC7D~~,~~IAAA,~~KAAK,EAAE,KAAK,CAAC,aADgD;~~AAE7D~~,~~IAAA,~~YAAY,EAAE,KAAK,CAAC,oBAFyC;~~AAG7D~~,~~IAAA,~~YAAY,EAAE;~~AAH~~+C,~~GAArB~~,CAA1C,CAXoG,CAiBpG;~~AACA~~;~~AACA~~;~~AACA~~;;~~AACA~~,~~QAAM~~,oBAAoB,GAAG,KAAK,CAAC,MAAN,CAAmC,SAAnC,CAA7B;~~AACA~~,~~QAAM~~,qBAAqB,GAAG,KAAK,CAAC,MAAN,CAAmC,SAAnC,CAA9B;~~AAEA~~,~~EAAA,~~KAAK,CAAC,SAAN,CAAgB,MAAK;~~AACnB~~,~~IAAA,~~qBAAqB,CAAC,OAAtB,GAAgC,oBAAoB,CAAC,OAArD;~~AACA~~,~~IAAA,~~oBAAoB,CAAC,OAArB,GAA+B,aAA/B;~~AACD~~,~~GAHD~~,EAGG,CAAC,aAAD,CAHH;~~AAKA~~,~~QAAM~~,QAAQ,GAAG,iBAAA,CAAA,gBAAA,CAAiB,CAAC,KAAD,EAAwB,IAAxB,KAA+C;~~AAC~~/E,~~IAAA,~~gBAAgB,CAAC,IAAI,CAAC,KAAN,CAAhB;~~AACA~~,~~IAAA,~~WAAW,KAAA,IAAX,IAAA,WAAW,KAAA,KAAA,CAAX,GAAW,KAAA,CAAX,GAAA,WAAW,CAAG,KAAH,EAAU,IAAV,CAAX;~~AACD~~,~~GAHgB~~,CAAjB;~~AAKA~~,~~QAAM~~,cAAc,GAAG,KAAK,CAAC,MAAN,CAA8C,EAA9C,CAAvB;~~AAEA~~,~~QAAM~~,UAAU,GAAG,iBAAA,CAAA,gBAAA,CAAkB,IAAD,IAA0B;~~AAC5D~~,~~IAAA,~~cAAc,CAAC,OAAf,CAAuB,IAAI,CAAC,SAAL,CAAe,IAAI,CAAC,KAApB,CAAvB,IAAqD,IAArD;~~AACD~~,~~GAFkB~~,CAAnB;~~AAIA~~,~~QAAM~~,YAAY,GAAG,iBAAA,CAAA,gBAAA,CAAkB,IAAD,IAA0B;~~AAC9D~~,~~WAAO~~,cAAc,CAAC,OAAf,CAAuB,IAAI,CAAC,SAAL,CAAe,IAAI,CAAC,KAApB,CAAvB,CAAP;~~AACD~~,~~GAFoB~~,CAArB;~~AAIA~~,~~QAAM~~,iBAAiB,GAAG,KAAK,CAAC,WAAN,CAAkB,MAAK;~~AAC~~/C,~~WAAO~~;~~AACL~~,~~MAAA,~~aAAa,EAAE,oBAAoB,CAAC,OAD/B;~~AAEL~~,~~MAAA,~~qBAAqB,EAAE,qBAAqB,CAAC,OAFxC;~~AAGL~~,~~MAAA,~~cAAc,EAAE,cAAc,CAAC;~~AAH1B~~,~~KAAP~~;~~AAKD~~,~~GANyB~~,EAMvB,EANuB,CAA1B;~~AAQA~~,~~SAAO~~;~~AACL~~,~~IAAA,~~UAAU,EAAE;~~AACV~~,~~MAAA,~~IAAI,EAAE;~~AADI~~,~~KADP~~;~~AAIL~~,~~IAAA,~~IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B;~~AACjC~~,~~MAAA,~~GAAG,EAAE,iBAAA,CAAA,aAAA,CAAc,GAAd,EAAmB,QAAnB,CAD4B;~~AAEjC~~,~~MAAA,~~IAAI,EAAE,SAF2B;~~AAGjC~~,~~SAAG~~,eAH8B;~~AAIjC~~,~~SAAG~~;~~AAJ8B~~,~~KAA7B~~,CAJD;~~AAUL~~,~~IAAA,~~UAVK;~~AAWL~~,~~IAAA,~~QAXK;~~AAYL~~,~~IAAA,~~aAZK;~~AAaL~~,~~IAAA,~~IAbK;~~AAcL~~,~~IAAA,~~QAdK;~~AAeL~~,~~IAAA,~~UAfK;~~AAgBL~~,~~IAAA,~~YAhBK;~~AAiBL~~,~~IAAA,~~QAjBK;~~AAkBL,IAAA~~;~~AAlBK~~,~~GAAP~~;AAoBD,CAxEM;;AAAM,OAAA,CAAA,mBAAA,GAAmB,mBAAnB","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":["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/"}

package/lib-commonjs/components/TabList/useTabListContextValues.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["components/TabList/useTabListContextValues.tsx"],"names":[],"mappings":";;;;;;;AAEA,SAAgB,uBAAhB,CAAwC,KAAxC,EAA2D;~~AACzD~~,~~QAAM~~;~~AACJ~~,~~IAAA,~~UADI;~~AAEJ~~,~~IAAA,~~QAFI;~~AAGJ~~,~~IAAA,~~aAAa,EAAE,WAHX;~~AAIJ~~,~~IAAA,~~UAJI;~~AAKJ~~,~~IAAA,~~YALI;~~AAMJ~~,~~IAAA,~~QANI;~~AAOJ~~,~~IAAA,~~iBAPI;~~AAQJ~~,~~IAAA,~~IARI;~~AASJ,IAAA~~;~~AATI~~,~~MAUF~~,KAVJ;~~AAYA~~,~~QAAM~~,OAAO,GAAwB;~~AACnC~~,~~IAAA,~~UADmC;~~AAEnC~~,~~IAAA,~~QAFmC;~~AAGnC~~,~~IAAA,~~aAAa,EAAE,WAHoB;~~AAInC~~,~~IAAA,~~QAJmC;~~AAKnC~~,~~IAAA,~~UALmC;~~AAMnC~~,~~IAAA,~~YANmC;~~AAOnC~~,~~IAAA,~~iBAPmC;~~AAQnC~~,~~IAAA,~~IARmC;~~AASnC,IAAA~~;~~AATmC~~,~~GAArC~~;~~AAYA~~,~~SAAO~~;~~AAAE,IAAA~~;~~AAAF~~,~~GAAP~~;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":["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/"}

package/lib-commonjs/components/TabList/useTabListStyles.js.map CHANGED Viewed

	@@ -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;~~AAC7D~~,~~EAAA,~~IAAI,EAAE;AADuD,CAAlD;AAIb;;AAEG;;AACH,MAAM,SAAS,gBAAG,OAAA,SAAA;~~AAAA~~;~~AAAA~~;~~AAAA~~;~~AAAA~~;~~AAAA~~;~~AAAA~~;~~AAAA~~;~~AAAA~~;~~AAAA~~;~~AAAA~~;~~AAAA~~;~~AAAA~~;~~AAAA~~;~~AAAA~~;~~AAAA~~;AAAA;~~AAAA~~;AAAA,EAAlB;AAkBA;;AAEG;;;AACI,MAAM,yBAAyB,GAAI,KAAD,IAAsC;~~AAC7E~~,~~QAAM~~;~~AAAE,IAAA~~;~~AAAF~~,~~MAAe~~,KAArB;~~AAEA~~,~~QAAM~~,MAAM,GAAG,SAAS,EAAxB;~~AAEA~~,~~EAAA,~~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;~~AAOA~~,~~SAAO~~,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":["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/"}

package/lib-commonjs/index.js.map CHANGED Viewed

	@@ -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;~~AAAA,~~EAAA,UAAA,EAAA,IAAA;~~AAAA,~~EAAA,GAAA,EAAA,YAAA;~~AAAA~~,~~WAAA~~,KAAA,CAAA,kBAAA;~~AAAkB~~;AAAlB,CAAA;AAAoB,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,KAAA,EAAA;~~AAAA,~~EAAA,UAAA,EAAA,IAAA;~~AAAA,~~EAAA,GAAA,EAAA,YAAA;~~AAAA~~,~~WAAA~~,KAAA,CAAA,GAAA;~~AAAG~~;AAAH,CAAA;AAAK,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,eAAA,EAAA;~~AAAA,~~EAAA,UAAA,EAAA,IAAA;~~AAAA,~~EAAA,GAAA,EAAA,YAAA;~~AAAA~~,~~WAAA~~,KAAA,CAAA,aAAA;~~AAAa~~;AAAb,CAAA;AAAe,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,uBAAA,EAAA;~~AAAA,~~EAAA,UAAA,EAAA,IAAA;~~AAAA,~~EAAA,GAAA,EAAA,YAAA;~~AAAA~~,~~WAAA~~,KAAA,CAAA,qBAAA;~~AAAqB~~;AAArB,CAAA;AAAuB,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,iBAAA,EAAA;~~AAAA,~~EAAA,UAAA,EAAA,IAAA;~~AAAA,~~EAAA,GAAA,EAAA,YAAA;~~AAAA~~,~~WAAA~~,KAAA,CAAA,eAAA;~~AAAe~~;AAAf,CAAA;;AAaxE,IAAA,SAAA,gBAAA,OAAA,CAAA,WAAA,CAAA;;AACE,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,wBAAA,EAAA;~~AAAA,~~EAAA,UAAA,EAAA,IAAA;~~AAAA,~~EAAA,GAAA,EAAA,YAAA;~~AAAA~~,~~WAAA~~,SAAA,CAAA,sBAAA;~~AAAsB~~;AAAtB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,SAAA,EAAA;~~AAAA,~~EAAA,UAAA,EAAA,IAAA;~~AAAA,~~EAAA,GAAA,EAAA,YAAA;~~AAAA~~,~~WAAA~~,SAAA,CAAA,OAAA;~~AAAO~~;AAAP,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,mBAAA,EAAA;~~AAAA,~~EAAA,UAAA,EAAA,IAAA;~~AAAA,~~EAAA,GAAA,EAAA,YAAA;~~AAAA~~,~~WAAA~~,SAAA,CAAA,iBAAA;~~AAAiB~~;AAAjB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,2BAAA,EAAA;~~AAAA,~~EAAA,UAAA,EAAA,IAAA;~~AAAA,~~EAAA,GAAA,EAAA,YAAA;~~AAAA~~,~~WAAA~~,SAAA,CAAA,yBAAA;~~AAAyB~~;AAAzB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,qBAAA,EAAA;~~AAAA,~~EAAA,UAAA,EAAA,IAAA;~~AAAA,~~EAAA,GAAA,EAAA,YAAA;~~AAAA~~,~~WAAA~~,SAAA,CAAA,mBAAA;~~AAAmB~~;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":["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/"}