@butternutbox/pawprint-native 1.6.2 → 2.0.0

package/src/components/molecules/SelectField/SelectDrawerField.test.tsx

@@ -0,0 +1,210 @@
+import React from "react"
+import { screen, fireEvent } from "@testing-library/react"
+import { describe, it, expect, vi } from "vitest"
+import { renderWithTheme } from "../../../test-utils"
+import { SelectDrawerField } from "./SelectDrawerField"
+import type { SelectFieldOptionData } from "./core"
+
+const COUNTRIES: SelectFieldOptionData[] = [
+  { value: "uk", label: "United Kingdom" },
+  { value: "us", label: "United States" },
+  { value: "ca", label: "Canada" }
+]
+
+type Props = Partial<React.ComponentProps<typeof SelectDrawerField>>
+
+const renderField = (props: Props = {}) => {
+  renderWithTheme(
+    <SelectDrawerField
+      label="Country"
+      placeholder="Select a country"
+      options={COUNTRIES}
+      {...props}
+    />
+  )
+
+  return screen.getByRole("combobox") as HTMLInputElement
+}
+
+const openDrawer = () => {
+  const trigger = screen
+    .getAllByRole("button")
+    .find((candidate) => candidate.querySelector("input"))
+
+  if (!trigger) throw new Error("field trigger not found")
+  fireEvent.click(trigger)
+}
+
+describe("SelectDrawerField", () => {
+  it("renders the label and description", () => {
+    renderField({ description: "Pick one" })
+
+    expect(screen.getByText("Country")).toBeInTheDocument()
+    expect(screen.getByText("Pick one")).toBeInTheDocument()
+  })
+
+  it("keeps the drawer closed until the field is pressed", () => {
+    renderField()
+
+    expect(screen.queryByText("United Kingdom")).not.toBeInTheDocument()
+  })
+
+  it("opens the drawer when the field is pressed", () => {
+    renderField()
+    openDrawer()
+
+    COUNTRIES.forEach((option) => {
+      expect(screen.getByText(option.label)).toBeInTheDocument()
+    })
+  })
+
+  it("never makes the field editable", () => {
+    const input = renderField()
+
+    expect(input).toBeDisabled()
+  })
+
+  it("filters the list from the search input", () => {
+    renderField({ searchPlaceholder: "Search countries" })
+    openDrawer()
+
+    const search = screen.getByPlaceholderText("Search countries")
+    fireEvent.change(search, { target: { value: "united" } })
+
+    expect(screen.getByText("United Kingdom")).toBeInTheDocument()
+    expect(screen.queryByText("Canada")).not.toBeInTheDocument()
+  })
+
+  it("shows the no-results row when nothing matches", () => {
+    renderField({
+      searchPlaceholder: "Search countries",
+      noResultsText: "No countries found"
+    })
+    openDrawer()
+
+    fireEvent.change(screen.getByPlaceholderText("Search countries"), {
+      target: { value: "zzzz" }
+    })
+
+    expect(screen.getByText("No countries found")).toBeInTheDocument()
+  })
+
+  it("omits the search input when searchable is false", () => {
+    renderField({ searchable: false, searchPlaceholder: "Search countries" })
+    openDrawer()
+
+    expect(
+      screen.queryByPlaceholderText("Search countries")
+    ).not.toBeInTheDocument()
+  })
+
+  it("commits the selected value and closes the drawer", () => {
+    const onValueChange = vi.fn()
+    const input = renderField({ onValueChange })
+    openDrawer()
+    fireEvent.click(screen.getByText("Canada"))
+
+    expect(onValueChange).toHaveBeenCalledWith("ca")
+    expect(input).toHaveValue("Canada")
+    expect(screen.queryByText("United Kingdom")).not.toBeInTheDocument()
+  })
+
+  it("does not commit a disabled option", () => {
+    const onValueChange = vi.fn()
+    renderField({
+      onValueChange,
+      options: [{ value: "uk", label: "United Kingdom", disabled: true }]
+    })
+    openDrawer()
+    fireEvent.click(screen.getByText("United Kingdom"))
+
+    expect(onValueChange).not.toHaveBeenCalled()
+  })
+
+  it("shows the committed label and clears it", () => {
+    const onValueChange = vi.fn()
+    const input = renderField({ onValueChange, defaultValue: "ca" })
+
+    expect(input).toHaveValue("Canada")
+
+    fireEvent.click(screen.getByLabelText("Clear selection"))
+
+    expect(input).toHaveValue("")
+    expect(onValueChange).toHaveBeenCalledWith(null)
+  })
+
+  it("closes when the overlay is tapped", () => {
+    renderField()
+    openDrawer()
+
+    expect(screen.getByText("United Kingdom")).toBeInTheDocument()
+
+    fireEvent.click(screen.getByLabelText("Close drawer"))
+
+    expect(screen.queryByText("United Kingdom")).not.toBeInTheDocument()
+  })
+
+  it("shows the label of an option that is not in options", () => {
+    const onValueChange = vi.fn()
+    renderWithTheme(
+      <SelectDrawerField
+        label="Breed"
+        placeholder="Select a breed"
+        options={[]}
+        searchable={false}
+        onValueChange={onValueChange}
+      />
+    )
+
+    const input = screen.getByRole("combobox") as HTMLInputElement
+
+    expect(input).toHaveValue("")
+  })
+
+  it("keeps a selected label that options cannot resolve", () => {
+    const remote: SelectFieldOptionData[] = [
+      { value: "lab", label: "Labrador Retriever" }
+    ]
+    const onValueChange = vi.fn()
+
+    renderWithTheme(
+      <SelectDrawerField
+        label="Breed"
+        placeholder="Select a breed"
+        options={remote}
+        onValueChange={onValueChange}
+      />
+    )
+
+    const input = screen.getByRole("combobox") as HTMLInputElement
+    const trigger = screen
+      .getAllByRole("button")
+      .find((candidate) => candidate.querySelector("input"))
+    if (!trigger) throw new Error("trigger not found")
+
+    fireEvent.click(trigger)
+    fireEvent.click(screen.getByText("Labrador Retriever"))
+
+    expect(onValueChange).toHaveBeenCalledWith("lab")
+    expect(input).toHaveValue("Labrador Retriever")
+  })
+
+  it("does not open when disabled", () => {
+    renderField({ disabled: true })
+    const trigger = screen
+      .getAllByRole("button")
+      .find((candidate) => candidate.querySelector("input"))
+
+    if (trigger) fireEvent.click(trigger)
+
+    expect(screen.queryByText("United Kingdom")).not.toBeInTheDocument()
+  })
+
+  it("does not change its own value when controlled", () => {
+    const input = renderField({ value: "uk", onValueChange: vi.fn() })
+    openDrawer()
+    fireEvent.click(screen.getByText("Canada"))
+
+    expect(input).toHaveValue("United Kingdom")
+  })
+})

