@jobber/components-native 0.105.4 → 0.107.0

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

@@ -0,0 +1,141 @@
+import { buildThemedStyles } from "../../AtlantisThemeContext";
+import { getTypographyStyles } from "../../Typography";
+import { tokens as staticTokens } from "../../utils/design";
+
+const baseLineHeight = staticTokens["typography--lineHeight-base"];
+
+export const useStyles = buildThemedStyles(tokens => {
+  const typographyStyles = getTypographyStyles(tokens);
+
+  // The dark theme merges a web CSS-string `shadow-base` over the native object
+  // shadow, leaving stray indexed keys on the value. Pick only the React Native
+  // shadow properties so those keys never reach the style (spreading them
+  // breaks style application through the dropdown's portal on react-native-web).
+  const shadowBase = tokens["shadow-base"];
+  const contentShadow = {
+    shadowColor: shadowBase.shadowColor,
+    shadowOffset: shadowBase.shadowOffset,
+    shadowOpacity: shadowBase.shadowOpacity,
+    shadowRadius: shadowBase.shadowRadius,
+    elevation: shadowBase.elevation,
+  };
+
+  return {
+    trigger: {
+      flexDirection: "row",
+      alignItems: "center",
+      gap: tokens["space-small"],
+      minHeight: tokens["space-largest"] + tokens["space-small"],
+      paddingHorizontal: tokens["space-slim"],
+      backgroundColor: tokens["color-surface"],
+      borderWidth: tokens["border-base"],
+      borderColor: tokens["color-border--interactive"],
+      borderRadius: tokens["radius-base"],
+    },
+
+    triggerOpen: {
+      borderWidth: tokens["border-thick"],
+      borderColor: tokens["color-interactive--subtle"],
+      // Keep the content from shifting when the border thickens.
+      paddingHorizontal:
+        tokens["space-slim"] - (tokens["border-thick"] - tokens["border-base"]),
+    },
+
+    triggerPressed: {
+      borderWidth: tokens["border-thick"],
+      borderColor: tokens["color-border--interactive"],
+      paddingHorizontal:
+        tokens["space-slim"] - (tokens["border-thick"] - tokens["border-base"]),
+    },
+
+    // Critical sets only the colour; width follows the open/pressed state.
+    triggerInvalid: {
+      borderColor: tokens["color-critical"],
+    },
+
+    triggerDisabled: {
+      backgroundColor: tokens["color-disabled--secondary"],
+    },
+
+    value: {
+      flex: 1,
+      color: tokens["color-text"],
+      fontFamily: typographyStyles.baseRegularRegular.fontFamily,
+      fontSize: typographyStyles.defaultSize.fontSize,
+      lineHeight: baseLineHeight,
+      letterSpacing: typographyStyles.baseLetterSpacing.letterSpacing,
+    },
+
+    valuePlaceholder: {
+      color: tokens["color-text--secondary"],
+    },
+
+    valueDisabled: {
+      color: tokens["color-disabled"],
+    },
+
+    overlay: {
+      position: "absolute",
+      top: 0,
+      right: 0,
+      bottom: 0,
+      left: 0,
+    },
+
+    content: {
+      backgroundColor: tokens["color-surface"],
+      borderWidth: tokens["border-base"],
+      borderColor: tokens["color-border"],
+      borderRadius: tokens["radius-base"],
+      padding: tokens["space-small"],
+      ...contentShadow,
+    },
+
+    item: {
+      flexDirection: "row",
+      alignItems: "center",
+      gap: tokens["space-small"],
+      minHeight: tokens["space-largest"] + tokens["space-small"],
+      padding: tokens["space-small"],
+      borderRadius: tokens["radius-small"],
+    },
+
+    itemPressed: {
+      backgroundColor: tokens["color-surface--hover"],
+    },
+
+    itemText: {
+      flex: 1,
+      color: tokens["color-text"],
+      fontFamily: typographyStyles.baseRegularSemiBold.fontFamily,
+      fontSize: typographyStyles.defaultSize.fontSize,
+      lineHeight: baseLineHeight,
+      letterSpacing: typographyStyles.baseLetterSpacing.letterSpacing,
+    },
+
+    itemTextDisabled: {
+      color: tokens["color-disabled"],
+    },
+
+    itemIndicator: {
+      justifyContent: "center",
+      alignItems: "center",
+    },
+
+    groupLabel: {
+      color: tokens["color-text--secondary"],
+      fontFamily: typographyStyles.baseRegularRegular.fontFamily,
+      fontSize: tokens["typography--fontSize-small"],
+      lineHeight: tokens["typography--lineHeight-tight"],
+      paddingTop: tokens["space-small"],
+      paddingBottom: tokens["space-smaller"],
+      paddingHorizontal: tokens["space-small"],
+    },
+
+    separator: {
+      height: tokens["border-base"],
+      backgroundColor: tokens["color-border"],
+      marginVertical: tokens["space-small"],
+    },
+  };
+});

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

