@fluentui-react-native/callout 0.28.6 → 0.29.4

package/lib/__tests__/Callout.test.js

@@ -1,12 +1,96 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { act } from 'react';
-import * as renderer from 'react-test-renderer';
-import { Callout } from '..';
-it('Callout default props', () => {
-    let component;
-    act(() => {
-        component = renderer.create(_jsx(Callout, {}));
-    });
-    expect(component.toJSON()).toMatchSnapshot();
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "@fluentui-react-native/framework-base/jsx-runtime";
+/** @jsxImportSource @fluentui-react-native/framework-base */
+import * as React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import { act, render } from '@testing-library/react-native';
+import { isPhasedComponent, useSlot } from '@fluentui-react-native/framework-base';
+import { Callout } from '../Callout';
+import { Commands } from '../CalloutNativeComponent';
+jest.mock('react-native/Libraries/ReactNative/RendererProxy', () => ({
+    ...jest.requireActual('react-native/Libraries/ReactNative/RendererProxy'),
+    findNodeHandle: jest.fn(() => 42),
+}));
+function CalloutSlotConsumer({ callout }) {
+    const CalloutSlot = useSlot(Callout, callout);
+    return (_jsx(CalloutSlot, { accessibilityHint: "rendered as a slot", testID: "slotted-callout", children: _jsx(Text, { children: "Slot content" }) }));
+}
+describe('Callout', () => {
+    afterEach(() => {
+        jest.restoreAllMocks();
+    });
+    it('uses phased rendering and applies native-safe default styling', async () => {
+        expect(isPhasedComponent(Callout)).toBe(true);
+        const component = await render(_jsx(Callout, { testID: "callout" }));
+        const callout = component.getByTestId('callout');
+        expect(callout.type).toBe('RCTCallout');
+        expect(StyleSheet.flatten(callout.props.style)).toMatchSnapshot();
+    });
+    it('translates caller-supplied appearance values and preserves user style precedence', async () => {
+        const component = await render(_jsx(Callout, { backgroundColor: "red", borderColor: "green", borderRadius: 8, borderWidth: 2, maxHeight: 240, maxWidth: "80%", minWidth: 120, style: { backgroundColor: 'blue', opacity: 0.5 }, testID: "callout" }));
+        const callout = component.getByTestId('callout');
+        expect(StyleSheet.flatten(callout.props.style)).toEqual({
+            position: 'absolute',
+            backgroundColor: 'blue',
+            borderColor: 'green',
+            borderRadius: 8,
+            borderWidth: 2,
+            maxHeight: 240,
+            maxWidth: '80%',
+            minWidth: 120,
+            opacity: 0.5,
+        });
+        expect(callout.props.backgroundColor).toBeUndefined();
+        expect(callout.props.maxHeight).toBe(240);
+        expect(callout.props.maxWidth).toBeUndefined();
+        expect(callout.props.minWidth).toBe(120);
+    });
+    it('forwards native behavior, accessibility, callbacks, and children', async () => {
+        const onDismiss = jest.fn();
+        const onShow = jest.fn();
+        const anchorRect = { screenX: 10, screenY: 20, width: 30, height: 40 };
+        const component = await render(_jsx(Callout, { accessibilityLabel: "Formatting options", anchorRect: anchorRect, beakWidth: 12, directionalHint: "rightTopEdge", dismissBehaviors: ['preventDismissOnClickOutside'], gapSpace: 4, minPadding: 8, onDismiss: onDismiss, onShow: onShow, target: "editor-anchor", testID: "callout", children: _jsx(Text, { children: "Callout content" }) }));
+        const callout = component.getByTestId('callout');
+        expect(callout.props).toMatchObject({
+            accessibilityLabel: 'Formatting options',
+            anchorRect,
+            beakWidth: 12,
+            directionalHint: 'rightTopEdge',
+            dismissBehaviors: ['preventDismissOnClickOutside'],
+            gapSpace: 4,
+            minPadding: 8,
+            onDismiss,
+            onShow,
+            target: 'editor-anchor',
+        });
+        expect(component.getByText('Callout content')).toBeTruthy();
+    });
+    it('resolves a React target ref to its native handle', async () => {
+        const target = React.createRef();
+        const component = await render(_jsxs(_Fragment, { children: [_jsx(View, { ref: target }), _jsx(Callout, { target: target, testID: "callout" })] }));
+        expect(target.current).not.toBeNull();
+        expect(component.getByTestId('callout').props.target).toBe(42);
+    });
+    it('exposes native window commands through componentRef', async () => {
+        const focusWindow = jest.spyOn(Commands, 'focusWindow').mockImplementation(() => undefined);
+        const blurWindow = jest.spyOn(Commands, 'blurWindow').mockImplementation(() => undefined);
+        const componentRef = React.createRef();
+        await render(_jsx(Callout, { componentRef: componentRef, testID: "callout" }));
+        await act(async () => {
+            componentRef.current?.focusWindow();
+            componentRef.current?.blurWindow();
+        });
+        expect(focusWindow).toHaveBeenCalledTimes(1);
+        expect(blurWindow).toHaveBeenCalledTimes(1);
+    });
+    it('can be consumed as a slot with merged render props', async () => {
+        const component = await render(_jsx(CalloutSlotConsumer, { callout: { accessibilityLabel: 'Slotted Callout', target: 'slot-anchor' } }));
+        const callout = component.getByTestId('slotted-callout');
+        expect(callout.props).toMatchObject({
+            accessibilityHint: 'rendered as a slot',
+            accessibilityLabel: 'Slotted Callout',
+            target: 'slot-anchor',
+        });
+        expect(component.getByText('Slot content')).toBeTruthy();
+    });
 });
 //# sourceMappingURL=Callout.test.js.map

package/lib/__tests__/Callout.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"Callout.test.js","sourceRoot":"","sources":["../../src/__tests__/Callout.test.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,KAAK,QAAQ,MAAM,qBAAqB,CAAC;AAEhD,OAAO,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC;AAE7B,EAAE,CAAC,uBAAuB,EAAE,GAAG,EAAE;IAC/B,IAAI,SAAqC,CAAC;IAC1C,GAAG,CAAC,GAAG,EAAE;QACP,SAAS,GAAG,QAAQ,CAAC,MAAM,CAAC,KAAC,OAAO,KAAG,CAAC,CAAC;IAC3C,CAAC,CAAC,CAAC;IACH,MAAM,CAAC,SAAU,CAAC,MAAM,EAAE,CAAC,CAAC,eAAe,EAAE,CAAC;AAChD,CAAC,CAAC,CAAC"}
+{"version":3,"file":"Callout.test.js","sourceRoot":"","sources":["../../src/__tests__/Callout.test.tsx"],"names":[],"mappings":"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"}

package/lib/__tests__/Callout.types.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Callout.types.test.d.ts.map

package/lib/__tests__/Callout.types.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Callout.types.test.d.ts","sourceRoot":"","sources":["../../src/__tests__/Callout.types.test.ts"],"names":[],"mappings":""}

package/lib/__tests__/Callout.types.test.js

@@ -0,0 +1,21 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import * as React from 'react';
+const componentRef = React.createRef();
+const target = React.createRef();
+const props = {
+    accessibilityLabel: 'Formatting options',
+    componentRef,
+    directionalHint: 'bottomCenter',
+    target,
+};
+const calloutSlot = props;
+const legacyProps = props;
+// @ts-expect-error Callout targets must be a ref or registered native anchor identifier.
+const invalidTarget = { target: 42 };
+describe('Callout types', () => {
+    it('accepts public props as a slot contract', () => {
+        expect(calloutSlot).toBeDefined();
+        expect(legacyProps).toBeDefined();
+    });
+});
+//# sourceMappingURL=Callout.types.test.js.map

package/lib/__tests__/Callout.types.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Callout.types.test.js","sourceRoot":"","sources":["../../src/__tests__/Callout.types.test.ts"],"names":[],"mappings":"AAAA,sDAAsD;AACtD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,MAAM,YAAY,GAAG,KAAK,CAAC,SAAS,EAAiB,CAAC;AACtD,MAAM,MAAM,GAAG,KAAK,CAAC,SAAS,EAAmB,CAAC;AAElD,MAAM,KAAK,GAAiB;IAC1B,kBAAkB,EAAE,oBAAoB;IACxC,YAAY;IACZ,eAAe,EAAE,cAAc;IAC/B,MAAM;CACP,CAAC;AAEF,MAAM,WAAW,GAA6B,KAAK,CAAC;AACpD,MAAM,WAAW,GAAkB,KAAK,CAAC;AAEzC,yFAAyF;AACzF,MAAM,aAAa,GAAiB,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC;AAEnD,QAAQ,CAAC,eAAe,EAAE,GAAG,EAAE;IAC7B,EAAE,CAAC,yCAAyC,EAAE,GAAG,EAAE;QACjD,MAAM,CAAC,WAAW,CAAC,CAAC,WAAW,EAAE,CAAC;QAClC,MAAM,CAAC,WAAW,CAAC,CAAC,WAAW,EAAE,CAAC;IACpC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/lib/index.d.ts

@@ -1,5 +1,4 @@
 export { calloutName } from './Callout.types';
-export type { DirectionalHint, DismissBehaviors, ICalloutProps, ICalloutRenderData, ICalloutSlotProps, ICalloutTokens, ICalloutType, RestoreFocusEvent, } from './Callout.types';
-export type { CalloutNativeCommands } from './CalloutNativeComponent';
+export type { CalloutHandle, CalloutNativeCommands, CalloutProps, CalloutTokens, DirectionalHint, DismissBehaviors, ICalloutProps, ICalloutTokens, RestoreFocusEvent, } from './Callout.types';
 export { Callout } from './Callout';
 //# sourceMappingURL=index.d.ts.map

package/lib/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,YAAY,EACV,eAAe,EACf,gBAAgB,EAChB,aAAa,EACb,kBAAkB,EAClB,iBAAiB,EACjB,cAAc,EACd,YAAY,EACZ,iBAAiB,GAClB,MAAM,iBAAiB,CAAC;AACzB,YAAY,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,YAAY,EACV,aAAa,EACb,qBAAqB,EACrB,YAAY,EACZ,aAAa,EACb,eAAe,EACf,gBAAgB,EAChB,aAAa,EACb,cAAc,EACd,iBAAiB,GAClB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC"}

package/macos/CalloutManager.swift

@@ -4,7 +4,7 @@ import Foundation
 import React
 #endif // USE_REACT_AS_MODULE
 
-@objc(FRNCalloutManager)
+@objc(RCTCalloutManager)
 class CalloutManager: RCTViewManager {
 	override func view()->NSView! {
 		return CalloutView(bridge: bridge)

package/macos/CalloutView.swift

@@ -46,17 +46,11 @@ open class CalloutView: RCTView, CalloutWindowLifeCycleDelegate {
 
 	public weak var bridge: RCTBridge?
 
-	private init() {
-		super.init(frame: .zero)
-	}
+	@objc public override init(frame frameRect: NSRect) {
+		super.init(frame: frameRect)
 
-	public required init?(coder: NSCoder) {
-		preconditionFailure()
-	}
-
-	convenience init(bridge: RCTBridge) {
-		self.init()
-		self.bridge = bridge
+		backgroundColor = .clear
+		borderColor = .clear
 
 		// Listens for mouse clicks in the main menu bar while callout is shown
 		NotificationCenter.default.addObserver(
@@ -66,6 +60,15 @@ open class CalloutView: RCTView, CalloutWindowLifeCycleDelegate {
 			object: nil)
 	}
 
+	public required init?(coder: NSCoder) {
+		preconditionFailure()
+	}
+
+	convenience init(bridge: RCTBridge) {
+		self.init(frame: .zero)
+		self.bridge = bridge
+	}
+
 	public override func viewDidMoveToWindow() {
 		super.viewDidMoveToWindow()
 		if (window != nil) {
@@ -84,6 +87,36 @@ open class CalloutView: RCTView, CalloutWindowLifeCycleDelegate {
 		}
 	}
 
+	// MARK: Fabric interface
+
+	@objc public var contentProxyView: NSView {
+		return proxyView
+	}
+
+	@objc public func setAnchorView(_ view: NSView?) {
+		anchorView = view
+		updateCalloutFrameToAnchor()
+	}
+
+	@objc public func mountContentSubview(_ subview: NSView, at index: Int) {
+		if index >= proxyView.subviews.count {
+			proxyView.addSubview(subview)
+		} else {
+			proxyView.addSubview(subview, positioned: .below, relativeTo: proxyView.subviews[index])
+		}
+	}
+
+	@objc public func unmountContentSubview(_ subview: NSView) {
+		if subview.superview == proxyView {
+			subview.removeFromSuperview()
+		}
+	}
+
+	@objc public func updateContentSize(_ size: NSSize) {
+		proxyView.frame = NSRect(origin: .zero, size: size)
+		updateCalloutFrameToAnchor()
+	}
+
 	// MARK: RCTComponent Overrides
 
 	public override func insertReactSubview(_ subview: NSView!, at atIndex: Int) {
@@ -362,10 +395,7 @@ open class CalloutView: RCTView, CalloutWindowLifeCycleDelegate {
 
 	private func onDismissCallout() {
 		if let onDismiss = onDismiss {
-			guard let reactTag = reactTag else {
-				preconditionFailure("React Tag missing")
-			}
-			let event: [AnyHashable: Any] = ["target": reactTag]
+			let event: [AnyHashable: Any] = ["target": reactTag ?? NSNumber(value: 0)]
 			onDismiss(event)
 		}
 	}
@@ -393,10 +423,12 @@ open class CalloutView: RCTView, CalloutWindowLifeCycleDelegate {
 		 * We can't directly call touchHandler.attach(to:) because `visualEffectView` is not an RCTUIView.
 		 * We get around this limitation by just replicating what `attach` did internally: add a gestureRecognizer.
 		 */
-		guard let touchHandler = RCTTouchHandler(bridge: bridge) else {
-			preconditionFailure("Callout could not create RCTTouchHandler")
+		if let bridge = bridge {
+			guard let touchHandler = RCTTouchHandler(bridge: bridge) else {
+				preconditionFailure("Callout could not create RCTTouchHandler")
+			}
+			visualEffectView.addGestureRecognizer(touchHandler)
 		}
-		visualEffectView.addGestureRecognizer(touchHandler)
 
 		return visualEffectView
 	}()

package/macos/FRNCalloutManager.m

@@ -16,28 +16,28 @@
 	return NSMakeRect(x, y, width, height);
 }
 
-// Collapse the directional hint options to the 4 NSRectEdge options
+// Collapse the directional hint options to the 4 NSRectEdge options.
+// CalloutView uses MinY for placement above the anchor and MaxY for placement below it.
 RCT_ENUM_CONVERTER(NSRectEdge, (@{
 	@"leftTopEdge": @(NSRectEdgeMinX),
 	@"leftCenter": @(NSRectEdgeMinX),
 	@"leftBottomEdge": @(NSRectEdgeMinX),
-	@"topLeftEdge": @(NSRectEdgeMaxY),
-	@"topAutoEdge": @(NSRectEdgeMaxY),
-	@"topCenter": @(NSRectEdgeMaxY),
-	@"topRightEdge": @(NSRectEdgeMaxY),
+	@"topLeftEdge": @(NSRectEdgeMinY),
+	@"topAutoEdge": @(NSRectEdgeMinY),
+	@"topCenter": @(NSRectEdgeMinY),
+	@"topRightEdge": @(NSRectEdgeMinY),
 	@"rightTopEdge": @(NSRectEdgeMaxX),
 	@"rightCenter": @(NSRectEdgeMaxX),
 	@"rightBottomEdge": @(NSRectEdgeMaxX),
-	@"bottomLeftEdge": @(NSRectEdgeMinY),
-  @"bottonLeftEdge": @(NSRectEdgeMinY), // Add both the correct and incorrect spellings during the transition period
-	@"bottomAutoEdge": @(NSRectEdgeMinY),
-	@"bottomCenter": @(NSRectEdgeMinY),
-	@"bottomRightEdge": @(NSRectEdgeMinY),
+	@"bottomLeftEdge": @(NSRectEdgeMaxY),
+	@"bottomAutoEdge": @(NSRectEdgeMaxY),
+	@"bottomCenter": @(NSRectEdgeMaxY),
+	@"bottomRightEdge": @(NSRectEdgeMaxY),
 }), NSRectEdgeMaxY, integerValue);
 
 @end
 
-@interface RCT_EXTERN_MODULE(FRNCalloutManager, RCTViewManager)
+@interface RCT_EXTERN_MODULE(RCTCalloutManager, RCTViewManager)
 
 RCT_EXPORT_METHOD(focusWindow : (nonnull NSNumber *)viewTag)
 {

package/macos/RCTCalloutComponentView.h

@@ -0,0 +1,12 @@
+#ifdef RCT_NEW_ARCH_ENABLED
+
+#import <React/RCTViewComponentView.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+@interface RCTCalloutComponentView : RCTViewComponentView
+@end
+
+NS_ASSUME_NONNULL_END
+
+#endif

package/macos/RCTCalloutComponentView.mm

@@ -0,0 +1,209 @@
+#ifdef RCT_NEW_ARCH_ENABLED
+
+#import "RCTCalloutComponentView.h"
+
+#import <react/renderer/components/FRNCalloutSpec/ComponentDescriptors.h>
+#import <react/renderer/components/FRNCalloutSpec/EventEmitters.h>
+#import <react/renderer/components/FRNCalloutSpec/Props.h>
+#import <react/renderer/components/FRNCalloutSpec/RCTComponentViewHelpers.h>
+
+#import <React/RCTComponent.h>
+#import <React/RCTComponentViewProtocol.h>
+#import <React/RCTConversions.h>
+#import <React/RCTSurfaceTouchHandler.h>
+#import <React/RCTView.h>
+
+#import "FRNCallout-Swift.h"
+
+using namespace facebook::react;
+
+static NSRectEdge RCTNSRectEdgeFromDirectionalHint(CalloutDirectionalHint hint)
+{
+  // CalloutView uses MinY for placement above the anchor and MaxY for placement below it.
+  switch (hint) {
+    case CalloutDirectionalHint::LeftTopEdge:
+    case CalloutDirectionalHint::LeftCenter:
+    case CalloutDirectionalHint::LeftBottomEdge:
+      return NSRectEdgeMinX;
+    case CalloutDirectionalHint::TopLeftEdge:
+    case CalloutDirectionalHint::TopAutoEdge:
+    case CalloutDirectionalHint::TopCenter:
+    case CalloutDirectionalHint::TopRightEdge:
+      return NSRectEdgeMinY;
+    case CalloutDirectionalHint::RightTopEdge:
+    case CalloutDirectionalHint::RightCenter:
+    case CalloutDirectionalHint::RightBottomEdge:
+      return NSRectEdgeMaxX;
+    case CalloutDirectionalHint::BottomLeftEdge:
+    case CalloutDirectionalHint::BottomAutoEdge:
+    case CalloutDirectionalHint::BottomCenter:
+    case CalloutDirectionalHint::BottomRightEdge:
+      return NSRectEdgeMaxY;
+  }
+}
+
+static void RCTApplyCalloutAppearance(
+    FRNCalloutView *calloutView,
+    const CalloutProps &props,
+    const LayoutMetrics &layoutMetrics)
+{
+  const auto borderMetrics = props.resolveBorderMetrics(layoutMetrics);
+  calloutView.backgroundColor = RCTUIColorFromSharedColor(props.backgroundColor) ?: NSColor.clearColor;
+  calloutView.borderColor = RCTUIColorFromSharedColor(borderMetrics.borderColors.left) ?: NSColor.clearColor;
+  calloutView.borderWidth = borderMetrics.borderWidths.left;
+  calloutView.borderRadius = borderMetrics.borderRadii.topLeft.horizontal;
+  [calloutView setNeedsDisplay:YES];
+}
+
+static RCTPlatformView *RCTFindComponentViewWithTag(RCTPlatformView *rootView, NSInteger tag)
+{
+  if ([rootView conformsToProtocol:@protocol(RCTComponentViewProtocol)] &&
+      [((id<RCTComponentViewProtocol>)rootView).reactTag integerValue] == tag) {
+    return rootView;
+  }
+
+  for (RCTPlatformView *subview in rootView.subviews) {
+    RCTPlatformView *match = RCTFindComponentViewWithTag(subview, tag);
+    if (match) {
+      return match;
+    }
+  }
+
+  return nil;
+}
+
+@interface RCTCalloutComponentView () <RCTCalloutViewProtocol>
+@end
+
+@implementation RCTCalloutComponentView {
+  FRNCalloutView *_calloutView;
+  NSInteger _targetTag;
+  RCTSurfaceTouchHandler *_touchHandler;
+}
+
++ (ComponentDescriptorProvider)componentDescriptorProvider
+{
+  // Fabric normalizes the legacy RCT-prefixed view name before component lookup.
+  return concreteComponentDescriptorProvider<CalloutComponentDescriptor>();
+}
+
+- (instancetype)initWithFrame:(CGRect)frame
+{
+  if (self = [super initWithFrame:frame]) {
+    static const auto defaultProps = std::make_shared<const CalloutProps>();
+    _props = defaultProps;
+
+    // This view manages content mounted in the Callout window and must not render in the React surface.
+    self.hidden = YES;
+
+    _calloutView = [[FRNCalloutView alloc] initWithFrame:self.bounds];
+
+    __weak RCTCalloutComponentView *weakSelf = self;
+    _calloutView.onShow = ^(__unused NSDictionary *event) {
+      [weakSelf emitOnShow];
+    };
+    _calloutView.onDismiss = ^(__unused NSDictionary *event) {
+      [weakSelf emitOnDismiss];
+    };
+
+    _touchHandler = [RCTSurfaceTouchHandler new];
+    [_touchHandler attachToView:_calloutView.contentProxyView];
+
+    self.contentView = _calloutView;
+  }
+  return self;
+}
+
+- (void)mountChildComponentView:(RCTUIView<RCTComponentViewProtocol> *)childComponentView index:(NSInteger)index
+{
+  [_calloutView mountContentSubview:childComponentView at:index];
+}
+
+- (void)unmountChildComponentView:(RCTUIView<RCTComponentViewProtocol> *)childComponentView index:(__unused NSInteger)index
+{
+  [_calloutView unmountContentSubview:childComponentView];
+}
+
+- (void)updateProps:(const Props::Shared &)props oldProps:(const Props::Shared &)oldProps
+{
+  const auto &newProps = *std::static_pointer_cast<const CalloutProps>(props);
+
+  _calloutView.directionalHint = RCTNSRectEdgeFromDirectionalHint(newProps.directionalHint);
+  _calloutView.setInitialFocus = newProps.setInitialFocus;
+
+  const auto &rect = newProps.anchorRect;
+  _calloutView.anchorRect = NSMakeRect(rect.screenX, rect.screenY, rect.width, rect.height);
+
+  _targetTag = 0;
+  if (newProps.target.isNumber()) {
+    _targetTag = (NSInteger)newProps.target.asDouble();
+  }
+  [self updateAnchorView];
+  RCTApplyCalloutAppearance(_calloutView, newProps, _layoutMetrics);
+
+  [super updateProps:props oldProps:oldProps];
+}
+
+- (void)viewDidMoveToWindow
+{
+  [super viewDidMoveToWindow];
+  [self updateAnchorView];
+}
+
+- (void)updateLayoutMetrics:(const LayoutMetrics &)layoutMetrics
+           oldLayoutMetrics:(const LayoutMetrics &)oldLayoutMetrics
+{
+  [super updateLayoutMetrics:layoutMetrics oldLayoutMetrics:oldLayoutMetrics];
+
+  const auto size = layoutMetrics.frame.size;
+  [_calloutView updateContentSize:NSMakeSize(size.width, size.height)];
+
+  const auto &props = *std::static_pointer_cast<const CalloutProps>(_props);
+  RCTApplyCalloutAppearance(_calloutView, props, layoutMetrics);
+}
+
+- (void)prepareForRecycle
+{
+  [super prepareForRecycle];
+  _targetTag = 0;
+  [_calloutView setAnchorView:nil];
+}
+
+- (void)handleCommand:(const NSString *)commandName args:(const NSArray *)args
+{
+  RCTCalloutHandleCommand(self, commandName, args);
+}
+
+- (void)focusWindow
+{
+  [_calloutView focusWindow];
+}
+
+- (void)blurWindow
+{
+  [_calloutView blurWindow];
+}
+
+- (void)updateAnchorView
+{
+  RCTPlatformView *rootView = self.window.contentView;
+  [_calloutView setAnchorView:_targetTag > 0 && rootView ? RCTFindComponentViewWithTag(rootView, _targetTag) : nil];
+}
+
+- (void)emitOnShow
+{
+  if (_eventEmitter) {
+    std::static_pointer_cast<const CalloutEventEmitter>(_eventEmitter)->onShow({.target = 0});
+  }
+}
+
+- (void)emitOnDismiss
+{
+  if (_eventEmitter) {
+    std::static_pointer_cast<const CalloutEventEmitter>(_eventEmitter)->onDismiss({.target = 0});
+  }
+}
+
+@end
+
+#endif

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui-react-native/callout",
-  "version": "0.28.6",
+  "version": "0.29.4",
   "description": "A cross-platform Callout component using the Fluent Design System",
   "homepage": "https://github.com/microsoft/fluentui-react-native",
   "license": "MIT",
@@ -8,7 +8,7 @@
   "repository": {
     "type": "git",
     "url": "https://github.com/microsoft/fluentui-react-native.git",
-    "directory": "packages/components/Callout"
+    "directory": "packages/native/Callout"
   },
   "type": "module",
   "main": "lib/index.js",
@@ -31,11 +31,7 @@
     "update-snapshots": "fluentui-scripts jest -u"
   },
   "dependencies": {
-    "@fluentui-react-native/adapters": "0.15.0",
-    "@fluentui-react-native/tokens": "0.24.6",
-    "@uifabricshared/foundation-composable": "0.15.0",
-    "@uifabricshared/foundation-compose": "1.16.6",
-    "@uifabricshared/foundation-settings": "0.16.6"
+    "@fluentui-react-native/framework-base": "0.7.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
@@ -46,13 +42,15 @@
     "@react-native-community/cli-platform-ios": "^20.0.0",
     "@react-native/babel-preset": "^0.81.0",
     "@react-native/metro-config": "^0.81.0",
+    "@testing-library/react-native": "^14.0.1",
     "@types/react": "~19.1.4",
     "@types/react-test-renderer": "^19.1.0",
     "react": "19.1.4",
     "react-native": "^0.81.6",
     "react-native-macos": "^0.81.0",
     "react-native-windows": "^0.81.0",
-    "react-test-renderer": "19.1.4"
+    "react-test-renderer": "19.1.4",
+    "test-renderer": "1.1.0"
   },
   "peerDependencies": {
     "@office-iss/react-native-win32": "^0.74.0 || ^0.81.0",
@@ -78,12 +76,30 @@
   },
   "codegenConfig": {
     "name": "FRNCalloutSpec",
-    "type": "components",
-    "jsSrcsDir": "lib"
+    "type": "all",
+    "jsSrcsDir": "src",
+    "ios": {
+      "componentProvider": {
+        "Callout": "RCTCalloutComponentView"
+      }
+    },
+    "windows": {
+      "generators": "componentsWindows",
+      "namespace": "winrt::FluentUI::Callout::Codegen",
+      "outputDirectory": "windows/Callout/codegen",
+      "separateDataTypes": true
+    }
   },
   "furn": {
     "jestPlatform": "win32"
   },
+  "react-native-windows": {
+    "init-windows": {
+      "name": "Callout",
+      "namespace": "FluentUI.Callout",
+      "template": "cpp-lib"
+    }
+  },
   "rnx-kit": {
     "kitType": "library",
     "alignDeps": {

package/react-native.config.cjs

@@ -0,0 +1,15 @@
+module.exports = {
+  dependency: {
+    platforms: {
+      windows: {
+        sourceDir: 'windows',
+        projects: [
+          {
+            projectFile: 'Callout/Callout.vcxproj',
+            directDependency: true,
+          },
+        ],
+      },
+    },
+  },
+};