Windows Components

/**
 * Native Windows flyout component for contextual UI overlays
 * Provides intelligent placement and automatic positioning
 */
interface IFlyoutProps extends ViewProps {
  /** Controls flyout visibility */
  isOpen?: boolean;
  /** Flyout placement relative to target */
  placement?: Placement;
  /** Target element to position flyout relative to */
  target?: React.ReactNode;
  /** Callback when flyout is dismissed */
  onDismiss?: (isOpen: boolean) => void;
  /** Enables light dismiss (click outside to close) */
  isLightDismissEnabled?: boolean;
  /** Automatically focus flyout when opened */
  autoFocus?: boolean;
  /** Shows overlay backdrop behind flyout */
  isOverlayEnabled?: boolean;
  /** Flyout show mode behavior */
  showMode?: ShowMode;
  /** Horizontal offset in pixels */
  horizontalOffset?: number;
  /** Vertical offset in pixels */
  verticalOffset?: number;
  /** Constrains flyout to root bounds */
  shouldConstrainToRootBounds?: boolean;
}

declare const Flyout: React.ComponentType<IFlyoutProps>;

import React, { useState } from 'react';
import { View, Text, Pressable, Flyout } from 'react-native-windows';

const FlyoutExample: React.FC = () => {
  const [showFlyout, setShowFlyout] = useState(false);

  return (
    <View>
      <Pressable onPress={() => setShowFlyout(true)}>
        <Text>Show Menu</Text>
      </Pressable>

      <Flyout
        isOpen={showFlyout}
        onDismiss={() => setShowFlyout(false)}
        placement="bottom-edge-aligned-left"
        isLightDismissEnabled={true}
        autoFocus={true}
        target={
          <View style={{ padding: 16, backgroundColor: 'white', borderRadius: 8 }}>
            <Pressable onPress={() => console.log('Option 1')}>
              <Text>Option 1</Text>
            </Pressable>
            <Pressable onPress={() => console.log('Option 2')}>
              <Text>Option 2</Text>
            </Pressable>
          </View>
        }
      />
    </View>
  );
};

/**
 * Windows glyph component for font-based icons
 * Integrates with Windows font system and supports color fonts
 */
interface GlyphProps extends ViewProps {
  /** Font file URI or system font name */
  fontUri: string;
  /** Glyph character or Unicode value */
  glyph: string;
  /** Font size in device-independent pixels */
  emSize?: number;
  /** Enables color font rendering */
  colorEnabled?: boolean;
  /** Glyph styling properties */
  style?: GlyphStyle;
}

interface GlyphStyle extends ViewStyle {
  /** Glyph color */
  color?: string;
  /** Font weight */
  fontWeight?: 'normal' | 'bold' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900';
  /** Font style */
  fontStyle?: 'normal' | 'italic';
}

declare const Glyph: React.ComponentType<GlyphProps>;

import React from 'react';
import { View, Glyph } from 'react-native-windows';

const GlyphExample: React.FC = () => {
  return (
    <View>
      {/* Using Segoe MDL2 Assets font */}
      <Glyph
        fontUri="ms-appx:///Assets/Fonts/SegoeUI.ttf"
        glyph="&#xE700;"
        emSize={24}
        style={{ color: '#0078d4' }}
      />

      {/* Using system font with color support */}
      <Glyph
        fontUri="Segoe UI Emoji"
        glyph="🚀"
        emSize={32}
        colorEnabled={true}
      />

      {/* Custom font glyph */}
      <Glyph
        fontUri="ms-appx:///Assets/Fonts/CustomIcons.ttf"
        glyph="A"
        emSize={20}
        style={{
          color: '#ff4444',
          fontWeight: 'bold'
        }}
      />
    </View>
  );
};

/**
 * Windows popup component for lightweight contextual content
 * Provides automatic positioning and focus management
 */
interface IPopupProps extends ViewProps {
  /** Controls popup visibility */
  isOpen?: boolean;
  /** Target element to position popup relative to */
  target?: React.ReactNode;
  /** Callback when popup is dismissed */
  onDismiss?: () => void;
  /** Enables light dismiss behavior */
  isLightDismissEnabled?: boolean;
  /** Automatically focus popup when opened */
  autoFocus?: boolean;
  /** Horizontal offset in pixels */
  horizontalOffset?: number;
  /** Vertical offset in pixels */
  verticalOffset?: number;
}

declare const Popup: React.ComponentType<IPopupProps>;

import React, { useState } from 'react';
import { View, Text, Pressable, Popup } from 'react-native-windows';

