@jobber/components-native 0.93.0 → 0.95.0

package/src/BottomSheet/hooks/useBottomSheetBackHandler.test.ts

@@ -0,0 +1,90 @@
+import { createRef } from "react";
+import type { RefObject } from "react";
+import { act, renderHook } from "@testing-library/react-native";
+import { BackHandler } from "react-native";
+import type BottomSheet from "@gorhom/bottom-sheet";
+import { useBottomSheetBackHandler } from "./useBottomSheetBackHandler";
+
+describe("useBottomSheetBackHandler", () => {
+  let mockRemove: jest.Mock;
+  let mockAddEventListener: jest.SpyInstance;
+
+  beforeEach(() => {
+    mockRemove = jest.fn();
+    mockAddEventListener = jest.spyOn(BackHandler, "addEventListener");
+    mockAddEventListener.mockReturnValue({ remove: mockRemove });
+  });
+
+  afterEach(() => {
+    mockAddEventListener.mockRestore();
+  });
+
+  it("should register BackHandler listener when sheet becomes visible", async () => {
+    const bottomSheetRef = createRef<BottomSheet | null>();
+    const { result } = renderHook(() =>
+      useBottomSheetBackHandler(bottomSheetRef),
+    );
+
+    await act(async () => {
+      result.current.handleSheetPositionChange(0);
+    });
+
+    expect(mockAddEventListener).toHaveBeenCalledWith(
+      "hardwareBackPress",
+      expect.any(Function),
+    );
+  });
+
+  it("should call close() when back button is pressed", async () => {
+    const mockClose = jest.fn();
+    const bottomSheetRef = {
+      current: {
+        close: mockClose,
+      } as unknown as BottomSheet,
+    } as RefObject<BottomSheet | null>;
+
+    const { result } = renderHook(() =>
+      useBottomSheetBackHandler(bottomSheetRef),
+    );
+
+    await act(async () => {
+      result.current.handleSheetPositionChange(0);
+    });
+
+    const registeredCallback = mockAddEventListener.mock.calls[0][1];
+    const returnValue = registeredCallback();
+
+    expect(mockClose).toHaveBeenCalled();
+    expect(returnValue).toBe(true);
+  });
+
+  it("should remove listener when sheet is dismissed", async () => {
+    const bottomSheetRef = createRef<BottomSheet | null>();
+    const { result } = renderHook(() =>
+      useBottomSheetBackHandler(bottomSheetRef),
+    );
+
+    await act(async () => {
+      result.current.handleSheetPositionChange(0);
+    });
+
+    await act(async () => {
+      result.current.handleSheetPositionChange(-1);
+    });
+
+    expect(mockRemove).toHaveBeenCalled();
+  });
+
+  it("should not register listener when index is negative", async () => {
+    const bottomSheetRef = createRef<BottomSheet | null>();
+    const { result } = renderHook(() =>
+      useBottomSheetBackHandler(bottomSheetRef),
+    );
+
+    await act(async () => {
+      result.current.handleSheetPositionChange(-1);
+    });
+
+    expect(mockAddEventListener).not.toHaveBeenCalled();
+  });
+});

package/src/BottomSheet/hooks/useBottomSheetBackHandler.ts

@@ -0,0 +1,41 @@
+import { useCallback, useRef } from "react";
+import { BackHandler, type NativeEventSubscription } from "react-native";
+import type BottomSheet from "@gorhom/bottom-sheet";
+
+/**
+ * Hook that closes the bottom sheet on the hardware back button press if it is visible
+ * @param bottomSheetRef ref to the bottom sheet component
+ */
+export function useBottomSheetBackHandler(
+  bottomSheetRef: React.RefObject<BottomSheet | null>,
+): {
+  handleSheetPositionChange: (index: number) => void;
+} {
+  const backHandlerSubscriptionRef = useRef<NativeEventSubscription | null>(
+    null,
+  );
+
+  const handleSheetPositionChange = useCallback(
+    (index: number) => {
+      const isBottomSheetVisible = index >= 0;
+
+      if (isBottomSheetVisible && !backHandlerSubscriptionRef.current) {
+        // Setup the back handler if the bottom sheet is right in front of the user
+        backHandlerSubscriptionRef.current = BackHandler.addEventListener(
+          "hardwareBackPress",
+          () => {
+            bottomSheetRef.current?.close();
+
+            return true;
+          },
+        );
+      } else if (!isBottomSheetVisible) {
+        backHandlerSubscriptionRef.current?.remove();
+        backHandlerSubscriptionRef.current = null;
+      }
+    },
+    [bottomSheetRef],
+  );
+
+  return { handleSheetPositionChange };
+}

