@ankhorage/surface 4.4.1 → 5.0.1

package/src/features/popover-menu/utils/resolveNextMenuIndex.ts

@@ -0,0 +1,21 @@
+/*** Resolves the next enabled action index for standard menu keyboard navigation. */
+export function resolveNextMenuIndex(
+  items: readonly { disabled?: boolean }[],
+  currentIndex: number,
+  key: string,
+): number {
+  const enabledIndexes = items.flatMap((item, index) => (item.disabled ? [] : [index]));
+  if (enabledIndexes.length === 0) return -1;
+  if (key === 'Home') return enabledIndexes.at(0) ?? -1;
+  if (key === 'End') return enabledIndexes.at(-1) ?? -1;
+
+  const activeEnabledIndex = enabledIndexes.indexOf(currentIndex);
+  const nextEnabledIndex =
+    activeEnabledIndex === -1
+      ? 0
+      : key === 'ArrowUp'
+        ? (activeEnabledIndex - 1 + enabledIndexes.length) % enabledIndexes.length
+        : (activeEnabledIndex + 1) % enabledIndexes.length;
+
+  return enabledIndexes.at(nextEnabledIndex) ?? -1;
+}

package/src/features/tabs/adapters/inbound/Tab.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { Pressable, type ViewStyle } from 'react-native';
+
+import { useTheme } from '../../../../theme/ThemeContext';
+import type { TabProps } from '../../../../types/tabs';
+import { Box } from '../../../layout/public';
+import { Text } from '../../../typography/public';
+import { useTabRegistration } from '../../composition/useTabRegistration';
+import { useTabsContext } from '../../composition/useTabsContext';
+
+/*** Renders one accessible selectable tab inside a Tabs context. */
+export function Tab({
+  value,
+  children,
+  disabled = false,
+  interactionPolicy = 'enabled',
+  testID,
+}: TabProps) {
+  const { theme } = useTheme();
+  const { activeValue, getPanelId, getTabId, setActiveValue, setFocusedValue } = useTabsContext();
+  const pressableRef = useTabRegistration({ disabled, value });
+  const selected = activeValue === value;
+  const passive = interactionPolicy === 'passive';
+  const onPress = passive || disabled ? undefined : () => setActiveValue(value);
+
+  return (
+    <Pressable
+      accessibilityLabel={undefined}
+      accessibilityRole="tab"
+      accessibilityState={{ disabled, selected }}
+      aria-controls={getPanelId(value)}
+      disabled={disabled}
+      nativeID={getTabId(value)}
+      onBlur={() => setFocusedValue(undefined)}
+      onFocus={() => setFocusedValue(value)}
+      onPress={onPress}
+      ref={pressableRef}
+      testID={testID}
+    >
+      <Box
+        px="m"
+        py="s"
+        style={resolveTabStyle({
+          borderColor: selected
+            ? theme.semantics.action.primary.base
+            : theme.semantics.border.default,
+          disabled,
+        })}
+      >
+        <Text color={selected ? 'primary' : undefined} variant="label" weight="medium">
+          {children}
+        </Text>
+      </Box>
+    </Pressable>
+  );
+}
+
+/*** Resolves active and disabled visual state without inline JSX styles. */
+function resolveTabStyle({
+  borderColor,
+  disabled,
+}: {
+  borderColor: string;
+  disabled: boolean;
+}): ViewStyle {
+  return { borderBottomColor: borderColor, borderBottomWidth: 2, opacity: disabled ? 0.64 : 1 };
+}

