@expo/ui 0.2.0-alpha.0 → 0.2.0-alpha.2

package/src/jetpack-compose/Progress/index.tsx

@@ -1,6 +1,8 @@
 import { requireNativeView } from 'expo';
 import { ColorValue, StyleProp, ViewStyle } from 'react-native';
 
+import { ExpoModifier } from '../../types';
+
 export type ProgressElementColors = {
   /**
    * Track color.
@@ -28,6 +30,8 @@ export type CircularProgressProps = {
    * @platform android
    */
   elementColors?: ProgressElementColors;
+  /** Modifiers for the component */
+  modifiers?: ExpoModifier[];
 };
 
 export type LinearProgressProps = {
@@ -48,6 +52,8 @@ export type LinearProgressProps = {
    * @platform android
    */
   elementColors?: ProgressElementColors;
+  /** Modifiers for the component */
+  modifiers?: ExpoModifier[];
 };
 
 type NativeProgressProps =
@@ -65,12 +71,24 @@ const NativeProgressView: React.ComponentType<NativeProgressProps> = requireNati
  * Renders a `CircularProgress` component.
  */
 export function CircularProgress(props: CircularProgressProps) {
-  return <NativeProgressView {...props} variant="circular" />;
+  return (
+    <NativeProgressView
+      {...props} // @ts-expect-error
+      modifiers={props.modifiers?.map((m) => m.__expo_shared_object_id__)}
+      variant="circular"
+    />
+  );
 }
 
 /**
  * Renders a `LinearProgress` component.
  */
 export function LinearProgress(props: LinearProgressProps) {
-  return <NativeProgressView {...props} variant="linear" />;
+  return (
+    <NativeProgressView
+      {...props} // @ts-expect-error
+      modifiers={props.modifiers?.map((m) => m.__expo_shared_object_id__)}
+      variant="linear"
+    />
+  );
 }

package/src/jetpack-compose/Shape/index.tsx

@@ -1,6 +1,8 @@
 import { requireNativeView } from 'expo';
 import { ViewStyle } from 'react-native';
 
+import { ExpoModifier } from '../../types';
+
 export type ShapeProps = {
   /**
    * Corner rounding percentage. Multiplied by the shorter dimension of the view to produce pixel values.
@@ -31,6 +33,8 @@ export type ShapeProps = {
   style?: ViewStyle;
   /** Color of the shape */
   color?: string;
+  /** Modifiers for the component */
+  modifiers?: ExpoModifier[];
 };
 
 const ShapeNativeView: React.ComponentType<any> = requireNativeView('ExpoUI', 'ShapeView');
@@ -56,9 +60,20 @@ function Rectangle(props: Pick<ShapeProps, 'smoothing' | 'cornerRounding' | 'sty
 }
 
 function Polygon(
-  props: Pick<ShapeProps, 'smoothing' | 'cornerRounding' | 'verticesCount' | 'style' | 'color'>
+  props: Pick<
+    ShapeProps,
+    'smoothing' | 'cornerRounding' | 'verticesCount' | 'style' | 'color' | 'modifiers'
+  >
 ) {
-  return <ShapeNativeView {...props} style={props.style} type="polygon" />;
+  return (
+    <ShapeNativeView
+      {...props}
+      // @ts-expect-error
+      modifiers={props.modifiers?.map((m) => m.__expo_shared_object_id__)}
+      style={props.style}
+      type="polygon"
+    />
+  );
 }
 
 export const Shape = {

package/src/jetpack-compose/Slider/index.tsx

@@ -1,7 +1,7 @@
 import { requireNativeView } from 'expo';
 import { StyleProp, ViewStyle } from 'react-native';
 
-import { ViewEvent } from '../../types';
+import { ExpoModifier, ViewEvent } from '../../types';
 
 /**
  * Colors for slider's core elements.
@@ -53,6 +53,9 @@ export type SliderProps = {
    * Callback triggered on dragging along the slider.
    */
   onValueChange?: (value: number) => void;
+
+  /** Modifiers for the component */
+  modifiers?: ExpoModifier[];
 };
 
 type NativeSliderProps = Omit<SliderProps, 'onValueChange'> &
@@ -86,6 +89,8 @@ export function transformSliderProps(props: SliderProps): NativeSliderProps {
           }
         : undefined,
     color: props.color,
+    // @ts-expect-error
+    modifiers: props.modifiers?.map((m) => m.__expo_shared_object_id__),
   };
 }
 

