@fluentui/react-tabs 1.0.0-beta.17 → 1.0.0-beta.173

package/lib-amd/next/components/Tabs/Tabs.base.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Tabs.base.js","sourceRoot":"../src/","sources":["next/components/Tabs/Tabs.base.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { useControllableValue, useId } from '@fluentui/react-hooks';\nimport { classNamesFunction, css, divProperties, getNativeProps, getRTL, KeyCodes, warn } from '@fluentui/utilities';\nimport {\n  DirectionalHint,\n  FocusZone,\n  FocusZoneDirection,\n  Icon,\n  IContextualMenuProps,\n  IFocusZone,\n} from '@fluentui/react-internal';\nimport { CommandButton, IButton } from '@fluentui/react-internal/lib/compat/Button';\nimport { TabsImperativeHandle, TabItemProps, TabsProps, TabsStyleProps, TabsStyles, TabItem } from './index';\nimport { useOverflow } from '../../../utilities/useOverflow';\n\nconst getClassNames = classNamesFunction<TabsStyleProps, TabsStyles>();\n\nconst COMPONENT_NAME = 'Tabs';\n\ntype TabItemCollection = {\n  tabs: TabItemProps[];\n  keyToIndexMapping: { [key: string]: number };\n  keyToTabIdMapping: { [key: string]: string };\n};\n\nconst getTabId = (props: TabsProps, baseId: string, itemKey: string, index: number): string => {\n  if (props.getTabId) {\n    return props.getTabId(itemKey, index);\n  }\n  return baseId + `-Tab${index}`;\n};\n\n// Gets the set of Tabs as array of TabItemProps\n// The set of Tabs is determined by child components of type TabItem\nconst getTabItems = (props: TabsProps, baseId: string): TabItemCollection => {\n  const result: TabItemCollection = {\n    tabs: [],\n    keyToIndexMapping: {},\n    keyToTabIdMapping: {},\n  };\n\n  React.Children.forEach(React.Children.toArray(props.children), (child: React.ReactNode, index: number) => {\n    if (isTabItem(child)) {\n      const { itemKey = index.toString(), ...tabItemProps } = child.props;\n      result.tabs.push({\n        ...tabItemProps,\n        itemKey: itemKey,\n      });\n      result.keyToIndexMapping[itemKey] = index;\n      result.keyToTabIdMapping[itemKey] = getTabId(props, baseId, itemKey, index);\n    } else if (child) {\n      warn('The children of a Tabs component must be of type TabItem to be rendered.');\n    }\n  });\n  return result;\n};\n\nconst isTabItem = (item: React.ReactNode): item is TabItem => {\n  return ((item as React.ReactElement)?.type as React.ComponentType)?.name === TabItem.name;\n};\n\nexport const TabsBase: React.FunctionComponent<TabsProps> = React.forwardRef<HTMLDivElement, TabsProps>(\n  (props, ref) => {\n    const focusZoneRef = React.useRef<IFocusZone>(null);\n    const overflowMenuButtonComponentRef = React.useRef<IButton>(null);\n    const baseId: string = useId('Tabs');\n\n    const [selectedKey, setSelectedKey] = useControllableValue(props.selectedKey, props.defaultSelectedKey);\n\n    const { componentRef, theme, tabSize, tabFormat, overflowBehavior } = props;\n\n    let classNames: { [key in keyof TabsStyles]: string };\n    const divProps = getNativeProps<React.HTMLAttributes<HTMLDivElement>>(props, divProperties);\n\n    let tabCollection = getTabItems(props, baseId);\n\n    React.useImperativeHandle(componentRef as React.RefObject<TabsImperativeHandle>, () => ({\n      focus: () => {\n        focusZoneRef.current?.focus();\n      },\n    }));\n\n    const renderTabContent = (tab?: TabItemProps): JSX.Element | null => {\n      if (!tab) {\n        return null;\n      }\n\n      const { itemCount, itemIcon, headerText } = tab;\n      return (\n        <span className={classNames.tabContent}>\n          {itemIcon !== undefined && (\n            <span className={classNames.icon}>\n              <Icon iconName={itemIcon} />\n            </span>\n          )}\n          {headerText !== undefined && <span className={classNames.text}> {tab.headerText}</span>}\n          {itemCount !== undefined && <span className={classNames.count}> ({itemCount})</span>}\n        </span>\n      );\n    };\n\n    const renderTab = (\n      renderTabCollection: TabItemCollection,\n      tab: TabItemProps,\n      renderTabSelectedKey: string | null | undefined,\n      className: string,\n    ): JSX.Element => {\n      const { itemKey, headerButtonProps, onRenderTab } = tab;\n      const tabId = renderTabCollection.keyToTabIdMapping[itemKey!];\n      let tabContent: JSX.Element | null;\n      const isSelected: boolean = renderTabSelectedKey === itemKey;\n\n      if (onRenderTab) {\n        tabContent = onRenderTab(tab, renderTabContent);\n      } else {\n        tabContent = renderTabContent(tab);\n      }\n\n      let contentString = tab.headerText || '';\n      contentString += tab.itemCount ? ' (' + tab.itemCount + ')' : '';\n      // Adding space supplementary for icon\n      contentString += tab.itemIcon ? ' xx' : '';\n      return (\n        <CommandButton\n          {...headerButtonProps}\n          id={tabId}\n          key={itemKey}\n          className={css(className, isSelected && classNames.tabIsSelected)}\n          // eslint-disable-next-line react/jsx-no-bind\n          onClick={(ev: React.MouseEvent<HTMLElement>) => onTabClick(itemKey!, ev)}\n          // eslint-disable-next-line react/jsx-no-bind\n          onKeyDown={(ev: React.KeyboardEvent<HTMLElement>) => onKeyDown(itemKey!, ev)}\n          aria-label={tab.ariaLabel}\n          role=\"tab\"\n          aria-selected={isSelected}\n          name={tab.headerText}\n          keytipProps={tab.keytipProps}\n          data-content={contentString}\n        >\n          {tabContent}\n        </CommandButton>\n      );\n    };\n\n    const onTabClick = (itemKey: string, ev: React.MouseEvent<HTMLElement>): void => {\n      ev.preventDefault();\n      updateSelectedItem(itemKey, ev);\n    };\n\n    const onKeyDown = (itemKey: string, ev: React.KeyboardEvent<HTMLElement>): void => {\n      if (ev.which === KeyCodes.enter) {\n        ev.preventDefault();\n        updateSelectedItem(itemKey);\n      }\n    };\n\n    const updateSelectedItem = (itemKey: string, ev?: React.MouseEvent<HTMLElement>): void => {\n      setSelectedKey(itemKey);\n      tabCollection = getTabItems(props, baseId);\n      if (props.onTabClick && tabCollection.keyToIndexMapping[itemKey] >= 0) {\n        const selectedIndex = tabCollection.keyToIndexMapping[itemKey];\n        const item = React.Children.toArray(props.children)[selectedIndex];\n        if (isTabItem(item)) {\n          props.onTabClick(item, ev);\n        }\n      }\n\n      overflowMenuButtonComponentRef.current?.dismissMenu();\n    };\n\n    const renderTabItem = (itemKey: string | undefined, isActive: boolean): JSX.Element | null => {\n      if (props.headersOnly || !itemKey) {\n        return null;\n      }\n\n      const index = tabCollection.keyToIndexMapping[itemKey];\n      const selectedTabId = tabCollection.keyToTabIdMapping[itemKey];\n      return (\n        <div\n          role=\"tabpanel\"\n          hidden={!isActive}\n          key={itemKey}\n          aria-hidden={!isActive}\n          aria-labelledby={selectedTabId}\n          className={classNames.itemContainer}\n        >\n          {React.Children.toArray(props.children)[index]}\n        </div>\n      );\n    };\n\n    const isKeyValid = (itemKey: string | null | undefined): boolean => {\n      return itemKey !== undefined && itemKey !== null && tabCollection.keyToIndexMapping[itemKey] !== undefined;\n    };\n\n    const getSelectedKey = () => {\n      if (isKeyValid(selectedKey)) {\n        return selectedKey;\n      }\n      if (tabCollection.tabs.length) {\n        return tabCollection.tabs[0].itemKey;\n      }\n      return undefined;\n    };\n\n    classNames = getClassNames(props.styles!, {\n      theme: theme!,\n      tabSize,\n      tabFormat,\n    });\n\n    const renderedSelectedKey = getSelectedKey();\n    const renderedSelectedIndex = renderedSelectedKey ? tabCollection.keyToIndexMapping[renderedSelectedKey] : 0;\n\n    const items = tabCollection.tabs.map(l => renderTab(tabCollection, l, renderedSelectedKey, classNames.tab));\n\n    // The overflow menu starts empty and items[] is updated as the overflow items change\n    const overflowMenuProps: IContextualMenuProps = React.useMemo(\n      () => ({\n        items: [],\n        doNotLayer: true,\n        alignTargetEdge: true,\n        directionalHint: DirectionalHint.bottomRightEdge,\n      }),\n      [],\n    );\n\n    const { menuButtonRef: overflowMenuButtonRef } = useOverflow({\n      onOverflowItemsChanged: (overflowIndex, elements) => {\n        // Set data-is-overflowing on each item\n        elements.forEach(({ ele, isOverflowing }) => (ele.dataset.isOverflowing = `${isOverflowing}`));\n\n        // Update the menu items\n        overflowMenuProps.items = tabCollection.tabs.slice(overflowIndex).map((tab, index) => ({\n          key: tab.itemKey || `${overflowIndex + index}`,\n          onRender: () => renderTab(tabCollection, tab, renderedSelectedKey, classNames.tabInMenu),\n        }));\n      },\n      rtl: getRTL(theme),\n      pinnedIndex: renderedSelectedIndex,\n    });\n\n    return (\n      <div role=\"toolbar\" {...divProps} ref={ref}>\n        <FocusZone\n          componentRef={focusZoneRef}\n          direction={FocusZoneDirection.horizontal}\n          className={classNames.root}\n          role=\"tablist\"\n        >\n          {items}\n          {overflowBehavior === 'menu' && (\n            <CommandButton\n              className={css(classNames.tab, classNames.overflowMenuButton)}\n              elementRef={overflowMenuButtonRef}\n              componentRef={overflowMenuButtonComponentRef}\n              menuProps={overflowMenuProps}\n              menuIconProps={{ iconName: 'More', style: { color: 'inherit' } }}\n            />\n          )}\n        </FocusZone>\n        {renderedSelectedKey &&\n          tabCollection.tabs.map(\n            tab =>\n              (tab.alwaysRender === true || renderedSelectedKey === tab.itemKey) &&\n              renderTabItem(tab.itemKey, renderedSelectedKey === tab.itemKey),\n          )}\n      </div>\n    );\n  },\n);\nTabsBase.displayName = COMPONENT_NAME;\n"]}

