@fluentui/react-tabs 9.3.3 → 9.3.5

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

@@ -1,112 +0,0 @@
-define(["require", "exports", "tslib", "react", "@griffel/react", "../TabList/TabListContext", "@fluentui/react-theme"], function (require, exports, tslib_1, React, react_1, TabListContext_1, react_theme_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    exports.useTabAnimatedIndicatorStyles_unstable = void 0;
-    // eslint-disable-next-line @typescript-eslint/naming-convention
-    var tabIndicatorCssVars_unstable = {
-        offsetVar: '--fui-Tab__indicator--offset',
-        scaleVar: '--fui-Tab__indicator--scale',
-    };
-    var useActiveIndicatorStyles = react_1.makeStyles({
-        base: tslib_1.__assign({}, react_1.shorthands.overflow('visible')),
-        animated: {
-            '::after': {
-                transitionProperty: 'transform',
-                transitionDuration: "" + react_theme_1.tokens.durationSlow,
-                transitionTimingFunction: "" + react_theme_1.tokens.curveDecelerateMax,
-            },
-            '@media (prefers-reduced-motion: reduce)': {
-                '::after': {
-                    transitionProperty: 'none',
-                    transitionDuration: '0.01ms',
-                },
-            },
-        },
-        horizontal: {
-            '::after': {
-                transformOrigin: 'left',
-                transform: "translateX(var(" + tabIndicatorCssVars_unstable.offsetVar + "))\n    scaleX(var(" + tabIndicatorCssVars_unstable.scaleVar + "))",
-            },
-        },
-        vertical: {
-            '::after': {
-                transformOrigin: 'top',
-                transform: "translateY(var(" + tabIndicatorCssVars_unstable.offsetVar + "))\n        scaleY(var(" + tabIndicatorCssVars_unstable.scaleVar + "))",
-            },
-        },
-    });
-    var calculateTabRect = function (element) {
-        var _a;
-        if (element) {
-            var parentRect = ((_a = element.parentElement) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) || { x: 0, y: 0, width: 0, height: 0 };
-            var tabRect = element.getBoundingClientRect();
-            return {
-                x: tabRect.x - parentRect.x,
-                y: tabRect.y - parentRect.y,
-                width: tabRect.width,
-                height: tabRect.height,
-            };
-        }
-        return undefined;
-    };
-    var getRegisteredTabRect = function (registeredTabs, value) {
-        var _a;
-        var element = value !== undefined && value !== null ? (_a = registeredTabs[JSON.stringify(value)]) === null || _a === void 0 ? void 0 : _a.ref.current : undefined;
-        return element ? calculateTabRect(element) : undefined;
-    };
-    /**
-     * Adds additional styling to the active tab selection indicator to create a sliding animation.
-     */
-    var useTabAnimatedIndicatorStyles_unstable = function (state) {
-        var _a;
-        var disabled = state.disabled, selected = state.selected, vertical = state.vertical;
-        var activeIndicatorStyles = useActiveIndicatorStyles();
-        var _b = React.useState(), lastAnimatedFrom = _b[0], setLastAnimatedFrom = _b[1];
-        var _c = React.useState({ offset: 0, scale: 1 }), animationValues = _c[0], setAnimationValues = _c[1];
-        var getRegisteredTabs = TabListContext_1.useTabListContext_unstable(function (ctx) { return ctx.getRegisteredTabs; });
-        React.useEffect(function () {
-            if (lastAnimatedFrom) {
-                setAnimationValues({ offset: 0, scale: 1 });
-            }
-        }, [lastAnimatedFrom]);
-        if (selected) {
-            var _d = getRegisteredTabs(), previousSelectedValue = _d.previousSelectedValue, selectedValue = _d.selectedValue, registeredTabs = _d.registeredTabs;
-            var previousSelectedTabRect = getRegisteredTabRect(registeredTabs, previousSelectedValue);
-            var selectedTabRect = getRegisteredTabRect(registeredTabs, selectedValue);
-            if (selectedTabRect &&
-                previousSelectedTabRect &&
-                previousSelectedValue &&
-                lastAnimatedFrom !== previousSelectedValue) {
-                var offset = vertical
-                    ? previousSelectedTabRect.y - selectedTabRect.y
-                    : previousSelectedTabRect.x - selectedTabRect.x;
-                var scale = vertical
-                    ? previousSelectedTabRect.height / selectedTabRect.height
-                    : previousSelectedTabRect.width / selectedTabRect.width;
-                setAnimationValues({ offset: offset, scale: scale });
-                setLastAnimatedFrom(previousSelectedValue);
-            }
-        }
-        else if (lastAnimatedFrom) {
-            // need to clear the last animated from so that if this tab is selected again
-            // from the same previous tab as last time, that animation still happens.
-            setLastAnimatedFrom(undefined);
-        }
-        // do not apply any animation if the tab is disabled
-        if (disabled) {
-            return state;
-        }
-        // the animation should only happen as the selection indicator returns to its
-        // original position and not when set at the previous tabs position.
-        var animating = animationValues.offset === 0 && animationValues.scale === 1;
-        state.root.className = react_1.mergeClasses(state.root.className, selected && activeIndicatorStyles.base, selected && animating && activeIndicatorStyles.animated, selected && (vertical ? activeIndicatorStyles.vertical : activeIndicatorStyles.horizontal));
-        var rootCssVars = (_a = {},
-            _a[tabIndicatorCssVars_unstable.offsetVar] = animationValues.offset + "px",
-            _a[tabIndicatorCssVars_unstable.scaleVar] = "" + animationValues.scale,
-            _a);
-        state.root.style = tslib_1.__assign(tslib_1.__assign({}, rootCssVars), state.root.style);
-        return state;
-    };
-    exports.useTabAnimatedIndicatorStyles_unstable = useTabAnimatedIndicatorStyles_unstable;
-});
-//# sourceMappingURL=useTabAnimatedIndicator.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"useTabAnimatedIndicator.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-tabs/src/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 { useTabListContext_unstable } from '../TabList/TabListContext';\nimport { TabRegisterData } from '../TabList/TabList.types';\nimport { tokens } from '@fluentui/react-theme';\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nconst tabIndicatorCssVars_unstable = {\n  offsetVar: '--fui-Tab__indicator--offset',\n  scaleVar: '--fui-Tab__indicator--scale',\n};\n\nconst useActiveIndicatorStyles = makeStyles({\n  base: {\n    // overflow is required to allow the selection indicator to animate outside the tab area.\n    ...shorthands.overflow('visible'),\n  },\n  animated: {\n    '::after': {\n      transitionProperty: 'transform',\n      transitionDuration: `${tokens.durationSlow}`,\n      transitionTimingFunction: `${tokens.curveDecelerateMax}`,\n    },\n    '@media (prefers-reduced-motion: reduce)': {\n      '::after': {\n        transitionProperty: 'none',\n        transitionDuration: '0.01ms',\n      },\n    },\n  },\n  horizontal: {\n    '::after': {\n      transformOrigin: 'left',\n      transform: `translateX(var(${tabIndicatorCssVars_unstable.offsetVar}))\n    scaleX(var(${tabIndicatorCssVars_unstable.scaleVar}))`,\n    },\n  },\n  vertical: {\n    '::after': {\n      transformOrigin: 'top',\n      transform: `translateY(var(${tabIndicatorCssVars_unstable.offsetVar}))\n        scaleY(var(${tabIndicatorCssVars_unstable.scaleVar}))`,\n    },\n  },\n});\n\nconst calculateTabRect = (element: HTMLElement) => {\n  if (element) {\n    const parentRect = element.parentElement?.getBoundingClientRect() || { x: 0, y: 0, width: 0, height: 0 };\n    const tabRect = element.getBoundingClientRect();\n\n    return {\n      x: tabRect.x - parentRect.x,\n      y: tabRect.y - parentRect.y,\n      width: tabRect.width,\n      height: tabRect.height,\n    };\n  }\n  return undefined;\n};\n\nconst getRegisteredTabRect = (registeredTabs: Record<string, TabRegisterData>, value?: TabValue) => {\n  const element =\n    value !== undefined && value !== null ? registeredTabs[JSON.stringify(value)]?.ref.current : undefined;\n  return element ? calculateTabRect(element) : undefined;\n};\n\n/**\n * Adds additional styling to the active tab selection indicator to create a sliding animation.\n */\nexport const useTabAnimatedIndicatorStyles_unstable = (state: TabState): TabState => {\n  const { disabled, selected, vertical } = state;\n\n  const activeIndicatorStyles = useActiveIndicatorStyles();\n  const [lastAnimatedFrom, setLastAnimatedFrom] = React.useState<TabValue>();\n  const [animationValues, setAnimationValues] = React.useState({ offset: 0, scale: 1 });\n  const getRegisteredTabs = useTabListContext_unstable(ctx => ctx.getRegisteredTabs);\n\n  React.useEffect(() => {\n    if (lastAnimatedFrom) {\n      setAnimationValues({ offset: 0, scale: 1 });\n    }\n  }, [lastAnimatedFrom]);\n\n  if (selected) {\n    const { previousSelectedValue, selectedValue, registeredTabs } = getRegisteredTabs();\n    const previousSelectedTabRect = getRegisteredTabRect(registeredTabs, previousSelectedValue);\n    const selectedTabRect = getRegisteredTabRect(registeredTabs, selectedValue);\n\n    if (\n      selectedTabRect &&\n      previousSelectedTabRect &&\n      previousSelectedValue &&\n      lastAnimatedFrom !== previousSelectedValue\n    ) {\n      const offset = vertical\n        ? previousSelectedTabRect.y - selectedTabRect.y\n        : previousSelectedTabRect.x - selectedTabRect.x;\n\n      const scale = vertical\n        ? previousSelectedTabRect.height / selectedTabRect.height\n        : previousSelectedTabRect.width / selectedTabRect.width;\n\n      setAnimationValues({ offset, scale });\n      setLastAnimatedFrom(previousSelectedValue);\n    }\n  } else if (lastAnimatedFrom) {\n    // need to clear the last animated from so that if this tab is selected again\n    // from the same previous tab as last time, that animation still happens.\n    setLastAnimatedFrom(undefined);\n  }\n\n  // do not apply any animation if the tab is disabled\n  if (disabled) {\n    return state;\n  }\n\n  // the animation should only happen as the selection indicator returns to its\n  // original position and not when set at the previous tabs position.\n  const animating = animationValues.offset === 0 && animationValues.scale === 1;\n\n  state.root.className = mergeClasses(\n    state.root.className,\n    selected && activeIndicatorStyles.base,\n    selected && animating && activeIndicatorStyles.animated,\n    selected && (vertical ? activeIndicatorStyles.vertical : activeIndicatorStyles.horizontal),\n  );\n\n  const rootCssVars = {\n    [tabIndicatorCssVars_unstable.offsetVar]: `${animationValues.offset}px`,\n    [tabIndicatorCssVars_unstable.scaleVar]: `${animationValues.scale}`,\n  };\n\n  state.root.style = {\n    ...rootCssVars,\n    ...state.root.style,\n  };\n\n  return state;\n};\n"]}

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

