@ankhorage/surface 2.0.3 → 2.1.1

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;