@fluentui/react-tabs 9.0.10 → 9.1.1

package/lib-amd/components/Tab/useTabStyles.js

@@ -0,0 +1,380 @@
+define(["require", "exports", "tslib", "@griffel/react", "@fluentui/react-tabster", "@fluentui/react-theme", "./useTabAnimatedIndicator"], function (require, exports, tslib_1, react_1, react_tabster_1, react_theme_1, useTabAnimatedIndicator_1) {
+    "use strict";
+    var _a, _b;
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useTabStyles_unstable = exports.tabClassNames = void 0;
+    exports.tabClassNames = {
+        root: 'fui-Tab',
+        icon: 'fui-Tab__icon',
+        content: 'fui-Tab__content',
+    };
+    var reservedSpaceClassNames = {
+        content: 'fui-Tab__content--reserved-space',
+    };
+    // These should match the constants defined in @fluentui/react-icons
+    // This package avoids taking a dependency on the icons package for only the constants.
+    var iconClassNames = {
+        filled: 'fui-Icon-filled',
+        regular: 'fui-Icon-regular',
+    };
+    /**
+     * Styles for the root slot
+     */
+    /* eslint-disable @typescript-eslint/naming-convention */
+    var useRootStyles = react_1.makeStyles({
+        base: tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ alignItems: 'center' }, react_1.shorthands.borderColor('none')), react_1.shorthands.borderRadius(react_theme_1.tokens.borderRadiusMedium)), react_1.shorthands.borderWidth(0)), { cursor: 'pointer', display: 'grid', flexShrink: 0, gridAutoFlow: 'column', gridTemplateColumns: 'auto', gridTemplateRows: 'auto', fontFamily: react_theme_1.tokens.fontFamilyBase, lineHeight: react_theme_1.tokens.lineHeightBase300, outlineStyle: 'none', position: 'relative' }), react_1.shorthands.overflow('hidden')), { textTransform: 'none' }),
+        horizontal: {
+            justifyContent: 'center',
+        },
+        vertical: {
+            justifyContent: 'start',
+        },
+        smallHorizontal: tslib_1.__assign({ columnGap: react_theme_1.tokens.spacingHorizontalXXS }, react_1.shorthands.padding(react_theme_1.tokens.spacingVerticalSNudge, react_theme_1.tokens.spacingHorizontalSNudge)),
+        smallVertical: tslib_1.__assign({ 
+            // horizontal spacing is deliberate. This is the gap between icon and content.
+            columnGap: react_theme_1.tokens.spacingHorizontalXXS }, react_1.shorthands.padding(react_theme_1.tokens.spacingVerticalXXS, react_theme_1.tokens.spacingHorizontalSNudge)),
+        mediumHorizontal: tslib_1.__assign({ columnGap: react_theme_1.tokens.spacingHorizontalSNudge }, react_1.shorthands.padding(react_theme_1.tokens.spacingVerticalM, react_theme_1.tokens.spacingHorizontalMNudge)),
+        mediumVertical: tslib_1.__assign({ 
+            // horizontal spacing is deliberate. This is the gap between icon and content.
+            columnGap: react_theme_1.tokens.spacingHorizontalSNudge }, react_1.shorthands.padding(react_theme_1.tokens.spacingVerticalSNudge, react_theme_1.tokens.spacingHorizontalMNudge)),
+        largeHorizontal: tslib_1.__assign({ columnGap: react_theme_1.tokens.spacingHorizontalSNudge }, react_1.shorthands.padding(react_theme_1.tokens.spacingVerticalL, react_theme_1.tokens.spacingHorizontalMNudge)),
+        largeVertical: tslib_1.__assign({ 
+            // horizontal spacing is deliberate. This is the gap between icon and content.
+            columnGap: react_theme_1.tokens.spacingHorizontalSNudge }, react_1.shorthands.padding(react_theme_1.tokens.spacingVerticalS, react_theme_1.tokens.spacingHorizontalMNudge)),
+        transparent: {
+            backgroundColor: react_theme_1.tokens.colorTransparentBackground,
+            ':hover': {
+                backgroundColor: react_theme_1.tokens.colorTransparentBackgroundHover,
+            },
+            ':active': {
+                backgroundColor: react_theme_1.tokens.colorTransparentBackgroundPressed,
+            },
+            '& .fui-Tab__icon': {
+                color: react_theme_1.tokens.colorNeutralForeground2,
+            },
+            ':hover .fui-Tab__icon': {
+                color: react_theme_1.tokens.colorNeutralForeground2Hover,
+            },
+            ':active .fui-Tab__icon': {
+                color: react_theme_1.tokens.colorNeutralForeground2Pressed,
+            },
+            '& .fui-Tab__content': {
+                color: react_theme_1.tokens.colorNeutralForeground2,
+            },
+            ':hover .fui-Tab__content': {
+                color: react_theme_1.tokens.colorNeutralForeground2Hover,
+            },
+            ':active .fui-Tab__content': {
+                color: react_theme_1.tokens.colorNeutralForeground2Pressed,
+            },
+        },
+        subtle: {
+            backgroundColor: react_theme_1.tokens.colorSubtleBackground,
+            ':hover': {
+                backgroundColor: react_theme_1.tokens.colorSubtleBackgroundHover,
+            },
+            ':active': {
+                backgroundColor: react_theme_1.tokens.colorSubtleBackgroundPressed,
+            },
+            '& .fui-Tab__icon': {
+                color: react_theme_1.tokens.colorNeutralForeground2,
+            },
+            ':hover .fui-Tab__icon': {
+                color: react_theme_1.tokens.colorNeutralForeground2Hover,
+            },
+            ':active .fui-Tab__icon': {
+                color: react_theme_1.tokens.colorNeutralForeground2Pressed,
+            },
+            '& .fui-Tab__content': {
+                color: react_theme_1.tokens.colorNeutralForeground2,
+            },
+            ':hover .fui-Tab__content': {
+                color: react_theme_1.tokens.colorNeutralForeground2Hover,
+            },
+            ':active .fui-Tab__content': {
+                color: react_theme_1.tokens.colorNeutralForeground2Pressed,
+            },
+        },
+        disabled: {
+            backgroundColor: react_theme_1.tokens.colorTransparentBackground,
+            '& .fui-Tab__icon': {
+                color: react_theme_1.tokens.colorNeutralForegroundDisabled,
+            },
+            '& .fui-Tab__content': {
+                color: react_theme_1.tokens.colorNeutralForegroundDisabled,
+            },
+            cursor: 'not-allowed',
+        },
+        selected: {
+            '& .fui-Tab__icon': {
+                color: react_theme_1.tokens.colorCompoundBrandForeground1,
+            },
+            ':hover .fui-Tab__icon': {
+                color: react_theme_1.tokens.colorCompoundBrandForeground1Hover,
+            },
+            ':active .fui-Tab__icon': {
+                color: react_theme_1.tokens.colorCompoundBrandForeground1Pressed,
+            },
+            '& .fui-Tab__content': {
+                color: react_theme_1.tokens.colorNeutralForeground1,
+            },
+            ':hover .fui-Tab__content': {
+                color: react_theme_1.tokens.colorNeutralForeground1Hover,
+            },
+            ':active .fui-Tab__content': {
+                color: react_theme_1.tokens.colorNeutralForeground1Pressed,
+            },
+        },
+    });
+    /* eslint-enable @typescript-eslint/naming-convention */
+    /**
+     * Focus styles for the root slot
+     */
+    var useFocusStyles = react_1.makeStyles({
+        // Tab creates a custom focus indicator because the default focus indicator
+        // is applied using an ::after pseudo-element on the root. Since the selection
+        // indicator uses an ::after pseudo-element on the root, there is a conflict.
+        base: react_tabster_1.createCustomFocusIndicatorStyle(tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.borderColor('transparent')), { outlineWidth: react_theme_1.tokens.strokeWidthThick, outlineColor: 'transparent', outlineStyle: 'solid', boxShadow: "\n      " + react_theme_1.tokens.shadow4 + ",\n      0 0 0 " + react_theme_1.tokens.strokeWidthThick + " " + react_theme_1.tokens.colorStrokeFocus2 + "\n    ", zIndex: 1 })),
+    });
+    /** Indicator styles for when pending selection */
+    var usePendingIndicatorStyles = react_1.makeStyles({
+        base: {
+            ':hover::before': tslib_1.__assign(tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorNeutralStroke1Hover }, react_1.shorthands.borderRadius(react_theme_1.tokens.borderRadiusCircular)), { content: '""', position: 'absolute' }),
+            ':active::before': tslib_1.__assign(tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorNeutralStroke1Pressed }, react_1.shorthands.borderRadius(react_theme_1.tokens.borderRadiusCircular)), { content: '""', position: 'absolute' }),
+            '@media (forced-colors: active)': {
+                ':hover::before': {
+                    backgroundColor: 'Highlight',
+                },
+                ':active::before': {
+                    backgroundColor: 'Highlight',
+                },
+            },
+        },
+        disabled: {
+            ':hover::before': {
+                backgroundColor: react_theme_1.tokens.colorTransparentStroke,
+            },
+            ':active::before': {
+                backgroundColor: react_theme_1.tokens.colorTransparentStroke,
+            },
+        },
+        smallHorizontal: {
+            '::before': {
+                bottom: 0,
+                height: react_theme_1.tokens.strokeWidthThick,
+                left: react_theme_1.tokens.spacingHorizontalSNudge,
+                right: react_theme_1.tokens.spacingHorizontalSNudge,
+            },
+        },
+        smallVertical: {
+            '::before': {
+                bottom: react_theme_1.tokens.spacingVerticalXS,
+                left: 0,
+                top: react_theme_1.tokens.spacingVerticalXS,
+                width: react_theme_1.tokens.strokeWidthThicker,
+            },
+        },
+        mediumHorizontal: {
+            '::before': {
+                bottom: 0,
+                height: react_theme_1.tokens.strokeWidthThicker,
+                left: react_theme_1.tokens.spacingHorizontalM,
+                right: react_theme_1.tokens.spacingHorizontalM,
+            },
+        },
+        mediumVertical: {
+            '::before': {
+                bottom: react_theme_1.tokens.spacingVerticalS,
+                left: 0,
+                top: react_theme_1.tokens.spacingVerticalS,
+                width: react_theme_1.tokens.strokeWidthThicker,
+            },
+        },
+        largeHorizontal: {
+            '::before': {
+                bottom: 0,
+                height: react_theme_1.tokens.strokeWidthThicker,
+                left: react_theme_1.tokens.spacingHorizontalM,
+                right: react_theme_1.tokens.spacingHorizontalM,
+            },
+        },
+        largeVertical: {
+            '::before': {
+                bottom: react_theme_1.tokens.spacingVerticalMNudge,
+                left: 0,
+                top: react_theme_1.tokens.spacingVerticalMNudge,
+                width: react_theme_1.tokens.strokeWidthThicker,
+            },
+        },
+    });
+    var useActiveIndicatorStyles = react_1.makeStyles({
+        base: {
+            '::after': tslib_1.__assign(tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorTransparentStroke }, react_1.shorthands.borderRadius(react_theme_1.tokens.borderRadiusCircular)), { content: '""', position: 'absolute', zIndex: 1 }),
+        },
+        selected: {
+            '::after': {
+                backgroundColor: react_theme_1.tokens.colorCompoundBrandStroke,
+            },
+            ':hover::after': {
+                backgroundColor: react_theme_1.tokens.colorCompoundBrandStrokeHover,
+            },
+            ':active::after': {
+                backgroundColor: react_theme_1.tokens.colorCompoundBrandStrokePressed,
+            },
+            '@media (forced-colors: active)': {
+                '::after': {
+                    backgroundColor: 'ButtonText',
+                },
+                ':hover::after': {
+                    backgroundColor: 'ButtonText',
+                },
+                ':active::after': {
+                    backgroundColor: 'ButtonText',
+                },
+            },
+        },
+        disabled: {
+            '::after': {
+                backgroundColor: react_theme_1.tokens.colorNeutralForegroundDisabled,
+            },
+        },
+        smallHorizontal: {
+            '::after': {
+                bottom: 0,
+                height: react_theme_1.tokens.strokeWidthThick,
+                left: react_theme_1.tokens.spacingHorizontalSNudge,
+                right: react_theme_1.tokens.spacingHorizontalSNudge,
+            },
+        },
+        smallVertical: {
+            '::after': {
+                bottom: react_theme_1.tokens.spacingVerticalXS,
+                left: '0',
+                top: react_theme_1.tokens.spacingVerticalXS,
+                width: react_theme_1.tokens.strokeWidthThicker,
+            },
+        },
+        mediumHorizontal: {
+            '::after': {
+                bottom: '0',
+                height: react_theme_1.tokens.strokeWidthThicker,
+                left: react_theme_1.tokens.spacingHorizontalM,
+                right: react_theme_1.tokens.spacingHorizontalM,
+            },
+        },
+        mediumVertical: {
+            '::after': {
+                bottom: react_theme_1.tokens.spacingVerticalS,
+                left: 0,
+                top: react_theme_1.tokens.spacingVerticalS,
+                width: react_theme_1.tokens.strokeWidthThicker,
+            },
+        },
+        largeHorizontal: {
+            '::after': {
+                bottom: 0,
+                height: react_theme_1.tokens.strokeWidthThicker,
+                left: react_theme_1.tokens.spacingHorizontalM,
+                right: react_theme_1.tokens.spacingHorizontalM,
+            },
+        },
+        largeVertical: {
+            '::after': {
+                bottom: react_theme_1.tokens.spacingVerticalMNudge,
+                left: 0,
+                top: react_theme_1.tokens.spacingVerticalMNudge,
+                width: react_theme_1.tokens.strokeWidthThicker,
+            },
+        },
+    });
+    /**
+     * Styles for the icon slot.
+     */
+    var useIconStyles = react_1.makeStyles({
+        base: tslib_1.__assign(tslib_1.__assign({ gridColumnStart: 1, gridRowStart: 1, alignItems: 'center', display: 'inline-flex', justifyContent: 'center' }, react_1.shorthands.overflow('hidden')), (_a = {}, _a["& ." + iconClassNames.filled] = {
+            display: 'none',
+        }, _a["& ." + iconClassNames.regular] = {
+            display: 'inline',
+        }, _a)),
+        // per design, the small and medium font sizes are the same.
+        // the size prop only affects spacing.
+        small: {
+            fontSize: '20px',
+            height: '20px',
+            width: '20px',
+        },
+        medium: {
+            fontSize: '20px',
+            height: '20px',
+            width: '20px',
+        },
+        large: {
+            fontSize: '24px',
+            height: '24px',
+            width: '24px',
+        },
+        selected: (_b = {},
+            _b["& ." + iconClassNames.filled] = {
+                display: 'inline',
+            },
+            _b["& ." + iconClassNames.regular] = {
+                display: 'none',
+            },
+            _b),
+    });
+    /**
+     * Styles for the content slot (children)
+     */
+    var useContentStyles = react_1.makeStyles({
+        base: tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, react_theme_1.typographyStyles.body1), react_1.shorthands.overflow('hidden')), react_1.shorthands.padding(react_theme_1.tokens.spacingVerticalNone, react_theme_1.tokens.spacingHorizontalXXS)),
+        selected: tslib_1.__assign({}, react_theme_1.typographyStyles.body1Strong),
+        large: tslib_1.__assign({}, react_theme_1.typographyStyles.body2),
+        largeSelected: tslib_1.__assign({}, react_theme_1.typographyStyles.subtitle2),
+        noIconBefore: {
+            gridColumnStart: 1,
+            gridRowStart: 1,
+        },
+        iconBefore: {
+            gridColumnStart: 2,
+            gridRowStart: 1,
+        },
+        placeholder: {
+            visibility: 'hidden',
+        },
+    });
+    /**
+     * Apply styling to the Tab slots based on the state
+     */
+    var useTabStyles_unstable = function (state) {
+        var rootStyles = useRootStyles();
+        var focusStyles = useFocusStyles();
+        var pendingIndicatorStyles = usePendingIndicatorStyles();
+        var activeIndicatorStyles = useActiveIndicatorStyles();
+        var iconStyles = useIconStyles();
+        var contentStyles = useContentStyles();
+        var appearance = state.appearance, disabled = state.disabled, selected = state.selected, size = state.size, vertical = state.vertical;
+        state.root.className = react_1.mergeClasses(exports.tabClassNames.root, rootStyles.base, vertical ? rootStyles.vertical : rootStyles.horizontal, size === 'small' && (vertical ? rootStyles.smallVertical : rootStyles.smallHorizontal), size === 'medium' && (vertical ? rootStyles.mediumVertical : rootStyles.mediumHorizontal), size === 'large' && (vertical ? rootStyles.largeVertical : rootStyles.largeHorizontal), focusStyles.base, !disabled && appearance === 'subtle' && rootStyles.subtle, !disabled && appearance === 'transparent' && rootStyles.transparent, !disabled && selected && rootStyles.selected, disabled && rootStyles.disabled, 
+        // pending indicator (before pseudo element)
+        pendingIndicatorStyles.base, size === 'small' && (vertical ? pendingIndicatorStyles.smallVertical : pendingIndicatorStyles.smallHorizontal), size === 'medium' && (vertical ? pendingIndicatorStyles.mediumVertical : pendingIndicatorStyles.mediumHorizontal), size === 'large' && (vertical ? pendingIndicatorStyles.largeVertical : pendingIndicatorStyles.largeHorizontal), disabled && pendingIndicatorStyles.disabled, 
+        // active indicator (after pseudo element)
+        selected && activeIndicatorStyles.base, selected && !disabled && activeIndicatorStyles.selected, selected &&
+            size === 'small' &&
+            (vertical ? activeIndicatorStyles.smallVertical : activeIndicatorStyles.smallHorizontal), selected &&
+            size === 'medium' &&
+            (vertical ? activeIndicatorStyles.mediumVertical : activeIndicatorStyles.mediumHorizontal), selected &&
+            size === 'large' &&
+            (vertical ? activeIndicatorStyles.largeVertical : activeIndicatorStyles.largeHorizontal), selected && disabled && activeIndicatorStyles.disabled, state.root.className);
+        if (state.icon) {
+            state.icon.className = react_1.mergeClasses(exports.tabClassNames.icon, iconStyles.base, iconStyles[size], selected && iconStyles.selected, state.icon.className);
+        }
+        // This needs to be before state.content.className is updated
+        if (state.contentReservedSpaceClassName !== undefined) {
+            state.contentReservedSpaceClassName = react_1.mergeClasses(reservedSpaceClassNames.content, contentStyles.base, size === 'large' ? contentStyles.largeSelected : contentStyles.selected, state.icon ? contentStyles.iconBefore : contentStyles.noIconBefore, contentStyles.placeholder, state.content.className);
+        }
+        state.content.className = react_1.mergeClasses(exports.tabClassNames.content, contentStyles.base, size === 'large' && contentStyles.large, selected && (size === 'large' ? contentStyles.largeSelected : contentStyles.selected), state.icon ? contentStyles.iconBefore : contentStyles.noIconBefore, state.content.className);
+        useTabAnimatedIndicator_1.useTabAnimatedIndicatorStyles_unstable(state);
+        return state;
+    };
+    exports.useTabStyles_unstable = useTabStyles_unstable;
+});
+//# sourceMappingURL=useTabStyles.js.map

