@fluentui/react-tabs 1.0.0-beta.97 → 9.0.0-beta.10

package/lib/components/Tabs/Tabs.styles.js

@@ -1,264 +0,0 @@
-import { __assign, __spreadArrays } from "tslib";
-import { AnimationVariables, getGlobalClassNames, HighContrastSelector, normalize, FontWeights, getHighContrastNoAdjustStyle, } from '@fluentui/style-utilities';
-import { IsFocusVisibleClassName } from '@fluentui/utilities';
-var globalClassNames = {
-    count: 'ms-Tabs-count',
-    icon: 'ms-Tabs-icon',
-    tabIsSelected: 'is-selected',
-    tab: 'ms-Tabs-tab',
-    tabContent: 'ms-Tabs-tabContent',
-    root: 'ms-Tabs',
-    rootIsLarge: 'ms-Tabs--large',
-    rootIsTabs: 'ms-Tabs--tabs',
-    text: 'ms-Tabs-text',
-    tabInMenu: 'ms-Tabs-tabInMenu',
-    overflowMenuButton: 'ms-Tabs-overflowMenuButton',
-};
-var getLinkStyles = function (props, classNames, isLinkInOverflowMenu) {
-    var _a, _b, _c;
-    if (isLinkInOverflowMenu === void 0) { isLinkInOverflowMenu = false; }
-    var tabSize = props.tabSize, tabFormat = props.tabFormat;
-    var _d = props.theme, semanticColors = _d.semanticColors, fonts = _d.fonts;
-    var rootIsLarge = tabSize === 'large';
-    var rootIsTabs = tabFormat === 'tabs';
-    return [
-        fonts.medium,
-        {
-            color: semanticColors.actionLink,
-            padding: '0 8px',
-            position: 'relative',
-            backgroundColor: 'transparent',
-            border: 0,
-            borderRadius: 0,
-            selectors: (_a = {
-                    ':hover': {
-                        backgroundColor: semanticColors.buttonBackgroundHovered,
-                        color: semanticColors.buttonTextHovered,
-                        cursor: 'pointer',
-                    },
-                    ':active': {
-                        backgroundColor: semanticColors.buttonBackgroundPressed,
-                        color: semanticColors.buttonTextHovered,
-                    },
-                    ':focus': {
-                        outline: 'none',
-                    }
-                },
-                _a["." + IsFocusVisibleClassName + " &:focus"] = {
-                    outline: "1px solid " + semanticColors.focusBorder,
-                },
-                _a["." + IsFocusVisibleClassName + " &:focus:after"] = {
-                    content: 'attr(data-content)',
-                    position: 'relative',
-                    border: 0,
-                },
-                _a),
-        },
-        !isLinkInOverflowMenu && [
-            {
-                display: 'inline-block',
-                lineHeight: 44,
-                height: 44,
-                marginRight: 8,
-                textAlign: 'center',
-                selectors: {
-                    ':before': {
-                        backgroundColor: 'transparent',
-                        bottom: 0,
-                        content: '""',
-                        height: 2,
-                        left: 8,
-                        position: 'absolute',
-                        right: 8,
-                        transition: "left " + AnimationVariables.durationValue2 + " " + AnimationVariables.easeFunction2 + ",\n                        right " + AnimationVariables.durationValue2 + " " + AnimationVariables.easeFunction2,
-                    },
-                    ':after': {
-                        color: 'transparent',
-                        content: 'attr(data-content)',
-                        display: 'block',
-                        fontWeight: FontWeights.bold,
-                        height: 1,
-                        overflow: 'hidden',
-                        visibility: 'hidden',
-                    },
-                },
-            },
-            rootIsLarge && {
-                fontSize: fonts.large.fontSize,
-            },
-            rootIsTabs && [
-                {
-                    marginRight: 0,
-                    height: 44,
-                    lineHeight: 44,
-                    backgroundColor: semanticColors.buttonBackground,
-                    padding: '0 10px',
-                    verticalAlign: 'top',
-                    selectors: (_b = {
-                            ':focus': {
-                                outlineOffset: '-1px',
-                            }
-                        },
-                        _b["." + 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["&." + classNames.tabIsSelected] = {
-                            backgroundColor: semanticColors.primaryButtonBackground,
-                            color: semanticColors.primaryButtonText,
-                            fontWeight: 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[HighContrastSelector] = __assign({ fontWeight: FontWeights.semibold, color: 'HighlightText', background: 'Highlight' }, getHighContrastNoAdjustStyle()),
-                                _c),
-                        },
-                        _b),
-                },
-            ],
-        ],
-    ];
-};
-export var getStyles = function (props) {
-    var _a, _b, _c, _d;
-    var className = props.className, tabSize = props.tabSize, tabFormat = props.tabFormat, theme = props.theme;
-    var semanticColors = theme.semanticColors, fonts = theme.fonts;
-    var classNames = getGlobalClassNames(globalClassNames, theme);
-    var rootIsLarge = tabSize === 'large';
-    var rootIsTabs = tabFormat === 'tabs';
-    return {
-        root: [
-            classNames.root,
-            fonts.medium,
-            normalize,
-            {
-                position: 'relative',
-                color: semanticColors.link,
-                whiteSpace: 'nowrap',
-            },
-            rootIsLarge && classNames.rootIsLarge,
-            rootIsTabs && classNames.rootIsTabs,
-            className,
-        ],
-        itemContainer: {
-            selectors: {
-                '&[hidden]': {
-                    display: 'none',
-                },
-            },
-        },
-        tab: __spreadArrays([
-            classNames.tab
-        ], getLinkStyles(props, classNames), [
-            (_a = {},
-                _a["&[data-is-overflowing='true']"] = {
-                    display: 'none',
-                },
-                _a),
-        ]),
-        overflowMenuButton: [
-            classNames.overflowMenuButton,
-            (_b = {
-                    visibility: 'hidden',
-                    position: 'absolute',
-                    right: 0
-                },
-                _b["." + classNames.tab + "[data-is-overflowing='true'] ~ &"] = {
-                    visibility: 'visible',
-                    position: 'relative',
-                },
-                _b),
-        ],
-        tabInMenu: __spreadArrays([
-            classNames.tabInMenu
-        ], getLinkStyles(props, classNames, true), [
-            {
-                textAlign: 'left',
-                width: '100%',
-                height: 36,
-                lineHeight: 36,
-            },
-        ]),
-        tabIsSelected: [
-            classNames.tab,
-            classNames.tabIsSelected,
-            {
-                fontWeight: FontWeights.semibold,
-                selectors: (_c = {
-                        ':before': {
-                            backgroundColor: semanticColors.inputBackgroundChecked,
-                            selectors: (_d = {},
-                                _d[HighContrastSelector] = {
-                                    backgroundColor: 'Highlight',
-                                },
-                                _d),
-                        },
-                        ':hover::before': {
-                            left: 0,
-                            right: 0,
-                        }
-                    },
-                    _c[HighContrastSelector] = {
-                        color: 'Highlight',
-                    },
-                    _c),
-            },
-        ],
-        tabContent: [
-            classNames.tabContent,
-            {
-                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,
-    };
-};
-//# sourceMappingURL=Tabs.styles.js.map

package/lib/components/Tabs/Tabs.styles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Tabs.styles.js","sourceRoot":"../src/","sources":["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  getHighContrastNoAdjustStyle,\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                  ...getHighContrastNoAdjustStyle(),\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/components/Tabs/Tabs.types.d.ts

@@ -1,113 +0,0 @@
-import * as React from 'react';
-import { IStyle, ITheme } from '@fluentui/style-utilities';
-import { IStyleFunctionOrObject } from '@fluentui/utilities';
-import { TabItem } from './TabItem';
-/**
- * {@docCategory Tabs}
- */
-export interface TabsImperativeHandle {
-    /**
-     * Sets focus to the first tab.
-     */
-    focus(): void;
-}
-/**
- * {@docCategory Tabs}
- */
-export interface TabsProps extends React.HTMLAttributes<HTMLDivElement>, React.RefAttributes<HTMLDivElement> {
-    /**
-     * Optional callback to access the TabsImperativeHandle interface. Use this instead of ref for accessing
-     * the public methods and properties of the component.
-     */
-    componentRef?: React.RefObject<TabsImperativeHandle>;
-    /**
-     * Call to provide customized styling that will layer on top of the variant rules.
-     */
-    styles?: IStyleFunctionOrObject<TabsStyleProps, TabsStyles>;
-    /**
-     * Theme provided by High-Order Component.
-     */
-    theme?: ITheme;
-    /**
-     * Additional css class to apply to the Tabs
-     * @defaultvalue undefined
-     */
-    className?: string;
-    /**
-     * Default selected TabItem key. Only provide this if the Tabs is an uncontrolled component;
-     * otherwise, use the `selectedKey` property.
-     */
-    defaultSelectedKey?: string;
-    /**
-     * Key of the selected tab item. Updating this will override the selected tab state.
-     * Only provide this if the Tabs is a controlled component where you are maintaining the
-     * current state; otherwise, use `defaultSelectedKey`.
-     */
-    selectedKey?: string | null;
-    /**
-     * Callback for when the selected tab item is changed.
-     */
-    onTabClick?: (item?: TabItem, ev?: React.MouseEvent<HTMLElement>) => void;
-    /**
-     * Tab size (normal, large)
-     */
-    tabSize?: TabSizeType;
-    /**
-     * Tab format (links, tabs)
-     */
-    tabFormat?: TabFormatType;
-    /**
-     * Overflow behavior when there is not enough room to display all of the tabs
-     * * none: Tabs 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';
-    /**
-     * 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;
-}
-/**
- * {@docCategory Tabs}
- */
-export declare type TabsStyleProps = Required<Pick<TabsProps, 'theme'>> & Pick<TabsProps, 'className'> & {
-    tabSize?: TabSizeType;
-    tabFormat?: TabFormatType;
-};
-/**
- * {@docCategory Tabs}
- */
-export interface TabsStyles {
-    /**
-     * Style for the root element.
-     */
-    root: IStyle;
-    tab: IStyle;
-    tabIsSelected: IStyle;
-    tabContent: IStyle;
-    text: IStyle;
-    count: IStyle;
-    icon: IStyle;
-    tabInMenu: IStyle;
-    overflowMenuButton: IStyle;
-    itemContainer?: IStyle;
-}
-/**
- * {@docCategory Tabs}
- * Display mode for the tabs
- */
-export declare type TabFormatType = 'links' | 'tabs';
-/**
- * {@docCategory Tabs}
- * Size of the tabs
- */
-export declare type TabSizeType = 'normal' | 'large';

package/lib/components/Tabs/Tabs.types.js

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=Tabs.types.js.map

package/lib/components/Tabs/Tabs.types.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Tabs.types.js","sourceRoot":"../src/","sources":["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/components/Tabs/index.d.ts

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

package/lib/components/Tabs/index.js

@@ -1,6 +0,0 @@
-export * from './Tabs';
-export * from './Tabs.base';
-export { TabItem } from './TabItem';
-export * from './Tabs.types';
-export * from './TabItem.types';
-//# sourceMappingURL=index.js.map

package/lib/components/Tabs/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/Tabs/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC","sourcesContent":["export * from './Tabs';\nexport * from './Tabs.base';\nexport { TabItem } from './TabItem';\nexport * from './Tabs.types';\nexport * from './TabItem.types';\n"]}

package/lib/utilities/observeResize.d.ts

@@ -1,21 +0,0 @@
-/**
- * Wrapper for ResizeObserver, with fallback for browsers that don't support ResizeObserver.
- *
- * Calls the onResize callback once layout is complete, and again whenever any of the target(s) change size.
- * Or if ResizeObserver isn't supported, calls the callback whenever the window changes size.
- *
- * @param target - Either a single element, or array of elements to watch for size changes.
- * @param onResize - Callback to be notified when layout is complete, and when the target(s) change size.
- *    If this browser supports ResizeObserver, the callback will be passed the ResizeObserverEntry[] array.
- *    Otherwise, the entries array will be undefined, and you'll need to find another way to get the element's size,
- *    (e.g. clientWidth/clientHeight or getBoundingClientRect).
- *
- * @returns A function to clean up the observer/listener.
- */
-export declare const observeResize: (target: Element | Element[], onResize: (entries: readonly ResizeObserverEntry[] | undefined) => void) => (() => void);
-/** Temporary type definition for ResizeObserverEntry. Can be removed when official types are available. */
-declare type ResizeObserverEntry = {
-    readonly contentRect: DOMRectReadOnly;
-    readonly target: Element;
-};
-export {};

package/lib/utilities/observeResize.js

@@ -1,46 +0,0 @@
-import { getWindow } from '@fluentui/utilities';
-/**
- * Wrapper for ResizeObserver, with fallback for browsers that don't support ResizeObserver.
- *
- * Calls the onResize callback once layout is complete, and again whenever any of the target(s) change size.
- * Or if ResizeObserver isn't supported, calls the callback whenever the window changes size.
- *
- * @param target - Either a single element, or array of elements to watch for size changes.
- * @param onResize - Callback to be notified when layout is complete, and when the target(s) change size.
- *    If this browser supports ResizeObserver, the callback will be passed the ResizeObserverEntry[] array.
- *    Otherwise, the entries array will be undefined, and you'll need to find another way to get the element's size,
- *    (e.g. clientWidth/clientHeight or getBoundingClientRect).
- *
- * @returns A function to clean up the observer/listener.
- */
-export var observeResize = function (target, onResize) {
-    if (typeof ResizeObserver !== 'undefined') {
-        var observer_1 = new ResizeObserver(onResize);
-        if (Array.isArray(target)) {
-            target.forEach(function (t) { return observer_1.observe(t); });
-        }
-        else {
-            observer_1.observe(target);
-        }
-        return function () { return observer_1.disconnect(); };
-    }
-    else {
-        // Fallback for browsers that don't support ResizeObserver
-        var onResizeWrapper_1 = function () { return onResize(undefined); };
-        var win_1 = getWindow(Array.isArray(target) ? target[0] : target);
-        if (!win_1) {
-            // Can't listen for resize if we can't get the window object
-            return function () {
-                // Nothing to clean up
-            };
-        }
-        // Listen for the first animation frame, which will happen after layout is complete
-        var animationFrameId_1 = win_1.requestAnimationFrame(onResizeWrapper_1);
-        win_1.addEventListener('resize', onResizeWrapper_1, false);
-        return function () {
-            win_1.cancelAnimationFrame(animationFrameId_1);
-            win_1.removeEventListener('resize', onResizeWrapper_1, false);
-        };
-    }
-};
-//# sourceMappingURL=observeResize.js.map

package/lib/utilities/observeResize.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"observeResize.js","sourceRoot":"../src/","sources":["utilities/observeResize.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAEhD;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,IAAM,aAAa,GAAG,UAC3B,MAA2B,EAC3B,QAAuE;IAEvE,IAAI,OAAO,cAAc,KAAK,WAAW,EAAE;QACzC,IAAM,UAAQ,GAAG,IAAI,cAAc,CAAC,QAAQ,CAAC,CAAC;QAE9C,IAAI,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE;YACzB,MAAM,CAAC,OAAO,CAAC,UAAA,CAAC,IAAI,OAAA,UAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,EAAnB,CAAmB,CAAC,CAAC;SAC1C;aAAM;YACL,UAAQ,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;SAC1B;QAED,OAAO,cAAM,OAAA,UAAQ,CAAC,UAAU,EAAE,EAArB,CAAqB,CAAC;KACpC;SAAM;QACL,0DAA0D;QAC1D,IAAM,iBAAe,GAAG,cAAM,OAAA,QAAQ,CAAC,SAAS,CAAC,EAAnB,CAAmB,CAAC;QAElD,IAAM,KAAG,GAAG,SAAS,CAAC,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;QAClE,IAAI,CAAC,KAAG,EAAE;YACR,4DAA4D;YAC5D,OAAO;gBACL,sBAAsB;YACxB,CAAC,CAAC;SACH;QAED,mFAAmF;QACnF,IAAM,kBAAgB,GAAG,KAAG,CAAC,qBAAqB,CAAC,iBAAe,CAAC,CAAC;QACpE,KAAG,CAAC,gBAAgB,CAAC,QAAQ,EAAE,iBAAe,EAAE,KAAK,CAAC,CAAC;QAEvD,OAAO;YACL,KAAG,CAAC,oBAAoB,CAAC,kBAAgB,CAAC,CAAC;YAC3C,KAAG,CAAC,mBAAmB,CAAC,QAAQ,EAAE,iBAAe,EAAE,KAAK,CAAC,CAAC;QAC5D,CAAC,CAAC;KACH;AACH,CAAC,CAAC","sourcesContent":["import { getWindow } from '@fluentui/utilities';\n\n/**\n * Wrapper for ResizeObserver, with fallback for browsers that don't support ResizeObserver.\n *\n * Calls the onResize callback once layout is complete, and again whenever any of the target(s) change size.\n * Or if ResizeObserver isn't supported, calls the callback whenever the window changes size.\n *\n * @param target - Either a single element, or array of elements to watch for size changes.\n * @param onResize - Callback to be notified when layout is complete, and when the target(s) change size.\n *    If this browser supports ResizeObserver, the callback will be passed the ResizeObserverEntry[] array.\n *    Otherwise, the entries array will be undefined, and you'll need to find another way to get the element's size,\n *    (e.g. clientWidth/clientHeight or getBoundingClientRect).\n *\n * @returns A function to clean up the observer/listener.\n */\nexport const observeResize = (\n  target: Element | Element[],\n  onResize: (entries: readonly ResizeObserverEntry[] | undefined) => void,\n): (() => void) => {\n  if (typeof ResizeObserver !== 'undefined') {\n    const observer = new ResizeObserver(onResize);\n\n    if (Array.isArray(target)) {\n      target.forEach(t => observer.observe(t));\n    } else {\n      observer.observe(target);\n    }\n\n    return () => observer.disconnect();\n  } else {\n    // Fallback for browsers that don't support ResizeObserver\n    const onResizeWrapper = () => onResize(undefined);\n\n    const win = getWindow(Array.isArray(target) ? target[0] : target);\n    if (!win) {\n      // Can't listen for resize if we can't get the window object\n      return () => {\n        // Nothing to clean up\n      };\n    }\n\n    // Listen for the first animation frame, which will happen after layout is complete\n    const animationFrameId = win.requestAnimationFrame(onResizeWrapper);\n    win.addEventListener('resize', onResizeWrapper, false);\n\n    return () => {\n      win.cancelAnimationFrame(animationFrameId);\n      win.removeEventListener('resize', onResizeWrapper, false);\n    };\n  }\n};\n\n/** Temporary type definition for ResizeObserver. Can be removed when official types are available. */\ntype ResizeObserver = {\n  new (callback: (entries: readonly ResizeObserverEntry[], observer: ResizeObserver) => void): ResizeObserver;\n  observe(target: Element, options?: { box: 'content-box' | 'border-box' }): void;\n  unobserve(target: Element): void;\n  disconnect(): void;\n};\n\n/** Temporary type definition for ResizeObserverEntry. Can be removed when official types are available. */\ntype ResizeObserverEntry = {\n  readonly contentRect: DOMRectReadOnly;\n  readonly target: Element;\n};\n\n/** Temporary definition for ResizeObserver. Can be removed when official types are available. */\ndeclare const ResizeObserver: ResizeObserver | undefined;\n"]}

package/lib/utilities/useOverflow.d.ts

@@ -1,45 +0,0 @@
-import { RefCallback } from '@fluentui/react-hooks';
-/**
- * Callback to notify the user that the items in the overflow have changed. This should ensure that the overflow menu
- * is visible, and contains all of the overflowing items.
- *
- * @param overflowIndex - The index of the first item in the overflow, or items.length if nothing is overflowing.
- * @param items - The list of all items in the container, and whether that particular item is in the overflow
- */
-export declare type OverflowItemsChangedCallback = (overflowIndex: number, items: {
-    ele: HTMLElement;
-    isOverflowing: boolean;
-}[]) => void;
-/** Parameters for {@see useOverflow} */
-export declare type OverflowParams = {
-    /** Callback to notify the user that the items in the overflow have changed. */
-    onOverflowItemsChanged: OverflowItemsChangedCallback;
-    /** True if the element containing overflowMenuButtonRef is in right-to-left order */
-    rtl: boolean;
-    /** Optional: Index of item that should never go into the overflow menu. */
-    pinnedIndex?: number;
-};
-/** Return value for {@see useOverflow} */
-export declare type OverflowRefs = {
-    /** Set the overflow menu button's ref to this ref callback */
-    menuButtonRef: RefCallback<HTMLElement>;
-};
-/**
- * Track whether any items don't fit within their container, and move them to the overflow menu.
- * Items are moved into the overflow menu from back to front, excluding pinned items.
- *
- * The overflow menu button must be the last sibling of all of the items that can be put into the overflow, and it
- * must be hooked up to the `setMenuButtonRef` setter function that's returned by `useOverflow`:
- * ```ts
- * const overflow = useOverflow(...);
- * ```
- * ```jsx
- * <Container>
- *  <Item /> // Index 0
- *  <Item /> // Index 1
- *  ...
- *  <Button ref={overflow.setMenuButtonRef} /> // Can be any React.Component or HTMLElement
- * </Container>
- * ```
- */
-export declare const useOverflow: ({ onOverflowItemsChanged, rtl, pinnedIndex }: OverflowParams) => OverflowRefs;