package/src/features/tabs/adapters/inbound/TabList.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+
+import { useFocusManager } from '../../../../internal/focus/useFocusManager';
+import type { TabListProps, TabNavigationKey } from '../../../../types/tabs';
+import { Box } from '../../../layout/public';
+import { useTabsContext } from '../../composition/useTabsContext';
+import { resolveNextTabValue } from '../../utils/resolveNextTabValue';
+
+const navigationKeys: readonly string[] = [
+  'ArrowLeft',
+  'ArrowRight',
+  'ArrowUp',
+  'ArrowDown',
+  'Home',
+  'End',
+];
+
+/*** Renders the accessible tab list and owns keyboard focus navigation. */
+export function TabList({ children, testID }: TabListProps) {
+  const { bindKeydown } = useFocusManager();
+  const { focusedValue, setActiveValue, tabs } = useTabsContext();
+
+  React.useEffect(() => {
+    if (!focusedValue) return undefined;
+
+    return bindKeydown((event) => {
+      if (!isTabNavigationKey(event.key)) return;
+      const nextValue = resolveNextTabValue(tabs, focusedValue, event.key);
+      if (!nextValue) return;
+
+      event.preventDefault();
+      tabs.find((tab) => tab.value === nextValue)?.focus();
+      setActiveValue(nextValue);
+    });
+  }, [bindKeydown, focusedValue, setActiveValue, tabs]);
+
+  return (
+    <Box accessibilityRole="tablist" style={styles.list} testID={testID}>
+      {children}
+    </Box>
+  );
+}
+
+/*** Narrows keyboard event keys to the tab navigation key contract. */
+function isTabNavigationKey(key: string | undefined): key is TabNavigationKey {
+  return key !== undefined && navigationKeys.includes(key);
+}
+
+const styles = StyleSheet.create({ list: { flexDirection: 'row' } });

package/src/{components/tabs → features/tabs/adapters/inbound}/TabPanel.tsx

@@ -1,26 +1,22 @@
 import React from 'react';
 import { View } from 'react-native';
 
-import { useTabsContext } from './context';
-import type { TabPanelProps } from './types';
+import type { TabPanelProps } from '../../../../types/tabs';
+import { useTabsContext } from '../../composition/useTabsContext';
 
 const TAB_PANEL_ROLE = 'tabpanel' as React.ComponentProps<typeof View>['accessibilityRole'];
 
