@jobber/components-native 0.114.13 → 0.114.14

package/dist/types/src/primitives/Select/SelectPrimitive.d.ts

@@ -11,7 +11,7 @@ declare function SelectPrimitiveRoot({ ...props }: SelectPrimitiveRootProps): Re
 declare function SelectPrimitiveTrigger({ children, style, testID, invalid, ref, ...props }: SelectPrimitiveTriggerProps): React.JSX.Element;
 declare function SelectPrimitiveValue({ style, ...props }: SelectPrimitiveValueProps): React.JSX.Element;
 /** Portals the dropdown into the mounted `AtlantisPortalHost`. */
-declare function SelectPrimitivePortal({ ...props }: SelectPrimitivePortalProps): React.JSX.Element;
+declare function SelectPrimitivePortal({ children, ...props }: SelectPrimitivePortalProps): React.JSX.Element;
 /** Tap-outside dismiss surface behind the dropdown (no scrim). */
 declare function SelectPrimitiveOverlay({ style, testID, ...props }: SelectPrimitiveOverlayProps): React.JSX.Element;
 /**

package/dist/types/src/primitives/Select/SelectPrimitive.style.d.ts

@@ -65,6 +65,9 @@ export declare const useStyles: () => {
         borderRadius: number;
         padding: number;
     };
+    contentDarkElevated: {
+        backgroundColor: string;
+    };
     item: {
         flexDirection: "row";
         alignItems: "center";
@@ -76,6 +79,9 @@ export declare const useStyles: () => {
     itemPressed: {
         backgroundColor: string;
     };
+    itemPressedDarkElevated: {
+        backgroundColor: string;
+    };
     itemText: {
         flex: number;
         color: string;

package/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/src/Select/Select.guide.md

@@ -106,6 +106,12 @@ A few decisions shape how the composable parts fit together:
   name), so it isn't announced twice — mirroring `InputText` /
   `InputFieldWrapper`.
 
+- **The dropdown uses an elevated dark surface.** Native does not have the web
+  `data-elevation="elevated"` token remapping layer, so the primitive applies a
+  local dark-only elevated surface to the dropdown and its pressed option rows.
+  The selected row remains checkmark-only; it does not receive a persistent
+  selected background.
+
 ### Rendering above native-stack modals
 
 `Select.Content` renders correctly inside iOS native-stack full-screen modals

package/src/primitives/Select/SelectPrimitive.style.ts

@@ -98,6 +98,10 @@ export const useStyles = buildThemedStyles(tokens => {
       ...contentShadow,
     },
 
+    contentDarkElevated: {
+      backgroundColor: tokens["color-surface--background--subtle"],
+    },
+
     item: {
       flexDirection: "row",
       alignItems: "center",
@@ -111,6 +115,10 @@ export const useStyles = buildThemedStyles(tokens => {
       backgroundColor: tokens["color-surface--hover"],
     },
 
+    itemPressedDarkElevated: {
+      backgroundColor: tokens["color-surface--active"],
+    },
+
     itemText: {
       flex: 1,
       color: tokens["color-text"],

package/src/primitives/Select/SelectPrimitive.test.tsx

@@ -5,11 +5,14 @@ import {
   userEvent,
   within,
 } from "@testing-library/react-native";
+import { darkTokens } from "@jobber/design";
 import type { TriggerRef } from "@rn-primitives/select";
+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();
 
@@ -159,12 +162,25 @@ function renderSelectWithContent({
   onValueChange,
   closeOnPress,
   disabledItem,
+  pressedItem,
+  theme,
 }: {
   defaultValue?: { value: string; label: string };
   onValueChange?: (option?: { value: string; label: string }) => void;
   closeOnPress?: boolean;
   disabledItem?: string;
+  pressedItem?: string;
+  theme?: "dark";
 } = {}) {
+  const wrapper =
+    theme === "dark"
+      ? ({ children }: { readonly children: React.ReactNode }) => (
+          <AtlantisThemeContextProvider dangerouslyOverrideTheme="dark">
+            <PortalHostWrapper>{children}</PortalHostWrapper>
+          </AtlantisThemeContextProvider>
+        )
+      : PortalHostWrapper;
+
   return render(
     <SelectPrimitive.Root
       defaultValue={defaultValue}
@@ -175,7 +191,7 @@ function renderSelectWithContent({
       </SelectPrimitive.Trigger>
       <SelectPrimitive.Portal>
         <SelectPrimitive.Overlay />
-        <SelectPrimitive.Content>
+        <SelectPrimitive.Content testID="ATL-Select-Content">
           <SelectPrimitive.Viewport>
             <SelectPrimitive.Group>
               <SelectPrimitive.Label>Cities</SelectPrimitive.Label>
@@ -186,6 +202,8 @@ function renderSelectWithContent({
                   label={city.label}
                   closeOnPress={closeOnPress}
                   disabled={disabledItem === city.value}
+                  testOnly_pressed={pressedItem === city.value}
+                  testID={`ATL-Select-Item-${city.value}`}
                 >
                   <SelectPrimitive.ItemText
                     disabled={disabledItem === city.value}
@@ -201,7 +219,7 @@ function renderSelectWithContent({
         </SelectPrimitive.Content>
       </SelectPrimitive.Portal>
     </SelectPrimitive.Root>,
-    { wrapper: PortalHostWrapper },
+    { wrapper },
   );
 }
 
@@ -231,9 +249,27 @@ describe("SelectPrimitive.Content", () => {
     expect(screen.queryByText("Toronto")).toBeNull();
     expect(onValueChange).not.toHaveBeenCalled();
   });
+
+  it("uses the elevated dark surface style for content", async () => {
+    renderSelectWithContent({ theme: "dark" });
+    await 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", async () => {
+    renderSelectWithContent({ theme: "dark", pressedItem: "tor" });
+    await openSelect();
+
+    expect(screen.getByTestId("ATL-Select-Item-tor")).toHaveStyle({
+      backgroundColor: darkTokens["color-surface--active"],
+    });
+  });
+
   it("selects the option, emits { value, label }, and closes", async () => {
     const onValueChange = jest.fn();
     renderSelectWithContent({ onValueChange });
@@ -341,6 +377,50 @@ describe("SelectPrimitive.Item", () => {
   });
 });
 
+describe("SelectPrimitive.Portal", () => {
+  it("preserves the selected theme when the portal host is outside the provider", async () => {
+    render(
+      <SelectPrimitive.Root>
+        <SelectPrimitive.Trigger>
+          <SelectPrimitive.Value placeholder="Select an option" />
+        </SelectPrimitive.Trigger>
+        <SelectPrimitive.Portal>
+          <SelectPrimitive.Content testID="ATL-Select-Content">
+            <SelectPrimitive.Viewport>
+              <SelectPrimitive.Item
+                value="tor"
+                label="Toronto"
+                testID="ATL-Select-Item-tor"
+              >
+                <SelectPrimitive.ItemText />
+                <SelectPrimitive.ItemIndicator>
+                  <Icon name="checkmark" />
+                </SelectPrimitive.ItemIndicator>
+              </SelectPrimitive.Item>
+            </SelectPrimitive.Viewport>
+          </SelectPrimitive.Content>
+        </SelectPrimitive.Portal>
+      </SelectPrimitive.Root>,
+      {
+        wrapper: ({ children }: { readonly children: React.ReactNode }) => (
+          <>
+            <AtlantisThemeContextProvider dangerouslyOverrideTheme="dark">
+              {children}
+            </AtlantisThemeContextProvider>
+            <PortalHost />
+          </>
+        ),
+      },
+    );
+
+    await 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();

package/src/primitives/Select/SelectPrimitive.tsx

@@ -19,10 +19,18 @@ import type {
   SelectPrimitiveViewportProps,
 } from "./types";
 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({ ...props }: SelectPrimitiveRootProps) {
   return <Primitive.Root {...props} />;
 }
@@ -91,8 +99,19 @@ function SelectPrimitiveValue({ style, ...props }: SelectPrimitiveValueProps) {
 }
 
 /** Portals the dropdown into the mounted `AtlantisPortalHost`. */
