@jobber/components-native 0.82.1-JOB-131123-08080a4.35 → 0.82.1-JOB-131123-46bcb04.40

package/dist/types/src/Typography/Typography.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { NativeSyntheticEvent, StyleProp, TextLayoutEventData, TextProps, TextStyle } from "react-native";
+import { StyleProp, TextProps, TextStyle } from "react-native";
 export interface TypographyProps<T extends FontFamily> extends Pick<TextProps, "selectable"> {
     /**
      * Text capitalization
@@ -109,5 +109,5 @@ export type LineHeight = "extravagant" | "jumbo" | "largest" | "larger" | "large
 export type LetterSpacing = "base" | "loose";
 export type TextAccessibilityRole = "text" | "header";
 export type TruncateLength = "single" | "small" | "base" | "large" | "extraLarge" | "unlimited";
-export type OnTextLayoutEvent = (event: NativeSyntheticEvent<TextLayoutEventData>) => void;
+export type OnTextLayoutEvent = Exclude<TextProps["onTextLayout"], undefined>;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.82.1-JOB-131123-08080a4.35+08080a4f",
+  "version": "0.82.1-JOB-131123-46bcb04.40+46bcb041",
   "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": "08080a4f21868bdc10bb527a25f48da3ab225339"
+  "gitHead": "46bcb04157a11807031042ad5c1f9f7938ee3248"
 }

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

@@ -73,6 +73,7 @@ exports[`when Heading called with maxLines should match snapshot 1`] = `
   adjustsFontSizeToFit={false}
   allowFontScaling={true}
   collapsable={false}
+  ellipsizeMode="tail"
   numberOfLines={1}
   selectable={true}
   selectionColor="hsl(86, 100%, 46%)"

package/src/Text/Text.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 { Text } from ".";
 import { tokens } from "../utils/design";
 
@@ -135,6 +135,7 @@ it("renders with italic styling", () => {
 
 it("renders text that is inaccessible", () => {
   const text = render(<Text hideFromScreenReader={true}>Test Text</Text>);
+
   expect(text.root.props).toEqual(
     expect.objectContaining({
       accessibilityRole: "none",
@@ -145,7 +146,7 @@ it("renders text that is inaccessible", () => {
 });
 
 it("renders text with underline styling", () => {
-  const text = render(<Text underline="dashed">Test Text</Text>);
+  const text = render(<Text underline="dotted">Test Text</Text>);
 
   expect(text.toJSON()).toMatchSnapshot();
 });
@@ -159,10 +160,8 @@ describe("UNSAFE_style", () => {
       },
     };
 
-    const { getByRole } = render(
-      <Text UNSAFE_style={customStyle}>Test Text</Text>,
-    );
-    const textElement = getByRole("text");
+    render(<Text UNSAFE_style={customStyle}>Test Text</Text>);
+    const textElement = screen.getByRole("text");
     expect(textElement.props.style).toContainEqual(
       expect.objectContaining(customStyle.textStyle),
     );
@@ -172,11 +171,9 @@ describe("UNSAFE_style", () => {
 describe("onTextLayout", () => {
   it("calls onTextLayout callback when text layout event occurs", () => {
     const onTextLayoutMock = jest.fn();
-    const { getByRole } = render(
-      <Text onTextLayout={onTextLayoutMock}>Test Text</Text>,
-    );
+    render(<Text onTextLayout={onTextLayoutMock}>Test Text</Text>);
 
-    const textElement = getByRole("text");
+    const textElement = screen.getByRole("text");
     const mockEvent = {
       nativeEvent: {
         lines: [
@@ -198,32 +195,4 @@ describe("onTextLayout", () => {
     expect(onTextLayoutMock).toHaveBeenCalledTimes(1);
     expect(onTextLayoutMock).toHaveBeenCalledWith(mockEvent);
   });
-
-  it("does not call onTextLayout when prop is not provided", () => {
-    const { getByRole } = render(<Text>Test Text</Text>);
-
-    const textElement = getByRole("text");
-    const mockEvent = {
-      nativeEvent: {
-        lines: [
-          {
-            text: "Test Text",
-            x: 0,
-            y: 0,
-            width: 100,
-            height: 20,
-            ascender: 15,
-            descender: -5,
-            capHeight: 14,
-            xHeight: 10,
-          },
-        ],
-      },
-    };
-
-    // This should not throw an error
-    expect(() => {
-      fireEvent(textElement, "onTextLayout", mockEvent);
-    }).not.toThrow();
-  });
 });

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

@@ -108,6 +108,7 @@ exports[`renders text that is not scaled down with adjustsFontSize false 1`] = `
   adjustsFontSizeToFit={false}
   allowFontScaling={true}
   collapsable={false}
+  ellipsizeMode="tail"
   maxFontSizeMultiplier={3.125}
   numberOfLines={4}
   selectable={true}
@@ -143,6 +144,7 @@ exports[`renders text that is scaled down with adjustsFontSize true 1`] = `
   adjustsFontSizeToFit={true}
   allowFontScaling={true}
   collapsable={false}
+  ellipsizeMode="tail"
   maxFontSizeMultiplier={3.125}
   numberOfLines={4}
   selectable={true}
@@ -574,7 +576,7 @@ exports[`renders text with underline styling 1`] = `
         "letterSpacing": 0,
       },
       {
-        "textDecorationStyle": "dashed",
+        "textDecorationStyle": "dotted",
       },
       {
         "textDecorationColor": "hsl(197, 15%, 43%)",

package/src/Typography/Typography.tsx

@@ -2,11 +2,9 @@ import React from "react";
 import {
   AccessibilityProps,
   I18nManager,
-  NativeSyntheticEvent,
   StyleProp,
   StyleSheet,
   Text,
-  TextLayoutEventData,
   TextProps,
   TextStyle,
   ViewStyle,
@@ -214,6 +212,7 @@ function InternalTypography<T extends FontFamily = "base">({
           adjustsFontSizeToFit,
           style,
           numberOfLines: numberOfLinesForNativeText,
+          ellipsizeMode: numberOfLinesForNativeText ? "tail" : undefined,
         }}
         {...accessibilityProps}
         maxFontSizeMultiplier={getScaleMultiplier(
@@ -484,6 +483,4 @@ export type TruncateLength =
   | "extraLarge"
   | "unlimited";
 
-export type OnTextLayoutEvent = (
-  event: NativeSyntheticEvent<TextLayoutEventData>,
-) => void;
+export type OnTextLayoutEvent = Exclude<TextProps["onTextLayout"], undefined>;

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

@@ -39,6 +39,7 @@ exports[`renders text using the maxLines is also passed 1`] = `
   adjustsFontSizeToFit={false}
   allowFontScaling={true}
   collapsable={false}
+  ellipsizeMode="tail"
   numberOfLines={2}
   selectable={true}
   selectionColor="hsl(86, 100%, 46%)"
@@ -73,6 +74,7 @@ exports[`renders text with adjustsFontSizeToFit set to true 1`] = `
   adjustsFontSizeToFit={true}
   allowFontScaling={true}
   collapsable={false}
+  ellipsizeMode="tail"
   numberOfLines={1}
   selectable={true}
   selectionColor="hsl(86, 100%, 46%)"