first commit

node_modules/@fluentui/react/lib-amd/components/Pivot/Pivot.base.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import type { IPivotProps } from './Pivot.types';
+export declare const PivotBase: React.FunctionComponent<IPivotProps>;

node_modules/@fluentui/react/lib-amd/components/Pivot/Pivot.base.js

@@ -0,0 +1,206 @@
+define(["require", "exports", "tslib", "react", "@fluentui/react-hooks", "@fluentui/utilities", "../../Button", "../../utilities/useOverflow", "../../FocusZone", "../ContextualMenu/ContextualMenu.types", "../Icon/Icon", "./PivotItem"], function (require, exports, tslib_1, React, react_hooks_1, utilities_1, Button_1, useOverflow_1, FocusZone_1, ContextualMenu_types_1, Icon_1, PivotItem_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.PivotBase = void 0;
+    var getClassNames = (0, utilities_1.classNamesFunction)();
+    var COMPONENT_NAME = 'Pivot';
+    var getTabId = function (props, pivotId, itemKey, index) {
+        if (props.getTabId) {
+            return props.getTabId(itemKey, index);
+        }
+        return pivotId + "-Tab".concat(index);
+    };
+    // Gets the set of PivotLinks as array of IPivotItemProps
+    // The set of Links is determined by child components of type PivotItem
+    var getLinkItems = function (props, pivotId) {
+        var result = {
+            links: [],
+            keyToIndexMapping: {},
+            keyToTabIdMapping: {},
+        };
+        React.Children.forEach(React.Children.toArray(props.children), function (child, index) {
+            if (isPivotItem(child)) {
+                var _a = child.props, 
+                // eslint-disable-next-line @typescript-eslint/no-deprecated
+                linkText = _a.linkText, pivotItemProps = tslib_1.__rest(_a, ["linkText"]);
+                var itemKey = child.props.itemKey || index.toString();
+                result.links.push(tslib_1.__assign(tslib_1.__assign({ headerText: linkText }, pivotItemProps), { itemKey: itemKey }));
+                result.keyToIndexMapping[itemKey] = index;
+                result.keyToTabIdMapping[itemKey] = getTabId(props, pivotId, itemKey, index);
+            }
+            else if (child) {
+                (0, utilities_1.warn)('The children of a Pivot component must be of type PivotItem to be rendered.');
+            }
+        });
+        return result;
+    };
+    var isPivotItem = function (item) {
+        var _a;
+        return React.isValidElement(item) && ((_a = item.type) === null || _a === void 0 ? void 0 : _a.name) === PivotItem_1.PivotItem.name;
+    };
+    exports.PivotBase = React.forwardRef(function (props, ref) {
+        var focusZoneRef = React.useRef(null);
+        var overflowMenuButtonComponentRef = React.useRef(null);
+        var pivotId = (0, react_hooks_1.useId)('Pivot');
+        var _a = (0, react_hooks_1.useControllableValue)(props.selectedKey, props.defaultSelectedKey), selectedKey = _a[0], setSelectedKey = _a[1];
+        var componentRef = props.componentRef, theme = props.theme, linkSize = props.linkSize, linkFormat = props.linkFormat, overflowBehavior = props.overflowBehavior, overflowAriaLabel = props.overflowAriaLabel, focusZoneProps = props.focusZoneProps, overflowButtonAs = props.overflowButtonAs;
+        // eslint-disable-next-line prefer-const
+        var classNames;
+        var nameProps = {
+            'aria-label': props['aria-label'],
+            'aria-labelledby': props['aria-labelledby'],
+        };
+        var divProps = (0, utilities_1.getNativeProps)(props, utilities_1.divProperties, [
+            'aria-label',
+            'aria-labelledby',
+        ]);
+        var linkCollection = getLinkItems(props, pivotId);
+        React.useImperativeHandle(componentRef, function () { return ({
+            focus: function () {
+                var _a;
+                (_a = focusZoneRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            },
+        }); });
+        var renderLinkContent = function (link) {
+            if (!link) {
+                return null;
+            }
+            var itemCount = link.itemCount, itemIcon = link.itemIcon, headerText = link.headerText;
+            return (React.createElement("span", { className: classNames.linkContent },
+                itemIcon !== undefined && (React.createElement("span", { className: classNames.icon },
+                    React.createElement(Icon_1.Icon, { iconName: itemIcon }))),
+                headerText !== undefined && React.createElement("span", { className: classNames.text },
+                    " ",
+                    link.headerText),
+                itemCount !== undefined && React.createElement("span", { className: classNames.count },
+                    " (",
+                    itemCount,
+                    ")")));
+        };
+        var renderPivotLink = function (renderLinkCollection, link, renderPivotLinkSelectedKey, className) {
+            var itemKey = link.itemKey, headerButtonProps = link.headerButtonProps, onRenderItemLink = link.onRenderItemLink;
+            var tabId = renderLinkCollection.keyToTabIdMapping[itemKey];
+            var linkContent;
+            var isSelected = renderPivotLinkSelectedKey === itemKey;
+            if (onRenderItemLink) {
+                linkContent = onRenderItemLink(link, renderLinkContent);
+            }
+            else {
+                linkContent = renderLinkContent(link);
+            }
+            var contentString = link.headerText || '';
+            contentString += link.itemCount ? ' (' + link.itemCount + ')' : '';
+            // Adding space supplementary for icon
+            contentString += link.itemIcon ? ' xx' : '';
+            var itemSemantics = link.role && link.role !== 'tab'
+                ? {
+                    role: link.role,
+                }
+                : {
+                    role: 'tab',
+                    'aria-selected': isSelected,
+                };
+            return (React.createElement(Button_1.CommandButton, tslib_1.__assign({}, headerButtonProps, itemSemantics, { id: tabId, key: itemKey, className: (0, utilities_1.css)(className, isSelected && classNames.linkIsSelected), 
+                // eslint-disable-next-line react/jsx-no-bind
+                onClick: function (ev) { return onLinkClick(itemKey, ev); }, 
+                // eslint-disable-next-line react/jsx-no-bind
+                onKeyDown: function (ev) { return onKeyDown(itemKey, ev); }, "aria-label": link.ariaLabel, name: link.headerText, keytipProps: link.keytipProps, "data-content": contentString }), linkContent));
+        };
+        var onLinkClick = function (itemKey, ev) {
+            ev.preventDefault();
+            updateSelectedItem(itemKey, ev);
+        };
+        var onKeyDown = function (itemKey, ev) {
+            // eslint-disable-next-line @typescript-eslint/no-deprecated
+            if (ev.which === utilities_1.KeyCodes.enter) {
+                ev.preventDefault();
+                updateSelectedItem(itemKey, ev);
+            }
+        };
+        var updateSelectedItem = function (itemKey, ev) {
+            var _a;
+            setSelectedKey(itemKey);
+            linkCollection = getLinkItems(props, pivotId);
+            if (props.onLinkClick && linkCollection.keyToIndexMapping[itemKey] >= 0) {
+                var selectedIndex = linkCollection.keyToIndexMapping[itemKey];
+                var item = React.Children.toArray(props.children)[selectedIndex];
+                if (isPivotItem(item)) {
+                    props.onLinkClick(item, ev);
+                }
+            }
+            (_a = overflowMenuButtonComponentRef.current) === null || _a === void 0 ? void 0 : _a.dismissMenu();
+        };
+        var renderPivotItem = function (itemKey, isActive) {
+            if (props.headersOnly || !itemKey) {
+                return null;
+            }
+            var index = linkCollection.keyToIndexMapping[itemKey];
+            var selectedTabId = linkCollection.keyToTabIdMapping[itemKey];
+            return (React.createElement("div", { role: "tabpanel", hidden: !isActive, key: itemKey, "aria-hidden": !isActive, "aria-labelledby": selectedTabId, className: classNames.itemContainer }, React.Children.toArray(props.children)[index]));
+        };
+        var isKeyValid = function (itemKey) {
+            return itemKey === null || (itemKey !== undefined && linkCollection.keyToIndexMapping[itemKey] !== undefined);
+        };
+        var getSelectedKey = function () {
+            if (isKeyValid(selectedKey)) {
+                return selectedKey;
+            }
+            if (linkCollection.links.length) {
+                return linkCollection.links[0].itemKey;
+            }
+            return undefined;
+        };
+        classNames = getClassNames(props.styles, {
+            theme: theme,
+            linkSize: linkSize,
+            linkFormat: linkFormat,
+        });
+        var renderedSelectedKey = getSelectedKey();
+        var renderedSelectedIndex = renderedSelectedKey ? linkCollection.keyToIndexMapping[renderedSelectedKey] : 0;
+        var items = linkCollection.links.map(function (l) {
+            return renderPivotLink(linkCollection, l, renderedSelectedKey, classNames.link);
+        });
+        // The overflow menu starts empty and items[] is updated as the overflow items change
+        var overflowMenuProps = React.useMemo(function () { return ({
+            items: [],
+            alignTargetEdge: true,
+            directionalHint: ContextualMenu_types_1.DirectionalHint.bottomRightEdge,
+        }); }, []);
+        var overflowMenuButtonRef = (0, useOverflow_1.useOverflow)({
+            onOverflowItemsChanged: function (overflowIndex, elements) {
+                // Set data-is-overflowing on each item
+                elements.forEach(function (_a) {
+                    var ele = _a.ele, isOverflowing = _a.isOverflowing;
+                    return (ele.dataset.isOverflowing = "".concat(isOverflowing));
+                });
+                // Update the menu items
+                overflowMenuProps.items = linkCollection.links
+                    .slice(overflowIndex)
+                    .filter(function (link) { return link.itemKey !== renderedSelectedKey; })
+                    .map(function (link, index) {
+                    link.role = 'menuitem';
+                    return {
+                        key: link.itemKey || "".concat(overflowIndex + index),
+                        onRender: function () { return renderPivotLink(linkCollection, link, renderedSelectedKey, classNames.linkInMenu); },
+                    };
+                });
+            },
+            rtl: (0, utilities_1.getRTL)(theme),
+            pinnedIndex: renderedSelectedIndex,
+        }).menuButtonRef;
+        var OverflowButton = overflowButtonAs ? overflowButtonAs : Button_1.CommandButton;
+        return (React.createElement("div", tslib_1.__assign({ ref: ref }, divProps),
+            React.createElement(FocusZone_1.FocusZone, tslib_1.__assign({ componentRef: focusZoneRef, role: "tablist" }, nameProps, { direction: FocusZone_1.FocusZoneDirection.horizontal }, focusZoneProps, { className: (0, utilities_1.css)(classNames.root, focusZoneProps === null || focusZoneProps === void 0 ? void 0 : focusZoneProps.className) }),
+                items,
+                overflowBehavior === 'menu' && (React.createElement(OverflowButton, { className: (0, utilities_1.css)(classNames.link, classNames.overflowMenuButton), 
+                    // eslint-disable-next-line @typescript-eslint/no-deprecated
+                    elementRef: overflowMenuButtonRef, componentRef: overflowMenuButtonComponentRef, menuProps: overflowMenuProps, menuIconProps: { iconName: 'More', style: { color: 'inherit' } }, ariaLabel: overflowAriaLabel, role: "tab" }))),
+            renderedSelectedKey &&
+                linkCollection.links.map(function (link) {
+                    return (link.alwaysRender === true || renderedSelectedKey === link.itemKey) &&
+                        renderPivotItem(link.itemKey, renderedSelectedKey === link.itemKey);
+                })));
+    });
+    exports.PivotBase.displayName = COMPONENT_NAME;
+});
+//# sourceMappingURL=Pivot.base.js.map

node_modules/@fluentui/react/lib-amd/components/Pivot/Pivot.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import type { IPivotProps } from './Pivot.types';
+/**
+ * The Pivot control and related tabs pattern are used for navigating frequently accessed,
+ * distinct content categories. Pivots allow for navigation between two or more content
+ * views and relies on text headers to articulate the different sections of content.
+ */
+export declare const Pivot: React.FunctionComponent<IPivotProps>;

node_modules/@fluentui/react/lib-amd/components/Pivot/Pivot.js

@@ -0,0 +1,14 @@
+define(["require", "exports", "@fluentui/utilities", "./Pivot.base", "./Pivot.styles"], function (require, exports, utilities_1, Pivot_base_1, Pivot_styles_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.Pivot = void 0;
+    /**
+     * The Pivot control and related tabs pattern are used for navigating frequently accessed,
+     * distinct content categories. Pivots allow for navigation between two or more content
+     * views and relies on text headers to articulate the different sections of content.
+     */
+    exports.Pivot = (0, utilities_1.styled)(Pivot_base_1.PivotBase, Pivot_styles_1.getStyles, undefined, {
+        scope: 'Pivot',
+    });
+});
+//# sourceMappingURL=Pivot.js.map

node_modules/@fluentui/react/lib-amd/components/Pivot/Pivot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pivot.js","sourceRoot":"../src/","sources":["components/Pivot/Pivot.tsx"],"names":[],"mappings":";;;;IAMA;;;;OAIG;IACU,QAAA,KAAK,GAAyC,IAAA,kBAAM,EAC/D,sBAAS,EACT,wBAAS,EACT,SAAS,EACT;QACE,KAAK,EAAE,OAAO;KACf,CACF,CAAC","sourcesContent":["import * as React from 'react';\nimport { styled } from '@fluentui/utilities';\nimport { PivotBase } from './Pivot.base';\nimport { getStyles } from './Pivot.styles';\nimport type { IPivotProps, IPivotStyleProps, IPivotStyles } from './Pivot.types';\n\n/**\n * The Pivot control and related tabs pattern are used for navigating frequently accessed,\n * distinct content categories. Pivots allow for navigation between two or more content\n * views and relies on text headers to articulate the different sections of content.\n */\nexport const Pivot: React.FunctionComponent<IPivotProps> = styled<IPivotProps, IPivotStyleProps, IPivotStyles>(\n  PivotBase,\n  getStyles,\n  undefined,\n  {\n    scope: 'Pivot',\n  },\n);\n"]}

node_modules/@fluentui/react/lib-amd/components/Pivot/Pivot.styles.d.ts

@@ -0,0 +1,2 @@
+import type { IPivotStyleProps, IPivotStyles } from './Pivot.types';
+export declare const getStyles: (props: IPivotStyleProps) => IPivotStyles;

node_modules/@fluentui/react/lib-amd/components/Pivot/Pivot.styles.js

@@ -0,0 +1,270 @@
+define(["require", "exports", "tslib", "@fluentui/style-utilities", "@fluentui/utilities"], function (require, exports, tslib_1, style_utilities_1, utilities_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.getStyles = void 0;
+    var globalClassNames = {
+        count: 'ms-Pivot-count',
+        icon: 'ms-Pivot-icon',
+        linkIsSelected: 'is-selected',
+        link: 'ms-Pivot-link',
+        linkContent: 'ms-Pivot-linkContent',
+        root: 'ms-Pivot',
+        rootIsLarge: 'ms-Pivot--large',
+        rootIsTabs: 'ms-Pivot--tabs',
+        text: 'ms-Pivot-text',
+        linkInMenu: 'ms-Pivot-linkInMenu',
+        overflowMenuButton: 'ms-Pivot-overflowMenuButton',
+    };
+    var getLinkStyles = function (props, classNames, isLinkInOverflowMenu) {
+        var _a, _b, _c;
+        if (isLinkInOverflowMenu === void 0) { isLinkInOverflowMenu = false; }
+        var linkSize = props.linkSize, linkFormat = props.linkFormat;
+        var _d = props.theme, semanticColors = _d.semanticColors, fonts = _d.fonts;
+        var rootIsLarge = linkSize === 'large';
+        var rootIsTabs = linkFormat === 'tabs';
+        return [
+            fonts.medium,
+            {
+                color: semanticColors.actionLink,
+                padding: '0 8px',
+                position: 'relative',
+                backgroundColor: 'transparent',
+                border: 0,
+                borderRadius: 0,
+                selectors: {
+                    ':hover': {
+                        backgroundColor: semanticColors.buttonBackgroundHovered,
+                        color: semanticColors.buttonTextHovered,
+                        cursor: 'pointer',
+                    },
+                    ':active': {
+                        backgroundColor: semanticColors.buttonBackgroundPressed,
+                        color: semanticColors.buttonTextHovered,
+                    },
+                    ':focus': {
+                        outline: 'none',
+                    },
+                },
+            },
+            !isLinkInOverflowMenu && [
+                {
+                    display: 'inline-block',
+                    lineHeight: 44,
+                    height: 44,
+                    marginRight: 8,
+                    textAlign: 'center',
+                    selectors: (_a = {},
+                        _a[".".concat(utilities_1.IsFocusVisibleClassName, " &:focus, :host(.").concat(utilities_1.IsFocusVisibleClassName, ") &:focus")] = {
+                            outline: "1px solid ".concat(semanticColors.focusBorder),
+                        },
+                        _a[".".concat(utilities_1.IsFocusVisibleClassName, " &:focus:after, :host(.").concat(utilities_1.IsFocusVisibleClassName, ") &:focus:after")] = {
+                            content: 'attr(data-content)',
+                            position: 'relative',
+                            border: 0,
+                        },
+                        _a[':before'] = {
+                            backgroundColor: 'transparent',
+                            bottom: 0,
+                            content: '""',
+                            height: 2,
+                            left: 8,
+                            position: 'absolute',
+                            right: 8,
+                            transition: "left ".concat(style_utilities_1.AnimationVariables.durationValue2, " ").concat(style_utilities_1.AnimationVariables.easeFunction2, ",\n                        right ").concat(style_utilities_1.AnimationVariables.durationValue2, " ").concat(style_utilities_1.AnimationVariables.easeFunction2),
+                        },
+                        _a[':after'] = {
+                            color: 'transparent',
+                            content: 'attr(data-content)',
+                            display: 'block',
+                            fontWeight: style_utilities_1.FontWeights.bold,
+                            height: 1,
+                            overflow: 'hidden',
+                            visibility: 'hidden',
+                        },
+                        _a),
+                },
+                rootIsLarge && {
+                    fontSize: fonts.large.fontSize,
+                },
+                rootIsTabs && [
+                    {
+                        marginRight: 0,
+                        height: 44,
+                        lineHeight: 44,
+                        backgroundColor: semanticColors.buttonBackground,
+                        padding: '0 10px',
+                        verticalAlign: 'top',
+                        selectors: (_b = {
+                                ':focus': {
+                                    outlineOffset: '-2px',
+                                }
+                            },
+                            _b[".".concat(utilities_1.IsFocusVisibleClassName, " &:focus::before, :host(.").concat(utilities_1.IsFocusVisibleClassName, ") &:focus::before")] = {
+                                height: 'auto',
+                                background: 'transparent',
+                                transition: 'none',
+                            },
+                            _b['&:hover, &:focus'] = {
+                                color: semanticColors.buttonTextCheckedHovered,
+                            },
+                            _b['&:active, &:hover'] = {
+                                color: semanticColors.primaryButtonText,
+                                backgroundColor: semanticColors.primaryButtonBackground,
+                            },
+                            _b["&.".concat(classNames.linkIsSelected)] = {
+                                backgroundColor: semanticColors.primaryButtonBackground,
+                                color: semanticColors.primaryButtonText,
+                                fontWeight: style_utilities_1.FontWeights.regular,
+                                selectors: (_c = {
+                                        ':before': {
+                                            backgroundColor: 'transparent',
+                                            transition: 'none',
+                                            position: 'absolute',
+                                            top: 0,
+                                            left: 0,
+                                            right: 0,
+                                            bottom: 0,
+                                            content: '""',
+                                            height: 0,
+                                        },
+                                        ':hover': {
+                                            backgroundColor: semanticColors.primaryButtonBackgroundHovered,
+                                            color: semanticColors.primaryButtonText,
+                                        },
+                                        ':active': {
+                                            backgroundColor: semanticColors.primaryButtonBackgroundPressed,
+                                            color: semanticColors.primaryButtonText,
+                                        }
+                                    },
+                                    _c[style_utilities_1.HighContrastSelector] = tslib_1.__assign({ fontWeight: style_utilities_1.FontWeights.semibold, color: 'HighlightText', background: 'Highlight' }, (0, style_utilities_1.getHighContrastNoAdjustStyle)()),
+                                    _c),
+                            },
+                            // eslint-disable-next-line @fluentui/max-len
+                            _b[".".concat(utilities_1.IsFocusVisibleClassName, " &.").concat(classNames.linkIsSelected, ":focus, :host(.").concat(utilities_1.IsFocusVisibleClassName, ") &.").concat(classNames.linkIsSelected, ":focus")] = {
+                                outlineColor: semanticColors.primaryButtonText,
+                            },
+                            _b),
+                    },
+                ],
+            ],
+        ];
+    };
+    var getStyles = function (props) {
+        var _a, _b, _c, _d;
+        var className = props.className, linkSize = props.linkSize, linkFormat = props.linkFormat, theme = props.theme;
+        var semanticColors = theme.semanticColors, fonts = theme.fonts;
+        var classNames = (0, style_utilities_1.getGlobalClassNames)(globalClassNames, theme);
+        var rootIsLarge = linkSize === 'large';
+        var rootIsTabs = linkFormat === 'tabs';
+        return {
+            root: [
+                classNames.root,
+                fonts.medium,
+                style_utilities_1.normalize,
+                {
+                    position: 'relative',
+                    color: semanticColors.link,
+                    whiteSpace: 'nowrap',
+                },
+                rootIsLarge && classNames.rootIsLarge,
+                rootIsTabs && classNames.rootIsTabs,
+                className,
+            ],
+            itemContainer: {
+                selectors: {
+                    '&[hidden]': {
+                        display: 'none',
+                    },
+                },
+            },
+            link: tslib_1.__spreadArray(tslib_1.__spreadArray([
+                classNames.link
+            ], getLinkStyles(props, classNames), true), [
+                (_a = {},
+                    _a["&[data-is-overflowing='true']"] = {
+                        display: 'none',
+                    },
+                    _a),
+            ], false),
+            overflowMenuButton: [
+                classNames.overflowMenuButton,
+                (_b = {
+                        visibility: 'hidden',
+                        position: 'absolute',
+                        right: 0
+                    },
+                    _b[".".concat(classNames.link, "[data-is-overflowing='true'] ~ &")] = {
+                        visibility: 'visible',
+                        position: 'relative',
+                    },
+                    _b),
+            ],
+            linkInMenu: tslib_1.__spreadArray(tslib_1.__spreadArray([
+                classNames.linkInMenu
+            ], getLinkStyles(props, classNames, true), true), [
+                {
+                    justifyContent: 'start',
+                    height: 36,
+                    lineHeight: 36,
+                    width: '100%',
+                },
+            ], false),
+            linkIsSelected: [
+                classNames.link,
+                classNames.linkIsSelected,
+                {
+                    fontWeight: style_utilities_1.FontWeights.semibold,
+                    selectors: (_c = {
+                            ':before': {
+                                backgroundColor: semanticColors.inputBackgroundChecked,
+                                selectors: (_d = {},
+                                    _d[style_utilities_1.HighContrastSelector] = {
+                                        backgroundColor: 'Highlight',
+                                    },
+                                    _d),
+                            },
+                            ':hover::before': {
+                                left: 0,
+                                right: 0,
+                            }
+                        },
+                        _c[style_utilities_1.HighContrastSelector] = {
+                            color: 'Highlight',
+                        },
+                        _c),
+                },
+            ],
+            linkContent: [
+                classNames.linkContent,
+                {
+                    flex: '0 1 100%',
+                    selectors: {
+                        '& > * ': {
+                            marginLeft: 4,
+                        },
+                        '& > *:first-child': {
+                            marginLeft: 0,
+                        },
+                    },
+                },
+            ],
+            text: [
+                classNames.text,
+                {
+                    display: 'inline-block',
+                    verticalAlign: 'top',
+                },
+            ],
+            count: [
+                classNames.count,
+                {
+                    display: 'inline-block',
+                    verticalAlign: 'top',
+                },
+            ],
+            icon: classNames.icon,
+        };
+    };
+    exports.getStyles = getStyles;
+});
+//# sourceMappingURL=Pivot.styles.js.map

node_modules/@fluentui/react/lib-amd/components/Pivot/Pivot.types.d.ts

@@ -0,0 +1,156 @@
+import * as React from 'react';
+import { PivotItem } from './PivotItem';
+import type { IStyle, ITheme } from '@fluentui/style-utilities';
+import type { IStyleFunctionOrObject } from '@fluentui/utilities';
+import type { IFocusZoneProps } from '../../FocusZone';
+import type { IComponentAs } from '../../Utilities';
+import type { IButtonProps } from '../../Button';
+/**
+ * {@docCategory Pivot}
+ */
+export interface IPivot {
+    /**
+     * Sets focus to the first pivot tab.
+     */
+    focus(): void;
+}
+/**
+ * {@docCategory Pivot}
+ */
+export interface IPivotProps extends React.HTMLAttributes<HTMLDivElement>, React.RefAttributes<HTMLDivElement> {
+    /**
+     * Optional callback to access the IPivot interface. Use this instead of ref for accessing
+     * the public methods and properties of the component.
+     */
+    componentRef?: React.RefObject<IPivot | null>;
+    /**
+     * Call to provide customized styling that will layer on top of the variant rules.
+     */
+    styles?: IStyleFunctionOrObject<IPivotStyleProps, IPivotStyles>;
+    /**
+     * Theme provided by High-Order Component.
+     */
+    theme?: ITheme;
+    /**
+     * Additional css class to apply to the Pivot
+     * @defaultvalue undefined
+     */
+    className?: string;
+    /**
+     * Default selected key for the pivot. Only provide this if the pivot is an uncontrolled component;
+     * otherwise, use the `selectedKey` property.
+     */
+    defaultSelectedKey?: string;
+    /**
+     * Key of the selected pivot item. Updating this will override the Pivot's selected item state.
+     * Only provide this if the pivot is a controlled component where you are maintaining the
+     * current state; otherwise, use `defaultSelectedKey`.
+     */
+    selectedKey?: string | null;
+    /**
+     * Callback for when the selected pivot item is changed.
+     */
+    onLinkClick?: (item?: PivotItem, ev?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void;
+    /**
+     * Link size (normal, large)
+     */
+    linkSize?: PivotLinkSizeType;
+    /**
+     * Link format (links, tabs)
+     */
+    linkFormat?: PivotLinkFormatType;
+    /**
+     * Aria label for the overflow button, used if `overflowBehavior` is "menu".
+     */
+    overflowAriaLabel?: string;
+    /**
+     * Overflow behavior when there is not enough room to display all of the links/tabs
+     * * none: Pivot links will overflow the container and may not be visible
+     * * menu: Display an overflow menu that contains the tabs that don't fit
+     *
+     * @default none
+     */
+    overflowBehavior?: 'none' | 'menu';
+    /**
+     * Custom component for the overflow button.
+     */
+    overflowButtonAs?: IComponentAs<IButtonProps>;
+    /**
+     * Whether to skip rendering the tabpanel with the content of the selected tab.
+     * Use this prop if you plan to separately render the tab content
+     * and don't want to leave an empty tabpanel in the page that may confuse Screen Readers.
+     */
+    headersOnly?: boolean;
+    /**
+     * Callback to customize how IDs are generated for each tab header.
+     * Useful if you're rendering content outside and need to connect aria-labelledby.
+     */
+    getTabId?: (itemKey: string, index: number) => string;
+    /**
+     * Props passed to the `FocusZone` component used as the root of `Pivot`.
+     */
+    focusZoneProps?: IFocusZoneProps;
+}
+/**
+ * {@docCategory Pivot}
+ */
+export type IPivotStyleProps = Required<Pick<IPivotProps, 'theme'>> & Pick<IPivotProps, 'className'> & {
+    linkSize?: PivotLinkSizeType;
+    linkFormat?: PivotLinkFormatType;
+};
+/**
+ * {@docCategory Pivot}
+ */
+export interface IPivotStyles {
+    /**
+     * Style for the root element.
+     */
+    root: IStyle;
+    link: IStyle;
+    linkIsSelected: IStyle;
+    linkContent: IStyle;
+    text: IStyle;
+    count: IStyle;
+    icon: IStyle;
+    linkInMenu: IStyle;
+    overflowMenuButton: IStyle;
+    itemContainer?: IStyle;
+}
+/**
+ * {@docCategory Pivot}
+ * Display mode for the pivot links/tabs
+ */
+export type PivotLinkFormatType = 'links' | 'tabs';
+/**
+ * {@docCategory Pivot}
+ * Size of the pivot links/tabs
+ */
+export type PivotLinkSizeType = 'normal' | 'large';
+/**
+ * {@docCategory Pivot}
+ * @deprecated Use strings 'links' or 'tabs' instead of this enum
+ */
+export declare const enum PivotLinkFormat {
+    /**
+     * Display Pivot Links as links
+     */
+    links = "links",
+    /**
+     * Display Pivot Links as Tabs
+     */
+    tabs = "tabs"
+}
+/**
+ * {@docCategory Pivot}
+ * @deprecated Use strings 'normal' or 'large' instead of this enum
+ */
+export declare const enum PivotLinkSize {
+    /**
+     * Display Link using normal font size
+     */
+    normal = "normal",
+    /**
+     * Display links using large font size
+     */
+    large = "large"
+}

node_modules/@fluentui/react/lib-amd/components/Pivot/Pivot.types.js

@@ -0,0 +1,36 @@
+define(["require", "exports"], function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.PivotLinkSize = exports.PivotLinkFormat = void 0;
+    /**
+     * {@docCategory Pivot}
+     * @deprecated Use strings 'links' or 'tabs' instead of this enum
+     */
+    var PivotLinkFormat;
+    (function (PivotLinkFormat) {
+        /**
+         * Display Pivot Links as links
+         */
+        PivotLinkFormat["links"] = "links";
+        /**
+         * Display Pivot Links as Tabs
+         */
+        PivotLinkFormat["tabs"] = "tabs";
+    })(PivotLinkFormat || (exports.PivotLinkFormat = PivotLinkFormat = {}));
+    /**
+     * {@docCategory Pivot}
+     * @deprecated Use strings 'normal' or 'large' instead of this enum
+     */
+    var PivotLinkSize;
+    (function (PivotLinkSize) {
+        /**
+         * Display Link using normal font size
+         */
+        PivotLinkSize["normal"] = "normal";
+        /**
+         * Display links using large font size
+         */
+        PivotLinkSize["large"] = "large";
+    })(PivotLinkSize || (exports.PivotLinkSize = PivotLinkSize = {}));
+});
+//# sourceMappingURL=Pivot.types.js.map

node_modules/@fluentui/react/lib-amd/components/Pivot/PivotItem.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import type { IPivotItemProps } from './PivotItem.types';
+import type { JSXElement } from '@fluentui/utilities';
+export declare class PivotItem extends React.Component<IPivotItemProps, {}> {
+    constructor(props: IPivotItemProps);
+    render(): JSXElement;
+}

node_modules/@fluentui/react/lib-amd/components/Pivot/PivotItem.js

@@ -0,0 +1,23 @@
+define(["require", "exports", "tslib", "react", "@fluentui/utilities"], function (require, exports, tslib_1, React, utilities_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.PivotItem = void 0;
+    var COMPONENT_NAME = 'PivotItem';
+    var PivotItem = /** @class */ (function (_super) {
+        tslib_1.__extends(PivotItem, _super);
+        function PivotItem(props) {
+            var _this = _super.call(this, props) || this;
+            (0, utilities_1.initializeComponentRef)(_this);
+            (0, utilities_1.warnDeprecations)(COMPONENT_NAME, props, {
+                linkText: 'headerText',
+            });
+            return _this;
+        }
+        PivotItem.prototype.render = function () {
+            return React.createElement("div", tslib_1.__assign({}, (0, utilities_1.getNativeProps)(this.props, utilities_1.divProperties)), this.props.children);
+        };
+        return PivotItem;
+    }(React.Component));
+    exports.PivotItem = PivotItem;
+});
+//# sourceMappingURL=PivotItem.js.map

node_modules/@fluentui/react/lib-amd/components/Pivot/PivotItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PivotItem.js","sourceRoot":"../src/","sources":["components/Pivot/PivotItem.tsx"],"names":[],"mappings":";;;;IAMA,IAAM,cAAc,GAAG,WAAW,CAAC;IAEnC;QAA+B,qCAAoC;QACjE,mBAAY,KAAsB;YAChC,YAAA,MAAK,YAAC,KAAK,CAAC,SAAC;YAEb,IAAA,kCAAsB,EAAC,KAAI,CAAC,CAAC;YAC7B,IAAA,4BAAgB,EAAC,cAAc,EAAE,KAAK,EAAE;gBACtC,QAAQ,EAAE,YAAY;aACvB,CAAC,CAAC;;QACL,CAAC;QAEM,0BAAM,GAAb;YACE,OAAO,gDAAS,IAAA,0BAAc,EAAC,IAAI,CAAC,KAAK,EAAE,yBAAa,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAO,CAAC;QACzF,CAAC;QACH,gBAAC;IAAD,CAAC,AAbD,CAA+B,KAAK,CAAC,SAAS,GAa7C;IAbY,8BAAS","sourcesContent":["import * as React from 'react';\nimport { getNativeProps, divProperties, initializeComponentRef, warnDeprecations } from '@fluentui/utilities';\nimport type { IPivotItemProps } from './PivotItem.types';\n\nimport type { JSXElement } from '@fluentui/utilities';\n\nconst COMPONENT_NAME = 'PivotItem';\n\nexport class PivotItem extends React.Component<IPivotItemProps, {}> {\n  constructor(props: IPivotItemProps) {\n    super(props);\n\n    initializeComponentRef(this);\n    warnDeprecations(COMPONENT_NAME, props, {\n      linkText: 'headerText',\n    });\n  }\n\n  public render(): JSXElement {\n    return <div {...getNativeProps(this.props, divProperties)}>{this.props.children}</div>;\n  }\n}\n"]}

node_modules/@fluentui/react/lib-amd/components/Pivot/PivotItem.types.d.ts

@@ -0,0 +1,67 @@
+import * as React from 'react';
+import type { IRefObject, IRenderFunction } from '@fluentui/utilities';
+import type { IButtonProps } from '../../Button';
+import type { IKeytipProps } from '../Keytip/Keytip.types';
+/**
+ * {@docCategory Pivot}
+ */
+export interface IPivotItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    children?: React.ReactNode;
+    /**
+     * Gets the component ref.
+     */
+    componentRef?: IRefObject<{}>;
+    /**
+     * The text displayed of each pivot link.
+     * @deprecated Use `headerText` instead.
+     */
+    linkText?: string;
+    /**
+     * The text displayed of each pivot link.
+     */
+    headerText?: string;
+    /**
+     * Props for the header command button. This provides a way to pass in native props, such as data-* and aria-*,
+     * for each pivot header/link element.
+     */
+    headerButtonProps?: IButtonProps | {
+        [key: string]: string | number | boolean;
+    };
+    /**
+     * An required key to uniquely identify a pivot item.
+     *
+     * Note: The 'key' from react props cannot be used inside component.
+     */
+    itemKey?: string;
+    /**
+     * The aria label of each pivot link which will read by screen reader instead of linkText.
+     *
+     * Note that unless you have compelling requirements you should not override aria-label.
+     */
+    ariaLabel?: string;
+    /**
+     * Defines an optional item count displayed in parentheses just after the `linkText`.
+     *
+     * Examples: completed (4), Unread (99+)
+     */
+    itemCount?: number | string;
+    /**
+     * An optional icon to show next to the pivot link.
+     */
+    itemIcon?: string;
+    /**
+     * Optional custom renderer for the pivot item link
+     */
+    onRenderItemLink?: IRenderFunction<IPivotItemProps>;
+    /**
+     * Optional keytip for this PivotItem
+     */
+    keytipProps?: IKeytipProps;
+    /**
+     * Defines whether to always render the pivot item (regardless of whether it is selected or not).
+     * Useful if you're rendering content that is expensive to mount.
+     *
+     * @defaultvalue false
+     */
+    alwaysRender?: boolean;
+}

