@delacour/react-native-ui 0.1.0-alpha.3 → 0.1.0

package/src/components/bottom-sheet/bottom-sheet-scroll-view.tsx

@@ -1,37 +1,31 @@
-import { BottomSheetScrollView as GorhomBottomSheetScrollView } from "@gorhom/bottom-sheet";
-import type { ComponentProps, ReactElement, ReactNode } from "react";
+import {
+	BottomSheet as Headless,
+	type BottomSheetScrollViewProps as HeadlessProps,
+	useBottomSheetInternal,
+} from "@delacour/react-native-bottom-sheet";
+import type { ReactElement, ReactNode } from "react";
 import { View } from "react-native";
-import Animated, { useAnimatedStyle } from "react-native-reanimated";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { withUniwind } from "uniwind";
 import { cn } from "../../lib/cn";
-import { useBottomSheetContainerContext } from "./bottom-sheet.context";
-import { BOTTOM_SHEET_FOOTER_GAP, bottomSheetVariants, resolveSheetBottomInset } from "./bottom-sheet.variants";
-
-type GorhomScrollViewProps = ComponentProps<typeof GorhomBottomSheetScrollView>;
+import { BOTTOM_SHEET_FOOTER_GAP, bottomSheetVariants } from "./bottom-sheet.variants";
 
 /**
  * The one class prop this file uses, restated so the props survive the wrapper.
  *
  * `withUniwind`'s return type maps over a component's props, and over a
- * scrollable's animated ones it collapses to a single entry — `data`,
- * `contentContainerStyle` and the rest would all check against nothing. Writing
- * the signature out keeps them, the way `Screen.LegendList` already has to.
+ * scrollable's animated ones it collapses to a single entry. Writing the
+ * signature out keeps them, the way `Screen.LegendList` already has to.
  *
- * `contentContainerClassName` is deliberately absent even though the wrapper adds
- * one at runtime: passing it would put a second writer on `contentContainerStyle`
- * and cost the safe-area band — see the component's doc comment.
+ * `contentContainerClassName` is deliberately absent even though the wrapper
+ * adds one at runtime — see the component's doc comment.
  */
-type StyledScrollViewComponent = (props: GorhomScrollViewProps & { className?: string }) => ReactElement | null;
+type StyledScrollViewComponent = (props: HeadlessProps & { className?: string }) => ReactElement | null;
 
-// Third-party, so `className` needs the wrapper — and it has to be built at
-// module scope or every render mints a new component type and remounts the list.
-const StyledScrollView = withUniwind(GorhomBottomSheetScrollView) as unknown as StyledScrollViewComponent;
+// Third-party to Uniwind, so `className` needs the wrapper — built at module
+// scope or every render mints a new component type and remounts the list.
+const StyledScrollView = withUniwind(Headless.ScrollView) as unknown as StyledScrollViewComponent;
 
