@jobber/components-native 0.113.8 → 0.114.0

package/dist/docs/AtlantisThemeContext/AtlantisThemeContext.md

@@ -5,16 +5,22 @@ tokens.
 
 ## Design & usage guidelines
 
-Both the web and mobile components have the exact same API, except for one minor
-difference in how you update the theme.
+Web and mobile both expose Atlantis theme context, but the runtime ownership is
+slightly different across platforms.
 
 Each platform provides a `useAtlantisTheme` hook that you may use to access the
-`theme` and `tokens` in your components.
+current theme information and design tokens in your components.
 
-On mobile, this hook also returns a `setTheme` function which you'll use to
-update the theme for the nearest `AtlantisThemeContextProvider` ancestor.
-Typically there will only be a single provider at the root, controlling the
-theme for the entire app.
+On mobile, the hook returns:
+
+* `theme`: the selected theme preference (`"system" | "light" | "dark"`)
+* `effectiveTheme`: the resolved theme Atlantis uses for tokens
+  (`"light" | "dark"`)
+* `tokens`
+* `setTheme`
+
+Typically there will only be a single provider at the root, and the consuming
+app will control `theme` and persist that preference outside Atlantis.
 
 On web, you'll need to import the `updateTheme` function and call it with the
 new theme. This is a separate function because it synchronizes the theme update
@@ -86,7 +92,7 @@ function App() {
 }
 
 function ThemedComponent() {
-  const { theme, tokens, setTheme } = useAtlantisTheme();
+  const { theme, effectiveTheme, tokens, setTheme } = useAtlantisTheme();
   return (
     <Content>
       <View
@@ -96,11 +102,16 @@ function ThemedComponent() {
         }}
       >
         <Content>
-          <Text>The current theme is: {theme}.</Text>
+          <Text>The selected theme is: {theme}.</Text>
+          <Text>The effective theme is: {effectiveTheme}.</Text>
           <Text>
             The javascript tokens can be accessed via the tokens object.
           </Text>
           <Text>The theme can be changed using `setTheme`</Text>
+          <Button
+            onPress={() => setTheme("system")}
+            label="The theme can be changed to system"
+          />
           <Button
             onPress={() => setTheme("light")}
             label="The theme can be changed to light"
@@ -163,6 +174,10 @@ regardless of the main application theme. This can be done by setting the
 `dangerouslyOverrideTheme` prop to `<themeToSet>` on the
 `AtlantisThemeContextProvider`.
 
+On mobile, forcing a theme changes the rendered tokens for that subtree, but it
+does not replace the selected theme preference semantics from the nearest
+non-forced provider.
+
 Note: If you're using `buildThemedStyles`, any `useStyles` calls must be done
 within a *child component* of the `AtlantisThemeContextProvider`, not in the
 same component that renders the provider. Same goes for `useAtlantisTheme`.
@@ -293,4 +308,6 @@ Key features:
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
 | `children` | `ReactNode` | Yes | — | The children to render. |
-| `dangerouslyOverrideTheme` | `Theme` | No | — | Force the theme for this provider to always be the same as the provided theme. Useful for sections that should remain... |
+| `dangerouslyOverrideTheme` | `EffectiveTheme` | No | — | Force the theme for this provider to always be the same as the provided theme. Useful for sections that should remain... |
+| `onThemeChange` | `(theme: Theme) => void` | No | — | Called when children request a selected theme change through setTheme. |
+| `theme` | `Theme` | No | — | Control the selected theme for this provider. |

package/dist/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jobber/components-native",
-    "version": "0.113.8",
+    "version": "0.114.0",
     "license": "MIT",
     "description": "React Native implementation of Atlantis",
     "repository": {
@@ -123,5 +123,5 @@
         "react-native-screens": ">=4.18.0",
         "react-native-svg": ">=12.0.0"
     },
-    "gitHead": "e4dbbfa3535d42741ca8622ccb33275f4284edd3"
+    "gitHead": "d79c88a2241ded3f29e879cd3c0d5a1e2dceb568"
 }

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/BottomSheet/BottomSheet.js

