@jobber/components-native 0.115.0 → 0.115.1

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.1",
   "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": "df5ca5cd691c56be40fad67fae7ea644724656cc"
 }

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} />;
 }
 
 /**