@jobber/components-native 0.83.0 → 0.84.0

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

@@ -1,4 +1,4 @@
-import { TextAlign, TextVariation, TruncateLength, TypographyProps } from "../Typography";
+import { OnTextLayoutEvent, TextAlign, TextVariation, TruncateLength, TypographyProps } from "../Typography";
 import { TypographyUnsafeStyle } from "../Typography/Typography";
 export interface TextProps extends Pick<TypographyProps<"base">, "maxFontScaleSize" | "selectable"> {
     /**
@@ -66,7 +66,11 @@ export interface TextProps extends Pick<TypographyProps<"base">, "maxFontScaleSi
      * More information in the [Customizing components Guide](https://atlantis.getjobber.com/guides/customizing-components).
      */
     readonly UNSAFE_style?: TypographyUnsafeStyle;
+    /**
+     * Callback that is called when the text is laid out.
+     */
+    readonly onTextLayout?: OnTextLayoutEvent;
 }
 export type TextLevel = "text" | "textSupporting";
 export declare const TEXT_MAX_SCALED_FONT_SIZES: Record<TextLevel, number>;
-export declare function Text({ level, variation, emphasis, allowFontScaling, adjustsFontSizeToFit, maxLines, align, children, reverseTheme, strikeThrough, italic, hideFromScreenReader, maxFontScaleSize, UNSAFE_style, underline, selectable, }: TextProps): JSX.Element;
+export declare function Text({ level, variation, emphasis, allowFontScaling, adjustsFontSizeToFit, maxLines, align, children, reverseTheme, strikeThrough, italic, hideFromScreenReader, maxFontScaleSize, UNSAFE_style, underline, selectable, onTextLayout, }: TextProps): JSX.Element;

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

@@ -1,6 +1,6 @@
 import React from "react";
 import { StyleProp, TextProps, TextStyle } from "react-native";
-export interface TypographyProps<T extends FontFamily> extends Pick<TextProps, "selectable"> {
+export interface TypographyProps<T extends FontFamily> {
     /**
      * Text capitalization
      */
@@ -13,6 +13,12 @@ export interface TypographyProps<T extends FontFamily> extends Pick<TextProps, "
      * Alignment of text
      */
     readonly align?: TextAlign;
+    /**
+     * Lets the user select text, to use the native copy and paste functionality.
+     * WARNING: if true, this prevents ellipsis from being shown on Android.
+     * @default true
+     */
+    readonly selectable?: boolean;
     /**
      * Font size
      */
@@ -24,6 +30,7 @@ export interface TypographyProps<T extends FontFamily> extends Pick<TextProps, "
     /**
      * The maximum amount of lines the text can occupy before being truncated with "...".
      * Uses predefined string values that correspond to a doubling scale for the amount of lines.
+     * WARNING: if `selectable` is true, Android will not show an ellipsis.
      */
     readonly maxLines?: TruncateLength;
     /**
@@ -86,12 +93,19 @@ export interface TypographyProps<T extends FontFamily> extends Pick<TextProps, "
      */
     readonly strikeThrough?: boolean;
     readonly UNSAFE_style?: TypographyUnsafeStyle;
+    /**
+     * Callback behaves differently on iOS and Android.
+     * On iOS, it is called when the text is laid out.
+     * On Android, it is called before the text is laid out.
+     * @see https://reactnative.dev/docs/text#ontextlayout
+     */
+    readonly onTextLayout?: OnTextLayoutEvent;
 }
 export interface TypographyUnsafeStyle {
     textStyle?: StyleProp<TextStyle>;
 }
 export declare const Typography: React.MemoExoticComponent<typeof InternalTypography>;
-declare function InternalTypography<T extends FontFamily = "base">({ fontFamily, fontStyle, fontWeight, transform, color, align, size, children, maxLines, allowFontScaling, maxFontScaleSize, adjustsFontSizeToFit, lineHeight, letterSpacing, reverseTheme, hideFromScreenReader, accessibilityRole, strikeThrough, underline, UNSAFE_style, selectable, }: TypographyProps<T>): JSX.Element;
+declare function InternalTypography<T extends FontFamily = "base">({ fontFamily, fontStyle, fontWeight, transform, color, align, size, children, maxLines, allowFontScaling, maxFontScaleSize, adjustsFontSizeToFit, lineHeight, letterSpacing, reverseTheme, hideFromScreenReader, accessibilityRole, strikeThrough, underline, UNSAFE_style, selectable, onTextLayout, }: TypographyProps<T>): JSX.Element;
 export type FontFamily = "base" | "display";
 export type FontStyle = "regular" | "italic";
 export type FontWeight = "regular" | "medium" | "bold" | "semiBold" | "extraBold" | "black";
@@ -108,4 +122,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 = Exclude<TextProps["onTextLayout"], undefined>;
 export {};

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

@@ -1,5 +1,5 @@
 export { Typography } from "./Typography";
-export type { FontFamily, FontStyle, FontWeight, BaseWeight, DisplayWeight, BaseStyle, DisplayStyle, TextColor, TextTransform, TextSize, TextAlign, LineHeight, LetterSpacing, TextAccessibilityRole, TextVariation, TypographyProps, TruncateLength, } from "./Typography";
+export type { FontFamily, FontStyle, FontWeight, BaseWeight, DisplayWeight, BaseStyle, DisplayStyle, TextColor, TextTransform, TextSize, TextAlign, LineHeight, LetterSpacing, TextAccessibilityRole, TextVariation, TypographyProps, TruncateLength, OnTextLayoutEvent, } from "./Typography";
 export { getTypographyStyles, useTypographyStyles } from "./Typography.style";
 export { typographyStyles } from "./Typography.style";
 export { TypographyGestureDetector } from "./TypographyGestureDetector";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.83.0",
+  "version": "0.84.0",
   "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": "5b2a570f0d657e82d04a8d60964242f67da3fab0"
+  "gitHead": "5fcbf313b34c60eb45e8985527acb880421690e3"
 }

