@jobber/components-native 0.114.13 → 0.114.14

package/dist/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jobber/components-native",
-    "version": "0.114.13",
+    "version": "0.114.14",
     "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": "0991c3a7ba2e5b5bce8aa8adea0eb60aa9d360f8"
+    "gitHead": "3fba9dd8675ceed40979c17792faf2d091ac2ce7"
 }

package/dist/src/primitives/Select/SelectPrimitive.js

@@ -15,8 +15,12 @@ import * as Primitive from "@rn-primitives/select";
 import { SafeAreaInsetsContext } from "react-native-safe-area-context";
 import { useStyles } from "./SelectPrimitive.style";
 import { tokens as staticTokens } from "../../utils/design";
+import { AtlantisThemeContextProvider, useAtlantisTheme, } from "../../AtlantisThemeContext";
 /** Default trigger testID. Consumer-supplied `testID`s are used verbatim. */
 export const SELECT_TRIGGER_DEFAULT_TEST_ID = "ATL-Select-Trigger";
+function useIsDarkTheme() {
+    return useAtlantisTheme().effectiveTheme === "dark";
+}
 function SelectPrimitiveRoot(_a) {
     var props = __rest(_a, []);
     return React.createElement(Primitive.Root, Object.assign({}, props));
@@ -59,8 +63,10 @@ function SelectPrimitiveValue(_a) {
 }
 /** Portals the dropdown into the mounted `AtlantisPortalHost`. */
 function SelectPrimitivePortal(_a) {
-    var props = __rest(_a, []);
-    return React.createElement(Primitive.Portal, Object.assign({}, props));
+    var { children } = _a, props = __rest(_a, ["children"]);
+    const { effectiveTheme } = useAtlantisTheme();
+    return (React.createElement(Primitive.Portal, Object.assign({}, props),
+        React.createElement(AtlantisThemeContextProvider, { dangerouslyOverrideTheme: effectiveTheme }, children)));
 }
 /** Tap-outside dismiss surface behind the dropdown (no scrim). */
 function SelectPrimitiveOverlay(_a) {
@@ -77,12 +83,14 @@ function SelectPrimitiveContent(_a) {
     var _b;
     var { children, style, sideOffset = staticTokens["space-smaller"], insets, ref } = _a, props = __rest(_a, ["children", "style", "sideOffset", "insets", "ref"]);
     const styles = useStyles();
+    const isDarkTheme = useIsDarkTheme();
     // Read the context directly, not `useSafeAreaInsets` (which throws without a
     // provider): `Content` renders at the portal host, which may sit outside one.
     const safeAreaInsets = (_b = React.useContext(SafeAreaInsetsContext)) !== null && _b !== void 0 ? _b : undefined;
     const { triggerPosition } = Primitive.useRootContext();
     return (React.createElement(Primitive.Content, Object.assign({ ref: ref, sideOffset: sideOffset, insets: insets !== null && insets !== void 0 ? insets : safeAreaInsets, style: StyleSheet.flatten([
             styles.content,
+            isDarkTheme && styles.contentDarkElevated,
             triggerPosition ? { width: triggerPosition.width } : undefined,
             style,
         ]) }, props), children));
@@ -99,9 +107,11 @@ function SelectPrimitiveViewport(_a) {
 function SelectPrimitiveItem(_a) {
     var { style, disabled, ref } = _a, props = __rest(_a, ["style", "disabled", "ref"]);
     const styles = useStyles();
+    const isDarkTheme = useIsDarkTheme();
     return (React.createElement(Primitive.Item, Object.assign({ ref: ref, disabled: disabled, style: ({ pressed }) => [
             styles.item,
             pressed && styles.itemPressed,
+            pressed && isDarkTheme && styles.itemPressedDarkElevated,
             style,
         ] }, props)));
 }

package/dist/src/primitives/Select/SelectPrimitive.style.js

@@ -73,6 +73,9 @@ export const useStyles = buildThemedStyles(tokens => {
             left: 0,
         },
         content: Object.assign({ backgroundColor: tokens["color-surface"], borderWidth: tokens["border-base"], borderColor: tokens["color-border"], borderRadius: tokens["radius-base"], padding: tokens["space-small"] }, contentShadow),
+        contentDarkElevated: {
+            backgroundColor: tokens["color-surface--background--subtle"],
+        },
         item: {
             flexDirection: "row",
             alignItems: "center",
@@ -84,6 +87,9 @@ export const useStyles = buildThemedStyles(tokens => {
         itemPressed: {
             backgroundColor: tokens["color-surface--hover"],
         },
+        itemPressedDarkElevated: {
+            backgroundColor: tokens["color-surface--active"],
+        },
         itemText: {
             flex: 1,
             color: tokens["color-text"],

package/dist/src/primitives/Select/SelectPrimitive.test.js

@@ -9,10 +9,13 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 import React from "react";
 import { render, screen, userEvent, within, } from "@testing-library/react-native";
+import { darkTokens } from "@jobber/design";
+import { PortalHost } from "@rn-primitives/portal";
 import { SelectPrimitive } from "./SelectPrimitive";
 import { tokens } from "../../utils/design";
 import { PortalHostWrapper } from "../../utils/test";
 import { Icon } from "../../Icon";
+import { AtlantisThemeContextProvider } from "../../AtlantisThemeContext";
 const user = userEvent.setup();
 beforeAll(() => {
     var _a;
@@ -98,21 +101,25 @@ const CITIES = [
     { value: "van", label: "Vancouver" },
     { value: "edm", label: "Edmonton" },
 ];
-function renderSelectWithContent({ defaultValue, onValueChange, closeOnPress, disabledItem, } = {}) {
+function renderSelectWithContent({ defaultValue, onValueChange, closeOnPress, disabledItem, pressedItem, theme, } = {}) {
+    const wrapper = theme === "dark"
+        ? ({ children }) => (React.createElement(AtlantisThemeContextProvider, { dangerouslyOverrideTheme: "dark" },
+            React.createElement(PortalHostWrapper, null, children)))
+        : PortalHostWrapper;
     return render(React.createElement(SelectPrimitive.Root, { defaultValue: defaultValue, onValueChange: onValueChange },
         React.createElement(SelectPrimitive.Trigger, null,
             React.createElement(SelectPrimitive.Value, { placeholder: "Select an option" })),
         React.createElement(SelectPrimitive.Portal, null,
             React.createElement(SelectPrimitive.Overlay, null),
-            React.createElement(SelectPrimitive.Content, null,
+            React.createElement(SelectPrimitive.Content, { testID: "ATL-Select-Content" },
                 React.createElement(SelectPrimitive.Viewport, null,
                     React.createElement(SelectPrimitive.Group, null,
                         React.createElement(SelectPrimitive.Label, null, "Cities"),
-                        CITIES.map(city => (React.createElement(SelectPrimitive.Item, { key: city.value, value: city.value, label: city.label, closeOnPress: closeOnPress, disabled: disabledItem === city.value },
+                        CITIES.map(city => (React.createElement(SelectPrimitive.Item, { key: city.value, value: city.value, label: city.label, closeOnPress: closeOnPress, disabled: disabledItem === city.value, testOnly_pressed: pressedItem === city.value, testID: `ATL-Select-Item-${city.value}` },
                             React.createElement(SelectPrimitive.ItemText, { disabled: disabledItem === city.value }),
                             React.createElement(SelectPrimitive.ItemIndicator, null,
                                 React.createElement(Icon, { name: "checkmark" })))))),
-                    React.createElement(SelectPrimitive.Separator, null))))), { wrapper: PortalHostWrapper });
+                    React.createElement(SelectPrimitive.Separator, null))))), { wrapper });
 }
 function openSelect() {
     return __awaiter(this, void 0, void 0, function* () {
@@ -136,8 +143,22 @@ describe("SelectPrimitive.Content", () => {
         expect(screen.queryByText("Toronto")).toBeNull();
         expect(onValueChange).not.toHaveBeenCalled();
     }));
+    it("uses the elevated dark surface style for content", () => __awaiter(void 0, void 0, void 0, function* () {
+        renderSelectWithContent({ theme: "dark" });
+        yield openSelect();
+        expect(screen.getByTestId("ATL-Select-Content")).toHaveStyle({
+            backgroundColor: darkTokens["color-surface--background--subtle"],
+        });
+    }));
 });
 describe("SelectPrimitive.Item", () => {
+    it("uses the elevated dark surface active token when pressed", () => __awaiter(void 0, void 0, void 0, function* () {
+        renderSelectWithContent({ theme: "dark", pressedItem: "tor" });
+        yield openSelect();
+        expect(screen.getByTestId("ATL-Select-Item-tor")).toHaveStyle({
+            backgroundColor: darkTokens["color-surface--active"],
+        });
+    }));
     it("selects the option, emits { value, label }, and closes", () => __awaiter(void 0, void 0, void 0, function* () {
         const onValueChange = jest.fn();
         renderSelectWithContent({ onValueChange });
@@ -217,6 +238,28 @@ describe("SelectPrimitive.Item", () => {
         });
     }));
 });
+describe("SelectPrimitive.Portal", () => {
+    it("preserves the selected theme when the portal host is outside the provider", () => __awaiter(void 0, void 0, void 0, function* () {
+        render(React.createElement(SelectPrimitive.Root, null,
+            React.createElement(SelectPrimitive.Trigger, null,
+                React.createElement(SelectPrimitive.Value, { placeholder: "Select an option" })),
+            React.createElement(SelectPrimitive.Portal, null,
+                React.createElement(SelectPrimitive.Content, { testID: "ATL-Select-Content" },
+                    React.createElement(SelectPrimitive.Viewport, null,
+                        React.createElement(SelectPrimitive.Item, { value: "tor", label: "Toronto", testID: "ATL-Select-Item-tor" },
+                            React.createElement(SelectPrimitive.ItemText, null),
+                            React.createElement(SelectPrimitive.ItemIndicator, null,
+                                React.createElement(Icon, { name: "checkmark" }))))))), {
+            wrapper: ({ children }) => (React.createElement(React.Fragment, null,
+                React.createElement(AtlantisThemeContextProvider, { dangerouslyOverrideTheme: "dark" }, children),
+                React.createElement(PortalHost, null))),
+        });
+        yield openSelect();
+        expect(screen.getByTestId("ATL-Select-Content")).toHaveStyle({
+            backgroundColor: darkTokens["color-surface--background--subtle"],
+        });
+    }));
+});
 describe("SelectPrimitive.Value", () => {
     it("shows the placeholder with subdued styling when nothing is selected", () => {
         renderSelect();