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

package/config/tests.js

@@ -8,10 +8,6 @@ const { resetIds } = require('@fluentui/utilities');
 // Initialize icons.
 initializeIcons('');
 
-global.requestAnimationFrame = callback => {
-  setTimeout(callback, 0);
-};
-
 // Configure enzyme.
 configure({ adapter: new Adapter() });
 

package/dist/react-tabs.d.ts

@@ -1,78 +1,70 @@
-import { IButtonProps } from '@fluentui/react-internal/lib/compat/Button';
-import { IKeytipProps } from '@fluentui/react-internal';
-import { IRefObject } from '@fluentui/utilities';
-import { IRenderFunction } from '@fluentui/utilities';
-import { IStyle } from '@fluentui/style-utilities';
-import { IStyleFunctionOrObject } from '@fluentui/utilities';
-import { ITheme } from '@fluentui/style-utilities';
-import * as React from 'react';
+import type { IButtonProps } from '@fluentui/react/lib/Button';
+import type { IKeytipProps } from '@fluentui/react';
+import type { IRefObject } from '@fluentui/utilities';
+import type { IRenderFunction } from '@fluentui/utilities';
+import type { IStyle } from '@fluentui/style-utilities';
+import type { IStyleFunctionOrObject } from '@fluentui/utilities';
+import type { ITheme } from '@fluentui/style-utilities';
+import * as React_2 from 'react';
 
 /**
- * {@docCategory Pivot}
+ * Display mode for the tabs
  */