package/src/jetpack-compose/Switch/index.tsx

@@ -1,6 +1,8 @@
 import { requireNativeView } from 'expo';
 import { NativeSyntheticEvent, StyleProp, ViewStyle } from 'react-native';
 
+import { ExpoModifier } from '../../types';
+
 // @docsMissing
 /**
  * Only for switch.
@@ -54,6 +56,9 @@ export type SwitchProps = {
    * Picker color. On iOS, it only applies to the `menu` variant.
    */
   color?: string;
+
+  /** Modifiers for the component */
+  modifiers?: ExpoModifier[];
 } & (SwitchSwitchVariantProps | SwitchCheckboxVariantProps | SwitchButtonVariantProps);
 
 export type SwitchSwitchVariantProps = {
@@ -118,6 +123,8 @@ export function transformSwitchProps(props: SwitchProps): NativeSwitchProps {
     onValueChange: ({ nativeEvent: { value } }) => {
       props?.onValueChange?.(value);
     },
+    // @ts-expect-error
+    modifiers: props.modifiers?.map((m) => m.__expo_shared_object_id__),
   } as NativeSwitchProps;
 }
 

package/src/jetpack-compose/TextInput/index.tsx

@@ -2,7 +2,7 @@ import { requireNativeView } from 'expo';
 import { Ref } from 'react';
 import { StyleProp, ViewStyle } from 'react-native';
 
-import { ViewEvent } from '../../types';
+import { ExpoModifier, ViewEvent } from '../../types';
 
 /**
  * @hidden Not used anywhere yet.
@@ -83,6 +83,9 @@ export type TextInputProps = {
    * @platform android
    */
   autoCapitalize?: 'characters' | 'none' | 'sentences' | 'unspecified' | 'words';
+
+  /** Modifiers for the component */
+  modifiers?: ExpoModifier[];
 };
 
 export type NativeTextInputProps = Omit<TextInputProps, 'onChangeText'> & {} & ViewEvent<
@@ -105,6 +108,8 @@ function transformTextInputProps(props: TextInputProps): NativeTextInputProps {
     onValueChanged: (event) => {
       props.onChangeText?.(event.nativeEvent.value);
     },
+    // @ts-expect-error
+    modifiers: props.modifiers?.map((m) => m.__expo_shared_object_id__),
   };
 }
 

package/src/jetpack-compose/{index.tsx → index.ts}

@@ -8,3 +8,4 @@ export * from './Slider';
 export * from './Switch';
 export * from './TextInput';
 export * from './Shape';
+export * from './modifiers';

package/src/jetpack-compose/modifiers.ts

@@ -0,0 +1,19 @@
+import { requireNativeModule } from 'expo';
+
+import { ExpoModifier } from '../types';
+
+const nativeExpoUIModule = requireNativeModule('ExpoUI');
+
+export const padding: (all: number) => ExpoModifier = nativeExpoUIModule.padding;
+export const size: (width: number, height: number) => ExpoModifier = nativeExpoUIModule.size;
+export const fillMaxSize: () => ExpoModifier = nativeExpoUIModule.fillMaxSize;
+export const offset: (x: number, y: number) => ExpoModifier = nativeExpoUIModule.offset;
+export const background: (color: string) => ExpoModifier = nativeExpoUIModule.background;
+export const border: (borderWidth: number, borderColor: string) => ExpoModifier =
+  nativeExpoUIModule.border;
+export const shadow: (elevation: number) => ExpoModifier = nativeExpoUIModule.shadow;
+export const alpha: (alpha: number) => ExpoModifier = nativeExpoUIModule.alpha;
+export const blur: (radius: number) => ExpoModifier = nativeExpoUIModule.blur;
+export const clickable: (callback: () => void) => ExpoModifier = nativeExpoUIModule.clickable;
+export const rotate: (degrees: number) => ExpoModifier = nativeExpoUIModule.rotate;
+export const zIndex: (index: number) => ExpoModifier = nativeExpoUIModule.zIndex;

package/src/swift-ui/BottomSheet/index.tsx

@@ -1,7 +1,8 @@
 import { requireNativeView } from 'expo';
-import { Dimensions, NativeSyntheticEvent } from 'react-native';
+import { NativeSyntheticEvent } from 'react-native';
 
