@jobber/components-native 0.113.3 → 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,