@multiplatform.one/forms 7.41.0 → 7.43.0

package/src/Form/index.tsx

@@ -21,6 +21,7 @@ import {
 import { ContextualSaveBar, type ContextualSaveBarProps } from "../ContextualSaveBar";
 import { ErrorSummary, collectFormFieldErrors, type ErrorSummaryItem } from "../ErrorSummary";
 import { RequiredMarkingContext, mapHouseRequiredMarking } from "../requiredMarking";
+import { KeyboardChainScope } from "../keyboard/chain";
 import { getFormSubmission } from "./submissionController";
 import { type FormValidateOn, resolveEffectiveValidateOn } from "./validateOn";
 
@@ -320,32 +321,36 @@ export function Form<TFormData extends Record<string, any>, TFormValidator = any
       <FormSaveModeContext.Provider value={saveMode}>
         <RequiredMarkingContext.Provider value={{ mode: requiredMarkMode }}>
           <FormValidateProvider form={form} validateOn={validateOn}>
-            <TamaguiForm ref={setFormRef} onSubmit={handleSubmit} {...tamaguiFormProps}>
-              <YStack
-                data-mpo-form-layout=""
-                data-gap={knobProps.gap.gap}
-                data-size-token={knobProps.sizeToken}
-                width="100%"
-                minWidth={0}
-                // A readable column: fields and actions read as one group on a
-                // wide screen. `maxWidth` on the Form ejects (e.g. "100%").
-                maxWidth={(tamaguiFormProps.maxWidth as never) ?? FORM_READABLE_WIDTH}
-                {...knobProps.gap}
-                {...(tamaguiFormProps.flex != null ? { flex: tamaguiFormProps.flex as never } : {})}
-              >
-                {showErrorSummary ? (
-                  <AutoErrorSummary
-                    form={form}
-                    title={errorSummaryTitle}
-                    formElement={formElementRef.current}
-                  />
-                ) : null}
-                {children}
-                {saveBar ? (
-                  <ContextualSaveBar {...(typeof saveBar === "object" ? saveBar : {})} />
-                ) : null}
-              </YStack>
-            </TamaguiForm>
+            <KeyboardChainScope>
+              <TamaguiForm ref={setFormRef} onSubmit={handleSubmit} {...tamaguiFormProps}>
+                <YStack
+                  data-mpo-form-layout=""
+                  data-gap={knobProps.gap.gap}
+                  data-size-token={knobProps.sizeToken}
+                  width="100%"
+                  minWidth={0}
+                  // A readable column: fields and actions read as one group on a
+                  // wide screen. `maxWidth` on the Form ejects (e.g. "100%").
+                  maxWidth={(tamaguiFormProps.maxWidth as never) ?? FORM_READABLE_WIDTH}
+                  {...knobProps.gap}
+                  {...(tamaguiFormProps.flex != null
+                    ? { flex: tamaguiFormProps.flex as never }
+                    : {})}
+                >
+                  {showErrorSummary ? (
+                    <AutoErrorSummary
+                      form={form}
+                      title={errorSummaryTitle}
+                      formElement={formElementRef.current}
+                    />
+                  ) : null}
+                  {children}
+                  {saveBar ? (
+                    <ContextualSaveBar {...(typeof saveBar === "object" ? saveBar : {})} />
+                  ) : null}
+                </YStack>
+              </TamaguiForm>
+            </KeyboardChainScope>
           </FormValidateProvider>
         </RequiredMarkingContext.Provider>
       </FormSaveModeContext.Provider>

package/src/InputParts/index.tsx

@@ -50,6 +50,7 @@ import {
 } from "@multiplatform.one/theme";
 import { formButtonColors, formCommonColors, formInputColors } from "../shared/colorRamps";
 import { useControlGrouped } from "../shared/groupContext";
+import { nativeAutoFocus } from "../shared/nativeAutoFocus";
 import { useIsInTableCell } from "../shared/tableCellContext";
 import { useFieldA11y, useFieldDescribedBy } from "../fieldLayout";
 
@@ -593,6 +594,13 @@ const InputGroupImpl = InputGroupFrame.styleable<{
       }
     : undefined;
 
+  const focusRing = ensureFocusVisibleRing({
+    ...inputOutlineFocus,
+    ...control.focusKnobProps,
+    ...control.focusVisibleKnobProps,
+    outlineOffset: boxRingOffset(ringMode),
+  });
+
   return (
     <FocusContext.Provider focused={focused} setFocused={setFocused}>
       {wrapNativePressable(
@@ -640,19 +648,20 @@ const InputGroupImpl = InputGroupFrame.styleable<{
                 // resolved backup (and the native path). Button-like Boxes
                 // (Select) do not set `focused` (no Area onFocus).
                 borderColor: formInputColors.border.focus,
-                ...ensureFocusVisibleRing({
-                  ...inputOutlineFocus,
-                  ...control.focusKnobProps,
-                  ...control.focusVisibleKnobProps,
-                  outlineOffset: boxRingOffset(ringMode),
-                }),
+                ...focusRing,
               }
-            : {
-                // Explicit rest — avoid leaving theme `$outlineColor` (near-white in
-                // dark) as the computed outline-color while width settles.
-                // Keep outline-transparent rest (border-flicker fix); do not warn.
-                ...inputOutlineRest,
-              })}
+            : isWeb
+              ? {
+                  // Explicit rest — avoid leaving theme `$outlineColor` (near-white in
+                  // dark) as the computed outline-color while width settles.
+                  // Keep outline-transparent rest (border-flicker fix); do not warn.
+                  ...inputOutlineRest,
+                }
+              : // FZ-7718: on iOS the outline's width and offset changing as
+                // the field takes focus makes it resign first responder, so a
+                // programmatic focus (Return to the next field) never sticks.
+                // Native keeps the ring's geometry at rest and fades its color.
+                { ...focusRing, outlineColor: "transparent" })}
           {...suppressedRingProps}
           // LC-40 DISABLED-VISIBLE: the input frame is text-bearing chrome —
           // keepLabel washes fill/border (value text keeps >= AA) and