node_modules/@fluentui/react/lib-amd/components/Pivot/PivotItem.types.js

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

node_modules/@fluentui/react/lib-amd/components/Pivot/PivotItem.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PivotItem.types.js","sourceRoot":"../src/","sources":["components/Pivot/PivotItem.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { IRefObject, IRenderFunction } from '@fluentui/utilities';\nimport type { IButtonProps } from '../../Button';\nimport type { IKeytipProps } from '../Keytip/Keytip.types';\n\n/**\n * {@docCategory Pivot}\n */\nexport interface IPivotItemProps extends React.HTMLAttributes<HTMLDivElement> {\n  children?: React.ReactNode;\n  /**\n   * Gets the component ref.\n   */\n  componentRef?: IRefObject<{}>;\n\n  /**\n   * The text displayed of each pivot link.\n   * @deprecated Use `headerText` instead.\n   */\n  linkText?: string;\n\n  /**\n   * The text displayed of each pivot link.\n   */\n  headerText?: string;\n\n  /**\n   * Props for the header command button. This provides a way to pass in native props, such as data-* and aria-*,\n   * for each pivot header/link element.\n   */\n  headerButtonProps?: IButtonProps | { [key: string]: string | number | boolean };\n\n  /**\n   * An required key to uniquely identify a pivot item.\n   *\n   * Note: The 'key' from react props cannot be used inside component.\n   */\n  itemKey?: string;\n\n  /**\n   * The aria label of each pivot link which will read by screen reader instead of linkText.\n   *\n   * Note that unless you have compelling requirements you should not override aria-label.\n   */\n  ariaLabel?: string;\n\n  /**\n   * Defines an optional item count displayed in parentheses just after the `linkText`.\n   *\n   * Examples: completed (4), Unread (99+)\n   */\n  itemCount?: number | string;\n\n  /**\n   * An optional icon to show next to the pivot link.\n   */\n  itemIcon?: string;\n\n  /**\n   * Optional custom renderer for the pivot item link\n   */\n  onRenderItemLink?: IRenderFunction<IPivotItemProps>;\n\n  /**\n   * Optional keytip for this PivotItem\n   */\n  keytipProps?: IKeytipProps;\n\n  /**\n   * Defines whether to always render the pivot item (regardless of whether it is selected or not).\n   * Useful if you're rendering content that is expensive to mount.\n   *\n   * @defaultvalue false\n   */\n  alwaysRender?: boolean;\n}\n"]}

