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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.84.1-JOB-131539-aa42e78.8+aa42e786",
+  "version": "0.84.1",
   "license": "MIT",
   "description": "React Native implementation of Atlantis",
   "repository": {
@@ -79,5 +79,5 @@
     "react-native-safe-area-context": "^5.4.0",
     "react-native-svg": ">=12.0.0"
   },
-  "gitHead": "aa42e7869a6ef4352d1f35e348f11ef95c53df0c"
+  "gitHead": "071a5fbd1c5fd31ac6ad2c45ac297b4d51fbf999"
 }

package/src/Select/Select.tsx

@@ -158,6 +158,7 @@ export function Select({
                 level="textSupporting"
                 variation={textVariation}
                 hideFromScreenReader={true}
+                selectable={false}
               >
                 {label}
               </Text>
@@ -167,6 +168,7 @@ export function Select({
                 <Text
                   variation={disabled ? "disabled" : "base"}
                   hideFromScreenReader={true}
+                  selectable={false}
                 >
                   {getValue()}
                 </Text>

package/src/Select/components/SelectDefaultPicker/SelectDefaultPicker.tsx

@@ -18,7 +18,7 @@ export function SelectDefaultPicker({
   const { tokens } = useAtlantisTheme();
 
   return (
-    <SelectPressable onPress={() => pickerRef.current?.focus()}>
+    <SelectPressable onPress={pickerRef.current?.focus}>
       {children}
       <Picker
         ref={pickerRef}

package/src/Text/Text.test.tsx

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

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

@@ -217,28 +217,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) {