@ankhorage/surface 4.1.0 → 4.2.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @ankhorage/surface
 
+## 4.2.0
+
+### Minor Changes
+
+- aab8831: Add a stable KeyboardAvoidingView layout primitive backed directly by React Native.
+
 ## 4.1.0
 
 ### Minor Changes

package/README.md

@@ -3,7 +3,7 @@
 
 # @ankhorage/surface
 
-![license: MIT](././paradox/badges/license.svg) ![npm: v4.0.0](././paradox/badges/npm.svg) ![runtime: bun](././paradox/badges/runtime.svg) ![typescript: strict](././paradox/badges/typescript.svg) ![eslint: checked](././paradox/badges/eslint.svg) ![prettier: checked](././paradox/badges/prettier.svg) ![build: checked](././paradox/badges/build.svg) ![tests: checked](././paradox/badges/tests.svg) ![docs: paradox](././paradox/badges/docs.svg)
+![license: MIT](././paradox/badges/license.svg) ![npm: v4.1.0](././paradox/badges/npm.svg) ![runtime: bun](././paradox/badges/runtime.svg) ![typescript: strict](././paradox/badges/typescript.svg) ![eslint: checked](././paradox/badges/eslint.svg) ![prettier: checked](././paradox/badges/prettier.svg) ![build: checked](././paradox/badges/build.svg) ![tests: checked](././paradox/badges/tests.svg) ![docs: paradox](././paradox/badges/docs.svg)
 
 Cross-platform UI foundation for React Native and React Native Web. Provides theming, layout primitives, and core building blocks for modern apps.
 

package/dist/layout/KeyboardAvoidingView.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { type KeyboardAvoidingViewProps as ReactNativeKeyboardAvoidingViewProps } from 'react-native';
+/*** Preserve React Native keyboard avoidance behind the stable Surface layout boundary. */
+export declare function KeyboardAvoidingView(props: KeyboardAvoidingViewProps): React.JSX.Element;
+export type KeyboardAvoidingViewBehavior = NonNullable<ReactNativeKeyboardAvoidingViewProps['behavior']>;
+export type KeyboardAvoidingViewProps = ReactNativeKeyboardAvoidingViewProps;
+//# sourceMappingURL=KeyboardAvoidingView.d.ts.map

package/dist/layout/KeyboardAvoidingView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"KeyboardAvoidingView.d.ts","sourceRoot":"","sources":["../../src/layout/KeyboardAvoidingView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAEL,KAAK,yBAAyB,IAAI,oCAAoC,EACvE,MAAM,cAAc,CAAC;AAEtB,2FAA2F;AAC3F,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,yBAAyB,qBAEpE;AAED,MAAM,MAAM,4BAA4B,GAAG,WAAW,CACpD,oCAAoC,CAAC,UAAU,CAAC,CACjD,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG,oCAAoC,CAAC"}

package/dist/layout/KeyboardAvoidingView.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import { KeyboardAvoidingView as ReactNativeKeyboardAvoidingView, } from 'react-native';
+/*** Preserve React Native keyboard avoidance behind the stable Surface layout boundary. */
+export function KeyboardAvoidingView(props) {
+    return <ReactNativeKeyboardAvoidingView {...props}/>;
+}
+//# sourceMappingURL=KeyboardAvoidingView.js.map

package/dist/layout/KeyboardAvoidingView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"KeyboardAvoidingView.js","sourceRoot":"","sources":["../../src/layout/KeyboardAvoidingView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EACL,oBAAoB,IAAI,+BAA+B,GAExD,MAAM,cAAc,CAAC;AAEtB,2FAA2F;AAC3F,MAAM,UAAU,oBAAoB,CAAC,KAAgC;IACnE,OAAO,CAAC,+BAA+B,CAAC,IAAI,KAAK,CAAC,EAAG,CAAC;AACxD,CAAC","sourcesContent":["import React from 'react';\nimport {\n  KeyboardAvoidingView as ReactNativeKeyboardAvoidingView,\n  type KeyboardAvoidingViewProps as ReactNativeKeyboardAvoidingViewProps,\n} from 'react-native';\n\n/*** Preserve React Native keyboard avoidance behind the stable Surface layout boundary. */\nexport function KeyboardAvoidingView(props: KeyboardAvoidingViewProps) {\n  return <ReactNativeKeyboardAvoidingView {...props} />;\n}\n\nexport type KeyboardAvoidingViewBehavior = NonNullable<\n  ReactNativeKeyboardAvoidingViewProps['behavior']\n>;\n\nexport type KeyboardAvoidingViewProps = ReactNativeKeyboardAvoidingViewProps;\n"]}