package/src/InputText/InputText.tsx

@@ -126,7 +126,7 @@ export interface InputTextProps
   /**
    * Callback that is called when the text input is blurred
    */
-  readonly onBlur?: () => void;
+  readonly onBlur?: (event?: FocusEvent) => void;
 
   /**
    * VoiceOver will read this string when a user selects the associated element
@@ -436,10 +436,10 @@ function InputTextInternal(
           setFocused(true);
           onFocus?.(event);
         }}
-        onBlur={() => {
+        onBlur={event => {
           _name && setFocusedInput("");
           setFocused(false);
-          onBlur?.();
+          onBlur?.(event);
           field.onBlur();
           trimWhitespace(inputTransform(field.value), updateFormAndState);
         }}

package/src/ProgressBar/ProgressBar.test.tsx

@@ -65,3 +65,112 @@ describe("with stepped variation", () => {
     expect(stepElements).toHaveLength(1);
   });
 });
+
+describe("ProgressBar (native) - UNSAFE_style", () => {
+  it("applies UNSAFE_style.container to the outer wrapper", () => {
+    const containerStyle = { padding: 12, backgroundColor: "papayawhip" };
+    render(
+      <ProgressBar
+        total={100}
+        current={40}
+        UNSAFE_style={{ container: containerStyle }}
+      />,
+    );
+
+    const progressBar = screen.getByRole("progressbar");
+
+    expect(progressBar.props.style).toEqual(
+      expect.objectContaining(containerStyle),
+    );
+  });
+
+  it("applies UNSAFE_style.progressBarContainer and track in progress variation", () => {
+    const progressBarContainer = { height: 22, borderRadius: 10 };
+    const track = { backgroundColor: "#eee" };
+
+    render(
+      <ProgressBar
+        total={100}
+        current={30}
+        UNSAFE_style={{
+          progressBarContainer,
+          track,
+        }}
+      />,
+    );
+
+    const progressContainer = screen.getByTestId("progressbar-container");
+
+    expect(progressContainer.props.style).toEqual(
+      expect.arrayContaining([expect.objectContaining(progressBarContainer)]),
+    );
+
+    const trackView = screen.getByTestId("progressbar-track");
+    expect(trackView.props.style).toEqual(
+      expect.arrayContaining([expect.objectContaining(track)]),
+    );
+  });
+
+  it("applies UNSAFE_style.inProgressFill and fill in progress variation", () => {
+    const inProgressFill = { backgroundColor: "#f59e0b" };
+    const fill = { backgroundColor: "#10b981" };
+
+    render(
+      <ProgressBar
+        total={100}
+        current={30}
+        inProgress={10}
+        UNSAFE_style={{
+          inProgressFill,
+          fill,
+        }}
+      />,
+    );
+
+    const inProgressView = screen.getByTestId("progressbar-inprogress");
+    const fillView = screen.getByTestId("progressbar-fill");
+
+    expect(inProgressView.props.style).toEqual(
+      expect.arrayContaining([expect.objectContaining(inProgressFill)]),
+    );
+    expect(fillView.props.style).toEqual(
+      expect.arrayContaining([expect.objectContaining(fill)]),
+    );
+  });
+
+  it("applies UNSAFE_style.progressBarContainer and step in stepped variation", () => {
+    const progressBarContainer = { height: 12 };
+    const step = { backgroundColor: "#d1d5db" };
+
+    render(
+      <ProgressBar
+        variation="stepped"
+        total={4}
+        current={2}
+        inProgress={1}
+        UNSAFE_style={{ progressBarContainer, step }}
+      />,
+    );
+
+    const steppedContainer = screen.getByTestId("progressbar-container");
+
+    expect(steppedContainer.props.style).toEqual(
+      expect.arrayContaining([expect.objectContaining(progressBarContainer)]),
+    );
+
+    // Steps are rendered with testIDs depending on state; collect all steps by known IDs
+    const stepNodes = [
+      ...screen.getAllByTestId("progress-step-completed"),
+      ...screen.getAllByTestId("progress-step-in-progress"),
+      ...screen.getAllByTestId("progress-step-incomplete"),
+    ];
+
+    // At least one step should exist and contain the custom style
+    expect(stepNodes.length).toBeGreaterThan(0);
+    stepNodes.forEach(node => {
+      expect(node.props.style).toEqual(
+        expect.arrayContaining([expect.objectContaining(step)]),
+      );
+    });
+  });
+});

package/src/ProgressBar/ProgressBar.tsx

@@ -17,6 +17,7 @@ export function ProgressBar({
   header,
   variation = "progress",
   size = "base",
+  UNSAFE_style,
 }: ProgressBarProps) {
   const { t } = useAtlantisI18n();
   const styles = useStyles();
@@ -27,6 +28,7 @@ export function ProgressBar({
       accessible
       accessibilityRole="progressbar"
       accessibilityLabel={getA11yLabel()}
+      style={UNSAFE_style?.container}
     >
       {header}
       {variation === "stepped" ? (
@@ -38,31 +40,45 @@ export function ProgressBar({
           }
           loading={loading}
           inProgress={inProgress}
+          UNSAFE_style={UNSAFE_style}
         />
       ) : (
-        <View style={[styles.progressBarContainer, sizeStyles[size]]}>
+        <View
+          testID="progressbar-container"
+          style={[
+            styles.progressBarContainer,
+            sizeStyles[size],
+            UNSAFE_style?.progressBarContainer,
+          ]}
+        >
           <ProgressBarInner
+            testID="progressbar-track"
             width={100}
             animationDuration={0}
             color={
               reverseTheme ? undefined : tokens["color-interactive--background"]
             }
+            style={UNSAFE_style?.track}
           />
           {!loading && (
             <>
               {inProgress && inProgress > 0 ? (
                 <ProgressBarInner
+                  testID="progressbar-inprogress"
                   width={calculateWidth(total, current + inProgress)}
                   color={tokens["color-informative"]}
                   animationDuration={800}
+                  style={UNSAFE_style?.inProgressFill}
                 />
               ) : (
                 <></>
               )}
               <ProgressBarInner
+                testID="progressbar-fill"
                 width={calculateWidth(total, current)}
                 color={tokens["color-interactive"]}
                 animationDuration={600}
+                style={UNSAFE_style?.fill}
               />
             </>
           )}

package/src/ProgressBar/ProgressBarInner.tsx

@@ -1,37 +1,34 @@
 import React from "react";
 import { View } from "react-native";
-// import Reanimated from "react-native-reanimated";
-// import { useTiming } from "utils/reanimated";
+import type { StyleProp, ViewStyle } from "react-native";
 import { useStyles } from "./ProgressBar.style";
 
 interface ProgressBarInnerProps {
   readonly width: number;
   readonly animationDuration?: number;
   readonly color?: string;
+  readonly style?: StyleProp<ViewStyle>;
+  readonly testID?: string;
 }
 
 export function ProgressBarInner({
   width,
-  // animationDuration = 0,
   color,
+  style,
+  testID,
 }: ProgressBarInnerProps) {
-  // Animation breaking on Android
-  // const [animatedOpacity] = useTiming({
-  //   duration: animationDuration,
-  //   fromValue: 0,
-  //   toValue: 1,
-  // });
   const styles = useStyles();
 
   return (
     <View
+      testID={testID}
       style={[
         styles.progressBarInner,
         {
           width: `${width}%`,
-          // opacity: animatedOpacity,
           ...(color && { backgroundColor: color }),
         },
+        style,
       ]}
     />
   );

package/src/ProgressBar/ProgressBarStepped.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { View } from "react-native";
 import { useStyles } from "./ProgressBar.style";
+import type { ProgressBarUnsafeStyle } from "./types";
 
 interface ProgressBarSteppedProps {
   readonly total: number;
@@ -8,6 +9,7 @@ interface ProgressBarSteppedProps {
   readonly color?: string;
   readonly loading?: boolean;
   readonly inProgress?: number;
+  readonly UNSAFE_style?: ProgressBarUnsafeStyle;
 }
 
 export function ProgressBarStepped({
@@ -16,11 +18,19 @@ export function ProgressBarStepped({
   color,
   loading,
   inProgress,
+  UNSAFE_style,
 }: ProgressBarSteppedProps) {
   const styles = useStyles();
 
   return (
-    <View style={[styles.progressBarContainer, { height: 10 }]}>
+    <View
+      testID="progressbar-container"
+      style={[
+        styles.progressBarContainer,
+        { height: 10 },
+        UNSAFE_style?.progressBarContainer,
+      ]}
+    >
       {Array.from({ length: total }).map((_, index) => {
         const step = index + 1;
         const isCompleted = step <= current;
@@ -39,6 +49,7 @@ export function ProgressBarStepped({
                 step <= inProgressSteps &&
                 styles.inProgressStep,
               lastStep && { marginRight: 0 },
+              UNSAFE_style?.step,
             ]}
             testID={
               isCompleted

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

@@ -18,8 +18,10 @@ exports[`renders blue inProgress bar when 1 or more jobs is in progress 1`] = `
         {
           "height": 16,
         },
+        undefined,
       ]
     }
+    testID="progressbar-container"
   >
     <View
       style={
@@ -37,8 +39,10 @@ exports[`renders blue inProgress bar when 1 or more jobs is in progress 1`] = `
             "backgroundColor": "hsl(51, 17%, 85%)",
             "width": "100%",
           },
+          undefined,
         ]
       }
+      testID="progressbar-track"
     />
     <View
       style={
@@ -56,8 +60,10 @@ exports[`renders blue inProgress bar when 1 or more jobs is in progress 1`] = `
             "backgroundColor": "hsl(207, 79%, 57%)",
             "width": "0%",
           },
+          undefined,
         ]
       }
+      testID="progressbar-inprogress"
     />
     <View
       style={
@@ -75,8 +81,10 @@ exports[`renders blue inProgress bar when 1 or more jobs is in progress 1`] = `
             "backgroundColor": "hsl(107, 58%, 33%)",
             "width": "0%",
           },
+          undefined,
         ]
       }
+      testID="progressbar-fill"
     />
   </View>
 </View>
@@ -100,8 +108,10 @@ exports[`renders green CompletedProgress bar when 1 or more jobs is completed 1`
         {
           "height": 16,
         },
+        undefined,
       ]
     }
+    testID="progressbar-container"
   >
     <View
       style={
@@ -119,8 +129,10 @@ exports[`renders green CompletedProgress bar when 1 or more jobs is completed 1`
             "backgroundColor": "hsl(51, 17%, 85%)",
             "width": "100%",
           },
+          undefined,
         ]
       }
+      testID="progressbar-track"
     />
     <View
       style={
@@ -138,8 +150,10 @@ exports[`renders green CompletedProgress bar when 1 or more jobs is completed 1`
             "backgroundColor": "hsl(107, 58%, 33%)",
             "width": "50%",
           },
+          undefined,
         ]
       }
+      testID="progressbar-fill"
     />
   </View>
 </View>

package/src/ProgressBar/types.ts

@@ -1,4 +1,5 @@
 import type { ReactNode } from "react";
+import type { StyleProp, ViewStyle } from "react-native";
 
 export interface ProgressBarProps {
   /**
@@ -44,4 +45,25 @@ export interface ProgressBarProps {
    * @default base
    */
   readonly size?: "smaller" | "small" | "base";
+
+  /** **Use at your own risk:** Custom style for specific elements. This should only be used as a
+   * **last resort**. Using this may result in unexpected side effects.
+   * More information in the [Customizing components Guide](https://atlantis.getjobber.com/guides/customizing-components).
+   */
+  readonly UNSAFE_style?: ProgressBarUnsafeStyle;
+}
+
+export interface ProgressBarUnsafeStyle {
+  /** Styles applied to the outer accessible wrapper (role="progressbar"). */
+  container?: StyleProp<ViewStyle>;
+  /** Styles applied to the inner bar container (track container) – controls bar height/rounding. */
+  progressBarContainer?: StyleProp<ViewStyle>;
+  /** Styles applied to each step block in the stepped variation. */
+  step?: StyleProp<ViewStyle>;
+  /** Track/background bar in 'progress' variation (full-width inner) */
+  track?: StyleProp<ViewStyle>;
+  /** Filled/completed portion in 'progress' variation */
+  fill?: StyleProp<ViewStyle>;
+  /** In-progress overlay portion in 'progress' variation */
+  inProgressFill?: StyleProp<ViewStyle>;
 }