@jobber/components-native 0.105.4 → 0.106.0

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"],
+    });
+  });
+});

package/src/primitives/Select/SelectPrimitive.tsx

@@ -0,0 +1,292 @@
+import React from "react";
+import { StyleSheet } from "react-native";
+import * as Primitive from "@rn-primitives/select";
+import { SafeAreaInsetsContext } from "react-native-safe-area-context";
+import { useStyles } from "./SelectPrimitive.style";
+import type {
+  SelectPrimitiveContentProps,
+  SelectPrimitiveGroupProps,
+  SelectPrimitiveItemIndicatorProps,
+  SelectPrimitiveItemProps,
+  SelectPrimitiveItemTextProps,
+  SelectPrimitiveLabelProps,
+  SelectPrimitiveOverlayProps,
+  SelectPrimitivePortalProps,
+  SelectPrimitiveRootProps,
+  SelectPrimitiveSeparatorProps,
+  SelectPrimitiveTriggerProps,
+  SelectPrimitiveValueProps,
+  SelectPrimitiveViewportProps,
+} from "./types";
+import { tokens as staticTokens } from "../../utils/design";
+
+function SelectPrimitiveRoot({ ...props }: SelectPrimitiveRootProps) {
+  return <Primitive.Root {...props} />;
+}
+
+/**
+ * Styled trigger field. Renders only its `children` — compose
+ * `SelectPrimitive.Value` and any trailing icon (e.g. a chevron) here; the
+ * primitive provides no chevron of its own.
+ */
+function SelectPrimitiveTrigger({
+  children,
+  style,
+  testID,
+  invalid,
+  onPressIn,
+  onPressOut,
+  ref,
+  ...props
+}: SelectPrimitiveTriggerProps) {
+  const styles = useStyles();
+  const { open, value, disabled: rootDisabled } = Primitive.useRootContext();
+  const [pressed, setPressed] = React.useState(false);
+
+  // `disabled` is Root-level; the primitive's Trigger won't read it from
+  // context, so resolve it here and pass it down to block interaction.
+  const isDisabled = rootDisabled ?? false;
+  const isInvalid = !isDisabled && (invalid ?? false);
+
+  // Announce the selected option as the trigger's value.
+  const accessibilityValue = value?.label ? { text: value.label } : undefined;
+
+  return (
+    <Primitive.Trigger
+      ref={ref}
+      testID={computeTriggerTestID(testID)}
+      disabled={isDisabled}
+      accessibilityValue={accessibilityValue}
+      onPressIn={event => {
+        setPressed(true);
+        onPressIn?.(event);
+      }}
+      onPressOut={event => {
+        setPressed(false);
+        onPressOut?.(event);
+      }}
+      style={[
+        styles.trigger,
+        pressed && !open && styles.triggerPressed,
+        open && styles.triggerOpen,
+        isInvalid && styles.triggerInvalid,
+        isDisabled && styles.triggerDisabled,
+        style,
+      ]}
+      {...props}
+    >
+      {children}
+    </Primitive.Trigger>
+  );
+}
+
+function computeTriggerTestID(testID?: string): string {
+  return testID ? `ATL-${testID}-Select-Trigger` : "ATL-Select-Trigger";
+}
+
+function SelectPrimitiveValue({ style, ...props }: SelectPrimitiveValueProps) {
+  const styles = useStyles();
+  const { value, disabled } = Primitive.useRootContext();
+  const isEmpty = value?.value === undefined;
+
+  return (
+    <Primitive.Value
+      style={[
+        styles.value,
+        isEmpty && styles.valuePlaceholder,
+        disabled && styles.valueDisabled,
+        style,
+      ]}
+      {...props}
+    />
+  );
+}
+
+/** Portals the dropdown into the mounted `AtlantisPortalHost`. */
+function SelectPrimitivePortal({ ...props }: SelectPrimitivePortalProps) {
+  return <Primitive.Portal {...props} />;
+}
+
+/** Tap-outside dismiss surface behind the dropdown (no scrim). */
+function SelectPrimitiveOverlay({
+  style,
+  testID = "ATL-Select-Overlay",
+  ...props
+}: SelectPrimitiveOverlayProps) {
+  const styles = useStyles();
+
+  return (
+    <Primitive.Overlay
+      testID={testID}
+      style={StyleSheet.flatten([styles.overlay, style])}
+      {...props}
+    />
+  );
+}
+
+/**
+ * Anchored dropdown surface: matches the trigger width, applies safe-area
+ * insets, and flips above the trigger when space is tight. Compose it inside
+ * `Portal`, alongside `Overlay`, wrapping the items in a `Viewport`.
+ */
+function SelectPrimitiveContent({
+  children,
+  style,
+  sideOffset = staticTokens["space-smaller"],
+  insets,
+  ref,
+  ...props
+}: SelectPrimitiveContentProps) {
+  const styles = useStyles();
+  // 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;
+  const { triggerPosition } = Primitive.useRootContext();
+
+  return (
+    <Primitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      insets={insets ?? safeAreaInsets}
+      style={StyleSheet.flatten([
+        styles.content,
+        triggerPosition ? { width: triggerPosition.width } : undefined,
+        style,
+      ])}
+      {...props}
+    >
+      {children}
+    </Primitive.Content>
+  );
+}
+
+/** Scroll container for the items (a no-op passthrough on native). */
+function SelectPrimitiveViewport({ ...props }: SelectPrimitiveViewportProps) {
+  return <Primitive.Viewport {...props} />;
+}
+
+/**
+ * Styled, pressable option row. Compose its content from `SelectPrimitive.ItemText`
+ * and `SelectPrimitive.ItemIndicator` (and anything else) as `children`.
+ */
+function SelectPrimitiveItem({
+  style,
+  disabled,
+  ref,
+  ...props
+}: SelectPrimitiveItemProps) {
+  const styles = useStyles();
+
+  return (
+    <Primitive.Item
+      ref={ref}
+      disabled={disabled}
+      style={({ pressed }) => [
+        styles.item,
+        pressed && styles.itemPressed,
+        style,
+      ]}
+      {...props}
+    />
+  );
+}
+
+/**
+ * The option label as styled text (reads the label from the item context). The
+ * `disabled` flag is explicit — the composing layer (e.g. the sugared
+ * `Select.Item`) forwards the row's disabled state to grey the text.
+ */
+function SelectPrimitiveItemText({
+  style,
+  disabled,
+  ref,
+  ...props
+}: SelectPrimitiveItemTextProps) {
+  const styles = useStyles();
+
+  return (
+    <Primitive.ItemText
+      ref={ref}
+      style={[styles.itemText, disabled && styles.itemTextDisabled, style]}
+      {...props}
+    />
+  );
+}
+
+/**
+ * The selected-state marker slot. Renders its `children` (the marker, e.g. a
+ * checkmark) on the selected row only — it self-hides on unselected rows. The
+ * marker glyph is supplied by the composing layer, not defaulted here.
+ */
+function SelectPrimitiveItemIndicator({
+  style,
+  ref,
+  ...props
+}: SelectPrimitiveItemIndicatorProps) {
+  const styles = useStyles();
+
+  return (
+    <Primitive.ItemIndicator
+      ref={ref}
+      style={[styles.itemIndicator, style]}
+      {...props}
+    />
+  );
+}
+
+/**
+ * Groups related options, typically with a `SelectPrimitive.Label` heading.
+ */
+function SelectPrimitiveGroup({ ...props }: SelectPrimitiveGroupProps) {
+  return <Primitive.Group {...props} />;
+}
+
+/**
+ * A styled group heading rendered inside `SelectPrimitive.Group`.
+ */
+function SelectPrimitiveLabel({
+  style,
+  ref,
+  ...props
+}: SelectPrimitiveLabelProps) {
+  const styles = useStyles();
+
+  return (
+    <Primitive.Label ref={ref} style={[styles.groupLabel, style]} {...props} />
+  );
+}
+
+/**
+ * A styled divider between groups or options.
+ */
+function SelectPrimitiveSeparator({
+  style,
+  ref,
+  ...props
+}: SelectPrimitiveSeparatorProps) {
+  const styles = useStyles();
+
+  return (
+    <Primitive.Separator
+      ref={ref}
+      style={[styles.separator, style]}
+      {...props}
+    />
+  );
+}
+
+export const SelectPrimitive = {
+  Root: SelectPrimitiveRoot,
+  Trigger: SelectPrimitiveTrigger,
+  Value: SelectPrimitiveValue,
+  Portal: SelectPrimitivePortal,
+  Overlay: SelectPrimitiveOverlay,
+  Content: SelectPrimitiveContent,
+  Viewport: SelectPrimitiveViewport,
+  Item: SelectPrimitiveItem,
+  ItemText: SelectPrimitiveItemText,
+  ItemIndicator: SelectPrimitiveItemIndicator,
+  Group: SelectPrimitiveGroup,
+  Label: SelectPrimitiveLabel,
+  Separator: SelectPrimitiveSeparator,
+};

package/src/primitives/Select/index.ts

@@ -0,0 +1,17 @@
+export { SelectPrimitive } from "./SelectPrimitive";
+export type {
+  SelectPrimitiveContentProps,
+  SelectPrimitiveGroupProps,
+  SelectPrimitiveItemIndicatorProps,
+  SelectPrimitiveItemProps,
+  SelectPrimitiveItemTextProps,
+  SelectPrimitiveLabelProps,
+  SelectPrimitiveOption,
+  SelectPrimitiveOverlayProps,
+  SelectPrimitivePortalProps,
+  SelectPrimitiveRootProps,
+  SelectPrimitiveSeparatorProps,
+  SelectPrimitiveTriggerProps,
+  SelectPrimitiveValueProps,
+  SelectPrimitiveViewportProps,
+} from "./types";