package/lib-amd/components/Tab/useTabStyles.js.map

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

package/lib-amd/components/TabList/TabList.js

@@ -0,0 +1,16 @@
+define(["require", "exports", "react", "./useTabList", "./renderTabList", "./useTabListStyles", "./useTabListContextValues"], function (require, exports, React, useTabList_1, renderTabList_1, useTabListStyles_1, useTabListContextValues_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.TabList = void 0;
+    /**
+     * A tab list provides single selection from a set of tabs.
+     */
+    exports.TabList = React.forwardRef(function (props, ref) {
+        var state = useTabList_1.useTabList_unstable(props, ref);
+        var contextValues = useTabListContextValues_1.useTabListContextValues(state);
+        useTabListStyles_1.useTabListStyles_unstable(state);
+        return renderTabList_1.renderTabList_unstable(state, contextValues);
+    });
+    exports.TabList.displayName = 'TabList';
+});
+//# sourceMappingURL=TabList.js.map

package/lib-amd/components/TabList/TabList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabList.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-tabs/src/components/TabList/TabList.tsx"],"names":[],"mappings":";;;;IAQA;;OAEG;IACU,QAAA,OAAO,GAAsC,KAAK,CAAC,UAAU,CAAC,UAAC,KAAK,EAAE,GAAG;QACpF,IAAM,KAAK,GAAG,gCAAmB,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;QAC9C,IAAM,aAAa,GAAG,iDAAuB,CAAC,KAAK,CAAC,CAAC;QAErD,4CAAyB,CAAC,KAAK,CAAC,CAAC;QACjC,OAAO,sCAAsB,CAAC,KAAK,EAAE,aAAa,CAAC,CAAC;IACtD,CAAC,CAAC,CAAC;IAEH,eAAO,CAAC,WAAW,GAAG,SAAS,CAAC","sourcesContent":["import * as React from 'react';\nimport { useTabList_unstable } from './useTabList';\nimport { renderTabList_unstable } from './renderTabList';\nimport { useTabListStyles_unstable } from './useTabListStyles';\nimport type { TabListProps } from './TabList.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTabListContextValues } 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"]}

