react-native-platform-components 1.6.0 → 1.7.0

package/src/ContextMenuNativeComponent.ts

@@ -1,6 +1,7 @@
 // ContextMenuNativeComponent.ts
+import type * as React from 'react';
 import type { HostComponent, ViewProps } from 'react-native';
-import { codegenNativeComponent } from 'react-native';
+import { codegenNativeCommands, codegenNativeComponent } from 'react-native';
 import type { BubblingEventHandler, Double, Int32 } from './codegenTypes';
 
 /**
@@ -43,6 +44,8 @@ export type ContextMenuItem = Readonly<{
   state: string;
   /** The action's own haptics; '' = the component's */
   haptics: string;
+  /** Test identifier of the menu row; '' = none */
+  testID: string;
 }>;
 
 /**
@@ -59,7 +62,7 @@ export type ContextMenuPressActionEvent = Readonly<{
 export type ContextMenuInteractivity = 'enabled' | 'disabled';
 
 /** Trigger mode for opening the menu. */
-export type ContextMenuTrigger = 'longPress' | 'tap';
+export type ContextMenuTrigger = 'longPress' | 'tap' | 'none';
 
 /**
  * iOS-specific configuration.
@@ -75,11 +78,6 @@ export type IOSProps = Readonly<{
 export type AndroidProps = Readonly<{
   /** Anchor position for the popup menu */
   anchorPosition?: string; // 'left' | 'right'
-  /**
-   * Programmatic visibility control (Android only).
-   * 'open' to show the menu, 'closed' to hide it.
-   */
-  visible?: string; // 'open' | 'closed'
 }>;
 
 export interface ContextMenuProps extends ViewProps {
@@ -102,9 +100,16 @@ export interface ContextMenuProps extends ViewProps {
    * How the menu is triggered:
    * - 'longPress' (default): Long-press opens the menu
    * - 'tap': Single tap opens the menu
+   * - 'none': only `visible` opens it; the content keeps its touches
    */
   trigger?: string; // ContextMenuTrigger
 
+  /**
+   * Programmatic visibility: 'open' presents the menu anchored to the view,
+   * 'closed' dismisses it. '' (unset) leaves the menu to the user.
+   */
+  visible?: string; // '' | 'open' | 'closed'
+
   /**
    * Haptic played when an action is pressed: '' (none added) | 'none' | 'selection' |
    * 'light' | 'medium' | 'heavy' | 'success' | 'warning' | 'error'
@@ -135,6 +140,22 @@ export interface ContextMenuProps extends ViewProps {
   android?: AndroidProps;
 }
 
+type NativeContextMenuComponent = HostComponent<ContextMenuProps>;
+
+// `React.ElementRef` rather than `React.ComponentRef`: the codegen shipped with
+// React Native 0.81 (and the 0.76 Android floor) only accepts the former.
+interface NativeCommands {
+  /**
+   * trigger 'tap': the user tapped the content and no inner pressable took
+   * the tap. Opens the menu (iOS 17.4+; earlier iOS opens it natively).
+   */
+  handleTap: (viewRef: React.ElementRef<NativeContextMenuComponent>) => void;
+}
+
+export const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({
+  supportedCommands: ['handleTap'],
+});
+
 export default codegenNativeComponent<ContextMenuProps>(
   'PCContextMenu'
-) as HostComponent<ContextMenuProps>;
+) as NativeContextMenuComponent;

package/src/index.tsx

@@ -1,6 +1,7 @@
 export * from './DatePicker';
 export * from './SelectionMenu';
 export * from './ContextMenu';
+export * from './ActionSheet';
 export * from './SegmentedControl';
 export * from './TabBar';
 export * from './FloatingActionButton';

package/src/index.web.tsx

@@ -8,6 +8,7 @@
 export type * from './DatePicker';
 export type * from './SelectionMenu';
 export type * from './ContextMenu';
+export type * from './ActionSheet';
 export type * from './SegmentedControl';
 export type * from './TabBar';
 export type * from './FloatingActionButton';
