@ankhorage/zora 2.8.7 → 2.9.1

package/src/patterns/tree-view/TreeView.tsx

@@ -16,6 +16,7 @@ function TreeViewInner<TId extends string = string>({
   onExpandedChange,
   renderItem,
   testID,
+  interactionPolicy,
 }: TreeViewProps<TId>) {
   const [internalExpandedIds, setInternalExpandedIds] = React.useState<readonly TId[]>(
     defaultExpandedIds ?? [],
@@ -25,6 +26,7 @@ function TreeViewInner<TId extends string = string>({
   const expandedIds = isControlled ? controlledExpandedIds : internalExpandedIds;
 
   const handleToggleExpand = (id: TId) => {
+    if (interactionPolicy === 'passive') return;
     const isExpanded = expandedIds.includes(id);
     const newIds = isExpanded ? expandedIds.filter((eid) => eid !== id) : [...expandedIds, id];
 
@@ -46,6 +48,7 @@ function TreeViewInner<TId extends string = string>({
           onToggleExpand={handleToggleExpand}
           renderItem={renderItem}
           selectedId={selectedId}
+          interactionPolicy={interactionPolicy}
         />
       ))}
     </Stack>

package/src/patterns/zora-drawer-content/ZoraDrawerContent.tsx

@@ -11,6 +11,7 @@ import type { ZoraDrawerContentProps } from './types';
 function ZoraDrawerContentInner({
   themeId: _themeId,
   mode: _mode,
+  interactionPolicy,
   state,
   navigation,
   descriptors,
@@ -44,6 +45,7 @@ function ZoraDrawerContentInner({
       compact={compact}
       footer={footer}
       header={header}
+      interactionPolicy={interactionPolicy}
       items={items}
       testID={testID}
     />

package/src/patterns/zora-tab-bar/ZoraTabBar.tsx

@@ -33,6 +33,7 @@ function resolveAccessibilityLabel(
 function ZoraTabBarInner({
   themeId: _themeId,
   mode: _mode,
+  interactionPolicy,
   state,
   navigation,
   descriptors,
@@ -88,7 +89,11 @@ function ZoraTabBarInner({
             accessibilityState={{ selected: active, disabled }}
             disabled={disabled}
             key={item.route.key}
-            onPress={createTabBarItemPressHandler({ item, navigation })}
+            onPress={
+              interactionPolicy === 'passive'
+                ? undefined
+                : createTabBarItemPressHandler({ item, navigation })
+            }
             style={{
               alignItems: 'center',
               backgroundColor,
@@ -135,7 +140,11 @@ function ZoraTabBarInner({
   }
 
   return (
-    <Surface variant="raised" testID={testID ? `${testID}-chrome` : undefined}>
+    <Surface
+      interactionPolicy={interactionPolicy}
+      testID={testID ? `${testID}-chrome` : undefined}
+      variant="raised"
+    >
       {content}
     </Surface>
   );

package/src/registry.test.ts

@@ -1,104 +1,51 @@
-import { describe, expect, mock, test } from 'bun:test';
+import { describe, expect, test } from 'bun:test';
 
 import type { ZoraComponentRegistry } from './index';
 
 const NON_RUNTIME_COMPONENT_EXPORTS = new Set(['SelectionProvider', 'ToastProvider']);
-
-function createMockComponent() {
-  return null;
+const REGISTRY_SNAPSHOT_PREFIX = 'ZORA_REGISTRY_SNAPSHOT:';
+
+let registryEntriesPromise: Promise<readonly string[]> | undefined;
+
+async function listRuntimeRegistryEntries(): Promise<readonly string[]> {
+  registryEntriesPromise ??= (async () => {
+    const subprocess = Bun.spawn({
+      cmd: [process.execPath, 'test', 'test-fixtures/registrySnapshot.test.ts'],
+      stdout: 'pipe',
+      stderr: 'pipe',
+    });
+    const [stdout, stderr, exitCode] = await Promise.all([
+      new Response(subprocess.stdout).text(),
+      new Response(subprocess.stderr).text(),
+      subprocess.exited,
+    ]);
+
+    if (exitCode !== 0) {
+      throw new Error(`Failed to inspect ZORA_COMPONENT_REGISTRY:\n${stdout}\n${stderr}`);
+    }
+
+    const output = `${stdout}\n${stderr}`;
+    const escapedPrefix = REGISTRY_SNAPSHOT_PREFIX.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    const snapshotJson = new RegExp(`${escapedPrefix}(\\[[^\\r\\n]*\\])`).exec(output)?.[1];
+
+    if (!snapshotJson) {
+      throw new Error('Registry snapshot subprocess did not emit a registry snapshot.');
+    }
+
+    const parsed: unknown = JSON.parse(snapshotJson);
+    if (
+      !Array.isArray(parsed) ||
+      !parsed.every((entry): entry is string => typeof entry === 'string')
+    ) {
+      throw new Error('Registry snapshot must be a JSON array of component names.');
+    }
+
+    return parsed;
+  })();
+
+  return registryEntriesPromise;
 }
 
-const surfaceMockComponentNames = [
-  'ActionSheet',
-  'ActionSheetItem',
-  'AppBar',
-  'Badge',
-  'Box',
-  'Button',
-  'ButtonBase',
-  'Card',
-  'Center',
-  'Checkbox',
-  'Container',
-  'Divider',
-  'Drawer',
-  'DrawerNavigation',
-  'Field',
-  'Grid',
-  'Icon',
-  'IconButton',
-  'Image',
-  'Inline',
-  'Menu',
-  'Modal',
-  'NavigationItem',
-  'NavigationList',
-  'Radio',
-  'ScrollArea',
-  'Show',
-  'Spacer',
-  'Stack',
-  'Surface',
-  'Switch',
-  'Text',
-  'Textarea',
-  'ThemeProvider',
-  'Toast',
-  'ToastProvider',
-] as const;
-
-const surfaceComponentMocks = Object.fromEntries(
-  surfaceMockComponentNames.map((name) => [name, createMockComponent]),
-);
-
-await mock.module('react-native', () => ({
-  Image: createMockComponent,
-  Platform: {
-    OS: 'web',
-    select: <T>(options: Partial<Record<string, T>>): T | undefined =>
-      options.web ?? options.default,
-  },
-  Pressable: createMockComponent,
-  ScrollView: createMockComponent,
-  StyleSheet: {
-    create: <T>(styles: T): T => styles,
-    flatten: <T>(style: T): T => style,
-  },
-  Text: createMockComponent,
-  View: createMockComponent,
-}));
-
-await mock.module('@ankhorage/surface', () => ({
-  ...surfaceComponentMocks,
-  ThemeContext: {
-    Provider: createMockComponent,
-  },
-  createTheme: () => ({}),
-  resolveResponsive: <T>(value: T): T => value,
-  useFontContext: () => ({ activeFontId: undefined }),
-  useResponsiveRuntime: () => ({ breakpoint: 'base' }),
-  useTheme: () => ({
-    mode: 'light',
-    setMode: () => undefined,
-    setThemeConfig: () => undefined,
-    theme: {},
-  }),
-  useToast: () => ({
-    dismiss: () => undefined,
-    show: () => undefined,
-  }),
-}));
-
-await mock.module('@react-native-picker/picker', () => ({
-  Picker: createMockComponent,
-}));
-
-await mock.module('expo-linear-gradient', () => ({
-  LinearGradient: createMockComponent,
-}));
-
-const { ZORA_COMPONENT_REGISTRY } = await import('./registry');
-
 async function listPublicConcreteComponentExports(): Promise<readonly string[]> {
   const source = await Bun.file('src/index.ts').text();
   return Array.from(
@@ -116,10 +63,12 @@ async function listPublicConcreteComponentExports(): Promise<readonly string[]>
 describe('ZORA_COMPONENT_REGISTRY', () => {
   test('is exported from the public root API', async () => {
     const source = await Bun.file('src/index.ts').text();
-    const registry: ZoraComponentRegistry = ZORA_COMPONENT_REGISTRY;
+    const registry: ZoraComponentRegistry = {};
+    const registryEntries = await listRuntimeRegistryEntries();
 
-    expect(registry.Screen).toBeDefined();
-    expect(registry.Box).toBeDefined();
+    expect(registry).toEqual({});
+    expect(registryEntries).toContain('Screen');
+    expect(registryEntries).toContain('Box');
     expect(source).toContain("export type { ZoraComponentRegistry } from './registry';");
     expect(source).toContain("export { ZORA_COMPONENT_REGISTRY } from './registry';");
   });
@@ -127,11 +76,13 @@ describe('ZORA_COMPONENT_REGISTRY', () => {
   test('covers every public concrete ZORA component export supported for runtime rendering', async () => {
     const publicComponentExports = await listPublicConcreteComponentExports();
 
-    expect(Object.keys(ZORA_COMPONENT_REGISTRY).sort()).toEqual(publicComponentExports);
+    expect(await listRuntimeRegistryEntries()).toEqual(publicComponentExports);
   });
 
-  test('does not register provider-only exports', () => {
-    expect(ZORA_COMPONENT_REGISTRY.ToastProvider).toBeUndefined();
-    expect(ZORA_COMPONENT_REGISTRY.SelectionProvider).toBeUndefined();
+  test('does not register provider-only exports', async () => {
+    const registryEntries = await listRuntimeRegistryEntries();
+
+    expect(registryEntries).not.toContain('ToastProvider');
+    expect(registryEntries).not.toContain('SelectionProvider');
   });
 });

package/src/registry.ts

@@ -1,3 +1,4 @@
+import type { InteractionPolicyProps } from '@ankhorage/surface';
 import type React from 'react';
 
 import { ActionSheet, ActionSheetItem } from './components/action-sheet';
@@ -99,7 +100,30 @@ import { ZoraTabBar } from './patterns/zora-tab-bar';
 
 export type ZoraComponentRegistry = Readonly<Record<string, React.ElementType>>;
 
-export const ZORA_COMPONENT_REGISTRY: ZoraComponentRegistry = {
+type ComponentPropsFor<K extends keyof typeof _ZORA_COMPONENT_REGISTRY> = React.ComponentProps<
+  (typeof _ZORA_COMPONENT_REGISTRY)[K]
+>;
+
+type AcceptsSurfaceInteractionPolicyProps<P> = 'interactionPolicy' extends keyof P
+  ? InteractionPolicyProps extends Pick<P, 'interactionPolicy'>
+    ? Pick<P, 'interactionPolicy'> extends InteractionPolicyProps
+      ? true
+      : false
+    : false
+  : false;
+
+type RegistryInteractionPolicyContract = {
+  [K in keyof typeof _ZORA_COMPONENT_REGISTRY]: AcceptsSurfaceInteractionPolicyProps<
+    ComponentPropsFor<K>
+  >;
+};
+
+type _AssertTrue<T extends true> = T;
+type _RegistryInteractionPolicyCheck = _AssertTrue<
+  RegistryInteractionPolicyContract[keyof typeof _ZORA_COMPONENT_REGISTRY]
+>;
+
+const _ZORA_COMPONENT_REGISTRY = {
   ActionSheet,
   ActionSheetItem,
   AppBar,
@@ -209,4 +233,6 @@ export const ZORA_COMPONENT_REGISTRY: ZoraComponentRegistry = {
   TreeView,
   ZoraDrawerContent,
   ZoraTabBar,
-};
+} as const satisfies ZoraComponentRegistry;
+
+export const ZORA_COMPONENT_REGISTRY: ZoraComponentRegistry = _ZORA_COMPONENT_REGISTRY;

package/src/theme/ZoraBaseProps.ts

@@ -1,3 +1,5 @@
+import type { InteractionPolicy } from '@ankhorage/surface';
+
 import type { ZoraThemeId, ZoraThemeMode } from './types';
 
 export interface ZoraBaseProps {
@@ -17,4 +19,10 @@ export interface ZoraBaseProps {
   mode?: ZoraThemeMode;
 
   testID?: string;
+
+  /**
+   * Controls whether user interaction is enabled or suppressed.
+   * When omitted, the component behaves as enabled.
+   */
+  interactionPolicy?: InteractionPolicy;
 }