@fluentui-react-native/tester 0.151.23 → 0.153.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui-react-native/tester",
-  "version": "0.151.23",
+  "version": "0.153.0",
   "description": "A test app to test FluentUI React Native Components during development",
   "license": "MIT",
   "author": "Microsoft <fluentuinativeowners@microsoft.com>",
@@ -47,12 +47,12 @@
     "@fluentui-react-native/experimental-appearance-additions": "^0.5.7",
     "@fluentui-react-native/experimental-avatar": ">=0.19.6 <1.0.0",
     "@fluentui-react-native/experimental-button": "0.18.10",
-    "@fluentui-react-native/experimental-checkbox": "0.15.9",
+    "@fluentui-react-native/experimental-checkbox": "0.15.10",
     "@fluentui-react-native/experimental-expander": "0.6.8",
     "@fluentui-react-native/experimental-menu-button": ">=0.7.17 <1.0.0",
     "@fluentui-react-native/experimental-native-date-picker": ">=0.8.0 <1.0.0",
     "@fluentui-react-native/experimental-shadow": "0.4.7",
-    "@fluentui-react-native/experimental-shimmer": "0.10.8",
+    "@fluentui-react-native/experimental-shimmer": "0.11.0",
     "@fluentui-react-native/experimental-tabs": "0.9.10",
     "@fluentui-react-native/experimental-text": ">=0.13.7 <1.0.0",
     "@fluentui-react-native/framework": ">=0.11.5 <1.0.0",
@@ -62,7 +62,7 @@
     "@fluentui-react-native/menu": "^1.11.16",
     "@fluentui-react-native/merge-props": ">=0.7.1 <1.0.0",
     "@fluentui-react-native/notification": "0.23.10",
-    "@fluentui-react-native/radio-group": ">=0.18.9 <1.0.0",
+    "@fluentui-react-native/radio-group": ">=0.19.0 <1.0.0",
     "@fluentui-react-native/separator": "^0.16.5",
     "@fluentui-react-native/spinner": "^0.7.8",
     "@fluentui-react-native/stack": ">=0.8.9 <1.0.0",
@@ -74,8 +74,9 @@
     "@fluentui-react-native/theme-types": ">=0.32.0 <1.0.0",
     "@fluentui-react-native/themed-stylesheet": "^1.5.2",
     "@fluentui-react-native/theming-utils": ">=0.24.3 <1.0.0",
+    "@fluentui-react-native/vibrancy-view": ">=0.0.2 <1.0.0",
     "@fluentui-react-native/win32-theme": ">=0.27.5 <1.0.0",
-    "@fluentui/react-native": ">=0.37.18 <1.0.0",
+    "@fluentui/react-native": ">=0.37.19 <1.0.0",
     "@fortawesome/fontawesome-svg-core": "^6.2.0",
     "@fortawesome/free-solid-svg-icons": "^6.2.0",
     "@fortawesome/react-native-fontawesome": "^0.3.0",

package/src/TestComponents/CheckboxV1/CheckboxV1Test.tsx

