@jobber/components-native 0.115.0 → 0.115.2-codexjob--9905233.7

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

@@ -2,7 +2,7 @@ import React from "react";
 import type { SelectPrimitiveContentProps, SelectPrimitiveGroupProps, SelectPrimitiveItemIndicatorProps, SelectPrimitiveItemProps, SelectPrimitiveItemTextProps, SelectPrimitiveLabelProps, SelectPrimitiveOverlayProps, SelectPrimitivePortalProps, SelectPrimitiveRootProps, SelectPrimitiveSeparatorProps, SelectPrimitiveTriggerProps, SelectPrimitiveValueProps, SelectPrimitiveViewportProps } from "./types";
 /** Default trigger testID. Consumer-supplied `testID`s are used verbatim. */
 export declare const SELECT_TRIGGER_DEFAULT_TEST_ID = "ATL-Select-Trigger";
-declare function SelectPrimitiveRoot({ ...props }: SelectPrimitiveRootProps): React.JSX.Element;
+declare function SelectPrimitiveRoot(props: SelectPrimitiveRootProps): React.JSX.Element;
 /**
  * Styled trigger field. Renders only its `children` — compose
  * `SelectPrimitive.Value` and any trailing icon (e.g. a chevron) here; the

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.115.0",
+  "version": "0.115.2-codexjob--9905233.7+9905233c",
   "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": "9f20f1b3aa82b280fb9f24b5fd98be3da946c130"
+  "gitHead": "9905233c18ce012134f57ba140fabba5225e18a6"
 }

package/src/Chip/Chip.test.tsx

@@ -1,6 +1,11 @@
 import React from "react";
+import { allColors, darkTokens } from "@jobber/design";
 import { fireEvent, render } from "@testing-library/react-native";
+import { Path } from "react-native-svg";
 import { Chip } from "./Chip";
+import type { ChipProps } from "./Chip";
+import { AtlantisThemeContextProvider } from "../AtlantisThemeContext";
+import type { EffectiveTheme } from "../AtlantisThemeContext";
 import { tokens } from "../utils/design";
 
 it("renders an active Chip", () => {
@@ -131,3 +136,110 @@ describe("accent", () => {
     });
   });
 });
+
+describe("selection color transitions", () => {
+  function example(theme: EffectiveTheme, props: Partial<ChipProps> = {}) {
+    return (
+      <AtlantisThemeContextProvider theme={theme}>
+        <Chip label="Object" icon="request" isActive {...props} />
+      </AtlantisThemeContextProvider>
+    );
+  }
+
+  function expectColors(
+    view: ReturnType<typeof render>,
+    background: string,
+    text: string,
+    icon = text,
+  ) {
+    expect(view.getByTestId("chipTest")).toHaveStyle({
+      backgroundColor: background,
+    });
+    expect(view.getByText("Object")).toHaveStyle({ color: text });
+    const paths = view.UNSAFE_root.findAllByType(Path);
+    expect(paths.length).toBeGreaterThan(0);
+
+    for (const path of paths) {
+      expect(path.props.fill).toBe(icon);
+    }
+  }
+
+  it.each(["request", "quote", "job", "invoice"] as const)(
+    "keeps the selected %s fill and white content when the theme changes",
+    accent => {
+      expect.hasAssertions();
+      const props = { accent, icon: accent };
+      const view = render(example("light", props));
+
+      for (const theme of ["light", "dark", "light"] as const) {
+        view.rerender(example(theme, props));
+        expectColors(
+          view,
+          allColors[`color-${accent}`],
+          allColors["color-text--reverse"],
+        );
+      }
+    },
+  );
+
+  it("changes the selected client fill and foreground together with the theme", () => {
+    expect.hasAssertions();
+    const props = { accent: "client", icon: "clients" } as const;
+    const view = render(example("light", props));
+    expectColors(
+      view,
+      allColors["color-client"],
+      allColors["color-text--reverse"],
+    );
+
+    view.rerender(example("dark", props));
+    expectColors(view, darkTokens["color-client"], allColors["color-text"]);
+
+    view.rerender(example("light", props));
+    expectColors(
+      view,
+      allColors["color-client"],
+      allColors["color-text--reverse"],
+    );
+  });
+
+  it.each(["request", "client"] as const)(
+    "restores the theme's normal colors when %s is deselected",
+    accent => {
+      const view = render(example("dark", { accent }));
+
+      view.rerender(example("dark", { accent, isActive: false }));
+
+      expectColors(
+        view,
+        darkTokens["color-interactive--background"],
+        darkTokens["color-text"],
+        darkTokens[`color-${accent}`],
+      );
+      expect(
+        view.getByTestId("chipTest").props.accessibilityState.checked,
+      ).toBe(false);
+    },
+  );
+
+  it("preserves default selected colors when an accent is removed and the theme changes", () => {
+    expect.hasAssertions();
+    const view = render(example("dark", { accent: "request" }));
+
+    view.rerender(example("dark"));
+    expectColors(
+      view,
+      darkTokens["color-surface--reverse"],
+      darkTokens["color-text--reverse"],
+      darkTokens["color-surface"],
+    );
+
+    view.rerender(example("light"));
+    expectColors(
+      view,
+      allColors["color-surface--reverse"],
+      allColors["color-text--reverse"],
+      allColors["color-surface"],
+    );
+  });
+});

package/src/Chip/Chip.tsx

@@ -2,9 +2,11 @@ import React, { useMemo } from "react";
 import type { AccessibilityRole } from "react-native";
 import { Pressable, View } from "react-native";
 import type { IconNames } from "@jobber/design";
+import { allColors } from "@jobber/design";
 import { useStyles } from "./Chip.style";
 import { Icon } from "../Icon";
 import { Typography } from "../Typography";
+import type { TypographyProps } from "../Typography";
 import type { AtlantisThemeContextValue } from "../AtlantisThemeContext";
 import { useAtlantisTheme } from "../AtlantisThemeContext";
 
@@ -71,34 +73,58 @@ export function Chip({
   accent,
 }: ChipProps) {
   const styles = useStyles();
-  const { tokens } = useAtlantisTheme();
-  const defaultAccentColor = tokens["color-surface--reverse"];
-
-  const { chipStyle, iconCustomColor, dismissColor } = useMemo(() => {
-    const accentColor = accent ? tokens[`color-${accent}`] : defaultAccentColor;
-
-    const iconColor = isActive ? tokens["color-surface"] : accentColor;
-    const chip = [
-      styles.container,
-      {
-        backgroundColor:
-          inactiveBackgroundColor === "surface"
-            ? tokens["color-surface"]
-            : tokens["color-interactive--background"],
-      },
-      isActive && { backgroundColor: accentColor },
-      getBorderStyle(inactiveBackgroundColor, tokens),
-    ];
-    const dismiss =
-      (isActive || inactiveBackgroundColor === "surface") &&
-      styles.activeDismissIcon;
-
-    return {
-      chipStyle: chip,
-      iconCustomColor: iconColor,
-      dismissColor: dismiss,
-    };
-  }, [accent, isActive, inactiveBackgroundColor, getBorderStyle, styles]);
+  const { tokens, effectiveTheme } = useAtlantisTheme();
+  const { chipStyle, iconCustomColor, labelStyle, dismissColor } =
+    useMemo(() => {
+      const accentColor = accent
+        ? tokens[`color-${accent}`]
+        : tokens["color-surface--reverse"];
+      let backgroundColor = accentColor;
+      let iconColor = isActive ? tokens["color-surface"] : accentColor;
+      let selectedLabelStyle: TypographyProps<"base">["UNSAFE_style"];
+
+      if (isActive && accent) {
+        const selected = getSelectedAccentColors(accent, {
+          tokens,
+          effectiveTheme,
+        });
+
+        backgroundColor = selected.background;
+        iconColor = selected.foreground;
+        selectedLabelStyle = {
+          textStyle: { color: selected.foreground },
+        };
+      }
+
+      const chip = [
+        styles.container,
+        {
+          backgroundColor:
+            inactiveBackgroundColor === "surface"
+              ? tokens["color-surface"]
+              : tokens["color-interactive--background"],
+        },
+        isActive && { backgroundColor },
+        getBorderStyle(inactiveBackgroundColor, tokens),
+      ];
+      const dismiss =
+        (isActive || inactiveBackgroundColor === "surface") &&
+        styles.activeDismissIcon;
+
+      return {
+        chipStyle: chip,
+        iconCustomColor: iconColor,
+        labelStyle: selectedLabelStyle,
+        dismissColor: dismiss,
+      };
+    }, [
+      accent,
+      isActive,
+      inactiveBackgroundColor,
+      styles,
+      tokens,
+      effectiveTheme,
+    ]);
 
   const accessibilityState = useMemo(() => {
     const checkableRoles = ["radio", "switch", "togglebutton", "checkbox"];
@@ -133,7 +159,8 @@ export function Chip({
             fontWeight="medium"
             maxFontScaleSize={tokens["typography--fontSize-large"]}
             maxLines="single"
-            reverseTheme={isActive}
+            reverseTheme={isActive && !accent}
+            UNSAFE_style={labelStyle}
           >
             {label}
           </Typography>
@@ -148,6 +175,30 @@ export function Chip({
   );
 }
 
+// Object labels and leading icons share the selected foreground.
+function getSelectedAccentColors(
+  accent: AccentType,
+  {
+    tokens,
+    effectiveTheme,
+  }: Pick<AtlantisThemeContextValue, "tokens" | "effectiveTheme">,
+) {
+  const colors = {
+    background: allColors[`color-${accent}`],
+    foreground: allColors["color-text--reverse"],
+  };
+
+  if (accent === "client") {
+    colors.background = tokens["color-client"];
+
+    if (effectiveTheme === "dark") {
+      colors.foreground = allColors["color-text"];
+    }
+  }
+
+  return colors;
+}
+
 function getBorderStyle(
   inactiveBackgroundColor: "surface" | "background",
   tokens: AtlantisThemeContextValue["tokens"],

package/src/Select/Select.composable.stories.tsx

@@ -8,6 +8,7 @@ import {
   SelectComposableBasic,
   SelectComposableControlledWithRef,
   SelectComposableCustomMarker,
+  SelectComposableDependentOptions,
   SelectComposableDescription,
   SelectComposableDisabled,
   SelectComposableDisabledOptions,
@@ -86,6 +87,11 @@ export const ControlledWithRef: Story = {
   render: SelectComposableControlledWithRef,
 };
 
+/** Changing a parent selection clears a now-invalid controlled child value. */
+export const ControlledValueReset: Story = {
+  render: SelectComposableDependentOptions,
+};
+
 /** Read-only: non-interactive, value rendered as text with no chevron. */
 export const ReadOnly: Story = { render: SelectComposableReadOnly };
 