+/*** Renders the content panel associated with the active tab value. */
 export function TabPanel({ value, children, testID }: TabPanelProps) {
   const { activeValue, getPanelId, getTabId } = useTabsContext();
 
-  if (activeValue !== value) {
-    return null;
-  }
-
-  const tabId = getTabId(value);
-  const panelId = getPanelId(value);
+  if (activeValue !== value) return null;
 
   return (
     <View
-      accessibilityLabelledBy={tabId}
+      accessibilityLabelledBy={getTabId(value)}
       accessibilityRole={TAB_PANEL_ROLE}
-      nativeID={panelId}
+      nativeID={getPanelId(value)}
       testID={testID}
     >
       {children}

package/src/features/tabs/adapters/inbound/Tabs.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import type { TabsProps } from '../../../../types/tabs';
+import { Box } from '../../../layout/public';
+import { TabsContext } from '../../composition/TabsContext';
+import { useTabsController } from '../../composition/useTabsController';
+
+/*** Provides accessible tab selection state to TabList, Tab, and TabPanel children. */
+export function Tabs({ children, ...props }: TabsProps) {
+  const contextValue = useTabsController(props);
+
+  return (
+    <TabsContext value={contextValue}>
+      <Box testID={props.testID}>{children}</Box>
+    </TabsContext>
+  );
+}

package/src/features/tabs/composition/TabsContext.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+import type { TabsContextValue } from '../../../types/tabs';
+
+export const TabsContext = React.createContext<TabsContextValue | null>(null);

package/src/features/tabs/composition/useTabRegistration.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+import type { Pressable } from 'react-native';
+
+import { useTabsContext } from './useTabsContext';
+
+/*** Registers one focusable tab with the owning Tabs context. */
+export function useTabRegistration({ disabled, value }: { disabled: boolean; value: string }) {
+  const { registerTab, unregisterTab } = useTabsContext();
+  const pressableRef = React.useRef<React.ElementRef<typeof Pressable> | null>(null);
+
+  React.useEffect(() => {
+    registerTab({
+      disabled,
+      focus: () => {
+        const focusable = pressableRef.current as unknown as {
+          focus?: (() => void) | undefined;
+        } | null;
+        focusable?.focus?.();
+      },
+      value,
+    });
+
+    return () => unregisterTab(value);
+  }, [disabled, registerTab, unregisterTab, value]);
+
+  return pressableRef;
+}

package/src/features/tabs/composition/useTabsContext.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+
+import type { TabsContextValue } from '../../../types/tabs';
+import { TabsContext } from './TabsContext';
+
+/*** Returns the active Tabs feature context. */
+export function useTabsContext(): TabsContextValue {
+  const value = React.use(TabsContext);
+
+  if (!value) throw new Error('Tabs components must be used within <Tabs>.');
+
+  return value;
+}

package/src/features/tabs/composition/useTabsController.ts

@@ -0,0 +1,55 @@
+import React from 'react';
+
+import { useControllableState } from '../../../internal/useControllableState';
+import type { TabRegistration, TabsContextValue, TabsProps } from '../../../types/tabs';
+import { resolveTabElementId } from '../utils/resolveTabElementId';
+
+/*** Owns controlled state, registration, focus state, and ids for one Tabs instance. */
+export function useTabsController({
+  defaultValue,
+  onValueChange,
+  testID,
+  value,
+}: Pick<TabsProps, 'defaultValue' | 'onValueChange' | 'testID' | 'value'>): TabsContextValue {
+  const [activeValue, setActiveValue] = useControllableState<string | undefined>({
+    defaultValue,
+    onChange: (nextValue) => {
+      if (nextValue !== undefined) onValueChange?.(nextValue);
+    },
+    value,
+  });
+  const [focusedValue, setFocusedValue] = React.useState<string | undefined>(undefined);
+  const [tabs, setTabs] = React.useState<readonly TabRegistration[]>([]);
+
+  const registerTab = React.useCallback((tab: TabRegistration) => {
+    setTabs((current) =>
+      current.some((entry) => entry.value === tab.value)
+        ? current.map((entry) => (entry.value === tab.value ? tab : entry))
+        : [...current, tab],
+    );
+  }, []);
+  const unregisterTab = React.useCallback((valueToRemove: string) => {
+    setTabs((current) => current.filter((entry) => entry.value !== valueToRemove));
+  }, []);
+
+  React.useEffect(() => {
+    if (activeValue !== undefined) return;
+    const firstEnabledTab = tabs.find((entry) => !entry.disabled);
+    if (firstEnabledTab) setActiveValue(firstEnabledTab.value);
+  }, [activeValue, setActiveValue, tabs]);
+
+  return React.useMemo(
+    () => ({
+      activeValue,
+      focusedValue,
+      getPanelId: (tabValue: string) => resolveTabElementId('panel', testID, tabValue),
+      getTabId: (tabValue: string) => resolveTabElementId('tab', testID, tabValue),
+      registerTab,
+      setActiveValue: (nextValue: string) => setActiveValue(nextValue),
+      setFocusedValue,
+      tabs,
+      unregisterTab,
+    }),
+    [activeValue, focusedValue, registerTab, setActiveValue, tabs, testID, unregisterTab],
+  );
+}

package/src/features/tabs/public.ts

@@ -0,0 +1,5 @@
+export type { TabListProps, TabPanelProps, TabProps, TabsProps } from '../../types/tabs';
+export { Tab } from './adapters/inbound/Tab';
+export { TabList } from './adapters/inbound/TabList';
+export { TabPanel } from './adapters/inbound/TabPanel';
+export { Tabs } from './adapters/inbound/Tabs';

package/src/{components/tabs/navigation.test.ts → features/tabs/utils/resolveNextTabValue.test.ts}

@@ -1,12 +1,12 @@
 import { describe, expect, it } from 'bun:test';
 
-import { resolveNextTabValue } from './navigation';
+import { resolveNextTabValue } from './resolveNextTabValue';
 
 const tabs = [
   { disabled: false, focus: () => undefined, value: 'overview' },
   { disabled: true, focus: () => undefined, value: 'disabled' },
   { disabled: false, focus: () => undefined, value: 'details' },
-];
+] as const;
 
 describe('resolveNextTabValue', () => {
   it('skips disabled tabs when cycling', () => {

package/src/features/tabs/utils/resolveNextTabValue.ts

@@ -0,0 +1,24 @@
+import type { TabNavigationKey, TabRegistration } from '../../../types/tabs';
+
+/*** Resolves the next enabled tab for keyboard focus navigation. */
+export function resolveNextTabValue(
+  tabs: readonly TabRegistration[],
+  currentValue: string | undefined,
+  key: TabNavigationKey,
+): string | undefined {
+  const enabledTabs = tabs.filter((tab) => !tab.disabled);
+  if (enabledTabs.length === 0) return undefined;
+
+  if (key === 'Home') return enabledTabs.at(0)?.value;
+  if (key === 'End') return enabledTabs.at(-1)?.value;
+
+  const currentIndex = enabledTabs.findIndex((tab) => tab.value === currentValue);
+  if (currentIndex === -1) return enabledTabs.at(0)?.value;
+
+  const nextIndex =
+    key === 'ArrowLeft' || key === 'ArrowUp'
+      ? (currentIndex - 1 + enabledTabs.length) % enabledTabs.length
+      : (currentIndex + 1) % enabledTabs.length;
+
+  return enabledTabs.at(nextIndex)?.value;
+}

package/src/features/tabs/utils/resolveTabElementId.test.ts

@@ -0,0 +1,19 @@
+import { describe, expect, it } from 'bun:test';
+
+import { resolveTabElementId } from './resolveTabElementId';
+
+describe('resolveTabElementId', () => {
+  it('creates stable ids from tab values', () => {
+    expect(resolveTabElementId('tab', undefined, 'Account Settings')).toBe(
+      'tabs-tab-Account-Settings',
+    );
+    expect(resolveTabElementId('panel', undefined, 'Account Settings')).toBe(
+      'tabs-panel-Account-Settings',
+    );
+  });
+
+  it('namespaces ids by tabs testID when provided', () => {
+    expect(resolveTabElementId('tab', 'settings', 'billing')).toBe('settings-tabs-tab-billing');
+    expect(resolveTabElementId('panel', 'settings', 'billing')).toBe('settings-tabs-panel-billing');
+  });
+});

package/src/features/tabs/utils/resolveTabElementId.ts

@@ -0,0 +1,14 @@
+/*** Creates a stable tab or tab-panel id from a Tabs test id and tab value. */
+export function resolveTabElementId(
+  kind: 'tab' | 'panel',
+  testID: string | undefined,
+  value: string,
+): string {
+  const base = testID ? `${testID}-tabs` : 'tabs';
+  return `${base}-${kind}-${sanitizeTabValue(value)}`;
+}
+
+/*** Normalizes a tab value for use inside an accessibility id. */
+function sanitizeTabValue(value: string): string {
+  return value.trim().replace(/[^a-zA-Z0-9_-]+/g, '-');
+}

package/src/features/tooltip/adapters/inbound/Tooltip.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { Platform, Pressable, View } from 'react-native';
+
+import { useTheme } from '../../../../theme/ThemeContext';
+import type { TooltipProps } from '../../../../types/tooltip';
+import { Popover } from '../../../popover/public';
+import { Surface } from '../../../surface/public';
+import { Text } from '../../../typography/public';
+import { useTooltipVisibility } from '../../composition/useTooltipVisibility';
+
+/*** Presents delayed hover/focus help through the shared Popover foundation. */
+export function Tooltip({
+  children,
+  content,
+  delay = 150,
+  interactionPolicy = 'enabled',
+  placement = 'top',
+  testID,
+}: TooltipProps) {
+  const { theme } = useTheme();
+  const passive = interactionPolicy === 'passive';
+  const { hide, setVisible, show, visible } = useTooltipVisibility(delay, passive);
+
+  return (
+    <Popover
+      closeOnOutsidePress={false}
+      interactionPolicy={interactionPolicy}
+      onOpenChange={setVisible}
+      open={visible}
+      placement={placement}
+      testID={testID}
+      anchor={() => (
+        <Pressable
+          onBlur={passive ? undefined : hide}
+          onFocus={passive ? undefined : show}
+          onHoverIn={Platform.OS === 'web' && !passive ? show : undefined}
+          onHoverOut={Platform.OS === 'web' && !passive ? hide : undefined}
+        >
+          {children}
+        </Pressable>
+      )}
+    >
+      <View pointerEvents="none">
+        <Surface
+          p="s"
+          style={{ backgroundColor: theme.semantics.surface.inverse }}
+          variant="raised"
+        >
+          <Text emphasis="inverse" variant="caption">
+            {content}
+          </Text>
+        </Surface>
+      </View>
+    </Popover>
+  );
+}

package/src/features/tooltip/composition/useTooltipVisibility.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+
+/*** Manages delayed tooltip visibility and timer cleanup. */
+export function useTooltipVisibility(delay: number, passive: boolean) {
+  const timeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
+  const [visible, setVisible] = React.useState(false);
+
+  const clearTimer = React.useCallback(() => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+  }, []);
+
+  const show = React.useCallback(() => {
+    if (passive) return;
+    clearTimer();
+    timeoutRef.current = setTimeout(() => setVisible(true), delay);
+  }, [clearTimer, delay, passive]);
+
+  const hide = React.useCallback(() => {
+    clearTimer();
+    setVisible(false);
+  }, [clearTimer]);
+
+  React.useEffect(() => clearTimer, [clearTimer]);
+
+  return { hide, setVisible, show, visible } as const;
+}

package/src/features/tooltip/public.test.ts

@@ -0,0 +1,11 @@
+import { expect, test } from 'bun:test';
+
+test('Tooltip delegates anchored positioning and portal ownership to Popover', async () => {
+  const source = await Bun.file('src/features/tooltip/adapters/inbound/Tooltip.tsx').text();
+
+  expect(source).toContain("import { Popover } from '../../../popover/public';");
+  expect(source).toContain('<Popover');
+  expect(source).not.toContain('measureInWindow');
+  expect(source).not.toContain('internal/overlay');
+  expect(source).not.toContain('<Portal');
+});

package/src/features/tooltip/public.ts

@@ -0,0 +1,2 @@
+export type { TooltipProps } from '../../types/tooltip';
+export { Tooltip } from './adapters/inbound/Tooltip';

package/src/index.test.ts

@@ -28,8 +28,12 @@ const expectedFeatureRootExports = [
   "export { Image } from './features/image/public';",
   "export { KeyboardAvoidingView } from './features/keyboard-avoiding-view/public';",
   "export { Box, Container, Divider, Grid, Stack } from './features/layout/public';",
+  "export { Modal } from './features/modal/public';",
+  "export { PopoverMenu } from './features/popover-menu/public';",
   "export { Popover } from './features/popover/public';",
   "export { Surface } from './features/surface/public';",
+  "export { Tab, TabList, TabPanel, Tabs } from './features/tabs/public';",
+  "export { Tooltip } from './features/tooltip/public';",
   "export { Toast, ToastProvider, useToast } from './features/toast/public';",
   "export { Heading, Text } from './features/typography/public';",
 ] as const;
@@ -39,12 +43,8 @@ const expectedLegacyRootExports = [
   "export { HelperText } from './components/helper-text';",
   "export { Label } from './components/label';",
   "export { ListItem } from './components/list-item';",
-  "export { Menu } from './components/menu';",
-  "export { Modal } from './components/modal';",
   "export { Switch } from './components/switch';",
-  "export { Tab, TabList, TabPanel, Tabs } from './components/tabs';",
   "export { Textarea } from './components/textarea';",
-  "export { Tooltip } from './components/tooltip';",
   "export type { InteractionPolicy, InteractionPolicyProps } from './interactionPolicy';",
   "export * from './core/responsive';",
   "export * from './layout';",
@@ -62,9 +62,13 @@ describe('feature-owned root barrel contract', () => {
       './components/card',
       './components/checkbox',
       './components/icon-button',
+      './components/menu',
+      './components/modal',
       './components/radio',
+      './components/tabs',
       './components/text-input',
       './components/toast',
+      './components/tooltip',
       './primitives/heading',
       './primitives/icon',
       './primitives/image',
@@ -94,12 +98,15 @@ describe('remaining root barrel contract', () => {
     expectedLegacyRootExports.forEach((line) => expect(indexSource).toContain(line));
   });
 
-  it('does not retain obsolete action-sheet, drawer, or navigation chrome', () => {
+  it('does not retain obsolete action-sheet, drawer, menu aliases, or navigation chrome', () => {
     expect(indexSource).not.toContain('ActionSheet');
     expect(indexSource).not.toContain("'./components/action-sheet'");
     expect(indexSource).not.toContain("'./components/drawer'");
     expect(indexSource).not.toContain("'./components/navigation'");
     expect(indexSource).not.toContain('DrawerNavigation');
+    expect(indexSource).not.toMatch(/\bMenuProps\b/u);
+    expect(indexSource).not.toMatch(/\bMenuAction\b/u);
+    expect(indexSource).not.toMatch(/export\s*\{\s*Menu\s*\}/u);
     expect(indexSource).not.toContain('NavigationItem');
     expect(indexSource).not.toContain('NavigationList');
     expect(indexSource).not.toContain('TabBar');

package/src/index.ts

@@ -6,18 +6,10 @@ export type { LabelProps } from './components/label';
 export { Label } from './components/label';
 export type { ListItemProps } from './components/list-item';
 export { ListItem } from './components/list-item';
-export type { MenuAction, MenuActionIntent, MenuItem, MenuProps } from './components/menu';
-export { Menu } from './components/menu';
-export type { ModalProps } from './components/modal';
-export { Modal } from './components/modal';
 export type { SwitchProps } from './components/switch';
 export { Switch } from './components/switch';
-export type { TabListProps, TabPanelProps, TabProps, TabsProps } from './components/tabs';
-export { Tab, TabList, TabPanel, Tabs } from './components/tabs';
 export type { TextareaProps } from './components/textarea';
 export { Textarea } from './components/textarea';
-export type { TooltipProps } from './components/tooltip';
-export { Tooltip } from './components/tooltip';
 export type { FontRuntime } from './context/FontContext';
 export { FontProvider, useFontContext } from './context/FontContext';
 export type { I18nInstance, TranslationRuntime, Translator } from './context/TranslationContext';
@@ -74,14 +66,24 @@ export type {
   StackProps,
 } from './features/layout/public';
 export { Box, Container, Divider, Grid, Stack } from './features/layout/public';
+export type { ModalProps } from './features/modal/public';
+export { Modal } from './features/modal/public';
 export type {
   PopoverAnchorRenderProps,
   PopoverPlacement,
   PopoverProps,
 } from './features/popover/public';
 export { Popover } from './features/popover/public';
+export type {
+  PopoverMenuAction,
+  PopoverMenuActionIntent,
+  PopoverMenuProps,
+} from './features/popover-menu/public';
+export { PopoverMenu } from './features/popover-menu/public';
 export type { SurfaceProps, SurfaceVariant } from './features/surface/public';
 export { Surface } from './features/surface/public';
+export type { TabListProps, TabPanelProps, TabProps, TabsProps } from './features/tabs/public';
+export { Tab, TabList, TabPanel, Tabs } from './features/tabs/public';
 export type {
   ToastController,
   ToastOptions,
@@ -90,6 +92,8 @@ export type {
   ToastStatus,
 } from './features/toast/public';
 export { Toast, ToastProvider, useToast } from './features/toast/public';
+export type { TooltipProps } from './features/tooltip/public';
+export { Tooltip } from './features/tooltip/public';
 export type { HeadingLevel, HeadingProps, TextProps } from './features/typography/public';
 export { Heading, Text } from './features/typography/public';
 export type { InteractionPolicy, InteractionPolicyProps } from './interactionPolicy';

package/src/types/bottomSheet.ts

@@ -1,10 +1,14 @@
 import type React from 'react';
 
+export type BottomSheetContentMode = 'view' | 'direct';
+
 export interface BottomSheetPresentOptions {
   content: React.ReactNode;
+  contentMode?: BottomSheetContentMode;
   snapPoints?: readonly (number | string)[];
   initialIndex?: number;
   enableDynamicSizing?: boolean;
+  maxDynamicContentSize?: number;
   enablePanDownToClose?: boolean;
   dismissOnBackdropPress?: boolean;
   keyboardBehavior?: 'extend' | 'fillParent' | 'interactive';

package/src/{components/modal/types.ts → types/modal.ts}

@@ -1,6 +1,6 @@
 import type React from 'react';
 
-import type { InteractionPolicy } from '../../interactionPolicy';
+import type { InteractionPolicy } from '../interactionPolicy';
 
 export interface ModalProps {
   visible: boolean;

package/src/types/popoverMenu.ts

@@ -0,0 +1,27 @@
+import type React from 'react';
+
+import type { InteractionPolicy } from '../interactionPolicy';
+import type { PopoverAnchorRenderProps } from './popover';
+
+export type PopoverMenuActionIntent = 'default' | 'danger';
+
+export interface PopoverMenuAction {
+  id: string;
+  title: React.ReactNode;
+  description?: React.ReactNode;
+  leading?: React.ReactNode;
+  trailing?: React.ReactNode;
+  intent?: PopoverMenuActionIntent;
+  disabled?: boolean;
+  selected?: boolean;
+  activate?: () => void;
+}
+
+export interface PopoverMenuProps {
+  trigger: (controls: PopoverAnchorRenderProps) => React.ReactNode;
+  actions: readonly PopoverMenuAction[];
+  dismiss?: () => void;
+  closeOnSelect?: boolean;
+  interactionPolicy?: InteractionPolicy;
+  testID?: string;
+}