@ankhorage/surface 3.0.0 → 3.0.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @ankhorage/surface
 
+## 3.0.2
+
+### Patch Changes
+
+- 6151096: Compile React Native Web box pointer-event modes through static styles so empty overlay roots no longer intercept application controls.
+
+## 3.0.1
+
+### Patch Changes
+
+- c07471b: Support the React Native 0.86 patch line as a peer while validating Surface against the canonical React Native 0.86.3 application baseline.
+
 ## 3.0.0
 
 ### Major Changes

package/dist/internal/resolvePointerEvents.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"resolvePointerEvents.d.ts","sourceRoot":"","sources":["../../src/internal/resolvePointerEvents.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAExF,UAAU,qBAAqB;IAC7B,KAAK,EAAE,IAAI,CAAC,SAAS,EAAE,eAAe,CAAC,CAAC;IACxC,KAAK,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC7B;AAED,wBAAgB,oBAAoB,CAClC,aAAa,EAAE,WAAW,CAAC,SAAS,CAAC,eAAe,CAAC,CAAC,GACrD,qBAAqB,CAEvB;AAED,wBAAgB,+BAA+B,CAC7C,aAAa,EAAE,WAAW,CAAC,SAAS,CAAC,eAAe,CAAC,CAAC,EACtD,QAAQ,EAAE,OAAO,QAAQ,CAAC,EAAE,GAC3B,qBAAqB,CAYvB"}
+{"version":3,"file":"resolvePointerEvents.d.ts","sourceRoot":"","sources":["../../src/internal/resolvePointerEvents.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,KAAK,SAAS,EAAc,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAEpG,UAAU,qBAAqB;IAC7B,KAAK,EAAE,IAAI,CAAC,SAAS,EAAE,eAAe,CAAC,CAAC;IACxC,KAAK,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC7B;AASD,wBAAgB,oBAAoB,CAClC,aAAa,EAAE,WAAW,CAAC,SAAS,CAAC,eAAe,CAAC,CAAC,GACrD,qBAAqB,CAEvB;AAED,wBAAgB,+BAA+B,CAC7C,aAAa,EAAE,WAAW,CAAC,SAAS,CAAC,eAAe,CAAC,CAAC,EACtD,QAAQ,EAAE,OAAO,QAAQ,CAAC,EAAE,GAC3B,qBAAqB,CAYvB"}

package/dist/internal/resolvePointerEvents.js

@@ -1,4 +1,10 @@
-import { Platform } from 'react-native';
+import { Platform, StyleSheet } from 'react-native';
+const webPointerEventStyles = StyleSheet.create({
+    auto: { pointerEvents: 'auto' },
+    'box-none': { pointerEvents: 'box-none' },
+    'box-only': { pointerEvents: 'box-only' },
+    none: { pointerEvents: 'none' },
+});
 export function resolvePointerEvents(pointerEvents) {
     return resolvePointerEventsForPlatform(pointerEvents, Platform.OS);
 }
@@ -6,7 +12,7 @@ export function resolvePointerEventsForPlatform(pointerEvents, platform) {
     if (platform === 'web') {
         return {
             props: {},
-            style: { pointerEvents },
+            style: getWebPointerEventStyle(pointerEvents),
         };
     }
     return {
@@ -14,4 +20,16 @@ export function resolvePointerEventsForPlatform(pointerEvents, platform) {
         style: null,
     };
 }
+function getWebPointerEventStyle(pointerEvents) {
+    switch (pointerEvents) {
+        case 'auto':
+            return webPointerEventStyles.auto;
+        case 'box-none':
+            return webPointerEventStyles['box-none'];
+        case 'box-only':
+            return webPointerEventStyles['box-only'];
+        case 'none':
+            return webPointerEventStyles.none;
+    }
+}
 //# sourceMappingURL=resolvePointerEvents.js.map

package/dist/internal/resolvePointerEvents.js.map

@@ -1 +1 @@
-{"version":3,"file":"resolvePointerEvents.js","sourceRoot":"","sources":["../../src/internal/resolvePointerEvents.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAkD,MAAM,cAAc,CAAC;AAOxF,MAAM,UAAU,oBAAoB,CAClC,aAAsD;IAEtD,OAAO,+BAA+B,CAAC,aAAa,EAAE,QAAQ,CAAC,EAAE,CAAC,CAAC;AACrE,CAAC;AAED,MAAM,UAAU,+BAA+B,CAC7C,aAAsD,EACtD,QAA4B;IAE5B,IAAI,QAAQ,KAAK,KAAK,EAAE,CAAC;QACvB,OAAO;YACL,KAAK,EAAE,EAAE;YACT,KAAK,EAAE,EAAE,aAAa,EAAE;SACzB,CAAC;IACJ,CAAC;IAED,OAAO;QACL,KAAK,EAAE,EAAE,aAAa,EAAE;QACxB,KAAK,EAAE,IAAI;KACZ,CAAC;AACJ,CAAC","sourcesContent":["import { Platform, type StyleProp, type ViewProps, type ViewStyle } from 'react-native';\n\ninterface ResolvedPointerEvents {\n  props: Pick<ViewProps, 'pointerEvents'>;\n  style: StyleProp<ViewStyle>;\n}\n\nexport function resolvePointerEvents(\n  pointerEvents: NonNullable<ViewProps['pointerEvents']>,\n): ResolvedPointerEvents {\n  return resolvePointerEventsForPlatform(pointerEvents, Platform.OS);\n}\n\nexport function resolvePointerEventsForPlatform(\n  pointerEvents: NonNullable<ViewProps['pointerEvents']>,\n  platform: typeof Platform.OS,\n): ResolvedPointerEvents {\n  if (platform === 'web') {\n    return {\n      props: {},\n      style: { pointerEvents },\n    };\n  }\n\n  return {\n    props: { pointerEvents },\n    style: null,\n  };\n}\n"]}
+{"version":3,"file":"resolvePointerEvents.js","sourceRoot":"","sources":["../../src/internal/resolvePointerEvents.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAkB,UAAU,EAAkC,MAAM,cAAc,CAAC;AAOpG,MAAM,qBAAqB,GAAG,UAAU,CAAC,MAAM,CAAC;IAC9C,IAAI,EAAE,EAAE,aAAa,EAAE,MAAM,EAAE;IAC/B,UAAU,EAAE,EAAE,aAAa,EAAE,UAAU,EAAE;IACzC,UAAU,EAAE,EAAE,aAAa,EAAE,UAAU,EAAE;IACzC,IAAI,EAAE,EAAE,aAAa,EAAE,MAAM,EAAE;CAChC,CAAC,CAAC;AAEH,MAAM,UAAU,oBAAoB,CAClC,aAAsD;IAEtD,OAAO,+BAA+B,CAAC,aAAa,EAAE,QAAQ,CAAC,EAAE,CAAC,CAAC;AACrE,CAAC;AAED,MAAM,UAAU,+BAA+B,CAC7C,aAAsD,EACtD,QAA4B;IAE5B,IAAI,QAAQ,KAAK,KAAK,EAAE,CAAC;QACvB,OAAO;YACL,KAAK,EAAE,EAAE;YACT,KAAK,EAAE,uBAAuB,CAAC,aAAa,CAAC;SAC9C,CAAC;IACJ,CAAC;IAED,OAAO;QACL,KAAK,EAAE,EAAE,aAAa,EAAE;QACxB,KAAK,EAAE,IAAI;KACZ,CAAC;AACJ,CAAC;AAED,SAAS,uBAAuB,CAC9B,aAAsD;IAEtD,QAAQ,aAAa,EAAE,CAAC;QACtB,KAAK,MAAM;YACT,OAAO,qBAAqB,CAAC,IAAI,CAAC;QACpC,KAAK,UAAU;YACb,OAAO,qBAAqB,CAAC,UAAU,CAAC,CAAC;QAC3C,KAAK,UAAU;YACb,OAAO,qBAAqB,CAAC,UAAU,CAAC,CAAC;QAC3C,KAAK,MAAM;YACT,OAAO,qBAAqB,CAAC,IAAI,CAAC;IACtC,CAAC;AACH,CAAC","sourcesContent":["import { Platform, type StyleProp, StyleSheet, type ViewProps, type ViewStyle } from 'react-native';\n\ninterface ResolvedPointerEvents {\n  props: Pick<ViewProps, 'pointerEvents'>;\n  style: StyleProp<ViewStyle>;\n}\n\nconst webPointerEventStyles = StyleSheet.create({\n  auto: { pointerEvents: 'auto' },\n  'box-none': { pointerEvents: 'box-none' },\n  'box-only': { pointerEvents: 'box-only' },\n  none: { pointerEvents: 'none' },\n});\n\nexport function resolvePointerEvents(\n  pointerEvents: NonNullable<ViewProps['pointerEvents']>,\n): ResolvedPointerEvents {\n  return resolvePointerEventsForPlatform(pointerEvents, Platform.OS);\n}\n\nexport function resolvePointerEventsForPlatform(\n  pointerEvents: NonNullable<ViewProps['pointerEvents']>,\n  platform: typeof Platform.OS,\n): ResolvedPointerEvents {\n  if (platform === 'web') {\n    return {\n      props: {},\n      style: getWebPointerEventStyle(pointerEvents),\n    };\n  }\n\n  return {\n    props: { pointerEvents },\n    style: null,\n  };\n}\n\nfunction getWebPointerEventStyle(\n  pointerEvents: NonNullable<ViewProps['pointerEvents']>,\n): ViewStyle {\n  switch (pointerEvents) {\n    case 'auto':\n      return webPointerEventStyles.auto;\n    case 'box-none':\n      return webPointerEventStyles['box-none'];\n    case 'box-only':\n      return webPointerEventStyles['box-only'];\n    case 'none':\n      return webPointerEventStyles.none;\n  }\n}\n"]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ankhorage/surface",
   "type": "module",
-  "version": "3.0.0",
+  "version": "3.0.2",
   "description": "Stable UI foundation for React Native and React Native Web.",
   "homepage": "https://github.com/ankhorage/surface#readme",
   "bugs": {
@@ -32,7 +32,7 @@
     "@react-native-vector-icons/fontawesome6": "^13.1.3",
     "@react-native-vector-icons/ionicons": "^13.1.3",
     "react": "19.2.3",
-    "react-native": "0.86.2",
+    "react-native": "0.86.x",
     "react-native-safe-area-context": "~5.7.0",
     "react-native-web": "~0.21.0"
   },
@@ -65,7 +65,7 @@
     "changeset": "changeset",
     "changeset:status": "changeset status --since=origin/main",
     "docs": "paradox && ankhorage-prettier --write README.md paradox",
-    "knip": "ankhorage-knip",
+    "knip:check": "ankhorage-knip",
     "lint": "ankhorage-eslint . --max-warnings=0",
     "lint:fix": "ankhorage-eslint . --fix --max-warnings=0",
     "format": "ankhorage-prettier --write .",
@@ -76,8 +76,8 @@
     "version-packages": "changeset version"
   },
   "devDependencies": {
-    "@ankhorage/devtools": "^1.6.0",
-    "@ankhorage/paradox": "^0.1.21",
+    "@ankhorage/devtools": "^1.7.0",
+    "@ankhorage/paradox": "^0.1.24",
     "@react-native-vector-icons/fontawesome": "^13.1.3",
     "@react-native-vector-icons/fontawesome5": "^13.1.3",
     "@react-native-vector-icons/fontawesome6": "^13.1.3",
@@ -91,7 +91,7 @@
     "happy-dom": "^20.11.6",
     "react": "19.2.3",
     "react-dom": "19.2.3",
-    "react-native": "0.86.2",
+    "react-native": "0.86.3",
     "react-native-safe-area-context": "~5.7.0",
     "react-native-web": "~0.21.0",
     "typescript": "~6.0.3"

package/src/index.test.ts

@@ -6,8 +6,10 @@ const indexSource = readFileSync(new URL('./index.ts', import.meta.url), 'utf8')
 const packageJson = JSON.parse(
   readFileSync(new URL('../package.json', import.meta.url), 'utf8'),
 ) as {
+  devDependencies: Record<string, string>;
   exports: Record<string, unknown>;
   files: string[];
+  peerDependencies: Record<string, string>;
 };
 
 const expectedRootExports = [
@@ -68,4 +70,9 @@ describe('public package contract', () => {
       './package.json': './package.json',
     });
   });
+
+  it('supports RN 0.86 patches while validating the canonical RN 0.86.3 baseline', () => {
+    expect(packageJson.peerDependencies['react-native']).toBe('0.86.x');
+    expect(packageJson.devDependencies['react-native']).toBe('0.86.3');
+  });
 });

package/src/internal/resolvePointerEvents.ts

@@ -1,10 +1,17 @@
-import { Platform, type StyleProp, type ViewProps, type ViewStyle } from 'react-native';
+import { Platform, type StyleProp, StyleSheet, type ViewProps, type ViewStyle } from 'react-native';
 
 interface ResolvedPointerEvents {
   props: Pick<ViewProps, 'pointerEvents'>;
   style: StyleProp<ViewStyle>;
 }
 
+const webPointerEventStyles = StyleSheet.create({
+  auto: { pointerEvents: 'auto' },
+  'box-none': { pointerEvents: 'box-none' },
+  'box-only': { pointerEvents: 'box-only' },
+  none: { pointerEvents: 'none' },
+});
+
 export function resolvePointerEvents(
   pointerEvents: NonNullable<ViewProps['pointerEvents']>,
 ): ResolvedPointerEvents {
@@ -18,7 +25,7 @@ export function resolvePointerEventsForPlatform(
   if (platform === 'web') {
     return {
       props: {},
-      style: { pointerEvents },
+      style: getWebPointerEventStyle(pointerEvents),
     };
   }
 
@@ -27,3 +34,18 @@ export function resolvePointerEventsForPlatform(
     style: null,
   };
 }
+
+function getWebPointerEventStyle(
+  pointerEvents: NonNullable<ViewProps['pointerEvents']>,
+): ViewStyle {
+  switch (pointerEvents) {
+    case 'auto':
+      return webPointerEventStyles.auto;
+    case 'box-none':
+      return webPointerEventStyles['box-none'];
+    case 'box-only':
+      return webPointerEventStyles['box-only'];
+    case 'none':
+      return webPointerEventStyles.none;
+  }
+}

package/src/webAcceptance.test.tsx

@@ -12,6 +12,7 @@ const { Container } = await import('./layout/Container');
 const { Grid } = await import('./layout/Grid');
 const { ScrollArea } = await import('./layout/ScrollArea');
 const { Show } = await import('./layout/Show');
+const { OverlayProvider } = await import('./internal/overlay/OverlayProvider');
 const { ThemeProvider } = await import('./theme/ThemeContext');
 
 function ResponsiveAcceptanceTree() {
@@ -82,3 +83,14 @@ test('RN Web 0.21 statically renders and hydrates representative responsive prim
     Reflect.deleteProperty(globalThis, 'window');
   }
 });
+
+test('RN Web 0.21 compiles box-none overlay pointer events into a hit-test-safe class', () => {
+  const markup = renderToString(
+    <OverlayProvider>
+      <ReactNativeWeb.View testID="interactive-content" />
+    </OverlayProvider>,
+  );
+
+  expect(markup).toContain('data-testid="interactive-content"');
+  expect(markup).toContain('r-pointerEvents-');
+});