@@ -185,6 +185,7 @@ const checkboxSections: TestSection[] = [
   },
   Platform.select({
     android: null,
+    ios: null,
     default: {
       name: 'Size Checkboxes',
       component: SizeCheckbox,
@@ -192,6 +193,7 @@ const checkboxSections: TestSection[] = [
   }),
   Platform.select({
     android: null,
+    ios: null,
     default: {
       name: 'Desktop Specific Checkboxes',
       component: DesktopSpecificCheckbox,
@@ -203,6 +205,7 @@ const checkboxSections: TestSection[] = [
   },
   Platform.select({
     android: null,
+    ios: null,
     default: {
       name: 'Token Customized Checkboxes',
       component: TokenCheckbox,
@@ -221,7 +224,7 @@ export const CheckboxV1Test: React.FunctionComponent = () => {
   const status: PlatformStatus = {
     win32Status: 'Production',
     uwpStatus: 'N/A',
-    iosStatus: 'N/A',
+    iosStatus: 'Experimental',
     macosStatus: 'Experimental',
     androidStatus: 'Experimental',
   };

package/src/TestComponents/RadioGroupV1/RadioGroupV1Test.tsx

@@ -30,6 +30,7 @@ const radioGroupV1Sections: TestSection[] = [
   },
   ...Platform.select({
     android: [null],
+    ios: [null],
     native: [
       {
         name: 'RadioGroup with Label Subtext',

package/src/TestComponents/VibrancyView/VibrancyViewTest.tsx

@@ -0,0 +1,231 @@
+import * as React from 'react';
+import { Alert, StyleSheet, View } from 'react-native';
+import type { ViewProps } from 'react-native';
+
+import { ButtonV1 as Button, Text } from '@fluentui/react-native';
+import { Stack } from '@fluentui-react-native/stack';
+import type { Material, BlendingMode, State } from '@fluentui-react-native/vibrancy-view';
+import { VibrancyView } from '@fluentui-react-native/vibrancy-view';
+
+import { VIBRANCYVIEW_TESTPAGE } from '../../../../E2E/src/VibrancyView/consts';
+import { MenuPicker } from '../Common/MenuPicker';
+import { stackStyle, commonTestStyles as commonStyles } from '../Common/styles';
+import type { TestSection, PlatformStatus } from '../Test';
+import { Test } from '../Test';
+
+const styles = StyleSheet.create({
+  row: {
+    flex: 1,
+    flexDirection: 'row',
+  },
+  box: {
+    width: 100,
+    height: 100,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  bigBox: {
+    width: 200,
+    height: 200,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  biggerBox: {
+    backgroundColor: 'yellow',
+    width: 300,
+    height: 300,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  Rectangle1: {
+    backgroundColor: 'yellow',
+    width: 300,
+    height: 300,
+  },
+  Rectangle2: {
+    position: 'absolute',
+    top: 50,
+    width: 400,
+    height: 200,
+  },
+  centeredBox: {
+    backgroundColor: 'green',
+    width: 100,
+    height: 100,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  borderProps: {
+    backgroundColor: 'blue',
+    borderColor: 'red',
+    borderWidth: 1,
+    borderRadius: 8,
+  },
+  rootWithSpacing: { ...commonStyles.root, gap: 8 },
+});
+
+const VibrancyViewDefault: React.FunctionComponent = () => {
+  return (
+    <Stack style={stackStyle}>
+      <View style={styles.rootWithSpacing}>
+        <Text>Vibrancy View with no props set</Text>
+        <VibrancyView style={styles.box} />
+      </View>
+    </Stack>
+  );
+};
+
+const VibrancyViewWithViewProps: React.FunctionComponent = () => {
+  const descriptionString = '<View> and <VibrancyView> with the backgroundColor, borderColor, borderWidth, borderRadius set';
+  const viewProps: ViewProps = React.useMemo(() => {
+    return {
+      focusable: true,
+      style: [styles.box, styles.borderProps],
+    };
+  }, []);
+  return (
+    <Stack style={stackStyle}>
+      <View style={styles.rootWithSpacing}>
+        <Text>{descriptionString}</Text>
+        <View style={styles.row}>
+          <View {...viewProps} />
+          <VibrancyView {...viewProps} />
+        </View>
+      </View>
+    </Stack>
+  );
+};
+
+const materialSelections: Material[] = [
+  'titlebar',
+  'selection',
+  'menu',
+  'popover',
+  'sidebar',
+  'headerview',
+  'sheet',
+  'windowbackground',
+  'hudWindow',
+  'fullScreenUI',
+  'toolTip',
+  'contentBackground',
+  'underWindowBackground',
+  'underPageBackground',
+];
+const materialsCollection = materialSelections.map((material) => {
+  return {
+    label: material,
+    value: material,
+  };
+});
+
+const blendingModeSelections: BlendingMode[] = ['withinWindow', 'behindWindow'];
+const blendingModeCollection = blendingModeSelections.map((material) => {
+  return {
+    label: material,
+    value: material,
+  };
+});
+
+const stateSelections: State[] = ['followsWindowActiveState', 'active', 'inactive'];
+const stateCollection = stateSelections.map((material) => {
+  return {
+    label: material,
+    value: material,
+  };
+});
+
+const VibrancyViewWithVibrancyViewProps: React.FunctionComponent = () => {
+  const [material, setMaterial] = React.useState<Material>(undefined);
+  const [blendingMode, setBlendingMode] = React.useState<BlendingMode>(undefined);
+  const [state, setState] = React.useState<State>(undefined);
+
+  const onMaterialChange = React.useCallback((material: Material) => {
+    setMaterial(material);
+  }, []);
+
+  const onBlendingModeChange = React.useCallback((blendingMode: BlendingMode) => {
+    setBlendingMode(blendingMode);
+  }, []);
+
+  const onStateChange = React.useCallback((state: State) => {
+    setState(state);
+  }, []);
+
+  return (
+    <Stack style={stackStyle}>
+      <View style={styles.Rectangle1}>
+        <VibrancyView material={material} blendingMode={blendingMode} state={state} style={styles.Rectangle2}>
+          <MenuPicker prompt="Material" selected={material || 'undefined'} onChange={onMaterialChange} collection={materialsCollection} />
+          <MenuPicker
+            prompt="Blending Mode"
+            selected={blendingMode || 'undefined'}
+            onChange={onBlendingModeChange}
+            collection={blendingModeCollection}
+          />
+          <MenuPicker prompt="State" selected={state || 'undefined'} onChange={onStateChange} collection={stateCollection} />
+        </VibrancyView>
+      </View>
+    </Stack>
+  );
+};
+
+const HitTestButton = (props: { title: string }) => {
+  const onClick = React.useCallback(
+    (_e) => {
+      Alert.alert(props.title);
+    },
+    [props],
+  );
+  return <Button onClick={onClick}>{props.title}</Button>;
+};
+
+const VibrancyViewHitTest: React.FunctionComponent = () => {
+  return (
+    <View style={commonStyles.root}>
+      <HitTestButton title={'Button 1'} />
+      <VibrancyView style={styles.biggerBox}>
+        <HitTestButton title={'Button 2'} />
+        <View style={styles.centeredBox}>
+          <HitTestButton title={'Button 3'} />
+        </View>
+        <HitTestButton title={'Button 4'} />
+      </VibrancyView>
+      <HitTestButton title={'Button 5'} />
+    </View>
+  );
+};
+
+const VibrancyViewSections: TestSection[] = [
+  {
+    name: 'VibrancyView Default',
+    testID: VIBRANCYVIEW_TESTPAGE,
+    component: VibrancyViewDefault,
+  },
+  {
+    name: 'VibrancyView with View props',
+    component: VibrancyViewWithViewProps,
+  },
+  {
+    name: 'VibrancyView with VibrancyView props',
+    component: VibrancyViewWithVibrancyViewProps,
+  },
+  {
+    name: 'VibrancyView Hit Test',
+    component: VibrancyViewHitTest,
+  },
+];
+
+export const VibrancyViewTest: React.FunctionComponent = () => {
+  const status: PlatformStatus = {
+    win32Status: 'N/A',
+    uwpStatus: 'N/A',
+    iosStatus: 'Backlog',
+    macosStatus: 'Beta',
+    androidStatus: 'N/A',
+  };
+
+  const description = 'VibrancyView is a native module that exposes NSVisualEffectView to React Native on macOS';
+
+  return <Test name="VibrancyView Test" description={description} sections={VibrancyViewSections} status={status}></Test>;
+};

package/src/TestComponents/VibrancyView/index.ts

@@ -0,0 +1 @@
+export * from './VibrancyViewTest';

package/src/testPages.ts

@@ -44,6 +44,7 @@ import { TabsV1Test } from './TestComponents/TabsV1';
 import { TextLegacyTest } from './TestComponents/TextLegacy';
 import { TextV1Test } from './TestComponents/TextV1';
 import { ThemeTest } from './TestComponents/Theme';
+import { VibrancyViewTest } from './TestComponents/VibrancyView';
 import * as Constants from '../../E2E/src/index.consts';
 
 export const tests: TestDescription[] = [
@@ -330,4 +331,10 @@ export const tests: TestDescription[] = [
     testPageButton: Constants.HOMEPAGE_THEME_BUTTON,
     platforms: ['android', 'ios', 'macos', 'win32', 'windows'],
   },
+  {
+    name: 'Vibrancy View',
+    component: VibrancyViewTest,
+    testPageButton: Constants.HOMEPAGE_VIBRANCYVIEW_BUTTON,
+    platforms: ['macos'],
+  },
 ];