@jobber/components-native 0.108.1 → 0.109.0

package/src/Select/docs/SelectComposableCustomMarker.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { Icon, Select } from "@jobber/components-native";
+import { PROVINCES } from "./SelectComposableProvinces";
+
+/** Override the default checkmark via the `indicator` slot prop. */
+export function SelectComposableCustomMarker() {
+  return (
+    <Select.Root defaultValue={PROVINCES[0]}>
+      <Select.Label>Province</Select.Label>
+      <Select.Trigger>
+        <Select.Value placeholder="Select a province" />
+      </Select.Trigger>
+      <Select.Content>
+        {PROVINCES.map(province => (
+          <Select.Item
+            key={province.value}
+            value={province.value}
+            label={province.label}
+            indicator={<Icon name="starFill" />}
+          />
+        ))}
+      </Select.Content>
+    </Select.Root>
+  );
+}

package/src/Select/docs/SelectComposableDescription.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import { Select } from "@jobber/components-native";
+import { ProvinceItems } from "./SelectComposableProvinces";
+
+/** Supporting `description` rendered below the field. */
+export function SelectComposableDescription() {
+  return (
+    <Select.Root description="Where the work takes place.">
+      <Select.Label>Province</Select.Label>
+      <Select.Trigger>
+        <Select.Value placeholder="Select a province" />
+      </Select.Trigger>
+      <Select.Content>
+        <ProvinceItems />
+      </Select.Content>
+    </Select.Root>
+  );
+}

package/src/Select/docs/SelectComposableDisabled.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import { Select } from "@jobber/components-native";
+import { PROVINCES, ProvinceItems } from "./SelectComposableProvinces";
+
+/** Disabled field. */
+export function SelectComposableDisabled() {
+  return (
+    <Select.Root disabled defaultValue={PROVINCES[6]}>
+      <Select.Label>Province</Select.Label>
+      <Select.Trigger>
+        <Select.Value placeholder="Select a province" />
+      </Select.Trigger>
+      <Select.Content>
+        <ProvinceItems />
+      </Select.Content>
+    </Select.Root>
+  );
+}

package/src/Select/docs/SelectComposableDisabledOptions.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { Select } from "@jobber/components-native";
+
+/** Individual options can be disabled. */
+export function SelectComposableDisabledOptions() {
+  return (
+    <Select.Root>
+      <Select.Label>Province</Select.Label>
+      <Select.Trigger>
+        <Select.Value placeholder="Select a province" />
+      </Select.Trigger>
+      <Select.Content>
+        <Select.Item value="on" label="Ontario" />
+        <Select.Item value="qc" label="Quebec" disabled />
+        <Select.Item value="bc" label="British Columbia" />
+        <Select.Item value="ab" label="Alberta" disabled />
+      </Select.Content>
+    </Select.Root>
+  );
+}

package/src/Select/docs/SelectComposableGroupedOptions.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import { Select } from "@jobber/components-native";
+
+/** Grouped options with group labels and a separator between groups. */
+export function SelectComposableGroupedOptions() {
+  return (
+    <Select.Root>
+      <Select.Label>City</Select.Label>
+      <Select.Trigger>
+        <Select.Value placeholder="Select a city" />
+      </Select.Trigger>
+      <Select.Content>
+        <Select.Group>
+          <Select.GroupLabel>West</Select.GroupLabel>
+          <Select.Item value="van" label="Vancouver" />
+          <Select.Item value="cgy" label="Calgary" />
+          <Select.Item value="edm" label="Edmonton" />
+        </Select.Group>
+        <Select.Separator />
+        <Select.Group>
+          <Select.GroupLabel>East</Select.GroupLabel>
+          <Select.Item value="tor" label="Toronto" />
+          <Select.Item value="mtl" label="Montreal" />
+          <Select.Item value="hal" label="Halifax" />
+        </Select.Group>
+      </Select.Content>
+    </Select.Root>
+  );
+}

package/src/Select/docs/SelectComposableItemPrefixSuffix.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import { Icon, Select, Text } from "@jobber/components-native";
+import { PROVINCES } from "./SelectComposableProvinces";
+
+/** `Select.ItemPrefix` / `Select.ItemSuffix` slots passed into `Select.Item`. */
+export function SelectComposableItemPrefixSuffix() {
+  return (
+    <Select.Root defaultValue={PROVINCES[0]}>
+      <Select.Label>Province</Select.Label>
+      <Select.Trigger>
+        <Select.Value placeholder="Select a province" />
+      </Select.Trigger>
+      <Select.Content>
+        {PROVINCES.map(province => (
+          <Select.Item
+            key={province.value}
+            value={province.value}
+            label={province.label}
+            prefix={
+              <Select.ItemPrefix>
+                <Icon name="home" />
+              </Select.ItemPrefix>
+            }
+            suffix={
+              <Select.ItemSuffix>
+                <Text variation="subdued">{province.value.toUpperCase()}</Text>
+              </Select.ItemSuffix>
+            }
+          />
+        ))}
+      </Select.Content>
+    </Select.Root>
+  );
+}