package/lib-amd/components/TabList/TabList.types.js

@@ -0,0 +1,5 @@
+define(["require", "exports"], function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+});
+//# sourceMappingURL=TabList.types.js.map

package/lib-amd/components/TabList/TabList.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabList.types.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-tabs/src/components/TabList/TabList.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { TabValue } from '../Tab/Tab.types';\n\nexport type TabRegisterData = {\n  /**\n   * The value of the tab.\n   */\n  value: TabValue;\n\n  /**\n   * The reference to the tab HTML element.\n   */\n  ref: React.RefObject<HTMLElement>;\n};\n\nexport type RegisterTabEventHandler = (data: TabRegisterData) => void;\n\nexport type SelectTabData = {\n  /**\n   * The value of the selected tab.\n   */\n  value: TabValue;\n};\n\nexport type SelectTabEvent<E = HTMLElement> = React.MouseEvent<E> | React.KeyboardEvent<E>;\n\nexport type SelectTabEventHandler = (event: SelectTabEvent, data: SelectTabData) => void;\n\nexport type TabListSlots = {\n  /**\n   * The slot associated with the root element of this tab list.\n   */\n  root: Slot<'div'>;\n};\n\n/**\n * TabList Props\n */\nexport type TabListProps = ComponentProps<TabListSlots> & {\n  /**\n   * A tab list can supports 'transparent' and 'subtle' appearance.\n   *- 'subtle': Minimizes emphasis to blend into the background until hovered or focused.\n   *- 'transparent': No background and border styling\n   * The appearance affects each of the contained tabs.\n   * @default 'transparent'\n   */\n  appearance?: 'transparent' | 'subtle';\n\n  /**\n   * Tab size may change between unselected and selected states.\n   * The default scenario is a selected tab has bold text.\n   *\n   * When true, this property requests tabs be the same size whether unselected or selected.\n   * @default true\n   */\n  reserveSelectedTabSpace?: boolean;\n\n  /**\n   * The value of the tab to be selected by default.\n   * Typically useful when the selectedValue is uncontrolled.\n   */\n  defaultSelectedValue?: TabValue;\n  /**\n   * A tab list can be set to disable interaction.\n   * @default false\n   */\n  disabled?: boolean;\n\n  /**\n   * Raised when a tab is selected.\n   */\n  onTabSelect?: SelectTabEventHandler;\n\n  /**\n   * The value of the currently selected tab.\n   */\n  selectedValue?: TabValue;\n\n  /**\n   * A tab list can be either 'small', 'medium', or 'large' size.\n   * The size affects each of the contained tabs.\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium' | 'large';\n\n  /**\n   * A tab list can arrange its tabs vertically.\n   * @default false\n   */\n  vertical?: boolean;\n};\n\nexport type TabListContextValue = Pick<TabListProps, 'onTabSelect' | 'selectedValue' | 'reserveSelectedTabSpace'> &\n  Required<Pick<TabListProps, 'appearance' | 'disabled' | 'size' | 'vertical'>> & {\n    /** A callback to allow a tab to register itself with the tab list. */\n    onRegister: RegisterTabEventHandler;\n\n    /** A callback to allow a tab to unregister itself with the tab list. */\n    onUnregister: RegisterTabEventHandler;\n    /**\n     * A callback to allow a tab to select itself when pressed.\n     */\n    onSelect: SelectTabEventHandler;\n    /**\n     * Gets the registered tab data along with current and previous selected values.\n     */\n    getRegisteredTabs: () => {\n      selectedValue?: TabValue;\n      previousSelectedValue?: TabValue;\n      registeredTabs: Record<string, TabRegisterData>;\n    };\n  };\n\n/**\n * Context values used in rendering TabList.\n */\nexport type TabListContextValues = {\n  /**\n   * The context of the tab list available to each tab.\n   */\n  tabList: TabListContextValue;\n};\n\n/**\n * State used in rendering TabList.\n */\nexport type TabListState = ComponentState<Required<TabListSlots>> & TabListContextValue;\n"]}

