@jobber/components-native 0.114.13 → 0.114.14-JOB-183884-72cd42b.0

package/dist/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jobber/components-native",
-    "version": "0.114.13",
+    "version": "0.114.14-JOB-183884-72cd42b.0+72cd42b9",
     "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": "72cd42b9f0c6b6650ba1e3915876164919ba0155"
 }

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 { 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));
@@ -77,12 +81,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 +105,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

@@ -8,11 +8,14 @@ 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 { render, renderHook, screen, userEvent, within, } from "@testing-library/react-native";
+import { darkTokens } from "@jobber/design";
 import { SelectPrimitive } from "./SelectPrimitive";
+import { useStyles } from "./SelectPrimitive.style";
 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, 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, 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,6 +143,23 @@ 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 styles", () => {
+    it("uses the elevated dark surface active token for pressed items", () => {
+        const { result } = renderHook(useStyles, {
+            wrapper: ({ children }) => (React.createElement(AtlantisThemeContextProvider, { dangerouslyOverrideTheme: "dark" }, children)),
+        });
+        expect(result.current.itemPressedDarkElevated).toMatchObject({
+            backgroundColor: darkTokens["color-surface--active"],
+        });
+    });
 });
 describe("SelectPrimitive.Item", () => {
     it("selects the option, emits { value, label }, and closes", () => __awaiter(void 0, void 0, void 0, function* () {