const PopupExample: React.FC = () => {
  const [showTooltip, setShowTooltip] = useState(false);

  return (
    <View>
      <Pressable
        onMouseEnter={() => setShowTooltip(true)}
        onMouseLeave={() => setShowTooltip(false)}
      >
        <Text>Hover for tooltip</Text>
      </Pressable>

      <Popup
        isOpen={showTooltip}
        onDismiss={() => setShowTooltip(false)}
        isLightDismissEnabled={false}
        horizontalOffset={0}
        verticalOffset={-5}
        target={
          <View style={{
            backgroundColor: '#333',
            padding: 8,
            borderRadius: 4,
            maxWidth: 200
          }}>
            <Text style={{ color: 'white', fontSize: 12 }}>
              This is a helpful tooltip with additional information
            </Text>
          </View>
        }
      />
    </View>
  );
};

/**
 * Higher-order component for keyboard navigation support
 * Adds comprehensive keyboard event handling and focus management
 */
function supportKeyboard<P extends Record<string, any>>(
  WrappedComponent: React.ComponentType<P>
): React.ComponentType<P & IKeyboardProps>;

interface IKeyboardProps {
  /** Keyboard event handler for key down events */
  onKeyDown?: (args: IKeyboardEvent) => void;
  /** Keyboard event handler for key down capture events */
  onKeyDownCapture?: (args: IKeyboardEvent) => void;
  /** Keyboard event handler for key up events */
  onKeyUp?: (args: IKeyboardEvent) => void;
  /** Keyboard event handler for key up capture events */
  onKeyUpCapture?: (args: IKeyboardEvent) => void;
  /** Configuration for handled keyboard events (down) */
  keyDownEvents?: IHandledKeyboardEvent[];
  /** Configuration for handled keyboard events (up) */
  keyUpEvents?: IHandledKeyboardEvent[];
}

declare const supportKeyboard: typeof supportKeyboard;

import React from 'react';
import { View, Text, supportKeyboard } from 'react-native-windows';

// Create keyboard-enhanced custom component
const KeyboardView = supportKeyboard(View);

const KeyboardExample: React.FC = () => {
  return (
    <KeyboardView
      tabIndex={0}
      acceptsReturn={true}
      onKeyDown={(event) => {
        if (event.nativeEvent.key === 'Enter') {
          console.log('Enter pressed!');
        }
      }}
      onFocus={() => console.log('Focused')}
      onBlur={() => console.log('Blurred')}
      style={{
        padding: 16,
        backgroundColor: '#f0f0f0',
        borderRadius: 4,
        margin: 8
      }}
    >
      <Text>Press Enter or Tab to interact</Text>
    </KeyboardView>
  );
};

/**
 * @deprecated DatePicker has been removed from react-native-windows
 * Use @react-native-community/datetimepicker instead
 */
declare const DatePicker: never;

/**
 * @deprecated PickerWindows has been removed from react-native-windows
 * Use @react-native-picker/picker instead
 */
declare const PickerWindows: never;

/**
 * Alias for the standard View component
 * Maintained for backwards compatibility
 */
declare const ViewWindows: typeof View;

// Flyout placement options
type Placement =
  | 'top'
  | 'bottom'
  | 'left'
  | 'right'
  | 'full'
  | 'top-edge-aligned-left'
  | 'top-edge-aligned-right'
  | 'bottom-edge-aligned-left'
  | 'bottom-edge-aligned-right'
  | 'left-edge-aligned-top'
  | 'right-edge-aligned-top'
  | 'left-edge-aligned-bottom'
  | 'right-edge-aligned-bottom';

// Flyout show modes
type ShowMode =
  | 'auto'           // System decides best show mode
  | 'standard'       // Standard flyout behavior
  | 'transient'      // Transient flyout, dismisses automatically
  | 'transient-with-dismiss-on-pointer-move-away'; // Dismisses when pointer moves away

// Glyph style interface
interface GlyphStyle extends ViewStyle {
  color?: string;
  fontWeight?: 'normal' | 'bold' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900';
  fontStyle?: 'normal' | 'italic';
  fontSize?: number;
}

// Windows-specific View properties
interface ViewPropsWindows extends ViewProps {
  tooltip?: string;
  tabIndex?: number;
  enableFocusRing?: boolean;
  onMouseEnter?: (event: IMouseEvent) => void;
  onMouseLeave?: (event: IMouseEvent) => void;
  onKeyDown?: (event: IKeyboardEvent) => void;
  onKeyUp?: (event: IKeyboardEvent) => void;
  onKeyDownCapture?: (event: IKeyboardEvent) => void;
  onKeyUpCapture?: (event: IKeyboardEvent) => void;
  keyDownEvents?: string[];
  keyUpEvents?: string[];
}

type IViewWindowsProps = ViewPropsWindows;
type ViewWindows = View;

<Flyout
  placement="bottom-edge-aligned-left"
  showMode="standard"
  isLightDismissEnabled={true}
  target={menuContent}
/>

<Flyout
  placement="top"
  showMode="transient"
  isOverlayEnabled={false}
  target={tooltipContent}
/>

<Flyout
  placement="right-edge-aligned-top"
  showMode="transient-with-dismiss-on-pointer-move-away"
  isLightDismissEnabled={false}
  target={errorMessage}
/>