@ankhorage/surface 2.0.3 → 2.1.0

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>

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;
 }

package/src/index.test.ts

@@ -19,6 +19,7 @@ const expectedRootExports = [
   "export { Field } from './components/field';",
   "export { HelperText } from './components/helper-text';",
   "export { IconButton } from './components/icon-button';",
+  "export type { InteractionPolicy, InteractionPolicyProps } from './interactionPolicy';",
   "export { Label } from './components/label';",
   "export { ListItem } from './components/list-item';",
   "export {\n  DrawerNavigation,\n  DrawerNavigationItem,\n  NavigationItem,\n  NavigationList,\n  TabBar,\n  TabBarItem,\n} from './components/navigation';",

package/src/index.ts

@@ -61,6 +61,7 @@ export { FontProvider, useFontContext } from './context/FontContext';
 export type { I18nInstance, TranslationRuntime, Translator } from './context/TranslationContext';
 export { TranslationProvider, useTranslationContext } from './context/TranslationContext';
 export * from './core/responsive';
+export type { InteractionPolicy, InteractionPolicyProps } from './interactionPolicy';
 export * from './layout';
 export type { ButtonBaseProps } from './primitives/button-base';
 export { ButtonBase } from './primitives/button-base';

package/src/interactionPolicy.test.ts

@@ -0,0 +1,86 @@
+import { readFileSync } from 'node:fs';
+
+import { describe, expect, it } from 'bun:test';
+
+const indexSource = readFileSync(new URL('./index.ts', import.meta.url), 'utf8');
+
+describe('InteractionPolicy public export', () => {
+  it('exports InteractionPolicy from the public root', () => {
+    expect(indexSource).toContain(
+      "export type { InteractionPolicy, InteractionPolicyProps } from './interactionPolicy';",
+    );
+  });
+
+  it('exports InteractionPolicyProps from the public root', () => {
+    expect(indexSource).toContain(
+      "export type { InteractionPolicy, InteractionPolicyProps } from './interactionPolicy';",
+    );
+  });
+
+  it('does not export InteractionPolicy from button-base', () => {
+    expect(indexSource).not.toContain(
+      "export type { InteractionPolicy, InteractionPolicyProps } from './primitives/button-base';",
+    );
+  });
+});
+
+describe('InteractionPolicy type', () => {
+  it('only allows enabled', () => {
+    const policy = 'enabled' as const;
+    expect(policy).toBe('enabled');
+  });
+
+  it('only allows passive', () => {
+    const policy = 'passive' as const;
+    expect(policy).toBe('passive');
+  });
+});
+
+describe('InteractionPolicyProps', () => {
+  it('allows omitted interactionPolicy', () => {
+    const props: { readonly interactionPolicy?: 'enabled' | 'passive' } = {};
+    expect(props.interactionPolicy).toBeUndefined();
+  });
+
+  it('allows explicit enabled', () => {
+    const props: { readonly interactionPolicy?: 'enabled' | 'passive' } = {
+      interactionPolicy: 'enabled',
+    };
+    expect(props.interactionPolicy).toBe('enabled');
+  });
+
+  it('allows explicit passive', () => {
+    const props: { readonly interactionPolicy?: 'enabled' | 'passive' } = {
+      interactionPolicy: 'passive',
+    };
+    expect(props.interactionPolicy).toBe('passive');
+  });
+});
+
+describe('ButtonBaseProps includes interactionPolicy', () => {
+  it('has interactionPolicy in ButtonBaseProps', () => {
+    expect(indexSource).toContain(
+      "export type { ButtonBaseProps } from './primitives/button-base';",
+    );
+  });
+});
+
+describe('Policy does not leak to native hosts', () => {
+  it('InteractionPolicy is not a native View prop', () => {
+    const viewProps: Record<string, unknown> = {
+      accessible: true,
+      accessibilityLabel: 'test',
+    };
+    expect(viewProps.interactionPolicy).toBeUndefined();
+  });
+
+  it('InteractionPolicy is not a native TextInput prop', () => {
+    const textInputProps: Record<string, unknown> = {
+      editable: true,
+      onChangeText: (_text: string) => {
+        void _text;
+      },
+    };
+    expect(textInputProps.interactionPolicy).toBeUndefined();
+  });
+});

package/src/interactionPolicy.ts

@@ -0,0 +1,5 @@
+export type InteractionPolicy = 'enabled' | 'passive';
+
+export interface InteractionPolicyProps {
+  interactionPolicy?: InteractionPolicy;
+}

package/src/primitives/button-base/ButtonBase.tsx

@@ -28,6 +28,7 @@ function getInteractionState(
 export function ButtonBase({
   children,
   disabled = false,
+  interactionPolicy = 'enabled',
   onPress,
   onLongPress,
   accessibilityLabel,
@@ -43,6 +44,7 @@ export function ButtonBase({
   const [focused, setFocused] = React.useState(false);
   const isWeb = Platform.OS === 'web';
   const resolvedBoxStyles = resolveBoxStyles(theme, breakpoint, props);
+  const passive = interactionPolicy === 'passive';
 
   return (
     <Pressable
@@ -58,8 +60,8 @@ export function ButtonBase({
       }}
       onHoverIn={isWeb ? () => setHovered(true) : undefined}
       onHoverOut={isWeb ? () => setHovered(false) : undefined}
-      onLongPress={onLongPress}
-      onPress={onPress}
+      onLongPress={passive ? undefined : onLongPress}
+      onPress={passive ? undefined : onPress}
       style={(pressableState) => {
         const state = getInteractionState(pressableState, hovered, focused, disabled);
 

package/src/primitives/button-base/types.ts

@@ -1,10 +1,12 @@
 import type React from 'react';
 import type { AccessibilityRole, AccessibilityState, GestureResponderEvent } from 'react-native';
 
+import type { InteractionPolicyProps } from '../../interactionPolicy';
 import type { InteractionState } from '../../internal/resolvers/resolveInteractiveState';
 import type { BoxProps } from '../../layout';
 
-export interface ButtonBaseProps extends Omit<BoxProps, 'children' | 'pointerEvents'> {
+export interface ButtonBaseProps
+  extends Omit<BoxProps, 'children' | 'pointerEvents'>, InteractionPolicyProps {
   children?: React.ReactNode | ((state: InteractionState) => React.ReactNode);
   disabled?: boolean;
   onPress?: ((event: GestureResponderEvent) => void) | undefined;