package/lib-amd/next/components/Tabs/Tabs.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Tabs.js","sourceRoot":"../src/","sources":["next/components/Tabs/Tabs.tsx"],"names":[],"mappings":";;;IAMA;;;;OAIG;IACU,QAAA,IAAI,GAAuC,kBAAM,CAC5D,oBAAQ,EACR,uBAAS,EACT,SAAS,EACT;QACE,KAAK,EAAE,MAAM;KACd,CACF,CAAC","sourcesContent":["import * as React from 'react';\nimport { styled } from '@fluentui/utilities';\nimport { TabsProps, TabsStyleProps, TabsStyles } from './Tabs.types';\nimport { TabsBase } from './Tabs.base';\nimport { getStyles } from './Tabs.styles';\n\n/**\n * The Tabs control and related tabs pattern are used for navigating frequently accessed,\n * distinct content categories. Tabs 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 Tabs: React.FunctionComponent<TabsProps> = styled<TabsProps, TabsStyleProps, TabsStyles>(\n  TabsBase,\n  getStyles,\n  undefined,\n  {\n    scope: 'Tabs',\n  },\n);\n"]}

package/lib-amd/next/components/Tabs/Tabs.styles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Tabs.styles.js","sourceRoot":"../src/","sources":["next/components/Tabs/Tabs.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { TabsStyleProps, TabsStyles } from './Tabs.types';\nimport {\n  AnimationVariables,\n  getGlobalClassNames,\n  HighContrastSelector,\n  IStyle,\n  normalize,\n  FontWeights,\n} from '@fluentui/style-utilities';\nimport { IsFocusVisibleClassName } from '@fluentui/utilities';\n\nconst globalClassNames = {\n  count: 'ms-Tabs-count',\n  icon: 'ms-Tabs-icon',\n  tabIsSelected: 'is-selected',\n  tab: 'ms-Tabs-tab',\n  tabContent: 'ms-Tabs-tabContent',\n  root: 'ms-Tabs',\n  rootIsLarge: 'ms-Tabs--large',\n  rootIsTabs: 'ms-Tabs--tabs',\n  text: 'ms-Tabs-text',\n  tabInMenu: 'ms-Tabs-tabInMenu',\n  overflowMenuButton: 'ms-Tabs-overflowMenuButton',\n};\n\nconst getLinkStyles = (\n  props: TabsStyleProps,\n  classNames: { [key: string]: string },\n  isLinkInOverflowMenu: boolean = false,\n): IStyle[] => {\n  const { tabSize, tabFormat } = props;\n  const { semanticColors, fonts } = props.theme;\n  const rootIsLarge = tabSize === 'large';\n  const rootIsTabs = tabFormat === 'tabs';\n\n  return [\n    fonts.medium,\n    {\n      color: semanticColors.actionLink,\n      padding: '0 8px',\n      position: 'relative',\n      backgroundColor: 'transparent',\n      border: 0,\n      borderRadius: 0,\n      selectors: {\n        ':hover': {\n          backgroundColor: semanticColors.buttonBackgroundHovered,\n          color: semanticColors.buttonTextHovered,\n          cursor: 'pointer',\n        },\n        ':active': {\n          backgroundColor: semanticColors.buttonBackgroundPressed,\n          color: semanticColors.buttonTextHovered,\n        },\n        ':focus': {\n          outline: 'none',\n        },\n        [`.${IsFocusVisibleClassName} &:focus`]: {\n          outline: `1px solid ${semanticColors.focusBorder}`,\n        },\n        [`.${IsFocusVisibleClassName} &:focus:after`]: {\n          content: 'attr(data-content)',\n          position: 'relative',\n          border: 0,\n        },\n      },\n    },\n    !isLinkInOverflowMenu && [\n      {\n        display: 'inline-block',\n        lineHeight: 44,\n        height: 44,\n        marginRight: 8,\n        textAlign: 'center',\n        selectors: {\n          ':before': {\n            backgroundColor: 'transparent',\n            bottom: 0,\n            content: '\"\"',\n            height: 2,\n            left: 8,\n            position: 'absolute',\n            right: 8,\n            transition: `left ${AnimationVariables.durationValue2} ${AnimationVariables.easeFunction2},\n                        right ${AnimationVariables.durationValue2} ${AnimationVariables.easeFunction2}`,\n          },\n          ':after': {\n            color: 'transparent',\n            content: 'attr(data-content)',\n            display: 'block',\n            fontWeight: FontWeights.bold,\n            height: 1,\n            overflow: 'hidden',\n            visibility: 'hidden',\n          },\n        },\n      },\n      rootIsLarge && {\n        fontSize: fonts.large.fontSize,\n      },\n      rootIsTabs && [\n        {\n          marginRight: 0,\n          height: 44,\n          lineHeight: 44,\n          backgroundColor: semanticColors.buttonBackground,\n          padding: '0 10px',\n          verticalAlign: 'top',\n\n          selectors: {\n            ':focus': {\n              outlineOffset: '-1px',\n            },\n            [`.${IsFocusVisibleClassName} &:focus::before`]: {\n              height: 'auto',\n              background: 'transparent',\n              transition: 'none',\n            },\n            '&:hover, &:focus': {\n              color: semanticColors.buttonTextCheckedHovered,\n            },\n            '&:active, &:hover': {\n              color: semanticColors.primaryButtonText,\n              backgroundColor: semanticColors.primaryButtonBackground,\n            },\n            [`&.${classNames.tabIsSelected}`]: {\n              backgroundColor: semanticColors.primaryButtonBackground,\n              color: semanticColors.primaryButtonText,\n              fontWeight: FontWeights.regular,\n              selectors: {\n                ':before': {\n                  backgroundColor: 'transparent',\n                  transition: 'none',\n                  position: 'absolute',\n                  top: 0,\n                  left: 0,\n                  right: 0,\n                  bottom: 0,\n                  content: '\"\"',\n                  height: 0,\n                },\n                ':hover': {\n                  backgroundColor: semanticColors.primaryButtonBackgroundHovered,\n                  color: semanticColors.primaryButtonText,\n                },\n                '&:active': {\n                  backgroundColor: semanticColors.primaryButtonBackgroundPressed,\n                  color: semanticColors.primaryButtonText,\n                },\n                [HighContrastSelector]: {\n                  fontWeight: FontWeights.semibold,\n                  color: 'HighlightText',\n                  background: 'Highlight',\n                  MsHighContrastAdjust: 'none',\n                },\n              },\n            },\n          },\n        },\n      ],\n    ],\n  ];\n};\n\nexport const getStyles = (props: TabsStyleProps): TabsStyles => {\n  const { className, tabSize, tabFormat, theme } = props;\n  const { semanticColors, fonts } = theme;\n\n  const classNames = getGlobalClassNames(globalClassNames, theme);\n\n  const rootIsLarge = tabSize === 'large';\n  const rootIsTabs = tabFormat === 'tabs';\n\n  return {\n    root: [\n      classNames.root,\n      fonts.medium,\n      normalize,\n      {\n        position: 'relative',\n        color: semanticColors.link,\n        whiteSpace: 'nowrap',\n      },\n      rootIsLarge && classNames.rootIsLarge,\n      rootIsTabs && classNames.rootIsTabs,\n      className,\n    ],\n    itemContainer: {\n      selectors: {\n        '&[hidden]': {\n          display: 'none',\n        },\n      },\n    },\n    tab: [\n      classNames.tab,\n      ...getLinkStyles(props, classNames),\n      {\n        [`&[data-is-overflowing='true']`]: {\n          display: 'none',\n        },\n      },\n    ],\n    overflowMenuButton: [\n      classNames.overflowMenuButton,\n      {\n        visibility: 'hidden',\n        position: 'absolute',\n        right: 0,\n        [`.${classNames.tab}[data-is-overflowing='true'] ~ &`]: {\n          visibility: 'visible',\n          position: 'relative',\n        },\n      },\n    ],\n    tabInMenu: [\n      classNames.tabInMenu,\n      ...getLinkStyles(props, classNames, true),\n      {\n        textAlign: 'left',\n        width: '100%',\n        height: 36,\n        lineHeight: 36,\n      },\n    ],\n    tabIsSelected: [\n      classNames.tab,\n      classNames.tabIsSelected,\n      {\n        fontWeight: FontWeights.semibold,\n        selectors: {\n          ':before': {\n            backgroundColor: semanticColors.inputBackgroundChecked,\n            selectors: {\n              [HighContrastSelector]: {\n                backgroundColor: 'Highlight',\n              },\n            },\n          },\n          ':hover::before': {\n            left: 0,\n            right: 0,\n          },\n          [HighContrastSelector]: {\n            color: 'Highlight',\n          },\n        },\n      },\n    ],\n    tabContent: [\n      classNames.tabContent,\n      {\n        flex: '0 1 100%',\n        selectors: {\n          '& > * ': {\n            marginLeft: 4,\n          },\n          '& > *:first-child': {\n            marginLeft: 0,\n          },\n        },\n      },\n    ],\n    text: [\n      classNames.text,\n      {\n        display: 'inline-block',\n        verticalAlign: 'top',\n      },\n    ],\n    count: [\n      classNames.count,\n      {\n        display: 'inline-block',\n        verticalAlign: 'top',\n      },\n    ],\n    icon: classNames.icon,\n  };\n};\n"]}

package/lib-amd/next/components/Tabs/Tabs.types.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Tabs.types.js","sourceRoot":"../src/","sources":["next/components/Tabs/Tabs.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport { IStyle, ITheme } from '@fluentui/style-utilities';\nimport { IStyleFunctionOrObject } from '@fluentui/utilities';\nimport { TabItem } from './TabItem';\n\n/**\n * {@docCategory Tabs}\n */\nexport interface TabsImperativeHandle {\n  /**\n   * Sets focus to the first tab.\n   */\n  focus(): void;\n}\n\n/**\n * {@docCategory Tabs}\n */\nexport interface TabsProps extends React.HTMLAttributes<HTMLDivElement>, React.RefAttributes<HTMLDivElement> {\n  /**\n   * Optional callback to access the TabsImperativeHandle interface. Use this instead of ref for accessing\n   * the public methods and properties of the component.\n   */\n  componentRef?: React.RefObject<TabsImperativeHandle>;\n\n  /**\n   * Call to provide customized styling that will layer on top of the variant rules.\n   */\n  styles?: IStyleFunctionOrObject<TabsStyleProps, TabsStyles>;\n\n  /**\n   * Theme provided by High-Order Component.\n   */\n  theme?: ITheme;\n\n  /**\n   * Additional css class to apply to the Tabs\n   * @defaultvalue undefined\n   */\n  className?: string;\n\n  /**\n   * Default selected TabItem key. Only provide this if the Tabs is an uncontrolled component;\n   * otherwise, use the `selectedKey` property.\n   */\n  defaultSelectedKey?: string;\n\n  /**\n   * Key of the selected tab item. Updating this will override the selected tab state.\n   * Only provide this if the Tabs is a controlled component where you are maintaining the\n   * current state; otherwise, use `defaultSelectedKey`.\n   */\n  selectedKey?: string | null;\n\n  /**\n   * Callback for when the selected tab item is changed.\n   */\n  onTabClick?: (item?: TabItem, ev?: React.MouseEvent<HTMLElement>) => void;\n\n  /**\n   * Tab size (normal, large)\n   */\n  tabSize?: TabSizeType;\n\n  /**\n   * Tab format (links, tabs)\n   */\n  tabFormat?: TabFormatType;\n\n  /**\n   * Overflow behavior when there is not enough room to display all of the tabs\n   * * none: Tabs will overflow the container and may not be visible\n   * * menu: Display an overflow menu that contains the tabs that don't fit\n   *\n   * @default none\n   */\n  overflowBehavior?: 'none' | 'menu';\n\n  /**\n   * Whether to skip rendering the tabpanel with the content of the selected tab.\n   * Use this prop if you plan to separately render the tab content\n   * and don't want to leave an empty tabpanel in the page that may confuse Screen Readers.\n   */\n  headersOnly?: boolean;\n\n  /**\n   * Callback to customize how IDs are generated for each tab header.\n   * Useful if you're rendering content outside and need to connect aria-labelledby.\n   */\n  getTabId?: (itemKey: string, index: number) => string;\n}\n\n/**\n * {@docCategory Tabs}\n */\nexport type TabsStyleProps = Required<Pick<TabsProps, 'theme'>> &\n  Pick<TabsProps, 'className'> & {\n    tabSize?: TabSizeType;\n    tabFormat?: TabFormatType;\n  };\n\n/**\n * {@docCategory Tabs}\n */\nexport interface TabsStyles {\n  /**\n   * Style for the root element.\n   */\n  root: IStyle;\n  tab: IStyle;\n  tabIsSelected: IStyle;\n  tabContent: IStyle;\n  text: IStyle;\n  count: IStyle;\n  icon: IStyle;\n  tabInMenu: IStyle;\n  overflowMenuButton: IStyle;\n  itemContainer?: IStyle;\n}\n\n/**\n * {@docCategory Tabs}\n * Display mode for the tabs\n */\nexport type TabFormatType = 'links' | 'tabs';\n\n/**\n * {@docCategory Tabs}\n * Size of the tabs\n */\nexport type TabSizeType = 'normal' | 'large';\n"]}