package/src/Select/docs/SelectComposableLabelAbove.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import { Select } from "@jobber/components-native";
+import { ProvinceItems } from "./SelectComposableProvinces";
+
+/** `labelPlacement="above"` renders the same `Select.Label` above the trigger. */
+export function SelectComposableLabelAbove() {
+  return (
+    <Select.Root labelPlacement="above">
+      <Select.Label>Province</Select.Label>
+      <Select.Trigger>
+        <Select.Value placeholder="Select a province" />
+      </Select.Trigger>
+      <Select.Content>
+        <ProvinceItems />
+      </Select.Content>
+    </Select.Root>
+  );
+}

package/src/Select/docs/SelectComposableLabelInside.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import { Select } from "@jobber/components-native";
+import { ProvinceItems } from "./SelectComposableProvinces";
+
+/** `labelPlacement="inside"` renders the label as a small label inside the trigger. */
+export function SelectComposableLabelInside() {
+  return (
+    <Select.Root labelPlacement="inside">
+      <Select.Label>Province</Select.Label>
+      <Select.Trigger>
+        <Select.Value placeholder="Select a province" />
+      </Select.Trigger>
+      <Select.Content>
+        <ProvinceItems />
+      </Select.Content>
+    </Select.Root>
+  );
+}

package/src/Select/docs/SelectComposableProvinces.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import { Select } from "@jobber/components-native";
+
+/** Shared option shape + data for the composable `Select` docs examples. */
+export interface ProvinceOption {
+  value: string;
+  label: string;
+}
+
+export const PROVINCES: ProvinceOption[] = [
+  { value: "ab", label: "Alberta" },
+  { value: "bc", label: "British Columbia" },
+  { value: "mb", label: "Manitoba" },
+  { value: "nb", label: "New Brunswick" },
+  { value: "nl", label: "Newfoundland and Labrador" },
+  { value: "ns", label: "Nova Scotia" },
+  { value: "on", label: "Ontario" },
+  { value: "pe", label: "Prince Edward Island" },
+  { value: "qc", label: "Quebec" },
+  { value: "sk", label: "Saskatchewan" },
+];
+
+/** The province options rendered as `Select.Item`s. */
+export function ProvinceItems() {
+  return (
+    <>
+      {PROVINCES.map(province => (
+        <Select.Item
+          key={province.value}
+          value={province.value}
+          label={province.label}
+        />
+      ))}
+    </>
+  );
+}

package/src/Select/docs/SelectComposableReadOnly.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import { Select } from "@jobber/components-native";
+import { PROVINCES, ProvinceItems } from "./SelectComposableProvinces";
+
+/** Read-only: non-interactive, value rendered as text with no chevron. */
+export function SelectComposableReadOnly() {
+  return (
+    <Select.Root readOnly defaultValue={PROVINCES[6]}>
+      <Select.Label>Province</Select.Label>
+      <Select.Trigger>
+        <Select.Value placeholder="Select a province" />
+      </Select.Trigger>
+      <Select.Content>
+        <ProvinceItems />
+      </Select.Content>
+    </Select.Root>
+  );
+}

package/src/Select/docs/SelectComposableValidationFlow.tsx

@@ -0,0 +1,27 @@
+import React, { useState } from "react";
+import { Select } from "@jobber/components-native";
+import {
+  ProvinceItems,
+  type ProvinceOption,
+} from "./SelectComposableProvinces";
+
+/** Validation: the `error` message and critical styling clear once selected. */
+export function SelectComposableValidationFlow() {
+  const [value, setValue] = useState<ProvinceOption | undefined>();
+
+  return (
+    <Select.Root
+      value={value}
+      onValueChange={option => setValue(option as ProvinceOption | undefined)}
+      error={value ? undefined : "Please select a province."}
+    >
+      <Select.Label>Province</Select.Label>
+      <Select.Trigger>
+        <Select.Value placeholder="Select a province" />
+      </Select.Trigger>
+      <Select.Content>
+        <ProvinceItems />
+      </Select.Content>
+    </Select.Root>
+  );
+}

