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

package/dist/package.json

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

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

@@ -15,7 +15,7 @@ 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";
+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() {
@@ -63,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) {

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

@@ -8,10 +8,10 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import React from "react";
-import { render, renderHook, screen, userEvent, within, } from "@testing-library/react-native";
+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 { useStyles } from "./SelectPrimitive.style";
 import { tokens } from "../../utils/design";
 import { PortalHostWrapper } from "../../utils/test";
 import { Icon } from "../../Icon";
@@ -101,7 +101,7 @@ const CITIES = [
     { value: "van", label: "Vancouver" },
     { value: "edm", label: "Edmonton" },
 ];
-function renderSelectWithContent({ defaultValue, onValueChange, closeOnPress, disabledItem, theme, } = {}) {
+function renderSelectWithContent({ defaultValue, onValueChange, closeOnPress, disabledItem, pressedItem, theme, } = {}) {
     const wrapper = theme === "dark"
         ? ({ children }) => (React.createElement(AtlantisThemeContextProvider, { dangerouslyOverrideTheme: "dark" },
             React.createElement(PortalHostWrapper, null, children)))
@@ -115,7 +115,7 @@ function renderSelectWithContent({ defaultValue, onValueChange, closeOnPress, di
                 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, testID: `ATL-Select-Item-${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" })))))),
@@ -151,17 +151,14 @@ describe("SelectPrimitive.Content", () => {
         });
     }));
 });
-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({
+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"],
         });
-    });
-});
-describe("SelectPrimitive.Item", () => {
+    }));
     it("selects the option, emits { value, label }, and closes", () => __awaiter(void 0, void 0, void 0, function* () {
         const onValueChange = jest.fn();
         renderSelectWithContent({ onValueChange });
@@ -241,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();