package/lib-amd/next/components/Tabs/index.js

@@ -1,8 +0,0 @@
-define(["require", "exports", "tslib", "./Tabs", "./Tabs.base", "./TabItem"], function (require, exports, tslib_1, Tabs_1, Tabs_base_1, TabItem_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    tslib_1.__exportStar(Tabs_1, exports);
-    tslib_1.__exportStar(Tabs_base_1, exports);
-    exports.TabItem = TabItem_1.TabItem;
-});
-//# sourceMappingURL=index.js.map

package/lib-amd/next/components/Tabs/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["next/components/Tabs/index.ts"],"names":[],"mappings":";;;IAAA,sCAAuB;IACvB,2CAA4B;IACnB,4BAAA,OAAO,CAAA","sourcesContent":["export * from './Tabs';\nexport * from './Tabs.base';\nexport { TabItem } from './TabItem';\nexport * from './Tabs.types';\nexport * from './TabItem.types';\n"]}

package/lib-amd/next/index.d.ts

@@ -1,2 +0,0 @@
-export * from '../index';
-export * from './Tabs';

package/lib-amd/next/index.js

@@ -1,7 +0,0 @@
-define(["require", "exports", "tslib", "../index", "./Tabs"], function (require, exports, tslib_1, index_1, Tabs_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    tslib_1.__exportStar(index_1, exports);
-    tslib_1.__exportStar(Tabs_1, exports);
-});
-//# sourceMappingURL=index.js.map

