react-native-terra-ui 0.11.10 → 0.11.12

package/src/components/header/variants/LargeTitleHeader/parts/LargeTitleContent.tsx

@@ -0,0 +1,88 @@
+import type { ComponentProps } from "react";
+import { type LayoutChangeEvent, Text } from "react-native";
+
+import Animated from "react-native-reanimated";
+import { StyleSheet, useUnistyles } from "react-native-unistyles";
+
+import { FONT_WEIGHT_VALUE } from "#utils/typography";
+import { isTextTitle } from "../../../utils";
+import type { LargeTitleHeaderProps } from "..";
+
+export function LargeTitleContent({
+  title,
+  overline,
+  subtitle,
+  hasAccessoryBelow,
+  onHeightChange,
+  animatedStyle,
+}: Pick<LargeTitleHeaderProps, "title" | "overline" | "subtitle"> & {
+  /** Reserve a gap before a sticky accessory below this block. */
+  hasAccessoryBelow: boolean;
+  /** Reports the large-title block's layout height in dp. */
+  onHeightChange?: (height: number) => void;
+  animatedStyle: ComponentProps<typeof Animated.View>["style"];
+}) {
+  const { theme } = useUnistyles();
+  // Layout height excludes the collapse transform.
+  const handleLayout = (event: LayoutChangeEvent) => onHeightChange?.(event.nativeEvent.layout.height);
+
+  return (
+    <Animated.View style={[styles.portalContent(hasAccessoryBelow), animatedStyle]} onLayout={handleLayout}>
+      {!!overline && (
+        <Text
+          style={styles.overline}
+          maxFontSizeMultiplier={theme.typography.variants["label-sm"].maxFontSizeMultiplier}
+        >
+          {overline}
+        </Text>
+      )}
+      {isTextTitle(title) ? (
+        <Text
+          style={styles.largeTitle}
+          maxFontSizeMultiplier={theme.typography.variants["headline-lg"].maxFontSizeMultiplier}
+        >
+          {title}
+        </Text>
+      ) : (
+        title
+      )}
+      {!!subtitle && (
+        <Text
+          style={styles.subtitle}
+          maxFontSizeMultiplier={theme.typography.variants["body-lg"].maxFontSizeMultiplier}
+        >
+          {subtitle}
+        </Text>
+      )}
+    </Animated.View>
+  );
+}
+
+const styles = StyleSheet.create((theme) => ({
+  portalContent: (hasAccessoryBelow: boolean) => ({
+    gap: theme.spacing["1"] / 2,
+    // Include the gap in the measured height used to position the accessory.
+    paddingBottom: hasAccessoryBelow ? theme.spacing["2"] : 0,
+    paddingHorizontal: theme.layout.screen.padding.x,
+  }),
+  overline: {
+    fontSize: theme.typography.variants["label-sm"].fontSize,
+    lineHeight: theme.typography.variants["label-sm"].lineHeight,
+    letterSpacing: theme.typography.variants["label-sm"].letterSpacing,
+    fontWeight: FONT_WEIGHT_VALUE[theme.typography.variants["label-sm"].fontWeight],
+    color: (theme.color as unknown as Record<string, string | undefined>)["text.tertiary"] ?? "",
+  },
+  largeTitle: {
+    fontSize: theme.typography.variants["headline-lg"].fontSize,
+    lineHeight: theme.typography.variants["headline-lg"].lineHeight,
+    letterSpacing: theme.typography.variants["headline-lg"].letterSpacing,
+    fontWeight: FONT_WEIGHT_VALUE[theme.typography.variants["headline-lg"].fontWeight],
+    color: (theme.color as unknown as Record<string, string | undefined>)["text.primary"] ?? "",
+  },
+  subtitle: {
+    fontSize: theme.typography.variants["body-lg"].fontSize,
+    lineHeight: theme.typography.variants["body-lg"].lineHeight,
+    letterSpacing: theme.typography.variants["body-lg"].letterSpacing,
+    color: (theme.color as unknown as Record<string, string | undefined>)["text.tertiary"] ?? "",
+  },
+}));

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

@@ -1,19 +1,16 @@
-import { type ReactNode, useCallback, useContext } from "react";
-import { Text, View } from "react-native";
+import { type ReactNode, useContext } from "react";
+import { View } from "react-native";
 
-import { StyleSheet, useUnistyles } from "react-native-unistyles";
+import { StyleSheet } from "react-native-unistyles";
 
 import type { ColorToken } from "#theme/types";