package/src/Text/Text.test.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { 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,12 +160,39 @@ 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),
     );
   });
 });
+
+describe("onTextLayout", () => {
+  it("calls onTextLayout callback when text layout event occurs", () => {
+    const onTextLayoutMock = jest.fn();
+    render(<Text onTextLayout={onTextLayoutMock}>Test Text</Text>);
+
+    const textElement = screen.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,
+          },
+        ],
+      },
+    };
+    fireEvent(textElement, "onTextLayout", mockEvent);
+    expect(onTextLayoutMock).toHaveBeenCalledTimes(1);
+    expect(onTextLayoutMock).toHaveBeenCalledWith(mockEvent);
+  });
+});

package/src/Text/Text.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import {
   BaseWeight,
   LineHeight,
+  OnTextLayoutEvent,
   TextAccessibilityRole,
   TextAlign,
   TextSize,
@@ -93,6 +94,11 @@ export interface TextProps
    * More information in the [Customizing components Guide](https://atlantis.getjobber.com/guides/customizing-components).
    */
   readonly UNSAFE_style?: TypographyUnsafeStyle;
+
+  /**
+   * Callback that is called when the text is laid out.
+   */
+  readonly onTextLayout?: OnTextLayoutEvent;
 }
 
 export type TextLevel = "text" | "textSupporting";
@@ -136,6 +142,7 @@ export function Text({
   UNSAFE_style,
   underline,
   selectable,
+  onTextLayout,
 }: TextProps): JSX.Element {
   const accessibilityRole: TextAccessibilityRole = "text";
 
@@ -149,6 +156,7 @@ export function Text({
       maxFontScaleSize={maxFontScaleSize || TEXT_MAX_SCALED_FONT_SIZES[level]}
       selectable={selectable}
       underline={underline}
+      onTextLayout={onTextLayout}
       {...{
         ...levelStyles[level],
         allowFontScaling,

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

@@ -574,7 +574,7 @@ exports[`renders text with underline styling 1`] = `
         "letterSpacing": 0,
       },
       {
-        "textDecorationStyle": "dashed",
+        "textDecorationStyle": "dotted",
       },
       {
         "textDecorationColor": "hsl(197, 15%, 43%)",

package/src/Typography/Typography.test.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { render } from "@testing-library/react-native";
+import { fireEvent, render } from "@testing-library/react-native";
 import { I18nManager } from "react-native";
 import { Typography } from "./Typography";
 
@@ -251,3 +251,34 @@ describe("underline", () => {
     },
   );
 });
+
+describe("onTextLayout", () => {
+  it("calls onTextLayout callback when text layout event occurs", () => {
+    const onTextLayoutMock = jest.fn();
+    const { getByRole } = render(
+      <Typography onTextLayout={onTextLayoutMock}>Test Text</Typography>,
+    );
+
+    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,
+          },
+        ],
+      },
+    };
+    fireEvent(textElement, "onTextLayout", mockEvent);
+    expect(onTextLayoutMock).toHaveBeenCalledTimes(1);
+    expect(onTextLayoutMock).toHaveBeenCalledWith(mockEvent);
+  });
+});

package/src/Typography/Typography.tsx

@@ -14,8 +14,7 @@ import { useTypographyStyles } from "./Typography.style";
 import { capitalize } from "../utils/intl";
 import { useAtlantisTheme } from "../AtlantisThemeContext";
 
-export interface TypographyProps<T extends FontFamily>
-  extends Pick<TextProps, "selectable"> {
+export interface TypographyProps<T extends FontFamily> {
   /**
    * Text capitalization
    */
@@ -31,6 +30,13 @@ export interface TypographyProps<T extends FontFamily>
    */
   readonly align?: TextAlign;
 
+  /**
+   * Lets the user select text, to use the native copy and paste functionality.
+   * WARNING: if true, this prevents ellipsis from being shown on Android.
+   * @default true
+   */
+  readonly selectable?: boolean;
+
   /**
    * Font size
    */
@@ -44,6 +50,7 @@ export interface TypographyProps<T extends FontFamily>
   /**
    * The maximum amount of lines the text can occupy before being truncated with "...".
    * Uses predefined string values that correspond to a doubling scale for the amount of lines.
+   * WARNING: if `selectable` is true, Android will not show an ellipsis.
    */
   readonly maxLines?: TruncateLength;
 
@@ -120,6 +127,14 @@ export interface TypographyProps<T extends FontFamily>
   readonly strikeThrough?: boolean;
 
   readonly UNSAFE_style?: TypographyUnsafeStyle;
+
+  /**
+   * Callback behaves differently on iOS and Android.
+   * On iOS, it is called when the text is laid out.
+   * On Android, it is called before the text is laid out.
+   * @see https://reactnative.dev/docs/text#ontextlayout
+   */
+  readonly onTextLayout?: OnTextLayoutEvent;
 }
 
 const maxNumberOfLines = {
@@ -160,6 +175,7 @@ function InternalTypography<T extends FontFamily = "base">({
   underline,
   UNSAFE_style,
   selectable = true,
+  onTextLayout,
 }: TypographyProps<T>): JSX.Element {
   const styles = useTypographyStyles();
   const sizeAndHeight = getSizeAndHeightStyle(size, styles, lineHeight);
@@ -217,6 +233,7 @@ function InternalTypography<T extends FontFamily = "base">({
         )}
         selectable={selectable}
         selectionColor={tokens["color-brand--highlight"]}
+        onTextLayout={onTextLayout}
       >
         {text}
       </Text>
@@ -477,3 +494,5 @@ export type TruncateLength =
   | "large"
   | "extraLarge"
   | "unlimited";
+
+export type OnTextLayoutEvent = Exclude<TextProps["onTextLayout"], undefined>;

package/src/Typography/index.ts

@@ -17,6 +17,7 @@ export type {
   TextVariation,
   TypographyProps,
   TruncateLength,
+  OnTextLayoutEvent,
 } from "./Typography";
 export { getTypographyStyles, useTypographyStyles } from "./Typography.style";
 export { typographyStyles } from "./Typography.style";