@ankhorage/surface 2.0.2 → 2.1.0

package/src/components/drawer/Drawer.tsx

@@ -14,10 +14,12 @@ export function Drawer({
   position = 'right',
   children,
   closeOnBackdrop = true,
+  interactionPolicy = 'enabled',
   testID,
 }: DrawerProps) {
   const { theme } = useTheme();
   const animation = resolveOverlayAnimation('drawer');
+  const passive = interactionPolicy === 'passive';
 
   if (!visible) {
     return null;
@@ -36,7 +38,7 @@ export function Drawer({
         }}
       >
         <Pressable
-          onPress={closeOnBackdrop ? onDismiss : undefined}
+          onPress={passive ? undefined : closeOnBackdrop ? onDismiss : undefined}
           style={{
             backgroundColor: theme.semantics.neutral.text,
             bottom: 0,
@@ -50,7 +52,7 @@ export function Drawer({
         />
         <FocusScope
           active={visible}
-          onEscape={onDismiss}
+          onEscape={passive ? undefined : onDismiss}
           testID={testID ? `${testID}-focus` : undefined}
         >
           <Box

package/src/components/drawer/types.ts

@@ -1,10 +1,13 @@
 import type React from 'react';
 
+import type { InteractionPolicy } from '../../interactionPolicy';
+
 export interface DrawerProps {
   visible: boolean;
   onDismiss?: (() => void) | undefined;
   position?: 'left' | 'right';
   children?: React.ReactNode;
   closeOnBackdrop?: boolean;
+  interactionPolicy?: InteractionPolicy;
   testID?: string;
 }

package/src/components/menu/Menu.tsx

@@ -53,7 +53,14 @@ function renderActionContent(action: MenuAction, active: boolean) {
   );
 }
 
-export function Menu({ trigger, actions, dismiss, closeOnSelect = true, testID }: MenuProps) {
+export function Menu({
+  trigger,
+  actions,
+  dismiss,
+  closeOnSelect = true,
+  interactionPolicy = 'enabled',
+  testID,
+}: MenuProps) {
   const { theme } = useTheme();
   const { bindKeydown } = useFocusManager();
   const animation = resolveOverlayAnimation('menu');
@@ -61,6 +68,7 @@ export function Menu({ trigger, actions, dismiss, closeOnSelect = true, testID }
   const [open, setOpen] = React.useState(false);
   const [layout, setLayout] = React.useState<LayoutRectangle | null>(null);
   const [activeIndex, setActiveIndex] = React.useState(0);
+  const passive = interactionPolicy === 'passive';
 
   const closeMenu = React.useCallback(() => {
     setOpen(false);
@@ -99,6 +107,10 @@ export function Menu({ trigger, actions, dismiss, closeOnSelect = true, testID }
     }
 
     return bindKeydown((event) => {
+      if (passive) {
+        return;
+      }
+
       const { key } = event;
       if (key === 'ArrowDown' || key === 'ArrowUp' || key === 'Home' || key === 'End') {
         event.preventDefault();
@@ -118,12 +130,12 @@ export function Menu({ trigger, actions, dismiss, closeOnSelect = true, testID }
         closeMenu();
       }
     });
-  }, [activateAction, actions, activeIndex, bindKeydown, closeMenu, open]);
+  }, [activateAction, actions, activeIndex, bindKeydown, closeMenu, open, passive]);
 
   return (
     <View collapsable={false} ref={anchorRef}>
       <ButtonBase
-        onPress={open ? closeMenu : openMenu}
+        onPress={passive ? undefined : open ? closeMenu : openMenu}
         testID={testID ? `${testID}-trigger` : undefined}
       >
         {trigger}
@@ -140,7 +152,7 @@ export function Menu({ trigger, actions, dismiss, closeOnSelect = true, testID }
           }}
         >
           <Pressable
-            onPress={closeMenu}
+            onPress={passive ? undefined : closeMenu}
             style={{
               bottom: 0,
               left: 0,
@@ -149,7 +161,7 @@ export function Menu({ trigger, actions, dismiss, closeOnSelect = true, testID }
               top: 0,
             }}
           />
-          <FocusScope active={open} onEscape={closeMenu}>
+          <FocusScope active={open} onEscape={passive ? undefined : closeMenu}>
             <View
               style={{
                 left: layout?.x ?? 0,
@@ -179,7 +191,7 @@ export function Menu({ trigger, actions, dismiss, closeOnSelect = true, testID }
                       accessibilityState={{ disabled: action.disabled, selected }}
                       disabled={action.disabled}
                       key={action.id}
-                      onPress={() => activateAction(action)}
+                      onPress={passive ? undefined : () => activateAction(action)}
                     >
                       <Box
                         px="m"

package/src/components/menu/types.ts

@@ -1,5 +1,7 @@
 import type React from 'react';
 
+import type { InteractionPolicy } from '../../interactionPolicy';
+
 export type MenuActionIntent = 'default' | 'danger';
 
 export interface MenuAction {
@@ -19,5 +21,6 @@ export interface MenuProps {
   actions: readonly MenuAction[];
   dismiss?: () => void;
   closeOnSelect?: boolean;
+  interactionPolicy?: InteractionPolicy;
   testID?: string;
 }

package/src/components/modal/Modal.tsx

@@ -13,10 +13,12 @@ export function Modal({
   onDismiss,
   children,
   closeOnBackdrop = true,
+  interactionPolicy = 'enabled',
   testID,
 }: ModalProps) {
   const { theme } = useTheme();
   const animation = resolveOverlayAnimation('modal');
+  const passive = interactionPolicy === 'passive';
 
   if (!visible) {
     return null;
@@ -35,7 +37,7 @@ export function Modal({
         }}
       >
         <Pressable
-          onPress={closeOnBackdrop ? onDismiss : undefined}
+          onPress={passive ? undefined : closeOnBackdrop ? onDismiss : undefined}
           style={{
             backgroundColor: theme.semantics.neutral.text,
             bottom: 0,
@@ -49,7 +51,7 @@ export function Modal({
         />
         <FocusScope
           active={visible}
-          onEscape={onDismiss}
+          onEscape={passive ? undefined : onDismiss}
           testID={testID ? `${testID}-focus` : undefined}
         >
           <Center

package/src/components/modal/types.ts

@@ -1,9 +1,12 @@
 import type React from 'react';
 
+import type { InteractionPolicy } from '../../interactionPolicy';
+
 export interface ModalProps {
   visible: boolean;
   onDismiss?: (() => void) | undefined;
   children?: React.ReactNode;
   closeOnBackdrop?: boolean;
+  interactionPolicy?: InteractionPolicy;
   testID?: string;
 }

package/src/components/navigation/DrawerNavigation.tsx

@@ -10,13 +10,20 @@ export function DrawerNavigation({
   footer,
   compact = false,
   testID,
+  interactionPolicy,
 }: DrawerNavigationProps) {
   return (
     <Stack gap={compact ? 's' : 'm'} testID={testID}>
       {header}
       <Stack gap={compact ? 'xs' : 's'}>
         {items.map((item) => (
-          <DrawerNavigationItem compact={compact} item={item} key={item.id} testID={testID} />
+          <DrawerNavigationItem
+            compact={compact}
+            interactionPolicy={interactionPolicy}
+            item={item}
+            key={item.id}
+            testID={testID}
+          />
         ))}
       </Stack>
       {footer}

package/src/components/navigation/DrawerNavigationItem.tsx

@@ -3,10 +3,16 @@ import React from 'react';
 import { NavigationItem } from './NavigationItem';
 import type { DrawerNavigationItemProps } from './types';
 
-export function DrawerNavigationItem({ item, compact = false, testID }: DrawerNavigationItemProps) {
+export function DrawerNavigationItem({
+  item,
+  compact = false,
+  testID,
+  interactionPolicy,
+}: DrawerNavigationItemProps) {
   return (
     <NavigationItem
       compact={compact}
+      interactionPolicy={interactionPolicy}
       item={{
         ...item,
         accessibilityRole: item.accessibilityRole ?? 'button',

package/src/components/navigation/NavigationItem.tsx

@@ -9,7 +9,12 @@ import { useTheme } from '../../theme/ThemeContext';
 import { resolveNavigationAccessibilityState, resolveNavigationItemPresentation } from './helpers';
 import type { NavigationItemProps } from './types';
 
-export function NavigationItem({ item, compact = false, testID }: NavigationItemProps) {
+export function NavigationItem({
+  item,
+  compact = false,
+  testID,
+  interactionPolicy,
+}: NavigationItemProps) {
   const { theme } = useTheme();
   const active = Boolean(item.active);
   const disabled = Boolean(item.disabled);
@@ -26,6 +31,7 @@ export function NavigationItem({ item, compact = false, testID }: NavigationItem
       accessibilityRole={item.accessibilityRole ?? 'button'}
       accessibilityState={resolvedAccessibilityState}
       disabled={disabled}
+      interactionPolicy={interactionPolicy}
       onPress={item.onPress}
       testID={resolvedTestID}
     >

package/src/components/navigation/NavigationList.tsx

@@ -9,6 +9,7 @@ export function NavigationList({
   orientation = 'vertical',
   compact = false,
   testID,
+  interactionPolicy,
 }: NavigationListProps) {
   return (
     <Stack
@@ -17,7 +18,13 @@ export function NavigationList({
       testID={testID}
     >
       {items.map((item) => (
-        <NavigationItem compact={compact} item={item} key={item.id} testID={testID} />
+        <NavigationItem
+          compact={compact}
+          interactionPolicy={interactionPolicy}
+          item={item}
+          key={item.id}
+          testID={testID}
+        />
       ))}
     </Stack>
   );

package/src/components/navigation/TabBar.tsx

@@ -5,7 +5,7 @@ import { useTheme } from '../../theme/ThemeContext';
 import { TabBarItem } from './TabBarItem';
 import type { TabBarProps } from './types';
 
-export function TabBar({ items, compact = false, testID }: TabBarProps) {
+export function TabBar({ items, compact = false, testID, interactionPolicy }: TabBarProps) {
   const { theme } = useTheme();
 
   return (
@@ -18,7 +18,13 @@ export function TabBar({ items, compact = false, testID }: TabBarProps) {
       testID={testID}
     >
       {items.map((item) => (
-        <TabBarItem compact={compact} item={item} key={item.id} testID={testID} />
+        <TabBarItem
+          compact={compact}
+          interactionPolicy={interactionPolicy}
+          item={item}
+          key={item.id}
+          testID={testID}
+        />
       ))}
     </Box>
   );

package/src/components/navigation/TabBarItem.tsx

@@ -9,7 +9,7 @@ import { useTheme } from '../../theme/ThemeContext';
 import { resolveNavigationAccessibilityState, resolveNavigationItemPresentation } from './helpers';
 import type { TabBarItemProps } from './types';
 
-export function TabBarItem({ item, compact = false, testID }: TabBarItemProps) {
+export function TabBarItem({ item, compact = false, testID, interactionPolicy }: TabBarItemProps) {
   const { theme } = useTheme();
   const active = Boolean(item.active);
   const disabled = Boolean(item.disabled);
@@ -26,6 +26,7 @@ export function TabBarItem({ item, compact = false, testID }: TabBarItemProps) {
       accessibilityRole={item.accessibilityRole ?? 'tab'}
       accessibilityState={resolvedAccessibilityState}
       disabled={disabled}
+      interactionPolicy={interactionPolicy}
       onPress={item.onPress}
       style={{ flex: 1 }}
       testID={resolvedTestID}

package/src/components/navigation/policy.test.ts

@@ -42,3 +42,99 @@ describe('navigation module boundaries', () => {
     });
   });
 });
+
+describe('navigation interaction policy', () => {
+  it('host component prop types include interactionPolicy', () => {
+    const sources = listNavigationSources().map((path) => ({
+      path,
+      content: readFileSync(path, 'utf8'),
+    }));
+
+    const hostComponents = [{ path: 'types.ts', prop: 'interactionPolicy?: InteractionPolicy' }];
+
+    sources.forEach(({ content, path }) => {
+      const component = hostComponents.find((host) => path.endsWith(host.path));
+      if (component) {
+        expect(content, path).toContain(component.prop);
+      }
+    });
+  });
+
+  it('navigation components accept interactionPolicy prop', () => {
+    const sources = listNavigationSources().map((path) => ({
+      path,
+      content: readFileSync(path, 'utf8'),
+    }));
+
+    const components = [
+      'NavigationItem.tsx',
+      'NavigationList.tsx',
+      'TabBar.tsx',
+      'TabBarItem.tsx',
+      'DrawerNavigation.tsx',
+      'DrawerNavigationItem.tsx',
+    ];
+
+    sources.forEach(({ content, path }) => {
+      const component = components.find((c) => path.endsWith(c));
+      if (component) {
+        expect(content, path).toContain('interactionPolicy');
+      }
+    });
+  });
+
+  it('direct ButtonBase owners forward interactionPolicy unchanged', () => {
+    const sources = listNavigationSources().map((path) => ({
+      path,
+      content: readFileSync(path, 'utf8'),
+    }));
+
+    const directButtonBaseOwners = ['NavigationItem.tsx', 'TabBarItem.tsx'];
+
+    sources.forEach(({ content, path }) => {
+      const component = directButtonBaseOwners.find((owner) => path.endsWith(owner));
+      if (component) {
+        expect(content, path).toContain('interactionPolicy={interactionPolicy}');
+      }
+    });
+  });
+
+  it('container components forward interactionPolicy to children', () => {
+    const sources = listNavigationSources().map((path) => ({
+      path,
+      content: readFileSync(path, 'utf8'),
+    }));
+
+    const forwardingMap: Record<string, string> = {
+      'NavigationList.tsx': 'NavigationItem',
+      'TabBar.tsx': 'TabBarItem',
+      'DrawerNavigation.tsx': 'DrawerNavigationItem',
+      'DrawerNavigationItem.tsx': 'NavigationItem',
+    };
+
+    sources.forEach(({ content, path }) => {
+      const filename = path.split('/').pop();
+      if (filename && forwardingMap[filename]) {
+        expect(content, path).toContain(`interactionPolicy={interactionPolicy}`);
+      }
+    });
+  });
+
+  it('does not map passive interactionPolicy to disabled in navigation components', () => {
+    const sources = listNavigationSources().map((path) => ({
+      path,
+      content: readFileSync(path, 'utf8'),
+    }));
+
+    const passiveToDisabledPatterns = [
+      /disabled=\{interactionPolicy === 'passive'\}/,
+      /disabled=\{passive/,
+    ];
+
+    sources.forEach(({ content, path }) => {
+      passiveToDisabledPatterns.forEach((pattern) => {
+        expect(content, path).not.toMatch(pattern);
+      });
+    });
+  });
+});

package/src/components/navigation/types.ts

@@ -1,6 +1,7 @@
 import type React from 'react';
 import type { AccessibilityRole, AccessibilityState } from 'react-native';
 
+import type { InteractionPolicy } from '../../interactionPolicy';
 import type { IconProps } from '../../primitives/icon';
 
 export type NavigationItemIcon = Pick<IconProps, 'name' | 'provider'>;
@@ -23,6 +24,7 @@ export interface NavigationItemProps {
   item: NavigationItemSpec;
   compact?: boolean;
   testID?: string;
+  interactionPolicy?: InteractionPolicy;
 }
 
 export interface NavigationListProps {
@@ -30,18 +32,21 @@ export interface NavigationListProps {
   orientation?: 'vertical' | 'horizontal';
   compact?: boolean;
   testID?: string;
+  interactionPolicy?: InteractionPolicy;
 }
 
 export interface TabBarProps {
   items: readonly NavigationItemSpec[];
   compact?: boolean;
   testID?: string;
+  interactionPolicy?: InteractionPolicy;
 }
 
 export interface TabBarItemProps {
   item: NavigationItemSpec;
   compact?: boolean;
   testID?: string;
+  interactionPolicy?: InteractionPolicy;
 }
 
 export interface DrawerNavigationProps {
@@ -50,10 +55,12 @@ export interface DrawerNavigationProps {
   footer?: React.ReactNode;
   compact?: boolean;
   testID?: string;
+  interactionPolicy?: InteractionPolicy;
 }
 
 export interface DrawerNavigationItemProps {
   item: NavigationItemSpec;
   compact?: boolean;
   testID?: string;
+  interactionPolicy?: InteractionPolicy;
 }

package/src/components/tabs/Tab.tsx

@@ -7,7 +7,13 @@ import { useTheme } from '../../theme/ThemeContext';
 import { useTabsContext } from './context';
 import type { TabProps } from './types';
 
-export function Tab({ value, children, disabled = false, testID }: TabProps) {
+export function Tab({
+  value,
+  children,
+  disabled = false,
+  interactionPolicy = 'enabled',
+  testID,
+}: TabProps) {
   const { theme } = useTheme();
   const {
     activeValue,
@@ -22,6 +28,7 @@ export function Tab({ value, children, disabled = false, testID }: TabProps) {
   const selected = activeValue === value;
   const tabId = getTabId(value);
   const panelId = getPanelId(value);
+  const passive = interactionPolicy === 'passive';
 
   React.useEffect(() => {
     registerTab({
@@ -50,11 +57,15 @@ export function Tab({ value, children, disabled = false, testID }: TabProps) {
       disabled={disabled}
       onFocus={() => setFocusedValue(value)}
       onBlur={() => setFocusedValue(undefined)}
-      onPress={() => {
-        if (!disabled) {
-          setActiveValue(value);
-        }
-      }}
+      onPress={
+        passive
+          ? undefined
+          : () => {
+              if (!disabled) {
+                setActiveValue(value);
+              }
+            }
+      }
       ref={pressableRef}
       testID={testID}
     >

package/src/components/tabs/types.ts

@@ -1,5 +1,7 @@
 import type React from 'react';
 
+import type { InteractionPolicy } from '../../interactionPolicy';
+
 export interface TabsProps {
   children?: React.ReactNode;
   value?: string;
@@ -17,6 +19,7 @@ export interface TabProps {
   value: string;
   children?: React.ReactNode;
   disabled?: boolean;
+  interactionPolicy?: InteractionPolicy;
   testID?: string;
 }
 

package/src/components/text-input/TextInput.tsx

@@ -22,6 +22,7 @@ export function TextInput({
   invalid = false,
   leadingAccessory,
   trailingAccessory,
+  interactionPolicy = 'enabled',
   style,
   testID,
   onFocus,
@@ -52,6 +53,7 @@ export function TextInput({
   const containerMinHeight = props.multiline
     ? inputMinHeight + controlSize.paddingVertical * 2
     : controlSize.minHeight;
+  const passive = interactionPolicy === 'passive';
 
   const handleFocus: NonNullable<TextInputProps['onFocus']> = (event) => {
     setFocused(true);
@@ -87,10 +89,16 @@ export function TextInput({
       <ReactNativeTextInput
         {...props}
         defaultValue={defaultValue}
-        editable={!disabled && !readOnly}
+        editable={passive ? false : !disabled && !readOnly}
         numberOfLines={props.multiline ? props.numberOfLines : 1}
         onBlur={handleBlur}
-        onChangeText={onChangeText}
+        onChangeText={(nextValue) => {
+          if (passive) {
+            return;
+          }
+
+          onChangeText?.(nextValue);
+        }}
         onFocus={handleFocus}
         placeholder={placeholder}
         placeholderTextColor={colors.placeholderColor}

package/src/components/text-input/types.ts

@@ -5,6 +5,7 @@ import type {
   TextStyle,
 } from 'react-native';
 
+import type { InteractionPolicy } from '../../interactionPolicy';
 import type { ControlSize } from '../../internal/resolvers/resolveControlSize';
 
 export interface TextInputProps extends Omit<
@@ -27,6 +28,7 @@ export interface TextInputProps extends Omit<
   invalid?: boolean;
   leadingAccessory?: React.ReactNode;
   trailingAccessory?: React.ReactNode;
+  interactionPolicy?: InteractionPolicy;
   style?: StyleProp<TextStyle>;
   testID?: string;
 }

package/src/components/toast/Toast.tsx

@@ -38,10 +38,18 @@ function resolveToastStatusTextColor(status: ToastProps['status']): SurfaceColor
   }
 }
 
-export function Toast({ title, description, status = 'default', onDismiss, testID }: ToastProps) {
+export function Toast({
+  title,
+  description,
+  status = 'default',
+  onDismiss,
+  interactionPolicy = 'enabled',
+  testID,
+}: ToastProps) {
   const { theme } = useTheme();
   const statusColor = resolveToastStatusColor(theme, status);
   const statusTextColor = resolveToastStatusTextColor(status);
+  const passive = interactionPolicy === 'passive';
 
   return (
     <Surface
@@ -70,7 +78,7 @@ export function Toast({ title, description, status = 'default', onDismiss, testI
           <Pressable
             accessibilityLabel="Dismiss notification"
             accessibilityRole="button"
-            onPress={onDismiss}
+            onPress={passive ? undefined : onDismiss}
             testID={testID ? `${testID}-dismiss` : undefined}
           >
             <Text color={statusTextColor}>×</Text>

package/src/components/toast/types.ts

@@ -1,5 +1,6 @@
 import type React from 'react';
 
+import type { InteractionPolicy } from '../../interactionPolicy';
 import type { SurfaceStatusColor } from '../../surfaceColor';
 
 export type ToastStatus = 'default' | SurfaceStatusColor;
@@ -9,6 +10,7 @@ export interface ToastProps {
   description?: React.ReactNode;
   status?: ToastStatus;
   onDismiss?: (() => void) | undefined;
+  interactionPolicy?: InteractionPolicy;
   testID?: string;
 }
 

package/src/components/tooltip/Tooltip.tsx

@@ -25,6 +25,7 @@ export function Tooltip({
   children,
   content,
   delay = 150,
+  interactionPolicy = 'enabled',
   placement = 'top',
   testID,
 }: TooltipProps) {
@@ -34,6 +35,7 @@ export function Tooltip({
   const timeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
   const [visible, setVisible] = React.useState(false);
   const [layout, setLayout] = React.useState<LayoutRectangle | null>(null);
+  const passive = interactionPolicy === 'passive';
 
   const show = React.useCallback(() => {
     if (timeoutRef.current) {
@@ -74,10 +76,10 @@ export function Tooltip({
   return (
     <View collapsable={false} ref={anchorRef} testID={testID ? `${testID}-anchor` : undefined}>
       <Pressable
-        onBlur={hide}
-        onFocus={show}
-        onHoverIn={Platform.OS === 'web' ? show : undefined}
-        onHoverOut={Platform.OS === 'web' ? hide : undefined}
+        onBlur={passive ? undefined : hide}
+        onFocus={passive ? undefined : show}
+        onHoverIn={Platform.OS === 'web' && !passive ? show : undefined}
+        onHoverOut={Platform.OS === 'web' && !passive ? hide : undefined}
       >
         {children}
       </Pressable>
@@ -93,7 +95,7 @@ export function Tooltip({
           <Surface
             p="s"
             style={{
-              backgroundColor: theme.semantics.neutral.text,
+              backgroundColor: theme.semantics.surface.inverse,
             }}
             testID={testID}
             variant="raised"

package/src/components/tooltip/types.ts

@@ -1,9 +1,12 @@
 import type React from 'react';
 
+import type { InteractionPolicy } from '../../interactionPolicy';
+
 export interface TooltipProps {
   children?: React.ReactNode;
   content?: React.ReactNode;
   delay?: number;
+  interactionPolicy?: InteractionPolicy;
   placement?: 'top' | 'bottom';
   testID?: string;
 }