-import { resolveThemeColor } from "#utils/resolve-theme-color";
-import { FONT_WEIGHT_VALUE } from "#utils/typography";
 import { useHeaderBackground } from "../../../screen/parts/ScreenHeaderAppearance";
 import { ScreenContext } from "../../../screen/ScreenContext";
-import { Toolbar } from "../../../toolbar";
-import { HeaderDismissButton, type HeaderDismissProps } from "../../header-buttons";
+import type { HeaderDismissProps } from "../../header-buttons";
+import { useHeaderColor } from "../../hooks/use-header-color";
 import { HeaderAccessory } from "../../parts/HeaderAccessory";
-import { HeaderSurface } from "../../parts/HeaderSurface";
+import { HeaderBar } from "../../parts/HeaderBar";
 import type { HeaderAccessoryPadding } from "../../types";
-import { isCustomTitle, isTextTitle } from "../../utils";
 
 export interface TitleHeaderProps extends HeaderDismissProps {
   /**
@@ -56,23 +53,7 @@ export interface TitleHeaderProps extends HeaderDismissProps {
   bg?: ColorToken;
 }
 
-/**
- * Compact title bar (leading slot · title · trailing slot) with a top safe-area
- * inset outside Screen. Within Screen, the root owns safe-area clearance. The inline counterpart to `Header.LargeTitle`; use it for screens that
- * don't need a collapsing large title.
- *
- * @example
- * ```tsx
- * <Screen.Header>
- *   <Header.Title
- *     title="Stats"
- *     trailingActions={
- *       <Toolbar.Button icon="add" accessibilityLabel="Add" onPress={add} />
- *     }
- *   />
- * </Screen.Header>
- * ```
- */
+/** Compact header. Screen owns the safe area when present; standalone headers reserve it here. */
 export function TitleHeader({
   title,
   leadingActions,
@@ -81,140 +62,42 @@ export function TitleHeader({
   RightToolbar,
   accessory,
   accessoryPadding = "x",
-  dismissAction = "none",
-  navigation,
-  onDismiss,
   titleAlignment = "center",
   background,
   bg,
+  ...dismissProps
 }: TitleHeaderProps) {
-  const { theme } = useUnistyles();
-
   const screen = useContext(ScreenContext);
-  const colorToken = background ?? bg;
-  const bgColor =
-    (colorToken ? resolveThemeColor(colorToken, theme) : screen?.background) ?? theme.color["surface.canvas"];
-  useHeaderBackground(bgColor);
-  const leadingContent = leadingActions !== undefined ? leadingActions : LeftToolbar;
-  const trailingContent = trailingActions !== undefined ? trailingActions : RightToolbar;
-  const setAccessoryInset = screen?.setHeaderAccessoryHeight;
-  // Compact headers always reserve the accessory height as top padding.
-  const handleAccessoryHeightChange = useCallback(
-    (height: number) => setAccessoryInset?.(height),
-    [setAccessoryInset]
-  );
-  const isTransparent = bgColor === "transparent";
-  const gradientColor = bgColor;
-  styles.useVariants({ titleAlignment });
-
-  const leading =
-    dismissAction === "back" ? (
-      <>
-        <HeaderDismissButton dismissAction={dismissAction} navigation={navigation} onDismiss={onDismiss} />
-        {leadingContent}
-      </>
-    ) : (
-      leadingContent
-    );
-
-  const trailing =
-    dismissAction === "close" ? (
-      <>
-        {trailingContent}
-        <HeaderDismissButton dismissAction={dismissAction} navigation={navigation} onDismiss={onDismiss} />
-      </>
-    ) : (
-      trailingContent
-    );
+  const color = useHeaderColor(background ?? bg);
+  useHeaderBackground(color);
   return (
     <View style={styles.container}>
-      <View style={styles.safeArea(isTransparent, bgColor, screen !== null)} />
-      {/* The fade covers the bar and any accessory as one surface, so content
-          scrolling under the header meets a single boundary rather than two. */}
-      <View style={styles.barGroup}>
-        <HeaderSurface color={gradientColor} />
-        <View style={styles.bar}>
-          {leading != null && <Toolbar>{leading}</Toolbar>}
-          {/* Text can never be the touch target, but custom content may be, so its
-              container passes touches through to it instead of swallowing them. */}
-          <View style={styles.titleContainer} pointerEvents={isCustomTitle(title) ? "box-none" : "none"}>
-            {isTextTitle(title)
-              ? String(title).trim().length > 0 && <Text style={styles.title}>{title}</Text>
-              : title}
-          </View>
-          {trailing != null && <Toolbar style={styles.trailing}>{trailing}</Toolbar>}
-        </View>
-        {accessory != null && (
-          <HeaderAccessory padding={accessoryPadding} onHeightChange={handleAccessoryHeightChange}>
-            {accessory}
-          </HeaderAccessory>
-        )}
-      </View>
+      <View style={styles.safeArea(color, screen !== null)} />
+      <HeaderBar
+        {...dismissProps}
+        title={title}
+        titleAlignment={titleAlignment}
+        color={color}
+        leading={leadingActions !== undefined ? leadingActions : LeftToolbar}
+        trailing={trailingActions !== undefined ? trailingActions : RightToolbar}
+      />
+      {accessory != null && (
+        <HeaderAccessory
+          padding={accessoryPadding}
+          color={color}
+          onHeightChange={screen?.setHeaderAccessoryHeight}
+        >
+          {accessory}
+        </HeaderAccessory>
+      )}
     </View>
   );
 }
 
-const styles = StyleSheet.create((theme, runtime) => ({
-  container: {
-    position: "absolute",
-    top: 0,
-    left: 0,
-    right: 0,
-    zIndex: 1000,
-  },
-  safeArea: (isTransparent: boolean, bgColor: string, withinScreen: boolean) => ({
+const styles = StyleSheet.create((_, runtime) => ({
+  container: { position: "absolute", top: 0, left: 0, right: 0, zIndex: 1000 },
+  safeArea: (color: string, withinScreen: boolean) => ({
     height: withinScreen ? 0 : runtime.insets.top,
-    backgroundColor: isTransparent ? "transparent" : bgColor,
+    backgroundColor: color,
   }),
-  // Anchors the absolutely positioned surface over the bar and the accessory both.
-  barGroup: { position: "relative" },
-  bar: {
-    height: theme.layout.header.height,
-    flexDirection: "row",
-    alignItems: "center",
-    paddingHorizontal: theme.layout.screen.padding.x,
-    gap: theme.spacing["3"],
-    justifyContent: "space-between",
-  },
-  // A centered title is absolutely positioned, so it leaves the flex row. With
-  // no leading slot the trailing toolbar would be the only in-flow child and
-  // `space-between` would park it on the left — the auto margin pins it right.
-  trailing: {
-    justifyContent: "flex-end",
-    variants: {
-      titleAlignment: {
-        center: { marginLeft: "auto" },
-        left: {},
-      },
-    },
-  },
-  titleContainer: {
-    variants: {
-      titleAlignment: {
-        center: {
-          position: "absolute",
-          left: 0,
-          right: 0,
-          alignItems: "center",
-        },
-        left: {
-          flex: 1,
-          alignItems: "flex-start",
-        },
-      },
-    },
-  },
-  title: {
-    fontSize: theme.typography.variants["title-md"].fontSize,
-    lineHeight: theme.typography.variants["title-md"].lineHeight,
-    letterSpacing: theme.typography.variants["title-md"].letterSpacing,
-    fontWeight: FONT_WEIGHT_VALUE[theme.typography.variants["title-md"].fontWeight],
-    color: (theme.color as unknown as Record<string, string | undefined>)["text.primary"] ?? "",
-    variants: {
-      titleAlignment: {
-        center: { textAlign: "center" },
-        left: { textAlign: "left" },
-      },
-    },
-  },
 }));

package/src/components/surface/Surface.tsx

@@ -69,7 +69,7 @@ const resolveElevation = (variant: SurfaceVariant, elevation?: ElevationKey): El
  * ```
  */
 export const Surface = forwardRef<ComponentRef<typeof View>, SurfaceProps>(function Surface(
-  { variant = "base", elevation, radius, borderWidth, borderColor, ...rest },
+  { variant = "base", p = "3", elevation, radius, borderWidth, borderColor, ...rest },
   ref
 ) {
   const variantBorder = VARIANT_BORDER[variant];
@@ -78,6 +78,7 @@ export const Surface = forwardRef<ComponentRef<typeof View>, SurfaceProps>(funct
     <Box
       ref={ref}
       background={VARIANT_BG[variant]}
+      p={p}
       radius={radius ?? getDefaultRadius("surface")}
       borderWidth={borderWidth ?? variantBorder.borderWidth}
       borderColor={borderColor ?? variantBorder.borderColor}