@jobber/components-native 0.89.5-JOB-140604-2d32fc8.44 → 0.89.5-JOB-140604-8777ec5.52

package/src/ActionLabel/ActionLabel.tsx

@@ -43,7 +43,7 @@ export function ActionLabel({
   type = "default",
   disabled = false,
   align = "center",
-}: ActionLabelProps): JSX.Element {
+}: ActionLabelProps) {
   return (
     <Typography
       color={getColor(variation, disabled)}

package/src/ActivityIndicator/ActivityIndicator.tsx

@@ -3,9 +3,7 @@ import type { ActivityIndicatorProps } from "react-native";
 import { ActivityIndicator } from "react-native";
 import { useAtlantisTheme } from "../AtlantisThemeContext";
 
-export function JobberActivityIndicator(
-  props: ActivityIndicatorProps,
-): JSX.Element {
+export function JobberActivityIndicator(props: ActivityIndicatorProps) {
   const { tokens } = useAtlantisTheme();
 
   return (

package/src/AutoLink/AutoLink.tsx

@@ -11,7 +11,7 @@ export function AutoLink({
   bottomTabsVisible = true,
   selectable = true,
   ...rest
-}: AutoLinkProps): JSX.Element {
+}: AutoLinkProps) {
   const { splitText, matches } = useCreateLinkedText({ text, ...rest });
   const { tokens } = useAtlantisTheme();
 

package/src/AutoLink/components/ComposeTextWithLinks/ComposeTextWithLinks.tsx

@@ -12,7 +12,7 @@ export function ComposeTextWithLinks({
   match,
   bottomTabsVisible,
   selectable = true,
-}: ComposeTextWithLinksProps): JSX.Element {
+}: ComposeTextWithLinksProps) {
   const { t } = useAtlantisI18n();
 
   const isLink = match?.getType();

package/src/AutoLink/components/Link/Link.tsx

@@ -8,11 +8,7 @@ interface LinkProps {
   readonly onLongPress?: () => void;
 }
 
-export function Link({
-  children,
-  onPress,
-  onLongPress,
-}: LinkProps): JSX.Element {
+export function Link({ children, onPress, onLongPress }: LinkProps) {
   return (
     <RNText onPress={onPress} onLongPress={onLongPress}>
       <Text variation="interactive">{children}</Text>

package/src/Banner/Banner.tsx

@@ -18,7 +18,7 @@ export function Banner({
   type,
   children,
   icon,
-}: BannerProps): JSX.Element {
+}: BannerProps) {
   const bannerIcon = icon || getBannerIcon(type);
 
   const shouldFlow =
@@ -60,7 +60,7 @@ export function Banner({
   );
 }
 
-function BannerChildren({ children }: PropsWithChildren): JSX.Element {
+function BannerChildren({ children }: PropsWithChildren) {
   if (!children) return <></>;
 
   if (children && typeof children === "string") {

package/src/Banner/components/BannerIcon/BannerIcon.tsx

@@ -10,7 +10,7 @@ export interface BannerIconProps {
   readonly type: BannerTypes;
 }
 
-export function BannerIcon({ icon, type }: BannerIconProps): JSX.Element {
+export function BannerIcon({ icon, type }: BannerIconProps) {
   const styles = useStyles();
 
   return (

package/src/BottomSheet/BottomSheet.stories.tsx

@@ -100,7 +100,6 @@ const HeaderFooterInputTextTemplate = () => {
           text="Send message"
           onPress={() => alert("send message")}
         />
-        <BottomSheet.InputText placeholder="Enter your name" />
         <BottomSheetOption
           icon="phone"
           iconColor="greyBlue"

package/src/BottomSheet/BottomSheet.tsx

@@ -1,4 +1,4 @@
-import type { ReactNode, Ref } from "react";
+import type { ReactNode } from "react";
 import React, { useCallback, useImperativeHandle, useRef } from "react";
 import { Keyboard, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
@@ -13,7 +13,7 @@ import type {
 } from "@gorhom/bottom-sheet";
 import { useStyles } from "./BottomSheet.style";
 import { BottomSheetOption } from "./components/BottomSheetOption";
-import { BottomSheetInputText } from "./components/BottomSheetInputText/BottomSheetInputText";
+import { useBottomSheetBackHandler } from "./hooks/useBottomSheetBackHandler";
 import { Divider } from "../Divider";
 import { Heading } from "../Heading";
 import { useIsScreenReaderEnabled } from "../hooks";
@@ -46,11 +46,6 @@ export interface BottomSheetProps {
    * Callback that is called when the overlay is closed.
    */
   readonly onClose?: () => void;
-
-  /**
-   * Ref to the bottom sheet component.
-   */
-  readonly ref?: Ref<BottomSheetRef>;
 }
 
 export interface BottomSheetRef {
@@ -66,15 +61,18 @@ export function BottomSheet({
   onOpen,
   onClose,
   ref,
-}: BottomSheetProps) {
+}: 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: () => {
@@ -86,6 +84,9 @@ export function BottomSheet({
   }));
 
   const handleChange = (index: number) => {
+    // Handle Android back button
+    handleSheetPositionChange(index);
+
     const previousIndex = previousIndexRef.current;
 
     if (previousIndex === -1 && index >= 0) {
@@ -185,5 +186,3 @@ function Backdrop(bottomSheetBackdropProps: BottomSheetBackdropProps) {
     />
   );
 }
-
-BottomSheet.InputText = BottomSheetInputText;

package/src/BottomSheet/components/BottomSheetOption/BottomSheetOption.tsx

@@ -25,7 +25,7 @@ export function BottomSheetOption({
   destructive,
   textTransform = "capitalize",
   onPress,
-}: BottomSheetOptionProps): JSX.Element {
+}: BottomSheetOptionProps) {
   const destructiveColor = "destructive";
   const textVariation = destructive ? destructiveColor : "subdued";
   const styles = useStyles();

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

@@ -28,7 +28,7 @@ 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.tsx

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

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.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 (

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

@@ -51,7 +51,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/ContentOverlay/ContentOverlay.tsx

@@ -57,7 +57,7 @@ function ContentOverlayInternal(
     avoidKeyboardLikeIOS,
   }: ContentOverlayProps,
   ref: Ref<ContentOverlayRef>,
-): JSX.Element {
+) {
   isDraggable = onBeforeExit ? false : isDraggable;
   const isCloseableOnOverlayTap = onBeforeExit ? false : true;
   const { t } = useAtlantisI18n();
@@ -71,9 +71,9 @@ function ContentOverlayInternal(
   const shouldShowDismiss =
     showDismiss || isScreenReaderEnabled || isFullScreenOrTopPosition;
   const [showHeaderShadow, setShowHeaderShadow] = useState<boolean>(false);
-  const overlayHeader = useRef<View>();
+  const overlayHeader = useRef<View>(null);
 
-  const internalRef = useRef<Modalize>();
+  const internalRef = useRef<Modalize>(null);
   const [modalizeMethods, setModalizeMethods] = useState<ContentOverlayRef>();
   const callbackInternalRef = useCallback((instance: Modalize) => {
     if (instance && !internalRef.current) {
@@ -244,7 +244,6 @@ function ContentOverlayInternal(
           {shouldShowDismiss && (
             <View
               style={styles.dismissButton}
-              // @ts-expect-error tsc-ci
               ref={overlayHeader}
               accessibilityLabel={accessibilityLabel || closeOverlayA11YLabel}
               accessible={true}

package/src/Disclosure/Disclosure.tsx

@@ -61,7 +61,7 @@ export function Disclosure({
   onToggle,
   isEmpty,
   animationDuration = staticTokens["timing-slowest"],
-}: DisclosureProps): JSX.Element {
+}: DisclosureProps) {
   const styles = useStyles();
 
   return (

package/src/Divider/Divider.tsx

@@ -26,7 +26,7 @@ export function Divider({
   size = "base",
   direction = "horizontal",
   testID = "Divider",
-}: DividerProps): JSX.Element {
+}: DividerProps) {
   const horizontalStyles = useHorizontalStyles();
   const verticalStyles = useVerticalStyles();
 

package/src/EmptyState/EmptyState.tsx

@@ -65,7 +65,7 @@ export function EmptyState({
   primaryAction,
   secondaryAction,
   iconColor = "blue",
-}: EmptyStateProps): JSX.Element {
+}: EmptyStateProps) {
   const styles = useStyles();
 
   return (

package/src/ErrorMessageWrapper/ErrorMessageWrapper.tsx

@@ -34,7 +34,7 @@ export function ErrorMessageWrapper({
   message,
   wrapFor = "default",
   children,
-}: ErrorMessageWrapperProps): JSX.Element {
+}: ErrorMessageWrapperProps) {
   const errorMessageContext = useErrorMessageContext();
   const register = errorMessageContext?.register;
   const unregister = errorMessageContext?.unregister;

package/src/ErrorMessageWrapper/context/ErrorMessageProvider.tsx

@@ -13,9 +13,7 @@ interface ErrorMessageProviderProps {
   readonly children: ReactNode;
 }
 
-export function ErrorMessageProvider({
-  children,
-}: ErrorMessageProviderProps): JSX.Element {
+export function ErrorMessageProvider({ children }: ErrorMessageProviderProps) {
   const [elements, setElements] = useState<
     ErrorMessageContextProps["elements"]
   >({});
@@ -51,13 +49,13 @@ export function ErrorMessageProvider({
   }
 }
 
-function getMeasure(ref: RefObject<View>) {
+function getMeasure(ref: RefObject<View | null>) {
   return function measure(...args: Parameters<NativeMethods["measureLayout"]>) {
     ref.current?.measureLayout(...args);
   };
 }
 
-function getAccessibilityFocus(ref: RefObject<View>) {
+function getAccessibilityFocus(ref: RefObject<View | null>) {
   return function accessibilityFocus() {
     const reactTag = findNodeHandle(ref.current);
     reactTag &&

package/src/ErrorMessageWrapper/context/types.ts

@@ -50,7 +50,7 @@ type ElementID = Element["id"];
 export interface ErrorMessageContextRegisterParams {
   readonly id: ElementID;
   readonly hasErrorMessage: Methods["hasErrorMessage"];
-  readonly ref: RefObject<View>;
+  readonly ref: RefObject<View | null>;
 }
 
 export interface ErrorMessageContextProps {

package/src/Flex/Flex.tsx

@@ -11,7 +11,7 @@ export function Flex({
   align = "center",
   gap = "base",
   children,
-}: PropsWithChildren<FlexProps>): JSX.Element {
+}: PropsWithChildren<FlexProps>) {
   if (template.length === 1) {
     console.warn("Please use <Content /> component for a stacked layout");
   }
@@ -54,7 +54,7 @@ function Row({
   align = "center",
   gap = "base",
   children,
-}: PropsWithChildren<FlexProps>): JSX.Element {
+}: PropsWithChildren<FlexProps>) {
   return (
     <View testID="ATL-Flex-Row" style={[styles.row, { alignItems: align }]}>
       {Children.map(children, (child, index) => (