node_modules/@fluentui/react/lib-amd/components/Pivot/index.d.ts

@@ -0,0 +1,5 @@
+export * from './Pivot';
+export * from './Pivot.base';
+export { PivotItem } from './PivotItem';
+export * from './Pivot.types';
+export * from './PivotItem.types';

node_modules/@fluentui/react/lib-amd/components/Pivot/index.js

@@ -0,0 +1,11 @@
+define(["require", "exports", "tslib", "./Pivot", "./Pivot.base", "./PivotItem", "./Pivot.types", "./PivotItem.types"], function (require, exports, tslib_1, Pivot_1, Pivot_base_1, PivotItem_1, Pivot_types_1, PivotItem_types_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.PivotItem = void 0;
+    tslib_1.__exportStar(Pivot_1, exports);
+    tslib_1.__exportStar(Pivot_base_1, exports);
+    Object.defineProperty(exports, "PivotItem", { enumerable: true, get: function () { return PivotItem_1.PivotItem; } });
+    tslib_1.__exportStar(Pivot_types_1, exports);
+    tslib_1.__exportStar(PivotItem_types_1, exports);
+});
+//# sourceMappingURL=index.js.map

node_modules/@fluentui/react/lib-amd/components/Pivot/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/Pivot/index.ts"],"names":[],"mappings":";;;;IAAA,uCAAwB;IACxB,4CAA6B;IACpB,sGAAA,SAAS,OAAA;IAClB,6CAA8B;IAC9B,iDAAkC","sourcesContent":["export * from './Pivot';\nexport * from './Pivot.base';\nexport { PivotItem } from './PivotItem';\nexport * from './Pivot.types';\nexport * from './PivotItem.types';\n"]}