-export type BottomSheetScrollViewProps = Omit<
-	GorhomScrollViewProps,
-	"children" | "contentContainerStyle" | "enableFooterMarginAdjustment"
-> & {
+export type BottomSheetScrollViewProps = Omit<HeadlessProps, "children"> & {
 	className?: string;
 	/** Classes for the padded box the children sit in. */
 	contentContainerClassName?: string;
@@ -39,56 +33,48 @@ export type BottomSheetScrollViewProps = Omit<
 };
 
 /**
- * A scrolling body for a sheet taller than its snap point.
- *
- * Use this rather than a plain `ScrollView`: gorhom's scrollable and the sheet's
- * pan negotiate with each other, so dragging a list that is already at its top
- * moves the sheet instead of fighting it. A React Native `ScrollView` in here has
- * no such arrangement, and the sheet stops responding to a drag over the list.
+ * A scrolling body.
  *
- * **It needs a height to scroll within.** With `enableDynamicSizing` left on, the
- * sheet grows to whatever the content measures and there is nothing to scroll —
- * pass `enableDynamicSizing={false}` and explicit `snapPoints` on the
- * `BottomSheet.Container` around it.
+ * Use this rather than a plain `ScrollView`: the engine's scrollable and the
+ * sheet's pan share a finger — below the highest snap point the list is held and
+ * the drag moves the sheet, at the highest the list scrolls, and a drag down
+ * from the top hands back to the sheet. A React Native `ScrollView` in here has
+ * no such arrangement.
  *
- * The classes go on an inner `View`, not on gorhom's own content container, and
- * that is not tidiness: uniwind compiles a `contentContainerClassName` into an
- * *array* alongside any `contentContainerStyle`, and the two then fight over the
- * one style this component has to own — the safe-area band. One writer for it.
+ * **It needs no `snapPoints` and no `dynamicSizing={false}`.** The list
+ * reports its content size, and that is the dynamic snap point: six rows make a
+ * short sheet, forty make one capped at `maxDynamicContentSize` that scrolls
+ * inside the cap. Explicit `snapPoints` on the root still work, for a height
+ * that is a decision rather than a measurement.
  *
- * A pinned footer is reserved by a spacer at the end of the content rather than
- * by gorhom's `enableFooterMarginAdjustment`, which routes the footer's measured
- * height through React state and would commit a render on every frame of the
- * keyboard animation. See `BottomSheet.Content` for the whole reasoning.
+ * The classes go on an inner `View`, not on the engine's content container,
+ * so the one style this component writes there — the gap that holds the last
+ * row off a pinned footer's hairline — has a single writer. The engine already
+ * clamps the list above a sticky footer and the safe-area band, so nothing
+ * else is reserved here.
  *
  * @example
- * <BottomSheet.Container enableDynamicSizing={false} snapPoints={["60%", "90%"]}>
+ * <BottomSheet maxDynamicContentSize={420}>
+ *   …
  *   <BottomSheet.ScrollView>{rows}</BottomSheet.ScrollView>
- * </BottomSheet.Container>
+ * </BottomSheet>
  */
 export function BottomSheetScrollView({
 	className,
 	contentContainerClassName,
+	contentContainerStyle,
 	children,
 	...props
 }: BottomSheetScrollViewProps): ReactElement {
-	const container = useBottomSheetContainerContext();
-	const { bottom } = useSafeAreaInsets();
-	const hasStickyFooter = container?.hasStickyFooter ?? false;
-	const footerHeight = container?.footerHeight;
-
-	const reserve = useAnimatedStyle(() => ({
-		height: footerHeight === undefined ? 0 : footerHeight.value + BOTTOM_SHEET_FOOTER_GAP,
-	}));
+	const { hasFooter } = useBottomSheetInternal();
 
 	return (
 		<StyledScrollView
 			className={cn(className)}
-			contentContainerStyle={{ paddingBottom: resolveSheetBottomInset({ bottom, hasStickyFooter }) }}
+			contentContainerStyle={[{ paddingBottom: hasFooter ? BOTTOM_SHEET_FOOTER_GAP : 0 }, contentContainerStyle]}
 			{...props}
 		>
 			<View className={bottomSheetVariants().scrollContent({ className: contentContainerClassName })}>{children}</View>
-			{hasStickyFooter ? <Animated.View style={reserve} /> : null}
 		</StyledScrollView>
 	);
 }

package/src/components/bottom-sheet/bottom-sheet-section-list.tsx

@@ -0,0 +1,58 @@
+import {
+	BottomSheet as Headless,
+	type BottomSheetSectionListProps as HeadlessProps,
+	useBottomSheetInternal,
+} from "@delacour/react-native-bottom-sheet";
+import type { ReactElement, Ref } from "react";
+import type { SectionList } from "react-native";
+import { withUniwind } from "uniwind";
+import { cn } from "../../lib/cn";
+import { BOTTOM_SHEET_FOOTER_GAP, bottomSheetVariants } from "./bottom-sheet.variants";
+
+/** The class props restated so `<ItemT, SectionT>` survive `withUniwind` — see `bottom-sheet-flat-list.tsx`. */
+type StyledSectionListComponent = <ItemT, SectionT>(
+	props: HeadlessProps<ItemT, SectionT> & {
+		ref?: Ref<SectionList<ItemT, SectionT>>;
+		className?: string;
+		contentContainerClassName?: string;
+	}
+) => ReactElement | null;
+
+// Built at module scope, or every render mints a new component type and
+// remounts the list.
+const StyledSectionList = withUniwind(Headless.SectionList) as unknown as StyledSectionListComponent;
+
+export type BottomSheetSectionListProps<ItemT, SectionT> = HeadlessProps<ItemT, SectionT> & {
+	ref?: Ref<SectionList<ItemT, SectionT>>;
+	className?: string;
+	/** Classes for the content container. Same gutter and gap as `Content`. */
+	contentContainerClassName?: string;
+};
+
+/**
+ * A virtualised body with sticky section headers.
+ *
+ * The engine's `SectionList` with the library's gutter on the content
+ * container, for the same reasons `BottomSheet.FlatList` gives.
+ *
+ * @example
+ * <BottomSheet.SectionList sections={sections} renderItem={renderRow} renderSectionHeader={renderHeader} />
+ */
+export function BottomSheetSectionList<ItemT, SectionT>({
+	className,
+	contentContainerClassName,
+	contentContainerStyle,
+	...props
+}: BottomSheetSectionListProps<ItemT, SectionT>): ReactElement {
+	const { hasFooter } = useBottomSheetInternal();
+
+	return (
+		<StyledSectionList
+			className={cn(className)}
+			contentContainerClassName={bottomSheetVariants().scrollContent({ className: contentContainerClassName })}
+			contentContainerStyle={[{ paddingBottom: hasFooter ? BOTTOM_SHEET_FOOTER_GAP : 0 }, contentContainerStyle]}
+			{...props}
+		/>
+	);
+}
+BottomSheetSectionList.displayName = "DelacourUI.BottomSheet.SectionList";

package/src/components/bottom-sheet/bottom-sheet-steps.tsx

@@ -0,0 +1,88 @@
+import {
+	BottomSheet as Headless,
+	type BottomSheetStepProps as HeadlessStepProps,
+	type BottomSheetStepsProps as HeadlessStepsProps,
+	type SheetEvent,
+} from "@delacour/react-native-bottom-sheet";
+import type { ReactElement } from "react";
+import { withUniwind } from "uniwind";
+import { BOTTOM_SHEET_FOOTER_GAP, bottomSheetVariants } from "./bottom-sheet.variants";
+
+/** The class prop restated so `<S, C, E>` survive `withUniwind` — see `bottom-sheet-flat-list.tsx`. */
+type StyledStepsComponent = <S extends string, C, E extends SheetEvent>(
+	props: HeadlessStepsProps<S, C, E> & { className?: string }
+) => ReactElement | null;
+
+type StyledStepComponent = <S extends string>(
+	props: HeadlessStepProps<S> & { className?: string }
+) => ReactElement | null;
+
+// Both built at module scope, or every render mints a new component type and
+// the step stack remounts mid-transition.
+const StyledSteps = withUniwind(Headless.Steps) as unknown as StyledStepsComponent;
+const StyledStep = withUniwind(Headless.Step) as unknown as StyledStepComponent;
+
+export type BottomSheetStepsProps<S extends string, C, E extends SheetEvent> = HeadlessStepsProps<S, C, E> & {
+	className?: string;
+};
+
+export type BottomSheetStepProps<S extends string = string> = HeadlessStepProps<S> & {
+	className?: string;
+};
+
+/**
+ * A body whose contents follow a step machine and whose height glides between
+ * them.
+ *
+ * The engine's `Steps` — `Content` with an animated-height stack inside — with
+ * the library's gutter on the box around the stack. Only the gutter: the
+ * engine measures each `Step`, not the box, so vertical padding here would be
+ * height the sheet never counts. `Step` carries that instead.
+ *
+ * A `Footer` written beside it reads the same controller through
+ * `useSheetStep()`, which is how a Next button outside the body knows what it
+ * can send.
+ *
+ * @example
+ * const machine = defineSheetMachine<Step, Context, Event>({ … });
+ *
+ * function Form() {
+ *   const controller = useSheetMachine(machine);
+ *   return (
+ *     <BottomSheet.Steps controller={controller}>
+ *       <BottomSheet.Step name="details">…</BottomSheet.Step>
+ *       <BottomSheet.Step name="confirm">…</BottomSheet.Step>
+ *     </BottomSheet.Steps>
+ *   );
+ * }
+ */
+export function BottomSheetSteps<S extends string, C, E extends SheetEvent>({
+	className,
+	footerGap = BOTTOM_SHEET_FOOTER_GAP,
+	...props
+}: BottomSheetStepsProps<S, C, E>): ReactElement {
+	return <StyledSteps className={bottomSheetVariants().steps({ className })} footerGap={footerGap} {...props} />;
+}
+BottomSheetSteps.displayName = "DelacourUI.BottomSheet.Steps";
+
+/**
+ * One step of a `Steps` body — a key of the machine's `states`.
+ *
+ * Reads like `Content`: the same gap and top padding, less the gutter `Steps`
+ * already carries. The engine positions it across the top of the stack,
+ * measures it while it is current, and fades or slides it against its
+ * neighbour.
+ *
+ * @example
+ * <BottomSheet.Step name="details">
+ *   <BottomSheet.Title>Your details</BottomSheet.Title>
+ *   {fields}
+ * </BottomSheet.Step>
+ */
+export function BottomSheetStep<S extends string = string>({
+	className,
+	...props
+}: BottomSheetStepProps<S>): ReactElement {
+	return <StyledStep className={bottomSheetVariants().step({ className })} {...props} />;
+}
+BottomSheetStep.displayName = "DelacourUI.BottomSheet.Step";

package/src/components/bottom-sheet/bottom-sheet-text-input.tsx

@@ -0,0 +1,44 @@
+import { useBottomSheetTextInput } from "@delacour/react-native-bottom-sheet";
+import { type ReactElement, useCallback, useMemo } from "react";
+import type { BlurEvent, FocusEvent, TextInput } from "react-native";
+import { composeRefs } from "../../lib/compose-refs";
+import { Input, type InputProps } from "../input";
+
+export type BottomSheetTextInputProps = InputProps;
+
+/**
+ * An `Input` registered with the sheet.
+ *
+ * The library's `Input` — variant, size, `Input.Group` and all — with the
+ * engine's `useBottomSheetTextInput()` spread onto it, so the keyboard it
+ * raises is the sheet's to lift for under any `keyboardScope`, including
+ * `registered`. A caller's own `ref`, `onFocus` and `onBlur` still run.
+ *
+ * A field of your own takes `useBottomSheetInput()` instead and keeps its
+ * component; this is the plain case.
+ *
+ * @example
+ * <BottomSheet.TextInput placeholder="Name" value={name} onChangeText={setName} />
+ */
+export function BottomSheetTextInput({ ref, onFocus, onBlur, ...props }: BottomSheetTextInputProps): ReactElement {
+	const handlers = useBottomSheetTextInput();
+	const composed = useMemo(() => composeRefs<TextInput | null>(ref, handlers.ref), [ref, handlers.ref]);
+
+	const handleFocus = useCallback(
+		(event: FocusEvent) => {
+			handlers.onFocus();
+			onFocus?.(event);
+		},
+		[handlers.onFocus, onFocus]
+	);
+	const handleBlur = useCallback(
+		(event: BlurEvent) => {
+			handlers.onBlur();
+			onBlur?.(event);
+		},
+		[handlers.onBlur, onBlur]
+	);
+
+	return <Input onBlur={handleBlur} onFocus={handleFocus} ref={composed} {...props} />;
+}
+BottomSheetTextInput.displayName = "DelacourUI.BottomSheet.TextInput";

package/src/components/bottom-sheet/bottom-sheet-title.tsx

@@ -1,3 +1,4 @@
+import { BottomSheet as Headless } from "@delacour/react-native-bottom-sheet";
 import type { ReactElement } from "react";
 import { Text, type TextPresetProps } from "../text";
 import { bottomSheetVariants } from "./bottom-sheet.variants";
@@ -7,18 +8,21 @@ export type BottomSheetTitleProps = TextPresetProps;
 /**
  * The sheet's heading.
  *
- * *Is* a `Text.Header` — it renders the preset and adds layout, never a size or a
- * weight of its own, the same trade `Field.Label` makes with `Text.Label`. A
- * `text-lg font-semibold` here would be a second definition of that preset which
- * could drift from it, and the tests assert the slot carries neither.
- *
- * The preset already announces itself as a heading, so a screen reader reaches
- * the sheet's purpose first with nothing said at the call site.
+ * *Is* a `Text.Header` — the engine's `Title asChild` hands it the `nativeID`
+ * the panel is labelled by, so focus entering the sheet announces its purpose
+ * first, and the preset supplies the type. This adds layout, never a size or a
+ * weight of its own, the same trade `Field.Label` makes with `Text.Label`; a
+ * `text-lg font-semibold` here would be a second definition of that preset
+ * which could drift from it, and the tests assert the slot carries neither.
  *
  * @example
  * <BottomSheet.Title>Keep yourself safe</BottomSheet.Title>
  */
 export function BottomSheetTitle({ className, ...props }: BottomSheetTitleProps): ReactElement {
-	return <Text.Header className={bottomSheetVariants().title({ className })} {...props} />;
+	return (
+		<Headless.Title asChild>
+			<Text.Header className={bottomSheetVariants().title({ className })} {...props} />
+		</Headless.Title>
+	);
 }
 BottomSheetTitle.displayName = "DelacourUI.BottomSheet.Title";

package/src/components/bottom-sheet/bottom-sheet-trigger.tsx

@@ -1,32 +1,27 @@
-import { type ReactElement, useCallback } from "react";
+import { BottomSheet as Headless } from "@delacour/react-native-bottom-sheet";
+import type { ReactElement } from "react";
 import { Slot } from "../../lib/slot";
 import { Pressable, type PressableProps } from "../pressable";
-import { useBottomSheetPart } from "./bottom-sheet.context";
 
 export type BottomSheetTriggerProps = PressableProps;
 
 /**
  * The control that opens the sheet.
  *
- * On its own it is a `Pressable`, so `feedback`, `haptic` and the rest are
- * inherited rather than restated. It opens through the same state a controlled
- * `isOpen` drives, so a sheet can be opened from here and from elsewhere on the
- * same screen without the two disagreeing, and a caller's own `onPress` still
- * runs after the open.
+ * On its own it is this library's `Pressable`, so `feedback`, `haptic` and the
+ * rest are inherited rather than restated. It opens through the same state a
+ * controlled `isOpen` drives, and a caller's own `onPress` still runs after
+ * the open.
  *
- * **`asChild` donates the press rather than wrapping the child**, which is where
- * it differs from `Pressable`'s own. `Pressable asChild` keeps its gesture and
- * renders the child inside it — correct for a child that is not itself a
- * control, and wrong here, because the thing anyone wraps in a trigger is a
- * `Button`. Two tap gestures in an ancestor/descendant pair are not
- * simultaneous, so Gesture Handler gives the press to the DESCENDANT: the
- * button's own detector wins, fires the `onPress` it does not have, and the
- * sheet never opens. Nothing announces this — the press simply does nothing.
- *
- * So the trigger hands its `onPress` down as a prop instead, through `Slot`,
- * which chains it ahead of any the child already had. The child keeps its own
- * gesture, its own feedback and its own haptic, and there is still no extra view
- * in the tree.
+ * **`asChild` donates the press rather than wrapping the child**, which is
+ * where it differs from `Pressable`'s own. Two tap gestures in an
+ * ancestor/descendant pair are not simultaneous: Gesture Handler gives the
+ * press to the DESCENDANT, so a `Button` wrapped in a pressable trigger would
+ * win the touch, fire the `onPress` it does not have, and the sheet would never
+ * open. The engine's `Trigger asChild` hands `onPress` down as a prop instead,
+ * chained ahead of any the child already had — the child keeps its own
+ * gesture, feedback and haptic, and there is no extra view in the tree. The
+ * remaining props reach the child through this library's `Slot`, one layer in.
  *
  * The corollary: **the child has to be something that handles `onPress`.** A
  * `View` or a `Text` takes the prop and ignores it. Wrap a `Button`, a
@@ -49,25 +44,12 @@ export function BottomSheetTrigger({
 	onPress,
 	...props
 }: BottomSheetTriggerProps): ReactElement {
-	const { open } = useBottomSheetPart("BottomSheet.Trigger");
-
-	const handlePress = useCallback(() => {
-		open();
-		onPress?.();
-	}, [onPress, open]);
-
-	if (asChild) {
-		return (
-			<Slot onPress={handlePress} {...props}>
-				{children}
-			</Slot>
-		);
-	}
+	const child = asChild ? <Slot {...props}>{children}</Slot> : <Pressable {...props}>{children}</Pressable>;
 
 	return (
-		<Pressable onPress={handlePress} {...props}>
-			{children}
-		</Pressable>
+		<Headless.Trigger asChild onPress={onPress}>
+			{child}
+		</Headless.Trigger>
 	);
 }
 BottomSheetTrigger.displayName = "DelacourUI.BottomSheet.Trigger";