@jobber/components-native 0.84.1-JOB-131539-aa42e78.8 → 0.84.1-scotttho-e5ab79e.5

package/src/Typography/Typography.style.ts

@@ -1,10 +1,9 @@
-import { Platform, StyleSheet, TextStyle } from "react-native";
+import type { TextStyle } from "react-native";
+import { Platform, StyleSheet } from "react-native";
 import { webFonts } from "./webFonts";
 import { tokens as staticTokens } from "../utils/design";
-import {
-  AtlantisThemeContextValue,
-  buildThemedStyles,
-} from "../AtlantisThemeContext";
+import type { AtlantisThemeContextValue } from "../AtlantisThemeContext";
+import { buildThemedStyles } from "../AtlantisThemeContext";
 
 const extravagantLineHeight =
   staticTokens["typography--lineHeight-extravagant"];

package/src/Typography/Typography.test.tsx

@@ -282,3 +282,30 @@ describe("onTextLayout", () => {
     expect(onTextLayoutMock).toHaveBeenCalledWith(mockEvent);
   });
 });
+
+describe("TypographyGestureDetector", () => {
+  it("wraps text with TypographyGestureDetector by default (collapsable=false)", () => {
+    const { getByRole } = render(<Typography>Test Text</Typography>);
+    const textElement = getByRole("text");
+
+    expect(textElement.props.collapsable).toBe(false);
+  });
+
+  it("wraps text with TypographyGestureDetector (collapsable=false) when selectable=true", () => {
+    const { getByRole } = render(
+      <Typography selectable={true}>Test Text</Typography>,
+    );
+    const textElement = getByRole("text");
+
+    expect(textElement.props.collapsable).toBe(false);
+  });
+
+  it("does not wrap text with TypographyGestureDetector when selectable=false", () => {
+    const { getByRole } = render(
+      <Typography selectable={false}>Test Text</Typography>,
+    );
+    const textElement = getByRole("text");
+
+    expect(textElement.props.collapsable).toBeUndefined();
+  });
+});

package/src/Typography/Typography.tsx

@@ -1,14 +1,12 @@
 import React from "react";
-import {
+import type {
   AccessibilityProps,
-  I18nManager,
   StyleProp,
-  StyleSheet,
-  Text,
   TextProps,
   TextStyle,
   ViewStyle,
 } from "react-native";
+import { I18nManager, StyleSheet, Text } from "react-native";
 import { TypographyGestureDetector } from "./TypographyGestureDetector";
 import { useTypographyStyles } from "./Typography.style";
 import { capitalize } from "../utils/intl";
@@ -217,28 +215,34 @@ function InternalTypography<T extends FontFamily = "base">({
 
   const { tokens } = useAtlantisTheme();
 
-  return (
-    <TypographyGestureDetector>
-      <Text
-        {...{
-          allowFontScaling,
-          adjustsFontSizeToFit,
-          style,
-          numberOfLines: numberOfLinesForNativeText,
-        }}
-        {...accessibilityProps}
-        maxFontSizeMultiplier={getScaleMultiplier(
-          maxFontScaleSize,
-          sizeAndHeight.fontSize,
-        )}
-        selectable={selectable}
-        selectionColor={tokens["color-brand--highlight"]}
-        onTextLayout={onTextLayout}
-      >
-        {text}
-      </Text>
-    </TypographyGestureDetector>
+  const textComponent = (
+    <Text
+      {...{
+        allowFontScaling,
+        adjustsFontSizeToFit,
+        style,
+        numberOfLines: numberOfLinesForNativeText,
+      }}
+      {...accessibilityProps}
+      maxFontSizeMultiplier={getScaleMultiplier(
+        maxFontScaleSize,
+        sizeAndHeight.fontSize,
+      )}
+      selectable={selectable}
+      selectionColor={tokens["color-brand--highlight"]}
+      onTextLayout={onTextLayout}
+    >
+      {text}
+    </Text>
   );
+
+  // If text is not selectable, there's no need for TypographyGestureDetector
+  // since it only prevents accidental highlighting of selectable text
+  if (!selectable) {
+    return textComponent;
+  }
+
+  return <TypographyGestureDetector>{textComponent}</TypographyGestureDetector>;
 }
 
 function getScaleMultiplier(maxFontScaleSize = 0, size = 1) {

package/src/Typography/TypographyGestureDetector.tsx

@@ -1,4 +1,5 @@
-import React, { PropsWithChildren } from "react";
+import type { PropsWithChildren } from "react";
+import React from "react";
 import { Gesture, GestureDetector } from "react-native-gesture-handler";
 
 /**

package/src/Typography/webFonts.ts

@@ -1,4 +1,4 @@
-import { TextStyle } from "react-native";
+import type { TextStyle } from "react-native";
 
 export const webFonts: { [index: string]: TextStyle } = {
   baseRegularRegular: {

package/src/hooks/useFormController.ts

@@ -1,12 +1,10 @@
 import { v1 } from "react-native-uuid";
-import {
+import type {
   FieldError,
   RegisterOptions,
   UseControllerReturn,
-  useController,
-  useForm,
-  useFormContext,
 } from "react-hook-form";
+import { useController, useForm, useFormContext } from "react-hook-form";
 import { useState } from "react";
 
 interface UseFormControllerProps<T> {

package/src/utils/test/MockSafeAreaProvider.tsx

@@ -1,9 +1,6 @@
 import React from "react";
-import {
-  EdgeInsets,
-  Rect,
-  SafeAreaProvider,
-} from "react-native-safe-area-context";
+import type { EdgeInsets, Rect } from "react-native-safe-area-context";
+import { SafeAreaProvider } from "react-native-safe-area-context";
 
 interface MockSafeAreaProviderProps {
   readonly children: React.ReactNode;