@jobber/components-native 0.84.4-JOB-124066-166e539.11 → 0.84.4-JOB-138679-b1552ab.68

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

@@ -68,7 +68,7 @@ export function Chip({
   accessibilityLabel,
   accessibilityRole = "radio",
   accent,
-}: ChipProps): JSX.Element {
+}: ChipProps) {
   const styles = useStyles();
   const { tokens } = useAtlantisTheme();
   const defaultAccentColor = tokens["color-surface--reverse"];

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

@@ -4,7 +4,7 @@ import { AccessibilityInfo, View } from "react-native";
 import { Host } from "react-native-portalize";
 import type { ReactTestInstance } from "react-test-renderer";
 import { act } from "react-test-renderer";
-import type { ContentOverlayRef, ModalBackgroundColor } from "./ContentOverlay";
+import type { ContentOverlayRef, ModalBackgroundColor } from "./types";
 import { ContentOverlay } from "./ContentOverlay";
 import { tokens } from "../utils/design";
 import { Button } from "../Button";
@@ -106,23 +106,30 @@ function renderContentOverlay(
   return renderResult;
 }
 
-function renderAndOpenContentOverlay(defaultOptions = getDefaultOptions()) {
+async function renderAndOpenContentOverlay(
+  defaultOptions = getDefaultOptions(),
+) {
   const rendered = renderContentOverlay(defaultOptions);
 
-  act(() => {
+  await act(async () => {
     fireEvent.press(rendered.getByLabelText(defaultOptions.buttonLabel));
   });
 
+  // Wait for the modal to open asynchronously (due to requestAnimationFrame)
+  await waitFor(() => {
+    expect(rendered.getByTestId("ATL-Overlay-Header")).toBeDefined();
+  });
+
   return rendered;
 }
 
 describe("when open is called on the content overlay ref", () => {
-  it("should open the content overlay, exposing the content to the user", () => {
+  it("should open the content overlay, exposing the content to the user", async () => {
     const options: testRendererOptions = {
       ...getDefaultOptions(),
       text: "I am text within the content overlay",
     };
-    const contentOverlayScreen = renderAndOpenContentOverlay(options);
+    const contentOverlayScreen = await renderAndOpenContentOverlay(options);
 
     expect(contentOverlayScreen.getByText(options.text)).toBeDefined();
   });
@@ -135,9 +142,9 @@ describe("when the close button is clicked on an open content overlay", () => {
       text: "I am text within the content overlay",
       showDismiss: true,
     };
-    const contentOverlayScreen = renderAndOpenContentOverlay(options);
+    const contentOverlayScreen = await renderAndOpenContentOverlay(options);
 
-    act(() => {
+    await act(async () => {
       fireEvent.press(
         contentOverlayScreen.getByTestId("ATL-Overlay-CloseButton"),
       );
@@ -156,9 +163,9 @@ describe("when the close button is clicked on an open content overlay with a def
       onCloseCallback: jest.fn(),
       showDismiss: true,
     };
-    const contentOverlayScreen = renderAndOpenContentOverlay(options);
+    const contentOverlayScreen = await renderAndOpenContentOverlay(options);
 
-    act(() => {
+    await act(async () => {
       fireEvent.press(
         contentOverlayScreen.getByTestId("ATL-Overlay-CloseButton"),
       );
@@ -191,7 +198,7 @@ describe("when the content overlay is created with a defined onOpen prop", () =>
         ...getDefaultOptions(),
         onOpenCallback: jest.fn(),
       };
-      renderAndOpenContentOverlay(options);
+      await renderAndOpenContentOverlay(options);
 
       await waitFor(() => {
         expect(options.onOpenCallback).toHaveBeenCalled();
@@ -201,25 +208,25 @@ describe("when the content overlay is created with a defined onOpen prop", () =>
 });
 
 describe("when title prop passed to content overlay", () => {
-  it("should set the header title", () => {
+  it("should set the header title", async () => {
     const options: testRendererOptions = {
       ...getDefaultOptions(),
       title: "Awesome Title",
     };
-    const contentOverlayScreen = renderAndOpenContentOverlay(options);
+    const contentOverlayScreen = await renderAndOpenContentOverlay(options);
 
     expect(contentOverlayScreen.getByText(options.title)).toBeDefined();
   });
 });
 
 describe("when accessibilityLabel prop passed to content overlay", () => {
-  it("should set the header accessibilityLabel", () => {
+  it("should set the header accessibilityLabel", async () => {
     const options: testRendererOptions = {
       ...getDefaultOptions(),
       a11yLabel: "Awesome a11y Label",
       showDismiss: true,
     };
-    const contentOverlayScreen = renderAndOpenContentOverlay(options);
+    const contentOverlayScreen = await renderAndOpenContentOverlay(options);
 
     expect(
       contentOverlayScreen.getByLabelText(options.a11yLabel || "ohno"),
@@ -228,13 +235,13 @@ describe("when accessibilityLabel prop passed to content overlay", () => {
 });
 
 describe("when accessibilityLabel prop NOT passed to content overlay", () => {
-  it("should use default accessibilityLabel", () => {
+  it("should use default accessibilityLabel", async () => {
     const options: testRendererOptions = {
       ...getDefaultOptions(),
       title: "Awesome Title",
       showDismiss: true,
     };
-    const contentOverlayScreen = renderAndOpenContentOverlay(options);
+    const contentOverlayScreen = await renderAndOpenContentOverlay(options);
 
     expect(
       contentOverlayScreen.getAllByLabelText(`Close ${options.title} modal`),
@@ -251,7 +258,7 @@ describe("when there is a screen reader enabled", () => {
     const options: testRendererOptions = {
       ...getDefaultOptions(),
     };
-    const contentOverlayScreen = renderAndOpenContentOverlay(options);
+    const contentOverlayScreen = await renderAndOpenContentOverlay(options);
 
     expect(
       await contentOverlayScreen.findByTestId("ATL-Overlay-CloseButton"),
@@ -260,12 +267,12 @@ describe("when there is a screen reader enabled", () => {
 });
 
 describe("when fullScreen is set to true", () => {
-  it("should show the dismiss button", () => {
+  it("should show the dismiss button", async () => {
     const options: testRendererOptions = {
       ...getDefaultOptions(),
       fullScreen: true,
     };
-    const contentOverlayScreen = renderAndOpenContentOverlay(options);
+    const contentOverlayScreen = await renderAndOpenContentOverlay(options);
     expect(
       contentOverlayScreen.getByTestId("ATL-Overlay-CloseButton"),
     ).toBeDefined();
@@ -273,12 +280,12 @@ describe("when fullScreen is set to true", () => {
 });
 
 describe("when showDismiss is set to true", () => {
-  it("should show the dismiss button", () => {
+  it("should show the dismiss button", async () => {
     const options: testRendererOptions = {
       ...getDefaultOptions(),
       showDismiss: true,
     };
-    const contentOverlayScreen = renderAndOpenContentOverlay(options);
+    const contentOverlayScreen = await renderAndOpenContentOverlay(options);
     expect(
       contentOverlayScreen.getByTestId("ATL-Overlay-CloseButton"),
     ).toBeDefined();
@@ -292,9 +299,9 @@ describe("when the close button is clicked on an open content overlay with a def
       onBeforeExitCallback: jest.fn(),
       showDismiss: true,
     };
-    const contentOverlayScreen = renderAndOpenContentOverlay(options);
+    const contentOverlayScreen = await renderAndOpenContentOverlay(options);
 
-    act(() => {
+    await act(async () => {
       fireEvent.press(
         contentOverlayScreen.getByTestId("ATL-Overlay-CloseButton"),
       );
@@ -308,11 +315,11 @@ describe("when the close button is clicked on an open content overlay with a def
 
 describe("modalBackgroundColor prop", () => {
   describe("when using the default surface value", () => {
-    it("renders the component with the color-surface color", () => {
+    it("renders the component with the color-surface color", async () => {
       const options: testRendererOptions = {
         ...getDefaultOptions(),
       };
-      const contentOverlayScreen = renderAndOpenContentOverlay(options);
+      const contentOverlayScreen = await renderAndOpenContentOverlay(options);
       const OverlayHeader = contentOverlayScreen.getByTestId(
         "ATL-Overlay-Header",
       ).children[0] as ReactTestInstance;
@@ -337,12 +344,12 @@ describe("modalBackgroundColor prop", () => {
   });
 
   describe("when set to background", () => {
-    it("changes the backround color of the modal to color-surface--background", () => {
+    it("changes the backround color of the modal to color-surface--background", async () => {
       const options: testRendererOptions = {
         ...getDefaultOptions(),
         modalBackgroundColor: "background",
       };
-      const contentOverlayScreen = renderAndOpenContentOverlay(options);
+      const contentOverlayScreen = await renderAndOpenContentOverlay(options);
       const OverlayHeader = contentOverlayScreen.getByTestId(
         "ATL-Overlay-Header",
       ).children[0] as ReactTestInstance;

package/src/ContentOverlay/ContentOverlay.tsx

@@ -7,7 +7,7 @@ import React, {
   useRef,
   useState,
 } from "react";
-import { Modalize } from "react-native-modalize";
+import type { Modalize } from "react-native-modalize";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import type { NativeScrollEvent, NativeSyntheticEvent } from "react-native";
 import {
@@ -26,6 +26,7 @@ import type {
   ContentOverlayRef,
   ModalBackgroundColor,
 } from "./types";
+import { UNSAFE_WrappedModalize } from "./UNSAFE_WrappedModalize";
 import { useIsScreenReaderEnabled } from "../hooks";
 import { IconButton } from "../IconButton";
 import { Heading } from "../Heading";
@@ -56,7 +57,7 @@ function ContentOverlayInternal(
     avoidKeyboardLikeIOS,
   }: ContentOverlayProps,
   ref: Ref<ContentOverlayRef>,
-): JSX.Element {
+) {
   isDraggable = onBeforeExit ? false : isDraggable;
   const isCloseableOnOverlayTap = onBeforeExit ? false : true;
   const { t } = useAtlantisI18n();
@@ -70,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) {
@@ -153,7 +154,7 @@ function ContentOverlayInternal(
   return (
     <>
       {headerHeightKnown && childrenHeightKnown && (
-        <Modalize
+        <UNSAFE_WrappedModalize
           ref={callbackInternalRef}
           overlayStyle={styles.overlay}
           handleStyle={styles.handle}
@@ -196,7 +197,7 @@ function ContentOverlayInternal(
         >
           {Platform.OS === "android" ? renderedHeader : undefined}
           {renderedChildren}
-        </Modalize>
+        </UNSAFE_WrappedModalize>
       )}
       {!childrenHeightKnown && (
         <View style={[styles.hiddenContent, modalStyle]}>
@@ -243,7 +244,6 @@ function ContentOverlayInternal(
           {shouldShowDismiss && (
             <View
               style={styles.dismissButton}
-              // @ts-expect-error tsc-ci
               ref={overlayHeader}
               accessibilityLabel={accessibilityLabel || closeOverlayA11YLabel}
               accessible={true}

package/src/ContentOverlay/UNSAFE_WrappedModalize.tsx

@@ -0,0 +1,41 @@
+import React, {
+  forwardRef,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from "react";
+import { Modalize } from "react-native-modalize";
+import type { IHandles } from "react-native-modalize/lib/options";
+
+type Props = React.ComponentProps<typeof Modalize>;
+
+export const UNSAFE_WrappedModalize = forwardRef<IHandles | undefined, Props>(
+  (props, ref) => {
+    const innerRef = useRef<IHandles | null>(null);
+    const [openRenderId, setOpenRenderId] = useState(0);
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        open(dest) {
+          setOpenRenderId(id => id + 1);
+          // Open on a fresh tick for additional safety
+          requestAnimationFrame(() => {
+            innerRef.current?.open(dest);
+          });
+        },
+        close(dest) {
+          innerRef.current?.close(dest);
+        },
+      }),
+      [],
+    );
+
+    // Use a unique key to force a remount, ensuring we get fresh gesture handler nodes within modalize
+    return (
+      <Modalize key={`modalize-${openRenderId}`} ref={innerRef} {...props} />
+    );
+  },
+);
+
+UNSAFE_WrappedModalize.displayName = "UNSAFE_WrappedModalize";

package/src/ContentOverlay/hooks/useKeyboardVisibility.test.ts

@@ -1,4 +1,4 @@
-import { act, renderHook } from "@testing-library/react-hooks";
+import { act, renderHook } from "@testing-library/react-native";
 import type { KeyboardEvent } from "react-native";
 import { DeviceEventEmitter } from "react-native";
 import { useKeyboardVisibility } from "./useKeyboardVisibility";
@@ -8,19 +8,19 @@ const keyboardEvent: Partial<KeyboardEvent> = {
 };
 
 describe("when the user is typing", () => {
-  it("sets the isKeyboardVisible to true", () => {
+  it("sets the isKeyboardVisible to true", async () => {
     const { result } = renderHook(() => useKeyboardVisibility());
 
-    act(() => {
+    await act(async () => {
       DeviceEventEmitter.emit("keyboardDidShow", keyboardEvent);
     });
 
     expect(result.current.isKeyboardVisible).toBe(true);
   });
-  it("the keyboardDidShow event emits the keyboard height", () => {
+  it("the keyboardDidShow event emits the keyboard height", async () => {
     const { result } = renderHook(() => useKeyboardVisibility());
 
-    act(() => {
+    await act(async () => {
       DeviceEventEmitter.emit("keyboardDidShow", keyboardEvent);
     });
 
@@ -31,10 +31,10 @@ describe("when the user is typing", () => {
 });
 
 describe("when the user not typing", () => {
-  it("sets the isKeyboardVisible to false", () => {
+  it("sets the isKeyboardVisible to false", async () => {
     const { result } = renderHook(() => useKeyboardVisibility());
 
-    act(() => {
+    await act(async () => {
       DeviceEventEmitter.emit("keyboardDidHide");
     });
 

package/src/ContentOverlay/hooks/useViewLayoutHeight.test.ts

@@ -1,4 +1,4 @@
-import { act, renderHook } from "@testing-library/react-hooks";
+import { act, renderHook } from "@testing-library/react-native";
 import type { LayoutChangeEvent } from "react-native";
 import { useViewLayoutHeight } from "./useViewLayoutHeight";
 

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();