@@ -7,12 +7,15 @@ import { tokens } from "@jobber/design";
 import { useStyles } from "./BottomSheet.style";
 import { BottomSheetOption } from "./components/BottomSheetOption";
 import { useBottomSheetBackHandler } from "./hooks/useBottomSheetBackHandler";
+import { AtlantisThemeContextProvider, useAtlantisTheme, } from "../AtlantisThemeContext";
 import { Divider } from "../Divider";
 import { Heading } from "../Heading";
 import { useIsScreenReaderEnabled } from "../hooks";
 import { useAtlantisI18n } from "../hooks/useAtlantisI18n";
+// eslint-disable-next-line max-statements
 export function BottomSheet({ children, showCancel, loading = false, heading, onOpen, onClose, ref, }) {
     const styles = useStyles();
+    const { effectiveTheme } = useAtlantisTheme();
     const isScreenReaderEnabled = useIsScreenReaderEnabled();
     const cancellable = (showCancel && !loading) || isScreenReaderEnabled;
     const { t } = useAtlantisI18n();
@@ -48,13 +51,14 @@ export function BottomSheet({ children, showCancel, loading = false, heading, on
             dismissKeyboard();
             onClose === null || onClose === void 0 ? void 0 : onClose();
         }, keyboardBlurBehavior: "restore", handleStyle: styles.handle },
-        React.createElement(BottomSheetView, { style: {
-                paddingBottom: insets.bottom + tokens["space-small"],
-                paddingTop: tokens["space-small"],
-            } },
-            heading && React.createElement(Header, { heading: heading, styles: styles }),
-            children,
-            cancellable && (React.createElement(Footer, { styles: styles, close: close, cancelLabel: t("cancel") })))));
+        React.createElement(AtlantisThemeContextProvider, { dangerouslyOverrideTheme: effectiveTheme },
+            React.createElement(BottomSheetView, { style: {
+                    paddingBottom: insets.bottom + tokens["space-small"],
+                    paddingTop: tokens["space-small"],
+                } },
+                heading && React.createElement(Header, { heading: heading, styles: styles }),
+                children,
+                cancellable && (React.createElement(Footer, { styles: styles, close: close, cancelLabel: t("cancel") }))))));
 }
 function Header({ heading, styles, }) {
     return (React.createElement(View, { style: styles.header },

package/dist/src/BottomSheet/BottomSheet.test.js

@@ -12,6 +12,7 @@ import { act, render, userEvent, waitFor } from "@testing-library/react-native";
 import { AccessibilityInfo, View } from "react-native";
 import { BottomSheet } from ".";
 import { waitForUntestableRender } from "../utils/test/wait";
+import { AtlantisThemeContextProvider, useAtlantisTheme, } from "../AtlantisThemeContext";
 import { Text } from "../Text";
 jest.unmock("../hooks/useIsScreenReaderEnabled");
 const ref = createRef();
@@ -31,6 +32,17 @@ it("renders a BottomSheet", () => __awaiter(void 0, void 0, void 0, function* ()
     }));
     expect(yield findByText("BottomSheet")).toBeDefined();
 }));
+it("preserves the effective Atlantis theme for children rendered through the portal", () => __awaiter(void 0, void 0, void 0, function* () {
+    const { findByText } = render(React.createElement(AtlantisThemeContextProvider, { theme: "dark" },
+        React.createElement(BottomSheet, { ref: ref },
+            React.createElement(ThemeProbe, null))));
+    yield waitForUntestableRender("Wait for AccessibilityInfo.isScreenReaderEnabled to resolve");
+    yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+        var _a;
+        (_a = ref.current) === null || _a === void 0 ? void 0 : _a.open();
+    }));
+    expect(yield findByText("theme:dark")).toBeDefined();
+}));
 it("renders a BottomSheet with a header", () => __awaiter(void 0, void 0, void 0, function* () {
     const header = "Hello this is header";
     const { findByText } = setup({ heading: header });
@@ -103,3 +115,7 @@ describe("when there is a screen reader enabled", () => {
         });
     }));
 });
+function ThemeProbe() {
+    const { effectiveTheme } = useAtlantisTheme();
+    return React.createElement(Text, null, `theme:${effectiveTheme}`);
+}

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,