@@ -33,6 +34,7 @@ export type {
 } from './webComponents';
 export { PlatformComponentsProvider } from './web/PlatformComponentsProvider';
 export {
+  ActionSheet,
   Button,
   ButtonGroup,
   SplitButton,

package/src/jest.tsx

@@ -27,9 +27,10 @@ import {
   type ViewProps,
 } from 'react-native';
 
+import type { ActionSheetProps } from './ActionSheet';
 import type { ButtonProps } from './Button';
 import type { ButtonGroupProps } from './ButtonGroup';
-import type { ContextMenuProps } from './ContextMenu';
+import type { ContextMenuAction, ContextMenuProps } from './ContextMenu';
 import type { DatePickerProps, DateRangePickerProps } from './DatePicker';
 import type { FloatingActionButtonProps } from './FloatingActionButton';
 import type { FloatingToolbarProps } from './FloatingToolbar';
@@ -54,6 +55,7 @@ import { nextSelection } from './web/ButtonGroup';
 export type * from './DatePicker';
 export type * from './SelectionMenu';
 export type * from './ContextMenu';
+export type * from './ActionSheet';
 export type * from './Button';
 export type * from './ButtonGroup';
 export type * from './SplitButton';
@@ -845,9 +847,12 @@ export function SelectionMenu(props: SelectionMenuProps): React.ReactElement {
 }
 
 /**
- * Its children in a view carrying `testID`. The menu itself isn't rendered;
- * `fireEvent(menu, 'pressAction', id, title)`, `'menuOpen'`, `'menuClose'`
- * and `'previewPress'` reach the callbacks.
+ * Its children in a view carrying `testID`. While `visible` (or the
+ * deprecated `android.visible`) is true, each action follows them as a
+ * `Pressable` with the `menuitem` role and the action's `testID` (else
+ * `${testID}-${id}`) that calls `onPressAction(id, title)`; submenus and
+ * sections list their actions. `fireEvent(menu, 'pressAction', id, title)`,
+ * `'menuOpen'`, `'menuClose'` and `'previewPress'` reach the callbacks.
  */
 export function ContextMenu(props: ContextMenuProps): React.ReactElement {
   const {
@@ -860,18 +865,117 @@ export function ContextMenu(props: ContextMenuProps): React.ReactElement {
     actions,
     disabled,
     trigger,
+    visible,
     haptics,
     ios,
     android,
+    testID,
     ...viewProps
   } = props;
 
+  const open = !disabled && !!(visible ?? android?.visible);
+  const leaves = (list: ContextMenuProps['actions']): ContextMenuAction[] =>
+    list.flatMap((action) =>
+      action.attributes?.hidden
+        ? []
+        : action.subactions?.length
+          ? leaves(action.subactions)
+          : [action]
+    );
+
   return (
     <View
       {...viewProps}
+      testID={testID}
       {...handlers({ onPressAction, onMenuOpen, onMenuClose, onPreviewPress })}
     >
       {children}
+      {open
+        ? leaves(actions).map((action) => (
+            <Pressable
+              key={action.id}
+              testID={
+                action.testID ?? (testID ? `${testID}-${action.id}` : undefined)
+              }
+              accessibilityRole="menuitem"
+              accessibilityState={{ disabled: !!action.attributes?.disabled }}
+              disabled={action.attributes?.disabled}
+              onPress={() => onPressAction?.(action.id, action.title)}
+            >
+              <Text>{action.title}</Text>
+            </Pressable>
+          ))
+        : null}
+    </View>
+  );
+}
+
+/**
+ * Its children in a view carrying `testID`. While `visible`, the title and
+ * message show as `Text`, and each shown action is a `Pressable` with its
+ * `testID` (else `${testID}-${id}`) that calls `onSelect(id)`; a disabled
+ * one ignores presses. A cancel `Pressable` with `cancelTestID` (else
+ * `${testID}-cancel`) calls `onCancel`. `fireEvent(sheet, 'select', id)` and
+ * `fireEvent(sheet, 'cancel')` also work.
+ */
+export function ActionSheet(props: ActionSheetProps): React.ReactElement {
+  const {
+    visible,
+    title,
+    message,
+    actions,
+    cancelTitle,
+    cancelTestID,
+    haptics,
+    maxFontSizeMultiplier,
+    onSelect,
+    onCancel,
+    testID,
+    children,
+    ...viewProps
+  } = props;
+
+  return (
+    <View
+      {...viewProps}
+      testID={testID}
+      accessibilityState={{ expanded: visible }}
+      {...handlers({ onSelect, onCancel })}
+    >
+      {children}
+      {visible ? (
+        <View accessibilityRole="menu">
+          {title ? <Text>{title}</Text> : null}
+          {message ? <Text>{message}</Text> : null}
+          {actions
+            .filter((action) => !action.attributes?.hidden)
+            .map((action) => {
+              const disabled = !!action.attributes?.disabled;
+              return (
+                <Pressable
+                  key={action.id}
+                  testID={
+                    action.testID ??
+                    (testID ? `${testID}-${action.id}` : undefined)
+                  }
+                  accessibilityRole="menuitem"
+                  accessibilityState={{ disabled }}
+                  disabled={disabled}
+                  onPress={() => onSelect?.(action.id)}
+                >
+                  <Text>{action.title}</Text>
+                </Pressable>
+              );
+            })}
+          <Pressable
+            testID={cancelTestID ?? (testID ? `${testID}-cancel` : undefined)}
+            accessibilityRole="button"
+            onPress={() => onCancel?.()}
+          >
+            <Text>{cancelTitle ?? 'Cancel'}</Text>
+          </Pressable>
+        </View>
+      ) : null}
     </View>
   );
 }

package/src/menuItems.ts

@@ -69,6 +69,16 @@ export interface ContextMenuAction {
    * - Android: a menu group with group dividers; the title is not shown.
    */
   displayInline?: boolean;
+  /**
+   * Test identifier of the action's menu row, so UI tests (Detox `by.id`)
+   * find it without its title. A submenu's row takes one too; an inline
+   * section has no row of its own.
+   *
+   * - iOS: the `accessibilityIdentifier` of the `UIAction` / `UIMenu`.
+   * - Android 10+: the tag of the popup row view, which Detox and Espresso
+   *   match `by.id` against. Not a resource-id.
+   */
+  testID?: string;
 }
 
 /**
@@ -99,6 +109,8 @@ export type NativeMenuItem = {
   state: string;
   /** The action's own haptics; '' = the component's */
   haptics: string;
+  /** Test identifier of the menu row; '' = none */
+  testID: string;
 };
 
 const flag = (value: boolean | undefined) => (value ? 'true' : 'false');
@@ -141,6 +153,7 @@ export function flattenMenuActions(
         keepsMenuPresented: flag(attributes?.keepsMenuPresented),
         state: action.state ?? '',
         haptics: action.haptics ?? '',
+        testID: action.testID ?? '',
       });
 
       if (kind !== 'action') visit(children, index);