@@ -886,6 +895,7 @@ const InputAreaImpl = InputFrame.styleable<{
                   : undefined
         }
         {...props}
+        {...nativeAutoFocus(props as { autoFocus?: boolean; autoFocusNative?: boolean })}
         {...(flexProp != null ? { flex: flexProp } : undefined)}
         {...(widthProp != null
           ? { width: widthProp, minWidth: minWidthProp, maxWidth: maxWidthProp }

package/src/fields/Input/index.tsx

@@ -26,6 +26,8 @@ import {
 import { Input as InputParts, useForwardFocus } from "../../InputParts";
 import type { AnyFormApi, LinkResolver } from "../../types";
 import { LinkCell } from "../../utils/LinkCell";
+import { getFormSubmission } from "../../Form/submissionController";
+import { useKeyboardChain } from "../../keyboard";
 
 type InputAreaProps = ComponentProps<typeof InputParts.Area>;
 
@@ -167,6 +169,17 @@ export function Input({
 
   const resolvedValidators = useResolvedValidators(required, validators, label, name);
 
+  const submitForm = useCallback(() => {
+    if (resolvedForm && name) void getFormSubmission(resolvedForm).submit();
+  }, [resolvedForm, name]);
+  const keyboard = useKeyboardChain({
+    inputRef,
+    enabled: !disabled && !readOnly && !skeleton && !children,
+    multiline,
+    onSubmitLast: submitForm,
+    onSubmitEditing: inputProps?.onSubmitEditing as ((...args: any[]) => void) | undefined,
+  });
+
   // Purpose → autocomplete token + keyboard hints (DG §32). Explicit
   // autoComplete/keyboardType/inputProps below eject per key.
   const purposeInputProps = resolveFieldInputProps(purpose, autoComplete);
@@ -337,6 +350,7 @@ export function Input({
               ? { autoComplete: purposeInputProps.autoComplete }
               : undefined)}
             {...inputProps}
+            {...keyboard.inputProps}
             {...identifierProps}
             {...(multiline !== undefined ? { multiline } : undefined)}
             {...(maxLength !== undefined ? { maxLength } : undefined)}
@@ -405,43 +419,51 @@ export function Input({
     );
   };
 
+  // The iOS Done bar sits outside FieldLayout so it keeps the page's theme,
+  // not the error theme an invalid field wraps itself in.
   if (!resolvedForm || !name) {
     return (
-      <FieldLayout {...layoutBind} error={error} onBlur={onBlur}>
-        <InputParts size={resolvedSize}>
-          {renderInputBox(value ?? defaultValue, undefined, undefined, !!error)}
-        </InputParts>
-      </FieldLayout>
+      <>
+        <FieldLayout {...layoutBind} error={error} onBlur={onBlur}>
+          <InputParts size={resolvedSize}>
+            {renderInputBox(value ?? defaultValue, undefined, undefined, !!error)}
+          </InputParts>
+        </FieldLayout>
+        {keyboard.accessory}
+      </>
     );
   }
 
   return (
-    <Field
-      form={resolvedForm}
-      name={name}
-      defaultValue={defaultValue}
-      validators={resolvedValidators}
-    >
-      {(field) => {
-        const resolvedError = getFieldError(field, error);
-        return (
-          <FieldLayout
-            {...layoutBind}
-            error={resolvedError}
-            onBlur={mergeFieldHandler(field, "handleBlur", onBlur)}
-          >
-            <InputParts size={resolvedSize}>
-              {renderInputBox(
-                field.state.value as string,
-                (text) => field.handleChange(text as any),
-                undefined,
-                !!resolvedError,
-              )}
-            </InputParts>
-          </FieldLayout>
-        );
-      }}
-    </Field>
+    <>
+      <Field
+        form={resolvedForm}
+        name={name}
+        defaultValue={defaultValue}
+        validators={resolvedValidators}
+      >
+        {(field) => {
+          const resolvedError = getFieldError(field, error);
+          return (
+            <FieldLayout
+              {...layoutBind}
+              error={resolvedError}
+              onBlur={mergeFieldHandler(field, "handleBlur", onBlur)}
+            >
+              <InputParts size={resolvedSize}>
+                {renderInputBox(
+                  field.state.value as string,
+                  (text) => field.handleChange(text as any),
+                  undefined,
+                  !!resolvedError,
+                )}
+              </InputParts>
+            </FieldLayout>
+          );
+        }}
+      </Field>
+      {keyboard.accessory}
+    </>
   );
 }
 

package/src/fields/SearchInput/SearchInput.focusHold.native.spec.tsx

@@ -0,0 +1,81 @@
+import { readFileSync } from "node:fs";
+import { join } from "node:path";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { act, fireEvent } from "@testing-library/react";
+import { createRef, useState } from "react";
+import { describe, expect, it, vi } from "vitest";
+import { nativeAutoFocus } from "../../shared/nativeAutoFocus";
+import { SearchInput, type SearchInputHandle } from "./index";
+
+vi.mock("tamagui", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("tamagui")>()),
+  isWeb: false,
+}));
+
+const src = join(process.cwd(), "src");
+
+function searchbox(container: HTMLElement) {
+  return container.querySelector('[role="searchbox"]') as HTMLInputElement;
+}
+
+describe("FZ-7785: SearchInput autoFocus reaches the native TextInput", () => {
+  it("carries autoFocus to tamagui's native autoFocusNative", () => {
+    expect(nativeAutoFocus({ autoFocus: true })).toEqual({ autoFocusNative: true });
+    expect(nativeAutoFocus({ autoFocus: false })).toEqual({ autoFocusNative: false });
+    expect(nativeAutoFocus({})).toBeUndefined();
+    expect(nativeAutoFocus({ autoFocus: true, autoFocusNative: false })).toBeUndefined();
+  });
+
+  it("every MPO text field base forwards it: Input.Area and ThemedTextArea", () => {
+    const area = readFileSync(join(src, "InputParts", "index.tsx"), "utf8");
+    const textArea = readFileSync(join(src, "themedPrimitives.tsx"), "utf8");
+    expect(area).toMatch(/\{\.\.\.props\}\s*\{\.\.\.nativeAutoFocus\(props/);
+    expect(textArea).toMatch(/\{\.\.\.props\}\s*\{\.\.\.nativeAutoFocus\(props/);
+  });
+
+  it("autoFocus reaches the field and the field keeps focus", () => {
+    const { container } = renderWithProviders(<SearchInput aria-label="Find" autoFocus />);
+    const input = searchbox(container);
+    expect(input.autofocus || document.activeElement === input).toBe(true);
+    act(() => input.focus());
+    expect(document.activeElement).toBe(input);
+  });
+});
+
+describe("FZ-7785: SearchInput holds a programmatic focus on native", () => {
+  it("ref.focus() keeps the same field focused through a parent re-render at onFocus", () => {
+    const ref = createRef<SearchInputHandle>();
+    function Parent() {
+      const [focusCount, setFocusCount] = useState(0);
+      return (
+        <SearchInput
+          ref={ref}
+          aria-label={`Find ${focusCount}`}
+          inputProps={{ onFocus: () => setFocusCount((n) => n + 1) }}
+        />
+      );
+    }
+    const { container } = renderWithProviders(<Parent />);
+    const input = searchbox(container);
+    act(() => ref.current!.focus());
+    expect(searchbox(container)).toBe(input);
+    expect(document.activeElement).toBe(input);
+  });
+});
+
+describe("FZ-7785: SearchInput's clear X on native", () => {
+  it("empties the field, fires onChange('') and onClear, and keeps focus", () => {
+    const onChange = vi.fn();
+    const onClear = vi.fn();
+    const { container, getByRole } = renderWithProviders(
+      <SearchInput aria-label="Find" defaultValue="query" onChange={onChange} onClear={onClear} />,
+    );
+    const input = searchbox(container);
+    act(() => input.focus());
+    fireEvent.click(getByRole("button", { name: "Clear search" }));
+    expect(onChange).toHaveBeenLastCalledWith("");
+    expect(onClear).toHaveBeenCalledTimes(1);
+    expect(searchbox(container).value).toBe("");
+    expect(document.activeElement).toBe(searchbox(container));
+  });
+});

package/src/fields/SearchInput/index.tsx

@@ -365,6 +365,7 @@ function SearchInputImpl(
         />
         {showClear ? (
           <View
+            group={"searchClear" as unknown as undefined}
             role="button"
             tabIndex={0}
             aria-label={t("Clear search")}
@@ -396,7 +397,7 @@ function SearchInputImpl(
               alignItems="center"
               justifyContent="center"
               hoverStyle={{ backgroundColor: "$color4" }}
-              pressStyle={{ backgroundColor: "$color5" }}
+              {...{ "$group-searchClear-press": { backgroundColor: "$color5" } }}
             >
               <InputParts.Icon aria-hidden color={formCommonColors.muted}>
                 <XIcon size={resolvedIconSize} />

package/src/index.ts

@@ -28,6 +28,23 @@ export type {
   UseNavigationBlocker,
 } from "./ContextualSaveBar";
 
+// ── Keyboard: return-key chain + iOS Done bar (FZ-7718) ───────
+export {
+  KeyboardChain,
+  KeyboardChainContext,
+  KeyboardChainScope,
+  KeyboardDoneBar,
+  readingOrder,
+  useKeyboardChain,
+} from "./keyboard";
+export type {
+  ChainBox,
+  ChainEntry,
+  KeyboardChainBinding,
+  KeyboardChainOptions,
+  KeyboardDoneBarProps,
+} from "./keyboard";
+
 // ── Error Summary (DG-VAL-02..04) ─────────────────────────────
 export {
   ErrorSummary,

package/src/keyboard/KeyboardDoneBar.native.tsx

@@ -0,0 +1,38 @@
+import { hairline } from "@multiplatform.one/theme";
+import { InputAccessoryView, Keyboard } from "react-native";
+import { XStack, useTheme } from "tamagui";
+import { Button } from "../Button";
+import type { KeyboardDoneBarProps } from "./types";
+
+const DONE_LABEL = "Done";
+
+/**
+ * The bar iOS shows above the keyboard for an MPO text field: one Done that
+ * closes the keyboard, which iOS otherwise gives no way to do for most
+ * keyboard types.
+ */
+export function KeyboardDoneBar({ nativeID }: KeyboardDoneBarProps) {
+  const theme = useTheme();
+  return (
+    <InputAccessoryView nativeID={nativeID} backgroundColor={theme.color2?.val}>
+      <XStack
+        justifyContent="flex-end"
+        alignItems="center"
+        paddingHorizontal="$2"
+        paddingVertical="$1"
+        backgroundColor="$color2"
+        borderColor="$borderColor"
+        {...hairline.top}
+      >
+        <Button
+          chromeless
+          accessibilityLabel={DONE_LABEL}
+          testID="keyboard-done"
+          onPress={() => Keyboard.dismiss()}
+        >
+          {DONE_LABEL}
+        </Button>
+      </XStack>
+    </InputAccessoryView>
+  );
+}

package/src/keyboard/KeyboardDoneBar.tsx

@@ -0,0 +1,6 @@
+import type { KeyboardDoneBarProps } from "./types";
+
+/** iOS only: the web and Android keyboards bring their own close control. */
+export function KeyboardDoneBar(_props: KeyboardDoneBarProps) {
+  return null;
+}

package/src/keyboard/chain.spec.ts

@@ -0,0 +1,98 @@
+import { describe, expect, it, vi } from "vitest";
+import { KeyboardChain, readingOrder, type ChainBox } from "./chain";
+
+const box = (id: string, x: number, y: number, width = 100, height = 40): ChainBox => ({
+  id,
+  x,
+  y,
+  width,
+  height,
+});
+
+describe("readingOrder (FZ-7718)", () => {
+  it("runs top to bottom", () => {
+    expect(readingOrder([box("email", 0, 120), box("name", 0, 40)])).toEqual(["name", "email"]);
+  });
+
+  it("runs left to right across a row, even when the row's fields sit a little off", () => {
+    expect(readingOrder([box("last", 200, 42), box("first", 0, 40), box("city", 0, 120)])).toEqual([
+      "first",
+      "last",
+      "city",
+    ]);
+  });
+
+  it("drops fields that have no size, such as a hidden tab's", () => {
+    expect(readingOrder([box("hidden", 0, 0, 0, 0), box("name", 0, 40)])).toEqual(["name"]);
+  });
+});
+
+const settle = () => new Promise((resolve) => setTimeout(resolve, 0));
+
+function field(chain: KeyboardChain, at: ChainBox) {
+  const focus = vi.fn();
+  chain.register({ id: at.id, focus, measure: (done) => done(at) });
+  return focus;
+}
+
+describe("KeyboardChain (FZ-7718)", () => {
+  it("moves Return to the next field on screen", async () => {
+    const chain = new KeyboardChain();
+    field(chain, box("name", 0, 40));
+    const email = field(chain, box("email", 0, 120));
+    const last = vi.fn();
+    await settle();
+    chain.advance("name", last);
+    expect(email).toHaveBeenCalledOnce();
+    expect(last).not.toHaveBeenCalled();
+  });
+
+  it("calls onLast from the last field", async () => {
+    const chain = new KeyboardChain();
+    const name = field(chain, box("name", 0, 40));
+    field(chain, box("email", 0, 120));
+    const last = vi.fn();
+    await settle();
+    chain.advance("email", last);
+    expect(last).toHaveBeenCalledOnce();
+    expect(name).not.toHaveBeenCalled();
+  });
+
+  it("knows which field is last once measured, and tells subscribers", async () => {
+    const chain = new KeyboardChain();
+    const listener = vi.fn();
+    chain.subscribe(listener);
+    field(chain, box("email", 0, 120));
+    field(chain, box("name", 0, 40));
+    await settle();
+    expect(listener).toHaveBeenCalled();
+    expect(chain.isLast("name")).toBe(false);
+    expect(chain.isLast("email")).toBe(true);
+  });
+
+  it("forgets a field that unmounts", async () => {
+    const chain = new KeyboardChain();
+    field(chain, box("name", 0, 40));
+    const unregister = chain.register({
+      id: "email",
+      focus: vi.fn(),
+      measure: (done) => done(box("email", 0, 120)),
+    });
+    unregister();
+    const last = vi.fn();
+    await settle();
+    chain.advance("name", last);
+    expect(last).toHaveBeenCalledOnce();
+  });
+});
+
+describe("KeyboardChain before layout (FZ-7718)", () => {
+  it("measures first when Return comes before the chain has placed the field", async () => {
+    const chain = new KeyboardChain();
+    field(chain, box("name", 0, 40));
+    const email = field(chain, box("email", 0, 120));
+    chain.advance("name", vi.fn());
+    await settle();
+    expect(email).toHaveBeenCalledOnce();
+  });
+});

package/src/keyboard/chain.tsx

@@ -0,0 +1,115 @@
+/**
+ * The return-key chain (FZ-7718): on a phone, Return in a text field moves to
+ * the next field on screen and submits from the last one.
+ *
+ * Fields register with the nearest scope (a Form, a KeyboardAvoidingWrapper,
+ * or the app-wide default). Order is where the fields sit on screen, measured
+ * rather than mounted, so a field revealed later still slots into its row.
+ */
+
+import { type ReactNode, createContext, useState } from "react";
+
+export interface ChainBox {
+  id: string;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+export interface ChainEntry {
+  id: string;
+  focus: () => void;
+  measure: (done: (box: ChainBox | undefined) => void) => void;
+}
+
+/** Top-to-bottom, then left-to-right for fields that share a row. */
+export function readingOrder(boxes: ChainBox[]): string[] {
+  return boxes
+    .filter((box) => box.width > 0 || box.height > 0)
+    .sort((a, b) => {
+      const sameRow = Math.abs(a.y - b.y) < Math.min(a.height, b.height) / 2;
+      return sameRow ? a.x - b.x : a.y - b.y;
+    })
+    .map((box) => box.id);
+}
+
+export class KeyboardChain {
+  private entries = new Map<string, ChainEntry>();
+  private order: string[] = [];
+  private listeners = new Set<() => void>();
+  private pending = false;
+
+  subscribe = (listener: () => void) => {
+    this.listeners.add(listener);
+    return () => {
+      this.listeners.delete(listener);
+    };
+  };
+
+  register(entry: ChainEntry) {
+    this.entries.set(entry.id, entry);
+    this.invalidate();
+    return () => {
+      this.entries.delete(entry.id);
+      this.invalidate();
+    };
+  }
+
+  /** A field that has not been measured yet reads as last, so it never claims "next" falsely. */
+  isLast(id: string) {
+    const at = this.order.indexOf(id);
+    return at === -1 || at === this.order.length - 1;
+  }
+
+  invalidate() {
+    if (this.pending) return;
+    this.pending = true;
+    void Promise.resolve().then(async () => {
+      this.pending = false;
+      await this.refresh();
+    });
+  }
+
+  /**
+   * Focus the field after `id`, or run onLast from the last one. Uses the
+   * order measured at layout, and measures first only for a field it has not
+   * placed yet.
+   */
+  advance(id: string, onLast: () => void) {
+    if (!this.order.includes(id)) {
+      void this.refresh().then((order) => this.step(order, id, onLast));
+      return;
+    }
+    this.step(this.order, id, onLast);
+  }
+
+  private step(order: string[], id: string, onLast: () => void) {
+    const next = order[order.indexOf(id) + 1];
+    const entry = order.includes(id) && next ? this.entries.get(next) : undefined;
+    if (entry) entry.focus();
+    else onLast();
+  }
+
+  private async refresh() {
+    const boxes = await Promise.all(
+      [...this.entries.values()].map(
+        (entry) => new Promise<ChainBox | undefined>((resolve) => entry.measure(resolve)),
+      ),
+    );
+    const order = readingOrder(boxes.filter((box): box is ChainBox => Boolean(box)));
+    const changed =
+      order.length !== this.order.length || order.some((id, i) => id !== this.order[i]);
+    this.order = order;
+    if (changed) for (const listener of this.listeners) listener();
+    return order;
+  }
+}
+
+export const KeyboardChainContext = createContext<KeyboardChain>(new KeyboardChain());
+
+/** Starts a fresh return-key chain for the fields inside it. */
+export function KeyboardChainScope({ children }: { children?: ReactNode }) {
+  const [chain] = useState(() => new KeyboardChain());
+  return <KeyboardChainContext.Provider value={chain}>{children}</KeyboardChainContext.Provider>;
+}

package/src/keyboard/index.ts

@@ -0,0 +1,5 @@
+export { KeyboardChain, KeyboardChainContext, KeyboardChainScope, readingOrder } from "./chain";
+export type { ChainBox, ChainEntry } from "./chain";
+export { KeyboardDoneBar } from "./KeyboardDoneBar";
+export { useKeyboardChain } from "./useKeyboardChain";
+export type { KeyboardChainBinding, KeyboardChainOptions, KeyboardDoneBarProps } from "./types";

package/src/keyboard/types.ts

@@ -0,0 +1,21 @@
+import type { ReactNode, RefObject } from "react";
+
+export interface KeyboardChainOptions {
+  inputRef: RefObject<unknown>;
+  /** Off for disabled and read-only fields. */
+  enabled?: boolean;
+  /** Multiline fields keep Return for newlines and only get the Done bar. */
+  multiline?: boolean;
+  /** Runs when Return is pressed in the last field (a form's submit). */
+  onSubmitLast?: () => void;
+  onSubmitEditing?: (...args: any[]) => void;
+}
+
+export interface KeyboardChainBinding {
+  inputProps: Record<string, unknown>;
+  accessory: ReactNode;
+}
+
+export interface KeyboardDoneBarProps {
+  nativeID: string;
+}