@fluentui-react-native/callout 0.29.6 → 0.29.8

package/src/Callout.types.ts

@@ -1,106 +0,0 @@
-import type * as React from 'react';
-import type { AnimatableNumericValue, ColorValue, KeyboardMetrics, ViewProps } from 'react-native';
-
-export const calloutName = 'Callout';
-
-export type DirectionalHint =
-  | 'leftTopEdge'
-  | 'leftCenter'
-  | 'leftBottomEdge'
-  | 'topLeftEdge'
-  | 'topAutoEdge'
-  | 'topCenter'
-  | 'topRightEdge'
-  | 'rightTopEdge'
-  | 'rightCenter'
-  | 'rightBottomEdge'
-  | 'bottomLeftEdge'
-  | 'bottomAutoEdge'
-  | 'bottomCenter'
-  | 'bottomRightEdge';
-
-export type DismissBehaviors = 'preventDismissOnKeyDown' | 'preventDismissOnClickOutside';
-
-export interface RestoreFocusEvent {
-  nativeEvent: {
-    /** True when the Callout contained focus while it was dismissed. */
-    containsFocus: boolean;
-  };
-}
-
-/**
- * Optional native appearance and positioning values. Callout applies only values
- * supplied by the caller and does not resolve theme defaults.
- */
-export interface CalloutTokens {
-  /** Anchor rectangle in DIPs relative to the React surface origin. */
-  anchorRect?: KeyboardMetrics;
-  /** Native Callout background color. */
-  backgroundColor?: ColorValue;
-  /** Width of the beak that points toward the anchor. */
-  beakWidth?: number;
-  /** Native Callout border color. */
-  borderColor?: ColorValue;
-  /** Native Callout corner radius. */
-  borderRadius?: AnimatableNumericValue | string;
-  /** Native Callout border width. */
-  borderWidth?: number;
-  /** Preferred placement relative to the anchor. */
-  directionalHint?: DirectionalHint;
-  /** Native dismissal behaviors that may be combined. */
-  dismissBehaviors?: DismissBehaviors[];
-  /** Gap between the anchor and Callout. */
-  gapSpace?: number;
-  /** Maximum Callout height. */
-  maxHeight?: number | `${number}%`;
-  /** Maximum Callout width. */
-  maxWidth?: number | `${number}%`;
-  /** Minimum padding from display edges. */
-  minPadding?: number;
-  /** Minimum Callout width. */
-  minWidth?: number | `${number}%`;
-}
-
-export interface CalloutHandle {
-  /** Makes the native Callout window resign key status. */
-  blurWindow: () => void;
-  /** Makes the native Callout window key. */
-  focusWindow: () => void;
-}
-
-export interface CalloutProps extends ViewProps, CalloutTokens {
-  /**
-   * A string announced when the Callout is shown.
-   * @platform win32
-   */
-  accessibilityOnShowAnnouncement?: string;
-  /** Ref used to invoke native Callout window commands. */
-  componentRef?: React.Ref<CalloutHandle>;
-  /**
-   * Prevents the native Callout from taking pointer capture when shown.
-   * @platform win32
-   */
-  doNotTakePointerCapture?: boolean;
-  /** Displays a beak that points toward the anchor. */
-  isBeakVisible?: boolean;
-  /** Invoked after native dismissal. */
-  onDismiss?: () => void;
-  /**
-   * Invoked during dismissal when the caller owns focus restoration.
-   * @platform win32
-   */
-  onRestoreFocus?: (event: RestoreFocusEvent) => void;
-  /** Invoked after the Callout is shown. */
-  onShow?: () => void;
-  /** Requests initial focus when the Callout is shown. */
-  setInitialFocus?: boolean;
-  /** Ref or registered native anchor identifier used for relative positioning. */
-  target?: React.RefObject<React.Component | null> | string;
-}
-
-/** @deprecated Use CalloutProps. */
-export type ICalloutProps = CalloutProps;
-/** @deprecated Use CalloutTokens. */
-export type ICalloutTokens = CalloutTokens;
-/** @deprecated Use CalloutHandle. */
-export type CalloutNativeCommands = CalloutHandle;

package/src/CalloutNativeComponent.ts

