react-native-terra-ui 0.13.7 → 0.13.9

package/lib/typescript/src/components/screen/ScreenList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScreenList.d.ts","sourceRoot":"","sources":["../../../../../src/components/screen/ScreenList.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"ScreenList.d.ts","sourceRoot":"","sources":["../../../../../src/components/screen/ScreenList.tsx"],"names":[],"mappings":"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"}

package/lib/typescript/src/components/screen/ScreenScrollView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScreenScrollView.d.ts","sourceRoot":"","sources":["../../../../../src/components/screen/ScreenScrollView.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA2C,KAAK,SAAS,EAAe,MAAM,OAAO,CAAC;AAC7F,OAAO,EAGL,KAAK,eAAe,EACpB,KAAK,SAAS,EAEd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAatB,OAAO,KAAK,EAAwB,qBAAqB,EAAE,MAAM,YAAS,CAAC;AAG3E,qFAAqF;AACrF,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAAC,eAAe,EAAE,YAAY,CAAC,EAAE,qBAAqB;IACvG,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,iEAAiE;IACjE,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC,uFAAuF;IACvF,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,gBAAgB,8MA2F5B,CAAC"}
+{"version":3,"file":"ScreenScrollView.d.ts","sourceRoot":"","sources":["../../../../../src/components/screen/ScreenScrollView.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA2C,KAAK,SAAS,EAAe,MAAM,OAAO,CAAC;AAC7F,OAAO,EAGL,KAAK,eAAe,EACpB,KAAK,SAAS,EAEd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAatB,OAAO,KAAK,EAAwB,qBAAqB,EAAE,MAAM,YAAS,CAAC;AAG3E,qFAAqF;AACrF,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAAC,eAAe,EAAE,YAAY,CAAC,EAAE,qBAAqB;IACvG,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,iEAAiE;IACjE,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC,uFAAuF;IACvF,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,gBAAgB,8MA8F5B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-terra-ui",
-  "version": "0.13.7",
+  "version": "0.13.9",
   "description": "Themeable React Native UI components built on react-native-unistyles",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",

package/src/components/header/parts/HeaderBar.tsx

@@ -25,6 +25,8 @@ interface HeaderBarProps extends HeaderDismissProps {
   titleAlignment: "center" | "left";
   color: string;
   surfaceStyle?: HeaderSurfaceProps["animatedStyle"];
+  /** An accessory sits under the bar, so the bar's surface stays solid. */
+  hasAccessory?: boolean;
   titleStyle?: ComponentProps<typeof Animated.View>["style"];
 }
 
@@ -39,6 +41,7 @@ export function HeaderBar({
   titleAlignment,
   color,
   surfaceStyle,
+  hasAccessory = false,
   titleStyle,
   dismissAction = "none",
   navigation,
@@ -75,7 +78,7 @@ export function HeaderBar({
     */
     <ScrollToTopGuard>
       <View style={[styles.bar, styles.windowInsets(windowInsets.left, windowInsets.right)]}>
-        <HeaderSurface color={color} animatedStyle={surfaceStyle} />
+        <HeaderSurface color={color} animatedStyle={surfaceStyle} hasAccessoryBelow={hasAccessory} />
         <HeaderWindowInsets onInsetsChange={setWindowInsets} />
         {hasLeading && (
           <Toolbar onLayout={onLeadingLayout}>

package/src/components/header/parts/HeaderGradientOverlay.tsx

@@ -10,9 +10,9 @@ import Svg, { Defs, Rect, Stop, LinearGradient as SvgLinearGradient } from "reac
 export const HEADER_FADE_END_OPACITY = 0.9;
 
 export interface HeaderGradientOverlayProps {
-  /** Fill color, ramped from opaque to {@link HEADER_FADE_END_OPACITY}. */
+  /** Fill color, ramped from opaque to `endOpacity`. */
   color: string;
-  startOpacity?: number;
+  /** Opacity at the bottom edge. Defaults to {@link HEADER_FADE_END_OPACITY}; `1` is a solid fill. */
   endOpacity?: number;
 }
 
@@ -25,7 +25,6 @@ export interface HeaderGradientOverlayProps {
  */
 export function HeaderGradientOverlay({
   color,
-  startOpacity = 1,
   endOpacity = HEADER_FADE_END_OPACITY,
 }: HeaderGradientOverlayProps) {
   const gradientId = useId();
@@ -34,7 +33,7 @@ export function HeaderGradientOverlay({
     <Svg height="100%" width="100%">
       <Defs>
         <SvgLinearGradient id={gradientId} x1="0" y1="0" x2="0" y2="1">
-          <Stop offset={0} stopColor={color} stopOpacity={startOpacity} />
+          <Stop offset={0} stopColor={color} stopOpacity={1} />
           <Stop offset={1} stopColor={color} stopOpacity={endOpacity} />
         </SvgLinearGradient>
       </Defs>

package/src/components/header/parts/HeaderSurface.tsx

@@ -10,24 +10,30 @@ export interface HeaderSurfaceProps {
   color: string;
   /** Opacity style for variants that fade the whole surface in as they collapse. */
   animatedStyle?: HeaderOpacityStyle;
-  /** Continue the bar's gradient from 0.85 to 0.80 beneath an accessory. */
+  /** This surface is an accessory's: it carries the fade, from solid to the end opacity. */
   accessory?: boolean;
+  /**
+   * An accessory sits under this bar. The bar then stays solid, since the
+   * header's bottom edge, where the fade belongs, is the accessory's.
+   */
+  hasAccessoryBelow?: boolean;
 }
 
 /**
- * Header background with matching gradient boundaries for the bar and accessory.
+ * Header background. One fade per header, at its bottom edge: the bar's when it
+ * stands alone, the accessory's when there is one, with the bar solid above it.
+ * Content scrolling under a pinned accessory then meets a header as opaque as
+ * any other, rather than one that thinned twice, once at each part's edge, and
+ * let saturated rows show through around a search field.
  *
  * The ramp spans the surface itself: it is sized by the caller and stays inside
  * those bounds, so a taller surface stretches the fade rather than adding to it.
  */
-export function HeaderSurface({ color, animatedStyle, accessory }: HeaderSurfaceProps) {
+export function HeaderSurface({ color, animatedStyle, accessory, hasAccessoryBelow }: HeaderSurfaceProps) {
+  const fades = accessory || !hasAccessoryBelow;
   return (
     <Animated.View style={[styles.surface, animatedStyle]} pointerEvents="none">
-      <HeaderGradientOverlay
-        color={color}
-        startOpacity={accessory ? HEADER_FADE_END_OPACITY : 1}
-        endOpacity={accessory ? 0.85 : HEADER_FADE_END_OPACITY}
-      />
+      <HeaderGradientOverlay color={color} endOpacity={fades ? HEADER_FADE_END_OPACITY : 1} />
     </Animated.View>
   );
 }

package/src/components/header/variants/LargeTitleHeader/index.tsx

@@ -92,6 +92,7 @@ export function LargeTitleHeader({
         titleAlignment={titleAlignment}
         color={color}
         surfaceStyle={layout.surfaceStyle}
+        hasAccessory={accessory != null}
         titleStyle={layout.compactTitleStyle}
         leading={leadingActions !== undefined ? leadingActions : LeftToolbar}
         trailing={trailingActions !== undefined ? trailingActions : RightToolbar}

package/src/components/header/variants/TitleHeader/index.tsx

@@ -93,6 +93,7 @@ export function TitleHeader({
         subtitle={subtitle}
         titleAlignment={titleAlignment}
         color={color}
+        hasAccessory={accessory != null}
         leading={leadingActions !== undefined ? leadingActions : LeftToolbar}
         trailing={trailingActions !== undefined ? trailingActions : RightToolbar}
       />

package/src/components/input/hooks/use-focus-state.ts

@@ -0,0 +1,32 @@
+import { useCallback, useState } from "react";
+import type { TextInputProps } from "react-native";
+
+type FocusHandler = NonNullable<TextInputProps["onFocus"]>;
+type BlurHandler = NonNullable<TextInputProps["onBlur"]>;
+
+/**
+ * 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?: FocusHandler, onBlur?: BlurHandler) {
+  const [isFocused, setIsFocused] = useState(false);
+
+  const handleFocus = useCallback<FocusHandler>(
+    (event) => {
+      setIsFocused(true);
+      onFocus?.(event);
+    },
+    [onFocus]
+  );
+
+  const handleBlur = useCallback<BlurHandler>(
+    (event) => {
+      setIsFocused(false);
+      onBlur?.(event);
+    },
+    [onBlur]
+  );
+
+  return { isFocused, handleFocus, handleBlur };
+}

package/src/components/input/parts/InputField.tsx

@@ -1,4 +1,4 @@
-import { type ComponentRef, forwardRef, useCallback, useState } from "react";
+import { type ComponentRef, forwardRef } from "react";
 import { TextInput, View } from "react-native";
 
 import { StyleSheet, useUnistyles } from "react-native-unistyles";
@@ -6,8 +6,12 @@ import { StyleSheet, useUnistyles } from "react-native-unistyles";
 import type { ColorToken, RadiusKey } from "#theme/types";
 import { resolveThemeColor } from "#utils/resolve-theme-color";
 import { FONT_WEIGHT_VALUE, SYSTEM_FONT } from "#utils/typography";
+import { useFocusState } from "../hooks/use-focus-state";
 import type { InputBaseProps, InputSize } from "../types";
 
+/** Container height per size, in dp. Sibling controls sized to match read from here. */
+export const FIELD_HEIGHT: Record<InputSize, number> = { sm: 36, md: 44, lg: 52 };
+
 /** Typographic role of the text, per size. */
 const TEXT_VARIANT: Record<InputSize, "subheadline" | "callout" | "body"> = {
   sm: "subheadline",
@@ -25,6 +29,9 @@ export const InputField = forwardRef<ComponentRef<typeof TextInput>, InputBasePr
     size = "md",
     isDisabled = false,
     isInvalid = false,
+    focusBorderColor,
+    focusBorderWidth,
+    hasFocusGlow = false,
     leading,
     trailing,
     background = "surface.sunken",
@@ -36,32 +43,24 @@ export const InputField = forwardRef<ComponentRef<typeof TextInput>, InputBasePr
   },
   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 { theme } = useUnistyles();
-
-  const handleFocus = useCallback<NonNullable<InputBaseProps["onFocus"]>>(
-    (event) => {
-      setIsFocused(true);
-      onFocus?.(event);
-    },
-    [onFocus]
-  );
+  const { isFocused, handleFocus, handleBlur } = useFocusState(onFocus, onBlur);
+  const showsFocus = isFocused && !isDisabled;
 
-  const handleBlur = useCallback<NonNullable<InputBaseProps["onBlur"]>>(
-    (event) => {
-      setIsFocused(false);
-      onBlur?.(event);
-    },
-    [onBlur]
-  );
+  // The placeholder colour has to leave the stylesheet because `TextInput` takes
+  // it as a prop rather than as a style.
+  const { theme } = useUnistyles();
 
-  styles.useVariants({ size, disabled: isDisabled, invalid: isInvalid, focused: isFocused && !isDisabled });
+  styles.useVariants({ size, disabled: isDisabled, invalid: isInvalid });
 
   return (
-    <View style={[styles.container, styles.fill(background, radius), style]}>
+    <View
+      style={[
+        styles.container,
+        styles.fill(background, radius),
+        showsFocus && styles.focus(focusBorderColor, focusBorderWidth, hasFocusGlow, isInvalid),
+        style,
+      ]}
+    >
       {leading}
       <TextInput
         ref={ref}
@@ -97,13 +96,9 @@ const styles = StyleSheet.create((theme) => {
       borderColor: theme.color["border.subtle"],
       variants: {
         size: {
-          sm: { height: 36, paddingHorizontal: theme.spacing["4"], gap: 6 },
-          md: { height: 44, paddingHorizontal: theme.spacing["4"], gap: 6 },
-          lg: { height: 52, paddingHorizontal: theme.spacing["4"], gap: 6 },
-        },
-        focused: {
-          true: { borderColor: theme.color["accent.border"] },
-          false: {},
+          sm: { height: FIELD_HEIGHT.sm, paddingHorizontal: theme.spacing["3"], gap: 6 },
+          md: { height: FIELD_HEIGHT.md, paddingHorizontal: theme.spacing["3"], gap: 6 },
+          lg: { height: FIELD_HEIGHT.lg, paddingHorizontal: theme.spacing["4"], gap: 6 },
         },
         invalid: {
           true: { borderColor: theme.color["danger.text"] },
@@ -115,6 +110,26 @@ const styles = StyleSheet.create((theme) => {
         },
       },
     },
+    // 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: ColorToken | undefined,
+      width: number | undefined,
+      hasGlow: boolean,
+      isInvalid: boolean
+    ) => {
+      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 }],
+          }),
+      };
+    },
     // `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: ColorToken, radius: RadiusKey) => ({
@@ -137,7 +152,6 @@ const styles = StyleSheet.create((theme) => {
           md: { fontSize: theme.typography.variants[TEXT_VARIANT.md].fontSize },
           lg: { fontSize: theme.typography.variants[TEXT_VARIANT.lg].fontSize },
         },
-        focused: { true: {}, false: {} },
         invalid: { true: {}, false: {} },
         disabled: { true: {}, false: {} },
       },

package/src/components/input/types.ts

@@ -24,8 +24,18 @@ export interface InputBaseProps extends Omit<TextInputProps, "style" | "editable
   trailing?: ReactNode;
   /** Fill token. Defaults to `'surface.sunken'`. */
   background?: ColorToken;
-  /** Corner radius. Defaults to `'md'`. */
+  /** Corner radius. Defaults to `'lg'`; `Input.Search` uses `'full'`. */
   radius?: RadiusKey;
+  /** Border colour while focused. Defaults to `undefined` — the resting border stays. */
+  focusBorderColor?: ColorToken;
+  /** Border width while focused, in dp. Defaults to `undefined` — the resting hairline stays. */
+  focusBorderWidth?: number;
+  /**
+   * Surround the field with a soft glow while focused, tinted by
+   * `focusBorderColor` or `border.default` when that is unset. Defaults to
+   * `false`; `Input.Search` turns it on.
+   */
+  hasFocusGlow?: boolean;
   /** Merged over the container's own style. */
   style?: StyleProp<ViewStyle>;
 }

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

@@ -0,0 +1,109 @@
+import { useEffect } from "react";
+
+import Animated, {
+  Easing,
+  interpolate,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from "react-native-reanimated";
+import { StyleSheet, useUnistyles } from "react-native-unistyles";
+
+import type { ColorToken } from "#theme/types";
+import { resolveThemeColor } from "#utils/resolve-theme-color";
+import { Icon } from "../../../icon";
+import { PressableOpacity } from "../../../pressable";
+import { FIELD_HEIGHT } from "../../parts/InputField";
+import type { InputSize } from "../../types";
+import { ICON_SIZE } from "./utils";
+
+/** How long the button takes to slide in and the field to make room, in ms. */
+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;
+
+interface SearchCancelButtonProps {
+  /** Slides the button in when `true` and out when `false`. */
+  isVisible: boolean;
+  size: InputSize;
+  /** Fill token, matched to the field it sits beside. */
+  background: ColorToken;
+  accessibilityLabel: string;
+  onPress: () => void;
+}
+
+/**
+ * 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,
+}: SearchCancelButtonProps) {
+  // 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 (
+    <Animated.View
+      style={[styles.slot(isVisible), slotStyle]}
+      accessibilityElementsHidden={!isVisible}
+      importantForAccessibility={isVisible ? "auto" : "no-hide-descendants"}
+    >
+      <PressableOpacity
+        accessibilityLabel={accessibilityLabel}
+        accessibilityRole="button"
+        onPress={onPress}
+        style={styles.button(diameter, background)}
+      >
+        <Icon name="terra.x" size={ICON_SIZE[size] + GLYPH_EXTRA} color="text.primary" />
+      </PressableOpacity>
+    </Animated.View>
+  );
+}
+
+const styles = StyleSheet.create((theme) => ({
+  slot: (isVisible: boolean) => ({
+    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: number, background: ColorToken) => ({
+    width: diameter,
+    height: diameter,
+    borderRadius: diameter / 2,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: resolveThemeColor(background, theme),
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: theme.color["border.subtle"],
+  }),
+}));

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

@@ -0,0 +1,58 @@
+import { Pressable } from "react-native";
+
+import { StyleSheet } from "react-native-unistyles";
+
+import { Icon } from "../../../icon";
+import type { InputSize } from "../../types";
+import { ICON_SIZE } from "./utils";
+
+/** Touch expansion around the button, in dp — it is smaller than a cell. */
+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;
+
+interface SearchClearButtonProps {
+  size: InputSize;
+  accessibilityLabel: string;
+  onPress: () => void;
+}
+
+/**
+ * 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 }: SearchClearButtonProps) {
+  const diameter = ICON_SIZE[size];
+
+  return (
+    <Pressable
+      accessibilityLabel={accessibilityLabel}
+      accessibilityRole="button"
+      hitSlop={HIT_SLOP}
+      onPress={onPress}
+      style={styles.disc(diameter)}
+    >
+      <Icon
+        name="terra.x"
+        size={Math.round(diameter * GLYPH_RATIO)}
+        color="text.inverse"
+        strokeWidth={GLYPH_STROKE_WIDTH}
+      />
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create((theme) => ({
+  disc: (diameter: number) => ({
+    width: diameter,
+    height: diameter,
+    borderRadius: diameter / 2,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: theme.color["text.tertiary"],
+  }),
+}));