@jobber/components-native 0.84.4-JOB-134681-8086ad4.25 → 0.84.4-JOB-138679-b1552ab.68

package/src/EmptyState/EmptyState.test.tsx

@@ -1,8 +1,8 @@
 import React from "react";
-import { fireEvent, render } from "@testing-library/react-native";
+import { fireEvent, render, screen } from "@testing-library/react-native";
+import { Path } from "react-native-svg";
 import type { EmptyStateProps } from "./EmptyState";
 import { EmptyState } from "./EmptyState";
-import * as IconComponent from "../Icon/Icon";
 
 const primaryOnPress = jest.fn();
 const secondaryOnPress = jest.fn();
@@ -27,83 +27,70 @@ const component = (overrideProps?: Partial<EmptyStateProps>) => {
     ...overrideProps,
   };
 
-  return render(<EmptyState {...props} />);
+  render(<EmptyState {...props} />);
 };
 
-const iconSpy = jest.spyOn(IconComponent, "Icon");
-
-afterEach(() => jest.clearAllMocks());
-
 describe("EmptyState", () => {
   it("renders the title", () => {
-    const { getByText } = component();
+    component();
 
-    expect(getByText(defaultProps.title)).toBeDefined();
+    expect(screen.getByText(defaultProps.title)).toBeDefined();
   });
 
   it("renders the description", () => {
-    const { getByText } = component();
-
-    expect(getByText(defaultProps.description)).toBeDefined();
-  });
-
-  it("renders the icon", () => {
-    const { getByTestId } = component();
+    component();
 
-    expect(getByTestId(defaultProps.icon)).toBeDefined();
+    expect(screen.getByText(defaultProps.description)).toBeDefined();
   });
 
-  it("calls icon with correct default params", () => {
+  it("renders the icon with default color and large size", () => {
     component();
-
-    expect(iconSpy).toHaveBeenCalledWith(
-      {
-        color: "blue",
-        name: defaultProps.icon,
-        size: "large",
-      },
-      {},
+    const icon = screen.getByTestId(defaultProps.icon);
+    const path = icon.findByType(Path);
+    expect(path.props.fill).toBe("hsl(197, 90%, 12%)");
+    expect(icon.props.style).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          width: 32,
+          height: 32,
+        }),
+      ]),
     );
   });
 
