@fluentui-react-native/tester 0.82.13 → 0.83.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui-react-native/tester",
-  "version": "0.82.13",
+  "version": "0.83.1",
   "description": "A test app to test FluentUI React Native Components during development",
   "license": "MIT",
   "author": "Microsoft <fluentuinativeowners@microsoft.com>",
@@ -37,35 +37,35 @@
   "dependencies": {
     "@fluentui-react-native/android-theme": ">=0.11.0 <1.0.0",
     "@fluentui-react-native/apple-theme": ">=0.13.2 <1.0.0",
-    "@fluentui-react-native/avatar": "^1.1.32",
-    "@fluentui-react-native/badge": ">=0.1.17 <1.0.0",
-    "@fluentui-react-native/button": ">=0.24.13 <1.0.0",
+    "@fluentui-react-native/avatar": "^1.1.33",
+    "@fluentui-react-native/badge": ">=0.1.18 <1.0.0",
+    "@fluentui-react-native/button": ">=0.24.14 <1.0.0",
     "@fluentui-react-native/default-theme": ">=0.14.0 <1.0.0",
     "@fluentui-react-native/experimental-activity-indicator": ">=0.6.0 <1.0.0",
-    "@fluentui-react-native/experimental-avatar": ">=0.16.0 <1.0.0",
-    "@fluentui-react-native/experimental-button": "0.16.13",
-    "@fluentui-react-native/experimental-checkbox": "0.12.9",
+    "@fluentui-react-native/experimental-avatar": ">=0.16.1 <1.0.0",
+    "@fluentui-react-native/experimental-button": "0.16.14",
+    "@fluentui-react-native/experimental-checkbox": "0.12.10",
     "@fluentui-react-native/experimental-expander": "0.4.0",
-    "@fluentui-react-native/experimental-menu-button": ">=0.4.16 <1.0.0",
-    "@fluentui-react-native/experimental-native-date-picker": ">=0.6.0 <1.0.0",
+    "@fluentui-react-native/experimental-menu-button": ">=0.4.17 <1.0.0",
+    "@fluentui-react-native/experimental-native-date-picker": ">=0.6.1 <1.0.0",
     "@fluentui-react-native/experimental-shadow": "0.2.10",
     "@fluentui-react-native/experimental-shimmer": "0.7.0",
-    "@fluentui-react-native/experimental-tabs": "0.5.8",
-    "@fluentui-react-native/experimental-text": ">=0.11.0 <1.0.0",
+    "@fluentui-react-native/experimental-tabs": "0.5.9",
+    "@fluentui-react-native/experimental-text": ">=0.11.1 <1.0.0",
     "@fluentui-react-native/framework": ">=0.8.0 <1.0.0",
-    "@fluentui-react-native/icon": "0.13.3",
-    "@fluentui-react-native/interactive-hooks": ">=0.18.0 <1.0.0",
-    "@fluentui-react-native/menu": "^1.0.22",
-    "@fluentui-react-native/notification": "0.11.4",
-    "@fluentui-react-native/stack": ">=0.7.2 <1.0.0",
-    "@fluentui-react-native/switch": "^0.3.0",
-    "@fluentui-react-native/text": ">=0.13.0 <1.0.0",
+    "@fluentui-react-native/icon": "0.13.4",
+    "@fluentui-react-native/interactive-hooks": ">=0.18.1 <1.0.0",
+    "@fluentui-react-native/menu": "^1.0.23",
+    "@fluentui-react-native/notification": "0.12.0",
+    "@fluentui-react-native/stack": ">=0.7.3 <1.0.0",
+    "@fluentui-react-native/switch": "^0.3.1",
+    "@fluentui-react-native/text": ">=0.14.0 <1.0.0",
     "@fluentui-react-native/theme": ">=0.7.0 <1.0.0",
     "@fluentui-react-native/theme-types": ">=0.18.0 <1.0.0",
     "@fluentui-react-native/themed-stylesheet": "^1.4.0",
     "@fluentui-react-native/theming-utils": ">=0.14.0 <1.0.0",
     "@fluentui-react-native/win32-theme": ">=0.20.1 <1.0.0",
-    "@fluentui/react-native": ">=0.32.4 <1.0.0",
+    "@fluentui/react-native": ">=0.32.5 <1.0.0",
     "@react-native-community/slider": "^4.2.0",
     "@react-native-menu/menu": "^0.1.2",
     "@react-native-picker/picker": "^2.2.1",
@@ -102,7 +102,7 @@
     "react-native-macos": "^0.66.0",
     "react-native-svg": "^12.3.0",
     "react-native-svg-transformer": "^1.0.0",
-    "react-native-test-app": "^1.4.0",
+    "react-native-test-app": "^1.6.2",
     "react-native-windows": "^0.66.0",
     "react-test-renderer": "17.0.2",
     "ts-node": "^8.10.1",

package/src/FluentTesterApp.tsx

@@ -2,17 +2,50 @@
 
 import { ThemeProvider } from '@fluentui-react-native/theme';
 import * as React from 'react';
-import { Platform } from 'react-native';
+import { Platform, useWindowDimensions } from 'react-native';
 import { FluentTester, FluentTesterProps } from './FluentTester';
 import { tests } from './testPages';
 import { testerTheme } from './theme/index';
 
-const isMobile = Platform.OS == 'android' || (Platform.OS === 'ios' && Platform.isPad === false);
+type SizeClassIOS = 'regular' | 'compact' | undefined;
+
+/**
+ * Hook that "guesses" our Size Class on iOS based on our window width.
+ * Note: this is hacky and should not be used.
+ *
+ * For more information about Size Classes, see the following:
+ * https://developer.apple.com/documentation/uikit/uitraitcollection
+ * https://developer.apple.com/design/human-interface-guidelines/foundations/layout/#platform-considerations
+ * @returns SizeClassIOS: enum determining our size class
+ */
+const useSizeClassIOS_DO_NOT_USE: () => SizeClassIOS = () => {
+  if (Platform.OS === 'ios') {
+    /**
+     * Technically this violates the rules of hooks (calling hooks inside conditions) but Platform.OS checks are pretty non-conditional.
+     * This is necessary because useWindowDimensions() does not work in win32.
+     */
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const width = useWindowDimensions().width;
+    if (Platform.isPad && width > 375) {
+      return 'regular';
+    } else {
+      return 'compact';
+    }
+  } else {
+    return undefined;
+  }
+};
 
 export const FluentTesterApp: React.FunctionComponent<FluentTesterProps> = (props) => {
+  const sizeClass = useSizeClassIOS_DO_NOT_USE();
+  const isMobile = Platform.OS == 'android' || (Platform.OS === 'ios' && Platform.isPad === false);
+
+  // If on iPad we are presented in a Split View or Slide Over context, show the single pane view.
+  const shouldShowSinglePane = isMobile || (!isMobile && sizeClass === 'compact');
+
   return (
     <ThemeProvider theme={testerTheme}>
-      <FluentTester enabledTests={tests} enableSinglePaneView={isMobile} {...props} />
+      <FluentTester enabledTests={tests} enableSinglePaneView={shouldShowSinglePane} {...props} />
     </ThemeProvider>
   );
 };

package/src/TestComponents/Notification/assets/play_button.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M10 16.5l6-4.5-6-4.5v9zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M10.8556 8.15498C10.0225 7.69354 9 8.29608 9 9.24847V14.7516C9 15.704 10.0225 16.3065 10.8556 15.8451L16.6134 12.6561C16.852 12.524 17 12.2727 17 12C17 11.7273 16.852 11.4761 16.6134 11.3439L10.8556 8.15498ZM12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2ZM3.5 12C3.5 7.30558 7.30558 3.5 12 3.5C16.6944 3.5 20.5 7.30558 20.5 12C20.5 16.6944 16.6944 20.5 12 20.5C7.30558 20.5 3.5 16.6944 3.5 12Z"/></svg>