Callout macOS

apps/fluent-tester/src/FluentTester/TestComponents/ContextualMenu/ContextualMenuTest.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 import * as React from 'react';
-import { Text, View, Switch } from 'react-native';
+import { Text, View, Switch, Platform } from 'react-native';
 import {
   Text as FURNText,
   Button,
@@ -118,12 +118,19 @@ const nestedContextualMenu: React.FunctionComponent = () => {
   const testImage = require('../Button/icon_24x24.png');
   const testTtf = require('../Button/Font Awesome 5 Free-Solid-900.otf');
 
-  const fontProps: FontIconProps = {
-    fontFamily: `Font Awesome 5 Free`,
-    fontSrcFile: testTtf,
-    codepoint: 0xf083,
-    fontSize: 16,
-  };
+  const fontProps: FontIconProps = Platform.select({
+    macos: {
+      fontFamily: 'Arial',
+      codepoint: 0x2663,
+      fontSize: 32,
+    },
+    default: {
+      fontFamily: `Font Awesome 5 Free`,
+      fontSrcFile: testTtf,
+      codepoint: 0xf083,
+      fontSize: 32,
+    },
+  });
 
   const svgProps: SvgIconProps = {
     src: TestSvg,
@@ -335,6 +342,7 @@ const IconContextualMenu: React.FunctionComponent = () => {
     </View>
   );
 };
+
 const contextualMenuSections: TestSection[] = [
   {
     name: 'Standard ContextualMenu',

apps/fluent-tester/src/FluentTester/testPages.macos.ts

@@ -1,7 +1,9 @@
 import { TestDescription } from './TestComponents';
 import { AvatarTest, HOMEPAGE_AVATAR_BUTTON } from './TestComponents/Avatar';
 import { ButtonTest, HOMEPAGE_BUTTON_BUTTON } from './TestComponents/Button';
+import { CalloutTest, HOMEPAGE_CALLOUT_BUTTON } from './TestComponents/Callout';
 import { CheckboxTest, HOMEPAGE_CHECKBOX_BUTTON } from './TestComponents/Checkbox';
+import { ContextualMenuTest, HOMEPAGE_CONTEXTUALMENU_BUTTON } from './TestComponents/ContextualMenu';
 import { ExperimentalCheckboxTest, HOMEPAGE_CHECKBOX_CHECKBOXEXPERIMENTAL } from './TestComponents/CheckboxExperimental';
 import { ExperimentalButtonTest, HOMEPAGE_BUTTON_BUTTONEXPERIMENTAL } from './TestComponents/ButtonExperimental';
 import { HOMEPAGE_FOCUSZONE_BUTTON, FocusZoneTest } from './TestComponents/FocusZone';
@@ -21,6 +23,7 @@ import { HOMEPAGE_TOKEN_BUTTON, TokenTest } from './TestComponents/Tokens';
 import { HOMEPAGE_TABS_BUTTON, TabsTest } from './TestComponents/Tabs';
 import { HOMEPAGE_EXPERIMENTAL_TABS_BUTTON, ExperimentalTabsTest } from './TestComponents/TabsExperimental';
 import { HOMEPAGE_EXPERIMENTAL_TEXT_BUTTON, TextExperimentalTest } from './TestComponents/TextExperimental';
+import { ExperimentalMenuButtonTest, HOMEPAGE_MENU_BUTTON_EXPERIMENTAL } from './TestComponents/MenuButtonExperimental';
 
 export const tests: TestDescription[] = [
   {
@@ -33,20 +36,55 @@ export const tests: TestDescription[] = [
     component: ButtonTest,
     testPage: HOMEPAGE_BUTTON_BUTTON,
   },
+  {
+    name: 'Callout Test',
+    component: CalloutTest,
+    testPage: HOMEPAGE_CALLOUT_BUTTON,
+  },
+  {
+    name: 'Checkbox Test',
+    component: CheckboxTest,
+    testPage: HOMEPAGE_CHECKBOX_BUTTON,
+  },
+  {
+    name: 'ContextualMenu Test',
+    component: ContextualMenuTest,
+    testPage: HOMEPAGE_CONTEXTUALMENU_BUTTON,
+  },
   {
     name: 'Experimental Button',
     component: ExperimentalButtonTest,
     testPage: HOMEPAGE_BUTTON_BUTTONEXPERIMENTAL,
   },
+  {
+    name: 'Experimental Checkbox',
+    component: ExperimentalCheckboxTest,
+    testPage: HOMEPAGE_CHECKBOX_CHECKBOXEXPERIMENTAL,
+  },
+  {
+    name: 'Experimental MenuButton Test',
+    component: ExperimentalMenuButtonTest,
+    testPage: HOMEPAGE_MENU_BUTTON_EXPERIMENTAL,
+  },
+  {
+    name: 'Experimental Tabs Test',
+    component: ExperimentalTabsTest,
+    testPage: HOMEPAGE_EXPERIMENTAL_TABS_BUTTON,
+  },
+  {
+    name: 'Experimental Text Test',
+    component: TextExperimentalTest,
+    testPage: HOMEPAGE_EXPERIMENTAL_TEXT_BUTTON,
+  },
   {
     name: 'FocusZone Test',
     component: FocusZoneTest,
     testPage: HOMEPAGE_FOCUSZONE_BUTTON,
   },
   {
-    name: 'Pressable Test',
-    component: PressableTest,
-    testPage: HOMEPAGE_PRESSABLE_BUTTON,
+    name: 'Icon Test',
+    component: IconTest,
+    testPage: HOMEPAGE_ICON_BUTTON,
   },
   {
     name: 'Link Test',
@@ -59,74 +97,54 @@ export const tests: TestDescription[] = [
     testPage: HOMEPAGE_MENU_BUTTON,
   },
   {
-    name: 'Separator Test',
-    component: SeparatorTest,
-    testPage: HOMEPAGE_SEPARATOR_BUTTON,
-  },
-  {
-    name: 'Text Test',
-    component: TextTest,
-    testPage: HOMEPAGE_TEXT_BUTTON,
-  },
-  {
-    name: 'Experimental Text Test',
-    component: TextExperimentalTest,
-    testPage: HOMEPAGE_EXPERIMENTAL_TEXT_BUTTON,
-  },
-  {
-    name: 'Shimmer Test',
-    component: ShimmerTest,
-    testPage: HOMEPAGE_SHIMMER_BUTTON,
-  },
-  {
-    name: 'Theme Test',
-    component: ThemeTest,
-    testPage: HOMEPAGE_THEME_BUTTON,
+    name: 'Persona Test',
+    component: PersonaTest,
+    testPage: HOMEPAGE_PERSONA_BUTTON,
   },
   {
     name: 'PersonaCoin Test',
     component: PersonaCoinTest,
     testPage: HOMEPAGE_PERSONACOIN_BUTTON,
   },
+  {
+    name: 'Pressable Test',
+    component: PressableTest,
+    testPage: HOMEPAGE_PRESSABLE_BUTTON,
+  },
   {
     name: 'RadioGroup Test',
     component: RadioGroupTest,
     testPage: HOMEPAGE_RADIOGROUP_BUTTON,
   },
   {
-    name: 'Persona Test',
-    component: PersonaTest,
-    testPage: HOMEPAGE_PERSONA_BUTTON,
-  },
-  {
-    name: 'Checkbox Test',
-    component: CheckboxTest,
-    testPage: HOMEPAGE_CHECKBOX_BUTTON,
+    name: 'Separator Test',
+    component: SeparatorTest,
+    testPage: HOMEPAGE_SEPARATOR_BUTTON,
   },
   {
-    name: 'Experimental Checkbox',
-    component: ExperimentalCheckboxTest,
-    testPage: HOMEPAGE_CHECKBOX_CHECKBOXEXPERIMENTAL,
+    name: 'Shimmer Test',
+    component: ShimmerTest,
+    testPage: HOMEPAGE_SHIMMER_BUTTON,
   },
   {
     name: 'Svg Test',
     component: SvgTest,
     testPage: HOMEPAGE_SVG_BUTTON,
   },
-  {
-    name: 'Icon Test',
-    component: IconTest,
-    testPage: HOMEPAGE_ICON_BUTTON,
-  },
   {
     name: 'Tabs Test',
     component: TabsTest,
     testPage: HOMEPAGE_TABS_BUTTON,
   },
   {
-    name: 'Experimental Tabs Test',
-    component: ExperimentalTabsTest,
-    testPage: HOMEPAGE_EXPERIMENTAL_TABS_BUTTON,
+    name: 'Text Test',
+    component: TextTest,
+    testPage: HOMEPAGE_TEXT_BUTTON,
+  },
+  {
+    name: 'Theme Test',
+    component: ThemeTest,
+    testPage: HOMEPAGE_THEME_BUTTON,
   },
   {
     name: 'Tokens Test',

apps/macos/src/Podfile

@@ -24,6 +24,7 @@ use_test_app! do |target|
   target.app do
     platform :osx, '10.14'
     pod 'FRNAvatar', :path => '../../../packages/experimental/Avatar/FRNAvatar.podspec'
+    pod 'FRNCallout', :path => '../../../packages/components/Callout/FRNCallout.podspec'
     pod 'FRNCheckbox', :path => '../../../packages/experimental/Checkbox/FRNCheckbox.podspec'
     pod 'FRNMenuButton', :path => '../../../packages/components/MenuButton/FRNMenuButton.podspec'
     pod 'FRNRadioButton', :path => '../../../packages/components/RadioGroup/FRNRadioButton.podspec'

apps/macos/src/Podfile.lock

@@ -9,15 +9,17 @@ PODS:
     - React-Core (= 0.63.41)
     - React-jsi (= 0.63.41)
     - ReactCommon/turbomodule/core (= 0.63.41)
-  - FRNAvatar (0.12.16):
+  - FRNAvatar (0.12.17):
     - MicrosoftFluentUI (= 0.3.0)
     - MicrosoftFluentUI/Avatar_ios (= 0.3.0)
     - React
-  - FRNCheckbox (0.2.8):
+  - FRNCallout (0.17.29):
     - React
-  - FRNMenuButton (0.6.15):
+  - FRNCheckbox (0.3.0):
     - React
-  - FRNRadioButton (0.13.16):
+  - FRNMenuButton (0.6.16):
+    - React
+  - FRNRadioButton (0.13.17):
     - React
   - glog (0.3.5)
   - MicrosoftFluentUI (0.3.0):
@@ -92,7 +94,7 @@ PODS:
     - boost-for-react-native
     - DoubleConversion
     - glog
-  - RCTFocusZone (0.7.31):
+  - RCTFocusZone (0.7.32):
     - React
   - RCTRequired (0.63.41)
   - RCTTypeSafety (0.63.41):
@@ -335,6 +337,7 @@ DEPENDENCIES:
   - FBLazyVector (from `../../../node_modules/react-native-macos/Libraries/FBLazyVector`)
   - FBReactNativeSpec (from `../../../node_modules/react-native-macos/Libraries/FBReactNativeSpec`)
   - FRNAvatar (from `../../../packages/experimental/Avatar/FRNAvatar.podspec`)
+  - FRNCallout (from `../../../packages/components/Callout/FRNCallout.podspec`)
   - FRNCheckbox (from `../../../packages/experimental/Checkbox/FRNCheckbox.podspec`)
   - FRNMenuButton (from `../../../packages/components/MenuButton/FRNMenuButton.podspec`)
   - FRNRadioButton (from `../../../packages/components/RadioGroup/FRNRadioButton.podspec`)
@@ -386,6 +389,8 @@ EXTERNAL SOURCES:
     :path: "../../../node_modules/react-native-macos/Libraries/FBReactNativeSpec"
   FRNAvatar:
     :path: "../../../packages/experimental/Avatar/FRNAvatar.podspec"
+  FRNCallout:
+    :path: "../../../packages/components/Callout/FRNCallout.podspec"
   FRNCheckbox:
     :path: "../../../packages/experimental/Checkbox/FRNCheckbox.podspec"
   FRNMenuButton:
@@ -454,14 +459,15 @@ SPEC CHECKSUMS:
   DoubleConversion: 56a44bcfd14ab2ff66f5a146b2e875eb4b69b19b
   FBLazyVector: 9dde2e0340ba783233dba7c6b77e65889047fbb3
   FBReactNativeSpec: 6088d5ab01851853cc3fc5384d3f5edf7c898e54
-  FRNAvatar: 0a882f889ab15c18320d23eb8928defb271c6bb7
-  FRNCheckbox: ebe46ef9b42b147b29c964090f050191ff4a8bfe
-  FRNMenuButton: cac2099d2ab79eaa882d4fcbc09dc625d81124d3
-  FRNRadioButton: 53dcd1d4e56c8be451a10aaf3348e206aa75c2ef
+  FRNAvatar: aae0394c67f2cc2863652c35ea97e27ca9d8e6db
+  FRNCallout: 678bf506e75151b7f8e1f1de6e01b2151cea78a5
+  FRNCheckbox: ee580a9d12aa96d454486138056cbdf72473978b
+  FRNMenuButton: 8d2594051a0d4ab3423a8cff55bf2a30cff62b28
+  FRNRadioButton: ed4fc4620d358f8fbf703b712132d93a89a41140
   glog: 1cb7c408c781ae8f35bbababe459b45e3dee4ec1
   MicrosoftFluentUI: b98d877a2122804132365aa167944f58ef4adb69
   RCT-Folly: 1347093ffe75e152d846f7e45a3ef901b60021aa
-  RCTFocusZone: d2ce4dedfce3371e718a1cac509e20ec6a95bf61
+  RCTFocusZone: 848540e920f453e0838d64237c7317a8565db0e1
   RCTRequired: 64eedb6cf5f0ae7d4c3925e0b9a87747d0391735
   RCTTypeSafety: a8ce68a3ce4aa22cd6a9cbf09607ad2b016b51d5
   React: a8f98b76204f8a85b22311e8fe145b7bbe5b80e5
@@ -489,6 +495,6 @@ SPEC CHECKSUMS:
   SwiftLint: 99f82d07b837b942dd563c668de129a03fc3fb52
   Yoga: 6a194db2cebcae86e56caf702b8c659f5c0da133
 
-PODFILE CHECKSUM: b54fe60c3ce918d2e858b86629d2094398e73914
+PODFILE CHECKSUM: af0f113e908b05f6bdf16aee336bceb3613a72cf
 
 COCOAPODS: 1.11.2

change/@fluentui-react-native-apple-theme-fb3b0287-8b1d-4517-8714-5725d75d6977.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix typo on click",
+  "packageName": "@fluentui-react-native/apple-theme",
+  "email": "sanajmi@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-callout-23990bff-4c18-4047-8ab0-56fe442e6d0c.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Added macOS support",
+  "packageName": "@fluentui-react-native/callout",
+  "email": "sanajmi@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-contextual-menu-1561adc2-b16b-4d5e-b5ab-1282055b5a2b.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Beta macOS support",
+  "packageName": "@fluentui-react-native/contextual-menu",
+  "email": "sanajmi@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-menu-button-ec0b1ea6-7aad-417f-800d-8e7455c03177.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fixing capitalization in some of the native code for macOS",
+  "packageName": "@fluentui-react-native/menu-button",
+  "email": "sanajmi@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-tester-d1d2b079-d242-4422-af73-b9235bb6b7f3.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Added macOS Callout and ContextualMenu tests",
+  "packageName": "@fluentui-react-native/tester",
+  "email": "sanajmi@microsoft.com",
+  "dependentChangeType": "patch"
+}

package.nuspec

@@ -19,6 +19,7 @@
 
     <!-- macOS ship -->
     <file src="DerivedData\Build\Products\Release\FRNAvatar\libFRNAvatar.a" target="Ship-macosx"/>
+    <file src="DerivedData\Build\Products\Release\FRNMenuButton\libFRNCallout.a" target="Ship-macosx"/>
     <file src="DerivedData\Build\Products\Release\FRNCheckbox\libFRNCheckbox.a" target="Ship-macosx"/>
     <file src="DerivedData\Build\Products\Release\FRNMenuButton\libFRNMenuButton.a" target="Ship-macosx"/>
     <file src="DerivedData\Build\Products\Release\FRNRadioButton\libFRNRadioButton.a" target="Ship-macosx"/>

packages/components/RadioGroup/FluentUIReactNativeRadioButton.podspec → packages/components/Callout/FRNCallout.podspec

@@ -3,7 +3,7 @@ require 'json'
 package = JSON.parse(File.read(File.join(__dir__, 'package.json')))
 
 Pod::Spec.new do |s|
-  s.name         = 'FRNRadioButton'
+  s.name         = 'FRNCallout'
   s.version      = package['version']
   s.summary      = package['description']
   s.license      = package['license']