package/src/Select/docs/index.ts

@@ -1,2 +1,16 @@
 export { SelectBasic } from "./SelectBasic";
 export { SelectInitialValue } from "./SelectInitialValue";
+
+// Composable Select docs examples
+export { SelectComposableBasic } from "./SelectComposableBasic";
+export { SelectComposableLabelAbove } from "./SelectComposableLabelAbove";
+export { SelectComposableLabelInside } from "./SelectComposableLabelInside";
+export { SelectComposableDescription } from "./SelectComposableDescription";
+export { SelectComposableValidationFlow } from "./SelectComposableValidationFlow";
+export { SelectComposableGroupedOptions } from "./SelectComposableGroupedOptions";
+export { SelectComposableItemPrefixSuffix } from "./SelectComposableItemPrefixSuffix";
+export { SelectComposableCustomMarker } from "./SelectComposableCustomMarker";
+export { SelectComposableDisabledOptions } from "./SelectComposableDisabledOptions";
+export { SelectComposableControlledWithRef } from "./SelectComposableControlledWithRef";
+export { SelectComposableReadOnly } from "./SelectComposableReadOnly";
+export { SelectComposableDisabled } from "./SelectComposableDisabled";

package/src/Select/index.ts

@@ -1,3 +1,12 @@
-export type { SelectOption, SelectProps } from "./Select";
+// 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";
+
+// Legacy props-driven API types.
+export type { SelectOption, SelectProps } from "./Select";
+
+// Composable chrome type. The underlying `SelectPrimitive` part prop types are
+// exported from the primitives barrel (`@jobber/components-native/primitives`),
+// not re-exported here.
+export type { SelectRootProps } from "./SelectComposableTypes";

package/src/primitives/Portal/index.ts

@@ -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/src/primitives/Select/SelectPrimitive.style.ts

@@ -7,10 +7,6 @@ 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,
@@ -26,7 +22,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"],
@@ -36,19 +33,29 @@ 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/src/primitives/Select/SelectPrimitive.test.tsx

@@ -70,9 +70,9 @@ describe("SelectPrimitive.Trigger", () => {
     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();
   });
 

package/src/primitives/Select/SelectPrimitive.tsx

@@ -20,6 +20,9 @@ import type {
 } from "./types";
 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({ ...props }: SelectPrimitiveRootProps) {
   return <Primitive.Root {...props} />;
 }
@@ -32,16 +35,13 @@ function SelectPrimitiveRoot({ ...props }: SelectPrimitiveRootProps) {
 function SelectPrimitiveTrigger({
   children,
   style,
-  testID,
+  testID = SELECT_TRIGGER_DEFAULT_TEST_ID,
   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.
@@ -54,18 +54,10 @@ function SelectPrimitiveTrigger({
   return (
     <Primitive.Trigger
       ref={ref}
-      testID={computeTriggerTestID(testID)}
+      testID={testID}
       disabled={isDisabled}
       accessibilityValue={accessibilityValue}
-      onPressIn={event => {
-        setPressed(true);
-        onPressIn?.(event);
-      }}
-      onPressOut={event => {
-        setPressed(false);
-        onPressOut?.(event);
-      }}
-      style={[
+      style={({ pressed }) => [
         styles.trigger,
         pressed && !open && styles.triggerPressed,
         open && styles.triggerOpen,
@@ -80,10 +72,6 @@ function SelectPrimitiveTrigger({
   );
 }
 
-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();

package/src/primitives/Select/index.ts

@@ -1,4 +1,7 @@
-export { SelectPrimitive } from "./SelectPrimitive";
+export {
+  SelectPrimitive,
+  SELECT_TRIGGER_DEFAULT_TEST_ID,
+} from "./SelectPrimitive";
 export type {
   SelectPrimitiveContentProps,
   SelectPrimitiveGroupProps,

package/src/primitives/Select/types.ts

@@ -33,7 +33,7 @@ export type SelectPrimitiveRootProps = RootProps;
 export interface SelectPrimitiveTriggerProps
   extends Omit<TriggerProps, "style" | "children" | "disabled" | "asChild">,
     React.RefAttributes<TriggerRef> {
-  /** Renders as `ATL-<testID>-Select-Trigger`, or `ATL-Select-Trigger` when omitted. */
+  /** Used verbatim to locate the trigger in end-to-end tests. Defaults to `ATL-Select-Trigger`. */
   readonly testID?: string;
 
   /** Critical (error) border styling. Style-only — no field/validation logic. */

package/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",