@jobber/components-native 0.108.1 → 0.109.0

package/dist/src/Select/components/SelectTrigger.js

@@ -0,0 +1,40 @@
+import React from "react";
+import { Keyboard, View } from "react-native";
+import { useRootContext } from "@rn-primitives/select";
+import { useStyles } from "./SelectTrigger.style";
+import { useSelectFieldState } from "./SelectFieldContext";
+import { FieldLabel } from "./SelectLabel";
+import { SELECT_TRIGGER_DEFAULT_TEST_ID, SelectPrimitive, } from "../../primitives/Select";
+import { Icon } from "../../Icon";
+/**
+ * The styled field trigger: composes the chevron, the resolved `invalid` styling,
+ * the accessible name, the inside label placement, and the static `readOnly`
+ * presentation over `SelectPrimitive.Trigger`. State comes from `Select.Root`
+ * (field context) and the primitive root context.
+ */
+export function SelectTrigger({ children, testID, ref, }) {
+    const styles = useStyles();
+    const { invalid, readOnly, accessibilityLabel, labelPlacement } = useSelectFieldState();
+    const { open, value, disabled } = useRootContext();
+    const isDisabled = disabled !== null && disabled !== void 0 ? disabled : false;
+    // `disabled` wins over `readOnly`.
+    const isReadOnly = !isDisabled && (readOnly !== null && readOnly !== void 0 ? readOnly : false);
+    const isInsideLabel = labelPlacement === "inside";
+    const content = (React.createElement(View, { style: [styles.content, isInsideLabel && styles.contentInside] },
+        isInsideLabel && React.createElement(FieldLabel, null),
+        children));
+    if (isReadOnly) {
+        return (React.createElement(View, { testID: testID !== null && testID !== void 0 ? testID : SELECT_TRIGGER_DEFAULT_TEST_ID, accessible: true, accessibilityLabel: accessibilityLabel, accessibilityValue: (value === null || value === void 0 ? void 0 : value.label) ? { text: value.label } : undefined, style: styles.readOnly }, content));
+    }
+    return (React.createElement(SelectPrimitive.Trigger, { ref: ref, testID: testID, invalid: invalid, accessibilityLabel: accessibilityLabel, 
+        // Dismiss any open keyboard so it doesn't cover the dropdown (matches the
+        // native picker's on-device behaviour; rn-primitives doesn't do this).
+        onPressIn: () => Keyboard.dismiss() },
+        content,
+        React.createElement(Chevron, { open: open, disabled: isDisabled })));
+}
+/** Trailing chevron: tinted `iconSecondary`, greyed when disabled, rotated when open. */
+function Chevron({ open, disabled, }) {
+    return (React.createElement(View, { style: { transform: [{ rotate: open ? "180deg" : "0deg" }] } },
+        React.createElement(Icon, { name: "arrowDown", color: disabled ? "disabled" : "iconSecondary" })));
+}

package/dist/src/Select/components/SelectTrigger.style.js

@@ -0,0 +1,26 @@
+import { buildThemedStyles } from "../../AtlantisThemeContext";
+export const useStyles = buildThemedStyles(tokens => ({
+    content: {
+        flex: 1,
+        justifyContent: "center",
+    },
+    // Inside-label placement: the Value's flex fills the column vertically and
+    // would otherwise pin the label flush to the top. This top inset gives the
+    // label the same breathing room as the shared input chrome's mini-label.
+    contentInside: {
+        paddingTop: tokens["space-small"] - tokens["space-smallest"],
+    },
+    // Static read-only surface — mirrors the trigger shape with a subtle fill, no chevron.
+    readOnly: {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: tokens["space-small"],
+        minHeight: tokens["space-largest"] + tokens["space-small"],
+        paddingLeft: tokens["space-base"],
+        paddingRight: tokens["space-small"],
+        backgroundColor: tokens["color-surface--background--subtle"],
+        borderWidth: tokens["border-base"],
+        borderColor: tokens["color-border"],
+        borderRadius: tokens["radius-base"],
+    },
+}));

package/dist/src/Select/index.js

@@ -1,2 +1,4 @@
+// The composable `Select.*` parts are attached as statics on the `Select`
+// function declaration in `Select.tsx` (docgen-visible), not assembled here.
 export { Select, Option } from "./Select";
 export { SelectPressable } from "./components/SelectPressable";

package/dist/src/primitives/Portal/index.js

@@ -1,5 +1,7 @@
 // The portal host that backs every portal-based primitive (e.g. the Select
 // dropdown). Apps mount one <AtlantisPortalHost/> at their root; it shares this
 // package's bundled @rn-primitives/portal instance with the primitives' Portal,
-// so registered overlays render in the host.
+// so registered overlays render in the host. On iOS, `Select.Content` lifts the
+// dropdown above native-stack modals with `FullWindowOverlay` (react-native-
+// screens), so this single root host is sufficient on both platforms.
 export { PortalHost as AtlantisPortalHost } from "@rn-primitives/portal";

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

@@ -15,6 +15,8 @@ import * as Primitive from "@rn-primitives/select";
 import { SafeAreaInsetsContext } from "react-native-safe-area-context";
 import { useStyles } from "./SelectPrimitive.style";
 import { tokens as staticTokens } from "../../utils/design";