-export declare interface IPivot {
-    /**
-     * Sets focus to the first pivot tab.
-     */
-    focus(): void;
+export declare type TabFormatType = 'links' | 'tabs';
+
+export declare class TabItem extends React_2.Component<TabItemProps, {}> {
+    constructor(props: TabItemProps);
+    render(): JSX.Element;
 }
 
-/**
- * {@docCategory Pivot}
- */
-export declare interface IPivotItemProps extends React.HTMLAttributes<HTMLDivElement> {
+export declare interface TabItemProps extends React_2.HTMLAttributes<HTMLDivElement> {
     /**
      * Gets the component ref.
      */
     componentRef?: IRefObject<{}>;
     /**
-     * The text displayed of each pivot link - renaming to `headerText`.
-     * @deprecated Use `headerText` instead.
-     */
-    linkText?: string;
-    /**
-     * The text displayed of each pivot link.
+     * The text displayed of each tab.
      */
     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.
+     * for each tab element.
      */
     headerButtonProps?: IButtonProps | {
         [key: string]: string | number | boolean;
     };
     /**
-     * An required key to uniquely identify a pivot item.
+     * An required key to uniquely identify a tab 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.
+     * The aria label of each tab which will read by screen reader instead of headerText.
      *
      * 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`.
+     * Defines an optional item count displayed in parentheses just after the `headerText`.
      *
      * Examples: completed (4), Unread (99+)
      */
     itemCount?: number | string;
     /**
-     * An optional icon to show next to the pivot link.
+     * An optional icon to show next to the tab.
      */
     itemIcon?: string;
     /**
-     * Optional custom renderer for the pivot item link
+     * Optional custom renderer for the tab
      */
-    onRenderItemLink?: IRenderFunction<IPivotItemProps>;
+    onRenderTab?: IRenderFunction<TabItemProps>;
     /**
-     * Optional keytip for this PivotItem
+     * Optional keytip for this TabItem
      */
     keytipProps?: IKeytipProps;
     /**
-     * Defines whether to always render the pivot item (regardless of whether it is selected or not).
+     * Defines whether to always render the tab item (regardless of whether it is selected or not).
      * Useful if you're rendering content that is expensive to mount.
      *
      * @defaultvalue false
@@ -81,53 +73,71 @@ export declare interface IPivotItemProps extends React.HTMLAttributes<HTMLDivEle
 }
 
 /**
- * {@docCategory Pivot}
+ * The Tabs control and related tabs pattern are used for navigating frequently accessed,
+ * distinct content categories. Tabs allow for navigation between two or more content
+ * views and relies on text headers to articulate the different sections of content.
+ */
+export declare const Tabs: React_2.FunctionComponent<TabsProps>;
+
+export declare const TabsBase: React_2.FunctionComponent<TabsProps>;
+
+export declare interface TabsImperativeHandle {
+    /**
+     * Sets focus to the first tab.
+     */
+    focus(): void;
+}
+
+/**
+ * Size of the tabs
  */
-export declare interface IPivotProps extends React.HTMLAttributes<HTMLDivElement>, React.RefAttributes<HTMLDivElement> {
+export declare type TabSizeType = 'normal' | 'large';
+
+export declare interface TabsProps extends React_2.HTMLAttributes<HTMLDivElement>, React_2.RefAttributes<HTMLDivElement> {
     /**
-     * Optional callback to access the IPivot interface. Use this instead of ref for accessing
+     * 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<IPivot>;
+    componentRef?: React_2.RefObject<TabsImperativeHandle>;
     /**
      * Call to provide customized styling that will layer on top of the variant rules.
      */
-    styles?: IStyleFunctionOrObject<IPivotStyleProps, IPivotStyles>;
+    styles?: IStyleFunctionOrObject<TabsStyleProps, TabsStyles>;
     /**
      * Theme provided by High-Order Component.
      */
     theme?: ITheme;
     /**
-     * Additional css class to apply to the Pivot
+     * Additional css class to apply to the Tabs
      * @defaultvalue undefined
      */
     className?: string;
     /**
-     * Default selected key for the pivot. Only provide this if the pivot is an uncontrolled component;
+     * 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 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
+     * 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 pivot item is changed.
+     * Callback for when the selected tab item is changed.
      */
-    onLinkClick?: (item?: PivotItem, ev?: React.MouseEvent<HTMLElement>) => void;
+    onTabClick?: (item?: TabItem, ev?: React_2.MouseEvent<HTMLElement>) => void;
     /**
-     * Link size (normal, large)
+     * Tab size (normal, large)
      */
-    linkSize?: PivotLinkSizeType;
+    tabSize?: TabSizeType;
     /**
-     * Link format (links, tabs)
+     * Tab format (links, tabs)
      */
-    linkFormat?: PivotLinkFormatType;
+    tabFormat?: TabFormatType;
     /**
-     * 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
+     * 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
@@ -146,89 +156,25 @@ export declare interface IPivotProps extends React.HTMLAttributes<HTMLDivElement
     getTabId?: (itemKey: string, index: number) => string;
 }
 
-/**
- * {@docCategory Pivot}
- */
-export declare type IPivotStyleProps = Required<Pick<IPivotProps, 'theme'>> & Pick<IPivotProps, 'className'> & {
-    linkSize?: PivotLinkSizeType;
-    linkFormat?: PivotLinkFormatType;
+export declare type TabsStyleProps = Required<Pick<TabsProps, 'theme'>> & Pick<TabsProps, 'className'> & {
+    tabSize?: TabSizeType;
+    tabFormat?: TabFormatType;
 };
 
-/**
- * {@docCategory Pivot}
- */
-export declare interface IPivotStyles {
+export declare interface TabsStyles {
     /**
      * Style for the root element.
      */
     root: IStyle;
-    link: IStyle;
-    linkIsSelected: IStyle;
-    linkContent: IStyle;
+    tab: IStyle;
+    tabIsSelected: IStyle;
+    tabContent: IStyle;
     text: IStyle;
     count: IStyle;
     icon: IStyle;
-    linkInMenu: IStyle;
+    tabInMenu: IStyle;
     overflowMenuButton: IStyle;
     itemContainer?: IStyle;
 }
 
-/**
- * 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>;
-
-export declare const PivotBase: React.FunctionComponent<IPivotProps>;
-
-export declare class PivotItem extends React.Component<IPivotItemProps, {}> {
-    constructor(props: IPivotItemProps);
-    render(): JSX.Element;
-}
-
-/**
- * {@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}
- * Display mode for the pivot links/tabs
- */
-export declare type PivotLinkFormatType = 'links' | '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"
-}
-
-/**
- * {@docCategory Pivot}
- * Size of the pivot links/tabs
- */
-export declare type PivotLinkSizeType = 'normal' | 'large';
-
-export * from "@fluentui/react-theme-provider";
-
 export { }

package/etc/react-tabs.api.md

@@ -4,22 +4,27 @@
 
 ```ts
 
-import { IButtonProps } from '@fluentui/react-internal/lib/compat/Button';
-import { IKeytipProps } from '@fluentui/react-internal';
-import { IRefObject } from '@fluentui/utilities';
-import { IRenderFunction } from '@fluentui/utilities';
-import { IStyle } from '@fluentui/style-utilities';
-import { IStyleFunctionOrObject } from '@fluentui/utilities';
-import { ITheme } from '@fluentui/style-utilities';
-import * as React from 'react';
+import type { IButtonProps } from '@fluentui/react/lib/Button';
+import type { IKeytipProps } from '@fluentui/react';
+import type { IRefObject } from '@fluentui/utilities';
+import type { IRenderFunction } from '@fluentui/utilities';
+import type { IStyle } from '@fluentui/style-utilities';
+import type { IStyleFunctionOrObject } from '@fluentui/utilities';
+import type { ITheme } from '@fluentui/style-utilities';
+import * as React_2 from 'react';
+
+// @public
+export type TabFormatType = 'links' | 'tabs';
 
 // @public (undocumented)
-export interface IPivot {
-    focus(): void;
+export class TabItem extends React_2.Component<TabItemProps, {}> {
+    constructor(props: TabItemProps);
+    // (undocumented)
+    render(): JSX.Element;
 }
 
 // @public (undocumented)
-export interface IPivotItemProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface TabItemProps extends React_2.HTMLAttributes<HTMLDivElement> {
     alwaysRender?: boolean;
     ariaLabel?: string;
     componentRef?: IRefObject<{}>;
@@ -31,35 +36,47 @@ export interface IPivotItemProps extends React.HTMLAttributes<HTMLDivElement> {
     itemIcon?: string;
     itemKey?: string;
     keytipProps?: IKeytipProps;
-    // @deprecated
-    linkText?: string;
-    onRenderItemLink?: IRenderFunction<IPivotItemProps>;
+    onRenderTab?: IRenderFunction<TabItemProps>;
 }
 
+// @public
+export const Tabs: React_2.FunctionComponent<TabsProps>;
+
 // @public (undocumented)
-export interface IPivotProps extends React.HTMLAttributes<HTMLDivElement>, React.RefAttributes<HTMLDivElement> {
+export const TabsBase: React_2.FunctionComponent<TabsProps>;
+
+// @public (undocumented)
+export interface TabsImperativeHandle {
+    focus(): void;
+}
+
+// @public
+export type TabSizeType = 'normal' | 'large';
+
+// @public (undocumented)
+export interface TabsProps extends React_2.HTMLAttributes<HTMLDivElement>, React_2.RefAttributes<HTMLDivElement> {
     className?: string;
-    componentRef?: React.RefObject<IPivot>;
+    componentRef?: React_2.RefObject<TabsImperativeHandle>;
     defaultSelectedKey?: string;
     getTabId?: (itemKey: string, index: number) => string;
     headersOnly?: boolean;
-    linkFormat?: PivotLinkFormatType;
-    linkSize?: PivotLinkSizeType;
-    onLinkClick?: (item?: PivotItem, ev?: React.MouseEvent<HTMLElement>) => void;
+    onTabClick?: (item?: TabItem, ev?: React_2.MouseEvent<HTMLElement>) => void;
     overflowBehavior?: 'none' | 'menu';
     selectedKey?: string | null;
-    styles?: IStyleFunctionOrObject<IPivotStyleProps, IPivotStyles>;
+    styles?: IStyleFunctionOrObject<TabsStyleProps, TabsStyles>;
+    tabFormat?: TabFormatType;
+    tabSize?: TabSizeType;
     theme?: ITheme;
 }
 
 // @public (undocumented)
-export type IPivotStyleProps = Required<Pick<IPivotProps, 'theme'>> & Pick<IPivotProps, 'className'> & {
-    linkSize?: PivotLinkSizeType;
-    linkFormat?: PivotLinkFormatType;
+export type TabsStyleProps = Required<Pick<TabsProps, 'theme'>> & Pick<TabsProps, 'className'> & {
+    tabSize?: TabSizeType;
+    tabFormat?: TabFormatType;
 };
 
 // @public (undocumented)
-export interface IPivotStyles {
+export interface TabsStyles {
     // (undocumented)
     count: IStyle;
     // (undocumented)
@@ -67,54 +84,20 @@ export interface IPivotStyles {
     // (undocumented)
     itemContainer?: IStyle;
     // (undocumented)
-    link: IStyle;
+    overflowMenuButton: IStyle;
+    root: IStyle;
     // (undocumented)
-    linkContent: IStyle;
+    tab: IStyle;
     // (undocumented)
-    linkInMenu: IStyle;
+    tabContent: IStyle;
     // (undocumented)
-    linkIsSelected: IStyle;
+    tabInMenu: IStyle;
     // (undocumented)
-    overflowMenuButton: IStyle;
-    root: IStyle;
+    tabIsSelected: IStyle;
     // (undocumented)
     text: IStyle;
 }
 
-// @public
-export const Pivot: React.FunctionComponent<IPivotProps>;
-
-// @public (undocumented)
-export const PivotBase: React.FunctionComponent<IPivotProps>;
-
-// @public (undocumented)
-export class PivotItem extends React.Component<IPivotItemProps, {}> {
-    constructor(props: IPivotItemProps);
-    // (undocumented)
-    render(): JSX.Element;
-}
-
-// @public @deprecated (undocumented)
-export const enum PivotLinkFormat {
-    links = "links",
-    tabs = "tabs"
-}
-
-// @public
-export type PivotLinkFormatType = 'links' | 'tabs';
-
-// @public @deprecated (undocumented)
-export const enum PivotLinkSize {
-    large = "large",
-    normal = "normal"
-}
-
-// @public
-export type PivotLinkSizeType = 'normal' | 'large';
-
-
-export * from "@fluentui/react-theme-provider";
-
 // (No @packageDocumentation comment for this package)
 
 ```

package/lib/Tabs.js.map

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

package/lib/common/isConformant.d.ts

@@ -1,2 +1,4 @@
-import { IsConformantOptions } from '@fluentui/react-conformance';
-export declare function isConformant(testInfo: Omit<IsConformantOptions, 'componentPath'>): void;
+import type { IsConformantOptions } from '@fluentui/react-conformance';
+export declare function isConformant<TProps = {}>(testInfo: Omit<IsConformantOptions<TProps>, 'componentPath'> & {
+    componentPath?: string;
+}): void;

package/lib/common/isConformant.js.map

@@ -1 +1 @@
-{"version":3,"file":"isConformant.js","sourceRoot":"../src/","sources":["common/isConformant.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,IAAI,gBAAgB,EAAuB,MAAM,6BAA6B,CAAC;AAEpG,MAAM,UAAU,YAAY,CAAC,QAAoD;IAC/E,IAAM,cAAc,GAAG;QACrB,aAAa,EAAE,CAAC,cAAc,EAAE,uBAAuB,CAAC;QACxD,aAAa,EAAE,MAAO,CAAC,MAAO,CAAC,QAAQ,CAAC,OAAO,CAAC,OAAO,EAAE,EAAE,CAAC;KAC7D,CAAC;IAEF,gBAAgB,CAAC,cAAc,EAAE,QAAQ,CAAC,CAAC;AAC7C,CAAC","sourcesContent":["import { isConformant as baseIsConformant, IsConformantOptions } from '@fluentui/react-conformance';\n\nexport function isConformant(testInfo: Omit<IsConformantOptions, 'componentPath'>) {\n  const defaultOptions = {\n    disabledTests: ['has-docblock', 'kebab-aria-attributes'],\n    componentPath: module!.parent!.filename.replace('.test', ''),\n  };\n\n  baseIsConformant(defaultOptions, testInfo);\n}\n"]}
+{"version":3,"file":"isConformant.js","sourceRoot":"../src/","sources":["common/isConformant.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,IAAI,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAG/E,MAAM,UAAU,YAAY,CAC1B,QAAyF;IAEzF,IAAM,cAAc,GAAyC;QAC3D,aAAa,EAAE,CAAC,cAAc,EAAE,uBAAuB,CAAC;QACxD,aAAa,EAAE,MAAO,CAAC,MAAO,CAAC,QAAQ,CAAC,OAAO,CAAC,OAAO,EAAE,EAAE,CAAC;KAC7D,CAAC;IAEF,gBAAgB,CAAC,cAAc,EAAE,QAAQ,CAAC,CAAC;AAC7C,CAAC","sourcesContent":["import { isConformant as baseIsConformant } from '@fluentui/react-conformance';\nimport type { IsConformantOptions } from '@fluentui/react-conformance';\n\nexport function isConformant<TProps = {}>(\n  testInfo: Omit<IsConformantOptions<TProps>, 'componentPath'> & { componentPath?: string },\n) {\n  const defaultOptions: Partial<IsConformantOptions<TProps>> = {\n    disabledTests: ['has-docblock', 'kebab-aria-attributes'],\n    componentPath: module!.parent!.filename.replace('.test', ''),\n  };\n\n  baseIsConformant(defaultOptions, testInfo);\n}\n"]}

package/{lib-commonjs/next → lib}/components/Tabs/TabItem.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { TabItemProps } from './TabItem.types';
+import type { TabItemProps } from './TabItem.types';
 export declare class TabItem extends React.Component<TabItemProps, {}> {
     constructor(props: TabItemProps);
     render(): JSX.Element;

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

@@ -0,0 +1 @@
+{"version":3,"file":"TabItem.js","sourceRoot":"../src/","sources":["components/Tabs/TabItem.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AAG5F,oCAAoC;AAEpC;IAA6B,2BAAiC;IAC5D,iBAAY,KAAmB;QAA/B,YACE,kBAAM,KAAK,CAAC,SAGb;QADC,sBAAsB,CAAC,KAAI,CAAC,CAAC;;IAC/B,CAAC;IAEM,wBAAM,GAAb;QACE,OAAO,wCAAS,cAAc,CAAC,IAAI,CAAC,KAAK,EAAE,aAAa,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAO,CAAC;IACzF,CAAC;IACH,cAAC;AAAD,CAAC,AAVD,CAA6B,KAAK,CAAC,SAAS,GAU3C","sourcesContent":["import * as React from 'react';\nimport { getNativeProps, divProperties, initializeComponentRef } from '@fluentui/utilities';\nimport type { TabItemProps } from './TabItem.types';\n\n// const COMPONENT_NAME = 'TabItem';\n\nexport class TabItem extends React.Component<TabItemProps, {}> {\n  constructor(props: TabItemProps) {\n    super(props);\n\n    initializeComponentRef(this);\n  }\n\n  public render(): JSX.Element {\n    return <div {...getNativeProps(this.props, divProperties)}>{this.props.children}</div>;\n  }\n}\n"]}

package/{lib-commonjs/next → lib}/components/Tabs/TabItem.types.d.ts

@@ -1,10 +1,7 @@
 import * as React from 'react';
-import { IKeytipProps } from '@fluentui/react-internal';
-import { IButtonProps } from '@fluentui/react-internal/lib/compat/Button';
-import { IRefObject, IRenderFunction } from '@fluentui/utilities';
-/**
- * {@docCategory Tabs}
- */
+import type { IKeytipProps } from '@fluentui/react';
+import type { IButtonProps } from '@fluentui/react/lib/Button';
+import type { IRefObject, IRenderFunction } from '@fluentui/utilities';
 export interface TabItemProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * Gets the component ref.

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"TabItem.types.js","sourceRoot":"../src/","sources":["components/Tabs/TabItem.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { IKeytipProps } from '@fluentui/react';\nimport type { IButtonProps } from '@fluentui/react/lib/Button';\nimport type { IRefObject, IRenderFunction } from '@fluentui/utilities';\n\nexport interface TabItemProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Gets the component ref.\n   */\n  componentRef?: IRefObject<{}>;\n\n  /**\n   * The text displayed of each tab.\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 tab element.\n   */\n  headerButtonProps?: IButtonProps | { [key: string]: string | number | boolean };\n\n  /**\n   * An required key to uniquely identify a tab 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 tab which will read by screen reader instead of headerText.\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 `headerText`.\n   *\n   * Examples: completed (4), Unread (99+)\n   */\n  itemCount?: number | string;\n\n  /**\n   * An optional icon to show next to the tab.\n   */\n  itemIcon?: string;\n\n  /**\n   * Optional custom renderer for the tab\n   */\n  onRenderTab?: IRenderFunction<TabItemProps>;\n\n  /**\n   * Optional keytip for this TabItem\n   */\n  keytipProps?: IKeytipProps;\n\n  /**\n   * Defines whether to always render the tab 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"]}

package/{lib-amd/next → lib}/components/Tabs/Tabs.base.d.ts

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

package/lib/{next/components → components}/Tabs/Tabs.base.js

@@ -2,10 +2,10 @@ import { __assign, __rest } from "tslib";
 import * as React from 'react';
 import { useControllableValue, useId } from '@fluentui/react-hooks';
 import { classNamesFunction, css, divProperties, getNativeProps, getRTL, KeyCodes, warn } from '@fluentui/utilities';
-import { DirectionalHint, FocusZone, FocusZoneDirection, Icon, } from '@fluentui/react-internal';
-import { CommandButton } from '@fluentui/react-internal/lib/compat/Button';
+import { DirectionalHint, FocusZone, FocusZoneDirection, Icon } from '@fluentui/react';
+import { CommandButton } from '@fluentui/react/lib/Button';
 import { TabItem } from './index';
-import { useOverflow } from '../../../utilities/useOverflow';
+import { useOverflow } from '../../utilities/useOverflow';
 var getClassNames = classNamesFunction();
 var COMPONENT_NAME = 'Tabs';
 var getTabId = function (props, baseId, itemKey, index) {
@@ -89,13 +89,14 @@ export var TabsBase = React.forwardRef(function (props, ref) {
             // eslint-disable-next-line react/jsx-no-bind
             onClick: function (ev) { return onTabClick(itemKey, ev); }, 
             // eslint-disable-next-line react/jsx-no-bind
-            onKeyDown: function (ev) { return onKeyDown(itemKey, ev); }, "aria-label": tab.ariaLabel, role: "tab", "aria-selected": isSelected, name: tab.headerText, keytipProps: tab.keytipProps, "data-content": contentString }), tabContent));
+            onKeyDown: function (ev) { return onKeyDown(itemKey, ev); }, "aria-label": tab.ariaLabel, role: tab.role || 'tab', "aria-selected": isSelected, name: tab.headerText, keytipProps: tab.keytipProps, "data-content": contentString }), tabContent));
     };
     var onTabClick = function (itemKey, ev) {
         ev.preventDefault();
         updateSelectedItem(itemKey, ev);
     };
     var onKeyDown = function (itemKey, ev) {
+        // eslint-disable-next-line deprecation/deprecation
         if (ev.which === KeyCodes.enter) {
             ev.preventDefault();
             updateSelectedItem(itemKey);
@@ -145,7 +146,6 @@ export var TabsBase = React.forwardRef(function (props, ref) {
     // 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: DirectionalHint.bottomRightEdge,
     }); }, []);

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.base.js","sourceRoot":"../src/","sources":["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 { DirectionalHint, FocusZone, FocusZoneDirection, Icon } from '@fluentui/react';\nimport { CommandButton } from '@fluentui/react/lib/Button';\nimport { TabItem } from './index';\nimport { useOverflow } from '../../utilities/useOverflow';\nimport type { IContextualMenuProps, IFocusZone } from '@fluentui/react';\nimport type { IButton } from '@fluentui/react/lib/Button';\nimport type { TabsImperativeHandle, TabItemProps, TabsProps, TabsStyleProps, TabsStyles } from './index';\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.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      // eslint-disable-next-line deprecation/deprecation\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        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-commonjs/next → lib}/components/Tabs/Tabs.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { TabsProps } from './Tabs.types';
+import type { TabsProps } from './Tabs.types';
 /**
  * The Tabs control and related tabs pattern are used for navigating frequently accessed,
  * distinct content categories. Tabs allow for navigation between two or more content

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.js","sourceRoot":"../src/","sources":["components/Tabs/Tabs.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAG1C;;;;GAIG;AACH,MAAM,CAAC,IAAM,IAAI,GAAuC,MAAM,CAC5D,QAAQ,EACR,SAAS,EACT,SAAS,EACT;IACE,KAAK,EAAE,MAAM;CACd,CACF,CAAC","sourcesContent":["import * as React from 'react';\nimport { styled } from '@fluentui/utilities';\nimport { TabsBase } from './Tabs.base';\nimport { getStyles } from './Tabs.styles';\nimport type { TabsProps, TabsStyleProps, TabsStyles } from './Tabs.types';\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/{next/components → components}/Tabs/Tabs.styles.d.ts

@@ -1,2 +1,2 @@
-import { TabsStyleProps, TabsStyles } from './Tabs.types';
+import type { TabsStyleProps, TabsStyles } from './Tabs.types';
 export declare const getStyles: (props: TabsStyleProps) => TabsStyles;