package/dist/layout/index.d.ts

@@ -12,6 +12,8 @@ export type { GridProps } from './Grid';
 export { Grid } from './Grid';
 export type { InlineProps } from './Inline';
 export { Inline } from './Inline';
+export type { KeyboardAvoidingViewBehavior, KeyboardAvoidingViewProps, } from './KeyboardAvoidingView';
+export { KeyboardAvoidingView } from './KeyboardAvoidingView';
 export type { ScrollAreaProps } from './ScrollArea';
 export { ScrollArea } from './ScrollArea';
 export type { ShowProps } from './Show';

package/dist/layout/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/layout/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5B,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACxC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACxC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,WAAW,CAAC;AAC9D,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/layout/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5B,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACxC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EACV,4BAA4B,EAC5B,yBAAyB,GAC1B,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACxC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,WAAW,CAAC;AAC9D,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC"}

package/dist/layout/index.js

@@ -5,6 +5,7 @@ export { Container } from './Container';
 export { Divider } from './Divider';
 export { Grid } from './Grid';
 export { Inline } from './Inline';
+export { KeyboardAvoidingView } from './KeyboardAvoidingView';
 export { ScrollArea } from './ScrollArea';
 export { Show } from './Show';
 export { Spacer } from './Spacer';

package/dist/layout/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/layout/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAEpC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAE9B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAE9B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAEhC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAEpC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC","sourcesContent":["export type { AppBarProps } from './AppBar';\nexport { AppBar } from './AppBar';\nexport type { BoxProps } from './Box';\nexport { Box } from './Box';\nexport type { CenterProps } from './Center';\nexport { Center } from './Center';\nexport type { ContainerProps } from './Container';\nexport { Container } from './Container';\nexport type { DividerProps } from './Divider';\nexport { Divider } from './Divider';\nexport type { GridProps } from './Grid';\nexport { Grid } from './Grid';\nexport type { InlineProps } from './Inline';\nexport { Inline } from './Inline';\nexport type { ScrollAreaProps } from './ScrollArea';\nexport { ScrollArea } from './ScrollArea';\nexport type { ShowProps } from './Show';\nexport { Show } from './Show';\nexport type { SpacerProps } from './Spacer';\nexport { Spacer } from './Spacer';\nexport type { StackProps } from './Stack';\nexport { Stack } from './Stack';\nexport type { SurfaceProps, SurfaceVariant } from './Surface';\nexport { Surface } from './Surface';\nexport type { TemplateProps } from './Template';\nexport { Template } from './Template';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/layout/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAEpC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAE9B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAKlC,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAE9D,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAE9B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAEhC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAEpC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC","sourcesContent":["export type { AppBarProps } from './AppBar';\nexport { AppBar } from './AppBar';\nexport type { BoxProps } from './Box';\nexport { Box } from './Box';\nexport type { CenterProps } from './Center';\nexport { Center } from './Center';\nexport type { ContainerProps } from './Container';\nexport { Container } from './Container';\nexport type { DividerProps } from './Divider';\nexport { Divider } from './Divider';\nexport type { GridProps } from './Grid';\nexport { Grid } from './Grid';\nexport type { InlineProps } from './Inline';\nexport { Inline } from './Inline';\nexport type {\n  KeyboardAvoidingViewBehavior,\n  KeyboardAvoidingViewProps,\n} from './KeyboardAvoidingView';\nexport { KeyboardAvoidingView } from './KeyboardAvoidingView';\nexport type { ScrollAreaProps } from './ScrollArea';\nexport { ScrollArea } from './ScrollArea';\nexport type { ShowProps } from './Show';\nexport { Show } from './Show';\nexport type { SpacerProps } from './Spacer';\nexport { Spacer } from './Spacer';\nexport type { StackProps } from './Stack';\nexport { Stack } from './Stack';\nexport type { SurfaceProps, SurfaceVariant } from './Surface';\nexport { Surface } from './Surface';\nexport type { TemplateProps } from './Template';\nexport { Template } from './Template';\n"]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ankhorage/surface",
   "type": "module",