package/lib-amd/components/TabList/TabListContext.js

@@ -0,0 +1,29 @@
+define(["require", "exports", "@fluentui/react-context-selector"], function (require, exports, react_context_selector_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.TabListContext = void 0;
+    // eslint-disable-next-line @fluentui/no-context-default-value
+    exports.TabListContext = react_context_selector_1.createContext({
+        appearance: 'transparent',
+        reserveSelectedTabSpace: true,
+        disabled: false,
+        selectedValue: undefined,
+        onRegister: function () {
+            /* noop */
+        },
+        onUnregister: function () {
+            /* noop */
+        },
+        onSelect: function () {
+            /* noop */
+        },
+        getRegisteredTabs: function () {
+            return {
+                registeredTabs: {},
+            };
+        },
+        size: 'medium',
+        vertical: false,
+    });
+});
+//# sourceMappingURL=TabListContext.js.map

package/lib-amd/components/TabList/TabListContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabListContext.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-tabs/src/components/TabList/TabListContext.ts"],"names":[],"mappings":";;;;IAIA,8DAA8D;IACjD,QAAA,cAAc,GAAiC,sCAAa,CAAsB;QAC7F,UAAU,EAAE,aAAa;QACzB,uBAAuB,EAAE,IAAI;QAC7B,QAAQ,EAAE,KAAK;QACf,aAAa,EAAE,SAAS;QACxB,UAAU,EAAE;YACV,UAAU;QACZ,CAAC;QACD,YAAY,EAAE;YACZ,UAAU;QACZ,CAAC;QACD,QAAQ,EAAE;YACR,UAAU;QACZ,CAAC;QACD,iBAAiB,EAAE;YACjB,OAAO;gBACL,cAAc,EAAE,EAAE;aACnB,CAAC;QACJ,CAAC;QACD,IAAI,EAAE,QAAQ;QACd,QAAQ,EAAE,KAAK;KAChB,CAAC,CAAC","sourcesContent":["import { createContext } from '@fluentui/react-context-selector';\nimport type { Context } from '@fluentui/react-context-selector';\nimport { TabListContextValue } from './TabList.types';\n\n// eslint-disable-next-line @fluentui/no-context-default-value\nexport const TabListContext: Context<TabListContextValue> = createContext<TabListContextValue>({\n  appearance: 'transparent',\n  reserveSelectedTabSpace: true,\n  disabled: false,\n  selectedValue: undefined,\n  onRegister: () => {\n    /* noop */\n  },\n  onUnregister: () => {\n    /* noop */\n  },\n  onSelect: () => {\n    /* noop */\n  },\n  getRegisteredTabs: () => {\n    return {\n      registeredTabs: {},\n    };\n  },\n  size: 'medium',\n  vertical: false,\n});\n"]}

