@delacour/react-native-ui 0.5.0-alpha.20261024114755 → 0.5.0-alpha.20261024121604

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@delacour/react-native-ui",
-	"version": "0.5.0-alpha.20261024114755",
+	"version": "0.5.0-alpha.20261024121604",
 	"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.20261024114755",
-		"@delacour/react-native-charts": "0.2.0-alpha.20261024114755",
+		"@delacour/react-native-bottom-sheet": "0.3.0-alpha.20261024121604",
+		"@delacour/react-native-charts": "0.2.0-alpha.20261024121604",
 		"@legendapp/list": ">=3.3",
 		"react-native-skia": ">=3.7.3",
 		"expo-linear-gradient": ">=15",

package/src/components/bottom-sheet/AGENTS.md

@@ -136,6 +136,32 @@ read those before touching behaviour, because behaviour is not here.
   `SectionList`; `@legendapp/list` is this library's optional peer, so its
   body is made here, once at module scope, and registered as a flat list.
 
+## A sheet that filters as you type holds its height
+
+A sheet sized to its content (`dynamicSizing`, the engine's default) re-measures
+whenever its rows change, so a search field over a list resizes the sheet on
+every keystroke that drops or restores a row. Any sheet whose content changes
+while an input in it has focus holds one height instead:
+
+- **Fixed snap points.** `dynamicSizing={false}` and a `snapPoints` of one
+  height — the SearchBar demo's `"50%"`. The keyboard lifts the sheet as usual,
+  and nothing it types moves it.
+- **A floor at the cap.** A scrollable list that should fill the sheet keeps
+  `dynamicSizing` and `maxDynamicContentSize`, passes
+  `keyboardLiftLimit="maxDynamicContentSize"`, and floors its content at the
+  cap — `Select`'s searchable sheet. Under that limit the keyboard covers the
+  sheet's bottom rather than lifting it, which a fixed snap point at the cap
+  cannot do: the limit only clamps a dynamically sized sheet, and an
+  unclamped lift from the cap carries the top under the status bar.
+- **A held snap point.** `Combobox` computes its one snap point at open, for
+  the keyboard it expects, and keeps it until the next open.
+
+Scrolling the filtered list should not drop the keyboard either: `Select` and
+`Combobox` pass `enableBlurKeyboardOnGesture={false}` to the sheet and
+`keyboardDismissMode="none"` to the list while a search field is in it.
+
+A form whose fields never change the content's height needs none of this.
+
 ## Compat
 
 Two names survive from the previous implementation for callers that imported

package/src/components/select/AGENTS.md

@@ -24,7 +24,7 @@ engine. An app that imports no picker still never resolves it.
 | `select.collect.ts` | `collectOptions` / `findChildOfType` — reads the markers into the `options` shape |
 | `select.context.tsx` | `SelectProvider`, `useSelect()`, `useSelectContext()`, `useSelectPart()` |
 | `select.types.ts` | `SelectOption`, `SelectOptionGroup`, `SelectRowOption`, `SelectEntry`, `SelectListRow`, `SelectHighlightRange` |
-| `select.variants.ts` | Pure `tv()` slots + every resolver, no RN imports |
+| `select.variants.ts` | Pure `tv()` slots + every resolver, no RN imports — the sheet cap and the searchable list's floor among them |
 | `select.variants.test.ts` | |
 | `select.collect.test.ts` | |
 
@@ -92,6 +92,25 @@ engine. An app that imports no picker still never resolves it.
   started — so a full list shot to the top of the screen and settled back
   about a quarter of a second later. `snapPoints` bypasses dynamic sizing, and
   the cap and the limit with it.
+- **A searchable sheet opens at the cap and holds it.** Sized to its rows, it
+  shrank and grew on every keystroke as the filter dropped and restored them —
+  typing "zur" took the sheet from nine rows to one. `resolveSelectListMinHeight`
+  gives the list's content a floor of the cap, so the dynamic snap point is the
+  cap whatever the filter leaves, and the lift limit above still stops the
+  keyboard there: the keyboard covers the sheet's bottom and its top never
+  moves. Dynamic sizing stays on rather than passing the cap as a snap point,
+  because `keyboardLiftLimit` only clamps a dynamically sized sheet — a fixed
+  snap point at the cap would ride the keyboard to the top of the screen. A
+  short searchable list sits at the top of a full-height sheet, as `Combobox`'s
+  does. Without search the rows cannot change while it is open, so it keeps
+  sizing to them.
+- **Scrolling a searchable list keeps the keyboard up**, as in `Combobox`. The
+  engine puts the keyboard away the moment any pan starts on the sheet
+  (`enableBlurKeyboardOnGesture`), and its lists dismiss interactively, so
+  scrolling the results past the first few dropped the keyboard and the next
+  keystroke needed a tap on the field first. A searchable sheet turns the pan's
+  blur off and the list passes `keyboardDismissMode="none"`. A drag that carries
+  the sheet down still puts it away, and every close clears the query.
 - **The row floor is ListGroup's**, `min-h-12/14/16`, pinned by the test, so a
   row in the sheet sits level with a `ListGroup` row on the screen behind it. It
   is a floor, never a height, so a description can wrap.

package/src/components/select/select.tsx

@@ -20,6 +20,7 @@ import {
 	filterGroups,
 	normalizeOptions,
 	resolveSelectedOptions,
+	resolveSelectListMinHeight,
 	resolveSelectRowState,
 	resolveSelectSheetMaxHeight,
 	resolveSelectTriggerText,
@@ -60,7 +61,7 @@ type SelectBaseProps = {
 	emptyText?: string;
 	/** Where the options open. Only `sheet` today. */
 	presentation?: SelectPresentation;
-	/** Forwarded to the sheet. Leave it off and the sheet sizes to its rows. */
+	/** Forwarded to the sheet. Leave it off and the sheet sizes to its rows — or, searchable, opens at its cap and holds it while you type. */
 	snapPoints?: BottomSheetProps["snapPoints"];
 	/** Custom trigger content for a non-empty selection. */
 	renderValue?: (selected: SelectOption[]) => ReactNode;
@@ -214,6 +215,15 @@ function SelectRoot(props: SelectProps): ReactElement {
 		variant,
 	};
 
+	const sheetMaxHeight = resolveSelectSheetMaxHeight({ topInset, windowHeight });
+	// A searchable list measures at least the cap, so the sheet holds its height
+	// while the filter drops rows — see `resolveSelectListMinHeight`.
+	const listMinHeight = resolveSelectListMinHeight({ isSearchable, maxHeight: sheetMaxHeight, snapPoints });
+	const listContentStyle = useMemo(
+		() => (listMinHeight === undefined ? undefined : { minHeight: listMinHeight }),
+		[listMinHeight]
+	);
+
 	const rows = buildSelectRows(isSearchable ? filterGroups(entries, query) : entries);
 	const slots = selectVariants({ size, variant });
 
@@ -294,9 +304,10 @@ function SelectRoot(props: SelectProps): ReactElement {
 			{customTrigger ?? <SelectTrigger className={className} />}
 			<BottomSheet
 				dynamicSizing={snapPoints === undefined}
+				enableBlurKeyboardOnGesture={!isSearchable}
 				isOpen={isOpen}
 				keyboardLiftLimit="maxDynamicContentSize"
-				maxDynamicContentSize={resolveSelectSheetMaxHeight({ topInset, windowHeight })}
+				maxDynamicContentSize={sheetMaxHeight}
 				onOpenChange={handleOpenChange}
 				snapPoints={snapPoints}
 			>
@@ -305,8 +316,10 @@ function SelectRoot(props: SelectProps): ReactElement {
 					<BottomSheet.Container>
 						<BottomSheet.FlatList
 							contentContainerClassName={slots.sheetBody()}
+							contentContainerStyle={listContentStyle}
 							data={rows}
 							extraData={selected}
+							keyboardDismissMode={isSearchable ? "none" : undefined}
 							keyboardShouldPersistTaps="handled"
 							keyExtractor={(row) => row.key}
 							ListEmptyComponent={empty}

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

@@ -11,6 +11,7 @@ import {
 	normalizeOptions,
 	normalizeSearchText,
 	resolveSelectIconToken,
+	resolveSelectListMinHeight,
 	resolveSelectRowState,
 	resolveSelectSheetMaxHeight,
 	resolveSelectTriggerClass,
@@ -555,3 +556,19 @@ describe("resolveSelectSheetMaxHeight", () => {
 		expect(resolveSelectSheetMaxHeight({ topInset: 50, windowHeight: 20 })).toBe(0);
 	});
 });
+
+describe("resolveSelectListMinHeight", () => {
+	const maxHeight = resolveSelectSheetMaxHeight({ topInset: 62, windowHeight: 874 });
+
+	test("holds a searchable list at the cap, so a filter that drops rows cannot shrink the sheet", () => {
+		expect(resolveSelectListMinHeight({ isSearchable: true, maxHeight, snapPoints: undefined })).toBe(maxHeight);
+	});
+
+	test("leaves a list without search sized to its rows", () => {
+		expect(resolveSelectListMinHeight({ isSearchable: false, maxHeight, snapPoints: undefined })).toBeUndefined();
+	});
+
+	test("steps aside for caller snap points, which replace dynamic sizing", () => {
+		expect(resolveSelectListMinHeight({ isSearchable: true, maxHeight, snapPoints: ["50%"] })).toBeUndefined();
+	});
+});

package/src/components/select/select.variants.ts

@@ -66,6 +66,29 @@ export function resolveSelectSheetMaxHeight({
 	return Math.max(0, Math.floor(Math.min(byFraction, belowInset)));
 }
 
+/**
+ * The floor under a searchable list's content, so the sheet holds the cap.
+ *
+ * Sized to its rows, the sheet shrank and grew on every keystroke as the filter
+ * dropped and restored them. Measuring at least the cap, it opens there and
+ * stays: the engine's dynamic snap point is clamped to the cap either way, and
+ * `keyboardLiftLimit` still stops the keyboard's lift at it on the UI thread,
+ * so the keyboard covers the sheet's bottom and its top never moves. Without
+ * search the rows cannot change while it is open, and caller `snapPoints` turn
+ * dynamic sizing off, so neither needs one.
+ */
+export function resolveSelectListMinHeight({
+	isSearchable,
+	maxHeight,
+	snapPoints,
+}: {
+	isSearchable: boolean;
+	maxHeight: number;
+	snapPoints: readonly unknown[] | undefined;
+}): number | undefined {
+	return isSearchable && snapPoints === undefined ? maxHeight : undefined;
+}
+
 /**
  * Styling for every part of a select.
  *