@vvedantb/native-ui 0.12.0 → 0.12.1

package/README.md

@@ -21,6 +21,7 @@ Peers the app must already have (Expo SDK 57 / RN 0.76+):
 
 Optional, only if you import those components:
 
+- `@rn-primitives/portal` — `Select`. Mount one `<PortalHost />` from this package at the app root (for example in the root layout), outside any `Modal`. The package does not re-export it, so install it with `@rn-primitives/select`.
 - `@gorhom/bottom-sheet` — `BottomSheetContainer`
 - `@react-native-community/datetimepicker` and `dayjs` — `DateTimeField`
 - `@clerk/clerk-expo`, `convex`, `expo-auth-session`, `expo-web-browser` and `expo-router` — `@vvedantb/native-ui/auth` (0.7.0). `expo-router` also for `@vvedantb/native-ui/expo-web-root`.
@@ -518,8 +519,8 @@ import {
 | `AgentTrace`, `AgentTraceLine`, `AgentTraceIcon`, `AgentTraceTitle`, `AgentTraceDescription`, `AgentTraceCollapsible*` | One step per line, with an optional fold behind a rail. `AgentTraceTitle shimmer` pulses a running step. Spread `useStreamingDisclosure(isStreaming)` on `AgentTraceCollapsible` to open it while a step streams. |
 | `ActivityStep` | One tool step as a trace line: icon, label, a spinner while `running`, a check when `complete`, a warning on `error`, and a description such as `` `Worked for ${formatElapsed(12)}` ``. |
 | `ChainOfThought` and its parts | Simplified: header, steps with a rail, search-result chips. |
-| `PromptInput`, `PromptInputButton`, `PromptInputSubmit` | The web field surface with a `header` slot (attachments), a field, a `toolbar` slot and the send button. The field grows from one line to 160 high (about 6 lines), then scrolls. Send is primary with text and disabled without. While `status` is `submitted` or `streaming` it is a "Stop" square that calls `onStop`. It sits in a `KeyboardAvoidingView` (padding, on iOS and Android) and pads the safe-area insets: put it last in a full-height column. Under a navigation header, pass the header height as `keyboardVerticalOffset`; above a tab bar, pass `safeBottom={false}`. |
-| `PromptInput layout="inline"` | One row, as the web `Composer layout="inline"` (Eva's chat pill): `leading` (such as a + button), the field (one line to start, then it grows), `toolbar`, then send, in a 20-radius field with `p-1.5`. 44 high on one line. |
+| `PromptInput`, `PromptInputButton`, `PromptInputSubmit` | The web field surface with a `header` slot (attachments), a field, a `toolbar` slot and the send button. The field grows from one line to 160 high (about 6 lines), then scrolls (auto-grow in both layouts from 0.12.1; send resets the height). Send is primary with text and disabled without. While `status` is `submitted` or `streaming` it is a "Stop" square that calls `onStop`. It sits in a `KeyboardAvoidingView` (padding, on iOS and Android) and pads the safe-area insets: put it last in a full-height column. Under a navigation header, pass the header height as `keyboardVerticalOffset`; above a tab bar, pass `safeBottom={false}`. |
+| `PromptInput layout="inline"` | One row, as the web `Composer layout="inline"` (Eva's chat pill): `leading` (such as a + button), the field (one line to start, then it grows from 0.12.1), `toolbar`, then send, in a 20-radius field with `p-1.5`. 44 high on one line. |
 | `Suggestions`, `Suggestion` | A horizontal row of round chips (or `orientation="vertical"`). `onPress` gets the suggestion text. |
 | `Sources`, `SourcesTrigger`, `SourcesContent`, `Source` | A fold of link rows. A row opens its address with `Linking.openURL`, or hands it to `onPress`. |
 | `FileChip`, `Attachments`, `Attachment` | A monospace file chip (a button with `onOpenFile`), and attachment chips with a media icon or image thumbnail and a labelled remove button. No hover cards and no grid previews. |
@@ -543,7 +544,7 @@ Every control has a role, an accessible name and a 44 pt target. Folds report `e
 
 ## DropdownMenu (Unreleased)
 
-A small menu anchored to its trigger, the native counterpart of the web `DropdownMenu`. On `/primitives` and the root.
+A small menu anchored to its trigger, the native counterpart of the web `DropdownMenu`. On `/primitives` and the root. From 0.12.1 the backdrop and menu sit in a full-size `View` inside the `Modal`, so the menu stays above tab bars and glass layers.
 
 ```tsx
 <DropdownMenu>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vvedantb/native-ui",
-  "version": "0.12.0",
+  "version": "0.12.1",
   "license": "MIT",
   "description": "Shared React Native / Expo UI primitives. Floating surfaces, forms, overlays, toasts, settings chrome, tab bar, AI chat parts, the family app marks, a NativeWind preset, the Expo web root and Clerk + Convex auth screens.",
   "type": "module",

package/src/DropdownMenu.tsx

@@ -217,36 +217,41 @@ export function DropdownMenuContent({
       statusBarTranslucent
       onRequestClose={close}
     >
-      <Pressable
-        testID="DropdownMenu-backdrop"
-        accessibilityRole="button"
-        accessibilityLabel="Close menu"
-        onPress={close}
-        style={StyleSheet.absoluteFill}
-      />
-      <View
-        accessibilityRole="menu"
-        accessibilityViewIsModal
-        onAccessibilityEscape={close}
-        style={{
-          position: "absolute",
-          ...position,
-          minWidth: DROPDOWN_MENU.minWidth,
-          maxWidth: window.width - insets.left - insets.right - 2 * DROPDOWN_MENU.edge,
-        }}
-      >
-        <FloatingSurface blur={false} radius={DROPDOWN_MENU.radius} style={{ maxHeight: position.maxHeight }}>
-          <ScrollView
-            bounces={false}
-            showsVerticalScrollIndicator={false}
-            onContentSizeChange={(_width, height) => setContentHeight(height)}
-            contentContainerStyle={{ padding: DROPDOWN_MENU.padding }}
-          >
-            <View className={cn(className)} style={style} {...props}>
-              {children}
-            </View>
-          </ScrollView>
-        </FloatingSurface>
+      {/* A full-size host, as `OverlayModal` has: without it the backdrop and the
+          menu are bare Modal children with no box to size or hit-test against,
+          and the menu can stack under tab bars and glass layers. */}
+      <View style={{ flex: 1 }} pointerEvents="box-none">
+        <Pressable
+          testID="DropdownMenu-backdrop"
+          accessibilityRole="button"
+          accessibilityLabel="Close menu"
+          onPress={close}
+          style={StyleSheet.absoluteFill}
+        />
+        <View
+          accessibilityRole="menu"
+          accessibilityViewIsModal
+          onAccessibilityEscape={close}
+          style={{
+            position: "absolute",
+            ...position,
+            minWidth: DROPDOWN_MENU.minWidth,
+            maxWidth: window.width - insets.left - insets.right - 2 * DROPDOWN_MENU.edge,
+          }}
+        >
+          <FloatingSurface blur={false} radius={DROPDOWN_MENU.radius} style={{ maxHeight: position.maxHeight }}>
+            <ScrollView
+              bounces={false}
+              showsVerticalScrollIndicator={false}
+              onContentSizeChange={(_width, height) => setContentHeight(height)}
+              contentContainerStyle={{ padding: DROPDOWN_MENU.padding }}
+            >
+              <View className={cn(className)} style={style} {...props}>
+                {children}
+              </View>
+            </ScrollView>
+          </FloatingSurface>
+        </View>
       </View>
     </Modal>
   );

package/src/FloatingSurface.tsx

@@ -2,6 +2,7 @@ import { Platform, StyleSheet, View, type ViewProps } from "react-native";
 import { useColorScheme } from "nativewind";
 import { glassMode, loadBlur } from "./blur";
 import { cn } from "./cn";
+import { hasDefiniteHeight } from "./definiteSize";
 import {
   floatingFill,
   floatingHairline,
@@ -65,7 +66,7 @@ export function FloatingSurface({
             backgroundColor: mode === "blur" ? "transparent" : fill,
           },
           Platform.OS === "ios" ? styles.continuous : null,
-          style != null ? styles.fill : null,
+          hasDefiniteHeight(style) ? styles.fill : null,
         ]}
       >
         {mode === "blur" && BlurView ? (

package/src/ai/prompt-input.tsx

@@ -1,4 +1,4 @@
-import type { ReactNode } from "react";
+import { useState, type ReactNode } from "react";
 import { KeyboardAvoidingView, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { IconArrowUp, IconPlayerStopFilled } from "@tabler/icons-react-native";
@@ -151,11 +151,18 @@ export function PromptInput({
   const message = text.trim();
   const canSubmit = message.length > 0 && !disabled && !isGenerating(status);
   const bottom = safeBottom ? insets.bottom : 0;
+  // The field grows with its content up to `maxHeight`, then scrolls. A fixed
+  // `numberOfLines` would lock the line count on Android, so neither layout sets it.
+  const [contentHeight, setContentHeight] = useState(0);
+  const maxHeight = largerText ? MAX_FIELD_HEIGHT.larger : MAX_FIELD_HEIGHT.regular;
+  const growStyle = contentHeight > 0 ? { height: Math.min(contentHeight, maxHeight) } : null;
+  const scrollEnabled = contentHeight > maxHeight;
 
   const submit = () => {
     if (!canSubmit) return;
     onSubmit(message);
     setText("");
+    setContentHeight(0);
   };
 
   return (
@@ -184,8 +191,8 @@ export function PromptInput({
                 accessibilityLabel={accessibilityLabel}
                 editable={!disabled}
                 textAlignVertical="center"
-                // One line to start (a multiline field is two rows on react-native-web); it grows from there.
-                numberOfLines={1}
+                scrollEnabled={scrollEnabled}
+                onContentSizeChange={(e) => setContentHeight(e.nativeEvent.contentSize.height)}
                 className={cn(
                   "min-h-8 flex-1 border-0 px-2 py-1 text-base font-instrument-sans",
                   largerText && "min-h-11 py-2 text-xl font-instrument-sans-medium",
@@ -195,7 +202,8 @@ export function PromptInput({
                   largerText ? typeStyle("medium") : null,
                   {
                     backgroundColor: "transparent",
-                    maxHeight: largerText ? MAX_FIELD_HEIGHT.larger : MAX_FIELD_HEIGHT.regular,
+                    maxHeight,
+                    ...growStyle,
                   },
                 ]}
               />
@@ -217,6 +225,8 @@ export function PromptInput({
               accessibilityLabel={accessibilityLabel}
               editable={!disabled}
               textAlignVertical="top"
+              scrollEnabled={scrollEnabled}
+              onContentSizeChange={(e) => setContentHeight(e.nativeEvent.contentSize.height)}
               className={cn(
                 "min-h-11 border-0 px-3.5 py-2.5 text-base font-instrument-sans",
                 largerText && "min-h-14 px-4 py-3 text-xl font-instrument-sans-medium",
@@ -226,7 +236,8 @@ export function PromptInput({
                 largerText ? typeStyle("medium") : null,
                 {
                   backgroundColor: "transparent",
-                  maxHeight: largerText ? MAX_FIELD_HEIGHT.larger : MAX_FIELD_HEIGHT.regular,
+                  maxHeight,
+                  ...growStyle,
                 },
               ]}
             />

package/src/definiteSize.ts

@@ -0,0 +1,12 @@
+import { StyleSheet, type StyleProp, type ViewStyle } from "react-native";
+
+/**
+ * True when `style` gives a view a definite height or a flex grow. A style with
+ * only `maxHeight`, `maxWidth` or `minHeight` does not: a `flex: 1` child of
+ * such a parent collapses to height 0 on Android.
+ */
+export function hasDefiniteHeight(style: StyleProp<ViewStyle>): boolean {
+  const flat = StyleSheet.flatten(style);
+  if (flat == null) return false;
+  return flat.height != null || flat.flex != null || flat.flexGrow != null;
+}