@fluentui-react-native/callout 0.28.6 → 0.29.4

package/windows/Callout/Callout.cpp

@@ -0,0 +1,420 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+#include "pch.h"
+
+#include "Callout.h"
+
+#include <winrt/Microsoft.UI.Content.h>
+#include <winrt/Microsoft.UI.Input.h>
+#include <winrt/Microsoft.UI.Windowing.h>
+#include <winrt/Microsoft.UI.interop.h>
+#include <winrt/Windows.System.h>
+
+namespace winrt::FluentUI::Callout {
+
+enum class DirectionalHint {
+  LeftTopEdge,
+  LeftCenter,
+  LeftBottomEdge,
+  TopLeftEdge,
+  TopAutoEdge,
+  TopCenter,
+  TopRightEdge,
+  RightTopEdge,
+  RightCenter,
+  RightBottomEdge,
+  BottomLeftEdge,
+  BottomAutoEdge,
+  BottomCenter,
+  BottomRightEdge
+};
+
+DirectionalHint parseDirectionHint(std::string &directionHint) {
+  if (directionHint == "leftTopEdge") {
+    return DirectionalHint::LeftTopEdge;
+  } else if (directionHint == "leftCenter") {
+    return DirectionalHint::LeftCenter;
+  } else if (directionHint == "leftBottomEdge") {
+    return DirectionalHint::LeftBottomEdge;
+  } else if (directionHint == "topLeftEdge") {
+    return DirectionalHint::TopLeftEdge;
+  } else if (directionHint == "topAutoEdge") {
+    return DirectionalHint::TopAutoEdge;
+  } else if (directionHint == "topCenter") {
+    return DirectionalHint::TopCenter;
+  } else if (directionHint == "topRightEdge") {
+    return DirectionalHint::TopRightEdge;
+  } else if (directionHint == "rightTopEdge") {
+    return DirectionalHint::RightTopEdge;
+  } else if (directionHint == "rightCenter") {
+    return DirectionalHint::RightCenter;
+  } else if (directionHint == "rightBottomEdge") {
+    return DirectionalHint::RightBottomEdge;
+  } else if (directionHint == "bottomLeftEdge") {
+    return DirectionalHint::BottomLeftEdge;
+  } else if (directionHint == "bottomAutoEdge") {
+    return DirectionalHint::BottomAutoEdge;
+  } else if (directionHint == "bottomCenter") {
+    return DirectionalHint::BottomCenter;
+  } else if (directionHint == "bottomRightEdge") {
+    return DirectionalHint::BottomRightEdge;
+  }
+
+  return DirectionalHint::LeftTopEdge;
+}
+
+struct CalloutComponentView
+    : public winrt::implements<CalloutComponentView,
+                               winrt::Windows::Foundation::IInspectable>,
+      Codegen::BaseCallout<CalloutComponentView> {
+  ~CalloutComponentView() {
+    if (m_popup && !m_popup.IsClosed()) {
+      /*
+      // Unregister closing event handler
+      if (m_appWindowClosingToken)
+      {
+              m_rnWindow.AppWindow().Closing(m_appWindowClosingToken);
+              m_appWindowClosingToken = {};
+      }
+      */
+
+      // Hide popup
+      if (m_popup.IsVisible()) {
+        m_popup.Hide();
+      }
+
+      if (m_rnWindow.AppWindow()) {
+        m_rnWindow.Close();
+        m_rnWindow = nullptr;
+      }
+
+      // Close bridge
+      m_popup.Close();
+      m_popup = nullptr;
+    }
+  }
+
+  void UpdateProps(const winrt::Microsoft::ReactNative::ComponentView &view,
+                   const winrt::com_ptr<Codegen::CalloutProps> &newProps,
+                   const winrt::com_ptr<Codegen::CalloutProps>
+                       &oldProps) noexcept override {
+    if (!oldProps || newProps->directionalHint != oldProps->directionalHint) {
+      m_directionalHint =
+          newProps->directionalHint
+              ? parseDirectionHint(newProps->directionalHint.value())
+              : DirectionalHint::LeftTopEdge;
+
+      auto portal = view.as<
+          winrt::Microsoft::ReactNative::Composition::PortalComponentView>();
+      if (portal.ContentRoot().Children().Size() != 0) {
+        AdjustWindowSize(
+            portal.ContentRoot().Children().GetAt(0).LayoutMetrics());
+      }
+    }
+
+    __super::UpdateProps(view, newProps, oldProps);
+  }
+
+  void InitializePortalViewComponent(
+      const winrt::Microsoft::ReactNative::Composition::PortalComponentView
+          &portalComponentView) noexcept {
+    m_reactContext = portalComponentView.ReactContext();
+
+    portalComponentView.Mounted([](const auto & /*sender*/, const auto &view) {
+      view.UserData().as<CalloutComponentView>()->OnMounted(view);
+    });
+    portalComponentView.Unmounted(
+        [](const auto & /*sender*/, const auto &view) {
+          view.UserData().as<CalloutComponentView>()->OnUnmounted(view);
+        });
+  }
+
+  void HandleFocusWindowCommand() noexcept override {
+    // nyi
+  }
+
+  // You must provide an implementation of this method to handle the
+  // "blurWindow" command
+  void HandleBlurWindowCommand() noexcept override {
+    // nyi
+  }
+
+  void MountChildComponentView(
+      const winrt::Microsoft::ReactNative::ComponentView & /*view*/,
+      const winrt::Microsoft::ReactNative::MountChildComponentViewArgs
+          &args) noexcept override {
+    AdjustWindowSize(args.Child().LayoutMetrics());
+    // TODO These asserts are currently hit if the root view of the callout is collapsed.
+    // Need to handle this case
+    // assert(args.Index() == 0);
+    // assert(!m_childLayoutMetricsToken);
+    m_childLayoutMetricsToken = args.Child().LayoutMetricsChanged(
+        [wkThis = get_weak()](
+            auto &/*sender*/,
+            const winrt::Microsoft::ReactNative::LayoutMetricsChangedArgs
+                &layoutMetricsChangedArgs) {
+          if (auto strongThis = wkThis.get()) {
+            strongThis->AdjustWindowSize(
+                layoutMetricsChangedArgs.NewLayoutMetrics());
+          }
+        });
+  }
+
+  void UnmountChildComponentView(
+      const winrt::Microsoft::ReactNative::ComponentView & /*view*/,
+      const winrt::Microsoft::ReactNative::UnmountChildComponentViewArgs
+          &args) noexcept override {
+      // TODO These asserts are currently hit if the root view of the callout is collapsed.
+      // Need to handle this case
+      // assert(args.Index() == 0);
+    // assert(m_childLayoutMetricsToken);
+    args.Child().LayoutMetricsChanged(m_childLayoutMetricsToken);
+    // m_childLayoutMetricsToken.value = 0;
+  }
+
+private:
+  void
+  OnMounted(const winrt::Microsoft::ReactNative::ComponentView &view) noexcept {
+    assert(!m_mounted);
+    m_mounted = true;
+
+    CreatePopup(view);
+
+    m_showQueued = true;
+
+    m_reactContext.UIDispatcher().Post(
+        [wkThis = get_weak(), wkView = winrt::weak_ref(view)]() {
+          if (auto strongThis = wkThis.get()) {
+            strongThis->m_showQueued = false;
+
+            if (!strongThis->m_mounted) {
+              return;
+            }
+            if (auto v = wkView.get()) {
+              strongThis->Show();
+            }
+          }
+        });
+  }
+
+  void OnUnmounted(
+      const winrt::Microsoft::ReactNative::ComponentView & /*view*/) noexcept {
+    assert(m_mounted);
+    m_mounted = false;
+  }
+
+  void OnLightDismissDismissed(
+      const winrt::Microsoft::UI::Input::InputLightDismissAction &,
+      const winrt::Microsoft::UI::Input::InputLightDismissEventArgs &) {
+    HidePopup();
+  }
+
+  void HidePopup() {
+    if (!m_popup)
+      return;
+    m_popup.Hide();
+    if (auto eventEmitter = EventEmitter())
+      eventEmitter->onDismiss({});
+  }
+
+  void CreatePopup(
+      const winrt::Microsoft::ReactNative::ComponentView &view) noexcept {
+    if (m_popup)
+      return;
+
+    auto portal = view.as<
+        winrt::Microsoft::ReactNative::Composition::PortalComponentView>();
+    m_popup = winrt::Microsoft::UI::Content::DesktopPopupSiteBridge::Create(
+        portal.Parent()
+            .as<winrt::Microsoft::ReactNative::Composition::ComponentView>()
+            .Root()
+            .ReactNativeIsland()
+            .Island());
+
+    assert(!m_rnWindow);
+    m_rnWindow = winrt::Microsoft::ReactNative::ReactNativeWindow::
+        CreateFromContentSiteBridgeAndIsland(
+            m_popup,
+            winrt::Microsoft::ReactNative::ReactNativeIsland::CreatePortal(
+                portal));
+    m_rnWindow.ResizePolicy(
+        winrt::Microsoft::ReactNative::ContentSizePolicy::None);
+
+    auto inputLightDismissAction =
+        winrt::Microsoft::UI::Input::InputLightDismissAction::GetForWindowId(
+            m_rnWindow.AppWindow().Id());
+    inputLightDismissAction.Dismissed(
+        {get_weak(), &CalloutComponentView::OnLightDismissDismissed});
+
+    if (portal.ContentRoot().Children().Size()) {
+      AdjustWindowSize(
+          portal.ContentRoot().Children().GetAt(0).LayoutMetrics());
+    }
+  }
+
+  void RegisterLightDismissAction() noexcept {}
+
+  void Show() noexcept {
+    m_popup.Show();
+
+    winrt::Microsoft::UI::Input::InputFocusController::GetForIsland(
+        m_rnWindow.ReactNativeIsland().Island())
+        .TrySetFocus();
+    m_rnWindow.ReactNativeIsland().NavigateFocus(
+        winrt::Microsoft::ReactNative::FocusNavigationRequest::
+            FocusNavigationRequest(
+                winrt::Microsoft::ReactNative::FocusNavigationReason::First));
+
+    if (auto eventEmitter = EventEmitter()) {
+      eventEmitter->onShow({});
+    }
+  }
+
+  void AdjustWindowSize(const winrt::Microsoft::ReactNative::LayoutMetrics
+                            &layoutMetrics) noexcept {
+    if (!m_rnWindow) {
+      return;
+    }
+
+    if (layoutMetrics.Frame.Width == 0 && layoutMetrics.Frame.Height == 0) {
+      return;
+    }
+
+    // Calculate physical pixels from DIPs
+    int32_t clientWidthPx = static_cast<int32_t>(
+        layoutMetrics.Frame.Width * layoutMetrics.PointScaleFactor);
+    int32_t clientHeightPx = static_cast<int32_t>(
+        layoutMetrics.Frame.Height * layoutMetrics.PointScaleFactor);
+
+    // Size the client area directly
+    m_rnWindow.AppWindow().ResizeClient({clientWidthPx, clientHeightPx});
+
+    // Target can be either a view tag of a view to anchor to, or a string for
+    // an anchor id
+    if (Props()->target.Type() ==
+        winrt::Microsoft::ReactNative::JSValueType::Int64) {
+      auto targetView = winrt::Microsoft::ReactNative::Composition::
+          CompositionUIService::ComponentFromReactTag(
+              m_reactContext.Handle(), Props()->target.AsInt64());
+      auto targetPos = ViewToScreenOffset(targetView);
+      auto targetScaleFactor =
+          targetView.LayoutMetrics().PointScaleFactor;
+      auto targetWidthPx = static_cast<int32_t>(
+          targetView.LayoutMetrics().Frame.Width * targetScaleFactor);
+      auto targetHeightPx = static_cast<int32_t>(
+          targetView.LayoutMetrics().Frame.Height * targetScaleFactor);
+      auto targetRight = targetPos.X + targetWidthPx;
+      auto targetBottom = targetPos.Y + targetHeightPx;
+      auto targetCenterX = targetPos.X + targetWidthPx / 2;
+      auto targetCenterY = targetPos.Y + targetHeightPx / 2;
+
+      POINT anchorPoint{targetPos.X, targetPos.Y};
+      SIZE windowSize{clientWidthPx, clientHeightPx};
+
+      RECT excludeRect{targetPos.X, targetPos.Y, targetRight, targetBottom};
+
+      UINT flags = 0;
+
+      if (m_directionalHint == DirectionalHint::LeftTopEdge) {
+        anchorPoint = {targetPos.X, targetPos.Y};
+        flags = TPM_RIGHTALIGN | TPM_TOPALIGN | TPM_HORIZONTAL;
+      } else if (m_directionalHint == DirectionalHint::LeftCenter) {
+        anchorPoint = {targetPos.X, targetCenterY};
+        flags = TPM_RIGHTALIGN | TPM_VCENTERALIGN | TPM_HORIZONTAL;
+      } else if (m_directionalHint == DirectionalHint::LeftBottomEdge) {
+        anchorPoint = {targetPos.X, targetBottom};
+        flags = TPM_RIGHTALIGN | TPM_BOTTOMALIGN | TPM_HORIZONTAL;
+      } else if (m_directionalHint == DirectionalHint::TopLeftEdge) {
+        anchorPoint = {targetPos.X, targetPos.Y};
+        flags = TPM_LEFTALIGN | TPM_BOTTOMALIGN | TPM_VERTICAL;
+      } else if (m_directionalHint == DirectionalHint::TopAutoEdge) {
+        anchorPoint = {targetPos.X, targetPos.Y};
+        flags = TPM_LEFTALIGN | TPM_BOTTOMALIGN | TPM_VERTICAL;
+      } else if (m_directionalHint == DirectionalHint::TopCenter) {
+        anchorPoint = {targetCenterX, targetPos.Y};
+        flags = TPM_CENTERALIGN | TPM_BOTTOMALIGN | TPM_VERTICAL;
+      } else if (m_directionalHint == DirectionalHint::TopRightEdge) {
+        anchorPoint = {targetRight, targetPos.Y};
+        flags = TPM_RIGHTALIGN | TPM_BOTTOMALIGN | TPM_VERTICAL;
+      } else if (m_directionalHint == DirectionalHint::RightTopEdge) {
+        anchorPoint = {targetRight, targetPos.Y};
+        flags = TPM_LEFTALIGN | TPM_TOPALIGN | TPM_HORIZONTAL;
+      } else if (m_directionalHint == DirectionalHint::RightCenter) {
+        anchorPoint = {targetRight, targetCenterY};
+        flags = TPM_LEFTALIGN | TPM_VCENTERALIGN | TPM_HORIZONTAL;
+      } else if (m_directionalHint == DirectionalHint::RightBottomEdge) {
+        anchorPoint = {targetRight, targetBottom};
+        flags = TPM_LEFTALIGN | TPM_BOTTOMALIGN | TPM_HORIZONTAL;
+      } else if (m_directionalHint == DirectionalHint::BottomLeftEdge) {
+        anchorPoint = {targetPos.X, targetBottom};
+        flags = TPM_LEFTALIGN | TPM_TOPALIGN | TPM_VERTICAL;
+      } else if (m_directionalHint == DirectionalHint::BottomAutoEdge) {
+        anchorPoint = {targetPos.X, targetBottom};
+        flags = TPM_LEFTALIGN | TPM_TOPALIGN | TPM_VERTICAL;
+      } else if (m_directionalHint == DirectionalHint::BottomCenter) {
+        anchorPoint = {targetCenterX, targetBottom};
+        flags = TPM_CENTERALIGN | TPM_TOPALIGN | TPM_VERTICAL;
+      } else if (m_directionalHint == DirectionalHint::BottomRightEdge) {
+        anchorPoint = {targetRight, targetBottom};
+        flags = TPM_RIGHTALIGN | TPM_TOPALIGN | TPM_VERTICAL;
+      }
+
+      flags |= TPM_WORKAREA;
+
+      RECT finalPos;
+
+      CalculatePopupWindowPosition(&anchorPoint, &windowSize, flags,
+                                   &excludeRect, &finalPos);
+
+      m_rnWindow.AppWindow().Move({finalPos.left, finalPos.top});
+    } else {
+      // TODO target named anchors
+      m_rnWindow.AppWindow().Move({0, 0});
+    }
+  };
+
+  winrt::Windows::Graphics::PointInt32
+  ViewToScreenOffset(const winrt::Microsoft::ReactNative::ComponentView &view) {
+    winrt::Windows::Foundation::Point pt{
+        (view.LayoutMetrics().Frame.X) * view.LayoutMetrics().PointScaleFactor,
+        (view.LayoutMetrics().Frame.Y) * view.LayoutMetrics().PointScaleFactor};
+
+    for (auto p = view.Parent(); p; p = p.Parent()) {
+      pt.X += p.LayoutMetrics().Frame.X * p.LayoutMetrics().PointScaleFactor;
+      pt.Y += p.LayoutMetrics().Frame.Y * p.LayoutMetrics().PointScaleFactor;
+    }
+
+    auto root =
+        view.as<winrt::Microsoft::ReactNative::Composition::ComponentView>()
+            .Root();
+    auto cc = root.ReactNativeIsland().Island().CoordinateConverter();
+    return cc.ConvertLocalToScreen(pt);
+  }
+
+  DirectionalHint m_directionalHint{DirectionalHint::LeftTopEdge};
+  bool m_showQueued{false};
+  bool m_mounted{false};
+  winrt::event_token m_childLayoutMetricsToken;
+  winrt::Microsoft::UI::Content::DesktopPopupSiteBridge m_popup{nullptr};
+  winrt::Microsoft::ReactNative::ReactNativeWindow m_rnWindow{nullptr};
+  winrt::Microsoft::ReactNative::ReactContext m_reactContext{nullptr};
+};
+
+} // namespace winrt::FluentUI::Callout
+
+void RegisterCalloutComponentView(
+    winrt::Microsoft::ReactNative::IReactPackageBuilder const &packageBuilder) {
+  winrt::FluentUI::Callout::Codegen::RegisterCalloutNativeComponent<
+      winrt::FluentUI::Callout::CalloutComponentView>(
+      packageBuilder, [](const winrt::Microsoft::ReactNative::Composition::
+                             IReactCompositionViewComponentBuilder &builder) {
+        builder.SetPortalComponentViewInitializer(
+            [](const winrt::Microsoft::ReactNative::Composition::
+                   PortalComponentView &portalComponentView) noexcept {
+              auto userData = winrt::make_self<
+                  winrt::FluentUI::Callout::CalloutComponentView>();
+              userData->InitializePortalViewComponent(portalComponentView);
+              portalComponentView.UserData(*userData);
+            });
+      });
+};