-function SelectPrimitivePortal({ ...props }: SelectPrimitivePortalProps) {
-  return <Primitive.Portal {...props} />;
+function SelectPrimitivePortal({
+  children,
+  ...props
+}: SelectPrimitivePortalProps) {
+  const { effectiveTheme } = useAtlantisTheme();
+
+  return (
+    <Primitive.Portal {...props}>
+      <AtlantisThemeContextProvider dangerouslyOverrideTheme={effectiveTheme}>
+        {children}
+      </AtlantisThemeContextProvider>
+    </Primitive.Portal>
+  );
 }
 
 /** Tap-outside dismiss surface behind the dropdown (no scrim). */
@@ -126,6 +145,7 @@ function SelectPrimitiveContent({
   ...props
 }: SelectPrimitiveContentProps) {
   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 = React.useContext(SafeAreaInsetsContext) ?? undefined;
@@ -138,6 +158,7 @@ function SelectPrimitiveContent({
       insets={insets ?? safeAreaInsets}
       style={StyleSheet.flatten([
         styles.content,
+        isDarkTheme && styles.contentDarkElevated,
         triggerPosition ? { width: triggerPosition.width } : undefined,
         style,
       ])}
@@ -164,6 +185,7 @@ function SelectPrimitiveItem({
   ...props
 }: SelectPrimitiveItemProps) {
   const styles = useStyles();
+  const isDarkTheme = useIsDarkTheme();
 
   return (
     <Primitive.Item
@@ -172,6 +194,7 @@ function SelectPrimitiveItem({
       style={({ pressed }) => [
         styles.item,
         pressed && styles.itemPressed,
+        pressed && isDarkTheme && styles.itemPressedDarkElevated,
         style,
       ]}
       {...props}