@fluentui-react-native/tester 0.151.17 → 0.151.18

package/CHANGELOG.json

@@ -2,7 +2,28 @@
   "name": "@fluentui-react-native/tester",
   "entries": [
     {
-      "date": "Wed, 02 Aug 2023 16:50:18 GMT",
+      "date": "Thu, 03 Aug 2023 21:18:52 GMT",
+      "version": "0.151.18",
+      "tag": "@fluentui-react-native/tester_v0.151.18",
+      "comments": {
+        "patch": [
+          {
+            "author": "winlarry@microsoft.com",
+            "package": "@fluentui-react-native/tester",
+            "commit": "e921fe55b5d10f26ea0418c851f6bc04631aa78c",
+            "comment": "Add examples to test page"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui-react-native/tester",
+            "comment": "Bump @fluentui-react-native/tablist to v0.3.4",
+            "commit": "not available"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 02 Aug 2023 16:51:10 GMT",
       "version": "0.151.17",
       "tag": "@fluentui-react-native/tester_v0.151.17",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,21 @@
 # Change Log - @fluentui-react-native/tester
 
-This log was last generated on Wed, 02 Aug 2023 16:50:18 GMT and should not be manually modified.
+This log was last generated on Thu, 03 Aug 2023 21:18:52 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 0.151.18
+
+Thu, 03 Aug 2023 21:18:52 GMT
+
+### Patches
+
+- Add examples to test page (winlarry@microsoft.com)
+- Bump @fluentui-react-native/tablist to v0.3.4
+
 ## 0.151.17
 
-Wed, 02 Aug 2023 16:50:18 GMT
+Wed, 02 Aug 2023 16:51:10 GMT
 
 ### Patches
 

package/lib/fluent-tester/src/TestComponents/TabList/TabListTest.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TabListTest.d.ts","sourceRoot":"","sources":["../../../../../src/TestComponents/TabList/TabListTest.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAiI1B,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,iBAY/B,CAAC"}
+{"version":3,"file":"TabListTest.d.ts","sourceRoot":"","sources":["../../../../../src/TestComponents/TabList/TabListTest.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAgN1B,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,iBAY/B,CAAC"}

package/lib/fluent-tester/src/TestComponents/TabList/TabListTest.js

@@ -1,93 +1,147 @@
 import React from 'react';
-import { View, StyleSheet } from 'react-native';
+import { View } from 'react-native';
+import { ButtonV1 as Button } from '@fluentui-react-native/button';
 import { Divider } from '@fluentui-react-native/divider';
+import { Menu, MenuTrigger, MenuList, MenuItem, MenuPopover } from '@fluentui-react-native/menu';
 import { TabList, Tab } from '@fluentui-react-native/tablist';
 import { TextV1 as Text } from '@fluentui-react-native/text';
+import { svgProps, fontProps } from '../Common/iconExamples';
+import { stackStyle } from '../Common/styles';
 import { Test } from '../Test';
-var Header = Text.customize({ variant: 'subheaderStandard' });
+var SubHeader = Text.customize({ variant: 'subheaderStandard' });
+var Header = Text.customize({ variant: 'headerStandard' });
 var Line = Divider.customize({ paddingVertical: 4 });
 var PaddedTabList = TabList.customize({
     paddingVertical: 4,
 });
-var styles = StyleSheet.create({
-    container: {
-        paddingVertical: 8,
-    },
-});
-var TabListSizeTest = function () {
-    return (React.createElement(View, { style: styles.container },
-        React.createElement(Header, null, "Small"),
-        React.createElement(PaddedTabList, { size: "small" },
-            React.createElement(Tab, { tabKey: "hello" }, "Tab 1"),
-            React.createElement(Tab, { tabKey: "world" }, "Tab 2")),
+var TabListDefaultTest = function () {
+    var _a = React.useState('tab1'), key = _a[0], setKey = _a[1];
+    return (React.createElement(View, { style: stackStyle },
+        React.createElement(Header, null, "Uncontrolled Component"),
         React.createElement(Line, null),
-        React.createElement(Header, null, "Medium (default)"),
-        React.createElement(PaddedTabList, { size: "medium" },
-            React.createElement(Tab, { tabKey: "hello" }, "Tab 1"),
-            React.createElement(Tab, { tabKey: "world" }, "Tab 2")),
+        React.createElement(PaddedTabList, { defaultSelectedKey: 'tab1' },
+            React.createElement(Tab, { tabKey: "tab1" }, "Tab 1"),
+            React.createElement(Tab, { tabKey: "tab2" }, "Tab 2"),
+            React.createElement(Tab, { tabKey: "tab3" }, "Tab 3")),
+        React.createElement(Header, null, "Controlled Component"),
         React.createElement(Line, null),
-        React.createElement(Header, null, "Large"),
-        React.createElement(PaddedTabList, { size: "large" },
-            React.createElement(Tab, { tabKey: "hello" }, "Tab 1"),
-            React.createElement(Tab, { tabKey: "world" }, "Tab 2"))));
-};
-var TabListVerticalTest = function () {
-    return (React.createElement(TabList, { vertical: true },
-        React.createElement(Tab, { tabKey: "hello" }, "Tab 1"),
-        React.createElement(Tab, { tabKey: "world" }, "Tab 2")));
-};
-var TabListAppearanceTest = function () {
-    return (React.createElement(View, { style: styles.container },
-        React.createElement(Header, null, "Transparent Appearance"),
-        React.createElement(PaddedTabList, { appearance: "transparent" },
-            React.createElement(Tab, { tabKey: "hello" }, "Tab 1"),
-            React.createElement(Tab, { tabKey: "world" }, "Tab 2")),
-        React.createElement(Header, null, "Subtle Appearance"),
-        React.createElement(PaddedTabList, { appearance: "subtle" },
-            React.createElement(Tab, { tabKey: "hello" }, "Tab 1"),
-            React.createElement(Tab, { tabKey: "world" }, "Tab 2"))));
+        React.createElement(Text, null,
+            "Selected Key: ",
+            key),
+        React.createElement(PaddedTabList, { selectedKey: key, onTabSelect: function (val) {
+                console.log('New key:', val);
+                setKey(val);
+            } },
+            React.createElement(Tab, { tabKey: "tab1" }, "Tab 1"),
+            React.createElement(Tab, { tabKey: "tab2" }, "Tab 2"),
+            React.createElement(Tab, { tabKey: "tab3" }, "Tab 3"))));
 };
 var TabListDisabledTest = function () {
-    return (React.createElement(View, null,
-        React.createElement(PaddedTabList, null,
-            React.createElement(Tab, { disabled: true, tabKey: "hello" }, "Tab 1"),
-            React.createElement(Tab, { tabKey: "world" }, "Tab 2")),
+    return (React.createElement(View, { style: stackStyle },
+        React.createElement(PaddedTabList, { defaultSelectedKey: "tab2" },
+            React.createElement(Tab, { disabled: true, tabKey: "tab1" }, "Tab 1"),
+            React.createElement(Tab, { tabKey: "tab2" }, "Tab 2"),
+            React.createElement(Tab, { disabled: true, tabKey: "tab3" }, "Tab 3"),
+            React.createElement(Tab, { tabKey: "tab4" }, "Tab 4")),
         React.createElement(PaddedTabList, { disabled: true },
-            React.createElement(Tab, { tabKey: "hello" }, "Tab 1"),
-            React.createElement(Tab, { tabKey: "world" }, "Tab 2"))));
+            React.createElement(Tab, { tabKey: "tab1" }, "Tab 1"),
+            React.createElement(Tab, { tabKey: "tab2" }, "Tab 2"),
+            React.createElement(Tab, { tabKey: "tab3" }, "Tab 3"))));
+};
+var TabListVariantsTest = function () {
+    return (React.createElement(View, { style: stackStyle },
+        React.createElement(Header, null, "Size Variants"),
+        React.createElement(Line, null),
+        React.createElement(SubHeader, null, "Small"),
+        React.createElement(PaddedTabList, { defaultSelectedKey: "sm1", size: "small" },
+            React.createElement(Tab, { tabKey: "sm1" }, "Small Tab 1"),
+            React.createElement(Tab, { tabKey: "sm2" }, "Small Tab 2"),
+            React.createElement(Tab, { tabKey: "sm3" }, "Small Tab 3")),
+        React.createElement(SubHeader, null, "Medium (default)"),
+        React.createElement(PaddedTabList, { defaultSelectedKey: "m1", size: "medium" },
+            React.createElement(Tab, { tabKey: "m1" }, "Medium Tab 1"),
+            React.createElement(Tab, { tabKey: "m2" }, "Medium Tab 2"),
+            React.createElement(Tab, { tabKey: "m3" }, "Medium Tab 3")),
+        React.createElement(SubHeader, null, "Large"),
+        React.createElement(PaddedTabList, { defaultSelectedKey: "lg1", size: "large" },
+            React.createElement(Tab, { tabKey: "lg1" }, "Large Tab 1"),
+            React.createElement(Tab, { tabKey: "lg2" }, "Large Tab 2"),
+            React.createElement(Tab, { tabKey: "lg3" }, "Large Tab 3")),
+        React.createElement(Header, null, "Appearance"),
+        React.createElement(Line, null),
+        React.createElement(SubHeader, null, "Transparent Appearance"),
+        React.createElement(PaddedTabList, { defaultSelectedKey: "tab1", appearance: "transparent" },
+            React.createElement(Tab, { tabKey: "tab1" }, "Tab 1"),
+            React.createElement(Tab, { tabKey: "tab2" }, "Tab 2"),
+            React.createElement(Tab, { tabKey: "tab3" }, "Tab 3")),
+        React.createElement(SubHeader, null, "Subtle Appearance"),
+        React.createElement(PaddedTabList, { defaultSelectedKey: "tab1", appearance: "subtle" },
+            React.createElement(Tab, { tabKey: "tab1" }, "Tab 1"),
+            React.createElement(Tab, { tabKey: "tab2" }, "Tab 2"),
+            React.createElement(Tab, { tabKey: "tab3" }, "Tab 3")),
+        React.createElement(Header, null, "Vertical Orientation"),
+        React.createElement(Line, null),
+        React.createElement(PaddedTabList, { defaultSelectedKey: "tab1", vertical: true },
+            React.createElement(Tab, { tabKey: "tab1" }, "Tab 1"),
+            React.createElement(Tab, { tabKey: "tab2" }, "Tab 2"),
+            React.createElement(Tab, { tabKey: "tab3" }, "Tab 3"))));
 };
 var TabListIconTest = function () {
-    var iconProp = {
-        fontSource: {
-            fontFamily: 'Arial',
-            codepoint: 0x2663,
-        },
-    };
-    return (React.createElement(TabList, null,
-        React.createElement(Tab, { icon: iconProp, tabKey: "withIcon" }, "Tab Item"),
-        React.createElement(Tab, { icon: iconProp, tabKey: "iconOnly" })));
+    return (React.createElement(View, { style: stackStyle },
+        React.createElement(TabList, { defaultSelectedKey: "fontIcon" },
+            React.createElement(Tab, { icon: { fontSource: fontProps }, tabKey: "fontIcon" }, "Font Icon"),
+            React.createElement(Tab, { icon: { fontSource: fontProps }, tabKey: "fontIconOnly" }),
+            React.createElement(Tab, { icon: { svgSource: svgProps }, tabKey: "svgIcon" }, "SVG Icon"),
+            React.createElement(Tab, { icon: { svgSource: svgProps }, tabKey: "svgIconOnly" }))));
+};
+var TabListViewTest = function () {
+    var _a = React.useState('a'), key = _a[0], setKey = _a[1];
+    var views = React.useMemo(function () { return ({
+        a: (React.createElement(View, null,
+            React.createElement(SubHeader, null, "This is View 1"),
+            React.createElement(Text, { variant: "body1" }, "Here is some text."))),
+        b: (React.createElement(View, null,
+            React.createElement(SubHeader, null, "This is View 2"),
+            React.createElement(Button, null, "Button 1"))),
+        c: (React.createElement(View, null,
+            React.createElement(SubHeader, null, "This is View 3"),
+            React.createElement(Menu, null,
+                React.createElement(MenuTrigger, null,
+                    React.createElement(Button, null, "Menu")),
+                React.createElement(MenuPopover, null,
+                    React.createElement(MenuList, null,
+                        React.createElement(MenuItem, null, "Item 1"),
+                        React.createElement(MenuItem, null, "Item 2"),
+                        React.createElement(MenuItem, null, "Item 3")))))),
+    }); }, []);
+    return (React.createElement(View, { style: stackStyle },
+        React.createElement(TabList, { selectedKey: key, onTabSelect: setKey },
+            React.createElement(Tab, { tabKey: "a" }, "View 1"),
+            React.createElement(Tab, { tabKey: "b" }, "View 2"),
+            React.createElement(Tab, { tabKey: "c" }, "View 3")),
+        views[key]));
 };
 var sections = [
     {
-        name: 'Size',
-        component: TabListSizeTest,
-    },
-    {
-        name: 'Vertical',
-        component: TabListVerticalTest,
-    },
-    {
-        name: 'Appearance',
-        component: TabListAppearanceTest,
+        name: 'TabList Controlled vs Uncontrolled',
+        component: TabListDefaultTest,
     },
     {
         name: 'Disabled',
         component: TabListDisabledTest,
     },
+    {
+        name: 'Variants',
+        component: TabListVariantsTest,
+    },
     {
         name: 'Icon',
         component: TabListIconTest,
     },
+    {
+        name: 'Rendering Content Separately',
+        component: TabListViewTest,
+    },
 ];
 export var TabListTest = function () {
     var status = {

package/lib/fluent-tester/src/TestComponents/TabList/TabListTest.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabListTest.js","sourceRoot":"","sources":["../../../../../src/TestComponents/TabList/TabListTest.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"TabListTest.js","sourceRoot":"","sources":["../../../../../src/TestComponents/TabList/TabListTest.tsx"],"names":[],"mappings":"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"}

package/lib-commonjs/fluent-tester/src/TestComponents/TabList/TabListTest.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TabListTest.d.ts","sourceRoot":"","sources":["../../../../../src/TestComponents/TabList/TabListTest.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAiI1B,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,iBAY/B,CAAC"}
+{"version":3,"file":"TabListTest.d.ts","sourceRoot":"","sources":["../../../../../src/TestComponents/TabList/TabListTest.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAgN1B,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,iBAY/B,CAAC"}

package/lib-commonjs/fluent-tester/src/TestComponents/TabList/TabListTest.js

@@ -4,94 +4,148 @@ exports.TabListTest = void 0;
 var tslib_1 = require("tslib");
 var react_1 = tslib_1.__importDefault(require("react"));
 var react_native_1 = require("react-native");
+var button_1 = require("@fluentui-react-native/button");
 var divider_1 = require("@fluentui-react-native/divider");
+var menu_1 = require("@fluentui-react-native/menu");
 var tablist_1 = require("@fluentui-react-native/tablist");
 var text_1 = require("@fluentui-react-native/text");
+var iconExamples_1 = require("../Common/iconExamples");
+var styles_1 = require("../Common/styles");
 var Test_1 = require("../Test");
-var Header = text_1.TextV1.customize({ variant: 'subheaderStandard' });
+var SubHeader = text_1.TextV1.customize({ variant: 'subheaderStandard' });
+var Header = text_1.TextV1.customize({ variant: 'headerStandard' });
 var Line = divider_1.Divider.customize({ paddingVertical: 4 });
 var PaddedTabList = tablist_1.TabList.customize({
     paddingVertical: 4,
 });
-var styles = react_native_1.StyleSheet.create({
-    container: {
-        paddingVertical: 8,
-    },
-});
-var TabListSizeTest = function () {
-    return (react_1.default.createElement(react_native_1.View, { style: styles.container },
-        react_1.default.createElement(Header, null, "Small"),
-        react_1.default.createElement(PaddedTabList, { size: "small" },
-            react_1.default.createElement(tablist_1.Tab, { tabKey: "hello" }, "Tab 1"),
-            react_1.default.createElement(tablist_1.Tab, { tabKey: "world" }, "Tab 2")),
+var TabListDefaultTest = function () {
+    var _a = react_1.default.useState('tab1'), key = _a[0], setKey = _a[1];
+    return (react_1.default.createElement(react_native_1.View, { style: styles_1.stackStyle },
+        react_1.default.createElement(Header, null, "Uncontrolled Component"),
         react_1.default.createElement(Line, null),
-        react_1.default.createElement(Header, null, "Medium (default)"),
-        react_1.default.createElement(PaddedTabList, { size: "medium" },
-            react_1.default.createElement(tablist_1.Tab, { tabKey: "hello" }, "Tab 1"),
-            react_1.default.createElement(tablist_1.Tab, { tabKey: "world" }, "Tab 2")),
+        react_1.default.createElement(PaddedTabList, { defaultSelectedKey: 'tab1' },
+            react_1.default.createElement(tablist_1.Tab, { tabKey: "tab1" }, "Tab 1"),
+            react_1.default.createElement(tablist_1.Tab, { tabKey: "tab2" }, "Tab 2"),
+            react_1.default.createElement(tablist_1.Tab, { tabKey: "tab3" }, "Tab 3")),
+        react_1.default.createElement(Header, null, "Controlled Component"),
         react_1.default.createElement(Line, null),
-        react_1.default.createElement(Header, null, "Large"),
-        react_1.default.createElement(PaddedTabList, { size: "large" },
-            react_1.default.createElement(tablist_1.Tab, { tabKey: "hello" }, "Tab 1"),
-            react_1.default.createElement(tablist_1.Tab, { tabKey: "world" }, "Tab 2"))));
-};
-var TabListVerticalTest = function () {
-    return (react_1.default.createElement(tablist_1.TabList, { vertical: true },
-        react_1.default.createElement(tablist_1.Tab, { tabKey: "hello" }, "Tab 1"),
-        react_1.default.createElement(tablist_1.Tab, { tabKey: "world" }, "Tab 2")));
-};
-var TabListAppearanceTest = function () {
-    return (react_1.default.createElement(react_native_1.View, { style: styles.container },
-        react_1.default.createElement(Header, null, "Transparent Appearance"),
-        react_1.default.createElement(PaddedTabList, { appearance: "transparent" },
-            react_1.default.createElement(tablist_1.Tab, { tabKey: "hello" }, "Tab 1"),
-            react_1.default.createElement(tablist_1.Tab, { tabKey: "world" }, "Tab 2")),
-        react_1.default.createElement(Header, null, "Subtle Appearance"),
-        react_1.default.createElement(PaddedTabList, { appearance: "subtle" },
-            react_1.default.createElement(tablist_1.Tab, { tabKey: "hello" }, "Tab 1"),
-            react_1.default.createElement(tablist_1.Tab, { tabKey: "world" }, "Tab 2"))));
+        react_1.default.createElement(text_1.TextV1, null,
+            "Selected Key: ",
+            key),
+        react_1.default.createElement(PaddedTabList, { selectedKey: key, onTabSelect: function (val) {
+                console.log('New key:', val);
+                setKey(val);
+            } },
+            react_1.default.createElement(tablist_1.Tab, { tabKey: "tab1" }, "Tab 1"),
+            react_1.default.createElement(tablist_1.Tab, { tabKey: "tab2" }, "Tab 2"),
+            react_1.default.createElement(tablist_1.Tab, { tabKey: "tab3" }, "Tab 3"))));
 };
 var TabListDisabledTest = function () {
-    return (react_1.default.createElement(react_native_1.View, null,
-        react_1.default.createElement(PaddedTabList, null,
-            react_1.default.createElement(tablist_1.Tab, { disabled: true, tabKey: "hello" }, "Tab 1"),
-            react_1.default.createElement(tablist_1.Tab, { tabKey: "world" }, "Tab 2")),
+    return (react_1.default.createElement(react_native_1.View, { style: styles_1.stackStyle },
+        react_1.default.createElement(PaddedTabList, { defaultSelectedKey: "tab2" },
+            react_1.default.createElement(tablist_1.Tab, { disabled: true, tabKey: "tab1" }, "Tab 1"),
+            react_1.default.createElement(tablist_1.Tab, { tabKey: "tab2" }, "Tab 2"),
+            react_1.default.createElement(tablist_1.Tab, { disabled: true, tabKey: "tab3" }, "Tab 3"),
+            react_1.default.createElement(tablist_1.Tab, { tabKey: "tab4" }, "Tab 4")),
         react_1.default.createElement(PaddedTabList, { disabled: true },
-            react_1.default.createElement(tablist_1.Tab, { tabKey: "hello" }, "Tab 1"),
-            react_1.default.createElement(tablist_1.Tab, { tabKey: "world" }, "Tab 2"))));
+            react_1.default.createElement(tablist_1.Tab, { tabKey: "tab1" }, "Tab 1"),
+            react_1.default.createElement(tablist_1.Tab, { tabKey: "tab2" }, "Tab 2"),
+            react_1.default.createElement(tablist_1.Tab, { tabKey: "tab3" }, "Tab 3"))));
+};
+var TabListVariantsTest = function () {
+    return (react_1.default.createElement(react_native_1.View, { style: styles_1.stackStyle },
+        react_1.default.createElement(Header, null, "Size Variants"),
+        react_1.default.createElement(Line, null),
+        react_1.default.createElement(SubHeader, null, "Small"),
+        react_1.default.createElement(PaddedTabList, { defaultSelectedKey: "sm1", size: "small" },
+            react_1.default.createElement(tablist_1.Tab, { tabKey: "sm1" }, "Small Tab 1"),
+            react_1.default.createElement(tablist_1.Tab, { tabKey: "sm2" }, "Small Tab 2"),
+            react_1.default.createElement(tablist_1.Tab, { tabKey: "sm3" }, "Small Tab 3")),
+        react_1.default.createElement(SubHeader, null, "Medium (default)"),
+        react_1.default.createElement(PaddedTabList, { defaultSelectedKey: "m1", size: "medium" },
+            react_1.default.createElement(tablist_1.Tab, { tabKey: "m1" }, "Medium Tab 1"),
+            react_1.default.createElement(tablist_1.Tab, { tabKey: "m2" }, "Medium Tab 2"),
+            react_1.default.createElement(tablist_1.Tab, { tabKey: "m3" }, "Medium Tab 3")),
+        react_1.default.createElement(SubHeader, null, "Large"),
+        react_1.default.createElement(PaddedTabList, { defaultSelectedKey: "lg1", size: "large" },
+            react_1.default.createElement(tablist_1.Tab, { tabKey: "lg1" }, "Large Tab 1"),
+            react_1.default.createElement(tablist_1.Tab, { tabKey: "lg2" }, "Large Tab 2"),
+            react_1.default.createElement(tablist_1.Tab, { tabKey: "lg3" }, "Large Tab 3")),
+        react_1.default.createElement(Header, null, "Appearance"),
+        react_1.default.createElement(Line, null),
+        react_1.default.createElement(SubHeader, null, "Transparent Appearance"),
+        react_1.default.createElement(PaddedTabList, { defaultSelectedKey: "tab1", appearance: "transparent" },
+            react_1.default.createElement(tablist_1.Tab, { tabKey: "tab1" }, "Tab 1"),
+            react_1.default.createElement(tablist_1.Tab, { tabKey: "tab2" }, "Tab 2"),
+            react_1.default.createElement(tablist_1.Tab, { tabKey: "tab3" }, "Tab 3")),
+        react_1.default.createElement(SubHeader, null, "Subtle Appearance"),
+        react_1.default.createElement(PaddedTabList, { defaultSelectedKey: "tab1", appearance: "subtle" },
+            react_1.default.createElement(tablist_1.Tab, { tabKey: "tab1" }, "Tab 1"),
+            react_1.default.createElement(tablist_1.Tab, { tabKey: "tab2" }, "Tab 2"),
+            react_1.default.createElement(tablist_1.Tab, { tabKey: "tab3" }, "Tab 3")),
+        react_1.default.createElement(Header, null, "Vertical Orientation"),
+        react_1.default.createElement(Line, null),
+        react_1.default.createElement(PaddedTabList, { defaultSelectedKey: "tab1", vertical: true },
+            react_1.default.createElement(tablist_1.Tab, { tabKey: "tab1" }, "Tab 1"),
+            react_1.default.createElement(tablist_1.Tab, { tabKey: "tab2" }, "Tab 2"),
+            react_1.default.createElement(tablist_1.Tab, { tabKey: "tab3" }, "Tab 3"))));
 };
 var TabListIconTest = function () {
-    var iconProp = {
-        fontSource: {
-            fontFamily: 'Arial',
-            codepoint: 0x2663,
-        },
-    };
-    return (react_1.default.createElement(tablist_1.TabList, null,
-        react_1.default.createElement(tablist_1.Tab, { icon: iconProp, tabKey: "withIcon" }, "Tab Item"),
-        react_1.default.createElement(tablist_1.Tab, { icon: iconProp, tabKey: "iconOnly" })));
+    return (react_1.default.createElement(react_native_1.View, { style: styles_1.stackStyle },
+        react_1.default.createElement(tablist_1.TabList, { defaultSelectedKey: "fontIcon" },
+            react_1.default.createElement(tablist_1.Tab, { icon: { fontSource: iconExamples_1.fontProps }, tabKey: "fontIcon" }, "Font Icon"),
+            react_1.default.createElement(tablist_1.Tab, { icon: { fontSource: iconExamples_1.fontProps }, tabKey: "fontIconOnly" }),
+            react_1.default.createElement(tablist_1.Tab, { icon: { svgSource: iconExamples_1.svgProps }, tabKey: "svgIcon" }, "SVG Icon"),
+            react_1.default.createElement(tablist_1.Tab, { icon: { svgSource: iconExamples_1.svgProps }, tabKey: "svgIconOnly" }))));
+};
+var TabListViewTest = function () {
+    var _a = react_1.default.useState('a'), key = _a[0], setKey = _a[1];
+    var views = react_1.default.useMemo(function () { return ({
+        a: (react_1.default.createElement(react_native_1.View, null,
+            react_1.default.createElement(SubHeader, null, "This is View 1"),
+            react_1.default.createElement(text_1.TextV1, { variant: "body1" }, "Here is some text."))),
+        b: (react_1.default.createElement(react_native_1.View, null,
+            react_1.default.createElement(SubHeader, null, "This is View 2"),
+            react_1.default.createElement(button_1.ButtonV1, null, "Button 1"))),
+        c: (react_1.default.createElement(react_native_1.View, null,
+            react_1.default.createElement(SubHeader, null, "This is View 3"),
+            react_1.default.createElement(menu_1.Menu, null,
+                react_1.default.createElement(menu_1.MenuTrigger, null,
+                    react_1.default.createElement(button_1.ButtonV1, null, "Menu")),
+                react_1.default.createElement(menu_1.MenuPopover, null,
+                    react_1.default.createElement(menu_1.MenuList, null,
+                        react_1.default.createElement(menu_1.MenuItem, null, "Item 1"),
+                        react_1.default.createElement(menu_1.MenuItem, null, "Item 2"),
+                        react_1.default.createElement(menu_1.MenuItem, null, "Item 3")))))),
+    }); }, []);
+    return (react_1.default.createElement(react_native_1.View, { style: styles_1.stackStyle },
+        react_1.default.createElement(tablist_1.TabList, { selectedKey: key, onTabSelect: setKey },
+            react_1.default.createElement(tablist_1.Tab, { tabKey: "a" }, "View 1"),
+            react_1.default.createElement(tablist_1.Tab, { tabKey: "b" }, "View 2"),
+            react_1.default.createElement(tablist_1.Tab, { tabKey: "c" }, "View 3")),
+        views[key]));
 };
 var sections = [
     {
-        name: 'Size',
-        component: TabListSizeTest,
-    },
-    {
-        name: 'Vertical',
-        component: TabListVerticalTest,
-    },
-    {
-        name: 'Appearance',
-        component: TabListAppearanceTest,
+        name: 'TabList Controlled vs Uncontrolled',
+        component: TabListDefaultTest,
     },
     {
         name: 'Disabled',
         component: TabListDisabledTest,
     },
+    {
+        name: 'Variants',
+        component: TabListVariantsTest,
+    },
     {
         name: 'Icon',
         component: TabListIconTest,
     },
+    {
+        name: 'Rendering Content Separately',
+        component: TabListViewTest,
+    },
 ];
 var TabListTest = function () {
     var status = {

package/lib-commonjs/fluent-tester/src/TestComponents/TabList/TabListTest.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabListTest.js","sourceRoot":"","sources":["../../../../../src/TestComponents/TabList/TabListTest.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"TabListTest.js","sourceRoot":"","sources":["../../../../../src/TestComponents/TabList/TabListTest.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui-react-native/tester",
-  "version": "0.151.17",
+  "version": "0.151.18",
   "description": "A test app to test FluentUI React Native Components during development",
   "license": "MIT",
   "author": "Microsoft <fluentuinativeowners@microsoft.com>",
@@ -67,7 +67,7 @@
     "@fluentui-react-native/spinner": "^0.7.6",
     "@fluentui-react-native/stack": ">=0.8.7 <1.0.0",
     "@fluentui-react-native/switch": "^0.10.5",
-    "@fluentui-react-native/tablist": "0.3.3",
+    "@fluentui-react-native/tablist": "0.3.4",
     "@fluentui-react-native/text": ">=0.21.5 <1.0.0",
     "@fluentui-react-native/theme": ">=0.9.0 <1.0.0",
     "@fluentui-react-native/theme-tokens": "^0.25.0",

package/src/TestComponents/TabList/TabListTest.tsx

@@ -1,130 +1,209 @@
 import React from 'react';
-import { View, StyleSheet } from 'react-native';
+import { View } from 'react-native';
 
+import { ButtonV1 as Button } from '@fluentui-react-native/button';
 import { Divider } from '@fluentui-react-native/divider';
+import { Menu, MenuTrigger, MenuList, MenuItem, MenuPopover } from '@fluentui-react-native/menu';
 import { TabList, Tab } from '@fluentui-react-native/tablist';
 import { TextV1 as Text } from '@fluentui-react-native/text';
 
+import { svgProps, fontProps } from '../Common/iconExamples';
+import { stackStyle } from '../Common/styles';
 import type { PlatformStatus, TestSection } from '../Test';
 import { Test } from '../Test';
 
-const Header = Text.customize({ variant: 'subheaderStandard' });
+const SubHeader = Text.customize({ variant: 'subheaderStandard' });
+const Header = Text.customize({ variant: 'headerStandard' });
 const Line = Divider.customize({ paddingVertical: 4 });
 const PaddedTabList = TabList.customize({
   paddingVertical: 4,
 });
 
-const styles = StyleSheet.create({
-  container: {
-    paddingVertical: 8,
-  },
-});
-
-const TabListSizeTest: React.FunctionComponent = () => {
+const TabListDefaultTest: React.FunctionComponent = () => {
+  const [key, setKey] = React.useState('tab1');
   return (
-    <View style={styles.container}>
-      <Header>Small</Header>
-      <PaddedTabList size="small">
-        <Tab tabKey="hello">Tab 1</Tab>
-        <Tab tabKey="world">Tab 2</Tab>
-      </PaddedTabList>
+    <View style={stackStyle}>
+      <Header>Uncontrolled Component</Header>
       <Line />
-      <Header>Medium (default)</Header>
-      <PaddedTabList size="medium">
-        <Tab tabKey="hello">Tab 1</Tab>
-        <Tab tabKey="world">Tab 2</Tab>
+      <PaddedTabList defaultSelectedKey={'tab1'}>
+        <Tab tabKey="tab1">Tab 1</Tab>
+        <Tab tabKey="tab2">Tab 2</Tab>
+        <Tab tabKey="tab3">Tab 3</Tab>
       </PaddedTabList>
+      <Header>Controlled Component</Header>
       <Line />
-      <Header>Large</Header>
-      <PaddedTabList size="large">
-        <Tab tabKey="hello">Tab 1</Tab>
-        <Tab tabKey="world">Tab 2</Tab>
+      <Text>Selected Key: {key}</Text>
+      <PaddedTabList
+        selectedKey={key}
+        onTabSelect={(val) => {
+          console.log('New key:', val);
+          setKey(val);
+        }}
+      >
+        <Tab tabKey="tab1">Tab 1</Tab>
+        <Tab tabKey="tab2">Tab 2</Tab>
+        <Tab tabKey="tab3">Tab 3</Tab>
       </PaddedTabList>
     </View>
   );
 };
 
-const TabListVerticalTest: React.FunctionComponent = () => {
+const TabListDisabledTest: React.FunctionComponent = () => {
   return (
-    <TabList vertical>
-      <Tab tabKey="hello">Tab 1</Tab>
-      <Tab tabKey="world">Tab 2</Tab>
-    </TabList>
+    <View style={stackStyle}>
+      <PaddedTabList defaultSelectedKey="tab2">
+        <Tab disabled tabKey="tab1">
+          Tab 1
+        </Tab>
+        <Tab tabKey="tab2">Tab 2</Tab>
+        <Tab disabled tabKey="tab3">
+          Tab 3
+        </Tab>
+        <Tab tabKey="tab4">Tab 4</Tab>
+      </PaddedTabList>
+      <PaddedTabList disabled>
+        <Tab tabKey="tab1">Tab 1</Tab>
+        <Tab tabKey="tab2">Tab 2</Tab>
+        <Tab tabKey="tab3">Tab 3</Tab>
+      </PaddedTabList>
+    </View>
   );
 };
 
-const TabListAppearanceTest: React.FunctionComponent = () => {
+const TabListVariantsTest: React.FunctionComponent = () => {
   return (
-    <View style={styles.container}>
-      <Header>Transparent Appearance</Header>
-      <PaddedTabList appearance="transparent">
-        <Tab tabKey="hello">Tab 1</Tab>
-        <Tab tabKey="world">Tab 2</Tab>
+    <View style={stackStyle}>
+      <Header>Size Variants</Header>
+      <Line />
+      <SubHeader>Small</SubHeader>
+      <PaddedTabList defaultSelectedKey="sm1" size="small">
+        <Tab tabKey="sm1">Small Tab 1</Tab>
+        <Tab tabKey="sm2">Small Tab 2</Tab>
+        <Tab tabKey="sm3">Small Tab 3</Tab>
+      </PaddedTabList>
+      <SubHeader>Medium (default)</SubHeader>
+      <PaddedTabList defaultSelectedKey="m1" size="medium">
+        <Tab tabKey="m1">Medium Tab 1</Tab>
+        <Tab tabKey="m2">Medium Tab 2</Tab>
+        <Tab tabKey="m3">Medium Tab 3</Tab>
+      </PaddedTabList>
+      <SubHeader>Large</SubHeader>
+      <PaddedTabList defaultSelectedKey="lg1" size="large">
+        <Tab tabKey="lg1">Large Tab 1</Tab>
+        <Tab tabKey="lg2">Large Tab 2</Tab>
+        <Tab tabKey="lg3">Large Tab 3</Tab>
       </PaddedTabList>
-      <Header>Subtle Appearance</Header>
-      <PaddedTabList appearance="subtle">
-        <Tab tabKey="hello">Tab 1</Tab>
-        <Tab tabKey="world">Tab 2</Tab>
+      <Header>Appearance</Header>
+      <Line />
+      <SubHeader>Transparent Appearance</SubHeader>
+      <PaddedTabList defaultSelectedKey="tab1" appearance="transparent">
+        <Tab tabKey="tab1">Tab 1</Tab>
+        <Tab tabKey="tab2">Tab 2</Tab>
+        <Tab tabKey="tab3">Tab 3</Tab>
+      </PaddedTabList>
+      <SubHeader>Subtle Appearance</SubHeader>
+      <PaddedTabList defaultSelectedKey="tab1" appearance="subtle">
+        <Tab tabKey="tab1">Tab 1</Tab>
+        <Tab tabKey="tab2">Tab 2</Tab>
+        <Tab tabKey="tab3">Tab 3</Tab>
+      </PaddedTabList>
+      <Header>Vertical Orientation</Header>
+      <Line />
+      <PaddedTabList defaultSelectedKey="tab1" vertical>
+        <Tab tabKey="tab1">Tab 1</Tab>
+        <Tab tabKey="tab2">Tab 2</Tab>
+        <Tab tabKey="tab3">Tab 3</Tab>
       </PaddedTabList>
     </View>
   );
 };
 
-const TabListDisabledTest: React.FunctionComponent = () => {
+const TabListIconTest: React.FunctionComponent = () => {
   return (
-    <View>
-      <PaddedTabList>
-        <Tab disabled tabKey="hello">
-          Tab 1
+    <View style={stackStyle}>
+      <TabList defaultSelectedKey="fontIcon">
+        <Tab icon={{ fontSource: fontProps }} tabKey="fontIcon">
+          Font Icon
         </Tab>
-        <Tab tabKey="world">Tab 2</Tab>
-      </PaddedTabList>
-      <PaddedTabList disabled>
-        <Tab tabKey="hello">Tab 1</Tab>
-        <Tab tabKey="world">Tab 2</Tab>
-      </PaddedTabList>
+        <Tab icon={{ fontSource: fontProps }} tabKey="fontIconOnly" />
+        <Tab icon={{ svgSource: svgProps }} tabKey="svgIcon">
+          SVG Icon
+        </Tab>
+        <Tab icon={{ svgSource: svgProps }} tabKey="svgIconOnly" />
+      </TabList>
     </View>
   );
 };
 
-const TabListIconTest: React.FunctionComponent = () => {
-  const iconProp = {
-    fontSource: {
-      fontFamily: 'Arial',
-      codepoint: 0x2663,
-    },
-  };
+const TabListViewTest: React.FunctionComponent = () => {
+  const [key, setKey] = React.useState('a');
+  const views = React.useMemo(
+    () => ({
+      a: (
+        <View>
+          <SubHeader>This is View 1</SubHeader>
+          <Text variant="body1">Here is some text.</Text>
+        </View>
+      ),
+      b: (
+        <View>
+          <SubHeader>This is View 2</SubHeader>
+          <Button>Button 1</Button>
+        </View>
+      ),
+      c: (
+        <View>
+          <SubHeader>This is View 3</SubHeader>
+          <Menu>
+            <MenuTrigger>
+              <Button>Menu</Button>
+            </MenuTrigger>
+            <MenuPopover>
+              <MenuList>
+                <MenuItem>Item 1</MenuItem>
+                <MenuItem>Item 2</MenuItem>
+                <MenuItem>Item 3</MenuItem>
+              </MenuList>
+            </MenuPopover>
+          </Menu>
+        </View>
+      ),
+    }),
+    [],
+  );
   return (
-    <TabList>
-      <Tab icon={iconProp} tabKey="withIcon">
-        Tab Item
-      </Tab>
-      <Tab icon={iconProp} tabKey="iconOnly" />
-    </TabList>
+    <View style={stackStyle}>
+      <TabList selectedKey={key} onTabSelect={setKey}>
+        <Tab tabKey="a">View 1</Tab>
+        <Tab tabKey="b">View 2</Tab>
+        <Tab tabKey="c">View 3</Tab>
+      </TabList>
+      {views[key]}
+    </View>
   );
 };
 
 const sections: TestSection[] = [
   {
-    name: 'Size',
-    component: TabListSizeTest,
-  },
-  {
-    name: 'Vertical',
-    component: TabListVerticalTest,
-  },
-  {
-    name: 'Appearance',
-    component: TabListAppearanceTest,
+    name: 'TabList Controlled vs Uncontrolled',
+    component: TabListDefaultTest,
   },
   {
     name: 'Disabled',
     component: TabListDisabledTest,
   },
+  {
+    name: 'Variants',
+    component: TabListVariantsTest,
+  },
   {
     name: 'Icon',
     component: TabListIconTest,
   },
+  {
+    name: 'Rendering Content Separately',
+    component: TabListViewTest,
+  },
 ];
 
 export const TabListTest: React.FunctionComponent = () => {