@jobber/components-native 0.84.4-match-mobi-55ef4ec.7 → 0.84.4-match-mobi-540af48.10

package/src/Typography/Typography.tsx

@@ -41,9 +41,9 @@ export interface TypographyProps<T extends FontFamily> {
   readonly size?: TextSize;
 
   /**
-   * Text to display
+   * Text to display. Supports nesting text elements.
    */
-  readonly children?: string;
+  readonly children?: React.ReactNode;
 
   /**
    * The maximum amount of lines the text can occupy before being truncated with "...".
@@ -174,7 +174,7 @@ function InternalTypography<T extends FontFamily = "base">({
   UNSAFE_style,
   selectable = true,
   onTextLayout,
-}: TypographyProps<T>): JSX.Element {
+}: TypographyProps<T>) {
   const styles = useTypographyStyles();
   const sizeAndHeight = getSizeAndHeightStyle(size, styles, lineHeight);
   const style: StyleProp<ViewStyle>[] = [
@@ -204,7 +204,7 @@ function InternalTypography<T extends FontFamily = "base">({
 
   const numberOfLinesForNativeText = maxNumberOfLines[maxLines];
 
-  const text = getTransformedText(children, transform);
+  const content = transformChildren(children, transform);
   const accessibilityProps: AccessibilityProps = hideFromScreenReader
     ? {
         accessibilityRole: "none",
@@ -232,7 +232,7 @@ function InternalTypography<T extends FontFamily = "base">({
       selectionColor={tokens["color-brand--highlight"]}
       onTextLayout={onTextLayout}
     >
-      {text}
+      {content}
     </Text>
   );
 
@@ -273,19 +273,35 @@ function getFontStyle(
   }
 }
 
-function getTransformedText(text?: string, transform?: TextTransform) {
+function getTransformedText(text: string, transform?: TextTransform) {
   switch (transform) {
     case "lowercase":
-      return text?.toLocaleLowerCase();
+      return text.toLocaleLowerCase();
     case "uppercase":
-      return text?.toLocaleUpperCase();
+      return text.toLocaleUpperCase();
     case "capitalize":
-      return capitalize(text || "");
+      return capitalize(text);
     default:
       return text;
   }
 }
 
+function transformChildren(
+  children: React.ReactNode,
+  transform?: TextTransform,
+): React.ReactNode {
+  if (children == null || !transform || transform === "none") return children;
+
+  return React.Children.map(children, child => {
+    if (typeof child === "string") {
+      return getTransformedText(child, transform);
+    }
+
+    // Keep non-string children (numbers, elements, fragments) unchanged
+    return child;
+  });
+}
+
 function getColorStyle(
   styles: ReturnType<typeof useTypographyStyles>,
   color?: TextColor,

package/src/Typography/TypographyGestureDetector.tsx

@@ -7,8 +7,6 @@ import { Gesture, GestureDetector } from "react-native-gesture-handler";
  * accidental highlighting of text in Android devices
  * https://github.com/software-mansion/react-native-gesture-handler/issues/1372
  */
-export function TypographyGestureDetector(
-  props: PropsWithChildren<unknown>,
-): JSX.Element {
+export function TypographyGestureDetector(props: PropsWithChildren<unknown>) {
   return <GestureDetector {...props} gesture={Gesture.Native()} />;
 }

package/src/Typography/__snapshots__/Typography.test.tsx.snap

@@ -1,5 +1,69 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`allows child Typography to control its own transform 1`] = `
+<Text
+  accessibilityRole="text"
+  adjustsFontSizeToFit={false}
+  allowFontScaling={true}
+  collapsable={false}
+  selectable={true}
+  selectionColor="hsl(86, 100%, 46%)"
+  style={
+    [
+      {
+        "fontFamily": "inter-regular",
+      },
+      {
+        "color": "hsl(197, 15%, 43%)",
+      },
+      {
+        "textAlign": "left",
+      },
+      {
+        "fontSize": 16,
+        "lineHeight": 20,
+      },
+      {
+        "letterSpacing": 0,
+      },
+    ]
+  }
+>
+  BEFORE 
+  <Text
+    accessibilityRole="text"
+    adjustsFontSizeToFit={false}
+    allowFontScaling={true}
+    collapsable={false}
+    selectable={true}
+    selectionColor="hsl(86, 100%, 46%)"
+    style={
+      [
+        {
+          "fontFamily": "inter-bold",
+        },
+        {
+          "color": "hsl(197, 15%, 43%)",
+        },
+        {
+          "textAlign": "left",
+        },
+        {
+          "fontSize": 16,
+          "lineHeight": 20,
+        },
+        {
+          "letterSpacing": 0,
+        },
+      ]
+    }
+  >
+    inner
+  </Text>
+   AFTER
+</Text>
+`;
+
 exports[`renders text respecting the text direction 1`] = `
 <Text
   accessibilityRole="text"
@@ -902,6 +966,164 @@ exports[`renders text with white color 1`] = `
 </Text>
 `;
 
+exports[`supports multi-level nesting across Typography and Text 1`] = `
+<Text
+  accessibilityRole="text"
+  adjustsFontSizeToFit={false}
+  allowFontScaling={true}
+  collapsable={false}
+  selectable={true}
+  selectionColor="hsl(86, 100%, 46%)"
+  style={
+    [
+      {
+        "fontFamily": "inter-regular",
+      },
+      {
+        "color": "hsl(197, 15%, 43%)",
+      },
+      {
+        "textAlign": "left",
+      },
+      {
+        "fontSize": 16,
+        "lineHeight": 20,
+      },
+      {
+        "letterSpacing": 0,
+      },
+    ]
+  }
+>
+  LEVEL1 
+  <Text
+    accessibilityRole="text"
+    adjustsFontSizeToFit={false}
+    allowFontScaling={true}
+    collapsable={false}
+    selectable={true}
+    selectionColor="hsl(86, 100%, 46%)"
+    style={
+      [
+        {
+          "fontFamily": "inter-regular",
+        },
+        {
+          "color": "hsl(197, 15%, 43%)",
+        },
+        {
+          "textAlign": "left",
+        },
+        {
+          "fontSize": 16,
+          "lineHeight": 20,
+        },
+        {
+          "letterSpacing": 0,
+        },
+      ]
+    }
+  >
+    and 
+    <Text
+      accessibilityRole="text"
+      adjustsFontSizeToFit={false}
+      allowFontScaling={true}
+      collapsable={false}
+      selectable={true}
+      selectionColor="hsl(86, 100%, 46%)"
+      style={
+        [
+          {
+            "fontFamily": "inter-regular",
+          },
+          {
+            "color": "hsl(197, 15%, 43%)",
+          },
+          {
+            "textAlign": "left",
+          },
+          {
+            "fontSize": 16,
+            "lineHeight": 20,
+          },
+          {
+            "letterSpacing": 0,
+          },
+        ]
+      }
+    >
+      inner
+    </Text>
+  </Text>
+   END
+</Text>
+`;
+
+exports[`supports nested children and applies transform only to string children 1`] = `
+<Text
+  accessibilityRole="text"
+  adjustsFontSizeToFit={false}
+  allowFontScaling={true}
+  collapsable={false}
+  selectable={true}
+  selectionColor="hsl(86, 100%, 46%)"
+  style={
+    [
+      {
+        "fontFamily": "inter-regular",
+      },
+      {
+        "color": "hsl(197, 15%, 43%)",
+      },
+      {
+        "textAlign": "left",
+      },
+      {
+        "fontSize": 16,
+        "lineHeight": 20,
+      },
+      {
+        "letterSpacing": 0,
+      },
+    ]
+  }
+>
+  BEFORE 
+  <Text
+    accessibilityRole="text"
+    adjustsFontSizeToFit={false}
+    allowFontScaling={true}
+    collapsable={false}
+    selectable={true}
+    selectionColor="hsl(86, 100%, 46%)"
+    style={
+      [
+        {
+          "fontFamily": "inter-bold",
+        },
+        {
+          "color": "hsl(197, 15%, 43%)",
+        },
+        {
+          "textAlign": "left",
+        },
+        {
+          "fontSize": 16,
+          "lineHeight": 20,
+        },
+        {
+          "letterSpacing": 0,
+        },
+      ]
+    }
+  >
+    Inner
+  </Text>
+   AFTER
+</Text>
+`;
+
 exports[`underline renders text with dashed underline 1`] = `
 <Text
   accessibilityRole="text"

package/src/hooks/useAtlantisI18n/locales/en.json

@@ -18,6 +18,7 @@
   "goBack": "Go back",
   "InputFieldWrapper.clear": "Clear input",
   "InputPassword.enterPassword": "Enter a password",
+  "InputEmail.enterEmail": "Enter a valid email address (email@example.com)",
   "loading": "Loading",
   "menu": "Menu",
   "more": "More",

package/src/hooks/useAtlantisI18n/locales/es.json

@@ -18,6 +18,7 @@
   "goBack": "Volver",
   "InputFieldWrapper.clear": "Borrar",
   "InputPassword.enterPassword": "Escriba una contraseña",
+  "InputEmail.enterEmail": "Introduzca una dirección de correo electrónico válida (email@example.com)",
   "loading": "Cargando",
   "menu": "Menú",
   "more": "Más",

package/src/hooks/useFormController.ts

@@ -4,7 +4,7 @@ import type {
   RegisterOptions,
   UseControllerReturn,
 } from "react-hook-form";
-import { useController, useForm, useFormContext } from "react-hook-form";
+import { get, useController, useForm, useFormContext } from "react-hook-form";
 import { useState } from "react";
 
 interface UseFormControllerProps<T> {
@@ -40,22 +40,15 @@ export function useFormController<T>({
     name: fieldName,
     control,
     rules: validations,
-    defaultValue: value || undefined,
+    defaultValue: typeof value === "boolean" ? value : value || undefined,
   });
 
   // The naming convention established by react-hook-form for arrays of fields is, for example, "emails.0.description".
-  // This corresponds to the structure of the error object, e.g. { emails: { 0: { description: "foobar" } } }
-  // We assume here that fields will either follow this period-delimited three-part convention, or else that they are simple and indivisible (e.g. "city").
-  // TODO: Add support for two-part identifiers (e.g. "property.province")
-  const fieldIdentifiers = fieldName.split(".");
-  let error: FieldError | undefined;
-
-  if (fieldIdentifiers.length === 3) {
-    const [section, item, identifier] = fieldIdentifiers;
-    error = errors[section]?.[item]?.[identifier];
-  } else {
-    error = errors[fieldName];
-  }
+  // Preserve original behavior: only treat three-part names as nested paths.
+  // For anything else, perform a flat lookup to avoid behavioral changes.
+  const identifiers = fieldName.split(".");
+  const error =
+    identifiers.length === 3 ? get(errors, fieldName) : errors[fieldName];
 
   return { error, field };
 }

package/src/utils/test/MockSafeAreaProvider.tsx

@@ -12,7 +12,7 @@ export function MockSafeAreaProvider({
   frame,
   insets,
   children,
-}: MockSafeAreaProviderProps): JSX.Element {
+}: MockSafeAreaProviderProps) {
   const initialFrame: Rect = { x: 0, y: 0, width: 0, height: 0 };
   const initialInsets: EdgeInsets = { bottom: 50, top: 50, left: 0, right: 0 };