package/src/Select/Select.guide.md

@@ -76,12 +76,19 @@ takes `value` / `defaultValue` and `onValueChange((option) => void)`. There is
 no multi-select, numeric value, or computed display value — `Select.Value` shows
 the selected option's label.
 
+Omitting `value` uses uncontrolled state. Explicitly passing `value={undefined}`
+is a controlled empty value and shows the placeholder. `SelectPrimitive.Root`
+normalizes that distinction before forwarding to `@rn-primitives/select`, which
+otherwise treats `undefined` as uncontrolled and can reveal a stale selection
+after a controlled value is cleared.
+
 ## Composition model
 
 A few decisions shape how the composable parts fit together:
 
-- **The primitive is dumb; the sugar adds the Atlantis behavior.**
-  `SelectPrimitive` (`@jobber/components-native/primitives`) is a styling-only
+- **The primitive owns upstream state interop; the sugar adds field behavior.**
+  `SelectPrimitive` (`@jobber/components-native/primitives`) normalizes an
+  explicitly empty controlled value and otherwise remains a styling-focused
   passthrough with no field chrome, field state, chevron, read-only, or row
   composition. Those live in the `Select.*` sugar: `Select.Root` owns the
   field-state context, `Select.Trigger` composes the chevron / read-only /

package/src/Select/SelectRoot.test.tsx

