@fluentui-react-native/callout 0.29.6 → 0.29.8

package/macos/RCTCalloutComponentView.mm

@@ -1,209 +0,0 @@
-#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/react-native.config.cjs

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

package/src/Callout.stories.tsx

@@ -1,276 +0,0 @@
-/** @jsxImportSource @fluentui-react-native/framework-base */
-import * as React from 'react';
-import { Pressable, StyleSheet, Text, View } from 'react-native';
-
-import type { Meta, StoryObj } from '@storybook/react-native';
-
-import { Callout } from './Callout';
-import type { CalloutHandle, CalloutProps, DirectionalHint } from './Callout.types';
-
-const directionalHints: readonly DirectionalHint[] = [
-  'leftTopEdge',
-  'leftCenter',
-  'leftBottomEdge',
-  'topLeftEdge',
-  'topAutoEdge',
-  'topCenter',
-  'topRightEdge',
-  'rightTopEdge',
-  'rightCenter',
-  'rightBottomEdge',
-  'bottomLeftEdge',
-  'bottomAutoEdge',
-  'bottomCenter',
-  'bottomRightEdge',
-];
-
-type CalloutExampleProps = CalloutProps & {
-  defaultVisible?: boolean;
-  showWindowCommands?: boolean;
-};
-
-const CalloutExample = ({ defaultVisible = false, onDismiss, onShow, showWindowCommands = false, ...props }: CalloutExampleProps) => {
-  const anchorRef = React.useRef<View>(null);
-  const calloutRef = React.useRef<CalloutHandle>(null);
-  const [visible, setVisible] = React.useState(defaultVisible);
-  const [status, setStatus] = React.useState(defaultVisible ? 'Opening' : 'Closed');
-
-  const dismiss = React.useCallback(() => {
-    setVisible(false);
-    setStatus('Dismissed');
-    onDismiss?.();
-  }, [onDismiss]);
-
-  const show = React.useCallback(() => {
-    setStatus('Shown');
-    onShow?.();
-  }, [onShow]);
-
-  return (
-    <View style={styles.story}>
-      <View>
-        <Pressable
-          accessibilityRole="button"
-          onPress={() => {
-            setVisible((current) => !current);
-            setStatus(visible ? 'Closed' : 'Opening');
-          }}
-          ref={anchorRef}
-          style={({ pressed }) => [styles.trigger, pressed && styles.triggerPressed]}
-          testID="agentic-storybook-callout-trigger"
-        >
-          <Text style={styles.triggerText}>{visible ? 'Close callout' : 'Open callout'}</Text>
-        </Pressable>
-      </View>
-      <Text accessibilityLiveRegion="polite" style={styles.status} testID="agentic-storybook-callout-status">
-        Native window: {status}
-      </Text>
-      {visible && (
-        <Callout {...props} componentRef={calloutRef} onDismiss={dismiss} onShow={show} target={anchorRef}>
-          <View style={styles.calloutContent} collapsable={false}>
-            <Text style={styles.heading}>Fabric Callout</Text>
-            <Text style={styles.body}>This content is hosted in a separate native window.</Text>
-            {showWindowCommands && (
-              <View style={styles.commandRow}>
-                <Pressable accessibilityRole="button" onPress={() => calloutRef.current?.focusWindow()} style={styles.command}>
-                  <Text>Focus window</Text>
-                </Pressable>
-                <Pressable accessibilityRole="button" onPress={() => calloutRef.current?.blurWindow()} style={styles.command}>
-                  <Text>Blur window</Text>
-                </Pressable>
-              </View>
-            )}
-          </View>
-        </Callout>
-      )}
-    </View>
-  );
-};
-
-type Placement = {
-  hint: DirectionalHint;
-  label: string;
-};
-
-const placements: readonly Placement[] = [
-  { hint: 'topCenter', label: 'Above' },
-  { hint: 'rightCenter', label: 'Right' },
-  { hint: 'bottomCenter', label: 'Below' },
-  { hint: 'leftCenter', label: 'Left' },
-];
-
-const PlacementExample = (props: CalloutProps) => {
-  const aboveRef = React.useRef<View>(null);
-  const rightRef = React.useRef<View>(null);
-  const belowRef = React.useRef<View>(null);
-  const leftRef = React.useRef<View>(null);
-  const targetRefs = [aboveRef, rightRef, belowRef, leftRef] as const;
-  const [selectedIndex, setSelectedIndex] = React.useState<number>();
-
-  return (
-    <View style={styles.placementStory}>
-      {placements.map(({ hint, label }, index) => (
-        <View key={hint} style={styles.placementAnchor}>
-          <Pressable
-            accessibilityRole="button"
-            onPress={() => setSelectedIndex(index)}
-            ref={targetRefs[index]}
-            style={({ pressed }) => [styles.trigger, pressed && styles.triggerPressed]}
-            testID={`agentic-storybook-callout-placement-${hint}-trigger`}
-          >
-            <Text style={styles.triggerText}>{label}</Text>
-          </Pressable>
-        </View>
-      ))}
-      {selectedIndex !== undefined && (
-        <Callout
-          {...props}
-          directionalHint={placements[selectedIndex].hint}
-          onDismiss={() => setSelectedIndex(undefined)}
-          target={targetRefs[selectedIndex]}
-        >
-          <View accessible style={styles.calloutContent} collapsable={false} testID="agentic-storybook-callout-placement-content">
-            <Text style={styles.heading}>{placements[selectedIndex].label}</Text>
-            <Text style={styles.body}>Click outside the native window to dismiss it.</Text>
-          </View>
-        </Callout>
-      )}
-    </View>
-  );
-};
-
-const meta: Meta<typeof Callout> = {
-  title: 'Native/Callout',
-  component: Callout,
-  args: {
-    accessibilityLabel: 'Callout example',
-    accessibilityRole: 'dialog',
-    backgroundColor: '#ffffff',
-    borderColor: '#d1d1d1',
-    borderRadius: 8,
-    borderWidth: 1,
-    directionalHint: 'bottomCenter',
-    maxWidth: 320,
-    setInitialFocus: false,
-    testID: 'agentic-storybook-callout',
-  },
-  argTypes: {
-    backgroundColor: { control: 'color' },
-    borderColor: { control: 'color' },
-    borderRadius: { control: { type: 'number', min: 0, max: 24, step: 1 } },
-    borderWidth: { control: { type: 'number', min: 0, max: 8, step: 1 } },
-    directionalHint: { control: 'select', options: directionalHints },
-    maxHeight: { control: { type: 'number', min: 80, max: 600, step: 20 } },
-    maxWidth: { control: { type: 'number', min: 120, max: 600, step: 20 } },
-    minWidth: { control: { type: 'number', min: 80, max: 400, step: 20 } },
-    setInitialFocus: { control: 'boolean' },
-  },
-  parameters: {
-    docs: {
-      description: {
-        component:
-          'Callout is an unstyled native primitive that presents React content in a transient window positioned relative to a target.',
-      },
-    },
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof Callout>;
-
-export const Default: Story = {
-  render: (args) => <CalloutExample {...args} defaultVisible />,
-};
-
-export const Placement: Story = {
-  render: (args) => <PlacementExample {...args} />,
-  parameters: {
-    docs: {
-      description: {
-        story: 'Each trigger requests one of four placement edges. The native Callout remains within the available work area.',
-      },
-    },
-  },
-};
-
-export const WindowCommands: Story = {
-  args: {
-    setInitialFocus: true,
-  },
-  render: (args) => <CalloutExample {...args} defaultVisible showWindowCommands />,
-  parameters: {
-    docs: {
-      description: {
-        story: 'The content buttons exercise Fabric touch handling and the imperative focusWindow and blurWindow native commands.',
-      },
-    },
-  },
-};
-
-const styles = StyleSheet.create({
-  body: {
-    color: '#424242',
-    marginTop: 6,
-  },
-  calloutContent: {
-    backgroundColor: '#ffffff',
-    borderColor: '#d1d1d1',
-    borderRadius: 8,
-    borderWidth: 1,
-    padding: 16,
-    width: 280,
-  },
-  command: {
-    backgroundColor: '#f5f5f5',
-    borderColor: '#d1d1d1',
-    borderRadius: 4,
-    borderWidth: 1,
-    paddingHorizontal: 12,
-    paddingVertical: 8,
-  },
-  commandRow: {
-    flexDirection: 'row',
-    gap: 8,
-    marginTop: 16,
-  },
-  heading: {
-    color: '#242424',
-    fontSize: 16,
-    fontWeight: '600',
-  },
-  placementAnchor: {
-    margin: 32,
-  },
-  placementStory: {
-    alignItems: 'center',
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    justifyContent: 'center',
-    minHeight: 300,
-    width: 520,
-  },
-  status: {
-    color: '#616161',
-    marginTop: 12,
-  },
-  story: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    minHeight: 300,
-    width: 520,
-  },
-  trigger: {
-    backgroundColor: '#0f6cbd',
-    borderRadius: 4,
-    paddingHorizontal: 16,
-    paddingVertical: 10,
-  },
-  triggerPressed: {
-    backgroundColor: '#115ea3',
-  },
-  triggerText: {
-    color: '#ffffff',
-    fontWeight: '600',
-  },
-});

package/src/Callout.tsx

@@ -1,111 +0,0 @@
-/** @jsxImportSource @fluentui-react-native/framework-base */
-import * as React from 'react';
-import { findNodeHandle, StyleSheet } from 'react-native';
-
-import { directComponent, mergeProps, phasedComponent } from '@fluentui-react-native/framework-base';
-
-import type { CalloutProps } from './Callout.types';
-import { calloutName } from './Callout.types';
-import NativeCalloutView, { Commands } from './CalloutNativeComponent';
-
-const colorTransparent = '#00000000';
-
-const styles = StyleSheet.create({
-  root: {
-    position: 'absolute',
-  },
-});
-
-/**
- * Renders the native Callout without applying theme or appearance defaults.
- */
-export const Callout = phasedComponent<CalloutProps>((props) => {
-  const { componentRef, target } = props;
-  const nativeComponentRef = React.useRef<React.ElementRef<typeof NativeCalloutView> | null>(null);
-  const [nativeTarget, setNativeTarget] = React.useState<number | string | undefined>(undefined);
-
-  React.useImperativeHandle(
-    componentRef,
-    () => ({
-      blurWindow() {
-        if (nativeComponentRef.current !== null) {
-          Commands.blurWindow(nativeComponentRef.current);
-        }
-      },
-      focusWindow() {
-        if (nativeComponentRef.current !== null) {
-          Commands.focusWindow(nativeComponentRef.current);
-        }
-      },
-    }),
-    [],
-  );
-
-  React.useLayoutEffect(() => {
-    if (typeof target === 'string') {
-      setNativeTarget(target);
-    } else if (target?.current) {
-      setNativeTarget(findNodeHandle(target.current) ?? undefined);
-    } else {
-      setNativeTarget(undefined);
-    }
-  }, [target]);
-
-  return directComponent<CalloutProps>((renderProps) => {
-    const {
-      anchorRect,
-      backgroundColor,
-      beakWidth,
-      borderColor,
-      borderRadius,
-      borderWidth,
-      componentRef: _componentRef,
-      directionalHint,
-      dismissBehaviors,
-      gapSpace,
-      maxHeight,
-      maxWidth,
-      minPadding,
-      minWidth,
-      style,
-      target: _target,
-      ...nativeProps
-    } = mergeProps(props, renderProps);
-
-    /**
-     * Build the style for the callout based on the props. For `borderColor`, `borderWidth`, `backgroundColor`, and
-     * `borderRadius` defaults values are required otherwise crashes in CalloutView.swift:updateLayer() will occur.
-     */
-    const calloutStyle = {
-      backgroundColor: backgroundColor ?? colorTransparent,
-      borderColor: borderColor ?? colorTransparent,
-      borderWidth: borderWidth ?? 0,
-      borderRadius: borderRadius ?? 0,
-      ...(maxHeight != null && { maxHeight }),
-      ...(maxWidth != null && { maxWidth }),
-      ...(minWidth != null && { minWidth }),
-    };
-
-    return (
-      <NativeCalloutView
-        {...nativeProps}
-        anchorRect={anchorRect}
-        beakWidth={beakWidth}
-        directionalHint={directionalHint}
-        dismissBehaviors={dismissBehaviors}
-        gapSpace={gapSpace}
-        maxHeight={typeof maxHeight === 'number' ? maxHeight : undefined}
-        maxWidth={typeof maxWidth === 'number' ? maxWidth : undefined}
-        minPadding={minPadding}
-        minWidth={typeof minWidth === 'number' ? minWidth : undefined}
-        ref={nativeComponentRef}
-        style={[styles.root, calloutStyle, style]}
-        {...(nativeTarget !== undefined && { target: nativeTarget })}
-      />
-    );
-  });
-});
-
-Callout.displayName = calloutName;
-
-export default Callout;