@@ -1,74 +0,0 @@
-import codegenNativeCommands from 'react-native/Libraries/Utilities/codegenNativeCommands';
-import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
-
-import type { HostComponent, ViewProps } from 'react-native';
-import type { WithDefault, UnsafeMixed, Int32, DirectEventHandler, Double } from 'react-native/Libraries/Types/CodegenTypes';
-
-interface AnchorRect {
-  screenX: Double;
-  screenY: Double;
-  width: Double;
-  height: Double;
-}
-
-/**
- * Shared native props specific to Callout native component
- */
-export interface NativeProps extends ViewProps {
-  accessibilityLabel?: string;
-  accessibilityOnShowAnnouncement?: string;
-  anchorRect?: AnchorRect;
-
-  beakWidth?: Int32;
-  dismissBehaviors?: string[];
-  doNotTakePointerCapture?: boolean;
-  focusable?: boolean;
-  gapSpace?: Int32;
-  isBeakVisible?: boolean;
-  maxHeight?: Int32;
-  maxWidth?: Int32;
-  minPadding?: Int32;
-  minWidth?: Int32;
-  setInitialFocus?: boolean;
-
-  // targetAnchor?: string; // Win32 only Callout can target an anchor registered in the anchor registry // Can be a node id or an anchor ID - This need to be reworked as Mixed types are not supported going forward
-  testID?: string;
-
-  onRestoreFocus?: DirectEventHandler<{ target: Int32; containsFocus: boolean }>;
-  onDismiss?: DirectEventHandler<{ target: Int32 }>;
-  onShow?: DirectEventHandler<{ target: Int32 }>;
-
-  directionalHint?: WithDefault<
-    | 'leftTopEdge'
-    | 'leftCenter'
-    | 'leftBottomEdge'
-    | 'topLeftEdge'
-    | 'topAutoEdge'
-    | 'topCenter'
-    | 'topRightEdge'
-    | 'rightTopEdge'
-    | 'rightCenter'
-    | 'rightBottomEdge'
-    | 'bottomLeftEdge'
-    | 'bottomAutoEdge'
-    | 'bottomCenter'
-    | 'bottomRightEdge',
-    'bottomLeftEdge'
-  >;
-  target?: UnsafeMixed;
-}
-
-export type CalloutComponentType = HostComponent<NativeProps>;
-
-interface NativeCalloutCommands {
-  focusWindow: (viewRef: React.ElementRef<CalloutComponentType>) => void;
-  blurWindow: (viewRef: React.ElementRef<CalloutComponentType>) => void;
-}
-
-export const Commands: NativeCalloutCommands = codegenNativeCommands<NativeCalloutCommands>({
-  supportedCommands: ['blurWindow', 'focusWindow'],
-});
-
-export default codegenNativeComponent<NativeProps>('Callout', {
-  paperComponentName: 'RCTCallout',
-}) as CalloutComponentType;

package/src/__tests__/Callout.test.tsx

@@ -1,157 +0,0 @@
-/** @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 type { SlotProp } from '@fluentui-react-native/framework-base';
-
-import { Callout } from '../Callout';
-import type { CalloutHandle } from '../Callout.types';
-import { Commands } from '../CalloutNativeComponent';
-
-jest.mock('react-native/Libraries/ReactNative/RendererProxy', () => ({
-  ...jest.requireActual('react-native/Libraries/ReactNative/RendererProxy'),
-  findNodeHandle: jest.fn(() => 42),
-}));
-
-type CalloutSlotConsumerProps = {
-  callout: SlotProp<typeof Callout>;
-};
-
-function CalloutSlotConsumer({ callout }: CalloutSlotConsumerProps) {
-  const CalloutSlot = useSlot(Callout, callout);
-  return (
-    <CalloutSlot accessibilityHint="rendered as a slot" testID="slotted-callout">
-      <Text>Slot content</Text>
-    </CalloutSlot>
-  );
-}
-
-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(<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(
-      <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(
-      <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"
-      >
-        <Text>Callout content</Text>
-      </Callout>,
-    );
-    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<View>();
-    const component = await render(
-      <>
-        <View ref={target} />
-        <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<CalloutHandle>();
-
-    await render(<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(<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();
-  });
-});

package/src/__tests__/Callout.types.test.ts

@@ -1,30 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import * as React from 'react';
-
-import type { SlotProp } from '@fluentui-react-native/framework-base';
-
-import type { Callout } from '../Callout';
-import type { CalloutHandle, CalloutProps, ICalloutProps } from '../Callout.types';
-
-const componentRef = React.createRef<CalloutHandle>();
-const target = React.createRef<React.Component>();
-
-const props: CalloutProps = {
-  accessibilityLabel: 'Formatting options',
-  componentRef,
-  directionalHint: 'bottomCenter',
-  target,
-};
-
-const calloutSlot: SlotProp<typeof Callout> = props;
-const legacyProps: ICalloutProps = props;
-
-// @ts-expect-error Callout targets must be a ref or registered native anchor identifier.
-const invalidTarget: CalloutProps = { target: 42 };
-
-describe('Callout types', () => {
-  it('accepts public props as a slot contract', () => {
-    expect(calloutSlot).toBeDefined();
-    expect(legacyProps).toBeDefined();
-  });
-});

package/src/__tests__/__snapshots__/Callout.test.tsx.snap

@@ -1,11 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Callout uses phased rendering and applies native-safe default styling 1`] = `
-{
-  "backgroundColor": "#00000000",
-  "borderColor": "#00000000",
-  "borderRadius": 0,
-  "borderWidth": 0,
-  "position": "absolute",
-}
-`;

package/tsconfig.json

@@ -1,19 +0,0 @@
-{
-  "extends": "@fluentui-react-native/scripts/tsconfig",
-  "compilerOptions": {
-    "outDir": "lib",
-    "rootDir": "src",
-    "composite": true,
-    "tsBuildInfoFile": ".cache/tsconfig.tsbuildinfo"
-  },
-  "include": ["src"],
-  "exclude": ["**/*.stories.ts", "**/*.stories.tsx"],
-  "references": [
-    {
-      "path": "../../framework-base/tsconfig.json"
-    },
-    {
-      "path": "../../../scripts/tsconfig.json"
-    }
-  ]
-}