@@ -1,380 +0,0 @@
-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 }), { enableOutline: true }),
-    });
-    /** 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

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

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

@@ -1,18 +0,0 @@
-define(["require", "exports", "react", "./useTabList", "./renderTabList", "./useTabListStyles", "./useTabListContextValues", "@fluentui/react-shared-contexts"], function (require, exports, React, useTabList_1, renderTabList_1, useTabListStyles_1, useTabListContextValues_1, react_shared_contexts_1) {
-    "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_unstable(state);
-        useTabListStyles_1.useTabListStyles_unstable(state);
-        var useCustomStyles = react_shared_contexts_1.useCustomStyleHooks_unstable().useTabListStyles_unstable;
-        useCustomStyles(state);
-        return renderTabList_1.renderTabList_unstable(state, contextValues);
-    });
-    exports.TabList.displayName = 'TabList';
-});
-//# sourceMappingURL=TabList.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"TabList.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-tabs/src/components/TabList/TabList.tsx"],"names":[],"mappings":";;;;IASA;;OAEG;IACU,QAAA,OAAO,GAAsC,KAAK,CAAC,UAAU,CAAC,UAAC,KAAK,EAAE,GAAG;QACpF,IAAM,KAAK,GAAG,gCAAmB,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;QAC9C,IAAM,aAAa,GAAG,0DAAgC,CAAC,KAAK,CAAC,CAAC;QAE9D,4CAAyB,CAAC,KAAK,CAAC,CAAC;QAEzB,IAA2B,eAAe,GAAK,oDAA4B,EAAE,0BAAnC,CAAoC;QACtF,eAAe,CAAC,KAAK,CAAC,CAAC;QAEvB,OAAO,sCAAsB,CAAC,KAAK,EAAE,aAAa,CAAC,CAAC;IACtD,CAAC,CAAC,CAAC;IAEH,eAAO,CAAC,WAAW,GAAG,SAAS,CAAC","sourcesContent":["import * as React from 'react';\nimport { useTabList_unstable } from './useTabList';\nimport { renderTabList_unstable } from './renderTabList';\nimport { useTabListStyles_unstable } from './useTabListStyles';\nimport type { TabListProps } from './TabList.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTabListContextValues_unstable } from './useTabListContextValues';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * A tab list provides single selection from a set of tabs.\n */\nexport const TabList: ForwardRefComponent<TabListProps> = React.forwardRef((props, ref) => {\n  const state = useTabList_unstable(props, ref);\n  const contextValues = useTabListContextValues_unstable(state);\n\n  useTabListStyles_unstable(state);\n\n  const { useTabListStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n  useCustomStyles(state);\n\n  return renderTabList_unstable(state, contextValues);\n});\n\nTabList.displayName = 'TabList';\n"]}

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

@@ -1,5 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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"]}