@fluentui/react-tabs 9.0.0-beta.9 → 9.0.0-rc.2

package/CHANGELOG.json

@@ -2,7 +2,237 @@
   "name": "@fluentui/react-tabs",
   "entries": [
     {
-      "date": "Tue, 19 Apr 2022 19:14:06 GMT",
+      "date": "Mon, 23 May 2022 12:10:14 GMT",
+      "tag": "@fluentui/react-tabs_v9.0.0-rc.2",
+      "version": "9.0.0-rc.2",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "gcox@microsoft.com",
+            "package": "@fluentui/react-tabs",
+            "commit": "5a4a2c6b1ed8d4c2abb12a08d1abec71e9055ce6",
+            "comment": "Removed TabListCommons and TabCommons types"
+          },
+          {
+            "author": "gcox@microsoft.com",
+            "package": "@fluentui/react-tabs",
+            "commit": "58c5aafd8deb82eaf1ff117d9e2c9029f5658168",
+            "comment": "Removed flexgap from useTabStyles"
+          },
+          {
+            "author": "gcox@microsoft.com",
+            "package": "@fluentui/react-tabs",
+            "commit": "3460b40b4faf6c8939680f69878446da23ea20f9",
+            "comment": "Updated to focus on current selected tab"
+          },
+          {
+            "author": "gcox@microsoft.com",
+            "package": "@fluentui/react-tabs",
+            "commit": "447a9aa0c3527d42bd071e63777b7afa1a14b273",
+            "comment": "Used background rather than border"
+          },
+          {
+            "author": "gcox@microsoft.com",
+            "package": "@fluentui/react-tabs",
+            "commit": "083e54e4374c25be4200c27922c16621431bb2bc",
+            "comment": "Moved react-tabs to stable and rc.1"
+          },
+          {
+            "author": "martinhochel@microsoft.com",
+            "package": "@fluentui/react-tabs",
+            "commit": "e7b70cb06f4422e5574993fd2ad44d9073647417",
+            "comment": "feat: ship rolluped only dts"
+          },
+          {
+            "author": "olfedias@microsoft.com",
+            "package": "@fluentui/react-tabs",
+            "commit": "f120fe9160ad7311a87af0cfacd8d2fb26275e34",
+            "comment": "chore: Update Griffel to latest version"
+          },
+          {
+            "author": "gcox@microsoft.com",
+            "package": "@fluentui/react-tabs",
+            "commit": "42e0900f7a008d83fdca5a6e5620f49951ecedf1",
+            "comment": "Remove overflow to allow focus outline to display"
+          },
+          {
+            "author": "olfedias@microsoft.com",
+            "package": "@fluentui/react-tabs",
+            "commit": "60804cec07a495b8a5d1fc66338bf0443b212144",
+            "comment": "chore: Update Griffel to latest version"
+          },
+          {
+            "author": "gcox@microsoft.com",
+            "package": "@fluentui/react-tabs",
+            "commit": "48bc32c6df6279b46ba94aab16f8bf650b17bd1e",
+            "comment": "Add aria-label for icon only story"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabs",
+            "comment": "Bump @fluentui/react-context-selector to v9.0.0-rc.9",
+            "commit": "8d58f08997acf595e3eb7f628123e7fa7830c394"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabs",
+            "comment": "Bump @fluentui/react-tabster to v9.0.0-rc.10",
+            "commit": "8d58f08997acf595e3eb7f628123e7fa7830c394"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabs",
+            "comment": "Bump @fluentui/react-theme to v9.0.0-rc.8",
+            "commit": "8d58f08997acf595e3eb7f628123e7fa7830c394"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabs",
+            "comment": "Bump @fluentui/react-utilities to v9.0.0-rc.9",
+            "commit": "8d58f08997acf595e3eb7f628123e7fa7830c394"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabs",
+            "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.6",
+            "commit": "8d58f08997acf595e3eb7f628123e7fa7830c394"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 05 May 2022 18:26:30 GMT",
+      "tag": "@fluentui/react-tabs_v9.0.0-beta.12",
+      "version": "9.0.0-beta.12",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabs",
+            "comment": "Bump @fluentui/react-context-selector to v9.0.0-rc.8",
+            "commit": "c5abb9c480ac94d12aa644d68d30773d77f2a159"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabs",
+            "comment": "Bump @fluentui/react-tabster to v9.0.0-rc.9",
+            "commit": "c5abb9c480ac94d12aa644d68d30773d77f2a159"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabs",
+            "comment": "Bump @fluentui/react-theme to v9.0.0-rc.7",
+            "commit": "c5abb9c480ac94d12aa644d68d30773d77f2a159"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabs",
+            "comment": "Bump @fluentui/react-utilities to v9.0.0-rc.8",
+            "commit": "c5abb9c480ac94d12aa644d68d30773d77f2a159"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabs",
+            "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.5",
+            "commit": "c5abb9c480ac94d12aa644d68d30773d77f2a159"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 04 May 2022 13:26:52 GMT",
+      "tag": "@fluentui/react-tabs_v9.0.0-beta.11",
+      "version": "9.0.0-beta.11",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "gcox@microsoft.com",
+            "package": "@fluentui/react-tabs",
+            "commit": "97939a4e5f523b3ef05c815f909819701eee92ea",
+            "comment": "Added aria-selected"
+          },
+          {
+            "author": "gcox@microsoft.com",
+            "package": "@fluentui/react-tabs",
+            "commit": "c2562b5382305152a09402a367ec853d603438e7",
+            "comment": "Updated to use correct pseudo-elements"
+          },
+          {
+            "author": "gcox@microsoft.com",
+            "package": "@fluentui/react-tabs",
+            "commit": "6c764b820241483c1a9a6e225f758a4c8d4b060e",
+            "comment": "Updated to use tokens"
+          },
+          {
+            "author": "gcox@microsoft.com",
+            "package": "@fluentui/react-tabs",
+            "commit": "55e2b1b53e81efa510a5bc15c6ab0398b52ace7f",
+            "comment": "Removed unnecessary width and height from indicators"
+          },
+          {
+            "author": "gcox@microsoft.com",
+            "package": "@fluentui/react-tabs",
+            "commit": "17ed5008371df7344540af658209840985dc4754",
+            "comment": "Allow tab to animate when value is numeric zero"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabs",
+            "comment": "Bump @fluentui/react-context-selector to v9.0.0-rc.7",
+            "commit": "65f94192ed3b2cde7e52b9c7e12d6f38b81965dd"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabs",
+            "comment": "Bump @fluentui/react-tabster to v9.0.0-rc.8",
+            "commit": "65f94192ed3b2cde7e52b9c7e12d6f38b81965dd"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabs",
+            "comment": "Bump @fluentui/react-theme to v9.0.0-rc.6",
+            "commit": "65f94192ed3b2cde7e52b9c7e12d6f38b81965dd"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabs",
+            "comment": "Bump @fluentui/react-utilities to v9.0.0-rc.7",
+            "commit": "65f94192ed3b2cde7e52b9c7e12d6f38b81965dd"
+          }
+        ],
+        "none": [
+          {
+            "author": "tristan.watanabe@gmail.com",
+            "package": "@fluentui/react-tabs",
+            "commit": "f1c470c25de01baef3180067fa99dcc10ec9ebd5",
+            "comment": "react-tabs: Move to new common folder."
+          }
+        ]
+      }
+    },
+    {
+      "date": "Mon, 25 Apr 2022 09:32:15 GMT",
+      "tag": "@fluentui/react-tabs_v9.0.0-beta.10",
+      "version": "9.0.0-beta.10",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "gcox@microsoft.com",
+            "package": "@fluentui/react-tabs",
+            "commit": "9b558cf266817f6499fece14e71bd90e98385a6b",
+            "comment": "Added styles to support future overflow calcs"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabs",
+            "comment": "Bump @fluentui/react-tabster to v9.0.0-rc.7",
+            "commit": "02ca1d3c198452c1693067f5f18bd01b2ed5d6e6"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 19 Apr 2022 19:16:56 GMT",
       "tag": "@fluentui/react-tabs_v9.0.0-beta.9",
       "version": "9.0.0-beta.9",
       "comments": {
@@ -65,31 +295,31 @@
             "author": "beachball",
             "package": "@fluentui/react-tabs",
             "comment": "Bump @fluentui/react-context-selector to v9.0.0-rc.6",
-            "commit": "9c8592decacb9f7b1dc608a03c9f991918806008"
+            "commit": "f94b48c825ca8c8b2e3b6755bdd29fe15c7d435d"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-tabs",
             "comment": "Bump @fluentui/react-tabster to v9.0.0-rc.6",
-            "commit": "9c8592decacb9f7b1dc608a03c9f991918806008"
+            "commit": "f94b48c825ca8c8b2e3b6755bdd29fe15c7d435d"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-tabs",
             "comment": "Bump @fluentui/react-theme to v9.0.0-rc.5",
-            "commit": "9c8592decacb9f7b1dc608a03c9f991918806008"
+            "commit": "f94b48c825ca8c8b2e3b6755bdd29fe15c7d435d"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-tabs",
             "comment": "Bump @fluentui/react-utilities to v9.0.0-rc.6",
-            "commit": "9c8592decacb9f7b1dc608a03c9f991918806008"
+            "commit": "f94b48c825ca8c8b2e3b6755bdd29fe15c7d435d"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-tabs",
             "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.4",
-            "commit": "9c8592decacb9f7b1dc608a03c9f991918806008"
+            "commit": "f94b48c825ca8c8b2e3b6755bdd29fe15c7d435d"
           }
         ],
         "none": [

package/CHANGELOG.md

@@ -1,12 +1,75 @@
 # Change Log - @fluentui/react-tabs
 
-This log was last generated on Tue, 19 Apr 2022 19:14:06 GMT and should not be manually modified.
+This log was last generated on Mon, 23 May 2022 12:10:14 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.0-rc.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabs_v9.0.0-rc.2)
+
+Mon, 23 May 2022 12:10:14 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabs_v9.0.0-beta.12..@fluentui/react-tabs_v9.0.0-rc.2)
+
+### Changes
+
+- Removed TabListCommons and TabCommons types ([PR #22922](https://github.com/microsoft/fluentui/pull/22922) by gcox@microsoft.com)
+- Removed flexgap from useTabStyles ([PR #22920](https://github.com/microsoft/fluentui/pull/22920) by gcox@microsoft.com)
+- Updated to focus on current selected tab ([PR #22900](https://github.com/microsoft/fluentui/pull/22900) by gcox@microsoft.com)
+- Used background rather than border ([PR #22869](https://github.com/microsoft/fluentui/pull/22869) by gcox@microsoft.com)
+- Moved react-tabs to stable and rc.1 ([PR #22923](https://github.com/microsoft/fluentui/pull/22923) by gcox@microsoft.com)
+- feat: ship rolluped only dts ([PR #22828](https://github.com/microsoft/fluentui/pull/22828) by martinhochel@microsoft.com)
+- chore: Update Griffel to latest version ([PR #22894](https://github.com/microsoft/fluentui/pull/22894) by olfedias@microsoft.com)
+- Remove overflow to allow focus outline to display ([PR #22897](https://github.com/microsoft/fluentui/pull/22897) by gcox@microsoft.com)
+- chore: Update Griffel to latest version ([PR #23029](https://github.com/microsoft/fluentui/pull/23029) by olfedias@microsoft.com)
+- Add aria-label for icon only story ([PR #22898](https://github.com/microsoft/fluentui/pull/22898) by gcox@microsoft.com)
+- Bump @fluentui/react-context-selector to v9.0.0-rc.9 ([PR #23030](https://github.com/microsoft/fluentui/pull/23030) by beachball)
+- Bump @fluentui/react-tabster to v9.0.0-rc.10 ([PR #23030](https://github.com/microsoft/fluentui/pull/23030) by beachball)
+- Bump @fluentui/react-theme to v9.0.0-rc.8 ([PR #23030](https://github.com/microsoft/fluentui/pull/23030) by beachball)
+- Bump @fluentui/react-utilities to v9.0.0-rc.9 ([PR #23030](https://github.com/microsoft/fluentui/pull/23030) by beachball)
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.6 ([PR #23030](https://github.com/microsoft/fluentui/pull/23030) by beachball)
+
+## [9.0.0-beta.12](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabs_v9.0.0-beta.12)
+
+Thu, 05 May 2022 18:26:30 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabs_v9.0.0-beta.11..@fluentui/react-tabs_v9.0.0-beta.12)
+
+### Changes
+
+- Bump @fluentui/react-context-selector to v9.0.0-rc.8 ([PR #22857](https://github.com/microsoft/fluentui/pull/22857) by beachball)
+- Bump @fluentui/react-tabster to v9.0.0-rc.9 ([PR #22857](https://github.com/microsoft/fluentui/pull/22857) by beachball)
+- Bump @fluentui/react-theme to v9.0.0-rc.7 ([PR #22857](https://github.com/microsoft/fluentui/pull/22857) by beachball)
+- Bump @fluentui/react-utilities to v9.0.0-rc.8 ([PR #22857](https://github.com/microsoft/fluentui/pull/22857) by beachball)
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.5 ([PR #22857](https://github.com/microsoft/fluentui/pull/22857) by beachball)
+
+## [9.0.0-beta.11](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabs_v9.0.0-beta.11)
+
+Wed, 04 May 2022 13:26:52 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabs_v9.0.0-beta.10..@fluentui/react-tabs_v9.0.0-beta.11)
+
+### Changes
+
+- Added aria-selected ([PR #22742](https://github.com/microsoft/fluentui/pull/22742) by gcox@microsoft.com)
+- Updated to use correct pseudo-elements ([PR #22768](https://github.com/microsoft/fluentui/pull/22768) by gcox@microsoft.com)
+- Updated to use tokens ([PR #22717](https://github.com/microsoft/fluentui/pull/22717) by gcox@microsoft.com)
+- Removed unnecessary width and height from indicators ([PR #22744](https://github.com/microsoft/fluentui/pull/22744) by gcox@microsoft.com)
+- Allow tab to animate when value is numeric zero ([PR #22754](https://github.com/microsoft/fluentui/pull/22754) by gcox@microsoft.com)
+- Bump @fluentui/react-context-selector to v9.0.0-rc.7 ([PR #22786](https://github.com/microsoft/fluentui/pull/22786) by beachball)
+- Bump @fluentui/react-tabster to v9.0.0-rc.8 ([PR #22786](https://github.com/microsoft/fluentui/pull/22786) by beachball)
+- Bump @fluentui/react-theme to v9.0.0-rc.6 ([PR #22786](https://github.com/microsoft/fluentui/pull/22786) by beachball)
+- Bump @fluentui/react-utilities to v9.0.0-rc.7 ([PR #22786](https://github.com/microsoft/fluentui/pull/22786) by beachball)
+
+## [9.0.0-beta.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabs_v9.0.0-beta.10)
+
+Mon, 25 Apr 2022 09:32:15 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabs_v9.0.0-beta.9..@fluentui/react-tabs_v9.0.0-beta.10)
+
+### Changes
+
+- Added styles to support future overflow calcs ([PR #22548](https://github.com/microsoft/fluentui/pull/22548) by gcox@microsoft.com)
+- Bump @fluentui/react-tabster to v9.0.0-rc.7 ([PR #22601](https://github.com/microsoft/fluentui/pull/22601) by beachball)
+
 ## [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 
+Tue, 19 Apr 2022 19:16:56 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
@@ -20,15 +83,15 @@ Tue, 19 Apr 2022 19:14:06 GMT
 - 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)
+- Bump @fluentui/react-context-selector to v9.0.0-rc.6 ([PR #21995](https://github.com/microsoft/fluentui/pull/21995) by beachball)
+- Bump @fluentui/react-tabster to v9.0.0-rc.6 ([PR #21995](https://github.com/microsoft/fluentui/pull/21995) by beachball)
+- Bump @fluentui/react-theme to v9.0.0-rc.5 ([PR #21995](https://github.com/microsoft/fluentui/pull/21995) by beachball)
+- Bump @fluentui/react-utilities to v9.0.0-rc.6 ([PR #21995](https://github.com/microsoft/fluentui/pull/21995) by beachball)
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.4 ([PR #21995](https://github.com/microsoft/fluentui/pull/21995) 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:17:30 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
@@ -41,7 +104,7 @@ Fri, 04 Mar 2022 05:17:30 GMT
 
 ## [9.0.0-beta.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabs_v9.0.0-beta.7)
 
-Tue, 01 Mar 2022 02:17:39 GMT 
+Tue, 01 Mar 2022 02:17:39 GMT
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabs_v9.0.0-beta.6..@fluentui/react-tabs_v9.0.0-beta.7)
 
 ### Changes
@@ -53,7 +116,7 @@ Tue, 01 Mar 2022 02:17:39 GMT
 
 ## [9.0.0-beta.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabs_v9.0.0-beta.6)
 
-Fri, 18 Feb 2022 13:35:35 GMT 
+Fri, 18 Feb 2022 13:35:35 GMT
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabs_v9.0.0-beta.4..@fluentui/react-tabs_v9.0.0-beta.6)
 
 ### Changes

package/dist/{react-tabs.d.ts → index.d.ts}

@@ -37,18 +37,6 @@ 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 tab list provides single selection from a set of tabs.
  */
@@ -58,42 +46,7 @@ export declare const tabListClassName: string;
 
 export declare const tabListClassNames: SlotClassNames<TabListSlots>;
 
-declare type TabListCommons = {
-    /**
-     * A tab list can supports 'transparent' and 'subtle' appearance.
-     *- 'subtle': Minimizes emphasis to blend into the background until hovered or focused.
-     *- 'transparent': No background and border styling
-     * The appearance affects each of the contained tabs.
-     * @default 'transparent'
-     */
-    appearance?: 'transparent' | 'subtle';
-    /**
-     * A tab list can be set to disable interaction.
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * Raised when a tab is selected.
-     */
-    onTabSelect?: SelectTabEventHandler;
-    /**
-     * The value of the currently selected tab.
-     */
-    selectedValue?: TabValue;
-    /**
-     * A tab list can be either 'small' or 'medium' size.
-     * The size affects each of the contained tabs.
-     * @default 'medium'
-     */
-    size?: 'small' | 'medium';
-    /**
-     * A tab list can arrange its tabs vertically.
-     * @default false
-     */
-    vertical?: boolean;
-};
-
-export declare type TabListContextValue = Pick<TabListCommons, 'onTabSelect' | 'selectedValue'> & Required<Pick<TabListCommons, 'appearance' | 'disabled' | 'size' | 'vertical'>> & {
+export declare type TabListContextValue = Pick<TabListProps, 'onTabSelect' | 'selectedValue'> & Required<Pick<TabListProps, '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. */
@@ -125,12 +78,44 @@ export declare type TabListContextValues = {
 /**
  * TabList Props
  */
-export declare type TabListProps = ComponentProps<TabListSlots> & TabListCommons & {
+export declare type TabListProps = ComponentProps<TabListSlots> & {
+    /**
+     * A tab list can supports 'transparent' and 'subtle' appearance.
+     *- 'subtle': Minimizes emphasis to blend into the background until hovered or focused.
+     *- 'transparent': No background and border styling
+     * The appearance affects each of the contained tabs.
+     * @default 'transparent'
+     */
+    appearance?: 'transparent' | 'subtle';
     /**
      * The value of the tab to be selected by default.
      * Typically useful when the selectedValue is uncontrolled.
      */
     defaultSelectedValue?: TabValue;
+    /**
+     * A tab list can be set to disable interaction.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Raised when a tab is selected.
+     */
+    onTabSelect?: SelectTabEventHandler;
+    /**
+     * The value of the currently selected tab.
+     */
+    selectedValue?: TabValue;
+    /**
+     * A tab list can be either 'small' or 'medium' size.
+     * The size affects each of the contained tabs.
+     * @default 'medium'
+     */
+    size?: 'small' | 'medium';
+    /**
+     * A tab list can arrange its tabs vertically.
+     * @default false
+     */
+    vertical?: boolean;
 };
 
 export declare type TabListSlots = {
@@ -148,7 +133,17 @@ export declare type TabListState = ComponentState<Required<TabListSlots>> & TabL
 /**
  * Tab Props
  */
-export declare type TabProps = ComponentProps<Partial<TabSlots>> & TabCommons;
+export declare type TabProps = ComponentProps<Partial<TabSlots>> & {
+    /**
+     * A tab can be set to disable interaction.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * The value that identifies this tab when selected.
+     */
+    value: TabValue;
+};
 
 export declare type TabRegisterData = {
     /**
@@ -180,7 +175,7 @@ export declare type TabSlots = {
 /**
  * State used in rendering Tab
  */
-export declare type TabState = ComponentState<TabSlots> & Omit<TabCommons, 'disabled'> & Required<Pick<TabCommons, 'disabled'>> & {
+export declare type TabState = ComponentState<TabSlots> & Pick<TabProps, 'value'> & Required<Pick<TabProps, 'disabled'>> & {
     /**
      * A tab supports 'transparent' and 'subtle' appearance.
      */

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<'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"]}
+{"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\n/**\n * Tab Props\n */\nexport type TabProps = ComponentProps<Partial<TabSlots>> & {\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 * State used in rendering Tab\n */\nexport type TabState = ComponentState<TabSlots> &\n  Pick<TabProps, 'value'> &\n  Required<Pick<TabProps, '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/useTab.js

@@ -60,6 +60,9 @@ export const useTab_unstable = (props, ref) => {
     root: getNativeElementProps('button', {
       ref: useMergedRefs(ref, innerRef),
       role: 'tab',
+      // aria-selected undefined indicates it is not selectable
+      // according to https://www.w3.org/TR/wai-aria-1.1/#aria-selected
+      'aria-selected': disabled ? undefined : `${selected}`,
       ...props,
       disabled,
       onClick

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Tab/useTab.ts"],"names":[],"mappings":"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","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/"}
+{"version":3,"sources":["components/Tab/useTab.ts"],"names":[],"mappings":"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","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      // aria-selected undefined indicates it is not selectable\n      // according to https://www.w3.org/TR/wai-aria-1.1/#aria-selected\n      'aria-selected': disabled ? undefined : `${selected}`,\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.js

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { __styles, mergeClasses, shorthands } from '@griffel/react';
-import { pendingAnimationDurationTokens, pendingAnimationEasingTokens } from '../../tab.constants';
 import { useContextSelector } from '@fluentui/react-context-selector';
-import { TabListContext } from '../TabList/TabListContext'; // eslint-disable-next-line @typescript-eslint/naming-convention
+import { TabListContext } from '../TabList/TabListContext';
+import { tokens } from '@fluentui/react-theme'; // eslint-disable-next-line @typescript-eslint/naming-convention
 
 const tabIndicatorCssVars_unstable = {
   offsetVar: '--fui-Tab__indicator--offset',
@@ -16,8 +16,8 @@ const useActiveIndicatorStyles = /*#__PURE__*/__styles({
   },
   "animated": {
     "wbfbqe": "fopw4to",
-    "mafdb0": "f8wx3i3",
-    "Jgwf15": "fgw312z",
+    "mafdb0": "f1gswng4",
+    "Jgwf15": "fjw9r1k",
     "Bh4j9q1": "f1cif4e6",
     "Gk6w4d": "fa42t5a"
   },
@@ -30,7 +30,7 @@ const useActiveIndicatorStyles = /*#__PURE__*/__styles({
     "xn0juu": "fwvsziq"
   }
 }, {
-  "d": [".f1mtd64y{overflow-x:visible;}", ".f1y7q3j9{overflow-y:visible;}", ".fopw4to:after{transition-property:transform;}", ".f8wx3i3:after{transition-duration:300ms;}", ".fgw312z:after{transition-timing-function:cubic-bezier(0,0,0,1);}", ".f1g89gis:after{transform-origin:left;}", ".fcjnwxz:after{transform-origin:right;}", ".f7m34ad:after{-webkit-transform:translateX(var(--fui-Tab__indicator--offset)) scaleX(var(--fui-Tab__indicator--scale));-moz-transform:translateX(var(--fui-Tab__indicator--offset)) scaleX(var(--fui-Tab__indicator--scale));-ms-transform:translateX(var(--fui-Tab__indicator--offset)) scaleX(var(--fui-Tab__indicator--scale));transform:translateX(var(--fui-Tab__indicator--offset)) scaleX(var(--fui-Tab__indicator--scale));}", ".fqfgdei:after{transform-origin:top;}", ".fwvsziq:after{-webkit-transform:translateY(var(--fui-Tab__indicator--offset)) scaleY(var(--fui-Tab__indicator--scale));-moz-transform:translateY(var(--fui-Tab__indicator--offset)) scaleY(var(--fui-Tab__indicator--scale));-ms-transform:translateY(var(--fui-Tab__indicator--offset)) scaleY(var(--fui-Tab__indicator--scale));transform:translateY(var(--fui-Tab__indicator--offset)) scaleY(var(--fui-Tab__indicator--scale));}"],
+  "d": [".f1mtd64y{overflow-x:visible;}", ".f1y7q3j9{overflow-y:visible;}", ".fopw4to:after{transition-property:transform;}", ".f1gswng4:after{transition-duration:var(--durationSlow);}", ".fjw9r1k:after{transition-timing-function:var(--curveDecelerateMax);}", ".f1g89gis:after{transform-origin:left;}", ".fcjnwxz:after{transform-origin:right;}", ".f7m34ad:after{-webkit-transform:translateX(var(--fui-Tab__indicator--offset)) scaleX(var(--fui-Tab__indicator--scale));-moz-transform:translateX(var(--fui-Tab__indicator--offset)) scaleX(var(--fui-Tab__indicator--scale));-ms-transform:translateX(var(--fui-Tab__indicator--offset)) scaleX(var(--fui-Tab__indicator--scale));transform:translateX(var(--fui-Tab__indicator--offset)) scaleX(var(--fui-Tab__indicator--scale));}", ".fqfgdei:after{transform-origin:top;}", ".fwvsziq:after{-webkit-transform:translateY(var(--fui-Tab__indicator--offset)) scaleY(var(--fui-Tab__indicator--scale));-moz-transform:translateY(var(--fui-Tab__indicator--offset)) scaleY(var(--fui-Tab__indicator--scale));-ms-transform:translateY(var(--fui-Tab__indicator--offset)) scaleY(var(--fui-Tab__indicator--scale));transform:translateY(var(--fui-Tab__indicator--offset)) scaleY(var(--fui-Tab__indicator--scale));}"],
   "t": ["@media (prefers-reduced-motion: reduce){.f1cif4e6:after{transition-property:none;}}", "@media (prefers-reduced-motion: reduce){.fa42t5a:after{transition-duration:0.01ms;}}"]
 });
 
@@ -59,7 +59,7 @@ const calculateTabRect = element => {
 const getRegisteredTabRect = (registeredTabs, value) => {
   var _a;
 
-  const element = value ? (_a = registeredTabs[JSON.stringify(value)]) === null || _a === void 0 ? void 0 : _a.ref.current : undefined;
+  const element = value !== undefined && value !== null ? (_a = registeredTabs[JSON.stringify(value)]) === null || _a === void 0 ? void 0 : _a.ref.current : undefined;
   return element ? calculateTabRect(element) : undefined;
 };
 /**