package/windows/Callout/Callout.def

@@ -0,0 +1,3 @@
+EXPORTS
+DllCanUnloadNow = WINRT_CanUnloadNow                    PRIVATE
+DllGetActivationFactory = WINRT_GetActivationFactory    PRIVATE

package/windows/Callout/Callout.h

@@ -0,0 +1,25 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+#pragma once
+
+#include "pch.h"
+
+#include "NativeModules.h"
+
+#include "codegen/react/components/FRNCalloutSpec/Callout.g.h"
+
+#include <winrt/Microsoft.ReactNative.Composition.Experimental.h>
+#include <winrt/Microsoft.ReactNative.Composition.Input.h>
+#include <winrt/Microsoft.ReactNative.Composition.h>
+#include <winrt/Microsoft.ReactNative.h>
+#include <winrt/Microsoft.UI.Composition.h>
+#include <winrt/Microsoft.UI.Content.h>
+#include <winrt/Microsoft.UI.interop.h>
+#include <winrt/Windows.UI.h>
+
+namespace winrt::FluentUI::Callout {
+
+} // namespace winrt::FluentUI::Callout
+
+void RegisterCalloutComponentView(
+    winrt::Microsoft::ReactNative::IReactPackageBuilder const &packageBuilder);

package/windows/Callout/Callout.vcxproj