package/src/components/molecules/SelectField/SelectDrawerField.tsx

@@ -0,0 +1,245 @@
+import React from "react"
+import { Pressable, useWindowDimensions, View, ViewProps } from "react-native"
+import styled from "@emotion/native"
+import { Cancel, Search } from "@butternutbox/pawprint-icons/core"
+import { Icon } from "../../atoms/Icon"
+import { InputField } from "../../atoms/Input/InputField"
+import type { InputState } from "../../atoms/Input/InputField"
+import { InputLabel } from "../../atoms/Input/InputLabel"
+import { InputDescription } from "../../atoms/Input/InputDescription"
+import { InputError } from "../../atoms/Input/InputError"
+import { parseTokenValue } from "../../../utils"
+import { Drawer } from "../Drawer"
+import { SelectFieldList } from "./SelectFieldList"
+import { drawerListMaxHeight, labelFor, useSelectOptions } from "./core"
+import type { SelectFieldOptionData, SelectOptionsResolver } from "./core"
+
+type SelectDrawerFieldOwnProps = {
+  options: SelectFieldOptionData[]
+  label?: string
+  description?: string
+  error?: string
+  state?: InputState
+  optionalText?: string
+  placeholder?: string
+  leadingIcon?: React.ReactNode
+  drawerTitle?: string
+  searchable?: boolean
+  searchPlaceholder?: string
+  noResultsText?: string
+  errorText?: string
+  onSearchQuery?: SelectOptionsResolver
+  debounceMs?: number
+  minQueryLength?: number
+  searchHintText?: string
+  clearAccessibilityLabel?: string
+  listMaxHeight?: number
+  disabled?: boolean
+  value?: string | null
+  defaultValue?: string | null
+  onValueChange?: (value: string | null) => void
+}
+
+export type SelectDrawerFieldProps = SelectDrawerFieldOwnProps &
+  Omit<ViewProps, keyof SelectDrawerFieldOwnProps>
+
+const StyledRoot = styled(View)(({ theme }) => ({
+  gap: parseTokenValue(theme.tokens.components.inputs.spacing.gap)
+}))
+
+const StyledSearchRow = styled(View)(({ theme }) => {
+  const { colour } = theme.tokens.semantics
+
+  return {
+    backgroundColor: colour.background.container.default,
+    paddingBottom: parseTokenValue(theme.tokens.components.inputs.spacing.gap)
+  }
+})
+
+export const SelectDrawerField = React.forwardRef<View, SelectDrawerFieldProps>(
+  (
+    {
+      options,
+      label,
+      description,
+      error,
+      state = "default",
+      optionalText,
+      placeholder,
+      leadingIcon,
+      drawerTitle,
+      searchable = true,
+      searchPlaceholder = "Search",
+      noResultsText = "No results found",
+      errorText = "Something went wrong",
+      onSearchQuery,
+      debounceMs = 300,
+      minQueryLength = 1,
+      searchHintText = "Type to search",
+      clearAccessibilityLabel = "Clear selection",
+      listMaxHeight,
+      disabled = false,
+      value,
+      defaultValue,
+      onValueChange,
+      ...rest
+    },
+    ref
+  ) => {
+    const { height: windowHeight } = useWindowDimensions()
+    const isControlled = value !== undefined
+    const [internalValue, setInternalValue] = React.useState<string | null>(
+      defaultValue ?? null
+    )
+    const selectedValue = isControlled ? value : internalValue
+
+    const [isOpen, setIsOpen] = React.useState(false)
+    const [searchQuery, setSearchQuery] = React.useState("")
+
+    const [lastSelected, setLastSelected] =
+      React.useState<SelectFieldOptionData | null>(null)
+
+    const selectedLabel =
+      labelFor(options, selectedValue) ||
+      (lastSelected && lastSelected.value === selectedValue
+        ? lastSelected.label
+        : "")
+
+    const optionsState = useSelectOptions({
+      options,
+      query: searchQuery,
+      onSearchQuery,
+      debounceMs,
+      minQueryLength,
+      enabled: searchable
+    })
+
+    const commitValue = (nextValue: string | null) => {
+      if (!isControlled) setInternalValue(nextValue)
+      if (nextValue !== selectedValue) onValueChange?.(nextValue)
+    }
+
+    const handleOpenChange = (open: boolean) => {
+      setIsOpen(open)
+      if (!open) setSearchQuery("")
+    }
+
+    const handleSelect = (option: SelectFieldOptionData) => {
+      setLastSelected(option)
+      commitValue(option.value)
+      handleOpenChange(false)
+    }
+
+    const handleClear = () => {
+      setLastSelected(null)
+      commitValue(null)
+    }
+
+    const bodyMaxHeight = drawerListMaxHeight(windowHeight, listMaxHeight)
+
+    const fieldState: InputState = error ? "error" : state
+
+    const clearAction =
+      !disabled && selectedLabel.length > 0 ? (
+        <Pressable
+          onPress={handleClear}
+          accessibilityRole="button"
+          accessibilityLabel={clearAccessibilityLabel}
+          hitSlop={8}
+        >
+          <Icon icon={Cancel} size="md" />
+        </Pressable>
+      ) : undefined
+
+    const searchClearAction =
+      searchQuery.length > 0 ? (
+        <Pressable
+          onPress={() => setSearchQuery("")}
+          accessibilityRole="button"
+          accessibilityLabel="Clear search"
+          hitSlop={8}
+        >
+          <Icon icon={Cancel} size="md" />
+        </Pressable>
+      ) : undefined
+
+    return (
+      <StyledRoot ref={ref} {...rest}>
+        {label && (
+          <InputLabel optionalText={optionalText} state={fieldState}>
+            {label}
+          </InputLabel>
+        )}
+        <InputField
+          value={selectedLabel}
+          placeholder={placeholder}
+          editable={false}
+          onPress={disabled ? undefined : () => setIsOpen(true)}
+          state={fieldState}
+          hideStateIcons={Boolean(clearAction)}
+          leadingIcon={leadingIcon}
+          actionIcon={clearAction}
+          accessibilityRole="combobox"
+          accessibilityState={{ disabled, expanded: isOpen }}
+        />
+        {description && (
+          <InputDescription state={fieldState}>{description}</InputDescription>
+        )}
+        {error && <InputError>{error}</InputError>}
+
+        <Drawer.Root open={isOpen} onOpenChange={handleOpenChange}>
+          <Drawer.Portal>
+            <Drawer.Overlay />
+            <Drawer.Content>
+              <Drawer.Header>
+                <Drawer.Title>{drawerTitle ?? label ?? "Select"}</Drawer.Title>
+                <Drawer.Close />
+              </Drawer.Header>
+              {/* The host screen's outermost ScrollView must also set
+                  `keyboardShouldPersistTaps`. Responder capture follows the
+                  React tree root-downwards, so an outer ScrollView left at the
+                  default "never" swallows taps on these rows while the search
+                  input holds focus — and a Modal does not isolate its contents
+                  from it, because the tree is unchanged. */}
+              <Drawer.Body
+                style={{ maxHeight: bodyMaxHeight }}
+                keyboardShouldPersistTaps="always"
+                stickyHeaderIndices={searchable ? [0] : undefined}
+              >
+                {searchable ? (
+                  <StyledSearchRow>
+                    <InputField
+                      value={searchQuery}
+                      onChangeText={setSearchQuery}
+                      placeholder={searchPlaceholder}
+                      leadingIcon={<Icon icon={Search} size="md" />}
+                      actionIcon={searchClearAction}
+                      autoFocus
+                      selectTextOnFocus
+                      autoCorrect={false}
+                      autoCapitalize="none"
+                      returnKeyType="search"
+                      accessibilityLabel={searchPlaceholder}
+                    />
+                  </StyledSearchRow>
+                ) : null}
+                <View>
+                  <SelectFieldList
+                    state={optionsState}
+                    selectedValue={selectedValue}
+                    onSelect={handleSelect}
+                    noResultsText={noResultsText}
+                    errorText={errorText}
+                    searchHintText={searchHintText}
+                  />
+                </View>
+              </Drawer.Body>
+            </Drawer.Content>
+          </Drawer.Portal>
+        </Drawer.Root>
+      </StyledRoot>
+    )
+  }
+)
+
+SelectDrawerField.displayName = "SelectDrawerField"