package/lib-amd/next/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["next/index.ts"],"names":[],"mappings":";;;IAAA,uCAAyB;IACzB,sCAAuB","sourcesContent":["export * from '../index';\nexport * from './Tabs';\n"]}

package/lib-amd/next.d.ts

@@ -1 +0,0 @@
-export * from './next/index';

package/lib-amd/next.js

@@ -1,6 +0,0 @@
-define(["require", "exports", "tslib", "./next/index"], function (require, exports, tslib_1, index_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    tslib_1.__exportStar(index_1, exports);
-});
-//# sourceMappingURL=next.js.map

package/lib-amd/next.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"next.js","sourceRoot":"../src/","sources":["next.ts"],"names":[],"mappings":";;;IAAA,uCAA6B","sourcesContent":["export * from './next/index';\n"]}

package/lib-amd/version.d.ts

@@ -1 +0,0 @@
-export {};

package/lib-amd/version.js

@@ -1,6 +0,0 @@
-define(["require", "exports", "@fluentui/set-version"], function (require, exports, set_version_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    set_version_1.setVersion('@fluentui/react-tabs', '1.0.0-beta.17');
-});
-//# sourceMappingURL=version.js.map

package/lib-amd/version.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"version.js","sourceRoot":"../src/","sources":["version.ts"],"names":[],"mappings":";;;IAGA,wBAAU,CAAC,sBAAsB,EAAE,eAAe,CAAC,CAAC","sourcesContent":["// Do not modify this file; it is generated as part of publish.\n// The checked in version is a placeholder only and will not be updated.\nimport { setVersion } from '@fluentui/set-version';\nsetVersion('@fluentui/react-tabs', '1.0.0-beta.17');"]}