-import { Host } from '../Host';
+import { createViewModifierEventListener } from '../modifiers/utils';
+import { type CommonViewModifierProps } from '../types';
 
 export type BottomSheetProps = {
   /**
@@ -16,7 +17,7 @@ export type BottomSheetProps = {
    * Callback function that is called when the `BottomSheet` is opened.
    */
   onIsOpenedChange: (isOpened: boolean) => void;
-};
+} & CommonViewModifierProps;
 
 type NativeBottomSheetProps = Omit<BottomSheetProps, 'onIsOpenedChange'> & {
   onIsOpenedChange: (event: NativeSyntheticEvent<{ isOpened: boolean }>) => void;
@@ -27,28 +28,18 @@ const BottomSheetNativeView: React.ComponentType<NativeBottomSheetProps> = requi
   'BottomSheetView'
 );
 
-export function transformBottomSheetProps(props: BottomSheetProps): NativeBottomSheetProps {
+function transformBottomSheetProps(props: BottomSheetProps): NativeBottomSheetProps {
+  const { modifiers, ...restProps } = props;
   return {
-    ...props,
+    modifiers,
+    ...(modifiers ? createViewModifierEventListener(modifiers) : undefined),
+    ...restProps,
     onIsOpenedChange: ({ nativeEvent: { isOpened } }) => {
       props?.onIsOpenedChange?.(isOpened);
     },
   };
 }
 
-/**
- * `<BottomSheet>` component without a host view.
- * You should use this with a `Host` component in ancestor.
- */
-export function BottomSheetPrimitive(props: BottomSheetProps) {
-  return <BottomSheetNativeView {...transformBottomSheetProps(props)} />;
-}
-
 export function BottomSheet(props: BottomSheetProps) {
-  const { width } = Dimensions.get('window');
-  return (
-    <Host style={{ position: 'absolute', width }}>
-      <BottomSheetPrimitive {...props} />
-    </Host>
-  );
+  return <BottomSheetNativeView {...transformBottomSheetProps(props)} />;
 }

package/src/swift-ui/Button/index.tsx

@@ -1,8 +1,8 @@
 import { requireNativeView } from 'expo';
-import { StyleProp, ViewStyle } from 'react-native';
 
-import { ViewEvent } from '../../types';
-import { Host } from '../Host';
+import { type ViewEvent } from '../../types';
+import { createViewModifierEventListener } from '../modifiers/utils';
+import { type CommonViewModifierProps } from '../types';
 
 /**
  * The role of the button.
@@ -76,9 +76,10 @@ export type ButtonProps = {
    * Disabled state of the button.
    */
   disabled?: boolean;
-};
+} & CommonViewModifierProps;
 
 /**
+ * exposed for ContextMenu
  * @hidden
  */
 export type NativeButtonProps = Omit<