package/src/selectionIdentifiers.ts

@@ -1,6 +1,6 @@
 /** Diagnose identifiers reserved by the native selection protocol. */
 export function warnSelectionIdentifiers(
-  component: 'SelectionMenu' | 'SegmentedControl',
+  component: 'SelectionMenu' | 'SegmentedControl' | 'ActionSheet',
   values: readonly string[]
 ): void {
   if (!__DEV__) return;

package/src/web/ActionSheet.tsx

@@ -0,0 +1,130 @@
+// web/ActionSheet.tsx
+import React from 'react';
+import { View } from 'react-native';
+
+import type { ActionSheetProps } from '../ActionSheet';
+import { Dialog } from './Dialog';
+import { Icon } from './Icon';
+
+// Material 3 baseline error color, as on Android
+const DESTRUCTIVE_COLOR = '#B3261E';
+
+/**
+ * Renders its children; while `visible`, the title, message and actions open
+ * in a `<dialog>` with a cancel button below them. Picking an action calls
+ * `onSelect`; the cancel button, Escape and a click outside call `onCancel`.
+ * Icons draw only for image sources (`{ type: 'image' }`); each button
+ * carries its action's `testID` as `data-testid`.
+ */
+export function ActionSheet(props: ActionSheetProps): React.ReactElement {
+  const {
+    visible,
+    title,
+    message,
+    actions,
+    cancelTitle,
+    cancelTestID,
+    haptics,
+    maxFontSizeMultiplier,
+    onSelect,
+    onCancel,
+    accessibilityLabel,
+    children,
+    ...viewProps
+  } = props;
+
+  const label = accessibilityLabel ?? title ?? 'Actions';
+  const shown = actions.filter((action) => !action.attributes?.hidden);
+  const cancel = () => onCancel?.();
+
+  return (
+    <View {...viewProps}>
+      {children}
+      {visible ? (
+        <Dialog label={label} onDismiss={cancel}>
+          <div
+            style={{ display: 'flex', flexDirection: 'column', minWidth: 240 }}
+          >
+            {title || message ? (
+              <div style={{ padding: '4px 12px 12px', textAlign: 'center' }}>
+                {title ? (
+                  <div style={{ fontSize: 15, fontWeight: 600 }}>{title}</div>
+                ) : null}
+                {message ? (
+                  <div style={{ fontSize: 13, opacity: 0.7, marginTop: 4 }}>
+                    {message}
+                  </div>
+                ) : null}
+              </div>
+            ) : null}
+            {shown.map((action, index) => {
+              const destructive = !!action.attributes?.destructive;
+              const color = destructive ? DESTRUCTIVE_COLOR : 'inherit';
+              return (
+                <button
+                  key={action.id}
+                  type="button"
+                  data-testid={action.testID}
+                  disabled={action.attributes?.disabled}
+                  autoFocus={
+                    index ===
+                    shown.findIndex((item) => !item.attributes?.disabled)
+                  }
+                  onClick={() => {
+                    if (!action.attributes?.disabled) onSelect?.(action.id);
+                  }}
+                  style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 12,
+                    minHeight: 44,
+                    padding: '0 12px',
+                    border: 'none',
+                    borderRadius: 8,
+                    fontFamily: 'inherit',
+                    fontSize: 16,
+                    textAlign: 'start',
+                    color,
+                    opacity: action.attributes?.disabled ? 0.4 : 1,
+                    backgroundColor: 'transparent',
+                    cursor: action.attributes?.disabled ? 'default' : 'pointer',
+                  }}
+                >
+                  <Icon
+                    icon={action.image}
+                    color={
+                      action.imageColor ??
+                      (destructive ? DESTRUCTIVE_COLOR : 'CanvasText')
+                    }
+                  />
+                  <span>{action.title}</span>
+                </button>
+              );
+            })}
+            <button
+              type="button"
+              data-testid={cancelTestID}
+              onClick={cancel}
+              style={{
+                minHeight: 44,
+                marginTop: 8,
+                padding: '0 12px',
+                border: 'none',
+                borderRadius: 8,
+                fontFamily: 'inherit',
+                fontSize: 16,
+                fontWeight: 600,
+                color: 'inherit',
+                backgroundColor:
+                  'color-mix(in srgb, CanvasText 8%, transparent)',
+                cursor: 'pointer',
+              }}
+            >
+              {cancelTitle ?? 'Cancel'}
+            </button>
+          </div>
+        </Dialog>
+      ) : null}
+    </View>
+  );
+}

