@jobber/components-native 0.84.4-JOB-138679-b1552ab.68 → 0.84.4-match-mobi-accfa8a.9

package/src/BottomSheet/BottomSheet.tsx

@@ -1,14 +1,19 @@
-import type { ReactNode, Ref, RefObject } from "react";
-import React, { forwardRef, useState } from "react";
-import type { Modalize } from "react-native-modalize";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
+import type { ReactNode } from "react";
+import React, { useCallback, useImperativeHandle, useRef } from "react";
 import { Keyboard, View } from "react-native";
-import { BottomSheetOption } from "./components/BottomSheetOption";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import RNBottomSheet, {
+  BottomSheetBackdrop,
+  BottomSheetView,
+} from "@gorhom/bottom-sheet";
+import type { BottomSheetBackdropProps } from "@gorhom/bottom-sheet";
+import { tokens } from "@jobber/design";
 import { useStyles } from "./BottomSheet.style";
-import { UNSAFE_WrappedModalize } from "../ContentOverlay/UNSAFE_WrappedModalize";
-import { useIsScreenReaderEnabled } from "../hooks";
+import { BottomSheetOption } from "./components/BottomSheetOption";
+import { useBottomSheetBackHandler } from "./hooks/useBottomSheetBackHandler";
 import { Divider } from "../Divider";
 import { Heading } from "../Heading";