@@ -97,14 +98,17 @@ const ButtonNativeView: React.ComponentType<NativeButtonProps> = requireNativeVi
 );
 
 /**
+ * exposed for ContextMenu
  * @hidden
  */
 export function transformButtonProps(
   props: Omit<ButtonProps, 'children'>,
   text: string | undefined
 ): NativeButtonProps {
-  const { role, onPress, systemImage, ...restProps } = props;
+  const { role, onPress, systemImage, modifiers, ...restProps } = props;
   return {
+    modifiers,
+    ...(modifiers ? createViewModifierEventListener(modifiers) : undefined),
     ...restProps,
     text,
     systemImage,
@@ -114,10 +118,9 @@ export function transformButtonProps(
 }
 
 /**
- * `<Button>` component without a host view.
- * You should use this with a `Host` component in ancestor.
+ * Displays a native button component.
  */
-export function ButtonPrimitive(props: ButtonProps) {
+export function Button(props: ButtonProps) {
   const { children, ...restProps } = props;
 
   if (!children && !restProps.systemImage) {
@@ -136,15 +139,3 @@ export function ButtonPrimitive(props: ButtonProps) {
   }
   return <ButtonNativeView {...transformedProps}>{children}</ButtonNativeView>;
 }
-
-/**
- * Displays a native button component.
- */
-export function Button(props: ButtonProps & { style?: StyleProp<ViewStyle> }) {
-  const useViewportSizeMeasurement = props.style == null;
-  return (
-    <Host style={props.style} matchContents useViewportSizeMeasurement={useViewportSizeMeasurement}>
-      <ButtonPrimitive {...props} />
-    </Host>
-  );
-}

package/src/swift-ui/ColorPicker/index.tsx

@@ -1,8 +1,9 @@
 import { requireNativeView } from 'expo';
 import { useCallback } from 'react';
-import { NativeSyntheticEvent, processColor, StyleProp, ViewStyle } from 'react-native';
+import { NativeSyntheticEvent, processColor } from 'react-native';
 
-import { Host } from '../Host';
+import { createViewModifierEventListener } from '../modifiers/utils';
+import { type CommonViewModifierProps } from '../types';
 
 export type ColorPickerProps = {
   /**
@@ -21,7 +22,7 @@ export type ColorPickerProps = {
    * Whether the color picker should support opacity.
    */
   supportsOpacity?: boolean;
-};
+} & CommonViewModifierProps;
 
 type OnValueChangedEvent = NativeSyntheticEvent<{ value: string }>;
 
@@ -33,12 +34,13 @@ const ColorPickerNativeView: React.ComponentType<
 > = requireNativeView('ExpoUI', 'ColorPickerView');
 
 /**
- * `<ColorPicker>` component without a host view.
- * You should use this with a `Host` component in ancestor.
+ * Renders a `ColorPicker` component using SwiftUI.
+ * @platform ios
  */
-export function ColorPickerPrimitive({
+export function ColorPicker({
   selection,
   onValueChanged,
+  modifiers,
   ...restProps
 }: ColorPickerProps) {
   const onNativeValueChanged = useCallback(
@@ -49,21 +51,11 @@ export function ColorPickerPrimitive({
   );
   return (
     <ColorPickerNativeView
+      modifiers={modifiers}
+      {...(modifiers ? createViewModifierEventListener(modifiers) : undefined)}
       selection={processColor(selection || '')}
       onValueChanged={onNativeValueChanged}
       {...restProps}
     />
   );
 }
-
-/**
- * Renders a `ColorPicker` component using SwiftUI.
- * @platform ios
- */
-export function ColorPicker(props: ColorPickerProps & { style?: StyleProp<ViewStyle> }) {
-  return (
-    <Host style={props.style} matchContents>
-      <ColorPickerPrimitive {...props} />
-    </Host>
-  );
-}

package/src/{swift-ui-primitives/ContentUnavailableView.tsx → swift-ui/ContentUnavailableView/index.tsx}

@@ -1,7 +1,7 @@
 import { requireNativeView } from 'expo';
-import { Platform } from 'react-native';
 
-import { CommonViewModifierProps } from './types';
+import { createViewModifierEventListener } from '../modifiers/utils';
+import { type CommonViewModifierProps } from '../types';
 
 export interface ContentUnavailableViewProps extends CommonViewModifierProps {
   /**
@@ -20,17 +20,24 @@ export interface ContentUnavailableViewProps extends CommonViewModifierProps {
   description?: string;
 }
 
-const ContentUnavailableViewNativeView: React.ComponentType<ContentUnavailableViewProps> | null =
-  Platform.OS === 'ios' ? requireNativeView('ExpoUI', 'ContentUnavailableView') : null;
+const ContentUnavailableViewNativeView: React.ComponentType<ContentUnavailableViewProps> =
+  requireNativeView('ExpoUI', 'ContentUnavailableView');
 
 /**
  * Displays a native Swift UI ContentUnavailableView.
  * @platform ios 17.0+
- *
  */
+function transformContentUnavailableViewProps(
+  props: ContentUnavailableViewProps
+): ContentUnavailableViewProps {
+  const { modifiers, ...restProps } = props;
+  return {
+    modifiers,
+    ...(modifiers ? createViewModifierEventListener(modifiers) : undefined),
+    ...restProps,
+  };
+}
+
 export function ContentUnavailableView(props: ContentUnavailableViewProps) {
-  if (!ContentUnavailableViewNativeView) {
-    return null;
-  }
-  return <ContentUnavailableViewNativeView {...props} />;
+  return <ContentUnavailableViewNativeView {...transformContentUnavailableViewProps(props)} />;
 }

package/src/swift-ui/ContextMenu/Submenu.tsx

@@ -0,0 +1,25 @@
+import { type ReactElement, type ReactNode } from 'react';
+
+import { type ButtonProps } from '../Button';
+
+/**
+ * Props of the `Submenu` component.
+ */
+export type SubmenuProps = {
+  /**
+   * The button that will be used to expand the submenu. On Android the `text` prop of the `Button` will be used as a section title.
+   */
+  button: ReactElement<ButtonProps>;
+  /**
+   * Children of the submenu. Only `Button`, `Switch`, `Picker` and `Submenu` elements should be used.
+   */
+  children: ReactNode;
+};
+
+/**
+ * The `Submenu` component is used to create a nested context menu. Submenus can be infinitely nested.
+ * Android does not support nesting in the context menu. All the submenus will be flat-mapped into a single level with multiple titled sections.
+ */
+export function Submenu(props: SubmenuProps) {
+  return <></>;
+}

package/src/swift-ui/ContextMenu/index.tsx

@@ -1,12 +1,16 @@
 import { requireNativeView } from 'expo';
-import { ComponentType, Children, ReactElement, ReactNode, useMemo } from 'react';
-import { NativeSyntheticEvent, StyleProp, ViewStyle } from 'react-native';
+import { ComponentType, Children, useMemo } from 'react';
+import { NativeSyntheticEvent } from 'react-native';
 
-import { Host } from '../Host';
+import { type ContextMenuProps, type EventHandlers } from './types';
 import { MenuElement, transformChildrenToElementArray } from './utils';
-import { ButtonProps } from '../Button';
-import { PickerProps } from '../Picker';
-import { SwitchProps } from '../Switch';
+
+export * from './Submenu';
+export {
+  type ActivationMethod,
+  type ContextMenuProps,
+  type ContextMenuContentProps,
+} from './types';
 
 const MenuNativeView: ComponentType<NativeMenuProps> = requireNativeView('ExpoUI', 'ContextMenu');
 
@@ -20,70 +24,7 @@ const MenuNativePreviewView: ComponentType<object> = requireNativeView(
   'ContextMenuPreview'
 );
 
-type SubmenuElement =
-  | ReactElement<ButtonProps>
-  | ReactElement<SwitchProps>
-  | ReactElement<PickerProps>
-  | ReactElement<SubmenuProps>;
-
-export type ContextMenuContentProps = {
-  children: SubmenuElement | SubmenuElement[];
-};
-
-/**
- * @hidden
- */
-export type EventHandlers = Record<
-  string,
-  Record<string, (event: NativeSyntheticEvent<any>) => void>
->;
-
-/**
- * @hidden
- */
-export type ContextMenuElementBase = { contextMenuElementID: string };
-
-/**
- * Activation method of the context menu.
- * - `singlePress`: The context menu is opened with a single tap. Does not isolate the content.
- * - `longPress`: The context menu is opened with a long press. On iOS additionally Highlights the content by blurring the background.
- */
-export type ActivationMethod = 'singlePress' | 'longPress';
-
-/**
- * Props of the `ContextMenu` component.
- */
-export type ContextMenuProps = {
-  /**
-   * Determines how the context menu will be activated.
-   */
-  activationMethod?: ActivationMethod;
-
-  /**
-   * The contents of the submenu are used as an anchor for the context menu.
-   * The children will be wrapped in a pressable element, which triggers opening of the context menu.
-   */
-  children: ReactNode;
-};
-
-/**
- * Props of the `Submenu` component.
- */
-export type SubmenuProps = {
-  /**
-   * The button that will be used to expand the submenu. On Android the `text` prop of the `Button` will be used as a section title.
-   */
-  button: ReactElement<ButtonProps>;
-  /**
-   * Children of the submenu. Only `Button`, `Switch`, `Picker` and `Submenu` elements should be used.
-   */
-  children: ReactNode;
-};
-
-/**
- * @hidden
- */
-export type NativeMenuProps = ContextMenuProps & {
+type NativeMenuProps = ContextMenuProps & {
   elements: MenuElement[];
   onContextMenuButtonPressed: (
     event: NativeSyntheticEvent<{ contextMenuElementID: string }>
@@ -103,14 +44,6 @@ export type NativeMenuProps = ContextMenuProps & {
   ) => void;
 };
 
-/**
- * The `Submenu` component is used to create a nested context menu. Submenus can be infinitely nested.
- * Android does not support nesting in the context menu. All the submenus will be flat-mapped into a single level with multiple titled sections.
- */
-export function Submenu(props: SubmenuProps) {
-  return <></>;
-}
-
 /**
  * Items visible inside the context menu. Pass input components as immidiate children of the tag.
  * `Button`, `Switch` and `Submenu` components are supported on both Android and iOS.
@@ -140,7 +73,17 @@ export function Preview(props: { children: React.ReactNode }) {
  * `<ContextMenu>` component without a host view.
  * You should use this with a `Host` component in ancestor.
  */
-function ContextMenuPrimitive(props: ContextMenuProps) {
+
+/**
+ * `ContextMenu` allows you to create a context menu, which can be used to provide additional options to the user.
+ *
+ * There are some platform-specific differences in the behavior of the context menu:
+ * - On Android, the expansion of the context menu is controlled by the `expanded` prop. iOS, does not allow for manual control of the expansion state.
+ * - On iOS, the context menu can be triggered by a single press or a long press. The `activationMethod` prop allows you to choose between these two options.
+ * - Android does not support nesting in the context menu. All the submenus will be flat-mapped into a single level with multiple sections. The `title` prop of the `Button`, which opens the submenu on iOS will be used as a section title.
+ * - Android does not support showing a `Picker` element in the context menu.
+ */
+function ContextMenu(props: ContextMenuProps) {
   const eventHandlersMap: EventHandlers = {};
   const initialChildren = Children.map(
     props.children as any,
@@ -169,28 +112,8 @@ function ContextMenuPrimitive(props: ContextMenuProps) {
   );
 }
 
-/**
- * `ContextMenuPrimitive` allows you to create a context menu, which can be used to provide additional options to the user.
- *
- * There are some platform-specific differences in the behavior of the context menu:
- * - On Android, the expansion of the context menu is controlled by the `expanded` prop. iOS, does not allow for manual control of the expansion state.
- * - On iOS, the context menu can be triggered by a single press or a long press. The `activationMethod` prop allows you to choose between these two options.
- * - Android does not support nesting in the context menu. All the submenus will be flat-mapped into a single level with multiple sections. The `title` prop of the `Button`, which opens the submenu on iOS will be used as a section title.
- * - Android does not support showing a `Picker` element in the context menu.
- */
-function ContextMenu(props: ContextMenuProps & { style?: StyleProp<ViewStyle> }) {
-  return (
-    <Host style={props.style} matchContents>
-      <ContextMenuPrimitive {...props} />
-    </Host>
-  );
-}
-
-ContextMenuPrimitive.Trigger = Trigger;
-ContextMenuPrimitive.Preview = Preview;
-ContextMenuPrimitive.Items = Items;
 ContextMenu.Trigger = Trigger;
 ContextMenu.Preview = Preview;
 ContextMenu.Items = Items;
 
-export { ContextMenuPrimitive, ContextMenu };
+export { ContextMenu };

package/src/swift-ui/ContextMenu/types.ts

@@ -0,0 +1,47 @@
+import { ReactElement, ReactNode } from 'react';
+import { NativeSyntheticEvent } from 'react-native';
+
+import { type ButtonProps } from '../Button';
+import { type PickerProps } from '../Picker';
+import { type SwitchProps } from '../Switch';
+import { type SubmenuProps } from './Submenu';
+
+export type EventHandlers = Record<
+  string,
+  Record<string, (event: NativeSyntheticEvent<any>) => void>
+>;
+
+export type ContextMenuElementBase = { contextMenuElementID: string };
+
+type SubmenuElement =
+  | ReactElement<ButtonProps>
+  | ReactElement<SwitchProps>
+  | ReactElement<PickerProps>
+  | ReactElement<SubmenuProps>;
+
+export type ContextMenuContentProps = {
+  children: SubmenuElement | SubmenuElement[];
+};
+
+/**
+ * Activation method of the context menu.
+ * - `singlePress`: The context menu is opened with a single tap. Does not isolate the content.
+ * - `longPress`: The context menu is opened with a long press. On iOS additionally Highlights the content by blurring the background.
+ */
+export type ActivationMethod = 'singlePress' | 'longPress';
+
+/**
+ * Props of the `ContextMenu` component.
+ */
+export type ContextMenuProps = {
+  /**
+   * Determines how the context menu will be activated.
+   */
+  activationMethod?: ActivationMethod;
+
+  /**
+   * The contents of the submenu are used as an anchor for the context menu.
+   * The children will be wrapped in a pressable element, which triggers opening of the context menu.
+   */
+  children: ReactNode;
+};