package/lib-commonjs/Pivot.d.ts

@@ -1 +0,0 @@
-export * from './components/Pivot/index';

package/lib-commonjs/Pivot.js

@@ -1,5 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
-tslib_1.__exportStar(require("./components/Pivot/index"), exports);
-//# sourceMappingURL=Pivot.js.map

package/lib-commonjs/Pivot.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Pivot.js","sourceRoot":"../src/","sources":["Pivot.ts"],"names":[],"mappings":";;;AAAA,mEAAyC","sourcesContent":["export * from './components/Pivot/index';\n"]}

package/lib-commonjs/components/Pivot/Pivot.base.d.ts

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

package/lib-commonjs/components/Pivot/Pivot.base.js

@@ -1,185 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
-var React = require("react");
-var react_hooks_1 = require("@fluentui/react-hooks");
-var utilities_1 = require("@fluentui/utilities");
-var react_internal_1 = require("@fluentui/react-internal");
-var Button_1 = require("@fluentui/react-internal/lib-commonjs/compat/Button");
-var index_1 = require("./index");
-var useOverflow_1 = require("../../utilities/useOverflow");
-var getClassNames = 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" + 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)) {
-            // eslint-disable-next-line deprecation/deprecation
-            var _a = child.props, 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) {
-            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, _b;
-    return ((_b = (_a = item) === null || _a === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _b.name) === index_1.PivotItem.name;
-};
-exports.PivotBase = React.forwardRef(function (props, ref) {
-    var focusZoneRef = React.useRef(null);
-    var overflowMenuButtonComponentRef = React.useRef(null);
-    var pivotId = react_hooks_1.useId('Pivot');
-    var _a = 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;
-    var classNames;
-    var divProps = utilities_1.getNativeProps(props, utilities_1.divProperties);
-    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(react_internal_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' : '';
-        return (React.createElement(Button_1.CommandButton, tslib_1.__assign({}, headerButtonProps, { id: tabId, key: itemKey, className: 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, role: "tab", "aria-selected": isSelected, 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) {
-        if (ev.which === utilities_1.KeyCodes.enter) {
-            ev.preventDefault();
-            updateSelectedItem(itemKey);
-        }
-    };
-    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 !== undefined && itemKey !== null && 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: [],
-        doNotLayer: true,
-        alignTargetEdge: true,
-        directionalHint: react_internal_1.DirectionalHint.bottomRightEdge,
-    }); }, []);
-    var overflowMenuButtonRef = 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 = "" + isOverflowing);
-            });
-            // Update the menu items
-            overflowMenuProps.items = linkCollection.links.slice(overflowIndex).map(function (link, index) { return ({
-                key: link.itemKey || "" + (overflowIndex + index),
-                onRender: function () { return renderPivotLink(linkCollection, link, renderedSelectedKey, classNames.linkInMenu); },
-            }); });
-        },
-        rtl: utilities_1.getRTL(theme),
-        pinnedIndex: renderedSelectedIndex,
-    }).menuButtonRef;
-    return (React.createElement("div", tslib_1.__assign({ role: "toolbar" }, divProps, { ref: ref }),
-        React.createElement(react_internal_1.FocusZone, { componentRef: focusZoneRef, direction: react_internal_1.FocusZoneDirection.horizontal, className: classNames.root, role: "tablist" },
-            items,
-            overflowBehavior === 'menu' && (React.createElement(Button_1.CommandButton, { className: utilities_1.css(classNames.link, classNames.overflowMenuButton), elementRef: overflowMenuButtonRef, componentRef: overflowMenuButtonComponentRef, menuProps: overflowMenuProps, menuIconProps: { iconName: 'More', style: { color: 'inherit' } } }))),
-        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

package/lib-commonjs/components/Pivot/Pivot.base.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Pivot.base.js","sourceRoot":"../src/","sources":["components/Pivot/Pivot.base.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { useControllableValue, useId } from '@fluentui/react-hooks';\nimport { classNamesFunction, css, divProperties, getNativeProps, getRTL, KeyCodes, warn } from '@fluentui/utilities';\nimport {\n  DirectionalHint,\n  FocusZone,\n  FocusZoneDirection,\n  Icon,\n  IContextualMenuProps,\n  IFocusZone,\n} from '@fluentui/react-internal';\nimport { CommandButton, IButton } from '@fluentui/react-internal/lib/compat/Button';\nimport { IPivot, IPivotItemProps, IPivotProps, IPivotStyleProps, IPivotStyles, PivotItem } from './index';\nimport { useOverflow } from '../../utilities/useOverflow';\n\nconst getClassNames = classNamesFunction<IPivotStyleProps, IPivotStyles>();\n\nconst COMPONENT_NAME = 'Pivot';\n\ntype PivotLinkCollection = {\n  links: IPivotItemProps[];\n  keyToIndexMapping: { [key: string]: number };\n  keyToTabIdMapping: { [key: string]: string };\n};\n\nconst getTabId = (props: IPivotProps, pivotId: string, itemKey: string, index: number): string => {\n  if (props.getTabId) {\n    return props.getTabId(itemKey, index);\n  }\n  return pivotId + `-Tab${index}`;\n};\n\n// Gets the set of PivotLinks as array of IPivotItemProps\n// The set of Links is determined by child components of type PivotItem\nconst getLinkItems = (props: IPivotProps, pivotId: string): PivotLinkCollection => {\n  const result: PivotLinkCollection = {\n    links: [],\n    keyToIndexMapping: {},\n    keyToTabIdMapping: {},\n  };\n\n  React.Children.forEach(React.Children.toArray(props.children), (child: React.ReactNode, index: number) => {\n    if (isPivotItem(child)) {\n      // eslint-disable-next-line deprecation/deprecation\n      const { linkText, ...pivotItemProps } = child.props;\n      const itemKey = child.props.itemKey || index.toString();\n      result.links.push({\n        headerText: linkText,\n        ...pivotItemProps,\n        itemKey: itemKey,\n      });\n      result.keyToIndexMapping[itemKey] = index;\n      result.keyToTabIdMapping[itemKey] = getTabId(props, pivotId, itemKey, index);\n    } else if (child) {\n      warn('The children of a Pivot component must be of type PivotItem to be rendered.');\n    }\n  });\n  return result;\n};\n\nconst isPivotItem = (item: React.ReactNode): item is PivotItem => {\n  return ((item as React.ReactElement)?.type as React.ComponentType)?.name === PivotItem.name;\n};\n\nexport const PivotBase: React.FunctionComponent<IPivotProps> = React.forwardRef<HTMLDivElement, IPivotProps>(\n  (props, ref) => {\n    const focusZoneRef = React.useRef<IFocusZone>(null);\n    const overflowMenuButtonComponentRef = React.useRef<IButton>(null);\n    const pivotId: string = useId('Pivot');\n\n    const [selectedKey, setSelectedKey] = useControllableValue(props.selectedKey, props.defaultSelectedKey);\n\n    const { componentRef, theme, linkSize, linkFormat, overflowBehavior } = props;\n\n    let classNames: { [key in keyof IPivotStyles]: string };\n    const divProps = getNativeProps<React.HTMLAttributes<HTMLDivElement>>(props, divProperties);\n\n    let linkCollection = getLinkItems(props, pivotId);\n\n    React.useImperativeHandle(componentRef as React.RefObject<IPivot>, () => ({\n      focus: () => {\n        focusZoneRef.current?.focus();\n      },\n    }));\n\n    const renderLinkContent = (link?: IPivotItemProps): JSX.Element | null => {\n      if (!link) {\n        return null;\n      }\n\n      const { itemCount, itemIcon, headerText } = link;\n      return (\n        <span className={classNames.linkContent}>\n          {itemIcon !== undefined && (\n            <span className={classNames.icon}>\n              <Icon iconName={itemIcon} />\n            </span>\n          )}\n          {headerText !== undefined && <span className={classNames.text}> {link.headerText}</span>}\n          {itemCount !== undefined && <span className={classNames.count}> ({itemCount})</span>}\n        </span>\n      );\n    };\n\n    const renderPivotLink = (\n      renderLinkCollection: PivotLinkCollection,\n      link: IPivotItemProps,\n      renderPivotLinkSelectedKey: string | null | undefined,\n      className: string,\n    ): JSX.Element => {\n      const { itemKey, headerButtonProps, onRenderItemLink } = link;\n      const tabId = renderLinkCollection.keyToTabIdMapping[itemKey!];\n      let linkContent: JSX.Element | null;\n      const isSelected: boolean = renderPivotLinkSelectedKey === itemKey;\n\n      if (onRenderItemLink) {\n        linkContent = onRenderItemLink(link, renderLinkContent);\n      } else {\n        linkContent = renderLinkContent(link);\n      }\n\n      let contentString = link.headerText || '';\n      contentString += link.itemCount ? ' (' + link.itemCount + ')' : '';\n      // Adding space supplementary for icon\n      contentString += link.itemIcon ? ' xx' : '';\n      return (\n        <CommandButton\n          {...headerButtonProps}\n          id={tabId}\n          key={itemKey}\n          className={css(className, isSelected && classNames.linkIsSelected)}\n          // eslint-disable-next-line react/jsx-no-bind\n          onClick={(ev: React.MouseEvent<HTMLElement>) => onLinkClick(itemKey!, ev)}\n          // eslint-disable-next-line react/jsx-no-bind\n          onKeyDown={(ev: React.KeyboardEvent<HTMLElement>) => onKeyDown(itemKey!, ev)}\n          aria-label={link.ariaLabel}\n          role=\"tab\"\n          aria-selected={isSelected}\n          name={link.headerText}\n          keytipProps={link.keytipProps}\n          data-content={contentString}\n        >\n          {linkContent}\n        </CommandButton>\n      );\n    };\n\n    const onLinkClick = (itemKey: string, ev: React.MouseEvent<HTMLElement>): void => {\n      ev.preventDefault();\n      updateSelectedItem(itemKey, ev);\n    };\n\n    const onKeyDown = (itemKey: string, ev: React.KeyboardEvent<HTMLElement>): void => {\n      if (ev.which === KeyCodes.enter) {\n        ev.preventDefault();\n        updateSelectedItem(itemKey);\n      }\n    };\n\n    const updateSelectedItem = (itemKey: string, ev?: React.MouseEvent<HTMLElement>): void => {\n      setSelectedKey(itemKey);\n      linkCollection = getLinkItems(props, pivotId);\n      if (props.onLinkClick && linkCollection.keyToIndexMapping[itemKey] >= 0) {\n        const selectedIndex = linkCollection.keyToIndexMapping[itemKey];\n        const item = React.Children.toArray(props.children)[selectedIndex];\n        if (isPivotItem(item)) {\n          props.onLinkClick(item, ev);\n        }\n      }\n\n      overflowMenuButtonComponentRef.current?.dismissMenu();\n    };\n\n    const renderPivotItem = (itemKey: string | undefined, isActive: boolean): JSX.Element | null => {\n      if (props.headersOnly || !itemKey) {\n        return null;\n      }\n\n      const index = linkCollection.keyToIndexMapping[itemKey];\n      const selectedTabId = linkCollection.keyToTabIdMapping[itemKey];\n      return (\n        <div\n          role=\"tabpanel\"\n          hidden={!isActive}\n          key={itemKey}\n          aria-hidden={!isActive}\n          aria-labelledby={selectedTabId}\n          className={classNames.itemContainer}\n        >\n          {React.Children.toArray(props.children)[index]}\n        </div>\n      );\n    };\n\n    const isKeyValid = (itemKey: string | null | undefined): boolean => {\n      return itemKey !== undefined && itemKey !== null && linkCollection.keyToIndexMapping[itemKey] !== undefined;\n    };\n\n    const getSelectedKey = () => {\n      if (isKeyValid(selectedKey)) {\n        return selectedKey;\n      }\n      if (linkCollection.links.length) {\n        return linkCollection.links[0].itemKey;\n      }\n      return undefined;\n    };\n\n    classNames = getClassNames(props.styles!, {\n      theme: theme!,\n      linkSize,\n      linkFormat,\n    });\n\n    const renderedSelectedKey = getSelectedKey();\n    const renderedSelectedIndex = renderedSelectedKey ? linkCollection.keyToIndexMapping[renderedSelectedKey] : 0;\n\n    const items = linkCollection.links.map(l =>\n      renderPivotLink(linkCollection, l, renderedSelectedKey, classNames.link),\n    );\n\n    // The overflow menu starts empty and items[] is updated as the overflow items change\n    const overflowMenuProps: IContextualMenuProps = React.useMemo(\n      () => ({\n        items: [],\n        doNotLayer: true,\n        alignTargetEdge: true,\n        directionalHint: DirectionalHint.bottomRightEdge,\n      }),\n      [],\n    );\n\n    const { menuButtonRef: overflowMenuButtonRef } = useOverflow({\n      onOverflowItemsChanged: (overflowIndex, elements) => {\n        // Set data-is-overflowing on each item\n        elements.forEach(({ ele, isOverflowing }) => (ele.dataset.isOverflowing = `${isOverflowing}`));\n\n        // Update the menu items\n        overflowMenuProps.items = linkCollection.links.slice(overflowIndex).map((link, index) => ({\n          key: link.itemKey || `${overflowIndex + index}`,\n          onRender: () => renderPivotLink(linkCollection, link, renderedSelectedKey, classNames.linkInMenu),\n        }));\n      },\n      rtl: getRTL(theme),\n      pinnedIndex: renderedSelectedIndex,\n    });\n\n    return (\n      <div role=\"toolbar\" {...divProps} ref={ref}>\n        <FocusZone\n          componentRef={focusZoneRef}\n          direction={FocusZoneDirection.horizontal}\n          className={classNames.root}\n          role=\"tablist\"\n        >\n          {items}\n          {overflowBehavior === 'menu' && (\n            <CommandButton\n              className={css(classNames.link, classNames.overflowMenuButton)}\n              elementRef={overflowMenuButtonRef}\n              componentRef={overflowMenuButtonComponentRef}\n              menuProps={overflowMenuProps}\n              menuIconProps={{ iconName: 'More', style: { color: 'inherit' } }}\n            />\n          )}\n        </FocusZone>\n        {renderedSelectedKey &&\n          linkCollection.links.map(\n            link =>\n              (link.alwaysRender === true || renderedSelectedKey === link.itemKey) &&\n              renderPivotItem(link.itemKey, renderedSelectedKey === link.itemKey),\n          )}\n      </div>\n    );\n  },\n);\nPivotBase.displayName = COMPONENT_NAME;\n"]}

package/lib-commonjs/components/Pivot/Pivot.d.ts

@@ -1,8 +0,0 @@
-import * as React from 'react';
-import { 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>;

package/lib-commonjs/components/Pivot/Pivot.js

@@ -1,14 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var utilities_1 = require("@fluentui/utilities");
-var Pivot_base_1 = require("./Pivot.base");
-var Pivot_styles_1 = require("./Pivot.styles");
-/**
- * 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 = utilities_1.styled(Pivot_base_1.PivotBase, Pivot_styles_1.getStyles, undefined, {
-    scope: 'Pivot',
-});
-//# sourceMappingURL=Pivot.js.map

package/lib-commonjs/components/Pivot/Pivot.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Pivot.js","sourceRoot":"../src/","sources":["components/Pivot/Pivot.tsx"],"names":[],"mappings":";;AACA,iDAA6C;AAE7C,2CAAyC;AACzC,+CAA2C;AAE3C;;;;GAIG;AACU,QAAA,KAAK,GAAyC,kBAAM,CAC/D,sBAAS,EACT,wBAAS,EACT,SAAS,EACT;IACE,KAAK,EAAE,OAAO;CACf,CACF,CAAC","sourcesContent":["import * as React from 'react';\nimport { styled } from '@fluentui/utilities';\nimport { IPivotProps, IPivotStyleProps, IPivotStyles } from './Pivot.types';\nimport { PivotBase } from './Pivot.base';\nimport { getStyles } from './Pivot.styles';\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"]}

package/lib-commonjs/components/Pivot/Pivot.styles.d.ts

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