@@ -0,0 +1,152 @@
+<?xml version="1.0" encoding="utf-8"?>
+<Project ToolsVersion="16.0" DefaultTargets="Build" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
+  <Import Project="$(SolutionDir)\ExperimentalFeatures.props" Condition="Exists('$(SolutionDir)\ExperimentalFeatures.props')" />
+  <Import Project="$(SolutionDir)\packages\Microsoft.Windows.CppWinRT.2.0.210621.3\build\native\Microsoft.Windows.CppWinRT.props" Condition="Exists('$(SolutionDir)\packages\Microsoft.Windows.CppWinRT.2.0.210621.3\build\native\Microsoft.Windows.CppWinRT.props')" />
+  <PropertyGroup Label="Globals">
+    <CppWinRTOptimized>true</CppWinRTOptimized>
+    <CppWinRTRootNamespaceAutoMerge>true</CppWinRTRootNamespaceAutoMerge>
+    <MinimalCoreWin>true</MinimalCoreWin>
+    <ProjectGuid>{FE36524A-FE8C-456A-9368-08FB1EB16CF8}</ProjectGuid>
+    <ProjectName>FluentUICallout</ProjectName>
+    <RootNamespace>FluentUI.Callout</RootNamespace>
+    <DefaultLanguage>en-US</DefaultLanguage>
+    <MinimumVisualStudioVersion>16.0</MinimumVisualStudioVersion>
+    <AppContainerApplication>false</AppContainerApplication>
+    <ApplicationType>Windows Store</ApplicationType>
+    <ApplicationTypeRevision>10.0</ApplicationTypeRevision>
+    <WindowsTargetPlatformVersion Condition=" '$(WindowsTargetPlatformVersion)' == '' ">10.0.19041.0</WindowsTargetPlatformVersion>
+    <WindowsTargetPlatformMinVersion>10.0.17763.0</WindowsTargetPlatformMinVersion>
+  </PropertyGroup>
+  <PropertyGroup Label="ReactNativeWindowsProps">
+    <ReactNativeWindowsDir Condition="'$(ReactNativeWindowsDir)' == ''">$([MSBuild]::GetDirectoryNameOfFileAbove($(SolutionDir), 'node_modules\react-native-windows\package.json'))\node_modules\react-native-windows\</ReactNativeWindowsDir>
+    <RnwNewArchOnly>true</RnwNewArchOnly>
+  </PropertyGroup>
+  <Import Project="$(ReactNativeWindowsDir)\PropertySheets\External\Microsoft.ReactNative.WindowsSdk.Default.props" />
+  <Import Project="$(VCTargetsPath)\Microsoft.Cpp.Default.props" />
+  <ItemGroup Label="ProjectConfigurations">
+    <ProjectConfiguration Include="Debug|ARM">
+      <Configuration>Debug</Configuration>
+      <Platform>ARM</Platform>
+    </ProjectConfiguration>
+    <ProjectConfiguration Include="Debug|ARM64">
+      <Configuration>Debug</Configuration>
+      <Platform>ARM64</Platform>
+    </ProjectConfiguration>
+    <ProjectConfiguration Include="Debug|Win32">
+      <Configuration>Debug</Configuration>
+      <Platform>Win32</Platform>
+    </ProjectConfiguration>
+    <ProjectConfiguration Include="Debug|x64">
+      <Configuration>Debug</Configuration>
+      <Platform>x64</Platform>
+    </ProjectConfiguration>
+    <ProjectConfiguration Include="Release|ARM">
+      <Configuration>Release</Configuration>
+      <Platform>ARM</Platform>
+    </ProjectConfiguration>
+    <ProjectConfiguration Include="Release|ARM64">
+      <Configuration>Release</Configuration>
+      <Platform>ARM64</Platform>
+    </ProjectConfiguration>
+    <ProjectConfiguration Include="Release|Win32">
+      <Configuration>Release</Configuration>
+      <Platform>Win32</Platform>
+    </ProjectConfiguration>
+    <ProjectConfiguration Include="Release|x64">
+      <Configuration>Release</Configuration>
+      <Platform>x64</Platform>
+    </ProjectConfiguration>
+  </ItemGroup>
+  <PropertyGroup Label="Configuration">
+    <ConfigurationType>DynamicLibrary</ConfigurationType>
+    <CharacterSet>Unicode</CharacterSet>
+    <GenerateManifest>false</GenerateManifest>
+  </PropertyGroup>
+  <PropertyGroup Condition="'$(Configuration)'=='Debug'" Label="Configuration">
+    <UseDebugLibraries>true</UseDebugLibraries>
+    <LinkIncremental>true</LinkIncremental>
+  </PropertyGroup>
+  <PropertyGroup Condition="'$(Configuration)'=='Release'" Label="Configuration">
+    <UseDebugLibraries>false</UseDebugLibraries>
+    <WholeProgramOptimization>true</WholeProgramOptimization>
+    <LinkIncremental>false</LinkIncremental>
+  </PropertyGroup>
+  <Import Project="$(VCTargetsPath)\Microsoft.Cpp.props" />
+  <ImportGroup Label="ExtensionSettings">
+  </ImportGroup>
+  <ImportGroup Label="PropertySheets">
+    <Import Project="$(UserRootDir)\Microsoft.Cpp.$(Platform).user.props" Condition="exists('$(UserRootDir)\Microsoft.Cpp.$(Platform).user.props')" Label="LocalAppDataPlatform" />
+  </ImportGroup>
+  <ImportGroup Label="ReactNativeWindowsPropertySheets">
+    <Import Project="$(ReactNativeWindowsDir)\PropertySheets\external\Microsoft.ReactNative.Composition.CppLib.props" Condition="Exists('$(ReactNativeWindowsDir)\PropertySheets\External\Microsoft.ReactNative.Composition.CppLib.props')" />
+  </ImportGroup>
+  <PropertyGroup Label="UserMacros" />
+  <ItemDefinitionGroup>
+    <ClCompile>
+      <PrecompiledHeader>Use</PrecompiledHeader>
+      <PrecompiledHeaderFile>pch.h</PrecompiledHeaderFile>
+      <PrecompiledHeaderOutputFile>$(IntDir)pch.pch</PrecompiledHeaderOutputFile>
+      <WarningLevel>Level4</WarningLevel>
+      <AdditionalOptions>%(AdditionalOptions) /bigobj</AdditionalOptions>
+      <DisableSpecificWarnings>4453;28204</DisableSpecificWarnings>
+      <PreprocessorDefinitions>_WINRT_DLL;%(PreprocessorDefinitions)</PreprocessorDefinitions>
+      <AdditionalUsingDirectories>$(WindowsSDK_WindowsMetadata);$(AdditionalUsingDirectories)</AdditionalUsingDirectories>
+    </ClCompile>
+    <Link>
+      <AdditionalDependencies>User32.lib;%(AdditionalDependencies)</AdditionalDependencies>
+      <SubSystem>Console</SubSystem>
+      <GenerateWindowsMetadata>true</GenerateWindowsMetadata>
+      <ModuleDefinitionFile>Callout.def</ModuleDefinitionFile>
+    </Link>
+  </ItemDefinitionGroup>
+  <ItemDefinitionGroup Condition="'$(Configuration)'=='Debug'">
+    <ClCompile>
+      <PreprocessorDefinitions>_DEBUG;%(PreprocessorDefinitions)</PreprocessorDefinitions>
+    </ClCompile>
+  </ItemDefinitionGroup>
+  <ItemDefinitionGroup Condition="'$(Configuration)'=='Release'">
+    <ClCompile>
+      <PreprocessorDefinitions>NDEBUG;%(PreprocessorDefinitions)</PreprocessorDefinitions>
+    </ClCompile>
+  </ItemDefinitionGroup>
+  <ItemDefinitionGroup>
+    <Reference>
+      <Private Condition="'$(ConfigurationType)' != 'Application'">false</Private>
+    </Reference>
+  </ItemDefinitionGroup>
+  <ItemGroup>
+    <ClInclude Include="Callout.h" />
+    <ClInclude Include="ReactPackageProvider.h">
+      <DependentUpon>ReactPackageProvider.idl</DependentUpon>
+    </ClInclude>
+    <ClInclude Include="pch.h" />
+  </ItemGroup>
+  <ItemGroup>
+    <ClCompile Include="Callout.cpp" />
+    <ClCompile Include="pch.cpp">
+      <PrecompiledHeader>Create</PrecompiledHeader>
+    </ClCompile>
+    <ClCompile Include="ReactPackageProvider.cpp">
+      <DependentUpon>ReactPackageProvider.idl</DependentUpon>
+    </ClCompile>
+    <ClCompile Include="$(GeneratedFilesDir)module.g.cpp" />
+  </ItemGroup>
+  <ItemGroup>
+    <Midl Include="ReactPackageProvider.idl" />
+  </ItemGroup>
+  <ItemGroup>
+    <None Include="packages.config" />
+    <None Include="PropertySheet.props" />
+  </ItemGroup>
+  <Import Project="$(VCTargetsPath)\Microsoft.Cpp.targets" />
+  <ImportGroup Label="ReactNativeWindowsTargets">
+    <Import Project="$(ReactNativeWindowsDir)\PropertySheets\External\Microsoft.ReactNative.Composition.CppLib.targets" Condition="Exists('$(ReactNativeWindowsDir)\PropertySheets\External\Microsoft.ReactNative.Composition.CppLib.targets')" />
+  </ImportGroup>
+  <Target Name="EnsureReactNativeWindowsTargets" BeforeTargets="PrepareForBuild">
+    <PropertyGroup>
+      <ErrorText>This project references targets in your node_modules\react-native-windows folder that are missing. The missing file is {0}.</ErrorText>
+    </PropertyGroup>
+    <Error Condition="!Exists('$(ReactNativeWindowsDir)\PropertySheets\External\Microsoft.ReactNative.Composition.CppLib.props')" Text="$([System.String]::Format('$(ErrorText)', '$(ReactNativeWindowsDir)\PropertySheets\External\Microsoft.ReactNative.Composition.CppLib.props'))" />
+    <Error Condition="!Exists('$(ReactNativeWindowsDir)\PropertySheets\External\Microsoft.ReactNative.Composition.CppLib.targets')" Text="$([System.String]::Format('$(ErrorText)', '$(ReactNativeWindowsDir)\PropertySheets\External\Microsoft.ReactNative.Composition.CppLib.targets'))" />
+  </Target>
+</Project>

