react-native-terra-ui 0.13.6 → 0.13.8

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Changelog
 
+## [0.13.8](https://github.com/earthlin9/react-native-terra-ui/compare/v0.13.7...v0.13.8) (2026-10-05)
+
+### Features
+
+* **ui:** [input] add focus border and glow props, and a search cancel button ([c502519](https://github.com/earthlin9/react-native-terra-ui/commit/c50251916dc80669fc2a55933babfb59a1842e0c))
+
+### Bug Fixes
+
+* **ui:** [input] call onCancelPress after blur so a cleared query sticks ([2e42186](https://github.com/earthlin9/react-native-terra-ui/commit/2e42186bfcade644710adb89e5efe7a4525679a1))
+* **ui:** [screen] scroll focused inputs above the keyboard on iOS ([8b85d47](https://github.com/earthlin9/react-native-terra-ui/commit/8b85d4795d11fd49410a4c1087c3a3ddc4494f0a))
+* **ui:** [theme] widen light text hierarchy within 4.5:1 contrast ([10f7143](https://github.com/earthlin9/react-native-terra-ui/commit/10f714331fb2ba0d4784dffbd4d6e8bcf13eb47b))
+
+## [0.13.7](https://github.com/earthlin9/react-native-terra-ui/compare/v0.13.6...v0.13.7) (2026-10-04)
+
+### Features
+
+* **ui:** [theme] add ink palette and move dark theme neutrals onto it ([de39054](https://github.com/earthlin9/react-native-terra-ui/commit/de39054c1b3b9f0c71d2ac205d22299a30f7e7c6))
+
 ## [0.13.6](https://github.com/earthlin9/react-native-terra-ui/compare/v0.13.5...v0.13.6) (2026-10-04)
 
 ### Features

package/lib/module/components/input/hooks/use-focus-state.js

@@ -0,0 +1,25 @@
+"use strict";
+
+import { useCallback, useState } from "react";
+/**
+ * Track whether a `TextInput` is focused while still forwarding the caller's
+ * own `onFocus` / `onBlur`. Shared by the field (for its focus ring) and by
+ * variants that show extra controls while focused.
+ */
+export function useFocusState(onFocus, onBlur) {
+  const [isFocused, setIsFocused] = useState(false);
+  const handleFocus = useCallback(event => {
+    setIsFocused(true);
+    onFocus?.(event);
+  }, [onFocus]);
+  const handleBlur = useCallback(event => {
+    setIsFocused(false);
+    onBlur?.(event);
+  }, [onBlur]);
+  return {
+    isFocused,
+    handleFocus,
+    handleBlur
+  };
+}
+//# sourceMappingURL=use-focus-state.js.map

package/lib/module/components/input/hooks/use-focus-state.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useCallback","useState","useFocusState","onFocus","onBlur","isFocused","setIsFocused","handleFocus","event","handleBlur"],"sourceRoot":"../../../../../src","sources":["components/input/hooks/use-focus-state.ts"],"mappings":";;AAAA,SAASA,WAAW,EAAEC,QAAQ,QAAQ,OAAO;AAM7C;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,aAAaA,CAACC,OAAsB,EAAEC,MAAoB,EAAE;EAC1E,MAAM,CAACC,SAAS,EAAEC,YAAY,CAAC,GAAGL,QAAQ,CAAC,KAAK,CAAC;EAEjD,MAAMM,WAAW,GAAGP,WAAW,CAC5BQ,KAAK,IAAK;IACTF,YAAY,CAAC,IAAI,CAAC;IAClBH,OAAO,GAAGK,KAAK,CAAC;EAClB,CAAC,EACD,CAACL,OAAO,CACV,CAAC;EAED,MAAMM,UAAU,GAAGT,WAAW,CAC3BQ,KAAK,IAAK;IACTF,YAAY,CAAC,KAAK,CAAC;IACnBF,MAAM,GAAGI,KAAK,CAAC;EACjB,CAAC,EACD,CAACJ,MAAM,CACT,CAAC;EAED,OAAO;IAAEC,SAAS;IAAEE,WAAW;IAAEE;EAAW,CAAC;AAC/C","ignoreList":[]}

package/lib/module/components/input/parts/InputField.js

@@ -2,11 +2,19 @@
 
 import { View } from "react-native-unistyles/components/native/View";
 import { TextInput } from "react-native-unistyles/components/native/TextInput";
-import { forwardRef, useCallback, useState } from "react";
+import { forwardRef } from "react";
 import { StyleSheet, useUnistyles } from "react-native-unistyles";
 import { resolveThemeColor } from "../../../utils/resolve-theme-color.js";
 import { FONT_WEIGHT_VALUE, SYSTEM_FONT } from "../../../utils/typography.js";
+import { useFocusState } from "../hooks/use-focus-state.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Container height per size, in dp. Sibling controls sized to match read from here. */
+export const FIELD_HEIGHT = {
+  sm: 36,
+  md: 44,
+  lg: 52
+};
+
 /** Typographic role of the text, per size. */
 const TEXT_VARIANT = {
   sm: "subheadline",
@@ -23,6 +31,9 @@ export const InputField = /*#__PURE__*/forwardRef(function InputField({
   size = "md",
   isDisabled = false,
   isInvalid = false,
+  focusBorderColor,
+  focusBorderWidth,
+  hasFocusGlow = false,
   leading,
   trailing,
   background = "surface.sunken",
@@ -32,31 +43,27 @@ export const InputField = /*#__PURE__*/forwardRef(function InputField({
   onBlur,
   ...rest
 }, ref) {
-  // The focus ring is a style decision, so it stays a variant; only the
-  // placeholder colour has to leave the stylesheet, because `TextInput` takes it
-  // as a prop rather than as a style.
-  const [isFocused, setIsFocused] = useState(false);
+  const {
+    isFocused,
+    handleFocus,
+    handleBlur
+  } = useFocusState(onFocus, onBlur);
+  const showsFocus = isFocused && !isDisabled;
+
+  // The placeholder colour has to leave the stylesheet because `TextInput` takes
+  // it as a prop rather than as a style.
   const {
     theme
   } = useUnistyles();
-  const handleFocus = useCallback(event => {
-    setIsFocused(true);
-    onFocus?.(event);
-  }, [onFocus]);
-  const handleBlur = useCallback(event => {
-    setIsFocused(false);
-    onBlur?.(event);
-  }, [onBlur]);
   const _styles = styles;
   {
     const styles = _styles.useVariants({
       size,
       disabled: isDisabled,
-      invalid: isInvalid,
-      focused: isFocused && !isDisabled
+      invalid: isInvalid
     });
     return /*#__PURE__*/_jsxs(View, {
-      style: [styles.container, styles.fill(background, radius), style],
+      style: [styles.container, styles.fill(background, radius), showsFocus && styles.focus(focusBorderColor, focusBorderWidth, hasFocusGlow, isInvalid), style],
       children: [leading, /*#__PURE__*/_jsx(TextInput, {
         ref: ref,
         editable: !isDisabled,
@@ -90,27 +97,21 @@ const styles = StyleSheet.create(theme => {
       variants: {
         size: {
           sm: {
-            height: 36,
-            paddingHorizontal: theme.spacing["4"],
+            height: FIELD_HEIGHT.sm,
+            paddingHorizontal: theme.spacing["3"],
             gap: 6
           },
           md: {
-            height: 44,
-            paddingHorizontal: theme.spacing["4"],
+            height: FIELD_HEIGHT.md,
+            paddingHorizontal: theme.spacing["3"],
             gap: 6
           },
           lg: {
-            height: 52,
+            height: FIELD_HEIGHT.lg,
             paddingHorizontal: theme.spacing["4"],
             gap: 6
           }
         },
-        focused: {
-          true: {
-            borderColor: theme.color["accent.border"]
-          },
-          false: {}
-        },
         invalid: {
           true: {
             borderColor: theme.color["danger.text"]
@@ -126,6 +127,31 @@ const styles = StyleSheet.create(theme => {
       },
       uni__dependencies: [0, 4]
     },
+    // Only the keys that apply are set, so an unset option leaves the resting
+    // border alone rather than overriding it with `undefined`. An invalid field
+    // keeps its danger border and skips the glow, so the error stays the loudest
+    // signal; only the width still follows focus.
+    focus: (color, width, hasGlow, isInvalid) => {
+      const focusColor = resolveThemeColor(color ?? "border.default", theme);
+      return {
+        ...(width !== undefined && {
+          borderWidth: width
+        }),
+        ...(color && !isInvalid && {
+          borderColor: focusColor
+        }),
+        ...(hasGlow && !isInvalid && {
+          boxShadow: [{
+            offsetX: 0,
+            offsetY: 0,
+            blurRadius: 4,
+            spreadDistance: 1,
+            color: focusColor
+          }]
+        }),
+        uni__dependencies: [0]
+      };
+    },
     // `background` is an open `ColorToken` and `radius` an eight-step scale, so
     // both resolve in a dynamic function rather than enumerating as variants.
     fill: (background, radius) => ({
@@ -155,10 +181,6 @@ const styles = StyleSheet.create(theme => {
             fontSize: theme.typography.variants[TEXT_VARIANT.lg].fontSize
           }
         },
-        focused: {
-          true: {},
-          false: {}
-        },
         invalid: {
           true: {},
           false: {}

package/lib/module/components/input/parts/InputField.js.map

@@ -1 +1 @@
-{"version":3,"names":["forwardRef","useCallback","useState","StyleSheet","useUnistyles","resolveThemeColor","FONT_WEIGHT_VALUE","SYSTEM_FONT","jsx","_jsx","jsxs","_jsxs","TEXT_VARIANT","sm","md","lg","InputField","size","isDisabled","isInvalid","leading","trailing","background","radius","style","onFocus","onBlur","rest","ref","isFocused","setIsFocused","theme","handleFocus","event","handleBlur","_styles","styles","useVariants","disabled","invalid","focused","View","container","fill","children","TextInput","editable","placeholderTextColor","color","input","maxFontSizeMultiplier","typography","variants","create","bodyWeight","fontWeight","bodyFont","fonts","isSystemBodyFont","flexDirection","alignItems","borderWidth","hairlineWidth","borderColor","height","paddingHorizontal","spacing","gap","true","false","opacity","uni__dependencies","backgroundColor","borderRadius","flex","paddingVertical","fontFamily","undefined","fontSize"],"sourceRoot":"../../../../../src","sources":["components/input/parts/InputField.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["forwardRef","StyleSheet","useUnistyles","resolveThemeColor","FONT_WEIGHT_VALUE","SYSTEM_FONT","useFocusState","jsx","_jsx","jsxs","_jsxs","FIELD_HEIGHT","sm","md","lg","TEXT_VARIANT","InputField","size","isDisabled","isInvalid","focusBorderColor","focusBorderWidth","hasFocusGlow","leading","trailing","background","radius","style","onFocus","onBlur","rest","ref","isFocused","handleFocus","handleBlur","showsFocus","theme","_styles","styles","useVariants","disabled","invalid","View","container","fill","focus","children","TextInput","editable","placeholderTextColor","color","input","maxFontSizeMultiplier","typography","variants","create","bodyWeight","fontWeight","bodyFont","fonts","isSystemBodyFont","flexDirection","alignItems","borderWidth","hairlineWidth","borderColor","height","paddingHorizontal","spacing","gap","true","false","opacity","uni__dependencies","width","hasGlow","focusColor","undefined","boxShadow","offsetX","offsetY","blurRadius","spreadDistance","backgroundColor","borderRadius","flex","paddingVertical","fontFamily","fontSize"],"sourceRoot":"../../../../../src","sources":["components/input/parts/InputField.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/input/variants/SearchInput/SearchCancelButton.js

@@ -0,0 +1,93 @@
+"use strict";
+
+import { useEffect } from "react";
+import Animated, { Easing, interpolate, useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated";
+import { StyleSheet, useUnistyles } from "react-native-unistyles";
+import { resolveThemeColor } from "../../../../utils/resolve-theme-color.js";
+import { Icon } from "../../../icon/index.js";
+import { PressableOpacity } from "../../../pressable/index.js";
+import { FIELD_HEIGHT } from "../../parts/InputField.js";
+import { ICON_SIZE } from "./utils.js";
+
+/** How long the button takes to slide in and the field to make room, in ms. */
+import { jsx as _jsx } from "react/jsx-runtime";
+const TRANSITION_MS = 250;
+
+/** Scale the button grows from, so it pops in rather than only fading. */
+const START_SCALE = 0.6;
+
+/** The x runs a touch larger than the field's glyphs; it has a circle to itself. */
+const GLYPH_EXTRA = 2;
+/**
+ * A round button the height of the field, in a slot that opens and closes
+ * beside it. The slot stays mounted so it can animate out; while collapsed it
+ * is hidden from touch and from screen readers.
+ */
+export function SearchCancelButton({
+  isVisible,
+  size,
+  background,
+  accessibilityLabel,
+  onPress
+}) {
+  // One progress value drives the slot's width, so the field (flex: 1) gives
+  // up its room frame by frame instead of jumping when the button appears.
+  const {
+    theme
+  } = useUnistyles();
+  const progress = useSharedValue(0);
+  const diameter = FIELD_HEIGHT[size];
+  // The gap lives inside the slot, so it opens with the button and the field
+  // sits flush to the edge when the button is gone.
+  const slotWidth = diameter + theme.spacing["2"];
+  useEffect(() => {
+    progress.value = withTiming(isVisible ? 1 : 0, {
+      duration: TRANSITION_MS,
+      easing: Easing.bezier(0.25, 0.1, 0.25, 1)
+    });
+  }, [isVisible, progress]);
+  const slotStyle = useAnimatedStyle(() => ({
+    width: progress.value * slotWidth,
+    opacity: progress.value,
+    transform: [{
+      scale: interpolate(progress.value, [0, 1], [START_SCALE, 1])
+    }]
+  }));
+  return /*#__PURE__*/_jsx(Animated.View, {
+    style: [styles.slot(isVisible), slotStyle],
+    accessibilityElementsHidden: !isVisible,
+    importantForAccessibility: isVisible ? "auto" : "no-hide-descendants",
+    children: /*#__PURE__*/_jsx(PressableOpacity, {
+      accessibilityLabel: accessibilityLabel,
+      accessibilityRole: "button",
+      onPress: onPress,
+      style: styles.button(diameter, background),
+      children: /*#__PURE__*/_jsx(Icon, {
+        name: "terra.x",
+        size: ICON_SIZE[size] + GLYPH_EXTRA,
+        color: "text.primary"
+      })
+    })
+  });
+}
+const styles = StyleSheet.create(theme => ({
+  slot: isVisible => ({
+    flexDirection: "row",
+    justifyContent: "flex-end",
+    overflow: "hidden",
+    pointerEvents: isVisible ? "auto" : "none"
+  }),
+  // A circle the height of the field, filled and edged to match it.
+  button: (diameter, background) => ({
+    width: diameter,
+    height: diameter,
+    borderRadius: diameter / 2,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: resolveThemeColor(background, theme),
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: theme.color["border.subtle"],
+    uni__dependencies: [0]
+  })
+}));
+//# sourceMappingURL=SearchCancelButton.js.map

package/lib/module/components/input/variants/SearchInput/SearchCancelButton.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useEffect","Animated","Easing","interpolate","useAnimatedStyle","useSharedValue","withTiming","StyleSheet","useUnistyles","resolveThemeColor","Icon","PressableOpacity","FIELD_HEIGHT","ICON_SIZE","jsx","_jsx","TRANSITION_MS","START_SCALE","GLYPH_EXTRA","SearchCancelButton","isVisible","size","background","accessibilityLabel","onPress","theme","progress","diameter","slotWidth","spacing","value","duration","easing","bezier","slotStyle","width","opacity","transform","scale","View","style","styles","slot","accessibilityElementsHidden","importantForAccessibility","children","accessibilityRole","button","name","color","create","flexDirection","justifyContent","overflow","pointerEvents","height","borderRadius","alignItems","backgroundColor","borderWidth","hairlineWidth","borderColor","uni__dependencies"],"sourceRoot":"../../../../../../src","sources":["components/input/variants/SearchInput/SearchCancelButton.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/input/variants/SearchInput/SearchClearButton.js

@@ -0,0 +1,52 @@
+"use strict";
+
+import { Pressable } from "react-native-unistyles/components/native/Pressable";
+import { StyleSheet } from "react-native-unistyles";
+import { Icon } from "../../../icon/index.js";
+import { ICON_SIZE } from "./utils.js";
+
+/** Touch expansion around the button, in dp — it is smaller than a cell. */
+import { jsx as _jsx } from "react/jsx-runtime";
+const HIT_SLOP = 8;
+
+/** The x as a share of its disc, so it reads inside the circle. */
+const GLYPH_RATIO = 0.6;
+
+/** Heavier than the icon default so the small glyph stays legible on the disc. */
+const GLYPH_STROKE_WIDTH = 3.3;
+/**
+ * A solid disc with an x, like iOS's `xmark.circle.fill`. Sized to the field's
+ * glyphs so it sits in the trailing slot without changing the row height.
+ */
+export function SearchClearButton({
+  size,
+  accessibilityLabel,
+  onPress
+}) {
+  const diameter = ICON_SIZE[size];
+  return /*#__PURE__*/_jsx(Pressable, {
+    accessibilityLabel: accessibilityLabel,
+    accessibilityRole: "button",
+    hitSlop: HIT_SLOP,
+    onPress: onPress,
+    style: styles.disc(diameter),
+    children: /*#__PURE__*/_jsx(Icon, {
+      name: "terra.x",
+      size: Math.round(diameter * GLYPH_RATIO),
+      color: "text.inverse",
+      strokeWidth: GLYPH_STROKE_WIDTH
+    })
+  });
+}
+const styles = StyleSheet.create(theme => ({
+  disc: diameter => ({
+    width: diameter,
+    height: diameter,
+    borderRadius: diameter / 2,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: theme.color["text.tertiary"],
+    uni__dependencies: [0]
+  })
+}));
+//# sourceMappingURL=SearchClearButton.js.map

package/lib/module/components/input/variants/SearchInput/SearchClearButton.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["StyleSheet","Icon","ICON_SIZE","jsx","_jsx","HIT_SLOP","GLYPH_RATIO","GLYPH_STROKE_WIDTH","SearchClearButton","size","accessibilityLabel","onPress","diameter","Pressable","accessibilityRole","hitSlop","style","styles","disc","children","name","Math","round","color","strokeWidth","create","theme","width","height","borderRadius","alignItems","justifyContent","backgroundColor","uni__dependencies"],"sourceRoot":"../../../../../../src","sources":["components/input/variants/SearchInput/SearchClearButton.tsx"],"mappings":";;;AAEA,SAASA,UAAU,QAAQ,wBAAwB;AAEnD,SAASC,IAAI;AAEb,SAASC,SAAS;;AAElB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AACA,MAAMC,QAAQ,GAAG,CAAC;;AAElB;AACA,MAAMC,WAAW,GAAG,GAAG;;AAEvB;AACA,MAAMC,kBAAkB,GAAG,GAAG;AAQ9B;AACA;AACA;AACA;AACA,OAAO,SAASC,iBAAiBA,CAAC;EAAEC,IAAI;EAAEC,kBAAkB;EAAEC;AAAgC,CAAC,EAAE;EAC/F,MAAMC,QAAQ,GAAGV,SAAS,CAACO,IAAI,CAAC;EAEhC,oBACEL,IAAA,CAACS,SAAS;IACRH,kBAAkB,EAAEA,kBAAmB;IACvCI,iBAAiB,EAAC,QAAQ;IAC1BC,OAAO,EAAEV,QAAS;IAClBM,OAAO,EAAEA,OAAQ;IACjBK,KAAK,EAAEC,MAAM,CAACC,IAAI,CAACN,QAAQ,CAAE;IAAAO,QAAA,eAE7Bf,IAAA,CAACH,IAAI;MACHmB,IAAI,EAAC,SAAS;MACdX,IAAI,EAAEY,IAAI,CAACC,KAAK,CAACV,QAAQ,GAAGN,WAAW,CAAE;MACzCiB,KAAK,EAAC,cAAc;MACpBC,WAAW,EAAEjB;IAAmB,CACjC;EAAC,CACO,CAAC;AAEhB;AAEA,MAAMU,MAAM,GAAGjB,UAAU,CAACyB,MAAM,CAAEC,KAAK,KAAM;EAC3CR,IAAI,EAAGN,QAAgB,KAAM;IAC3Be,KAAK,EAAEf,QAAQ;IACfgB,MAAM,EAAEhB,QAAQ;IAChBiB,YAAY,EAAEjB,QAAQ,GAAG,CAAC;IAC1BkB,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE,QAAQ;IACxBC,eAAe,EAAEN,KAAK,CAACH,KAAK,CAAC,eAAe,CAAC;IAAAU,iBAAA;EAC/C,CAAC;AACH,CAAC,CAAC,CAAC","ignoreList":[]}

package/lib/module/components/input/variants/SearchInput/index.js

@@ -1,28 +1,25 @@
 "use strict";
 
-import { Pressable } from "react-native-unistyles/components/native/Pressable";
-import { forwardRef, useCallback, useState } from "react";
+import { View } from "react-native-unistyles/components/native/View";
+import { forwardRef, useCallback, useImperativeHandle, useRef, useState } from "react";
 import { StyleSheet } from "react-native-unistyles";
 import { Icon } from "../../../icon/index.js";
+import { useFocusState } from "../../hooks/use-focus-state.js";
 import { InputField } from "../../parts/InputField.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-/** Glyph size per field size, in dp. */
-const ICON_SIZE = {
-  sm: 16,
-  md: 18,
-  lg: 20
-};
-
-/** Touch expansion around the clear button, in dp — it is smaller than a cell. */
-const CLEAR_HIT_SLOP = 8;
+import { SearchCancelButton } from "./SearchCancelButton.js";
+import { SearchClearButton } from "./SearchClearButton.js";
+import { ICON_SIZE } from "./utils.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * A search field: a leading magnifier, and a clear button that appears as soon
  * as there is text. Controlled through `value` or left to manage its own, and
- * it defaults to the search return key so the keyboard reads correctly.
+ * it defaults to the search return key so the keyboard reads correctly. With
+ * `hasCancelButton`, a round cancel button slides in beside it while focused.
  *
  * @example
  * ```tsx
  * <Input.Search value={query} onChangeText={setQuery} onSubmitEditing={run} />
+ * <Input.Search hasCancelButton onCancelPress={() => setQuery("")} />
  * ```
  */
 export const SearchInput = /*#__PURE__*/forwardRef(function SearchInput({
@@ -32,14 +29,27 @@ export const SearchInput = /*#__PURE__*/forwardRef(function SearchInput({
   onClear,
   isClearable = true,
   clearAccessibilityLabel = "Clear search",
+  hasCancelButton = false,
+  onCancelPress,
+  cancelAccessibilityLabel = "Cancel search",
   placeholder = "Search",
   isDisabled = false,
   size = "md",
   radius = "full",
+  background = "surface.sunken",
+  hasFocusGlow = true,
   returnKeyType = "search",
   clearButtonMode = "never",
+  style,
+  onFocus,
+  onBlur,
   ...rest
 }, ref) {
+  // The cancel button needs the native input to blur it, and the caller still
+  // gets the same instance through the forwarded ref.
+  const inputRef = useRef(null);
+  useImperativeHandle(ref, () => inputRef.current);
+
   // The clear button only exists while there is text, so an uncontrolled field
   // still has to be tracked. That state also has to drive the native input:
   // resetting it alone would hide the button while the text stayed on screen,
@@ -48,6 +58,21 @@ export const SearchInput = /*#__PURE__*/forwardRef(function SearchInput({
   const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue ?? "");
   const isControlled = value !== undefined;
   const text = isControlled ? value : uncontrolledValue;
+  // Ending the edit makes iOS commit any pending autocorrect suggestion as one
+  // last `onChangeText`. `onCancelPress` waits for the blur event, which comes
+  // after it, so a query cleared there is not overwritten by the late commit.
+  const isCancellingRef = useRef(false);
+  const handleBlurAfterCancel = useCallback(event => {
+    onBlur?.(event);
+    if (!isCancellingRef.current) return;
+    isCancellingRef.current = false;
+    onCancelPress?.();
+  }, [onBlur, onCancelPress]);
+  const {
+    isFocused,
+    handleFocus,
+    handleBlur
+  } = useFocusState(onFocus, handleBlurAfterCancel);
   const handleChangeText = useCallback(next => {
     if (!isControlled) setUncontrolledValue(next);
     onChangeText?.(next);
@@ -57,12 +82,25 @@ export const SearchInput = /*#__PURE__*/forwardRef(function SearchInput({
     onChangeText?.("");
     onClear?.();
   }, [isControlled, onChangeText, onClear]);
-  const hasText = text.length > 0;
-  return /*#__PURE__*/_jsx(InputField, {
-    ref: ref,
+  const handleCancel = useCallback(() => {
+    const input = inputRef.current;
+    // No blur event will come for a field that is not focused, so call through.
+    if (!input?.isFocused()) {
+      onCancelPress?.();
+      return;
+    }
+    isCancellingRef.current = true;
+    input.blur();
+  }, [onCancelPress]);
+  const showsClear = isClearable && text.length > 0 && !isDisabled;
+  const showsCancel = isFocused && !isDisabled;
+  const field = /*#__PURE__*/_jsx(InputField, {
+    ref: inputRef,
     size: size,
     radius: radius,
+    background: background,
     isDisabled: isDisabled,
+    hasFocusGlow: hasFocusGlow,
     placeholder: placeholder,
     returnKeyType: returnKeyType
     // iOS's native clear button would sit beside ours; ours is the
@@ -71,30 +109,47 @@ export const SearchInput = /*#__PURE__*/forwardRef(function SearchInput({
     clearButtonMode: clearButtonMode,
     value: text,
     onChangeText: handleChangeText,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
     leading: /*#__PURE__*/_jsx(Icon, {
       name: "terra.search",
       size: ICON_SIZE[size],
       color: "text.tertiary"
     }),
-    trailing: isClearable && hasText && !isDisabled ? /*#__PURE__*/_jsx(Pressable, {
+    trailing: showsClear ? /*#__PURE__*/_jsx(SearchClearButton, {
+      size: size,
       accessibilityLabel: clearAccessibilityLabel,
-      accessibilityRole: "button",
-      hitSlop: CLEAR_HIT_SLOP,
-      onPress: handleClear,
-      style: styles.clear,
-      children: /*#__PURE__*/_jsx(Icon, {
-        name: "terra.x",
-        size: ICON_SIZE[size],
-        color: "text.tertiary"
-      })
-    }) : undefined,
+      onPress: handleClear
+    }) : undefined
+    // With a cancel button the row is the outer element, so `style` moves there.
+    ,
+    style: hasCancelButton ? undefined : style,
     ...rest
   });
+
+  // Without a cancel button the field renders bare, so its layout is unchanged.
+  if (!hasCancelButton) return field;
+  return /*#__PURE__*/_jsxs(View, {
+    style: [styles.row, style],
+    children: [/*#__PURE__*/_jsx(View, {
+      style: styles.fieldSlot,
+      children: field
+    }), /*#__PURE__*/_jsx(SearchCancelButton, {
+      isVisible: showsCancel,
+      size: size,
+      background: background,
+      accessibilityLabel: cancelAccessibilityLabel,
+      onPress: handleCancel
+    })]
+  });
 });
 const styles = StyleSheet.create(() => ({
-  clear: {
-    alignItems: "center",
-    justifyContent: "center"
+  row: {
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  fieldSlot: {
+    flex: 1
   }
 }));
 //# sourceMappingURL=index.js.map

package/lib/module/components/input/variants/SearchInput/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["forwardRef","useCallback","useState","StyleSheet","Icon","InputField","jsx","_jsx","ICON_SIZE","sm","md","lg","CLEAR_HIT_SLOP","SearchInput","value","defaultValue","onChangeText","onClear","isClearable","clearAccessibilityLabel","placeholder","isDisabled","size","radius","returnKeyType","clearButtonMode","rest","ref","uncontrolledValue","setUncontrolledValue","isControlled","undefined","text","handleChangeText","next","handleClear","hasText","length","leading","name","color","trailing","Pressable","accessibilityLabel","accessibilityRole","hitSlop","onPress","style","styles","clear","children","create","alignItems","justifyContent"],"sourceRoot":"../../../../../../src","sources":["components/input/variants/SearchInput/index.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["forwardRef","useCallback","useImperativeHandle","useRef","useState","StyleSheet","Icon","useFocusState","InputField","SearchCancelButton","SearchClearButton","ICON_SIZE","jsx","_jsx","jsxs","_jsxs","SearchInput","value","defaultValue","onChangeText","onClear","isClearable","clearAccessibilityLabel","hasCancelButton","onCancelPress","cancelAccessibilityLabel","placeholder","isDisabled","size","radius","background","hasFocusGlow","returnKeyType","clearButtonMode","style","onFocus","onBlur","rest","ref","inputRef","current","uncontrolledValue","setUncontrolledValue","isControlled","undefined","text","isCancellingRef","handleBlurAfterCancel","event","isFocused","handleFocus","handleBlur","handleChangeText","next","handleClear","handleCancel","input","blur","showsClear","length","showsCancel","field","leading","name","color","trailing","accessibilityLabel","onPress","View","styles","row","children","fieldSlot","isVisible","create","flexDirection","alignItems","flex"],"sourceRoot":"../../../../../../src","sources":["components/input/variants/SearchInput/index.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/input/variants/SearchInput/utils.js

@@ -0,0 +1,9 @@
+"use strict";
+
+/** Glyph size per field size, in dp. Shared by the magnifier and both buttons. */
+export const ICON_SIZE = {
+  sm: 14,
+  md: 16,
+  lg: 18
+};
+//# sourceMappingURL=utils.js.map

package/lib/module/components/input/variants/SearchInput/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["ICON_SIZE","sm","md","lg"],"sourceRoot":"../../../../../../src","sources":["components/input/variants/SearchInput/utils.ts"],"mappings":";;AAEA;AACA,OAAO,MAAMA,SAAoC,GAAG;EAAEC,EAAE,EAAE,EAAE;EAAEC,EAAE,EAAE,EAAE;EAAEC,EAAE,EAAE;AAAG,CAAC","ignoreList":[]}

package/lib/module/components/screen/ScreenList.js

@@ -124,7 +124,11 @@ const ScreenListBase = /*#__PURE__*/forwardRef(function ScreenList({
     */,
     contentInsetAdjustmentBehavior: platformAdjustsInsets ? "automatic" : "never",
     automaticallyAdjustContentInsets: false,
-    automaticallyAdjustsScrollIndicatorInsets: false,
+    automaticallyAdjustsScrollIndicatorInsets: false
+    // iOS: inset by the keyboard so a focused field can scroll above it.
+    ,
+    automaticallyAdjustKeyboardInsets: true,
+    keyboardShouldPersistTaps: "handled",
     contentContainerStyle: [styles.content(resolvedPadding, hasHeader, hasLargeTitle, bottomInset, extraBottomPadding, headerAccessoryHeight), contentContainerStyle],
     ListHeaderComponent: header,
     ListFooterComponent: footer,