@jobber/components-native 0.84.4-JOB-134681-8086ad4.25 → 0.84.4-JOB-138679-b1552ab.68

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

@@ -694,3 +694,69 @@ exports[`renders with strikethrough styling 1`] = `
   Test Text
 </Text>
 `;
+
+exports[`supports nested Text children with mixed styles 1`] = `
+<Text
+  accessibilityRole="text"
+  adjustsFontSizeToFit={false}
+  allowFontScaling={true}
+  collapsable={false}
+  maxFontSizeMultiplier={3.125}
+  selectable={true}
+  selectionColor="hsl(86, 100%, 46%)"
+  style={
+    [
+      {
+        "fontFamily": "inter-regular",
+      },
+      {
+        "color": "hsl(198, 35%, 21%)",
+      },
+      {
+        "textAlign": "left",
+      },
+      {
+        "fontSize": 16,
+        "lineHeight": 20,
+      },
+      {
+        "letterSpacing": 0,
+      },
+    ]
+  }
+>
+  Hello 
+  <Text
+    accessibilityRole="text"
+    adjustsFontSizeToFit={false}
+    allowFontScaling={true}
+    collapsable={false}
+    maxFontSizeMultiplier={3.125}
+    selectable={true}
+    selectionColor="hsl(86, 100%, 46%)"
+    style={
+      [
+        {
+          "fontFamily": "inter-semibold",
+        },
+        {
+          "color": "hsl(198, 35%, 21%)",
+        },
+        {
+          "textAlign": "left",
+        },
+        {
+          "fontSize": 16,
+          "lineHeight": 20,
+        },
+        {
+          "letterSpacing": 0,
+        },
+      ]
+    }
+  >
+    World
+  </Text>
+  !
+</Text>
+`;

package/src/TextList/TextList.tsx

@@ -44,7 +44,7 @@ export function TextList({
   emphasis,
   level = "text",
   spacing = "none",
-}: TextListProps): JSX.Element {
+}: TextListProps) {
   const styles = useStyles();
 
   return (

package/src/ThumbnailList/ThumbnailList.test.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { fireEvent, render } from "@testing-library/react-native";
+import { fireEvent, render, screen } from "@testing-library/react-native";
 import { Host } from "react-native-portalize";
 import { ThumbnailList } from "./ThumbnailList";
 import type { File } from "../FormatFile/types";
@@ -61,15 +61,15 @@ beforeEach(() => {
 });
 
 it("renders a thumbnail component with attachments", () => {
-  const tree = setup(true);
-  expect(tree.toJSON()).toMatchSnapshot();
+  setup(true);
+  expect(screen.toJSON()).toMatchSnapshot();
 });
 
 describe("when a an array of files is provided", () => {
   it("calls the previewImages util on pressing a valid file", () => {
-    const { getByLabelText } = setup();
+    setup();
     fireEvent.press(
-      getByLabelText(files[0].fileName ? files[0].fileName : "file"),
+      screen.getByLabelText(files[0].fileName ? files[0].fileName : "file"),
     );
     expect(onOpenFile).toHaveBeenCalledTimes(1);
   });

package/src/ThumbnailList/ThumbnailList.tsx

@@ -26,7 +26,7 @@ export function ThumbnailList({
   rowCount = RowCount.TwoRows,
   handleOpenFile,
   createThumbnail,
-}: ThumbnailListProps): JSX.Element {
+}: ThumbnailListProps) {
   const imageList = filterImages(files);
   const styles = useStyles();
 

package/src/Toast/Toast.tsx

@@ -17,7 +17,7 @@ import { tokens as staticTokens } from "../utils/design";
 const MAX_TOAST_MESSAGE_LENGTH = 60;
 const ANNOUNCEMENT_DELAY = 100;
 
-function DefaultToast({ text1 }: ToastConfigParams<string>): JSX.Element {
+function DefaultToast({ text1 }: ToastConfigParams<string>) {
   const { bottom } = useSafeAreaInsets();
   const { t } = useAtlantisI18n();
   const styles = useStyles();
@@ -56,7 +56,7 @@ export interface JobberToastProps {
   readonly bottomOffset?: number;
 }
 
-export function JobberToast({ bottomOffset }: JobberToastProps): JSX.Element {
+export function JobberToast({ bottomOffset }: JobberToastProps) {
   return <Toast bottomOffset={bottomOffset} config={toastConfig} />;
 }
 

package/src/Typography/Typography.test.tsx

@@ -79,6 +79,67 @@ it("renders text with lowercase transform", () => {
   expect(typography.toJSON()).toMatchSnapshot();
 });
 
+it("supports nested children and applies transform only to string children", () => {
+  const typography = render(
+    <Typography transform="uppercase">
+      before <Typography fontWeight="bold">Inner</Typography> after
+    </Typography>,
+  );
+  expect(typography.toJSON()).toMatchSnapshot();
+});
+
+it("allows child Typography to control its own transform", () => {
+  const view = render(
+    <Typography transform="uppercase">
+      {"before "}
+      <Typography fontWeight="bold" transform="lowercase">
+        Inner
+      </Typography>
+      {" after"}
+    </Typography>,
+  ).toJSON();
+
+  expect(view).toMatchSnapshot();
+});
+
+it("supports multi-level nesting across Typography and Text", () => {
+  const view = render(
+    <Typography transform="uppercase">
+      {"level1 "}
+      <Typography>
+        and <Typography transform="lowercase">INNER</Typography>
+      </Typography>
+      {" end"}
+    </Typography>,
+  ).toJSON();
+
+  expect(view).toMatchSnapshot();
+});
+
+it("applies transform to parent strings only", () => {
+  const { getByText } = render(
+    <Typography transform="uppercase">
+      {"test "}
+      <Typography>inner</Typography>
+    </Typography>,
+  );
+
+  expect(getByText(/TEST/)).toBeDefined();
+  expect(getByText("inner")).toBeDefined();
+});
+
+it("allows child transform to override parent transform", () => {
+  const { getByText } = render(
+    <Typography transform="uppercase">
+      before <Typography transform="lowercase">INNER</Typography> after
+    </Typography>,
+  );
+
+  expect(getByText(/BEFORE/)).toBeDefined();
+  expect(getByText("inner")).toBeDefined();
+  expect(getByText(/AFTER/)).toBeDefined();
+});
+
 it("renders text with white color", () => {
   const typography = render(<Typography color="white">Test Text</Typography>);
   expect(typography.toJSON()).toMatchSnapshot();

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> {
@@ -44,18 +44,11 @@ export function useFormController<T>({
   });
 
   // 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 };