@jobber/components-native 0.113.2 → 0.113.4-implement--94d34f8.2

package/dist/src/AtlantisThemeContext/AtlantisThemeContext.test.js

@@ -11,22 +11,36 @@ import React from "react";
 import { act, renderHook } from "@testing-library/react-native";
 import { darkTokens, iosTokens } from "@jobber/design";
 import merge from "lodash/merge";
+import { useColorScheme } from "react-native";
 import { AtlantisThemeContextProvider, useAtlantisTheme, } from "./AtlantisThemeContext";
+jest.mock("react-native", () => {
+    const actual = jest.requireActual("react-native");
+    Object.defineProperty(actual, "useColorScheme", {
+        configurable: true,
+        value: jest.fn(),
+    });
+    return actual;
+});
 const expectedDarkTokens = merge({}, iosTokens, darkTokens);
 const expectedLightTokens = iosTokens;
-function Wrapper({ children, dangerouslyOverrideTheme, }) {
-    return (React.createElement(AtlantisThemeContextProvider, { dangerouslyOverrideTheme: dangerouslyOverrideTheme }, children));
+const mockUseColorScheme = useColorScheme;
+function Wrapper({ children, theme, onThemeChange, dangerouslyOverrideTheme, }) {
+    return (React.createElement(AtlantisThemeContextProvider, { theme: theme, onThemeChange: onThemeChange, dangerouslyOverrideTheme: dangerouslyOverrideTheme }, children));
 }
 function WrapperWithOverride({ children, dangerouslyOverrideTheme, }) {
     return (React.createElement(Wrapper, null,
         React.createElement(AtlantisThemeContextProvider, { dangerouslyOverrideTheme: dangerouslyOverrideTheme }, children)));
 }
 describe("ThemeContext", () => {
+    beforeEach(() => {
+        mockUseColorScheme.mockReturnValue("light");
+    });
     it("defaults to the light theme", () => {
         const { result } = renderHook(useAtlantisTheme, {
             wrapper: (props) => (React.createElement(Wrapper, Object.assign({}, props))),
         });
         expect(result.current.theme).toBe("light");
+        expect(result.current.effectiveTheme).toBe("light");
         expect(result.current.tokens).toEqual(expectedLightTokens);
     });
     it("updates the theme and tokens", () => __awaiter(void 0, void 0, void 0, function* () {
@@ -35,9 +49,56 @@ describe("ThemeContext", () => {
         });
         yield act(() => __awaiter(void 0, void 0, void 0, function* () { return result.current.setTheme("dark"); }));
         expect(result.current.theme).toBe("dark");
+        expect(result.current.effectiveTheme).toBe("dark");
         expect(result.current.tokens).toEqual(expectedDarkTokens);
         yield act(() => __awaiter(void 0, void 0, void 0, function* () { return result.current.setTheme("light"); }));
         expect(result.current.theme).toBe("light");
+        expect(result.current.effectiveTheme).toBe("light");
+        expect(result.current.tokens).toEqual(expectedLightTokens);
+    }));
+    it("resolves the system theme from the OS color scheme", () => __awaiter(void 0, void 0, void 0, function* () {
+        mockUseColorScheme.mockReturnValue("dark");
+        const { result, rerender } = renderHook(useAtlantisTheme, {
+            wrapper: (props) => (React.createElement(Wrapper, Object.assign({}, props))),
+        });
+        yield act(() => __awaiter(void 0, void 0, void 0, function* () { return result.current.setTheme("system"); }));
+        expect(result.current.theme).toBe("system");
+        expect(result.current.effectiveTheme).toBe("dark");
+        expect(result.current.tokens).toEqual(expectedDarkTokens);
+        mockUseColorScheme.mockReturnValue("light");
+        rerender({});
+        expect(result.current.theme).toBe("system");
+        expect(result.current.effectiveTheme).toBe("light");
+        expect(result.current.tokens).toEqual(expectedLightTokens);
+    }));
+    it("uses a controlled selected theme", () => {
+        mockUseColorScheme.mockReturnValue("dark");
+        const { result } = renderHook(useAtlantisTheme, {
+            wrapper: (props) => (React.createElement(Wrapper, Object.assign({}, props, { theme: "system" }))),
+        });
+        expect(result.current.theme).toBe("system");
+        expect(result.current.effectiveTheme).toBe("dark");
+        expect(result.current.tokens).toEqual(expectedDarkTokens);
+    });
+    it("reports selected theme changes from a controlled provider", () => __awaiter(void 0, void 0, void 0, function* () {
+        const onThemeChange = jest.fn();
+        const { result } = renderHook(useAtlantisTheme, {
+            wrapper: (props) => (React.createElement(Wrapper, Object.assign({}, props, { theme: "light", onThemeChange: onThemeChange }))),
+        });
+        yield act(() => __awaiter(void 0, void 0, void 0, function* () { return result.current.setTheme("system"); }));
+        expect(onThemeChange).toHaveBeenCalledWith("system");
+        expect(result.current.theme).toBe("light");
+        expect(result.current.effectiveTheme).toBe("light");
+        expect(result.current.tokens).toEqual(expectedLightTokens);
+    }));
+    it("falls back to light when system color scheme is unavailable", () => __awaiter(void 0, void 0, void 0, function* () {
+        mockUseColorScheme.mockReturnValue(null);
+        const { result } = renderHook(useAtlantisTheme, {
+            wrapper: (props) => (React.createElement(Wrapper, Object.assign({}, props))),
+        });
+        yield act(() => __awaiter(void 0, void 0, void 0, function* () { return result.current.setTheme("system"); }));
+        expect(result.current.theme).toBe("system");
+        expect(result.current.effectiveTheme).toBe("light");
         expect(result.current.tokens).toEqual(expectedLightTokens);
     }));
     describe("when theme is forced for provider", () => {
@@ -49,16 +110,29 @@ describe("ThemeContext", () => {
             yield act(() => __awaiter(void 0, void 0, void 0, function* () { return result.current.setTheme("dark"); }));
             // This hook shouldn't be affected by it because it's set to the light theme
             expect(result.current.theme).toBe("light");
+            expect(result.current.effectiveTheme).toBe("light");
             expect(result.current.tokens).toEqual(expectedLightTokens);
         }));
         it.each([
-            { defaultTheme: "light", expectedTokens: expectedLightTokens },
-            { defaultTheme: "dark", expectedTokens: expectedDarkTokens },
-        ])("provides the dangerouslyOverrideTheme $defaultTheme tokens", ({ defaultTheme, expectedTokens }) => {
+            {
+                defaultTheme: "light",
+                colorScheme: "dark",
+                expectedEffectiveTheme: "light",
+                expectedTokens: expectedLightTokens,
+            },
+            {
+                defaultTheme: "dark",
+                colorScheme: "light",
+                expectedEffectiveTheme: "dark",
+                expectedTokens: expectedDarkTokens,
+            },
+        ])("provides the dangerouslyOverrideTheme $defaultTheme tokens", ({ defaultTheme, colorScheme, expectedEffectiveTheme, expectedTokens, }) => {
+            mockUseColorScheme.mockReturnValue(colorScheme);
             const { result } = renderHook(useAtlantisTheme, {
                 wrapper: (props) => (React.createElement(WrapperWithOverride, Object.assign({}, props, { dangerouslyOverrideTheme: defaultTheme }))),
             });
             expect(result.current.theme).toBe(defaultTheme);
+            expect(result.current.effectiveTheme).toBe(expectedEffectiveTheme);
             expect(result.current.tokens).toEqual(expectedTokens);
         });
     });

package/dist/src/ContentOverlay/ContentOverlay.js

@@ -54,7 +54,7 @@ export function ContentOverlay({ children, title, accessibilityLabel, fullScreen
     const [currentPosition, setCurrentPosition] = useState(-1);
     const styles = useStyles();
     const { t } = useAtlantisI18n();
-    const { theme, tokens } = useAtlantisTheme();
+    const { effectiveTheme, tokens } = useAtlantisTheme();
     const isScreenReaderEnabled = useIsScreenReaderEnabled();
     const behavior = computeContentOverlayBehavior({
         fullScreen,
@@ -179,7 +179,7 @@ export function ContentOverlay({ children, title, accessibilityLabel, fullScreen
         return (React.createElement(Backdrop, Object.assign({}, props, { pressBehavior: isCloseableOnOverlayTap ? "close" : "none" })));
     }, [isCloseableOnOverlayTap]);
     return (React.createElement(BottomSheetModal, { ref: bottomSheetModalRef, containerComponent: Platform.OS === "ios" ? Container : undefined, onChange: handleChange, style: sheetStyle, backgroundStyle: backgroundStyle, handleStyle: styles.handleWrapper, handleIndicatorStyle: handleIndicatorStyles, backdropComponent: backdropComponent, snapPoints: snapPoints, enablePanDownToClose: enablePanDownToClose !== null && enablePanDownToClose !== void 0 ? enablePanDownToClose : effectiveIsDraggable, enableContentPanningGesture: enableContentPanningGesture !== null && enableContentPanningGesture !== void 0 ? enableContentPanningGesture : effectiveIsDraggable, enableHandlePanningGesture: effectiveIsDraggable, enableDynamicSizing: !customSnapPoints && behavior.initialHeight === "contentHeight", keyboardBehavior: "interactive", keyboardBlurBehavior: "restore", topInset: topInset, onDismiss: () => onClose === null || onClose === void 0 ? void 0 : onClose() },
-        React.createElement(AtlantisThemeContextProvider, { dangerouslyOverrideTheme: theme },
+        React.createElement(AtlantisThemeContextProvider, { dangerouslyOverrideTheme: effectiveTheme },
             React.createElement(ContentOverlayKeyboardContext.Provider, { value: scrollEnabled }, scrollEnabled ? (React.createElement(BottomSheetKeyboardAwareScrollView, { ref: scrollViewRef, contentContainerStyle: { paddingBottom: insets.bottom }, keyboardShouldPersistTaps: keyboardShouldPersistTaps ? "handled" : "never", showsVerticalScrollIndicator: false, onScroll: handleOnScroll, stickyHeaderIndices: [0], bottomOffset: KEYBOARD_TOP_PADDING_AUTO_SCROLL },
                 renderHeader(),
                 React.createElement(View, { testID: "ATL-Overlay-Children" }, children))) : (React.createElement(BottomSheetView, null,

package/dist/src/Form/Form.js

@@ -96,20 +96,9 @@ function InternalForm({ children, onBeforeSubmit, onSubmit, onSubmitError, onSub
         setKeyboardScreenY(windowHeight - event.height);
     }, [windowHeight]);
     const handleKeyboardHide = useCallback(() => {
-        var _a;
-        (_a = bottomViewRef === null || bottomViewRef === void 0 ? void 0 : bottomViewRef.current) === null || _a === void 0 ? void 0 : _a.measureInWindow(
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        (_x, y, _width, _height) => {
-            var _a;
-            // This fixes extra whitespace below the form if it was scrolled down while the keyboard was open
-            // i.e. a View below the form is higher than the bottom of the window
-            if (y < windowHeight) {
-                (_a = scrollViewRef === null || scrollViewRef === void 0 ? void 0 : scrollViewRef.current) === null || _a === void 0 ? void 0 : _a.scrollToEnd();
-            }
-        });
         setKeyboardHeight(0);
         setKeyboardScreenY(0);
-    }, [bottomViewRef, scrollViewRef, windowHeight]);
+    }, []);
     useEffect(() => {
         const showEvent = Platform.OS === "ios" ? "keyboardWillShow" : "keyboardDidShow";
         const hideEvent = Platform.OS === "ios" ? "keyboardWillHide" : "keyboardDidHide";

package/dist/src/Form/Form.test.js

@@ -10,6 +10,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 import React from "react";
 import { act, fireEvent, render, waitFor } from "@testing-library/react-native";
 import { Alert, Keyboard } from "react-native";
+import { KeyboardEvents } from "react-native-keyboard-controller";
 import { Form, FormBannerMessageType } from ".";
 import { FormSubmitErrorType } from "./types";
 import { atlantisContextDefaultValues } from "../AtlantisContext";
@@ -35,14 +36,34 @@ const onChangeMock = jest.fn();
 const onChangeSelectMock = jest.fn();
 const onChangeSwitchMock = jest.fn();
 const mockScrollTo = jest.fn();
+const mockScrollToEnd = jest.fn();
 const mockScrollToTop = jest.fn();
+const mockMeasureInWindow = jest.fn((callback) => {
+    callback(0, 0, 0, 0);
+});
+const mockScrollViewRef = {
+    get current() {
+        return { scrollTo: mockScrollTo, scrollToEnd: mockScrollToEnd };
+    },
+    // React assigns the ref while rendering KeyboardAwareScrollView. Keep the
+    // test double available to the keyboard-hide callback instead.
+    set current(value) {
+        void value;
+    },
+};
+const mockBottomViewRef = {
+    get current() {
+        return { measureInWindow: mockMeasureInWindow };
+    },
+    set current(value) {
+        void value;
+    },
+};
 jest.mock("./hooks/useFormViewRefs", () => ({
     useFormViewRefs: () => {
         return {
-            scrollViewRef: {
-                current: { scrollTo: mockScrollTo },
-            },
-            bottomViewRef: { current: {} },
+            scrollViewRef: mockScrollViewRef,
+            bottomViewRef: mockBottomViewRef,
             scrollToTop: mockScrollToTop,
         };
     },
@@ -321,6 +342,30 @@ describe("Form", () => {
             expect(queryByTestId("ATL-FormSafeArea")).toBeNull();
         });
     });
+    describe("Keyboard dismissal", () => {
+        it("does not imperatively scroll the form to its end", () => __awaiter(void 0, void 0, void 0, function* () {
+            var _a;
+            const listeners = new Map();
+            const addListener = KeyboardEvents.addListener;
+            const registerListener = (eventName, listener) => {
+                listeners.set(eventName, listener);
+                return { remove: jest.fn() };
+            };
+            addListener
+                .mockImplementationOnce(registerListener)
+                .mockImplementationOnce(registerListener);
+            render(React.createElement(FormTest, { onSubmit: onSubmitMock }));
+            const hideListener = (_a = [...listeners.entries()].find(([eventName]) => eventName.endsWith("Hide"))) === null || _a === void 0 ? void 0 : _a[1];
+            expect(hideListener).toBeDefined();
+            if (!hideListener) {
+                throw new Error("Expected a keyboard hide listener");
+            }
+            yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+                hideListener();
+            }));
+            expect(mockScrollToEnd).not.toHaveBeenCalled();
+        }));
+    });
     describe("Leaving the form", () => {
         let mockUseConfirmBeforeBack;
         let mockRemoveLocalCache;