package/src/web/components.tsx

@@ -1,5 +1,6 @@
 import { withWebComponent } from './PlatformComponentsProvider';
 import type { WebComponents } from '../webComponents';
+import { ActionSheet as DefaultActionSheet } from './ActionSheet';
 import { Button as DefaultButton } from './Button';
 import { ButtonGroup as DefaultButtonGroup } from './ButtonGroup';
 import { SplitButton as DefaultSplitButton } from './SplitButton';
@@ -19,6 +20,10 @@ import {
 } from './containers';
 
 // Explicit types keep published declarations tied to a resolvable type import.
+export const ActionSheet: WebComponents['ActionSheet'] = withWebComponent(
+  'ActionSheet',
+  DefaultActionSheet
+);
 export const Button: WebComponents['Button'] = withWebComponent(
   'Button',
   DefaultButton

package/src/web/containers.tsx

@@ -22,6 +22,7 @@ export function ContextMenu(props: ContextMenuProps): React.ReactElement {
     actions,
     disabled,
     trigger,
+    visible,
     onPressAction,
     onMenuOpen,
     onMenuClose,

package/src/webComponents.ts

@@ -1,4 +1,5 @@
 import type { ComponentType, ReactNode, RefAttributes } from 'react';
+import type { ActionSheetProps } from './ActionSheet';
 import type { ButtonProps } from './Button';
 import type { ButtonGroupProps } from './ButtonGroup';
 import type { SplitButtonProps } from './SplitButton';
@@ -16,6 +17,7 @@ import type { TextFieldProps, TextFieldRef } from './TextField';
 
 /** Public contracts accepted by consumer-supplied web components. */
 export interface WebComponentProps {
+  ActionSheet: ActionSheetProps;
   Button: ButtonProps;
   ButtonGroup: ButtonGroupProps;
   SplitButton: SplitButtonProps;