react-native-terra-ui 0.13.7 → 0.13.9

package/src/components/input/variants/SearchInput/index.tsx

@@ -1,17 +1,15 @@
-import { type ComponentRef, forwardRef, useCallback, useState } from "react";
-import { Pressable, type TextInput } from "react-native";
+import { type ComponentRef, forwardRef, useCallback, useImperativeHandle, useRef, useState } from "react";
+import { type TextInput, View } from "react-native";
 
 import { StyleSheet } from "react-native-unistyles";
 
 import { Icon } from "../../../icon";
+import { useFocusState } from "../../hooks/use-focus-state";
 import { InputField } from "../../parts/InputField";
 import type { InputBaseProps } from "../../types";
-
-/** Glyph size per field size, in dp. */
-const ICON_SIZE = { sm: 16, md: 18, lg: 20 } as const;
-
-/** Touch expansion around the clear button, in dp — it is smaller than a cell. */
-const CLEAR_HIT_SLOP = 8;
+import { SearchCancelButton } from "./SearchCancelButton";
+import { SearchClearButton } from "./SearchClearButton";
+import { ICON_SIZE } from "./utils";
 
 export interface SearchInputProps extends Omit<InputBaseProps, "leading" | "trailing"> {
   /**
@@ -23,16 +21,30 @@ export interface SearchInputProps extends Omit<InputBaseProps, "leading" | "trai
   isClearable?: boolean;
   /** Accessible name of the clear button. Defaults to `'Clear search'`. */
   clearAccessibilityLabel?: string;
+  /**
+   * Show a round cancel button beside the field while it is focused. Pressing it
+   * blurs the field and calls `onCancelPress`. Defaults to `false`.
+   */
+  hasCancelButton?: boolean;
+  /**
+   * Called when the cancel button is pressed, after the field has blurred. The
+   * text is left alone; clear it here if cancelling should also reset the query.
+   */
+  onCancelPress?: () => void;
+  /** Accessible name of the cancel button. Defaults to `'Cancel search'`. */
+  cancelAccessibilityLabel?: string;
 }
 
 /**
  * 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 = forwardRef<ComponentRef<typeof TextInput>, SearchInputProps>(function SearchInput(
@@ -43,16 +55,29 @@ export const SearchInput = forwardRef<ComponentRef<typeof TextInput>, SearchInpu
     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<ComponentRef<typeof TextInput>>(null);
+  useImperativeHandle(ref, () => inputRef.current as ComponentRef<typeof TextInput>);
+
   // 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,
@@ -61,6 +86,20 @@ export const SearchInput = forwardRef<ComponentRef<typeof TextInput>, SearchInpu
   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<NonNullable<SearchInputProps["onBlur"]>>(
+    (event) => {
+      onBlur?.(event);
+      if (!isCancellingRef.current) return;
+      isCancellingRef.current = false;
+      onCancelPress?.();
+    },
+    [onBlur, onCancelPress]
+  );
+  const { isFocused, handleFocus, handleBlur } = useFocusState(onFocus, handleBlurAfterCancel);
 
   const handleChangeText = useCallback(
     (next: string) => {
@@ -76,14 +115,28 @@ export const SearchInput = forwardRef<ComponentRef<typeof TextInput>, SearchInpu
     onClear?.();
   }, [isControlled, onChangeText, onClear]);
 
-  const hasText = text.length > 0;
+  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]);
 
-  return (
+  const showsClear = isClearable && text.length > 0 && !isDisabled;
+  const showsCancel = isFocused && !isDisabled;
+
+  const field = (
     <InputField
-      ref={ref}
+      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
@@ -91,28 +144,43 @@ export const SearchInput = forwardRef<ComponentRef<typeof TextInput>, SearchInpu
       clearButtonMode={clearButtonMode}
       value={text}
       onChangeText={handleChangeText}
+      onFocus={handleFocus}
+      onBlur={handleBlur}
       leading={<Icon name="terra.search" size={ICON_SIZE[size]} color="text.tertiary" />}
       trailing={
-        isClearable && hasText && !isDisabled ? (
-          <Pressable
-            accessibilityLabel={clearAccessibilityLabel}
-            accessibilityRole="button"
-            hitSlop={CLEAR_HIT_SLOP}
-            onPress={handleClear}
-            style={styles.clear}
-          >
-            <Icon name="terra.x" size={ICON_SIZE[size]} color="text.tertiary" />
-          </Pressable>
+        showsClear ? (
+          <SearchClearButton size={size} accessibilityLabel={clearAccessibilityLabel} 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 (
+    <View style={[styles.row, style]}>
+      <View style={styles.fieldSlot}>{field}</View>
+      <SearchCancelButton
+        isVisible={showsCancel}
+        size={size}
+        background={background}
+        accessibilityLabel={cancelAccessibilityLabel}
+        onPress={handleCancel}
+      />
+    </View>
+  );
 });
 
 const styles = StyleSheet.create(() => ({
-  clear: {
+  row: {
+    flexDirection: "row",
     alignItems: "center",
-    justifyContent: "center",
+  },
+  fieldSlot: {
+    flex: 1,
   },
 }));

package/src/components/input/variants/SearchInput/utils.ts

@@ -0,0 +1,4 @@
+import type { InputSize } from "../../types";
+
+/** Glyph size per field size, in dp. Shared by the magnifier and both buttons. */
+export const ICON_SIZE: Record<InputSize, number> = { sm: 14, md: 16, lg: 18 };

package/src/components/screen/ScreenList.tsx

@@ -245,6 +245,9 @@ const ScreenListBase = forwardRef(function ScreenList(
       contentInsetAdjustmentBehavior={platformAdjustsInsets ? "automatic" : "never"}
       automaticallyAdjustContentInsets={false}
       automaticallyAdjustsScrollIndicatorInsets={false}
+      // iOS: inset by the keyboard so a focused field can scroll above it.
+      automaticallyAdjustKeyboardInsets
+      keyboardShouldPersistTaps="handled"
       contentContainerStyle={[
         styles.content(
           resolvedPadding,

package/src/components/screen/ScreenScrollView.tsx

@@ -117,6 +117,9 @@ export const ScreenScrollView = forwardRef<ComponentRef<typeof ScrollView>, Scre
         contentInsetAdjustmentBehavior={platformAdjustsInsets ? "automatic" : "never"}
         automaticallyAdjustContentInsets={false}
         automaticallyAdjustsScrollIndicatorInsets={false}
+        // iOS: inset by the keyboard so a focused field can scroll above it.
+        automaticallyAdjustKeyboardInsets
+        keyboardShouldPersistTaps="handled"
         showsVerticalScrollIndicator={false}
         scrollEventThrottle={16}
         contentContainerStyle={[

package/src/theme/tokens/light.ts

@@ -11,7 +11,7 @@ export const light = {
 
   // Text
   "color.text.primary": "{palette.neutral.950}",
-  "color.text.secondary": "#4a4a52",
+  "color.text.secondary": "#55555d",
   "color.text.tertiary": "#6e6e76",
   "color.text.disabled": "#d4d4d8",
   "color.text.inverse": "{palette.white}",