package/lib-amd/components/TabList/index.js

@@ -0,0 +1,10 @@
+define(["require", "exports", "tslib", "./TabList", "./TabList.types", "./renderTabList", "./useTabList", "./useTabListStyles"], function (require, exports, tslib_1, TabList_1, TabList_types_1, renderTabList_1, useTabList_1, useTabListStyles_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    tslib_1.__exportStar(TabList_1, exports);
+    tslib_1.__exportStar(TabList_types_1, exports);
+    tslib_1.__exportStar(renderTabList_1, exports);
+    tslib_1.__exportStar(useTabList_1, exports);
+    tslib_1.__exportStar(useTabListStyles_1, exports);
+});
+//# sourceMappingURL=index.js.map

package/lib-amd/components/TabList/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-tabs/src/components/TabList/index.ts"],"names":[],"mappings":";;;IAAA,yCAA0B;IAC1B,+CAAgC;IAChC,+CAAgC;IAChC,4CAA6B;IAC7B,kDAAmC","sourcesContent":["export * from './TabList';\nexport * from './TabList.types';\nexport * from './renderTabList';\nexport * from './useTabList';\nexport * from './useTabListStyles';\n"]}

package/lib-amd/components/TabList/renderTabList.js

@@ -0,0 +1,15 @@
+define(["require", "exports", "tslib", "react", "@fluentui/react-utilities", "./TabListContext"], function (require, exports, tslib_1, React, react_utilities_1, TabListContext_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.renderTabList_unstable = void 0;
+    /**
+     * Render the final JSX of TabList
+     */
+    var renderTabList_unstable = function (state, contextValues) {
+        var _a = react_utilities_1.getSlots(state), slots = _a.slots, slotProps = _a.slotProps;
+        return (React.createElement(slots.root, tslib_1.__assign({}, slotProps.root),
+            React.createElement(TabListContext_1.TabListContext.Provider, { value: contextValues.tabList }, state.root.children)));
+    };
+    exports.renderTabList_unstable = renderTabList_unstable;
+});
+//# sourceMappingURL=renderTabList.js.map

