@jobber/components-native 0.105.4 → 0.107.0

package/src/primitives/Select/SelectPrimitive.tsx

@@ -0,0 +1,292 @@
+import React from "react";
+import { StyleSheet } from "react-native";
+import * as Primitive from "@rn-primitives/select";
+import { SafeAreaInsetsContext } from "react-native-safe-area-context";
+import { useStyles } from "./SelectPrimitive.style";
+import type {
+  SelectPrimitiveContentProps,
+  SelectPrimitiveGroupProps,
+  SelectPrimitiveItemIndicatorProps,
+  SelectPrimitiveItemProps,
+  SelectPrimitiveItemTextProps,
+  SelectPrimitiveLabelProps,
+  SelectPrimitiveOverlayProps,
+  SelectPrimitivePortalProps,
+  SelectPrimitiveRootProps,
+  SelectPrimitiveSeparatorProps,
+  SelectPrimitiveTriggerProps,
+  SelectPrimitiveValueProps,
+  SelectPrimitiveViewportProps,
+} from "./types";
+import { tokens as staticTokens } from "../../utils/design";
+
+function SelectPrimitiveRoot({ ...props }: SelectPrimitiveRootProps) {
+  return <Primitive.Root {...props} />;
+}
+
+/**
+ * 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.
+ */
+function SelectPrimitiveTrigger({
+  children,
+  style,
+  testID,
+  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.
+  const isDisabled = rootDisabled ?? false;
+  const isInvalid = !isDisabled && (invalid ?? false);
+
+  // Announce the selected option as the trigger's value.
+  const accessibilityValue = value?.label ? { text: value.label } : undefined;
+
+  return (
+    <Primitive.Trigger
+      ref={ref}
+      testID={computeTriggerTestID(testID)}
+      disabled={isDisabled}
+      accessibilityValue={accessibilityValue}
+      onPressIn={event => {
+        setPressed(true);
+        onPressIn?.(event);
+      }}
+      onPressOut={event => {
+        setPressed(false);
+        onPressOut?.(event);
+      }}
+      style={[
+        styles.trigger,
+        pressed && !open && styles.triggerPressed,
+        open && styles.triggerOpen,
+        isInvalid && styles.triggerInvalid,
+        isDisabled && styles.triggerDisabled,
+        style,
+      ]}
+      {...props}
+    >
+      {children}
+    </Primitive.Trigger>
+  );
+}
+
+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();
+  const isEmpty = value?.value === undefined;
+
+  return (
+    <Primitive.Value
+      style={[
+        styles.value,
+        isEmpty && styles.valuePlaceholder,
+        disabled && styles.valueDisabled,
+        style,
+      ]}
+      {...props}
+    />
+  );
+}
+
+/** Portals the dropdown into the mounted `AtlantisPortalHost`. */
+function SelectPrimitivePortal({ ...props }: SelectPrimitivePortalProps) {
+  return <Primitive.Portal {...props} />;
+}
+
+/** Tap-outside dismiss surface behind the dropdown (no scrim). */
+function SelectPrimitiveOverlay({
+  style,
+  testID = "ATL-Select-Overlay",
+  ...props
+}: SelectPrimitiveOverlayProps) {
+  const styles = useStyles();
+
+  return (
+    <Primitive.Overlay
+      testID={testID}
+      style={StyleSheet.flatten([styles.overlay, style])}
+      {...props}
+    />
+  );
+}
+
+/**
+ * Anchored dropdown surface: matches the trigger width, applies safe-area
+ * insets, and flips above the trigger when space is tight. Compose it inside
+ * `Portal`, alongside `Overlay`, wrapping the items in a `Viewport`.
+ */
+function SelectPrimitiveContent({
+  children,
+  style,
+  sideOffset = staticTokens["space-smaller"],
+  insets,
+  ref,
+  ...props
+}: SelectPrimitiveContentProps) {
+  const styles = useStyles();
+  // Read the context directly, not `useSafeAreaInsets` (which throws without a
+  // provider): `Content` renders at the portal host, which may sit outside one.
+  const safeAreaInsets = React.useContext(SafeAreaInsetsContext) ?? undefined;
+  const { triggerPosition } = Primitive.useRootContext();
+
+  return (
+    <Primitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      insets={insets ?? safeAreaInsets}
+      style={StyleSheet.flatten([
+        styles.content,
+        triggerPosition ? { width: triggerPosition.width } : undefined,
+        style,
+      ])}
+      {...props}
+    >
+      {children}
+    </Primitive.Content>
+  );
+}
+
+/** Scroll container for the items (a no-op passthrough on native). */
+function SelectPrimitiveViewport({ ...props }: SelectPrimitiveViewportProps) {
+  return <Primitive.Viewport {...props} />;
+}
+
+/**
+ * Styled, pressable option row. Compose its content from `SelectPrimitive.ItemText`
+ * and `SelectPrimitive.ItemIndicator` (and anything else) as `children`.
+ */
+function SelectPrimitiveItem({
+  style,
+  disabled,
+  ref,
+  ...props
+}: SelectPrimitiveItemProps) {
+  const styles = useStyles();
+
+  return (
+    <Primitive.Item
+      ref={ref}
+      disabled={disabled}
+      style={({ pressed }) => [
+        styles.item,
+        pressed && styles.itemPressed,
+        style,
+      ]}
+      {...props}
+    />
+  );
+}
+
+/**
+ * The option label as styled text (reads the label from the item context). The
+ * `disabled` flag is explicit — the composing layer (e.g. the sugared
+ * `Select.Item`) forwards the row's disabled state to grey the text.
+ */
+function SelectPrimitiveItemText({
+  style,
+  disabled,
+  ref,
+  ...props
+}: SelectPrimitiveItemTextProps) {
+  const styles = useStyles();
+
+  return (
+    <Primitive.ItemText
+      ref={ref}
+      style={[styles.itemText, disabled && styles.itemTextDisabled, style]}
+      {...props}
+    />
+  );
+}
+
+/**
+ * The selected-state marker slot. Renders its `children` (the marker, e.g. a
+ * checkmark) on the selected row only — it self-hides on unselected rows. The
+ * marker glyph is supplied by the composing layer, not defaulted here.
+ */
+function SelectPrimitiveItemIndicator({
+  style,
+  ref,
+  ...props
+}: SelectPrimitiveItemIndicatorProps) {
+  const styles = useStyles();
+
+  return (
+    <Primitive.ItemIndicator
+      ref={ref}
+      style={[styles.itemIndicator, style]}
+      {...props}
+    />
+  );
+}
+
+/**
+ * Groups related options, typically with a `SelectPrimitive.Label` heading.
+ */
+function SelectPrimitiveGroup({ ...props }: SelectPrimitiveGroupProps) {
+  return <Primitive.Group {...props} />;
+}
+
+/**
+ * A styled group heading rendered inside `SelectPrimitive.Group`.
+ */
+function SelectPrimitiveLabel({
+  style,
+  ref,
+  ...props
+}: SelectPrimitiveLabelProps) {
+  const styles = useStyles();
+
+  return (
+    <Primitive.Label ref={ref} style={[styles.groupLabel, style]} {...props} />
+  );
+}
+
+/**
+ * A styled divider between groups or options.
+ */
+function SelectPrimitiveSeparator({
+  style,
+  ref,
+  ...props
+}: SelectPrimitiveSeparatorProps) {
+  const styles = useStyles();
+
+  return (
+    <Primitive.Separator
+      ref={ref}
+      style={[styles.separator, style]}
+      {...props}
+    />
+  );
+}
+
+export const SelectPrimitive = {
+  Root: SelectPrimitiveRoot,
+  Trigger: SelectPrimitiveTrigger,
+  Value: SelectPrimitiveValue,
+  Portal: SelectPrimitivePortal,
+  Overlay: SelectPrimitiveOverlay,
+  Content: SelectPrimitiveContent,
+  Viewport: SelectPrimitiveViewport,
+  Item: SelectPrimitiveItem,
+  ItemText: SelectPrimitiveItemText,
+  ItemIndicator: SelectPrimitiveItemIndicator,
+  Group: SelectPrimitiveGroup,
+  Label: SelectPrimitiveLabel,
+  Separator: SelectPrimitiveSeparator,
+};

