@delacour/react-native-ui 0.5.0-alpha.20261023075443 → 0.5.0-alpha.20261024103119

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@delacour/react-native-ui",
-	"version": "0.5.0-alpha.20261023075443",
+	"version": "0.5.0-alpha.20261024103119",
 	"description": "React Native UI components — Uniwind, Reanimated, Gesture Handler",
 	"type": "module",
 	"license": "MIT",
@@ -182,8 +182,8 @@
 		"expo-blur": ">=15",
 		"@maplibre/maplibre-react-native": "^11.5.0",
 		"@central-icons-react-native/round-outlined-radius-1-stroke-1.5": "^1.1",
-		"@delacour/react-native-bottom-sheet": "0.3.0-alpha.20261023075443",
-		"@delacour/react-native-charts": "0.2.0-alpha.20261023075443",
+		"@delacour/react-native-bottom-sheet": "0.3.0-alpha.20261024103119",
+		"@delacour/react-native-charts": "0.2.0-alpha.20261024103119",
 		"@legendapp/list": ">=3.3",
 		"react-native-skia": ">=3.7.3",
 		"expo-linear-gradient": ">=15",

package/src/components/combobox/AGENTS.md

@@ -32,7 +32,7 @@ typed text can become a value.
 | `combobox.context.tsx` | `ComboboxProvider`, `useCombobox()`, `useComboboxContext()`, `useComboboxPart()` |
 | `combobox.types.ts` | `ComboboxOption`, `ComboboxOptionGroup`, `ComboboxEntry`, `ComboboxFilter`, `ComboboxListRow`, … |
 | `combobox.filter.ts` | Pure: normalise, match, filter, create row, highlight ranges, pending remove, query reset, announcement, remembered selection |
-| `combobox.variants.ts` | Pure: the added slots, the trigger class, chip size / colour / cap, trigger text, the keyboard-aware sheet cap |
+| `combobox.variants.ts` | Pure: the added slots, the trigger class, chip size / colour / cap, trigger text, the keyboard-aware sheet cap and the sheet's held height |
 | `*.test.ts` | |
 
 ## Design
@@ -104,21 +104,32 @@ typed text can become a value.
   sheet's chip row and multiple mode's rows sit in a view whose
   `onStartShouldSetResponder` returns true. A single pick closes the sheet, so
   its rows let the keyboard go.