@@ -0,0 +1,372 @@
+import React from "react";
+import {
+  render,
+  screen,
+  userEvent,
+  within,
+} from "@testing-library/react-native";
+import type { TriggerRef } from "@rn-primitives/select";
+import { SelectPrimitive } from "./SelectPrimitive";
+import { tokens } from "../../utils/design";
+import { PortalHostWrapper } from "../../utils/test";
+import { Icon } from "../../Icon";
+
+const user = userEvent.setup();
+
+beforeAll(() => {
+  const MockNativeMethods = require("react-native/jest/MockNativeMethods");
+  const mockedMethods = MockNativeMethods.default ?? MockNativeMethods;
+  mockedMethods.measure.mockImplementation(
+    (
+      callback: (
+        x: number,
+        y: number,
+        width: number,
+        height: number,
+        pageX: number,
+        pageY: number,
+      ) => void,
+    ) => {
+      callback(0, 0, 320, 48, 20, 100);
+    },
+  );
+});
+
+function renderSelect({
+  defaultValue,
+  onOpenChange,
+  disabled,
+  invalid,
+  testID,
+  triggerRef,
+}: {
+  defaultValue?: { value: string; label: string };
+  onOpenChange?: (open: boolean) => void;
+  disabled?: boolean;
+  invalid?: boolean;
+  testID?: string;
+  triggerRef?: React.Ref<TriggerRef>;
+} = {}) {
+  return render(
+    <SelectPrimitive.Root
+      defaultValue={defaultValue}
+      onOpenChange={onOpenChange}
+      disabled={disabled}
+    >
+      <SelectPrimitive.Trigger
+        ref={triggerRef}
+        testID={testID}
+        invalid={invalid}
+      >
+        <SelectPrimitive.Value placeholder="Select an option" />
+      </SelectPrimitive.Trigger>
+    </SelectPrimitive.Root>,
+  );
+}
+
+describe("SelectPrimitive.Trigger", () => {
+  it("renders with the default testID", () => {
+    renderSelect();
+    expect(screen.getByTestId("ATL-Select-Trigger")).toBeDefined();
+  });
+
+  it("namespaces a provided testID", () => {
+    renderSelect({ testID: "city" });
+    expect(screen.getByTestId("ATL-city-Select-Trigger")).toBeDefined();
+    expect(screen.queryByTestId("ATL-Select-Trigger")).toBeNull();
+  });
+
+  it("fires onOpenChange and applies open styling when pressed", async () => {
+    const onOpenChange = jest.fn();
+    renderSelect({ onOpenChange });
+
+    const trigger = screen.getByTestId("ATL-Select-Trigger");
+    expect(trigger).toHaveStyle({
+      borderColor: tokens["color-border--interactive"],
+    });
+
+    await user.press(trigger);
+
+    expect(onOpenChange).toHaveBeenCalledWith(true);
+    expect(trigger).toHaveStyle({
+      borderColor: tokens["color-interactive--subtle"],
+      borderWidth: tokens["border-thick"],
+    });
+  });
+
+  it("does not open when disabled", async () => {
+    const onOpenChange = jest.fn();
+    renderSelect({ onOpenChange, disabled: true });
+
+    await user.press(screen.getByTestId("ATL-Select-Trigger"));
+
+    expect(onOpenChange).not.toHaveBeenCalled();
+  });
+
+  it("applies disabled styling: subtle fill and disabled value text", () => {
+    renderSelect({ disabled: true });
+
+    expect(screen.getByTestId("ATL-Select-Trigger")).toHaveStyle({
+      backgroundColor: tokens["color-disabled--secondary"],
+    });
+    expect(screen.getByText("Select an option")).toHaveStyle({
+      color: tokens["color-disabled"],
+    });
+  });
+
+  it("applies critical border styling when invalid", () => {
+    renderSelect({ invalid: true });
+
+    expect(screen.getByTestId("ATL-Select-Trigger")).toHaveStyle({
+      borderColor: tokens["color-critical"],
+    });
+  });
+
+  it("exposes a combobox role and conveys disabled to the accessibility state", () => {
+    renderSelect({ disabled: true });
+
+    const trigger = screen.getByRole("combobox");
+    expect(trigger.props.accessibilityState).toMatchObject({ disabled: true });
+  });
+
+  it("announces the selected option as the trigger's accessibility value", () => {
+    renderSelect({ defaultValue: { value: "tor", label: "Toronto" } });
+
+    const trigger = screen.getByTestId("ATL-Select-Trigger");
+    expect(trigger.props.accessibilityValue).toEqual({ text: "Toronto" });
+  });
+});
+
+describe("SelectPrimitive.Trigger ref", () => {
+  it("forwards a ref exposing the trigger with open/close", () => {
+    const triggerRef = React.createRef<TriggerRef>();
+    renderSelect({ triggerRef });
+
+    expect(triggerRef.current).not.toBeNull();
+    expect(typeof triggerRef.current?.open).toBe("function");
+    expect(typeof triggerRef.current?.close).toBe("function");
+  });
+});
+
+const CITIES = [
+  { value: "tor", label: "Toronto" },
+  { value: "van", label: "Vancouver" },
+  { value: "edm", label: "Edmonton" },
+];
+
+function renderSelectWithContent({
+  defaultValue,
+  onValueChange,
+  closeOnPress,
+  disabledItem,
+}: {
+  defaultValue?: { value: string; label: string };
+  onValueChange?: (option?: { value: string; label: string }) => void;
+  closeOnPress?: boolean;
+  disabledItem?: string;
+} = {}) {
+  return render(
+    <SelectPrimitive.Root
+      defaultValue={defaultValue}
+      onValueChange={onValueChange}
+    >
+      <SelectPrimitive.Trigger>
+        <SelectPrimitive.Value placeholder="Select an option" />
+      </SelectPrimitive.Trigger>
+      <SelectPrimitive.Portal>
+        <SelectPrimitive.Overlay />
+        <SelectPrimitive.Content>
+          <SelectPrimitive.Viewport>
+            <SelectPrimitive.Group>
+              <SelectPrimitive.Label>Cities</SelectPrimitive.Label>
+              {CITIES.map(city => (
+                <SelectPrimitive.Item
+                  key={city.value}
+                  value={city.value}
+                  label={city.label}
+                  closeOnPress={closeOnPress}
+                  disabled={disabledItem === city.value}
+                >
+                  <SelectPrimitive.ItemText
+                    disabled={disabledItem === city.value}
+                  />
+                  <SelectPrimitive.ItemIndicator>
+                    <Icon name="checkmark" />
+                  </SelectPrimitive.ItemIndicator>
+                </SelectPrimitive.Item>
+              ))}
+            </SelectPrimitive.Group>
+            <SelectPrimitive.Separator />
+          </SelectPrimitive.Viewport>
+        </SelectPrimitive.Content>
+      </SelectPrimitive.Portal>
+    </SelectPrimitive.Root>,
+    { wrapper: PortalHostWrapper },
+  );
+}
+
+async function openSelect() {
+  await user.press(screen.getByTestId("ATL-Select-Trigger"));
+}
+
+describe("SelectPrimitive.Content", () => {
+  it("renders nothing until the trigger opens it", async () => {
+    renderSelectWithContent();
+    expect(screen.queryByText("Toronto")).toBeNull();
+
+    await openSelect();
+
+    expect(screen.getByText("Toronto")).toBeDefined();
+    expect(screen.getByText("Vancouver")).toBeDefined();
+    expect(screen.getByText("Cities")).toBeDefined();
+  });
+
+  it("dismisses when tapping outside (overlay), without selecting", async () => {
+    const onValueChange = jest.fn();
+    renderSelectWithContent({ onValueChange });
+    await openSelect();
+
+    await user.press(screen.getByTestId("ATL-Select-Overlay"));
+
+    expect(screen.queryByText("Toronto")).toBeNull();
+    expect(onValueChange).not.toHaveBeenCalled();
+  });
+});
+
+describe("SelectPrimitive.Item", () => {
+  it("selects the option, emits { value, label }, and closes", async () => {
+    const onValueChange = jest.fn();
+    renderSelectWithContent({ onValueChange });
+    await openSelect();
+
+    await user.press(screen.getByText("Vancouver"));
+
+    expect(onValueChange).toHaveBeenCalledWith({
+      value: "van",
+      label: "Vancouver",
+    });
+    // Dropdown closed; trigger now shows the selection.
+    expect(screen.queryByText("Cities")).toBeNull();
+    expect(screen.getByText("Vancouver")).toBeDefined();
+  });
+
+  it("passes closeOnPress through — dropdown stays open when false", async () => {
+    const onValueChange = jest.fn();
+    renderSelectWithContent({ onValueChange, closeOnPress: false });
+    await openSelect();
+
+    await user.press(screen.getByText("Vancouver"));
+
+    expect(onValueChange).toHaveBeenCalled();
+    expect(screen.getByText("Cities")).toBeDefined();
+  });
+
+  it("does not select a disabled option", async () => {
+    const onValueChange = jest.fn();
+    renderSelectWithContent({ onValueChange, disabledItem: "van" });
+    await openSelect();
+
+    await user.press(screen.getByText("Vancouver"));
+
+    expect(onValueChange).not.toHaveBeenCalled();
+  });
+
+  it("greys a disabled option's text when ItemText is told it is disabled", async () => {
+    renderSelectWithContent({ disabledItem: "van" });
+    await openSelect();
+
+    expect(screen.getByText("Vancouver")).toHaveStyle({
+      color: tokens["color-disabled"],
+    });
+    expect(screen.getByText("Toronto")).toHaveStyle({
+      color: tokens["color-text"],
+    });
+  });
+
+  it("shows the checkmark indicator only on the selected option", async () => {
+    renderSelectWithContent({
+      defaultValue: { value: "tor", label: "Toronto" },
+    });
+    await openSelect();
+
+    // One checkmark icon in the dropdown (the selected row's indicator).
+    expect(screen.getAllByTestId("checkmark")).toHaveLength(1);
+  });
+
+  it("renders whatever marker is composed into ItemIndicator on the selected row", async () => {
+    render(
+      <SelectPrimitive.Root defaultValue={{ value: "tor", label: "Toronto" }}>
+        <SelectPrimitive.Trigger>
+          <SelectPrimitive.Value placeholder="Select an option" />
+        </SelectPrimitive.Trigger>
+        <SelectPrimitive.Portal>
+          <SelectPrimitive.Overlay />
+          <SelectPrimitive.Content>
+            <SelectPrimitive.Viewport>
+              <SelectPrimitive.Item value="tor" label="Toronto">
+                <SelectPrimitive.ItemText />
+                <SelectPrimitive.ItemIndicator>
+                  <Icon name="person" />
+                </SelectPrimitive.ItemIndicator>
+              </SelectPrimitive.Item>
+            </SelectPrimitive.Viewport>
+          </SelectPrimitive.Content>
+        </SelectPrimitive.Portal>
+      </SelectPrimitive.Root>,
+      { wrapper: PortalHostWrapper },
+    );
+    await openSelect();
+
+    expect(screen.getByTestId("person")).toBeDefined();
+    expect(screen.queryByTestId("checkmark")).toBeNull();
+  });
+
+  it("conveys option role plus selected and disabled states to assistive tech", async () => {
+    renderSelectWithContent({
+      defaultValue: { value: "tor", label: "Toronto" },
+      disabledItem: "van",
+    });
+    await openSelect();
+
+    const options = screen.getAllByRole("option");
+    const optionWith = (label: string) =>
+      options.find(option => within(option).queryByText(label));
+
+    expect(optionWith("Toronto")?.props.accessibilityState).toMatchObject({
+      checked: true,
+    });
+    expect(optionWith("Vancouver")?.props.accessibilityState).toMatchObject({
+      disabled: true,
+    });
+  });
+});
+
+describe("SelectPrimitive.Value", () => {
+  it("shows the placeholder with subdued styling when nothing is selected", () => {
+    renderSelect();
+
+    const placeholder = screen.getByText("Select an option");
+    expect(placeholder).toHaveStyle({
+      color: tokens["color-text--secondary"],
+    });
+  });
+
+  it("shows the selected option's label", () => {
+    renderSelect({ defaultValue: { value: "tor", label: "Toronto" } });
+
+    const value = screen.getByText("Toronto");
+    expect(value).toHaveStyle({ color: tokens["color-text"] });
+    expect(screen.queryByText("Select an option")).toBeNull();
+  });
+
+  it("greys the value when the field is disabled (set on Root)", () => {
+    renderSelect({
+      disabled: true,
+      defaultValue: { value: "tor", label: "Toronto" },
+    });
+
+    expect(screen.getByText("Toronto")).toHaveStyle({
+      color: tokens["color-disabled"],
+    });
+  });
+});