package/windows/Callout/ReactPackageProvider.cpp

@@ -0,0 +1,25 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+#include "pch.h"
+
+#include "ReactPackageProvider.h"
+#if __has_include("ReactPackageProvider.g.cpp")
+#include "ReactPackageProvider.g.cpp"
+#endif
+
+#include "Callout.h"
+
+using namespace winrt::Microsoft::ReactNative;
+
+namespace winrt::FluentUI::Callout::implementation {
+
+void ReactPackageProvider::CreatePackage(
+    IReactPackageBuilder const &packageBuilder) noexcept {
+  AddAttributedModules(packageBuilder, true);
+
+#ifdef RNW_NEW_ARCH
+  RegisterCalloutComponentView(packageBuilder);
+#endif // #ifdef RNW_NEW_ARCH
+}
+
+} // namespace winrt::FluentUI::Callout::implementation

package/windows/Callout/ReactPackageProvider.h

@@ -0,0 +1,25 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+#pragma once
+
+#include "ReactPackageProvider.g.h"
+
+using namespace winrt::Microsoft::ReactNative;
+
+namespace winrt::FluentUI::Callout::implementation {
+
+struct ReactPackageProvider : ReactPackageProviderT<ReactPackageProvider> {
+  ReactPackageProvider() = default;
+
+  void CreatePackage(IReactPackageBuilder const &packageBuilder) noexcept;
+};
+
+} // namespace winrt::FluentUI::Callout::implementation
+
+namespace winrt::FluentUI::Callout::factory_implementation {
+
+struct ReactPackageProvider
+    : ReactPackageProviderT<ReactPackageProvider,
+                            implementation::ReactPackageProvider> {};
+
+} // namespace winrt::FluentUI::Callout::factory_implementation

package/windows/Callout/ReactPackageProvider.idl

@@ -0,0 +1,12 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+namespace FluentUI.Callout
+{
+  [webhosthidden]
+  [default_interface]
+  runtimeclass ReactPackageProvider : Microsoft.ReactNative.IReactPackageProvider
+  {
+    ReactPackageProvider();
+  };
+}

package/windows/Callout/codegen/.clang-format

@@ -0,0 +1,2 @@
+DisableFormat: true
+SortIncludes: false