@@ -1,5 +1,11 @@
 import React from "react";
-import { render, screen, within } from "@testing-library/react-native";
+import {
+  fireEvent,
+  render,
+  screen,
+  within,
+} from "@testing-library/react-native";
+import { Pressable } from "react-native";
 import type { TriggerRef } from "@rn-primitives/select";
 import { SelectRoot } from "./SelectRoot";
 import { SelectTrigger } from "./components/SelectTrigger";
@@ -20,6 +26,57 @@ function renderRoot(props: Partial<SelectRootProps> = {}) {
 }
 
 describe("SelectRoot chrome", () => {
+  it("shows the placeholder when a controlled value is cleared to undefined", () => {
+    function ControlledSelect() {
+      const [value, setValue] = React.useState<
+        { value: string; label: string } | undefined
+      >();
+
+      return (
+        <>
+          <SelectRoot value={value} onValueChange={setValue}>
+            <SelectTrigger>
+              <SelectPrimitive.Value placeholder="Select an option" />
+            </SelectTrigger>
+            <SelectPrimitive.Item
+              testID="toronto-option"
+              value="tor"
+              label="Toronto"
+            />
+          </SelectRoot>
+          <Pressable testID="clear-value" onPress={() => setValue(undefined)} />
+        </>
+      );
+    }
+
+    render(<ControlledSelect />);
+    fireEvent.press(screen.getByTestId("toronto-option"));
+    expect(screen.getByText("Toronto")).toBeDefined();
+
+    fireEvent.press(screen.getByTestId("clear-value"));
+
+    expect(screen.queryByText("Toronto")).toBeNull();
+    expect(screen.getByText("Select an option")).toHaveStyle({
+      color: tokens["color-text--secondary"],
+    });
+  });
+
+  it("preserves an uncontrolled default value across rerenders", () => {
+    const { rerender } = renderRoot({
+      defaultValue: { value: "tor", label: "Toronto" },
+    });
+
+    rerender(
+      <SelectRoot defaultValue={{ value: "tor", label: "Toronto" }}>
+        <SelectTrigger>
+          <SelectPrimitive.Value placeholder="Select an option" />
+        </SelectTrigger>
+      </SelectRoot>,
+    );
+
+    expect(screen.getByText("Toronto")).toBeDefined();
+  });
+
   it("renders a composed label (visible, hidden from assistive tech)", () => {
     render(
       <SelectRoot>

package/src/Select/docs/SelectComposableDependentOptions.tsx

@@ -0,0 +1,78 @@
+import React, { useState } from "react";
+import { View } from "react-native";
+import { Select, Text } from "@jobber/components-native";
+
+interface Option {
+  value: string;
+  label: string;
+}
+
+const UNITED_STATES = { value: "us", label: "United States" };
+const COUNTRIES = [UNITED_STATES, { value: "ca", label: "Canada" }];
+const REGIONS: Record<string, Option[]> = {
+  us: [
+    { value: "california", label: "California" },
+    { value: "new-york", label: "New York" },
+  ],
+  ca: [
+    { value: "alberta", label: "Alberta" },
+    { value: "ontario", label: "Ontario" },
+  ],
+};
+
+/** Dependent options: changing country clears the controlled region value. */
+export function SelectComposableDependentOptions() {
+  const [country, setCountry] = useState<Option | undefined>(UNITED_STATES);
+  const [region, setRegion] = useState<Option | undefined>();
+  const regions = country ? REGIONS[country.value] : [];
+
+  return (
+    <View style={{ gap: 16 }}>
+      <Text variation="subdued">
+        Select California, then change the country to Canada. State/Province
+        should return to its placeholder.
+      </Text>
+
+      <Select.Root
+        value={country}
+        onValueChange={option => {
+          setCountry(option as Option | undefined);
+          setRegion(undefined);
+        }}
+      >
+        <Select.Label>Country</Select.Label>
+        <Select.Trigger>
+          <Select.Value placeholder="Select a country" />
+        </Select.Trigger>
+        <Select.Content>
+          {COUNTRIES.map(option => (
+            <Select.Item
+              key={option.value}
+              value={option.value}
+              label={option.label}
+            />
+          ))}
+        </Select.Content>
+      </Select.Root>
+
+      <Select.Root
+        value={region}
+        onValueChange={option => setRegion(option as Option | undefined)}
+      >
+        <Select.Label>State/Province</Select.Label>
+        <Select.Trigger>
+          <Select.Value placeholder="Select a state/province" />
+        </Select.Trigger>
+        <Select.Content>
+          {regions.map(option => (
+            <Select.Item
+              key={option.value}
+              value={option.value}
+              label={option.label}
+            />
+          ))}
+        </Select.Content>
+      </Select.Root>
+    </View>
+  );
+}

package/src/Select/docs/index.ts

@@ -12,5 +12,6 @@ export { SelectComposableItemPrefixSuffix } from "./SelectComposableItemPrefixSu
 export { SelectComposableCustomMarker } from "./SelectComposableCustomMarker";
 export { SelectComposableDisabledOptions } from "./SelectComposableDisabledOptions";
 export { SelectComposableControlledWithRef } from "./SelectComposableControlledWithRef";
+export { SelectComposableDependentOptions } from "./SelectComposableDependentOptions";
 export { SelectComposableReadOnly } from "./SelectComposableReadOnly";
 export { SelectComposableDisabled } from "./SelectComposableDisabled";

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

@@ -5,6 +5,7 @@ import {
   userEvent,
   within,
 } from "@testing-library/react-native";
+import { Pressable } from "react-native";
 import { darkTokens } from "@jobber/design";
 import type { TriggerRef } from "@rn-primitives/select";
 import { PortalHost } from "@rn-primitives/portal";
@@ -67,6 +68,60 @@ function renderSelect({
   );
 }
 
+describe("SelectPrimitive.Root", () => {
+  it("does not select an empty-string item when a controlled value is cleared", async () => {
+    function ControlledSelect() {
+      const [value, setValue] = React.useState<
+        { value: string; label: string } | undefined
+      >({ value: "tor", label: "Toronto" });
+
+      return (
+        <>
+          <SelectPrimitive.Root value={value} onValueChange={setValue}>
+            <SelectPrimitive.Trigger>
+              <SelectPrimitive.Value placeholder="Select an option" />
+            </SelectPrimitive.Trigger>
+            <SelectPrimitive.Portal>
+              <SelectPrimitive.Overlay />
+              <SelectPrimitive.Content>
+                <SelectPrimitive.Viewport>
+                  <SelectPrimitive.Item
+                    testID="empty-option"
+                    value=""
+                    label="Empty"
+                  >
+                    <SelectPrimitive.ItemText />
+                    <SelectPrimitive.ItemIndicator>
+                      <Icon name="checkmark" />
+                    </SelectPrimitive.ItemIndicator>
+                  </SelectPrimitive.Item>
+                  <SelectPrimitive.Item value="tor" label="Toronto">
+                    <SelectPrimitive.ItemText />
+                    <SelectPrimitive.ItemIndicator>
+                      <Icon name="checkmark" />
+                    </SelectPrimitive.ItemIndicator>
+                  </SelectPrimitive.Item>
+                </SelectPrimitive.Viewport>
+              </SelectPrimitive.Content>
+            </SelectPrimitive.Portal>
+          </SelectPrimitive.Root>
+          <Pressable testID="clear-value" onPress={() => setValue(undefined)} />
+        </>
+      );
+    }
+
+    render(<ControlledSelect />, { wrapper: PortalHostWrapper });
+
+    await user.press(screen.getByTestId("clear-value"));
+    await openSelect();
+
+    expect(
+      screen.getByTestId("empty-option").props.accessibilityState,
+    ).toMatchObject({ checked: false });
+    expect(screen.queryByTestId("checkmark")).toBeNull();
+  });
+});
+
 describe("SelectPrimitive.Trigger", () => {
   it("renders with the default testID", () => {
     renderSelect();

package/src/primitives/Select/SelectPrimitive.tsx

@@ -31,8 +31,21 @@ function useIsDarkTheme() {
   return useAtlantisTheme().effectiveTheme === "dark";
 }
 
-function SelectPrimitiveRoot({ ...props }: SelectPrimitiveRootProps) {
-  return <Primitive.Root {...props} />;
+// @rn-primitives/select treats `undefined` as uncontrolled. Keep an explicitly
+// controlled empty value defined so clearing the prop cannot reveal stale
+// internal state. Its undefined fields cannot match a public string item value.
+const EMPTY_CONTROLLED_VALUE = {} as NonNullable<
+  SelectPrimitiveRootProps["value"]
+>;
+
+function SelectPrimitiveRoot(props: SelectPrimitiveRootProps) {
+  const isControlled = Object.prototype.hasOwnProperty.call(props, "value");
+  const value =
+    isControlled && props.value === undefined
+      ? EMPTY_CONTROLLED_VALUE
+      : props.value;
+
+  return <Primitive.Root {...props} value={value} />;
 }
 
 /**