package/lib-amd/components/TabList/renderTabList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderTabList.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-tabs/src/components/TabList/renderTabList.tsx"],"names":[],"mappings":";;;;IAKA;;OAEG;IACI,IAAM,sBAAsB,GAAG,UAAC,KAAmB,EAAE,aAAmC;QACvF,IAAA,KAAuB,0BAAQ,CAAe,KAAK,CAAC,EAAlD,KAAK,WAAA,EAAE,SAAS,eAAkC,CAAC;QAE3D,OAAO,CACL,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI;YAC5B,oBAAC,+BAAc,CAAC,QAAQ,IAAC,KAAK,EAAE,aAAa,CAAC,OAAO,IAAG,KAAK,CAAC,IAAI,CAAC,QAAQ,CAA2B,CAC3F,CACd,CAAC;IACJ,CAAC,CAAC;IARW,QAAA,sBAAsB,0BAQjC","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"]}

package/lib-amd/components/TabList/useTabList.js

@@ -0,0 +1,74 @@
+define(["require", "exports", "tslib", "react", "@fluentui/react-tabster", "@fluentui/react-utilities"], function (require, exports, tslib_1, React, react_tabster_1, react_utilities_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useTabList_unstable = void 0;
+    /**
+     * Create the state required to render TabList.
+     *
+     * The returned state can be modified with hooks such as useTabListStyles_unstable,
+     * before being passed to renderTabList_unstable.
+     *
+     * @param props - props from this instance of TabList
+     * @param ref - reference to root HTMLElement of TabList
+     */
+    var useTabList_unstable = function (props, ref) {
+        var _a = props.appearance, appearance = _a === void 0 ? 'transparent' : _a, _b = props.reserveSelectedTabSpace, reserveSelectedTabSpace = _b === void 0 ? true : _b, _c = props.disabled, disabled = _c === void 0 ? false : _c, onTabSelect = props.onTabSelect, _d = props.size, size = _d === void 0 ? 'medium' : _d, _e = props.vertical, vertical = _e === void 0 ? false : _e;
+        var innerRef = React.useRef(null);
+        var focusAttributes = react_tabster_1.useArrowNavigationGroup({
+            circular: true,
+            axis: vertical ? 'vertical' : 'horizontal',
+            memorizeCurrent: true,
+        });
+        var _f = react_utilities_1.useControllableState({
+            state: props.selectedValue,
+            defaultState: props.defaultSelectedValue,
+            initialState: undefined,
+        }), selectedValue = _f[0], setSelectedValue = _f[1];
+        // considered usePrevious, but it is sensitive to re-renders
+        // this could cause the previous to move to current in the case where the tab list re-renders.
+        // these refs avoid getRegisteredTabs changing when selectedValue changes and causing
+        // renders for tabs that have not changed.
+        var currentSelectedValue = React.useRef(undefined);
+        var previousSelectedValue = React.useRef(undefined);
+        React.useEffect(function () {
+            previousSelectedValue.current = currentSelectedValue.current;
+            currentSelectedValue.current = selectedValue;
+        }, [selectedValue]);
+        var onSelect = react_utilities_1.useEventCallback(function (event, data) {
+            setSelectedValue(data.value);
+            onTabSelect === null || onTabSelect === void 0 ? void 0 : onTabSelect(event, data);
+        });
+        var registeredTabs = React.useRef({});
+        var onRegister = react_utilities_1.useEventCallback(function (data) {
+            registeredTabs.current[JSON.stringify(data.value)] = data;
+        });
+        var onUnregister = react_utilities_1.useEventCallback(function (data) {
+            delete registeredTabs.current[JSON.stringify(data.value)];
+        });
+        var getRegisteredTabs = React.useCallback(function () {
+            return {
+                selectedValue: currentSelectedValue.current,
+                previousSelectedValue: previousSelectedValue.current,
+                registeredTabs: registeredTabs.current,
+            };
+        }, []);
+        return {
+            components: {
+                root: 'div',
+            },
+            root: react_utilities_1.getNativeElementProps('div', tslib_1.__assign(tslib_1.__assign({ ref: react_utilities_1.useMergedRefs(ref, innerRef), role: 'tablist' }, focusAttributes), props)),
+            appearance: appearance,
+            reserveSelectedTabSpace: reserveSelectedTabSpace,
+            disabled: disabled,
+            selectedValue: selectedValue,
+            size: size,
+            vertical: vertical,
+            onRegister: onRegister,
+            onUnregister: onUnregister,
+            onSelect: onSelect,
+            getRegisteredTabs: getRegisteredTabs,
+        };
+    };
+    exports.useTabList_unstable = useTabList_unstable;
+});
+//# sourceMappingURL=useTabList.js.map