-  "version": "4.1.0",
+  "version": "4.2.0",
   "description": "Stable UI foundation for React Native and React Native Web.",
   "homepage": "https://github.com/ankhorage/surface#readme",
   "bugs": {

package/src/index.test.ts

@@ -6,6 +6,7 @@ import type { SelectionSemantics, SurfaceColorDiagnostics } from './index';
 import { createTheme } from './theme/createTheme';
 
 const indexSource = readFileSync(new URL('./index.ts', import.meta.url), 'utf8');
+const layoutIndexSource = readFileSync(new URL('./layout/index.ts', import.meta.url), 'utf8');
 const packageJson = JSON.parse(
   readFileSync(new URL('../package.json', import.meta.url), 'utf8'),
 ) as {
@@ -78,6 +79,15 @@ describe('public root barrel contract', () => {
     expect(selection.background).toBeDefined();
     expect(diagnostics.generated.swatches).toBe(theme.swatches);
   });
+
+  it('publishes KeyboardAvoidingView through the root layout facade', () => {
+    expect(indexSource).toContain("export * from './layout';");
+    expect(layoutIndexSource).toContain(
+      "export { KeyboardAvoidingView } from './KeyboardAvoidingView';",
+    );
+    expect(layoutIndexSource).toContain('KeyboardAvoidingViewProps');
+    expect(layoutIndexSource).toContain('KeyboardAvoidingViewBehavior');
+  });
 });
 
 describe('public package metadata contract', () => {

package/src/layout/KeyboardAvoidingView.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import {
+  KeyboardAvoidingView as ReactNativeKeyboardAvoidingView,
+  type KeyboardAvoidingViewProps as ReactNativeKeyboardAvoidingViewProps,
+} from 'react-native';
+
+/*** Preserve React Native keyboard avoidance behind the stable Surface layout boundary. */
+export function KeyboardAvoidingView(props: KeyboardAvoidingViewProps) {
+  return <ReactNativeKeyboardAvoidingView {...props} />;
+}
+
+export type KeyboardAvoidingViewBehavior = NonNullable<
+  ReactNativeKeyboardAvoidingViewProps['behavior']
+>;
+
+export type KeyboardAvoidingViewProps = ReactNativeKeyboardAvoidingViewProps;

package/src/layout/index.ts

@@ -12,6 +12,11 @@ export type { GridProps } from './Grid';
 export { Grid } from './Grid';
 export type { InlineProps } from './Inline';
 export { Inline } from './Inline';
+export type {
+  KeyboardAvoidingViewBehavior,
+  KeyboardAvoidingViewProps,
+} from './KeyboardAvoidingView';
+export { KeyboardAvoidingView } from './KeyboardAvoidingView';
 export type { ScrollAreaProps } from './ScrollArea';
 export { ScrollArea } from './ScrollArea';
 export type { ShowProps } from './Show';

package/src/webAcceptance.test.tsx

@@ -10,6 +10,7 @@ const scrollContentStyle = { padding: 4 };
 
 const { Container } = await import('./layout/Container');
 const { Grid } = await import('./layout/Grid');
+const { KeyboardAvoidingView } = await import('./layout/KeyboardAvoidingView');
 const { ScrollArea } = await import('./layout/ScrollArea');
 const { Show } = await import('./layout/Show');
 const { OverlayProvider } = await import('./internal/overlay/OverlayProvider');
@@ -94,3 +95,19 @@ test('RN Web 0.21 compiles box-none overlay pointer events into a hit-test-safe
   expect(markup).toContain('data-testid="interactive-content"');
   expect(markup).toContain('r-pointerEvents-');
 });
+
+test('RN Web 0.21 renders keyboard-safe content through the Surface layout boundary', () => {
+  const markup = renderToString(
+    <KeyboardAvoidingView
+      behavior="padding"
+      enabled
+      keyboardVerticalOffset={24}
+      testID="keyboard-safe"
+    >
+      <ReactNativeWeb.Text>Keyboard-safe content</ReactNativeWeb.Text>
+    </KeyboardAvoidingView>,
+  );
+
+  expect(markup).toContain('data-testid="keyboard-safe"');
+  expect(markup).toContain('Keyboard-safe content');
+});