@jobber/components-native 0.114.12 → 0.114.13-JOB-184129-cbbb878.3

package/dist/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jobber/components-native",
-    "version": "0.114.12",
+    "version": "0.114.13-JOB-184129-cbbb878.3+cbbb8781",
     "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": "a9ac41dfb966649048fcaf7cce2db45f2569fc29"
+    "gitHead": "cbbb8781bf3153677263b60e5058734e6c0611b8"
 }

package/dist/src/Select/SelectRoot.js

@@ -16,6 +16,13 @@ import { SelectFieldContext } from "./components/SelectFieldContext";
 import { FieldLabel } from "./components/SelectLabel";
 import { HelperText } from "../primitives/HelperText";
 import { SelectPrimitive } from "../primitives/Select";
+// @rn-primitives/select treats `undefined` as uncontrolled. Keep an explicitly
+// controlled empty value defined so clearing the prop cannot reveal stale
+// internal state; its missing label makes Select.Value render the placeholder.
+const EMPTY_CONTROLLED_VALUE = {
+    value: "",
+    label: undefined,
+};
 /**
  * Composable `Select.Root` chrome: renders the optional `description` / `error`
  * below the field (via `HelperText`), owns the field-state context, and places the
@@ -28,6 +35,7 @@ import { SelectPrimitive } from "../primitives/Select";
 export function SelectRoot(_a) {
     var { labelPlacement = "inside", accessibilityLabel: accessibilityLabelProp, description, error, invalid, status, readOnly, children } = _a, rootProps = __rest(_a, ["labelPlacement", "accessibilityLabel", "description", "error", "invalid", "status", "readOnly", "children"]);
     const styles = useStyles();
+    const primitiveValue = getPrimitiveValue(rootProps);
     // An empty / whitespace-only string error counts as "no error".
     const hasError = typeof error === "string" ? error.trim().length > 0 : error != null;
     const isInvalid = invalid === true || status === "critical" || hasError;
@@ -69,11 +77,17 @@ export function SelectRoot(_a) {
     ]);
     return (React.createElement(View, { style: styles.container },
         React.createElement(SelectFieldContext.Provider, { value: fieldState },
-            React.createElement(SelectPrimitive.Root, Object.assign({ style: styles.field }, rootProps),
+            React.createElement(SelectPrimitive.Root, Object.assign({ style: styles.field }, rootProps, { value: primitiveValue }),
                 labelPlacement === "above" && React.createElement(FieldLabel, null),
                 children)),
         renderBelowField(hasError ? error : undefined, description)));
 }
+function getPrimitiveValue(props) {
+    const isControlled = Object.prototype.hasOwnProperty.call(props, "value");
+    return isControlled && props.value === undefined
+        ? EMPTY_CONTROLLED_VALUE
+        : props.value;
+}
 function renderBelowField(error, description) {
     if (error != null) {
         return typeof error === "string" ? (React.createElement(HelperText, { message: error, status: "critical" })) : (error);

package/dist/src/Select/SelectRoot.test.js

@@ -1,5 +1,6 @@
 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 { SelectRoot } from "./SelectRoot";
 import { SelectTrigger } from "./components/SelectTrigger";
 import { SelectLabel } from "./components/SelectLabel";
@@ -12,6 +13,34 @@ function renderRoot(props = {}) {
             React.createElement(SelectPrimitive.Value, { placeholder: "Select an option" }))));
 }
 describe("SelectRoot chrome", () => {
+    it("shows the placeholder when a controlled value is cleared to undefined", () => {
+        function ControlledSelect() {
+            const [value, setValue] = React.useState();
+            return (React.createElement(React.Fragment, null,
+                React.createElement(SelectRoot, { value: value, onValueChange: setValue },
+                    React.createElement(SelectTrigger, null,
+                        React.createElement(SelectPrimitive.Value, { placeholder: "Select an option" })),
+                    React.createElement(SelectPrimitive.Item, { testID: "toronto-option", value: "tor", label: "Toronto" })),
+                React.createElement(Pressable, { testID: "clear-value", onPress: () => setValue(undefined) })));
+        }
+        render(React.createElement(ControlledSelect, null));
+        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(React.createElement(SelectRoot, { defaultValue: { value: "tor", label: "Toronto" } },
+            React.createElement(SelectTrigger, null,
+                React.createElement(SelectPrimitive.Value, { placeholder: "Select an option" }))));
+        expect(screen.getByText("Toronto")).toBeDefined();
+    });
     it("renders a composed label (visible, hidden from assistive tech)", () => {
         render(React.createElement(SelectRoot, null,
             React.createElement(SelectLabel, null, "City"),

package/dist/src/primitives/Select/SelectPrimitive.js

@@ -49,7 +49,7 @@ function SelectPrimitiveValue(_a) {
     var { style } = _a, props = __rest(_a, ["style"]);
     const styles = useStyles();
     const { value, disabled } = Primitive.useRootContext();
-    const isEmpty = (value === null || value === void 0 ? void 0 : value.value) === undefined;
+    const isEmpty = (value === null || value === void 0 ? void 0 : value.label) === undefined;
     return (React.createElement(Primitive.Value, Object.assign({ style: [
             styles.value,
             isEmpty && styles.valuePlaceholder,