+/** Default trigger testID. Consumer-supplied `testID`s are used verbatim. */
+export const SELECT_TRIGGER_DEFAULT_TEST_ID = "ATL-Select-Trigger";
 function SelectPrimitiveRoot(_a) {
     var props = __rest(_a, []);
     return React.createElement(Primitive.Root, Object.assign({}, props));
@@ -25,23 +27,16 @@ function SelectPrimitiveRoot(_a) {
  * primitive provides no chevron of its own.
  */
 function SelectPrimitiveTrigger(_a) {
-    var { children, style, testID, invalid, onPressIn, onPressOut, ref } = _a, props = __rest(_a, ["children", "style", "testID", "invalid", "onPressIn", "onPressOut", "ref"]);
+    var { children, style, testID = SELECT_TRIGGER_DEFAULT_TEST_ID, invalid, ref } = _a, props = __rest(_a, ["children", "style", "testID", "invalid", "ref"]);
     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 !== null && rootDisabled !== void 0 ? rootDisabled : false;
     const isInvalid = !isDisabled && (invalid !== null && invalid !== void 0 ? invalid : false);
     // Announce the selected option as the trigger's value.
     const accessibilityValue = (value === null || value === void 0 ? void 0 : value.label) ? { text: value.label } : undefined;
-    return (React.createElement(Primitive.Trigger, Object.assign({ ref: ref, testID: computeTriggerTestID(testID), disabled: isDisabled, accessibilityValue: accessibilityValue, onPressIn: event => {
-            setPressed(true);
-            onPressIn === null || onPressIn === void 0 ? void 0 : onPressIn(event);
-        }, onPressOut: event => {
-            setPressed(false);
-            onPressOut === null || onPressOut === void 0 ? void 0 : onPressOut(event);
-        }, style: [
+    return (React.createElement(Primitive.Trigger, Object.assign({ ref: ref, testID: testID, disabled: isDisabled, accessibilityValue: accessibilityValue, style: ({ pressed }) => [
             styles.trigger,
             pressed && !open && styles.triggerPressed,
             open && styles.triggerOpen,
@@ -50,9 +45,6 @@ function SelectPrimitiveTrigger(_a) {
             style,
         ] }, props), children));
 }
-function computeTriggerTestID(testID) {
-    return testID ? `ATL-${testID}-Select-Trigger` : "ATL-Select-Trigger";
-}
 function SelectPrimitiveValue(_a) {
     var { style } = _a, props = __rest(_a, ["style"]);
     const styles = useStyles();

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

@@ -4,10 +4,6 @@ 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,
@@ -22,7 +18,8 @@ export const useStyles = buildThemedStyles(tokens => {
             alignItems: "center",
             gap: tokens["space-small"],
             minHeight: tokens["space-largest"] + tokens["space-small"],
-            paddingHorizontal: tokens["space-slim"],
+            paddingLeft: tokens["space-base"],
+            paddingRight: tokens["space-small"],
             backgroundColor: tokens["color-surface"],
             borderWidth: tokens["border-base"],
             borderColor: tokens["color-border--interactive"],
@@ -31,15 +28,23 @@ export const useStyles = buildThemedStyles(tokens => {
         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"]),
+            // On open the border grows from `border-base` to `border-thick`, which
+            // would push the content inward by that width delta on each side.
+            // Subtract the delta from the horizontal padding so the total inset
+            // (border + padding) — and thus the label/value/chevron position — stays
+            // constant.
+            paddingLeft: tokens["space-base"] - (tokens["border-thick"] - tokens["border-base"]),
+            paddingRight: tokens["space-small"] -
+                (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"]),
+            // Same border-thickness compensation as `triggerOpen` above.
+            paddingLeft: tokens["space-base"] - (tokens["border-thick"] - tokens["border-base"]),
+            paddingRight: tokens["space-small"] -
+                (tokens["border-thick"] - tokens["border-base"]),
         },
-        // Critical sets only the colour; width follows the open/pressed state.
         triggerInvalid: {
             borderColor: tokens["color-critical"],
         },

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

@@ -32,9 +32,9 @@ describe("SelectPrimitive.Trigger", () => {
         renderSelect();
         expect(screen.getByTestId("ATL-Select-Trigger")).toBeDefined();
     });
-    it("namespaces a provided testID", () => {
+    it("uses a provided testID verbatim", () => {
         renderSelect({ testID: "city" });
-        expect(screen.getByTestId("ATL-city-Select-Trigger")).toBeDefined();
+        expect(screen.getByTestId("city")).toBeDefined();
         expect(screen.queryByTestId("ATL-Select-Trigger")).toBeNull();
     });
     it("fires onOpenChange and applies open styling when pressed", () => __awaiter(void 0, void 0, void 0, function* () {

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

@@ -1 +1 @@
-export { SelectPrimitive } from "./SelectPrimitive";
+export { SelectPrimitive, SELECT_TRIGGER_DEFAULT_TEST_ID, } from "./SelectPrimitive";

package/dist/src/utils/meta/meta.json

@@ -60,6 +60,17 @@
         "Option",
         "ProgressBar",
         "Select",
+        "Select.Content",
+        "Select.Group",
+        "Select.GroupLabel",
+        "Select.Item",
+        "Select.ItemPrefix",
+        "Select.ItemSuffix",
+        "Select.Label",
+        "Select.Root",
+        "Select.Separator",
+        "Select.Trigger",
+        "Select.Value",
         "SelectPressable",
         "StatusLabel",
         "Switch",