-  it("calls icon with correct params", () => {
-    component({ iconColor: "greyBlue", icon: "link" });
+  it("renders the correct icon color when specified", async () => {
+    component({ iconColor: "warning" });
 
-    expect(iconSpy).toHaveBeenCalledWith(
-      {
-        color: "greyBlue",
-        name: "link",
-        size: "large",
-      },
-      {},
-    );
+    const icon = screen.getByTestId(defaultProps.icon);
+    const pathElement = icon.findByType(Path);
+    expect(pathElement.props.fill).toBe("hsl(51, 64%, 49%)");
   });
 
   it("renders the primary action and allows users to interact with it by clicking", () => {
-    const { getByLabelText } = component();
+    component();
 
-    const button = getByLabelText(defaultProps.primaryAction.label);
+    const button = screen.getByLabelText(defaultProps.primaryAction.label);
     expect(button).toBeDefined();
     fireEvent.press(button);
     expect(primaryOnPress).toHaveBeenCalledTimes(1);
   });
 
   it("renders the secondary action and allows users to interact with it by clicking", () => {
-    const { getByLabelText } = component();
+    component();
 
-    const button = getByLabelText(defaultProps.secondaryAction.label);
+    const button = screen.getByLabelText(defaultProps.secondaryAction.label);
     expect(button).toBeDefined();
     fireEvent.press(button);
     expect(secondaryOnPress).toHaveBeenCalledTimes(1);
   });
 
   it("does render buttons if neither primary nor secondary action is passed in", () => {
-    const { queryAllByRole } = component({
+    component({
       description: "No buttons",
       primaryAction: undefined,
       secondaryAction: undefined,
     });
 
-    expect(queryAllByRole("button")).toHaveLength(0);
+    expect(screen.queryAllByRole("button")).toHaveLength(0);
   });
 });

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

package/src/Form/Form.test.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { type ReactElement } from "react";
 import { act, fireEvent, render, waitFor } from "@testing-library/react-native";
 import { Alert, Keyboard } from "react-native";
 import { Host } from "react-native-portalize";
@@ -94,7 +94,7 @@ interface FormTestProps {
     onSubmit: () => void,
     label: string | undefined,
     isSubmitting: boolean,
-  ) => JSX.Element;
+  ) => ReactElement;
   readonly initialLoading?: boolean;
   readonly initialValues?: FormFields;
   readonly bannerMessages?: FormBannerMessage[];
@@ -104,6 +104,7 @@ interface FormTestProps {
   readonly onBeforeSubmit?: jest.Mock;
   readonly renderFooter?: React.ReactNode;
   readonly saveButtonOffset?: number;
+  readonly UNSAFE_allowDiscardLocalCacheWhenOffline?: boolean;
 }
 
 function FormTest(props: FormTestProps) {
@@ -125,6 +126,7 @@ function MockForm({
   localCacheId,
   renderFooter,
   saveButtonOffset,
+  UNSAFE_allowDiscardLocalCacheWhenOffline = false,
 }: FormTestProps) {
   const formErrors: FormBannerErrors = {};
 
@@ -154,6 +156,9 @@ function MockForm({
         onBeforeSubmit={onBeforeSubmit}
         renderFooter={renderFooter}
         saveButtonOffset={saveButtonOffset}
+        UNSAFE_allowDiscardLocalCacheWhenOffline={
+          UNSAFE_allowDiscardLocalCacheWhenOffline
+        }
       >
         <InputText
           name={testInputTextName}
@@ -561,4 +566,142 @@ describe("Form", () => {
       expect(queryByTestId("ATL-FormSafeArea")).toBeNull();
     });
   });
+
+  describe("Leaving the form", () => {
+    let mockUseConfirmBeforeBack: jest.Mock;
+    let mockRemoveLocalCache: jest.Mock;
+    const atlantisContextSpy = jest.spyOn(
+      atlantisContext,
+      "useAtlantisContext",
+    );
+
+    beforeEach(() => {
+      mockUseConfirmBeforeBack = jest
+        .fn()
+        .mockReturnValue({ current: jest.fn() });
+      mockRemoveLocalCache = jest.fn();
+
+      jest
+        .spyOn(
+          require("../Form/context/AtlantisFormContext"),
+          "useAtlantisFormContext",
+        )
+        .mockReturnValue({
+          useConfirmBeforeBack: mockUseConfirmBeforeBack,
+          useInternalFormLocalCache: () => ({
+            setLocalCache: jest.fn(),
+            removeLocalCache: mockRemoveLocalCache,
+          }),
+          edgeToEdgeEnabled: false,
+        });
+    });
+
+    afterEach(() => {
+      jest.restoreAllMocks();
+    });
+
+    describe("when UNSAFE_allowDiscardLocalCacheWhenOffline is false", () => {
+      it("should NOT pass onAcceptEvent when offline", () => {
+        atlantisContextSpy.mockReturnValue({
+          ...atlantisContextDefaultValues,
+          isOnline: false,
+        });
+
+        render(
+          <FormTest
+            onSubmit={onSubmitMock}
+            UNSAFE_allowDiscardLocalCacheWhenOffline={false}
+            localCacheKey="testCacheKey"
+          />,
+        );
+
+        expect(mockUseConfirmBeforeBack).toHaveBeenCalled();
+        const callArgs = mockUseConfirmBeforeBack.mock.calls[0][0];
+        expect(callArgs.onAcceptEvent).toBeUndefined();
+        expect(callArgs.showLostProgressMessage).toBe(false);
+      });
+
+      it("should pass onAcceptEvent when online", () => {
+        atlantisContextSpy.mockReturnValue({
+          ...atlantisContextDefaultValues,
+          isOnline: true,
+        });
+
+        render(
+          <FormTest
+            onSubmit={onSubmitMock}
+            UNSAFE_allowDiscardLocalCacheWhenOffline={false}
+            localCacheKey="testCacheKey"
+          />,
+        );
+
+        expect(mockUseConfirmBeforeBack).toHaveBeenCalled();
+        const callArgs = mockUseConfirmBeforeBack.mock.calls[0][0];
+        expect(callArgs.onAcceptEvent).toBe(mockRemoveLocalCache);
+        expect(callArgs.showLostProgressMessage).toBe(true);
+      });
+    });
+
+    describe("when UNSAFE_allowDiscardLocalCacheWhenOffline is true", () => {
+      it("should pass onAcceptEvent when offline", () => {
+        atlantisContextSpy.mockReturnValue({
+          ...atlantisContextDefaultValues,
+          isOnline: false,
+        });
+
+        render(
+          <FormTest
+            onSubmit={onSubmitMock}
+            UNSAFE_allowDiscardLocalCacheWhenOffline={true}
+            localCacheKey="testCacheKey"
+          />,
+        );
+
+        expect(mockUseConfirmBeforeBack).toHaveBeenCalled();
+        const callArgs = mockUseConfirmBeforeBack.mock.calls[0][0];
+        expect(callArgs.onAcceptEvent).toBe(mockRemoveLocalCache);
+        expect(callArgs.showLostProgressMessage).toBe(true);
+      });
+
+      it("should pass onAcceptEvent when online", () => {
+        atlantisContextSpy.mockReturnValue({
+          ...atlantisContextDefaultValues,
+          isOnline: true,
+        });
+
+        render(
+          <FormTest
+            onSubmit={onSubmitMock}
+            UNSAFE_allowDiscardLocalCacheWhenOffline={true}
+            localCacheKey="testCacheKey"
+          />,
+        );
+
+        expect(mockUseConfirmBeforeBack).toHaveBeenCalled();
+        const callArgs = mockUseConfirmBeforeBack.mock.calls[0][0];
+        expect(callArgs.onAcceptEvent).toBe(mockRemoveLocalCache);
+        expect(callArgs.showLostProgressMessage).toBe(true);
+      });
+    });
+
+    describe("without localCacheKey", () => {
+      it("should always show lost progress message when no cache key is provided", () => {
+        atlantisContextSpy.mockReturnValue({
+          ...atlantisContextDefaultValues,
+          isOnline: false,
+        });
+
+        render(
+          <FormTest
+            onSubmit={onSubmitMock}
+            UNSAFE_allowDiscardLocalCacheWhenOffline={false}
+          />,
+        );
+
+        expect(mockUseConfirmBeforeBack).toHaveBeenCalled();
+        const callArgs = mockUseConfirmBeforeBack.mock.calls[0][0];
+        expect(callArgs.showLostProgressMessage).toBe(true);
+      });
+    });
+  });
 });

package/src/Form/Form.tsx

@@ -26,6 +26,7 @@ import { useScrollToError } from "./hooks/useScrollToError";
 import { FormSaveButton } from "./components/FormSaveButton";
 import { useSaveButtonPosition } from "./hooks/useSaveButtonPosition";
 import { FormCache } from "./components/FormCache/FormCache";
+import { useAtlantisFormContext } from "./context/AtlantisFormContext";
 import { InputAccessoriesProvider } from "../InputText";
 import { tokens } from "../utils/design";
 import { ErrorMessageProvider } from "../ErrorMessageWrapper";
@@ -33,7 +34,7 @@ import { ErrorMessageProvider } from "../ErrorMessageWrapper";
 export function Form<T extends FieldValues, S>({
   initialLoading,
   ...rest
-}: FormProps<T, S>): JSX.Element {
+}: FormProps<T, S>) {
   const child = initialLoading ? <FormMask /> : <InternalForm {...rest} />;
 
   return (
@@ -65,6 +66,7 @@ function InternalForm<T extends FieldValues, S>({
   saveButtonOffset,
   showStickySaveButton = false,
   renderFooter,
+  UNSAFE_allowDiscardLocalCacheWhenOffline,
 }: InternalFormProps<T, S>) {
   const { scrollViewRef, bottomViewRef, scrollToTop } = useFormViewRefs();
   const [saveButtonHeight, setSaveButtonHeight] = useState(0);
@@ -86,6 +88,7 @@ function InternalForm<T extends FieldValues, S>({
     scrollViewRef,
     saveButtonHeight,
     messageBannerHeight,
+    UNSAFE_allowDiscardLocalCacheWhenOffline,
   });
   const { windowHeight, headerHeight } = useScreenInformation();
   const [keyboardHeight, setKeyboardHeight] = useState(0);
@@ -134,6 +137,8 @@ function InternalForm<T extends FieldValues, S>({
 
   const styles = useStyles();
 
+  const { edgeToEdgeEnabled } = useAtlantisFormContext();
+
   return (
     <FormProvider {...formMethods}>
       <>
@@ -161,6 +166,7 @@ function InternalForm<T extends FieldValues, S>({
           <KeyboardAwareScrollView
             enableResetScrollToCoords={false}
             enableAutomaticScroll={true}
+            enableOnAndroid={edgeToEdgeEnabled}
             keyboardOpeningTime={
               Platform.OS === "ios" ? tokens["timing-slowest"] : 0
             }
@@ -168,6 +174,7 @@ function InternalForm<T extends FieldValues, S>({
             ref={scrollViewRef}
             {...keyboardProps}
             extraHeight={headerHeight}
+            extraScrollHeight={edgeToEdgeEnabled ? tokens["space-large"] : 0}
             contentContainerStyle={
               !keyboardHeight && styles.scrollContentContainer
             }

package/src/Form/components/FormActionBar/FormActionBar.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { type ReactElement } from "react";
 import type { LayoutChangeEvent } from "react-native";
 import { StyleSheet } from "react-native";
 import Reanimated from "react-native-reanimated";
@@ -18,7 +18,7 @@ export interface FormActionBarProps {
     onSubmit: () => void,
     label: string | undefined,
     isSubmitting: boolean,
-  ) => JSX.Element;
+  ) => ReactElement;
   readonly secondaryActions?: SecondaryActionProp[];
   readonly setSecondaryActionLoading?: (bool: boolean) => void;
 }
@@ -32,7 +32,7 @@ export function FormActionBar({
   setSaveButtonHeight,
   secondaryActions,
   setSecondaryActionLoading,
-}: FormActionBarProps): JSX.Element {
+}: FormActionBarProps) {
   const styles = useStyles();
 
   const buttonStyle = StyleSheet.flatten([

package/src/Form/components/FormBody/FormBody.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from "react";
+import React, { type ReactElement, useMemo } from "react";
 import { View } from "react-native";
 import { useStyles } from "./FormBody.style";
 import { useScreenInformation } from "../../hooks/useScreenInformation";
@@ -7,7 +7,7 @@ import { FormActionBar } from "../FormActionBar";
 import { tokens } from "../../../utils/design";
 
 interface FormBodyProps extends FormActionBarProps {
-  readonly children: JSX.Element;
+  readonly children: ReactElement;
   readonly shouldRenderActionBar?: boolean;
   readonly saveButtonOffset?: number;
 }
@@ -24,7 +24,7 @@ export function FormBody({
   setSecondaryActionLoading,
   setSaveButtonHeight,
   saveButtonOffset,
-}: FormBodyProps): JSX.Element {
+}: FormBodyProps) {
   const paddingBottom = useBottomPadding();
   const fullViewPadding = useMemo(() => ({ paddingBottom }), [paddingBottom]);
   const styles = useStyles();

package/src/Form/components/FormCache/FormCache.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo } from "react";
-import type { FieldValues } from "react-hook-form";
+import type { DeepPartial, FieldValues } from "react-hook-form";
 import { useFormContext, useWatch } from "react-hook-form";
 import omit from "lodash/omit";
 
@@ -7,18 +7,18 @@ interface FormCacheProps<T extends FieldValues> {
   readonly localCacheId?: string | string[];
   readonly localCacheKey?: string;
   readonly localCacheExclude?: string[];
-  readonly setLocalCache: (data: T) => void;
+  readonly setLocalCache: (data: DeepPartial<T>) => void;
 }
 
 export function FormCache<T extends FieldValues>({
   localCacheExclude,
   localCacheKey,
   setLocalCache,
-}: FormCacheProps<T>): JSX.Element {
+}: FormCacheProps<T>) {
   const { control, formState } = useFormContext<T>();
   const { isDirty } = formState;
 
-  const formData = useWatch<T>({ control });
+  const formData = useWatch({ control });
   const shouldExclude = useMemo(() => {
     return Array.isArray(localCacheExclude) && localCacheExclude.length > 0;
   }, [localCacheExclude]);
@@ -46,5 +46,6 @@ export function FormCache<T extends FieldValues>({
     }
   }, [formData, isDirty, localCacheExclude, setLocalCache, shouldExclude]);
 
+  // eslint-disable-next-line react/jsx-no-useless-fragment
   return <></>;
 }

package/src/Form/components/FormErrorBanner/FormErrorBanner.tsx

@@ -6,7 +6,7 @@ import { useAtlantisI18n } from "../../../hooks/useAtlantisI18n";
 export function FormErrorBanner({
   networkError,
   bannerError,
-}: FormBannerErrors): JSX.Element {
+}: FormBannerErrors) {
   const { t } = useAtlantisI18n();
 
   if (networkError) {

package/src/Form/components/FormMask/FormMask.tsx

@@ -4,7 +4,7 @@ import { useStyles } from "./FormMask.style";
 import { ActivityIndicator } from "../../../ActivityIndicator";
 import { useAtlantisI18n } from "../../../hooks/useAtlantisI18n";
 
-export function FormMask(): JSX.Element {
+export function FormMask() {
   const { t } = useAtlantisI18n();
   const styles = useStyles();
 

package/src/Form/components/FormMessage/FormMessage.test.tsx

@@ -1,30 +1,41 @@
 import React from "react";
-import { fireEvent, render } from "@testing-library/react-native";
+import {
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from "@testing-library/react-native";
 import { FormMessage } from ".";
 
 describe("FormMessage", () => {
   it("should render null when there are no message to show", () => {
-    const view = render(<FormMessage />);
-    expect(view.toJSON()).toMatchInlineSnapshot(`null`);
+    render(<FormMessage />);
+    expect(screen.toJSON()).toMatchInlineSnapshot(`null`);
   });
 
-  it("should show the message", () => {
-    const { getByText } = render(<FormMessage />);
+  it("should show the message", async () => {
+    render(<FormMessage />);
 
     const description = "🔥";
     FormMessage.show({ description });
-    expect(getByText(description)).toBeDefined();
+    await waitFor(() => {
+      expect(screen.getByText(description)).toBeDefined();
+    });
   });
 
-  it("should close the message", () => {
-    const { getByText, queryByText } = render(<FormMessage />);
+  it("should close the message", async () => {
+    render(<FormMessage />);
 
     const description = "🌚";
     FormMessage.show({ description });
-    expect(getByText(description)).toBeDefined();
+    await waitFor(() => {
+      expect(screen.getByText(description)).toBeDefined();
+    });
 
     FormMessage.close();
-    expect(queryByText(description)).toBeNull();
+    await waitFor(() => {
+      expect(screen.queryByText(description)).toBeNull();
+    });
   });
 
   describe("Opening another message through a message", () => {
@@ -40,33 +51,35 @@ describe("FormMessage", () => {
         },
       });
 
-    it("should show the most recent message", () => {
-      const { getByText, queryByText, getByLabelText } = render(
-        <FormMessage />,
-      );
+    it("should show the most recent message", async () => {
+      render(<FormMessage />);
 
       showMessage();
 
-      expect(getByText(firstMessage)).toBeDefined();
-      expect(queryByText(secondMessage)).toBeNull();
+      await waitFor(() => {
+        expect(screen.getByText(firstMessage)).toBeDefined();
+      });
+      expect(screen.queryByText(secondMessage)).toBeNull();
 
-      fireEvent.press(getByLabelText("Click me"));
+      fireEvent.press(screen.getByLabelText("Click me"));
 
-      expect(getByText(secondMessage)).toBeDefined();
-      expect(queryByText(firstMessage)).toBeNull();
+      expect(screen.getByText(secondMessage)).toBeDefined();
+      expect(screen.queryByText(firstMessage)).toBeNull();
     });
 
-    it("should close the most recent message", () => {
-      const { getByText, queryByText, getByLabelText } = render(
-        <FormMessage />,
-      );
+    it("should close the most recent message", async () => {
+      render(<FormMessage />);
 
       showMessage();
-      fireEvent.press(getByLabelText("Click me"));
+      await waitFor(() => {
+        expect(screen.getByText("Click me")).toBeDefined();
+      });
+      fireEvent.press(screen.getByLabelText("Click me"));
       FormMessage.close();
-
-      expect(getByText(firstMessage)).toBeDefined();
-      expect(queryByText(secondMessage)).toBeNull();
+      await waitFor(() => {
+        expect(screen.getByText(firstMessage)).toBeDefined();
+      });
+      expect(screen.queryByText(secondMessage)).toBeNull();
     });
   });
 });

package/src/Form/components/FormMessage/FormMessage.tsx

@@ -17,7 +17,7 @@ let close: (() => void) | undefined;
  * message to the user. Use `FormMessage.close()` to close the most
  * recent message.
  */
-export const FormMessage = (): JSX.Element => {
+export const FormMessage = () => {
   const [data, setData] = useState<FormMessageData[]>([]);
 
   open = useCallback(

package/src/Form/components/FormMessage/components/InternalFormMessage/InternalFormMessage.tsx

@@ -15,7 +15,7 @@ interface FormMessageProps {
 export function InternalFormMessage({
   data,
   onRequestClose,
-}: FormMessageProps): JSX.Element {
+}: FormMessageProps) {
   const { t } = useAtlantisI18n();
   const styles = useStyles();
   const emptyStateData: EmptyStateProps = useMemo(() => {

package/src/Form/components/FormMessageBanner/FormMessageBanner.tsx

@@ -8,9 +8,7 @@ interface FormMessageBannerProps {
   readonly bannerMessages?: FormBannerMessage[];
 }
 
-export function FormMessageBanner({
-  bannerMessages,
-}: FormMessageBannerProps): JSX.Element {
+export function FormMessageBanner({ bannerMessages }: FormMessageBannerProps) {
   return (
     <>
       {bannerMessages?.map((message, index) => (