package/src/primitives/Select/index.ts

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

package/src/primitives/Select/types.ts

@@ -0,0 +1,96 @@
+import type React from "react";
+import type { StyleProp, ViewStyle } from "react-native";
+import type {
+  ContentProps,
+  ContentRef,
+  GroupProps,
+  GroupRef,
+  ItemIndicatorProps,
+  ItemIndicatorRef,
+  ItemProps,
+  ItemRef,
+  ItemTextProps,
+  ItemTextRef,
+  LabelProps,
+  LabelRef,
+  Option,
+  OverlayProps,
+  OverlayRef,
+  PortalProps,
+  RootProps,
+  SeparatorProps,
+  SeparatorRef,
+  TriggerProps,
+  TriggerRef,
+  ValueProps,
+  ViewportProps,
+} from "@rn-primitives/select";
+
+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. */
+  readonly testID?: string;
+
+  /** Critical (error) border styling. Style-only — no field/validation logic. */
+  readonly invalid?: boolean;
+
+  /** Callback styles are not supported; state styling is composed internally. */
+  readonly style?: StyleProp<ViewStyle>;
+
+  readonly children?: React.ReactNode;
+}
+
+export type SelectPrimitiveValueProps = ValueProps;
+
+export type SelectPrimitivePortalProps = PortalProps;
+
+export interface SelectPrimitiveOverlayProps
+  extends Omit<OverlayProps, "style" | "asChild">,
+    React.RefAttributes<OverlayRef> {
+  readonly style?: StyleProp<ViewStyle>;
+}
+
+export interface SelectPrimitiveContentProps
+  extends ContentProps,
+    React.RefAttributes<ContentRef> {}
+
+export type SelectPrimitiveViewportProps = ViewportProps;
+
+export interface SelectPrimitiveItemProps
+  extends Omit<ItemProps, "style" | "asChild">,
+    React.RefAttributes<ItemRef> {
+  /** Callback styles are not supported; pressed styling is composed internally. */
+  readonly style?: StyleProp<ViewStyle>;
+
+  /** Compose `ItemText` / `ItemIndicator` (and any other content) as children. */
+  readonly children?: React.ReactNode;
+}
+
+export interface SelectPrimitiveItemTextProps
+  extends Omit<ItemTextProps, "asChild">,
+    React.RefAttributes<ItemTextRef> {
+  /** Greys the label; the composing layer forwards the row's disabled state. */
+  readonly disabled?: boolean;
+}
+
+/** The default selected-item checkmark; overridable via `children`. */
+export interface SelectPrimitiveItemIndicatorProps
+  extends ItemIndicatorProps,
+    React.RefAttributes<ItemIndicatorRef> {}
+
+export interface SelectPrimitiveGroupProps
+  extends GroupProps,
+    React.RefAttributes<GroupRef> {}
+
+export interface SelectPrimitiveLabelProps
+  extends LabelProps,
+    React.RefAttributes<LabelRef> {}
+
+export interface SelectPrimitiveSeparatorProps
+  extends SeparatorProps,
+    React.RefAttributes<SeparatorRef> {}

package/src/primitives/index.ts

@@ -2,3 +2,5 @@
  * This file exports styled components-native primitives.
  */
 export * from "./HelperText";
+export * from "./Portal";
+export * from "./Select";

package/src/utils/test/PortalHostWrapper.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { PortalHost } from "@rn-primitives/portal";
+
+interface PortalHostWrapperProps {
+  readonly children: React.ReactNode;
+}
+
+/**
+ * Test wrapper that mounts a `PortalHost` so portal-based overlays (e.g. the
+ * Select dropdown) render: `render(ui, { wrapper: PortalHostWrapper })`.
+ */
+export function PortalHostWrapper({ children }: PortalHostWrapperProps) {
+  return (
+    <>
+      {children}
+      <PortalHost />
+    </>
+  );
+}

package/src/utils/test/index.ts

@@ -1 +1,2 @@
 export { MockSafeAreaProvider } from "./MockSafeAreaProvider";
+export { PortalHostWrapper } from "./PortalHostWrapper";