@jobber/components-native 0.113.3 → 0.113.4-implement--97f86be.3

package/dist/src/AtlantisThemeContext/AtlantisThemeContext.js

@@ -1,32 +1,55 @@
 import { androidTokens, darkTokens, iosTokens } from "@jobber/design";
-import React, { createContext, useContext, useState } from "react";
+import React, { createContext, useCallback, useContext, useState } from "react";
 import merge from "lodash/merge";
-import { Platform } from "react-native";
+import { Platform, useColorScheme } from "react-native";
 const lightTokens = Platform.select({
     ios: () => iosTokens,
     android: () => androidTokens,
     default: () => androidTokens,
 })();
 const completeDarkTokens = merge({}, lightTokens, darkTokens);
-const AtlantisThemeContext = createContext({
+const defaultAtlantisThemeContextValue = {
     theme: "light",
+    effectiveTheme: "light",
     tokens: lightTokens,
     setTheme: () => {
         console.error("useAtlantisTheme accessed outside of AtlantisThemeContextProvider");
     },
-});
-export function AtlantisThemeContextProvider({ children, dangerouslyOverrideTheme, }) {
-    // TODO: check last saved theme from local/device storage
-    const initialTheme = "light";
-    const [globalTheme, setGlobalTheme] = useState(initialTheme);
-    const currentTheme = dangerouslyOverrideTheme !== null && dangerouslyOverrideTheme !== void 0 ? dangerouslyOverrideTheme : globalTheme;
-    const currentTokens = currentTheme === "dark" ? completeDarkTokens : lightTokens;
+};
+const AtlantisThemeContext = createContext(undefined);
+export function AtlantisThemeContextProvider({ children, theme, onThemeChange, dangerouslyOverrideTheme, }) {
+    var _a, _b;
+    const parentThemeContext = useContext(AtlantisThemeContext);
+    const [localTheme, setLocalTheme] = useState(undefined);
+    const colorScheme = useColorScheme();
+    const setTheme = useCallback((nextTheme) => {
+        onThemeChange === null || onThemeChange === void 0 ? void 0 : onThemeChange(nextTheme);
+        if (theme !== undefined)
+            return;
+        // A forced visual override should preserve the parent subtree's selected
+        // theme semantics while still rendering with the forced tokens.
+        if (dangerouslyOverrideTheme !== undefined && parentThemeContext) {
+            parentThemeContext.setTheme(nextTheme);
+            return;
+        }
+        setLocalTheme(nextTheme);
+    }, [dangerouslyOverrideTheme, onThemeChange, parentThemeContext, theme]);
+    const currentTheme = (_b = (_a = theme !== null && theme !== void 0 ? theme : localTheme) !== null && _a !== void 0 ? _a : parentThemeContext === null || parentThemeContext === void 0 ? void 0 : parentThemeContext.theme) !== null && _b !== void 0 ? _b : "light";
+    const effectiveTheme = dangerouslyOverrideTheme !== null && dangerouslyOverrideTheme !== void 0 ? dangerouslyOverrideTheme : resolveEffectiveTheme(currentTheme, colorScheme);
+    const currentTokens = effectiveTheme === "dark" ? completeDarkTokens : lightTokens;
     return (React.createElement(AtlantisThemeContext.Provider, { value: {
             theme: currentTheme,
+            effectiveTheme,
             tokens: currentTokens,
-            setTheme: setGlobalTheme,
+            setTheme,
         } }, children));
 }
 export function useAtlantisTheme() {
-    return useContext(AtlantisThemeContext);
+    var _a;
+    return (_a = useContext(AtlantisThemeContext)) !== null && _a !== void 0 ? _a : defaultAtlantisThemeContextValue;
+}
+function resolveEffectiveTheme(theme, colorScheme) {
+    if (theme !== "system")
+        return theme;
+    return colorScheme === "dark" ? "dark" : "light";
 }

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,30 +49,109 @@ 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", () => {
-        it("ignores updates to the global theme", () => __awaiter(void 0, void 0, void 0, function* () {
+        it("preserves the forced effective theme when the selected theme changes", () => __awaiter(void 0, void 0, void 0, function* () {
             const { result } = renderHook(useAtlantisTheme, {
                 wrapper: (props) => (React.createElement(WrapperWithOverride, Object.assign({}, props, { dangerouslyOverrideTheme: "light" }))),
             });
-            // Update the global theme
+            // Update the selected theme through the forced subtree.
             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.theme).toBe("dark");
+            expect(result.current.effectiveTheme).toBe("light");
+            expect(result.current.tokens).toEqual(expectedLightTokens);
+        }));
+        it("preserves the parent selected theme while forcing the effective theme", () => {
+            mockUseColorScheme.mockReturnValue("dark");
+            const { result } = renderHook(useAtlantisTheme, {
+                wrapper: (props) => (React.createElement(Wrapper, { theme: "system" },
+                    React.createElement(AtlantisThemeContextProvider, Object.assign({ dangerouslyOverrideTheme: "light" }, props)))),
+            });
+            expect(result.current.theme).toBe("system");
+            expect(result.current.effectiveTheme).toBe("light");
+            expect(result.current.tokens).toEqual(expectedLightTokens);
+        });
+        it("forwards selected theme changes through a forced subtree", () => __awaiter(void 0, void 0, void 0, function* () {
+            const { result } = renderHook(useAtlantisTheme, {
+                wrapper: (props) => (React.createElement(Wrapper, null,
+                    React.createElement(AtlantisThemeContextProvider, Object.assign({ dangerouslyOverrideTheme: "light" }, props)))),
+            });
+            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("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.theme).toBe("light");
+            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,