@fluentui/react-tabs 9.0.0-beta.8 → 9.0.0-beta.9

package/CHANGELOG.json

@@ -2,7 +2,114 @@
   "name": "@fluentui/react-tabs",
   "entries": [
     {
-      "date": "Fri, 04 Mar 2022 05:15:44 GMT",
+      "date": "Tue, 19 Apr 2022 19:14:06 GMT",
+      "tag": "@fluentui/react-tabs_v9.0.0-beta.9",
+      "version": "9.0.0-beta.9",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "gcox@microsoft.com",
+            "package": "@fluentui/react-tabs",
+            "commit": "b514b6072c080c6d3539cfc67c4a3e554d9bb775",
+            "comment": "Set disabled tab background to transparent"
+          },
+          {
+            "author": "seanmonahan@microsoft.com",
+            "package": "@fluentui/react-tabs",
+            "commit": "086a675fd0c648944ff4048450190a0a13467de3",
+            "comment": "Add static classnames to Tabs"
+          },
+          {
+            "author": "olfedias@microsoft.com",
+            "package": "@fluentui/react-tabs",
+            "commit": "e569d6e04d83cbcc6225e61db52ff81d2addd363",
+            "comment": "chore: Update Griffel to latest version"
+          },
+          {
+            "author": "Humberto.Morimoto@microsoft.com",
+            "package": "@fluentui/react-tabs",
+            "commit": "ad93ede78815d6767af5bf496ea6ad3ab6f47120",
+            "comment": "Removing star exports."
+          },
+          {
+            "author": "martinhochel@microsoft.com",
+            "package": "@fluentui/react-tabs",
+            "commit": "8722596e561b57decfe9aa79121db844737102ff",
+            "comment": "fix missing dependencies and lint warnings"
+          },
+          {
+            "author": "gcox@microsoft.com",
+            "package": "@fluentui/react-tabs",
+            "commit": "72fa867ab6b084656b53c8f644df74b31077ae15",
+            "comment": "Fix subtle style on tabs"
+          },
+          {
+            "author": "gcox@microsoft.com",
+            "package": "@fluentui/react-tabs",
+            "commit": "374dca7b9d662f71a1f81297d7e4f4ea95615645",
+            "comment": "react-tabs fit and finish"
+          },
+          {
+            "author": "gcox@microsoft.com",
+            "package": "@fluentui/react-tabs",
+            "commit": "69bcdf2f52fe6a8bf7d5f7ca71be74d753202356",
+            "comment": "Set subtle tab background to subtle background tokens"
+          },
+          {
+            "author": "gcox@microsoft.com",
+            "package": "@fluentui/react-tabs",
+            "commit": "f098bb23b512e4084534238f2eca794a39a5c2e0",
+            "comment": "Updated to decrease gap of small vertical tab per figma change"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabs",
+            "comment": "Bump @fluentui/react-context-selector to v9.0.0-rc.6",
+            "commit": "9c8592decacb9f7b1dc608a03c9f991918806008"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabs",
+            "comment": "Bump @fluentui/react-tabster to v9.0.0-rc.6",
+            "commit": "9c8592decacb9f7b1dc608a03c9f991918806008"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabs",
+            "comment": "Bump @fluentui/react-theme to v9.0.0-rc.5",
+            "commit": "9c8592decacb9f7b1dc608a03c9f991918806008"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabs",
+            "comment": "Bump @fluentui/react-utilities to v9.0.0-rc.6",
+            "commit": "9c8592decacb9f7b1dc608a03c9f991918806008"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabs",
+            "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.4",
+            "commit": "9c8592decacb9f7b1dc608a03c9f991918806008"
+          }
+        ],
+        "none": [
+          {
+            "author": "elcraig@microsoft.com",
+            "package": "@fluentui/react-tabs",
+            "commit": "b7f17e976f9e058f39c9fce4f0f9bb6eb4dfa577",
+            "comment": "Update React dev deps and hoist them to the repo root"
+          },
+          {
+            "author": "mgodbolt@microsoft.com",
+            "package": "@fluentui/react-tabs",
+            "commit": "905e46db07ada986fd7885531f72a71b7bbaabdc",
+            "comment": "create v9 api extractor config and set all v9 packags to use it, suppress forgotten export"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Fri, 04 Mar 2022 05:17:30 GMT",
       "tag": "@fluentui/react-tabs_v9.0.0-beta.8",
       "version": "9.0.0-beta.8",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,34 @@
 # Change Log - @fluentui/react-tabs
 
-This log was last generated on Fri, 04 Mar 2022 05:15:44 GMT and should not be manually modified.
+This log was last generated on Tue, 19 Apr 2022 19:14:06 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.0-beta.9](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabs_v9.0.0-beta.9)
+
+Tue, 19 Apr 2022 19:14:06 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabs_v9.0.0-beta.8..@fluentui/react-tabs_v9.0.0-beta.9)
+
+### Changes
+
+- Set disabled tab background to transparent ([PR #22342](https://github.com/microsoft/fluentui/pull/22342) by gcox@microsoft.com)
+- Add static classnames to Tabs ([PR #21960](https://github.com/microsoft/fluentui/pull/21960) by seanmonahan@microsoft.com)
+- chore: Update Griffel to latest version ([PR #21976](https://github.com/microsoft/fluentui/pull/21976) by olfedias@microsoft.com)
+- Removing star exports. ([PR #22151](https://github.com/microsoft/fluentui/pull/22151) by Humberto.Morimoto@microsoft.com)
+- fix missing dependencies and lint warnings ([PR #21924](https://github.com/microsoft/fluentui/pull/21924) by martinhochel@microsoft.com)
+- Fix subtle style on tabs ([PR #22439](https://github.com/microsoft/fluentui/pull/22439) by gcox@microsoft.com)
+- react-tabs fit and finish ([PR #22225](https://github.com/microsoft/fluentui/pull/22225) by gcox@microsoft.com)
+- Set subtle tab background to subtle background tokens ([PR #22346](https://github.com/microsoft/fluentui/pull/22346) by gcox@microsoft.com)
+- Updated to decrease gap of small vertical tab per figma change ([PR #22335](https://github.com/microsoft/fluentui/pull/22335) by gcox@microsoft.com)
+- Bump @fluentui/react-context-selector to v9.0.0-rc.6 ([PR #22367](https://github.com/microsoft/fluentui/pull/22367) by beachball)
+- Bump @fluentui/react-tabster to v9.0.0-rc.6 ([PR #22367](https://github.com/microsoft/fluentui/pull/22367) by beachball)
+- Bump @fluentui/react-theme to v9.0.0-rc.5 ([PR #22367](https://github.com/microsoft/fluentui/pull/22367) by beachball)
+- Bump @fluentui/react-utilities to v9.0.0-rc.6 ([PR #22367](https://github.com/microsoft/fluentui/pull/22367) by beachball)
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.4 ([PR #22367](https://github.com/microsoft/fluentui/pull/22367) by beachball)
+
 ## [9.0.0-beta.8](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabs_v9.0.0-beta.8)
 
-Fri, 04 Mar 2022 05:15:44 GMT 
+Fri, 04 Mar 2022 05:17:30 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabs_v9.0.0-beta.7..@fluentui/react-tabs_v9.0.0-beta.8)
 
 ### Changes

package/dist/react-tabs.d.ts

@@ -3,20 +3,9 @@ import type { ComponentState } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
+import { SlotClassNames } from '@fluentui/react-utilities';
 
-export declare const indicatorLengthVar = "--selection-indicator-length";
-
-export declare const indicatorOffsetVar = "--selection-indicator-offset";
-
-export declare type RegisterTabData = {
-    /**
-     * The value of the selected tab.
-     */
-    value: TabValue;
-    ref: React_2.RefObject<HTMLElement>;
-};
-
-export declare type RegisterTabEventHandler = (data: RegisterTabData) => void;
+export declare type RegisterTabEventHandler = (data: TabRegisterData) => void;
 
 /**
  * Render the final JSX of Tab
@@ -44,31 +33,30 @@ export declare type SelectTabEventHandler = (event: SelectTabEvent, data: Select
  */
 export declare const Tab: ForwardRefComponent<TabProps>;
 
-export declare const tabClassName = "fui-Tab";
+export declare const tabClassName: string;
+
+export declare const tabClassNames: SlotClassNames<TabSlots>;
 
 declare type TabCommons = {
+    /**
+     * A tab can be set to disable interaction.
+     * @default false
+     */
+    disabled?: boolean;
     /**
      * The value that identifies this tab when selected.
      */
     value: TabValue;
 };
 
-/**
- * A bounding rectangle of a tab
- */
-export declare type TabContentRect = {
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-};
-
 /**
  * A tab list provides single selection from a set of tabs.
  */
 export declare const TabList: ForwardRefComponent<TabListProps>;
 
-export declare const tabListClassName = "fui-TabList";
+export declare const tabListClassName: string;
+
+export declare const tabListClassNames: SlotClassNames<TabListSlots>;
 
 declare type TabListCommons = {
     /**
@@ -79,6 +67,11 @@ declare type TabListCommons = {
      * @default 'transparent'
      */
     appearance?: 'transparent' | 'subtle';
+    /**
+     * A tab list can be set to disable interaction.
+     * @default false
+     */
+    disabled?: boolean;
     /**
      * Raised when a tab is selected.
      */
@@ -100,7 +93,7 @@ declare type TabListCommons = {
     vertical?: boolean;
 };
 
-export declare type TabListContextValue = Pick<TabListCommons, 'onTabSelect' | 'selectedValue'> & Required<Pick<TabListCommons, 'appearance' | 'size' | 'vertical'>> & {
+export declare type TabListContextValue = Pick<TabListCommons, 'onTabSelect' | 'selectedValue'> & Required<Pick<TabListCommons, 'appearance' | 'disabled' | 'size' | 'vertical'>> & {
     /** A callback to allow a tab to register itself with the tab list. */
     onRegister: RegisterTabEventHandler;
     /** A callback to allow a tab to unregister itself with the tab list. */
@@ -109,6 +102,14 @@ export declare type TabListContextValue = Pick<TabListCommons, 'onTabSelect' | '
      * A callback to allow a tab to select itself when pressed.
      */
     onSelect: SelectTabEventHandler;
+    /**
+     * Gets the registered tab data along with current and previous selected values.
+     */
+    getRegisteredTabs: () => {
+        selectedValue?: TabValue;
+        previousSelectedValue?: TabValue;
+        registeredTabs: Record<string, TabRegisterData>;
+    };
 };
 
 /**
@@ -132,8 +133,6 @@ export declare type TabListProps = ComponentProps<TabListSlots> & TabListCommons
     defaultSelectedValue?: TabValue;
 };
 
-export declare const tabListSelectionIndicatorName = "fui-TabList_SelectionIndicator";
-
 export declare type TabListSlots = {
     /**
      * The slot associated with the root element of this tab list.
@@ -144,20 +143,29 @@ export declare type TabListSlots = {
 /**
  * State used in rendering TabList.
  */
-export declare type TabListState = ComponentState<Required<TabListSlots>> & TabListContextValue & {
-    selectedTabRect?: TabContentRect;
-};
+export declare type TabListState = ComponentState<Required<TabListSlots>> & TabListContextValue;
 
 /**
  * Tab Props
  */
 export declare type TabProps = ComponentProps<Partial<TabSlots>> & TabCommons;
 
+export declare type TabRegisterData = {
+    /**
+     * The value of the tab.
+     */
+    value: TabValue;
+    /**
+     * The reference to the tab HTML element.
+     */
+    ref: React_2.RefObject<HTMLElement>;
+};
+
 export declare type TabSlots = {
     /**
      * Root of the component.
      */
-    root: Slot<'div'>;
+    root: Slot<'button'>;
     /**
      * Icon that renders before the content.
      */
@@ -172,15 +180,19 @@ export declare type TabSlots = {
 /**
  * State used in rendering Tab
  */
-export declare type TabState = ComponentState<TabSlots> & TabCommons & {
+export declare type TabState = ComponentState<TabSlots> & Omit<TabCommons, 'disabled'> & Required<Pick<TabCommons, 'disabled'>> & {
     /**
      * A tab supports 'transparent' and 'subtle' appearance.
      */
-    appearance?: string;
+    appearance?: 'transparent' | 'subtle';
+    /**
+     * A tab can have only an icon slot filled and no content.
+     */
+    iconOnly: boolean;
     /**
-     * If this tab is selected.
+     * If this tab is selected
      */
-    selected?: boolean;
+    selected: boolean;
     /**
      * A tab can be either 'small' or 'medium' size.
      */

package/lib/components/Tab/Tab.types.d.ts

@@ -7,7 +7,7 @@ export declare type TabSlots = {
     /**
      * Root of the component.
      */
-    root: Slot<'div'>;
+    root: Slot<'button'>;
     /**
      * Icon that renders before the content.
      */
@@ -19,6 +19,11 @@ export declare type TabSlots = {
     content: NonNullable<Slot<'span'>>;
 };
 declare type TabCommons = {
+    /**
+     * A tab can be set to disable interaction.
+     * @default false
+     */
+    disabled?: boolean;
     /**
      * The value that identifies this tab when selected.
      */
@@ -31,15 +36,19 @@ export declare type TabProps = ComponentProps<Partial<TabSlots>> & TabCommons;
 /**
  * State used in rendering Tab
  */
-export declare type TabState = ComponentState<TabSlots> & TabCommons & {
+export declare type TabState = ComponentState<TabSlots> & Omit<TabCommons, 'disabled'> & Required<Pick<TabCommons, 'disabled'>> & {
     /**
      * A tab supports 'transparent' and 'subtle' appearance.
      */
-    appearance?: string;
+    appearance?: 'transparent' | 'subtle';
+    /**
+     * A tab can have only an icon slot filled and no content.
+     */
+    iconOnly: boolean;
     /**
-     * If this tab is selected.
+     * If this tab is selected
      */
-    selected?: boolean;
+    selected: boolean;
     /**
      * A tab can be either 'small' or 'medium' size.
      */

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

@@ -1 +1 @@
-{"version":3,"file":"Tab.types.js","sourceRoot":"../src/","sources":["components/Tab/Tab.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\n/**\n * Any value that identifies a specific tab.\n */\nexport type TabValue = unknown;\n\nexport type TabSlots = {\n  /**\n   * Root of the component.\n   */\n  root: Slot<'div'>;\n\n  /**\n   * Icon that renders before the content.\n   */\n  icon?: Slot<'span'>;\n\n  /**\n   * Component children are placed in this slot\n   * Avoid using the `children` property in this slot in favour of Component children whenever possible.\n   */\n  content: NonNullable<Slot<'span'>>;\n};\n\ntype TabCommons = {\n  /**\n   * The value that identifies this tab when selected.\n   */\n  value: TabValue;\n};\n\n/**\n * Tab Props\n */\nexport type TabProps = ComponentProps<Partial<TabSlots>> & TabCommons;\n\n/**\n * State used in rendering Tab\n */\nexport type TabState = ComponentState<TabSlots> &\n  TabCommons & {\n    /**\n     * A tab supports 'transparent' and 'subtle' appearance.\n     */\n    appearance?: string;\n    /**\n     * If this tab is selected.\n     */\n    selected?: boolean;\n    /**\n     * A tab can be either 'small' or 'medium' size.\n     */\n    size: 'small' | 'medium';\n    /**\n     * A tab can arrange its content based on if the tabs in the list are arranged vertically.\n     */\n    vertical: boolean;\n  };\n"]}
+{"version":3,"file":"Tab.types.js","sourceRoot":"../src/","sources":["components/Tab/Tab.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\n/**\n * Any value that identifies a specific tab.\n */\nexport type TabValue = unknown;\n\nexport type TabSlots = {\n  /**\n   * Root of the component.\n   */\n  root: Slot<'button'>;\n\n  /**\n   * Icon that renders before the content.\n   */\n  icon?: Slot<'span'>;\n\n  /**\n   * Component children are placed in this slot\n   * Avoid using the `children` property in this slot in favour of Component children whenever possible.\n   */\n  content: NonNullable<Slot<'span'>>;\n};\n\ntype TabCommons = {\n  /**\n   * A tab can be set to disable interaction.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * The value that identifies this tab when selected.\n   */\n  value: TabValue;\n};\n\n/**\n * Tab Props\n */\nexport type TabProps = ComponentProps<Partial<TabSlots>> & TabCommons;\n\n/**\n * State used in rendering Tab\n */\nexport type TabState = ComponentState<TabSlots> &\n  Omit<TabCommons, 'disabled'> &\n  Required<Pick<TabCommons, 'disabled'>> & {\n    /**\n     * A tab supports 'transparent' and 'subtle' appearance.\n     */\n    appearance?: 'transparent' | 'subtle';\n    /**\n     * A tab can have only an icon slot filled and no content.\n     */\n    iconOnly: boolean;\n    /**\n     * If this tab is selected\n     */\n    selected: boolean;\n    /**\n     * A tab can be either 'small' or 'medium' size.\n     */\n    size: 'small' | 'medium';\n    /**\n     * A tab can arrange its content based on if the tabs in the list are arranged vertically.\n     */\n    vertical: boolean;\n  };\n"]}

package/lib/components/Tab/index.d.ts

@@ -3,3 +3,4 @@ export * from './Tab.types';
 export * from './renderTab';
 export * from './useTab';
 export * from './useTabStyles';
+export * from './useTabAnimatedIndicator';

package/lib/components/Tab/index.js

@@ -3,4 +3,5 @@ export * from './Tab.types';
 export * from './renderTab';
 export * from './useTab';
 export * from './useTabStyles';
+export * from './useTabAnimatedIndicator';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/Tab/index.ts"],"names":[],"mappings":"AAAA,cAAc,OAAO,CAAC;AACtB,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC","sourcesContent":["export * from './Tab';\nexport * from './Tab.types';\nexport * from './renderTab';\nexport * from './useTab';\nexport * from './useTabStyles';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/Tab/index.ts"],"names":[],"mappings":"AAAA,cAAc,OAAO,CAAC;AACtB,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,2BAA2B,CAAC","sourcesContent":["export * from './Tab';\nexport * from './Tab.types';\nexport * from './renderTab';\nexport * from './useTab';\nexport * from './useTabStyles';\nexport * from './useTabAnimatedIndicator';\n"]}

package/lib/components/Tab/renderTab.js

@@ -3,7 +3,6 @@ import { getSlots } from '@fluentui/react-utilities';
 /**
  * Render the final JSX of Tab
  */
-// eslint-disable-next-line @typescript-eslint/naming-convention
 
 export const renderTab_unstable = state => {
   const {
@@ -12,7 +11,7 @@ export const renderTab_unstable = state => {
   } = getSlots(state);
   return /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
   }, slots.icon && /*#__PURE__*/React.createElement(slots.icon, { ...slotProps.icon
-  }), /*#__PURE__*/React.createElement(slots.content, { ...slotProps.content
+  }), !state.iconOnly && /*#__PURE__*/React.createElement(slots.content, { ...slotProps.content
   }));
 };
 //# sourceMappingURL=renderTab.js.map

package/lib/components/Tab/renderTab.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/Tab/renderTab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;AACH;;AACA,OAAO,MAAM,kBAAkB,GAAI,KAAD,IAAoB;AACpD,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAW,KAAX,CAArC;AAEA,sBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,EACG,KAAK,CAAC,IAAN,iBAAc,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,CADjB,eAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,OAAP,EAAc,EAAA,GAAK,SAAS,CAAC;AAAf,GAAd,CAFF,CADF;AAMD,CATM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { TabState, TabSlots } from './Tab.types';\n\n/**\n * Render the final JSX of Tab\n */\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport const renderTab_unstable = (state: TabState) => {\n  const { slots, slotProps } = getSlots<TabSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.icon && <slots.icon {...slotProps.icon} />}\n      <slots.content {...slotProps.content} />\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/Tab/renderTab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,kBAAkB,GAAI,KAAD,IAAoB;AACpD,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAW,KAAX,CAArC;AAEA,sBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,EACG,KAAK,CAAC,IAAN,iBAAc,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,CADjB,EAEG,CAAC,KAAK,CAAC,QAAP,iBAAmB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,OAAP,EAAc,EAAA,GAAK,SAAS,CAAC;AAAf,GAAd,CAFtB,CADF;AAMD,CATM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { TabState, TabSlots } from './Tab.types';\n\n/**\n * Render the final JSX of Tab\n */\nexport const renderTab_unstable = (state: TabState) => {\n  const { slots, slotProps } = getSlots<TabSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.icon && <slots.icon {...slotProps.icon} />}\n      {!state.iconOnly && <slots.content {...slotProps.content} />}\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}

package/lib/components/Tab/useTab.js

@@ -11,35 +11,27 @@ import { useContextSelector } from '@fluentui/react-context-selector';
  * @param props - props from this instance of Tab
  * @param ref - reference to root HTMLElement of Tab
  */
-// eslint-disable-next-line @typescript-eslint/naming-convention
 
 export const useTab_unstable = (props, ref) => {
   const {
     content,
+    disabled: tabDisabled = false,
     icon,
     value
   } = props;
-  const {
-    appearance,
-    selected,
-    onRegister,
-    onUnregister,
-    onSelect,
-    size,
-    vertical
-  } = useContextSelector(TabListContext, ctx => ({
-    appearance: ctx.appearance,
-    selected: ctx.selectedValue === value,
-    onRegister: ctx.onRegister,
-    onUnregister: ctx.onUnregister,
-    onSelect: ctx.onSelect,
-    size: ctx.size,
-    vertical: !!ctx.vertical
-  }));
+  const appearance = useContextSelector(TabListContext, ctx => ctx.appearance);
+  const listDisabled = useContextSelector(TabListContext, ctx => ctx.disabled);
+  const selected = useContextSelector(TabListContext, ctx => ctx.selectedValue === value);
+  const onRegister = useContextSelector(TabListContext, ctx => ctx.onRegister);
+  const onUnregister = useContextSelector(TabListContext, ctx => ctx.onUnregister);
+  const onSelect = useContextSelector(TabListContext, ctx => ctx.onSelect);
+  const size = useContextSelector(TabListContext, ctx => ctx.size);
+  const vertical = useContextSelector(TabListContext, ctx => !!ctx.vertical);
+  const disabled = listDisabled || tabDisabled;
+  const innerRef = React.useRef(null);
   const onClick = useEventCallback(event => onSelect(event, {
     value
   }));
-  const innerRef = React.useRef(null);
   React.useEffect(() => {
     onRegister({
       value,
@@ -52,27 +44,31 @@ export const useTab_unstable = (props, ref) => {
       });
     };
   }, [onRegister, onUnregister, innerRef, value]);
+  const iconShorthand = resolveShorthand(icon);
+  const contentShorthand = resolveShorthand(content, {
+    required: true,
+    defaultProps: {
+      children: props.children
+    }
+  });
   return {
     components: {
-      root: 'div',
+      root: 'button',
       icon: 'span',
       content: 'span'
     },
-    root: getNativeElementProps('div', {
+    root: getNativeElementProps('button', {
       ref: useMergedRefs(ref, innerRef),
       role: 'tab',
-      tabIndex: 0,
       ...props,
+      disabled,
       onClick
     }),
-    icon: resolveShorthand(icon),
-    content: resolveShorthand(content, {
-      required: true,
-      defaultProps: {
-        children: props.children
-      }
-    }),
+    icon: iconShorthand,
+    iconOnly: Boolean((iconShorthand === null || iconShorthand === void 0 ? void 0 : iconShorthand.children) && !contentShorthand.children),
+    content: contentShorthand,
     appearance,
+    disabled,
     selected,
     size,
     value,

package/lib/components/Tab/useTab.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/Tab/useTab.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,qBAAT,EAAgC,gBAAhC,EAAkD,gBAAlD,EAAoE,aAApE,QAAyF,2BAAzF;AAEA,SAAS,cAAT,QAA+B,2BAA/B;AACA,SAAS,kBAAT,QAAmC,kCAAnC;AAGA;;;;;;;;AAQG;AACH;;AACA,OAAO,MAAM,eAAe,GAAG,CAAC,KAAD,EAAkB,GAAlB,KAA2D;AACxF,QAAM;AAAE,IAAA,OAAF;AAAW,IAAA,IAAX;AAAiB,IAAA;AAAjB,MAA2B,KAAjC;AAEA,QAAM;AAAE,IAAA,UAAF;AAAc,IAAA,QAAd;AAAwB,IAAA,UAAxB;AAAoC,IAAA,YAApC;AAAkD,IAAA,QAAlD;AAA4D,IAAA,IAA5D;AAAkE,IAAA;AAAlE,MAA+E,kBAAkB,CACrG,cADqG,EAErG,GAAG,KAAK;AACN,IAAA,UAAU,EAAE,GAAG,CAAC,UADV;AAEN,IAAA,QAAQ,EAAE,GAAG,CAAC,aAAJ,KAAsB,KAF1B;AAGN,IAAA,UAAU,EAAE,GAAG,CAAC,UAHV;AAIN,IAAA,YAAY,EAAE,GAAG,CAAC,YAJZ;AAKN,IAAA,QAAQ,EAAE,GAAG,CAAC,QALR;AAMN,IAAA,IAAI,EAAE,GAAG,CAAC,IANJ;AAON,IAAA,QAAQ,EAAE,CAAC,CAAC,GAAG,CAAC;AAPV,GAAL,CAFkG,CAAvG;AAaA,QAAM,OAAO,GAAG,gBAAgB,CAAE,KAAD,IAA2B,QAAQ,CAAC,KAAD,EAAQ;AAAE,IAAA;AAAF,GAAR,CAApC,CAAhC;AAEA,QAAM,QAAQ,GAAG,KAAK,CAAC,MAAN,CAA0B,IAA1B,CAAjB;AAEA,EAAA,KAAK,CAAC,SAAN,CAAgB,MAAK;AACnB,IAAA,UAAU,CAAC;AACT,MAAA,KADS;AAET,MAAA,GAAG,EAAE;AAFI,KAAD,CAAV;AAKA,WAAO,MAAK;AACV,MAAA,YAAY,CAAC;AAAE,QAAA,KAAF;AAAS,QAAA,GAAG,EAAE;AAAd,OAAD,CAAZ;AACD,KAFD;AAGD,GATD,EASG,CAAC,UAAD,EAAa,YAAb,EAA2B,QAA3B,EAAqC,KAArC,CATH;AAWA,SAAO;AACL,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,KADI;AAEV,MAAA,IAAI,EAAE,MAFI;AAGV,MAAA,OAAO,EAAE;AAHC,KADP;AAML,IAAA,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ;AACjC,MAAA,GAAG,EAAE,aAAa,CAAC,GAAD,EAAM,QAAN,CADe;AAEjC,MAAA,IAAI,EAAE,KAF2B;AAGjC,MAAA,QAAQ,EAAE,CAHuB;AAIjC,SAAG,KAJ8B;AAKjC,MAAA;AALiC,KAAR,CANtB;AAaL,IAAA,IAAI,EAAE,gBAAgB,CAAC,IAAD,CAbjB;AAcL,IAAA,OAAO,EAAE,gBAAgB,CAAC,OAAD,EAAU;AAAE,MAAA,QAAQ,EAAE,IAAZ;AAAkB,MAAA,YAAY,EAAE;AAAE,QAAA,QAAQ,EAAE,KAAK,CAAC;AAAlB;AAAhC,KAAV,CAdpB;AAeL,IAAA,UAfK;AAgBL,IAAA,QAhBK;AAiBL,IAAA,IAjBK;AAkBL,IAAA,KAlBK;AAmBL,IAAA;AAnBK,GAAP;AAqBD,CApDM","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport type { TabProps, TabState } from './Tab.types';\nimport { TabListContext } from '../TabList/TabListContext';\nimport { useContextSelector } from '@fluentui/react-context-selector';\nimport { SelectTabEvent } from '../TabList/TabList.types';\n\n/**\n * Create the state required to render Tab.\n *\n * The returned state can be modified with hooks such as useTabStyles_unstable,\n * before being passed to renderTab_unstable.\n *\n * @param props - props from this instance of Tab\n * @param ref - reference to root HTMLElement of Tab\n */\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport const useTab_unstable = (props: TabProps, ref: React.Ref<HTMLElement>): TabState => {\n  const { content, icon, value } = props;\n\n  const { appearance, selected, onRegister, onUnregister, onSelect, size, vertical } = useContextSelector(\n    TabListContext,\n    ctx => ({\n      appearance: ctx.appearance,\n      selected: ctx.selectedValue === value,\n      onRegister: ctx.onRegister,\n      onUnregister: ctx.onUnregister,\n      onSelect: ctx.onSelect,\n      size: ctx.size,\n      vertical: !!ctx.vertical,\n    }),\n  );\n\n  const onClick = useEventCallback((event: SelectTabEvent) => onSelect(event, { value }));\n\n  const innerRef = React.useRef<HTMLElement>(null);\n\n  React.useEffect(() => {\n    onRegister({\n      value,\n      ref: innerRef,\n    });\n\n    return () => {\n      onUnregister({ value, ref: innerRef });\n    };\n  }, [onRegister, onUnregister, innerRef, value]);\n\n  return {\n    components: {\n      root: 'div',\n      icon: 'span',\n      content: 'span',\n    },\n    root: getNativeElementProps('div', {\n      ref: useMergedRefs(ref, innerRef),\n      role: 'tab',\n      tabIndex: 0,\n      ...props,\n      onClick,\n    }),\n    icon: resolveShorthand(icon),\n    content: resolveShorthand(content, { required: true, defaultProps: { children: props.children } }),\n    appearance,\n    selected,\n    size,\n    value,\n    vertical,\n  };\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/Tab/useTab.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,qBAAT,EAAgC,gBAAhC,EAAkD,gBAAlD,EAAoE,aAApE,QAAyF,2BAAzF;AAEA,SAAS,cAAT,QAA+B,2BAA/B;AACA,SAAS,kBAAT,QAAmC,kCAAnC;AAGA;;;;;;;;AAQG;;AACH,OAAO,MAAM,eAAe,GAAG,CAAC,KAAD,EAAkB,GAAlB,KAA2D;AACxF,QAAM;AAAE,IAAA,OAAF;AAAW,IAAA,QAAQ,EAAE,WAAW,GAAG,KAAnC;AAA0C,IAAA,IAA1C;AAAgD,IAAA;AAAhD,MAA0D,KAAhE;AAEA,QAAM,UAAU,GAAG,kBAAkB,CAAC,cAAD,EAAiB,GAAG,IAAI,GAAG,CAAC,UAA5B,CAArC;AACA,QAAM,YAAY,GAAG,kBAAkB,CAAC,cAAD,EAAiB,GAAG,IAAI,GAAG,CAAC,QAA5B,CAAvC;AACA,QAAM,QAAQ,GAAG,kBAAkB,CAAC,cAAD,EAAiB,GAAG,IAAI,GAAG,CAAC,aAAJ,KAAsB,KAA9C,CAAnC;AACA,QAAM,UAAU,GAAG,kBAAkB,CAAC,cAAD,EAAiB,GAAG,IAAI,GAAG,CAAC,UAA5B,CAArC;AACA,QAAM,YAAY,GAAG,kBAAkB,CAAC,cAAD,EAAiB,GAAG,IAAI,GAAG,CAAC,YAA5B,CAAvC;AACA,QAAM,QAAQ,GAAG,kBAAkB,CAAC,cAAD,EAAiB,GAAG,IAAI,GAAG,CAAC,QAA5B,CAAnC;AACA,QAAM,IAAI,GAAG,kBAAkB,CAAC,cAAD,EAAiB,GAAG,IAAI,GAAG,CAAC,IAA5B,CAA/B;AACA,QAAM,QAAQ,GAAG,kBAAkB,CAAC,cAAD,EAAiB,GAAG,IAAI,CAAC,CAAC,GAAG,CAAC,QAA9B,CAAnC;AACA,QAAM,QAAQ,GAAG,YAAY,IAAI,WAAjC;AAEA,QAAM,QAAQ,GAAG,KAAK,CAAC,MAAN,CAA0B,IAA1B,CAAjB;AACA,QAAM,OAAO,GAAG,gBAAgB,CAAE,KAAD,IAA2B,QAAQ,CAAC,KAAD,EAAQ;AAAE,IAAA;AAAF,GAAR,CAApC,CAAhC;AAEA,EAAA,KAAK,CAAC,SAAN,CAAgB,MAAK;AACnB,IAAA,UAAU,CAAC;AACT,MAAA,KADS;AAET,MAAA,GAAG,EAAE;AAFI,KAAD,CAAV;AAKA,WAAO,MAAK;AACV,MAAA,YAAY,CAAC;AAAE,QAAA,KAAF;AAAS,QAAA,GAAG,EAAE;AAAd,OAAD,CAAZ;AACD,KAFD;AAGD,GATD,EASG,CAAC,UAAD,EAAa,YAAb,EAA2B,QAA3B,EAAqC,KAArC,CATH;AAWA,QAAM,aAAa,GAAG,gBAAgB,CAAC,IAAD,CAAtC;AACA,QAAM,gBAAgB,GAAG,gBAAgB,CAAC,OAAD,EAAU;AAAE,IAAA,QAAQ,EAAE,IAAZ;AAAkB,IAAA,YAAY,EAAE;AAAE,MAAA,QAAQ,EAAE,KAAK,CAAC;AAAlB;AAAhC,GAAV,CAAzC;AACA,SAAO;AACL,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,QADI;AAEV,MAAA,IAAI,EAAE,MAFI;AAGV,MAAA,OAAO,EAAE;AAHC,KADP;AAML,IAAA,IAAI,EAAE,qBAAqB,CAAC,QAAD,EAAW;AACpC,MAAA,GAAG,EAAE,aAAa,CAAC,GAAD,EAAM,QAAN,CADkB;AAEpC,MAAA,IAAI,EAAE,KAF8B;AAGpC,SAAG,KAHiC;AAIpC,MAAA,QAJoC;AAKpC,MAAA;AALoC,KAAX,CANtB;AAaL,IAAA,IAAI,EAAE,aAbD;AAcL,IAAA,QAAQ,EAAE,OAAO,CAAC,CAAA,aAAa,KAAA,IAAb,IAAA,aAAa,KAAA,KAAA,CAAb,GAAa,KAAA,CAAb,GAAA,aAAa,CAAE,QAAf,KAA2B,CAAC,gBAAgB,CAAC,QAA9C,CAdZ;AAeL,IAAA,OAAO,EAAE,gBAfJ;AAgBL,IAAA,UAhBK;AAiBL,IAAA,QAjBK;AAkBL,IAAA,QAlBK;AAmBL,IAAA,IAnBK;AAoBL,IAAA,KApBK;AAqBL,IAAA;AArBK,GAAP;AAuBD,CApDM","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport type { TabProps, TabState } from './Tab.types';\nimport { TabListContext } from '../TabList/TabListContext';\nimport { useContextSelector } from '@fluentui/react-context-selector';\nimport { SelectTabEvent } from '../TabList/TabList.types';\n\n/**\n * Create the state required to render Tab.\n *\n * The returned state can be modified with hooks such as useTabStyles_unstable,\n * before being passed to renderTab_unstable.\n *\n * @param props - props from this instance of Tab\n * @param ref - reference to root HTMLElement of Tab\n */\nexport const useTab_unstable = (props: TabProps, ref: React.Ref<HTMLElement>): TabState => {\n  const { content, disabled: tabDisabled = false, icon, value } = props;\n\n  const appearance = useContextSelector(TabListContext, ctx => ctx.appearance);\n  const listDisabled = useContextSelector(TabListContext, ctx => ctx.disabled);\n  const selected = useContextSelector(TabListContext, ctx => ctx.selectedValue === value);\n  const onRegister = useContextSelector(TabListContext, ctx => ctx.onRegister);\n  const onUnregister = useContextSelector(TabListContext, ctx => ctx.onUnregister);\n  const onSelect = useContextSelector(TabListContext, ctx => ctx.onSelect);\n  const size = useContextSelector(TabListContext, ctx => ctx.size);\n  const vertical = useContextSelector(TabListContext, ctx => !!ctx.vertical);\n  const disabled = listDisabled || tabDisabled;\n\n  const innerRef = React.useRef<HTMLElement>(null);\n  const onClick = useEventCallback((event: SelectTabEvent) => onSelect(event, { value }));\n\n  React.useEffect(() => {\n    onRegister({\n      value,\n      ref: innerRef,\n    });\n\n    return () => {\n      onUnregister({ value, ref: innerRef });\n    };\n  }, [onRegister, onUnregister, innerRef, value]);\n\n  const iconShorthand = resolveShorthand(icon);\n  const contentShorthand = resolveShorthand(content, { required: true, defaultProps: { children: props.children } });\n  return {\n    components: {\n      root: 'button',\n      icon: 'span',\n      content: 'span',\n    },\n    root: getNativeElementProps('button', {\n      ref: useMergedRefs(ref, innerRef),\n      role: 'tab',\n      ...props,\n      disabled,\n      onClick,\n    }),\n    icon: iconShorthand,\n    iconOnly: Boolean(iconShorthand?.children && !contentShorthand.children),\n    content: contentShorthand,\n    appearance,\n    disabled,\n    selected,\n    size,\n    value,\n    vertical,\n  };\n};\n"],"sourceRoot":"../src/"}

package/lib/components/Tab/useTabAnimatedIndicator.d.ts

@@ -0,0 +1,5 @@
+import type { TabState } from './Tab.types';
+/**
+ * Adds additional styling to the active tab selection indicator to create a sliding animation.
+ */
+export declare const useTabAnimatedIndicatorStyles_unstable: (state: TabState) => TabState;