@jobber/components-native 0.84.4-match-mobi-55ef4ec.7 → 0.84.4-match-mobi-540af48.10

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/Button/Button.tsx

@@ -124,7 +124,7 @@ export function Button({
   icon,
   testID,
   UNSAFE_style,
-}: ButtonProps): JSX.Element {
+}: ButtonProps) {
   const { tokens } = useAtlantisTheme();
   const styles = useStyles();
 

package/src/Button/components/InternalButtonLoading/InternalButtonLoading.tsx

@@ -23,13 +23,12 @@ const leftOffset = -1 * offset;
 
 // looks like deprecation for FlatList in reanimated is cascading down to other exports
 // This is not createAnimatedComponent(FlatList), we are fine
-// eslint-disable-next-line import/no-deprecated
 const AnimatedImage = Animated.createAnimatedComponent(ImageBackground);
 
 function InternalButtonLoadingInternal({
   variation,
   type,
-}: InternalButtonLoadingProps): JSX.Element {
+}: InternalButtonLoadingProps) {
   const translateX = useSharedValue(0);
   translateX.value = withRepeat(
     withTiming(offset, {

package/src/ButtonGroup/ButtonGroup.test.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { fireEvent, render } from "@testing-library/react-native";
+import { fireEvent, render, waitFor } from "@testing-library/react-native";
 import { Host } from "react-native-portalize";
 import { Alert } from "react-native";
 import type { ButtonGroupProps } from "./ButtonGroup";
@@ -168,11 +168,11 @@ it("fires the press handlers when the primary action buttons are pressed", () =>
   expect(editAction).toHaveBeenCalled();
 });
 
-it("opens the secondary action menu when the More button is pressed", () => {
+it("opens the secondary action menu when the More button is pressed", async () => {
   const createAction = jest.fn();
   const editAction = jest.fn();
   const deleteAction = jest.fn();
-  const { getByText, queryByText, getByLabelText } = render(
+  const { findByText, queryByText, getByLabelText } = render(
     <ButtonGroupForTest>
       <ButtonGroup.PrimaryAction
         label="Create"
@@ -196,14 +196,14 @@ it("opens the secondary action menu when the More button is pressed", () => {
 
   fireEvent.press(getByLabelText("More"));
 
-  expect(getByText("Edit")).not.toBeNull();
-  expect(getByText("Delete")).not.toBeNull();
+  expect(await findByText("Edit")).not.toBeNull();
+  expect(await findByText("Delete")).not.toBeNull();
 });
 
-it("renders heading and cancel options if passed in", () => {
+it("renders heading and cancel options if passed in", async () => {
   const createAction = jest.fn();
   const editAction = jest.fn();
-  const { getByText, getByLabelText } = render(
+  const { findByText, getByLabelText } = render(
     <ButtonGroupForTest
       bottomSheetHeading={"Heading"}
       showCancelInBottomSheet={true}
@@ -223,8 +223,8 @@ it("renders heading and cancel options if passed in", () => {
 
   fireEvent.press(getByLabelText("More"));
 
-  expect(getByText("Heading")).not.toBeNull();
-  expect(getByText("Cancel")).not.toBeNull();
+  expect(await findByText("Heading")).not.toBeNull();
+  expect(await findByText("Cancel")).not.toBeNull();
 });
 
 it("renders custom button for primary action if passed in", () => {
@@ -249,7 +249,7 @@ it("renders custom button for primary action if passed in", () => {
   expect(queryByText("Create")).toBeNull();
 });
 
-it("calls onOpenBottomSheet when the secondary actions are opened", () => {
+it("calls onOpenBottomSheet when the secondary actions are opened", async () => {
   const createAction = jest.fn();
   const editAction = jest.fn();
   const deleteAction = jest.fn();
@@ -275,7 +275,9 @@ it("calls onOpenBottomSheet when the secondary actions are opened", () => {
 
   fireEvent.press(getByLabelText("More"));
 
-  expect(mockOnOpen).toHaveBeenCalled();
+  await waitFor(() => {
+    expect(mockOnOpen).toHaveBeenCalledTimes(1);
+  });
 });
 
 describe("ButtonGroup Offline/Online", () => {

package/src/ButtonGroup/ButtonGroup.tsx

@@ -45,10 +45,10 @@ export function ButtonGroup({
   onOpenBottomSheet,
   onCloseBottomSheet,
   allowTapWhenOffline = false,
-}: ButtonGroupProps): JSX.Element {
+}: ButtonGroupProps) {
   const { t } = useAtlantisI18n();
   const { handlePress } = usePreventTapWhenOffline();
-  const secondaryActionsRef = useRef<BottomSheetRef>();
+  const secondaryActionsRef = useRef<BottomSheetRef>(null);
   const { primaryActions, secondaryActions } = getActions(children);
   const styles = useStyles();
 

package/src/ButtonGroup/ButtonGroupAction.tsx

@@ -1,5 +1,5 @@
 import type { IconColorNames, IconNames } from "@jobber/design";
-import React from "react";
+import React, { type ReactElement } from "react";
 import type { ButtonType, ButtonVariation } from "../Button";
 
 export interface ButtonGroupActionProps {
@@ -49,18 +49,18 @@ export interface ButtonGroupPrimaryActionProps extends ButtonGroupActionProps {
   /**
    * Optional custom button that can be rendered in place of the primary action button
    */
-  customButton?: JSX.Element;
+  customButton?: ReactElement;
   loading?: boolean;
 }
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-export function PrimaryAction(_: ButtonGroupPrimaryActionProps): JSX.Element {
+export function PrimaryAction(_: ButtonGroupPrimaryActionProps) {
   return <></>;
 }
 
 export function SecondaryAction(
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   _: ButtonGroupSecondaryActionProps,
-): JSX.Element {
+) {
   return <></>;
 }

package/src/ButtonGroup/components/SecondaryActionSheet/SecondaryActionSheet.tsx

@@ -9,7 +9,7 @@ import { BottomSheet } from "../../../BottomSheet/BottomSheet";
 
 interface SecondaryActionSheetProps {
   readonly actions: ButtonGroupSecondaryActionProps[];
-  readonly secondaryActionsRef: RefObject<BottomSheetRef>;
+  readonly secondaryActionsRef: RefObject<BottomSheetRef | null>;
   readonly showCancel?: boolean;
   readonly heading?: string;
   readonly onOpenBottomSheet?: () => void;
@@ -23,7 +23,7 @@ export function SecondaryActionSheet({
   showCancel,
   onOpenBottomSheet,
   onCloseBottomSheet,
-}: SecondaryActionSheetProps): JSX.Element {
+}: SecondaryActionSheetProps) {
   return (
     <Portal>
       <BottomSheet

package/src/Card/Card.tsx

@@ -80,7 +80,7 @@ export function Card({
   testID = "card",
   error,
   elevation = "none",
-}: CardProps): JSX.Element {
+}: CardProps) {
   const styles = useStyles();
 
   return (

package/src/Card/components/InternalCardHeader.tsx

@@ -15,7 +15,7 @@ export function InternalCardHeader({
   children,
   testID,
   collapsable,
-}: InternalCardHeaderProps): JSX.Element {
+}: InternalCardHeaderProps) {
   const styles = useStyles();
 
   const conditionalChildStyling = collapsable ? undefined : styles.noChildren;

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

@@ -79,7 +79,7 @@ export type CheckboxProps = XOR<
   UncontrolledCheckboxProps
 >;
 
-export function Checkbox(props: CheckboxProps): JSX.Element {
+export function Checkbox(props: CheckboxProps) {
   if (props.checked !== undefined && props.onChange !== undefined) {
     return <CheckboxInternal {...props} />;
   } else if (props.name) {
@@ -113,7 +113,7 @@ function CheckboxInternal({
   assistiveText,
   onChange,
   accessibilityLabel,
-}: CheckboxProps): JSX.Element {
+}: CheckboxProps) {
   const internalValue = checked ?? !!defaultChecked;
 
   const iconName = indeterminate ? "minus2" : "checkmark";

package/src/Checkbox/CheckboxGroup.test.tsx

@@ -66,7 +66,7 @@ function SetupWithForm({
 }: {
   readonly initialValues: CheckboxGroupFormData;
   readonly onChangeHandlers?: CheckboxGroupFormOnChangeHandlers;
-}): JSX.Element {
+}) {
   const formMethods = useForm({ defaultValues: initialValues });
 
   return (
@@ -172,12 +172,8 @@ describe("when the parent checkbox does not have a label", () => {
   it("does not render the parent checkbox", async () => {
     const { checkboxGroup } = setup(undefined);
 
-    const findParentCheckbox = () => {
-      checkboxGroup.getByLabelText(parentCheckboxLabel);
-    };
-    expect(findParentCheckbox).toThrow(
-      "Unable to find an element with accessibilityLabel: all condiments",
-    );
+    const parentCheckbox = checkboxGroup.queryByLabelText(parentCheckboxLabel);
+    expect(parentCheckbox).toBeNull();
   });
 });
 

package/src/Checkbox/CheckboxGroup.tsx

@@ -46,7 +46,7 @@ export function CheckboxGroup({
   onChange,
   name,
   ...rest
-}: CheckboxGroupProps): JSX.Element {
+}: CheckboxGroupProps) {
   if (state !== undefined && onChange !== undefined) {
     return (
       <CheckboxGroupInternal
@@ -92,7 +92,7 @@ function CheckboxGroupInternal({
   accessibilityLabel,
   onChange,
   name: parentName,
-}: ControlledCheckboxGroupProps): JSX.Element {
+}: ControlledCheckboxGroupProps) {
   const childrenNames = React.Children.map(children, child => {
     const name = throwErrorIfItHasNoName(child.props.name);
 

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";
@@ -68,7 +69,7 @@ export function Chip({
   accessibilityLabel,
   accessibilityRole = "radio",
   accent,
-}: ChipProps): JSX.Element {
+}: ChipProps) {
   const styles = useStyles();
   const { tokens } = useAtlantisTheme();
   const defaultAccentColor = tokens["color-surface--reverse"];
@@ -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>;
@@ -51,7 +56,7 @@ export function Content({
   childSpacing = "base",
   direction = "vertical",
   UNSAFE_style,
-}: ContentProps): JSX.Element {
+}: ContentProps) {
   const horizontalStyles = useHorizontalStyles();
   const verticalStyles = useVerticalStyles();
   const spaceAroundStyles = useSpaceAroundStyles();

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"],
+    },
   };
 });