+import { useIsScreenReaderEnabled } from "../hooks";
 import { useAtlantisI18n } from "../hooks/useAtlantisI18n";
 
 export interface BottomSheetProps {
@@ -40,71 +45,89 @@ export interface BottomSheetProps {
   readonly onClose?: () => void;
 }
 
-export const BottomSheet = forwardRef(BottomSheetInternal);
-
-export type BottomSheetRef = Modalize | undefined;
-
-function BottomSheetInternal(
-  {
-    children,
-    showCancel,
-    loading = false,
-    heading,
-    onOpen,
-    onClose,
-  }: BottomSheetProps,
-  ref: Ref<BottomSheetRef>,
-) {
-  const isScreenReaderEnabled = useIsScreenReaderEnabled();
-  const [open, setOpen] = useState<boolean>(false);
+export interface BottomSheetRef {
+  open: () => void;
+  close: () => void;
+}
+
+export function BottomSheet({
+  children,
+  showCancel,
+  loading = false,
+  heading,
+  onOpen,
+  onClose,
+  ref,
+}: BottomSheetProps & { readonly ref?: React.Ref<BottomSheetRef> }) {
   const styles = useStyles();
+  const isScreenReaderEnabled = useIsScreenReaderEnabled();
+
+  const cancellable = (showCancel && !loading) || isScreenReaderEnabled;
+
+  const { t } = useAtlantisI18n();
+  const insets = useSafeAreaInsets();
+  const previousIndexRef = useRef(-1);
+  const bottomSheetRef = useRef<RNBottomSheet>(null);
+  const { handleSheetPositionChange } =
+    useBottomSheetBackHandler(bottomSheetRef);
+
+  useImperativeHandle(ref, () => ({
+    open: () => {
+      bottomSheetRef.current?.expand();
+    },
+    close: () => {
+      close();
+    },
+  }));
+
+  const close = useCallback(() => {
+    bottomSheetRef.current?.close();
+  }, []);
+
+  const handleChange = (index: number) => {
+    // Handle Android back button
+    handleSheetPositionChange(index);
+
+    const previousIndex = previousIndexRef.current;
+
+    if (previousIndex === -1 && index >= 0) {
+      // Transitioned from closed to open
+      dismissKeyboard();
+      onOpen?.();
+    } else if (previousIndex >= 0 && index === -1) {
+      // Transitioned from open to closed
+      dismissKeyboard();
+      onClose?.();
+    }
+
+    previousIndexRef.current = index;
+  };
 
   return (
-    <>
-      {open && <Overlay styles={styles} />}
-      <UNSAFE_WrappedModalize
-        ref={ref}
-        adjustToContentHeight={true}
-        modalStyle={styles.modal}
-        overlayStyle={styles.overlayModalize}
-        HeaderComponent={
-          heading && <Header heading={heading} styles={styles} />
-        }
-        FooterComponent={
-          <Footer
-            cancellable={(showCancel && !loading) || isScreenReaderEnabled}
-            onCancel={() => {
-              (ref as RefObject<BottomSheetRef>)?.current?.close();
-            }}
-            styles={styles}
-          />
-        }
-        withHandle={false}
-        withReactModal={isScreenReaderEnabled}
-        onOpen={openModal}
-        onClose={closeModal}
+    <RNBottomSheet
+      ref={bottomSheetRef}
+      index={-1}
+      backdropComponent={Backdrop}
+      backgroundStyle={styles.background}
+      enablePanDownToClose={true}
+      onChange={handleChange}
+      keyboardBlurBehavior="restore"
+      handleStyle={styles.handle}
+    >
+      <BottomSheetView
+        style={{
+          paddingBottom: insets.bottom + tokens["space-small"],
+          paddingTop: tokens["space-small"],
+        }}
       >
-        <View
-          style={
-            !showCancel && !isScreenReaderEnabled ? styles.children : undefined
-          }
-        >
-          {children}
-        </View>
-      </UNSAFE_WrappedModalize>
-    </>
+        {heading && <Header heading={heading} styles={styles} />}
+        {children}
+        {cancellable && (
+          <Footer styles={styles} close={close} cancelLabel={t("cancel")} />
+        )}
+      </BottomSheetView>
+    </RNBottomSheet>
   );
-
-  function openModal() {
-    onOpen?.();
-    setOpen(true);
-    dismissKeyboard();
-  }
-
-  function closeModal() {
-    onClose?.();
-    setOpen(false);
-  }
 }
 
 function Header({
@@ -122,31 +145,21 @@ function Header({
 }
 
 function Footer({
-  cancellable,
-  onCancel,
   styles,
+  close,
+  cancelLabel,
 }: {
-  readonly cancellable: boolean;
-  readonly onCancel: () => void;
   readonly styles: ReturnType<typeof useStyles>;
+  readonly close: () => void;
+  readonly cancelLabel: string;
 }) {
-  const insets = useSafeAreaInsets();
-  const { t } = useAtlantisI18n();
-
   return (
-    <View style={{ marginBottom: insets.bottom }}>
-      {cancellable && (
-        <View style={styles.children}>
-          <View style={styles.footerDivider}>
-            <Divider />
-          </View>
-          <BottomSheetOption
-            text={t("cancel")}
-            icon={"remove"}
-            onPress={onCancel}
-          />
-        </View>
-      )}
+    <View>
+      <View style={styles.footerDivider}>
+        <Divider />
+      </View>
+
+      <BottomSheetOption text={cancelLabel} icon="remove" onPress={close} />
     </View>
   );
 }
@@ -157,10 +170,16 @@ function dismissKeyboard() {
   Keyboard.dismiss();
 }
 
-function Overlay({
-  styles,
-}: {
-  readonly styles: ReturnType<typeof useStyles>;
-}) {
-  return <View style={styles.overlay} />;
+function Backdrop(bottomSheetBackdropProps: BottomSheetBackdropProps) {
+  const styles = useStyles();
+
+  return (
+    <BottomSheetBackdrop
+      {...bottomSheetBackdropProps}
+      appearsOnIndex={0}
+      disappearsOnIndex={-1}
+      style={styles.backdrop}
+      opacity={1}
+    />
+  );
 }

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/Checkbox/Checkbox.test.tsx

@@ -1,5 +1,7 @@
 import React from "react";
-import { fireEvent, render } from "@testing-library/react-native";
+import { fireEvent, render, waitFor } from "@testing-library/react-native";
+import { FormProvider, useForm } from "react-hook-form";
+import { Button } from "react-native";
 import { Checkbox } from "./Checkbox";
 
 const accessibilityLabel = "testA11y";
@@ -102,3 +104,118 @@ describe("Checkbox", () => {
     expect(getByTestId("minus2")).toBeDefined();
   });
 });
+
+describe("Checkbox with FormProvider", () => {
+  const mockOnSubmit = jest.fn();
+  const checkboxName = "testCheckbox";
+  const checkboxLabel = "Test Checkbox";
+  const saveButtonText = "Save";
+
+  function FormWithProvider({
+    defaultChecked,
+  }: {
+    readonly defaultChecked?: boolean;
+  }) {
+    const formMethods = useForm();
+
+    return (
+      <FormProvider {...formMethods}>
+        <Checkbox
+          name={checkboxName}
+          label={checkboxLabel}
+          defaultChecked={defaultChecked}
+          accessibilityLabel={accessibilityLabel}
+        />
+        <Button
+          onPress={formMethods.handleSubmit(values => mockOnSubmit(values))}
+          title={saveButtonText}
+          accessibilityLabel={saveButtonText}
+        />
+      </FormProvider>
+    );
+  }
+
+  beforeEach(() => {
+    mockOnSubmit.mockClear();
+  });
+
+  describe("defaultChecked prop sets form value", () => {
+    it("sets form value to true when defaultChecked is true", async () => {
+      const { getByLabelText } = render(
+        <FormWithProvider defaultChecked={true} />,
+      );
+
+      const saveButton = getByLabelText(saveButtonText);
+      await waitFor(() => {
+        fireEvent.press(saveButton);
+      });
+
+      expect(mockOnSubmit).toHaveBeenCalledWith({
+        [checkboxName]: true,
+      });
+    });
+
+    it("sets form value to false when defaultChecked is false", async () => {
+      const { getByLabelText } = render(
+        <FormWithProvider defaultChecked={false} />,
+      );
+
+      const saveButton = getByLabelText(saveButtonText);
+      await waitFor(() => {
+        fireEvent.press(saveButton);
+      });
+
+      expect(mockOnSubmit).toHaveBeenCalledWith({
+        [checkboxName]: false,
+      });
+    });
+
+    it("sets form value to undefined when defaultChecked is undefined", async () => {
+      const { getByLabelText } = render(<FormWithProvider />);
+
+      const saveButton = getByLabelText(saveButtonText);
+      await waitFor(() => {
+        fireEvent.press(saveButton);
+      });
+
+      expect(mockOnSubmit).toHaveBeenCalledWith({
+        [checkboxName]: undefined,
+      });
+    });
+  });
+
+  describe("checkbox value updates form value", () => {
+    it("updates form value when checkbox is toggled", async () => {
+      const { getByLabelText } = render(
+        <FormWithProvider defaultChecked={false} />,
+      );
+
+      const checkbox = getByLabelText(accessibilityLabel);
+      fireEvent.press(checkbox);
+
+      const saveButton = getByLabelText(saveButtonText);
+      await waitFor(() => {
+        fireEvent.press(saveButton);
+      });
+
+      expect(mockOnSubmit).toHaveBeenCalledWith({
+        [checkboxName]: true,
+      });
+    });
+
+    it("preserves defaultChecked value when checkbox is not interacted with", async () => {
+      const { getByLabelText } = render(
+        <FormWithProvider defaultChecked={true} />,
+      );
+
+      const saveButton = getByLabelText(saveButtonText);
+      await waitFor(() => {
+        fireEvent.press(saveButton);
+      });
+
+      expect(mockOnSubmit).toHaveBeenCalledWith({
+        [checkboxName]: true,
+      });
+    });
+  });
+});

package/src/Chip/Chip.style.ts

@@ -12,7 +12,7 @@ export const useStyles = buildThemedStyles(tokens => {
       justifyContent: "center",
       marginHorizontal: tokens["space-smaller"],
       marginTop: tokens["space-small"],
-      paddingHorizontal: tokens["space-small"],
+      paddingHorizontal: tokens["space-base"],
     },
     iconLeft: {
       marginHorizontal: tokens["space-smallest"],

package/src/Chip/Chip.tsx

@@ -5,6 +5,7 @@ import type { IconNames } from "@jobber/design";
 import { useStyles } from "./Chip.style";
 import { Icon } from "../Icon";
 import { Typography } from "../Typography";
+import type { AtlantisThemeContextValue } from "../AtlantisThemeContext";
 import { useAtlantisTheme } from "../AtlantisThemeContext";
 
 export type AccentType = "client" | "invoice" | "job" | "request" | "quote";
@@ -86,6 +87,7 @@ export function Chip({
             : tokens["color-interactive--background"],
       },
       isActive && { backgroundColor: accentColor },
+      getBorderStyle(inactiveBackgroundColor, tokens),
     ];
     const dismiss =
       (isActive || inactiveBackgroundColor === "surface") &&
@@ -96,7 +98,7 @@ export function Chip({
       iconCustomColor: iconColor,
       dismissColor: dismiss,
     };
-  }, [accent, isActive, inactiveBackgroundColor]);
+  }, [accent, isActive, inactiveBackgroundColor, getBorderStyle, styles]);
 
   const accessibilityState = useMemo(() => {
     const checkableRoles = ["radio", "switch", "togglebutton", "checkbox"];
@@ -145,3 +147,19 @@ export function Chip({
     </Pressable>
   );
 }
+
+function getBorderStyle(
+  inactiveBackgroundColor: "surface" | "background",
+  tokens: AtlantisThemeContextValue["tokens"],
+) {
+  let borderColor = "transparent";
+
+  if (inactiveBackgroundColor === "surface") {
+    borderColor = tokens["color-border"];
+  }
+
+  return {
+    borderColor,
+    borderWidth: tokens["border-base"],
+  };
+}

package/src/Content/Content.tsx

@@ -9,10 +9,15 @@ import { useSpaceAroundStyles } from "./ContentSpaceAround.style";
 export type Spacing =
   | "none"
   | "base"
+  | "slim"
   | "small"
   | "smaller"
   | "smallest"
-  | "large";
+  | "minuscule"
+  | "large"
+  | "larger"
+  | "largest"
+  | "extravagant";
 
 export interface ContentUnsafeStyle {
   container?: StyleProp<ViewStyle>;

package/src/Content/ContentHorizontal.style.ts

@@ -16,6 +16,10 @@ export const useHorizontalStyles = buildThemedStyles(tokens => {
       padding: 0,
     },
 
+    minusculeChildSpace: {
+      paddingLeft: tokens["space-minuscule"],
+    },
+
     smallestChildSpace: {
       paddingLeft: tokens["space-smallest"],
     },
@@ -28,6 +32,10 @@ export const useHorizontalStyles = buildThemedStyles(tokens => {
       paddingLeft: tokens["space-small"],
     },
 
+    slimChildSpace: {
+      paddingLeft: tokens["space-slim"],
+    },
+
     baseChildSpace: {
       paddingLeft: tokens["space-base"],
     },
@@ -35,5 +43,17 @@ export const useHorizontalStyles = buildThemedStyles(tokens => {
     largeChildSpace: {
       paddingLeft: tokens["space-large"],
     },
+
+    largerChildSpace: {
+      paddingLeft: tokens["space-larger"],
+    },
+
+    largestChildSpace: {
+      paddingLeft: tokens["space-largest"],
+    },
+
+    extravagantChildSpace: {
+      paddingLeft: tokens["space-extravagant"],
+    },
   };
 });

package/src/Content/ContentSpaceAround.style.ts

@@ -6,6 +6,10 @@ export const useSpaceAroundStyles = buildThemedStyles(tokens => {
       padding: 0,
     },
 
+    minusculeSpace: {
+      padding: tokens["space-minuscule"],
+    },
+
     smallestSpace: {
       padding: tokens["space-smallest"],
     },
@@ -18,6 +22,10 @@ export const useSpaceAroundStyles = buildThemedStyles(tokens => {
       padding: tokens["space-small"],
     },
 
+    slimSpace: {
+      padding: tokens["space-slim"],
+    },
+
     baseSpace: {
       padding: tokens["space-base"],
     },
@@ -25,5 +33,17 @@ export const useSpaceAroundStyles = buildThemedStyles(tokens => {
     largeSpace: {
       padding: tokens["space-large"],
     },
+
+    largerSpace: {
+      padding: tokens["space-larger"],
+    },
+
+    largestSpace: {
+      padding: tokens["space-largest"],
+    },
+
+    extravagantSpace: {
+      padding: tokens["space-extravagant"],
+    },
   };
 });

package/src/Content/ContentVertical.style.ts

@@ -16,6 +16,10 @@ export const useVerticalStyles = buildThemedStyles(tokens => {
       padding: 0,
     },
 
+    minusculeChildSpace: {
+      paddingTop: tokens["space-minuscule"],
+    },
+
     smallestChildSpace: {
       paddingTop: tokens["space-smallest"],
     },
@@ -28,6 +32,10 @@ export const useVerticalStyles = buildThemedStyles(tokens => {
       paddingTop: tokens["space-small"],
     },
 
+    slimChildSpace: {
+      paddingTop: tokens["space-slim"],
+    },
+
     baseChildSpace: {
       paddingTop: tokens["space-base"],
     },
@@ -35,5 +43,17 @@ export const useVerticalStyles = buildThemedStyles(tokens => {
     largeChildSpace: {
       paddingTop: tokens["space-large"],
     },
+
+    largerChildSpace: {
+      paddingTop: tokens["space-larger"],
+    },
+
+    largestChildSpace: {
+      paddingTop: tokens["space-largest"],
+    },
+
+    extravagantChildSpace: {
+      paddingTop: tokens["space-extravagant"],
+    },
   };
 });