-- **The sheet's cap takes the keyboard out.** The engine lifts the sheet by the
-  keyboard's height, and Select's cap assumes an empty screen, so with the
-  search field focused a long list rose under the status bar.
-  `resolveComboboxSheetMaxHeight` caps the list at the room between the
-  keyboard and the top inset (less Select's gap) while one is up. Passing the
-  engine a `topInset` instead was tried and rejected: it shrinks the frame, and
-  the scrim with it, leaving the status bar uncovered.
-- **The cap expects the keyboard before it arrives.** The search field focuses
-  as the sheet settles, so the sheet sized itself for an empty screen and the
-  keyboard's lift then carried its top under the Dynamic Island for a few
-  frames — `useKeyboardState` and even `useKeyboardHandler`'s `onStart` land a
-  frame too late to stop it. With `openOnFocus`, `resolveExpectedKeyboardHeight`
-  feeds the cap the keyboard it will get: the live height once one is up, else
-  the last one seen, else `COMBOBOX_KEYBOARD_ESTIMATE_FRACTION` (0.42) of the
-  window.
+- **The sheet opens at its full height and the keyboard never moves it.** It
+  used to size itself to its rows, so every keystroke resized it. Then it was
+  sized to the room above the keyboard and the engine lifted it by the
+  keyboard: it opened half-height, rode the keyboard up once the field
+  focused, and dropped back as the keyboard left on close — two moves per open
+  and one per close, all of it in the launch clip.
+  `resolveComboboxSheetHeight` is now Select's cap for an empty screen, the
+  sheet's one snap point, with `dynamicSizing` off and the engine's
+  `keyboardLiftLimit="highestSnapPoint"`: a sheet resting at its highest snap
+  point is not lifted, so the keyboard covers its bottom and the list's
+  viewport shrinks by it. Rows are top-aligned, so nothing visible moves but the
+  keyboard. Passing the engine a `topInset` was tried and rejected: it shrinks
+  the frame, and the scrim with it, leaving the status bar uncovered. A short
+  list sits at the top of a full-height sheet; a caller who wants it shorter
+  passes `snapPoints`, which replaces the cap, and the lift still stops at the
+  highest of them. `resolveComboboxSheetMaxHeight` and
+  `resolveExpectedKeyboardHeight` remain exported for callers sizing a sheet of
+  their own above a keyboard; the combobox no longer reads either.
+- **Scrolling the list keeps the keyboard up.** The engine puts the keyboard
+  away the moment any pan starts on the sheet (`enableBlurKeyboardOnGesture`),
+  and its lists dismiss interactively, so scrolling the results to look past
+  the first few dropped the keyboard and the next keystroke needed a tap on the
+  field first. The sheet turns the pan's blur off and the list passes
+  `keyboardDismissMode="none"`. A drag that carries the sheet down still puts
+  it away — the engine does that on any downward release — and every close
+  blurs the field.
 - **Closing blurs the search field first.** Done, the scrim, the close button
   and a single pick all `blur()` before the sheet leaves, so the keyboard goes
   down with it rather than lingering over the screen for a beat.

package/src/components/combobox/combobox.tsx

@@ -7,9 +7,7 @@ import {
 	useWindowDimensions,
 	View,
 } from "react-native";
-import { useKeyboardHandler } from "react-native-keyboard-controller";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { scheduleOnRN } from "react-native-worklets";
 import { useControllableState } from "../../hooks/use-controllable-state";
 import { IconCrossSmall, IconMagnifyingGlass } from "../../icons/central";
 import { BottomSheet, type BottomSheetProps } from "../bottom-sheet";
@@ -53,12 +51,7 @@ import type {
 	ComboboxOptionInput,
 	ComboboxPresentation,
 } from "./combobox.types";
-import {
-	comboboxVariants,
-	resolveComboboxSheetMaxHeight,
-	resolveComboboxTriggerText,
-	resolveExpectedKeyboardHeight,
-} from "./combobox.variants";
+import { comboboxVariants, resolveComboboxSheetHeight, resolveComboboxTriggerText } from "./combobox.variants";
 import { ComboboxChipRow } from "./combobox-chip-row";
 import { ComboboxCreateRow } from "./combobox-create-row";
 import { ComboboxEmpty } from "./combobox-empty";
@@ -109,7 +102,7 @@ type ComboboxBaseProps = {
 	formatResultsCount?: (count: number) => string;
 	/** Where the options open. Only `sheet` today. */
 	presentation?: ComboboxPresentation;
-	/** Forwarded to the sheet. Leave it off and the sheet sizes to its rows. */
+	/** Forwarded to the sheet. Leave it off and the sheet opens at its cap and holds that height while you type. */
 	snapPoints?: BottomSheetProps["snapPoints"];
 	/** Bold what the query matched in each row. @default true */
 	highlight?: boolean;
@@ -200,23 +193,6 @@ function ComboboxRoot(props: ComboboxProps): ReactElement {
 	const field = useFieldContext();
 	const { height: windowHeight } = useWindowDimensions();
 	const { top: topInset } = useSafeAreaInsets();
-	// The keyboard's target height, read as it starts to move, and the last one
-	// measured — see `resolveExpectedKeyboardHeight` for why both.
-	const [keyboardHeight, setKeyboardHeight] = useState(0);
-	const [lastKeyboardHeight, setLastKeyboardHeight] = useState(0);
-	const handleKeyboardStart = (height: number) => {
-		setKeyboardHeight(height);
-		if (height > 0) setLastKeyboardHeight(height);
-	};
-	useKeyboardHandler(
-		{
-			onStart: (event) => {
-				"worklet";
-				scheduleOnRN(handleKeyboardStart, event.height);
-			},
-		},
-		[]
-	);
 	const resolvedIsInvalid = isInvalid ?? field?.isInvalid ?? false;
 	const resolvedIsDisabled = isDisabled ?? field?.isDisabled ?? false;
 
@@ -280,6 +256,9 @@ function ComboboxRoot(props: ComboboxProps): ReactElement {
 	};
 	const close = () => handleOpenChange(false);
 
+	const sheetHeight = resolveComboboxSheetHeight({ topInset, windowHeight });
+	const fixedSnapPoints = useMemo(() => [sheetHeight], [sheetHeight]);
+
 	// The field is focused once the sheet has settled, never with it: a
 	// keyboard rising while the sheet is still animating up fights it for the
 	// same space.
@@ -485,7 +464,7 @@ function ComboboxRoot(props: ComboboxProps): ReactElement {
 	const searchLabel = field?.label ? `${field.label}, ${searchPlaceholder}` : searchPlaceholder;
 
 	// The title, chips and search field ride at the head of the list, so they
-	// count towards the height the sheet sizes itself to and scroll with it.
+	// scroll with it.
 	const header = (
 		<View className={slots.header()}>
 			<BottomSheet.Close />
@@ -545,21 +524,13 @@ function ComboboxRoot(props: ComboboxProps): ReactElement {
 		<ComboboxProvider value={context}>
 			{customTrigger ?? <ComboboxTrigger className={className} />}
 			<BottomSheet
-				dynamicSizing={snapPoints === undefined}
+				dynamicSizing={false}
+				enableBlurKeyboardOnGesture={false}
 				isOpen={isOpen}
-				maxDynamicContentSize={resolveComboboxSheetMaxHeight({
-					keyboardHeight: resolveExpectedKeyboardHeight({
-						expectsKeyboard: openOnFocus,
-						keyboardHeight,
-						lastKnown: lastKeyboardHeight,
-						windowHeight,
-					}),
-					topInset,
-					windowHeight,
-				})}
+				keyboardLiftLimit="highestSnapPoint"
 				onIndexChange={handleIndexChange}
 				onOpenChange={handleOpenChange}
-				snapPoints={snapPoints}
+				snapPoints={snapPoints ?? fixedSnapPoints}
 			>
 				<BottomSheet.Portal>
 					<BottomSheet.Overlay />
@@ -568,6 +539,7 @@ function ComboboxRoot(props: ComboboxProps): ReactElement {
 							contentContainerClassName={slots.sheetBody()}
 							data={rows}
 							extraData={selected}
+							keyboardDismissMode="none"
 							keyboardShouldPersistTaps="handled"
 							keyExtractor={(row) => row.key}
 							ListEmptyComponent={empty}

package/src/components/combobox/combobox.variants.test.ts

@@ -12,6 +12,7 @@ import {
 	comboboxVariants,
 	resolveComboboxChipColor,
 	resolveComboboxChipSize,
+	resolveComboboxSheetHeight,
 	resolveComboboxSheetMaxHeight,
 	resolveComboboxTriggerClass,
 	resolveComboboxTriggerText,
@@ -223,6 +224,20 @@ describe("resolveExpectedKeyboardHeight", () => {
 	});
 });
 
+describe("resolveComboboxSheetHeight", () => {
+	const room = { topInset: 62, windowHeight: 874 };
+
+	test("is Select's cap for an empty screen — the keyboard covers the sheet's bottom rather than lifting it", () => {
+		expect(resolveComboboxSheetHeight(room)).toBe(resolveSelectSheetMaxHeight(room));
+	});
+
+	test("is taller than the room above any keyboard, so a keyboard never moves it", () => {
+		expect(resolveComboboxSheetHeight(room)).toBeGreaterThan(
+			resolveComboboxSheetMaxHeight({ ...room, keyboardHeight: 336 })
+		);
+	});
+});
+
 describe("tokens", () => {
 	test("every colour any slot names exists in both themes", () => {
 		const missing = new Set<string>();

package/src/components/combobox/combobox.variants.ts

@@ -195,3 +195,24 @@ export function resolveExpectedKeyboardHeight({
 	if (!expectsKeyboard) return 0;
 	return lastKnown > 0 ? lastKnown : Math.round(windowHeight * COMBOBOX_KEYBOARD_ESTIMATE_FRACTION);
 }
+
+/**
+ * The sheet's one snap point: Select's cap for an empty screen.
+ *
+ * The sheet opens there and holds it. Sized to its rows it shrank and grew on
+ * every keystroke; sized to the room above the keyboard it opened half-height,
+ * then rode the keyboard up once the field focused and dropped back as the
+ * keyboard left on close — two moves for every open and one for every close.
+ * At this height the engine's `keyboardLiftLimit="highestSnapPoint"` never
+ * lifts it: the keyboard covers the sheet's bottom and the list's viewport
+ * shrinks by it instead. The keyboard is not an input.
+ */
+export function resolveComboboxSheetHeight({
+	topInset,
+	windowHeight,
+}: {
+	topInset: number;
+	windowHeight: number;
+}): number {
+	return resolveSelectSheetMaxHeight({ topInset, windowHeight });
+}

package/src/components/combobox/index.ts

@@ -36,6 +36,7 @@ export {
 	comboboxVariants,
 	resolveComboboxChipColor,
 	resolveComboboxChipSize,
+	resolveComboboxSheetHeight,
 	resolveComboboxSheetMaxHeight,
 	resolveComboboxTriggerClass,
 	resolveComboboxTriggerText,