@jobber/components-native 0.108.1 → 0.109.0

package/dist/types/src/Select/Select.composable.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -1,6 +1,11 @@
 import type { ReactElement } from "react";
 import React from "react";
 import type { RegisterOptions } from "react-hook-form";
+import { SelectRoot } from "./SelectRoot";
+import { SelectTrigger } from "./components/SelectTrigger";
+import { SelectLabel } from "./components/SelectLabel";
+import { SelectContent } from "./components/SelectContent";
+import { SelectItem, SelectItemPrefix, SelectItemSuffix } from "./components/SelectItem";
 export interface SelectOption {
     /**
      * Text that shows up as the option
@@ -71,4 +76,17 @@ export interface SelectProps {
     readonly testID?: string;
 }
 export declare function Select({ value, defaultValue, onChange, children, placeholder, label, assistiveText, disabled, invalid, validations, accessibilityLabel, name, testID, }: SelectProps): React.JSX.Element;
+export declare namespace Select {
+    var Root: typeof SelectRoot;
+    var Trigger: typeof SelectTrigger;
+    var Value: ({ style, ...props }: import("../primitives").SelectPrimitiveValueProps) => React.JSX.Element;
+    var Label: typeof SelectLabel;
+    var Content: typeof SelectContent;
+    var Item: typeof SelectItem;
+    var ItemPrefix: typeof SelectItemPrefix;
+    var ItemSuffix: typeof SelectItemSuffix;
+    var Group: ({ ...props }: import("../primitives").SelectPrimitiveGroupProps) => React.JSX.Element;
+    var GroupLabel: ({ style, ref, ...props }: import("../primitives").SelectPrimitiveLabelProps) => React.JSX.Element;
+    var Separator: ({ style, ref, ...props }: import("../primitives").SelectPrimitiveSeparatorProps) => React.JSX.Element;
+}
 export declare function Option({ children }: SelectOption): React.JSX.Element;

package/dist/types/src/Select/SelectComposableTypes.d.ts

@@ -0,0 +1,50 @@
+import type { ReactNode } from "react";
+import type { SelectPrimitiveRootProps } from "../primitives/Select";
+/**
+ * Props for the composable `Select.Root` chrome — a presentational
+ * composition over `SelectPrimitive.Root`. Adds the optional field chrome
+ * (label, description / error) and the field-state flags (`invalid`,
+ * `status`, `readOnly`) that the styled trigger reads. Everything else passes
+ * through to `SelectPrimitive.Root` (and therefore `@rn-primitives/select`).
+ *
+ * Deliberately RHF-free: no `name`, no `validations`.
+ */
+export interface SelectRootProps extends SelectPrimitiveRootProps {
+    /**
+     * Where the field label renders: `"inside"` the trigger (small, above the value)
+     * or `"above"` it. DS-owned default (`"inside"`); overridable per instance.
+     * The label content itself is authored via `Select.Label`.
+     */
+    readonly labelPlacement?: "above" | "inside";
+    /**
+     * Explicit accessible name for the trigger. Auto-derived from a string
+     * `Select.Label`; supply this when the label content is a non-string
+     * `ReactNode`, or to name a field that has no visible `Select.Label`.
+     */
+    readonly accessibilityLabel?: string;
+    /**
+     * Supporting text rendered below the trigger. A string renders as neutral
+     * `HelperText`; a `ReactNode` renders verbatim. Suppressed when `error` is
+     * present.
+     */
+    readonly description?: string | ReactNode;
+    /**
+     * Error message rendered below the trigger as critical `HelperText` (string)
+     * or verbatim (`ReactNode`). Takes priority over `description` and applies
+     * the critical trigger styling.
+     */
+    readonly error?: string | ReactNode;
+    /**
+     * Applies the critical trigger styling without rendering an error message.
+     */
+    readonly invalid?: boolean;
+    /**
+     * `critical` applies the critical trigger styling. Defaults to `neutral`.
+     */
+    readonly status?: "neutral" | "critical";
+    /**
+     * Renders the trigger as non-interactive read-only presentation (subtle
+     * surface, no chevron, value as text). `disabled` takes precedence.
+     */
+    readonly readOnly?: boolean;
+}

package/dist/types/src/Select/SelectRoot.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import type { SelectRootProps } from "./SelectComposableTypes";
+/**
+ * Composable `Select.Root` chrome: renders the optional `description` / `error`
+ * below the field (via `HelperText`), owns the field-state context, and places the
+ * field label. The label content is authored via `Select.Label` (registered into
+ * this context); `labelPlacement` decides whether it renders in the above slot
+ * (here) or the inside slot (`Select.Trigger`). `error` takes priority over
+ * `description`. See `Select.guide.md` for the label / accessibility / layering
+ * model.
+ */
+export declare function SelectRoot({ labelPlacement, accessibilityLabel: accessibilityLabelProp, description, error, invalid, status, readOnly, children, ...rootProps }: SelectRootProps): React.JSX.Element;

package/dist/types/src/Select/SelectRoot.style.d.ts

@@ -0,0 +1,8 @@
+export declare const useStyles: () => {
+    container: {
+        gap: number;
+    };
+    field: {
+        gap: number;
+    };
+};

package/dist/types/src/Select/SelectRoot.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/src/Select/components/SelectContent.d.ts

@@ -0,0 +1,8 @@
+import type { ReactElement } from "react";
+import type { SelectPrimitiveContentProps } from "../../primitives/Select";
+export type SelectContentProps = SelectPrimitiveContentProps;
+/**
+ * Folds the primitive Portal / Overlay / Content / Viewport into one dropdown
+ * part. Positioning lives in the primitive `Content`; props pass through.
+ */
+export declare function SelectContent({ children, ...props }: SelectContentProps): ReactElement;

package/dist/types/src/Select/components/SelectContent.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/src/Select/components/SelectFieldContext.d.ts

@@ -0,0 +1,27 @@
+import type { ReactNode } from "react";
+/** Where the field label renders relative to the trigger. */
+export type LabelPlacement = "above" | "inside";
+/**
+ * Sugar-owned field state, provided by `Select.Root` and read by the sugar parts
+ * (`Select.Trigger`, `Select.Label`). `Select.Label` registers its content here
+ * (rather than rendering in place); `Select.Root` / `Select.Trigger` render it in
+ * the slot `labelPlacement` selects. See `Select.guide.md` for the model.
+ */
+export interface SelectFieldState {
+    /** Chosen label placement — above the trigger or inside it. */
+    readonly labelPlacement: LabelPlacement;
+    /** The label content to render — the registered `Select.Label` children. */
+    readonly labelContent?: ReactNode;
+    /** Resolved accessible name applied to the trigger. */
+    readonly accessibilityLabel?: string;
+    /** Resolved critical state (from `invalid` / `status` / `error`). */
+    readonly invalid?: boolean;
+    /** Render the trigger as a static, non-pressable read-only display. */
+    readonly readOnly?: boolean;
+    /** Register the label content (+ its accessible name, when it is a string). */
+    registerLabel(content: ReactNode, accessibleName?: string): void;
+    /** Clear a previously registered label (on `Select.Label` unmount). */
+    unregisterLabel(): void;
+}
+export declare const SelectFieldContext: import("react").Context<SelectFieldState>;
+export declare function useSelectFieldState(): SelectFieldState;

package/dist/types/src/Select/components/SelectItem.d.ts

@@ -0,0 +1,32 @@
+import type { ReactElement, ReactNode } from "react";
+export interface SelectItemProps {
+    /** The option's value. */
+    readonly value: string;
+    /** The option's label — rendered as the row text and used as the value label. */
+    readonly label: string;
+    /** Disables selection and greys the label. */
+    readonly disabled?: boolean;
+    /** Close the dropdown when this option is pressed (default behaviour). */
+    readonly closeOnPress?: boolean;
+    /** Leading content, before the label — typically a `Select.ItemPrefix`. */
+    readonly prefix?: ReactNode;
+    /** Trailing content, after the label — typically a `Select.ItemSuffix`. */
+    readonly suffix?: ReactNode;
+    /** Overrides the default checkmark marker shown on the selected row. */
+    readonly indicator?: ReactNode;
+}
+/**
+ * An option row. Auto-composes the label + a default checkmark from its
+ * `value` / `label` / `disabled` props, and places the `prefix` / `suffix` slot
+ * content around the label (prefix → label → suffix → marker). `indicator`
+ * overrides the default checkmark; `disabled` greys the label and blocks
+ * selection.
+ */
+export declare function SelectItem({ value, label, disabled, closeOnPress, prefix, suffix, indicator, }: SelectItemProps): ReactElement;
+export interface SelectItemSlotProps {
+    readonly children?: ReactNode;
+}
+/** Styled leading slot — pass to `Select.Item`'s `prefix` prop. */
+export declare function SelectItemPrefix({ children, }: SelectItemSlotProps): ReactElement;
+/** Styled trailing slot — pass to `Select.Item`'s `suffix` prop. */
+export declare function SelectItemSuffix({ children, }: SelectItemSlotProps): ReactElement;

package/dist/types/src/Select/components/SelectItem.style.d.ts

@@ -0,0 +1,5 @@
+export declare const useStyles: () => {
+    slot: {
+        justifyContent: "center";
+    };
+};

package/dist/types/src/Select/components/SelectItem.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/src/Select/components/SelectLabel.d.ts

@@ -0,0 +1,22 @@
+import type { ReactElement, ReactNode } from "react";
+export interface SelectLabelProps {
+    /**
+     * The label content. Its placement (above the trigger vs. inside it) is set by
+     * the `labelPlacement` prop on `Select.Root`, not by where this is written.
+     */
+    readonly children?: ReactNode;
+}
+/**
+ * The field label. Rather than render in place, it **registers** its `children`
+ * (and, when a string, the trigger's accessible name) into `Select.Root`, which
+ * renders the content in the slot `labelPlacement` selects. Renders nothing where
+ * it is composed. See `Select.guide.md`.
+ */
+export declare function SelectLabel({ children }: SelectLabelProps): null;
+/**
+ * Internal renderer for the registered label content, shared by the above slot
+ * (`Select.Root`) and the inside slot (`Select.Trigger`). Sizes itself from
+ * `labelPlacement` (smaller when `inside`). Hidden from assistive tech — the
+ * trigger carries the accessible name.
+ */
+export declare function FieldLabel(): ReactElement | null;

package/dist/types/src/Select/components/SelectTrigger.d.ts

@@ -0,0 +1,20 @@
+import type { ReactElement, ReactNode, Ref } from "react";
+import { type TriggerRef } from "@rn-primitives/select";
+export interface SelectTriggerProps {
+    /** Trigger content — typically `Select.Value` (and optionally a label part). */
+    readonly children?: ReactNode;
+    /** Used verbatim to locate the trigger in end-to-end tests. Defaults to `ATL-Select-Trigger`. */
+    readonly testID?: string;
+    /**
+     * Imperative handle exposing `open()` / `close()`. Stays `null` when the field
+     * is `readOnly` (no interactive trigger is mounted).
+     */
+    readonly ref?: Ref<TriggerRef>;
+}
+/**
+ * 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 declare function SelectTrigger({ children, testID, ref, }: SelectTriggerProps): ReactElement;

package/dist/types/src/Select/components/SelectTrigger.style.d.ts

@@ -0,0 +1,21 @@
+export declare const useStyles: () => {
+    content: {
+        flex: number;
+        justifyContent: "center";
+    };
+    contentInside: {
+        paddingTop: number;
+    };
+    readOnly: {
+        flexDirection: "row";
+        alignItems: "center";
+        gap: number;
+        minHeight: number;
+        paddingLeft: number;
+        paddingRight: number;
+        backgroundColor: string;
+        borderWidth: number;
+        borderColor: string;
+        borderRadius: number;
+    };
+};

package/dist/types/src/Select/index.d.ts

@@ -1,3 +1,4 @@
-export type { SelectOption, SelectProps } from "./Select";
 export { Select, Option } from "./Select";
 export { SelectPressable } from "./components/SelectPressable";
+export type { SelectOption, SelectProps } from "./Select";
+export type { SelectRootProps } from "./SelectComposableTypes";

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

@@ -1,12 +1,14 @@
 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;
 /**
  * Styled trigger field. Renders only its `children` — compose
  * `SelectPrimitive.Value` and any trailing icon (e.g. a chevron) here; the
  * primitive provides no chevron of its own.
  */
-declare function SelectPrimitiveTrigger({ children, style, testID, invalid, onPressIn, onPressOut, ref, ...props }: SelectPrimitiveTriggerProps): React.JSX.Element;
+declare function SelectPrimitiveTrigger({ children, style, testID, invalid, ref, ...props }: SelectPrimitiveTriggerProps): React.JSX.Element;
 declare function SelectPrimitiveValue({ style, ...props }: SelectPrimitiveValueProps): React.JSX.Element;
 /** Portals the dropdown into the mounted `AtlantisPortalHost`. */
 declare function SelectPrimitivePortal({ ...props }: SelectPrimitivePortalProps): React.JSX.Element;

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

@@ -4,7 +4,8 @@ export declare const useStyles: () => {
         alignItems: "center";
         gap: number;
         minHeight: number;
-        paddingHorizontal: number;
+        paddingLeft: number;
+        paddingRight: number;
         backgroundColor: string;
         borderWidth: number;
         borderColor: string;
@@ -13,12 +14,14 @@ export declare const useStyles: () => {
     triggerOpen: {
         borderWidth: number;
         borderColor: string;
-        paddingHorizontal: number;
+        paddingLeft: number;
+        paddingRight: number;
     };
     triggerPressed: {
         borderWidth: number;
         borderColor: string;
-        paddingHorizontal: number;
+        paddingLeft: number;
+        paddingRight: number;
     };
     triggerInvalid: {
         borderColor: string;

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

@@ -1,2 +1,2 @@
-export { SelectPrimitive } from "./SelectPrimitive";
+export { SelectPrimitive, SELECT_TRIGGER_DEFAULT_TEST_ID, } from "./SelectPrimitive";
 export type { SelectPrimitiveContentProps, SelectPrimitiveGroupProps, SelectPrimitiveItemIndicatorProps, SelectPrimitiveItemProps, SelectPrimitiveItemTextProps, SelectPrimitiveLabelProps, SelectPrimitiveOption, SelectPrimitiveOverlayProps, SelectPrimitivePortalProps, SelectPrimitiveRootProps, SelectPrimitiveSeparatorProps, SelectPrimitiveTriggerProps, SelectPrimitiveValueProps, SelectPrimitiveViewportProps, } from "./types";

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

@@ -4,7 +4,7 @@ import type { ContentProps, ContentRef, GroupProps, GroupRef, ItemIndicatorProps
 export type { Option as SelectPrimitiveOption };
 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. */
     readonly invalid?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.108.1",
+  "version": "0.109.0",
   "license": "MIT",
   "description": "React Native implementation of Atlantis",
   "repository": {
@@ -73,7 +73,7 @@
   "devDependencies": {
     "@babel/runtime": "^7.29.2",
     "@gorhom/bottom-sheet": "^5.2.8",
-    "@jobber/design": "0.107.0",
+    "@jobber/design": "0.108.0",
     "@jobber/hooks": "2.21.0",
     "@react-native-community/datetimepicker": "^8.4.5",
     "@react-native/babel-preset": "^0.82.1",
@@ -124,5 +124,5 @@
     "react-native-screens": ">=4.18.0",
     "react-native-svg": ">=12.0.0"
   },
-  "gitHead": "7d8b08e91839f535411288b03a8603f2df310a8e"
+  "gitHead": "9c3f49230e6823f32b857348eea4efa3fb32aa2a"
 }

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

@@ -0,0 +1,93 @@
+import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
+import React from "react";
+import { View } from "react-native";
+import { SafeAreaProvider } from "react-native-safe-area-context";
+import { PortalHost } from "@rn-primitives/portal";
+import { Select } from "@jobber/components-native";
+import {
+  SelectComposableBasic,
+  SelectComposableControlledWithRef,
+  SelectComposableCustomMarker,
+  SelectComposableDescription,
+  SelectComposableDisabled,
+  SelectComposableDisabledOptions,
+  SelectComposableGroupedOptions,
+  SelectComposableItemPrefixSuffix,
+  SelectComposableLabelAbove,
+  SelectComposableLabelInside,
+  SelectComposableReadOnly,
+  SelectComposableValidationFlow,
+} from "./docs";
+
+const meta = {
+  title: "Components/Selections/Select/SelectComposable",
+  component: Select.Root,
+  parameters: {
+    viewport: { defaultViewport: "mobile1" },
+  },
+  decorators: [
+    // PortalHost outside SafeAreaProvider so the portal-based dropdown renders
+    // and resolves its position against the page origin (see the SelectPrimitive
+    // stories for the rationale). Apps mount one PortalHost at their root.
+    (Story: React.ComponentType) => (
+      <>
+        <SafeAreaProvider>
+          <View style={{ width: 320, padding: 16, minHeight: 560 }}>
+            <Story />
+          </View>
+        </SafeAreaProvider>
+        <PortalHost />
+      </>
+    ),
+  ],
+} satisfies Meta<typeof Select.Root>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ── Field & label placement ────────────────────────────────────────────────
+
+/** Default placement: the composed `Select.Label` renders inside the trigger. */
+export const Basic: Story = { render: SelectComposableBasic };
+
+/** `labelPlacement="above"` renders the same `Select.Label` above the trigger. */
+export const LabelAbove: Story = { render: SelectComposableLabelAbove };
+
+/** `labelPlacement="inside"` renders the label as a small label inside the trigger. */
+export const LabelInside: Story = { render: SelectComposableLabelInside };
+
+/** Supporting `description` rendered below the field. */
+export const Description: Story = { render: SelectComposableDescription };
+
+/** Validation: the `error` message and critical styling clear once selected. */
+export const ValidationFlow: Story = { render: SelectComposableValidationFlow };
+
+// ── Options & content ──────────────────────────────────────────────────────
+
+/** Grouped options with group labels and a separator between groups. */
+export const GroupedOptions: Story = { render: SelectComposableGroupedOptions };
+
+/** `Select.ItemPrefix` / `Select.ItemSuffix` slots passed into `Select.Item`. */
+export const ItemPrefixSuffix: Story = {
+  render: SelectComposableItemPrefixSuffix,
+};
+
+/** Override the default checkmark via the `indicator` slot prop. */
+export const CustomMarker: Story = { render: SelectComposableCustomMarker };
+
+/** Individual options can be disabled. */
+export const DisabledOptions: Story = {
+  render: SelectComposableDisabledOptions,
+};
+
+// ── Behaviour & field states ───────────────────────────────────────────────
+
+/** The trigger ref exposes imperative `open()` / `close()`. */
+export const ControlledWithRef: Story = {
+  render: SelectComposableControlledWithRef,
+};
+
+/** Read-only: non-interactive, value rendered as text with no chevron. */
+export const ReadOnly: Story = { render: SelectComposableReadOnly };
+
+/** Disabled field. */
+export const Disabled: Story = { render: SelectComposableDisabled };

package/src/Select/Select.composable.test.tsx

@@ -0,0 +1,56 @@
+import React from "react";
+import { render, screen } from "@testing-library/react-native";
+import { Option, Select } from ".";
+import { PortalHostWrapper } from "../utils/test";
+
+describe("Select composable statics + coexistence", () => {
+  it("exposes the composable parts as statics on Select", () => {
+    expect(Object.keys(Select)).toEqual(
+      expect.arrayContaining([
+        "Root",
+        "Trigger",
+        "Value",
+        "Label",
+        "Content",
+        "Item",
+        "Group",
+        "GroupLabel",
+        "Separator",
+      ]),
+    );
+  });
+
+  it("renders through the public statics with no react-hook-form context", () => {
+    render(
+      <Select.Root>
+        <Select.Label>City</Select.Label>
+        <Select.Trigger>
+          <Select.Value placeholder="Select a city" />
+        </Select.Trigger>
+        <Select.Content>
+          <Select.Item value="tor" label="Toronto" />
+        </Select.Content>
+      </Select.Root>,
+      { wrapper: PortalHostWrapper },
+    );
+
+    expect(
+      screen.getByText("City", { includeHiddenElements: true }),
+    ).toBeDefined();
+    expect(screen.getByTestId("ATL-Select-Trigger")).toBeDefined();
+  });
+
+  it("keeps the legacy props-driven Select callable and renders Option", () => {
+    render(
+      <Select onChange={jest.fn()}>
+        <Option value="tor">Toronto</Option>
+        <Option value="van">Vancouver</Option>
+      </Select>,
+    );
+
+    // Legacy trigger testID is preserved and does not collide with the
+    // composable trigger's ATL-Select-Trigger.
+    expect(screen.getByTestId("ATL-Select")).toBeDefined();
+    expect(screen.queryByTestId("ATL-Select-Trigger")).toBeNull();
+  });
+});