@butternutbox/pawprint-native 1.6.3 → 2.0.0

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

@@ -1,57 +1,38 @@
 import React from "react"
-import { View, ViewProps, TextInput, Keyboard, Pressable } from "react-native"
+import {
+  Keyboard,
+  Pressable,
+  TextInput,
+  useWindowDimensions,
+  View,
+  ViewProps
+} from "react-native"
 import styled from "@emotion/native"
-import * as SelectPrimitive from "@rn-primitives/select"
-import type { Option } from "@rn-primitives/select"
+import { Portal } from "@rn-primitives/portal"
+import { useTheme } from "@emotion/react"
+import { Cancel } from "@butternutbox/pawprint-icons/core"
+import { Icon } from "../../atoms/Icon"
+import { InputField } from "../../atoms/Input/InputField"
 import type { InputState } from "../../atoms/Input/InputField"
-import { InputText } from "../../atoms/Input/InputField"
-import { InputError } from "../../atoms/Input/InputError"
 import { InputLabel } from "../../atoms/Input/InputLabel"
 import { InputDescription } from "../../atoms/Input/InputDescription"
-import { Typography } from "../../atoms/Typography"
-import { Icon } from "../../atoms/Icon"
-import { Spinner } from "../../atoms/Spinner"
-import { Search, Cancel } from "@butternutbox/pawprint-icons/core"
-import { SelectFieldTrigger } from "./SelectFieldTrigger"
-import { SelectFieldValue } from "./SelectFieldValue"
-import { SelectFieldContent } from "./SelectFieldContent"
-import { SelectFieldItem } from "./SelectFieldItem"
-
-const parseTokenValue = (value: string): number => parseFloat(value)
-
-const StyledStatusRow = styled(View)(({ theme }) => {
-  const { dropdown } = theme.tokens.components.dropdownList
-
-  return {
-    paddingVertical: parseTokenValue(dropdown.listItem.spacing.verticalPadding),
-    paddingHorizontal: parseTokenValue(
-      dropdown.listItem.spacing.horiztonalPadding
-    ),
-    alignItems: "center"
-  }
-})
-
-const StyledRoot = styled(View)(({ theme }) => {
-  const { spacing } = theme.tokens.components.inputs
-
-  return {
-    gap: parseTokenValue(spacing.gap)
-  }
-})
-
-/**
- * A single item returned by an async `onSearchQuery` resolver. Mirrors the
- * props of `SelectField.Item` so results render identically to static items.
- */
-export type SelectFieldSearchResult = {
-  value: string
-  label: string
-  leadingIcon?: React.ReactNode
-  hintText?: string
-  disabled?: boolean
-}
-
-type SelectFieldOwnProps<Value = Option | string> = {
+import { InputError } from "../../atoms/Input/InputError"
+import { parseTokenValue } from "../../../utils"
+import { SelectFieldDropdown } from "./SelectFieldDropdown"
+import type {
+  SelectFieldAnchorRect,
+  SelectFieldPlacement
+} from "./SelectFieldDropdown"
+import { SelectFieldList } from "./SelectFieldList"
+import { useSelectOptions } from "./core"
+import type { SelectFieldOptionData, SelectOptionsResolver } from "./core"
+
+const MIN_DROPDOWN_HEIGHT = 80
+
+export type { SelectFieldOptionData }
+
+type SelectFieldOwnProps = {
+  options: SelectFieldOptionData[]
   label?: string
   description?: string
   error?: string
@@ -59,555 +40,304 @@ type SelectFieldOwnProps<Value = Option | string> = {
   optionalText?: string
   placeholder?: string
   leadingIcon?: React.ReactNode
-  value?: Value | null
-  defaultValue?: Value | null
-  onValueChange?: (value: Value | null) => void
-  children?: React.ReactNode
-  disabled?: boolean
-  searchable?: boolean
-  searchPlaceholder?: string
   noResultsText?: string
-  onSearchQuery?: (query: string) => Promise<SelectFieldSearchResult[]>
-  debounceMs?: number
   errorText?: string
+  onSearchQuery?: SelectOptionsResolver
+  debounceMs?: number
+  minQueryLength?: number
+  searchHintText?: string
+  clearAccessibilityLabel?: string
+  disabled?: boolean
+  value?: string | null
+  defaultValue?: string | null
+  onValueChange?: (value: string | null) => void
 }
 
-export type SelectFieldProps<Value = Option> = SelectFieldOwnProps<Value> &
-  Omit<ViewProps, keyof SelectFieldOwnProps<Value>>
-
-type SelectFieldAnchorProps = {
-  triggerRef: React.RefObject<View | null>
-  enabled: boolean
-}
-
-type TriggerPosition = NonNullable<
-  ReturnType<typeof SelectPrimitive.useRootContext>["triggerPosition"]
->
-
-const isSamePosition = (a: TriggerPosition | null, b: TriggerPosition | null) =>
-  a !== null &&
-  b !== null &&
-  a.width === b.width &&
-  a.height === b.height &&
-  a.pageX === b.pageX &&
-  a.pageY === b.pageY
-
-function SelectFieldAnchor({ triggerRef, enabled }: SelectFieldAnchorProps) {
-  const { triggerPosition, setTriggerPosition } =
-    SelectPrimitive.useRootContext()
-  const anchoredRef = React.useRef<TriggerPosition | null>(null)
-
-  React.useEffect(() => {
-    anchoredRef.current = triggerPosition ?? null
-  }, [triggerPosition])
-
-  React.useEffect(() => {
-    if (!enabled) return
-
-    let frame: number
-    let previous: TriggerPosition | null = null
-
-    const track = () => {
-      triggerRef.current?.measure((_x, _y, width, height, pageX, pageY) => {
-        const measured = { width, height, pageX, pageY }
-        const settled = isSamePosition(measured, previous)
-        if (settled && !isSamePosition(measured, anchoredRef.current)) {
-          anchoredRef.current = measured
-          setTriggerPosition(measured)
-        }
-        previous = measured
-      })
-      frame = requestAnimationFrame(track)
-    }
-
-    frame = requestAnimationFrame(track)
+export type SelectFieldProps = SelectFieldOwnProps &
+  Omit<ViewProps, keyof SelectFieldOwnProps>
 
-    return () => cancelAnimationFrame(frame)
-  }, [enabled, setTriggerPosition, triggerRef])
+const StyledRoot = styled(View)(({ theme }) => ({
+  gap: parseTokenValue(theme.tokens.components.inputs.spacing.gap)
+}))
 
-  return null
-}
+const StyledAnchor = styled(View)({})
 
-/**
- * Select field component for choosing a value from a dropdown list.
- * Built on @rn-primitives/select with design system styling.
- * Supports a simple props API, compound component API, and useSelectField hook for state management.
- *
- * **Simple Props API:**
- * @example
- * ```tsx
- * <SelectField
- *   label="Country"
- *   placeholder="Select a country"
- *   description="Choose your country"
- * >
- *   <SelectField.Item value="uk">United Kingdom</SelectField.Item>
- *   <SelectField.Item value="us">United States</SelectField.Item>
- *   <SelectField.Item value="ca">Canada</SelectField.Item>
- * </SelectField>
- * ```
- *
- * **With useSelectField Hook (Recommended):**
- * @example
- * ```tsx
- * const selectProps = useSelectField({
- *   validationRule: {
- *     test: (value) => value !== null,
- *     message: "Please select an option"
- *   }
- * })
- *
- * <SelectField
- *   {...selectProps}
- *   label="Category"
- *   placeholder="Select a category"
- * >
- *   <SelectField.Item value="food">Food</SelectField.Item>
- *   <SelectField.Item value="toys">Toys</SelectField.Item>
- * </SelectField>
- * ```
- *
- * **Searchable (local filtering):**
- * @example
- * ```tsx
- * <SelectField
- *   label="Country"
- *   placeholder="Select a country"
- *   searchable
- *   searchPlaceholder="Search countries..."
- *   noResultsText="No countries found"
- * >
- *   <SelectField.Item value="uk">United Kingdom</SelectField.Item>
- *   <SelectField.Item value="us">United States</SelectField.Item>
- * </SelectField>
- * ```
- *
- * **Searchable (async query):**
- * Pass `onSearchQuery` alongside `searchable` to fetch items as the user types.
- * The query is debounced, and the component renders a loading spinner while it
- * runs, `errorText` if it rejects, and `noResultsText` if it resolves empty.
- * Any `children` are shown as the default list before the user types.
- * @example
- * ```tsx
- * <SelectField
- *   label="Breed"
- *   placeholder="Select a breed"
- *   searchable
- *   searchPlaceholder="Search breeds..."
- *   onSearchQuery={async (query) => {
- *     const breeds = await api.searchBreeds(query)
- *     return breeds.map((breed) => ({ value: breed.id, label: breed.name }))
- *   }}
- * />
- * ```
- *
- * **Compound Component API:**
- * @example
- * ```tsx
- * <SelectField.Root>
- *   <SelectField.Label optionalText="(optional)">Country</SelectField.Label>
- *   <SelectField.Trigger>
- *     <SelectField.Value placeholder="Select a country" />
- *   </SelectField.Trigger>
- *   <SelectField.Content>
- *     <SelectField.Item value="uk">United Kingdom</SelectField.Item>
- *     <SelectField.Item value="us">United States</SelectField.Item>
- *   </SelectField.Content>
- *   <SelectField.Description>Choose your country</SelectField.Description>
- *   <SelectField.Error>Country is required</SelectField.Error>
- * </SelectField.Root>
- * ```
- *
- * @param {string} [label] - Label text (props API)
- * @param {string} [description] - Help text below select (props API)
- * @param {string} [error] - Error message (props API)
- * @param {InputState} [state] - Visual state (default, error, success)
- * @param {string} [optionalText] - Optional text to display next to label (props API)
- * @param {string} [placeholder] - Placeholder text when no value is selected
- * @param {React.ReactNode} [leadingIcon] - Icon to display before the trigger text
- * @param {Value | null} [value] - Controlled value
- * @param {Value | null} [defaultValue] - Default value for uncontrolled mode
- * @param {function} [onValueChange] - Value change handler
- * @param {boolean} [disabled] - Disables the select
- * @param {boolean} [searchable=false] - Enables inline search filtering of items
- * @param {string} [searchPlaceholder="Search..."] - Placeholder text for the search input
- * @param {string} [noResultsText="No results found"] - Text shown when search returns no matches
- * @param {function} [onSearchQuery] - Async resolver run as the user types; its returned items replace the list. Enables query mode (local filtering is skipped)
- * @param {number} [debounceMs=300] - Delay before onSearchQuery fires after the last keystroke
- * @param {string} [errorText="Something went wrong"] - Text shown when onSearchQuery rejects
- */
-const SelectFieldRoot = React.forwardRef<View, SelectFieldProps>(
+export const SelectField = React.forwardRef<View, SelectFieldProps>(
   (
     {
+      options,
       label,
-      placeholder,
       description,
       error,
       state = "default",
       optionalText,
+      placeholder,
       leadingIcon,
-      children,
-      value,
-      defaultValue,
-      onValueChange,
-      disabled,
-      searchable = false,
-      searchPlaceholder,
       noResultsText = "No results found",
+      errorText = "Something went wrong",
       onSearchQuery,
       debounceMs = 300,
-      errorText = "Something went wrong",
+      minQueryLength = 1,
+      searchHintText = "Type to search",
+      clearAccessibilityLabel = "Clear selection",
+      disabled = false,
+      value,
+      defaultValue,
+      onValueChange,
       ...rest
     },
     ref
   ) => {
-    const [isOpen, setIsOpen] = React.useState(false)
-    const [showContent, setShowContent] = React.useState(false)
-    const [internalValue, setInternalValue] = React.useState(
+    const theme = useTheme()
+    const { height: windowHeight } = useWindowDimensions()
+
+    const maxDropdownHeight = parseTokenValue(
+      theme.tokens.components.dropdownList.dropdown.list.size.maxHeight
+    )
+
+    const isControlled = value !== undefined
+    const [internalValue, setInternalValue] = React.useState<string | null>(
       defaultValue ?? null
     )
-    const [searchQuery, setSearchQuery] = React.useState("")
-    const [clearKey, setClearKey] = React.useState(0)
-    const searchInputRef = React.useRef<TextInput>(null)
-    const triggerViewRef = React.useRef<View>(null)
-
-    const isQueryMode = searchable && typeof onSearchQuery === "function"
-
-    const [searchResults, setSearchResults] = React.useState<
-      SelectFieldSearchResult[]
-    >([])
-    const [isSearching, setIsSearching] = React.useState(false)
-    const [searchFailed, setSearchFailed] = React.useState(false)
-    const searchRequestIdRef = React.useRef(0)
-
-    // Keep the latest resolver in a ref so an inline `onSearchQuery` (new
-    // identity every render) does not restart the debounce on unrelated
-    // re-renders. The effect below keys on the query text, not the function.
-    const onSearchQueryRef = React.useRef(onSearchQuery)
-    React.useEffect(() => {
-      onSearchQueryRef.current = onSearchQuery
+    const selectedValue = isControlled ? value : internalValue
+
+    const [inputText, setInputText] = React.useState(() => {
+      const initialValue = isControlled ? value : (defaultValue ?? null)
+      return (
+        options.find((option) => option.value === initialValue)?.label ?? ""
+      )
     })
+    const [filterQuery, setFilterQuery] = React.useState("")
+    const [isFocused, setIsFocused] = React.useState(false)
+    const [keyboardHeight, setKeyboardHeight] = React.useState(0)
+    const [placement, setPlacement] = React.useState<{
+      direction: SelectFieldPlacement
+      maxHeight: number
+    }>({ direction: "below", maxHeight: maxDropdownHeight })
+    const [anchorRect, setAnchorRect] =
+      React.useState<SelectFieldAnchorRect | null>(null)
+    const portalName = React.useId()
+
+    const inputRef = React.useRef<TextInput>(null)
+    const anchorRef = React.useRef<View>(null)
+    const selectionCountRef = React.useRef(0)
 
     React.useEffect(() => {
-      if (!isQueryMode) return
-
-      // Empty query: drop any in-flight result and fall back to `children`.
-      if (searchQuery.length === 0) {
-        searchRequestIdRef.current += 1
-        setSearchResults([])
-        setIsSearching(false)
-        setSearchFailed(false)
-        return
+      const showSubscription = Keyboard.addListener(
+        "keyboardDidShow",
+        (event) => setKeyboardHeight(event.endCoordinates.height)
+      )
+      const hideSubscription = Keyboard.addListener("keyboardDidHide", () =>
+        setKeyboardHeight(0)
+      )
+
+      return () => {
+        showSubscription.remove()
+        hideSubscription.remove()
       }
+    }, [])
+
+    const measurePlacement = React.useCallback(() => {
+      anchorRef.current?.measureInWindow(
+        (anchorX, anchorY, anchorWidth, anchorHeight) => {
+          setAnchorRect((current) =>
+            current &&
+            current.x === anchorX &&
+            current.y === anchorY &&
+            current.width === anchorWidth &&
+            current.height === anchorHeight
+              ? current
+              : {
+                  x: anchorX,
+                  y: anchorY,
+                  width: anchorWidth,
+                  height: anchorHeight
+                }
+          )
+
+          const spaceBelow =
+            windowHeight - keyboardHeight - (anchorY + anchorHeight)
+          const spaceAbove = anchorY
+          const preferAbove =
+            spaceBelow < maxDropdownHeight && spaceAbove > spaceBelow
+          const availableSpace = preferAbove ? spaceAbove : spaceBelow
+
+          const direction = preferAbove ? "above" : "below"
+          const maxHeight = Math.max(
+            MIN_DROPDOWN_HEIGHT,
+            Math.min(maxDropdownHeight, availableSpace)
+          )
+
+          setPlacement((current) =>
+            current.direction === direction && current.maxHeight === maxHeight
+              ? current
+              : { direction, maxHeight }
+          )
+        }
+      )
+    }, [windowHeight, keyboardHeight, maxDropdownHeight])
 
-      const requestId = searchRequestIdRef.current + 1
-      searchRequestIdRef.current = requestId
-      setIsSearching(true)
-      setSearchFailed(false)
-
-      const debounceTimer = setTimeout(() => {
-        const runQuery = onSearchQueryRef.current
-        if (!runQuery) return
-
-        Promise.resolve(runQuery(searchQuery))
-          .then((items) => {
-            // Ignore a response that a newer keystroke has superseded.
-            if (searchRequestIdRef.current !== requestId) return
-            setSearchResults(items)
-            setIsSearching(false)
-          })
-          .catch(() => {
-            if (searchRequestIdRef.current !== requestId) return
-            setSearchResults([])
-            setSearchFailed(true)
-            setIsSearching(false)
-          })
-      }, debounceMs)
-
-      return () => clearTimeout(debounceTimer)
-    }, [searchQuery, isQueryMode, debounceMs])
+    React.useEffect(() => {
+      if (isFocused) measurePlacement()
+    }, [isFocused, measurePlacement])
 
     React.useEffect(() => {
-      if (!isOpen) {
-        setShowContent(false)
-        return
-      }
-      if (!searchable) {
-        setShowContent(true)
+      if (!isControlled || isFocused) return
+      if (value === null || value === undefined) {
+        setInputText("")
         return
       }
+      const selectedOption = options.find((option) => option.value === value)
+      if (selectedOption) setInputText(selectedOption.label)
+    }, [isControlled, isFocused, value, options])
 
-      const openTimer = setTimeout(() => {
-        setShowContent(true)
-        searchInputRef.current?.focus()
-      }, 0)
+    const optionsState = useSelectOptions({
+      options,
+      query: filterQuery,
+      onSearchQuery,
+      debounceMs,
+      minQueryLength,
+      enabled: true
+    })
 
-      // The Portal cascade (SelectPrimitive.Content onLayout → setContentLayout
-      // → Root context re-render via Zustand) blurs the input after content
-      // mounts. Re-focus once the keyboard is fully shown
-      const keyboardSub = Keyboard.addListener("keyboardDidShow", () => {
-        setTimeout(() => searchInputRef.current?.focus(), 0)
-      })
-
-      // Hardware keyboard: keyboardDidShow never fires, so re-focus after a
-      // short delay to recover from the Portal cascade blur.
-      const hardwareKeyboardTimer = setTimeout(
-        () => searchInputRef.current?.focus(),
-        100
-      )
+    const commitValue = (nextValue: string | null) => {
+      if (!isControlled) setInternalValue(nextValue)
+      if (nextValue !== selectedValue) onValueChange?.(nextValue)
+    }
 
-      return () => {
-        clearTimeout(openTimer)
-        clearTimeout(hardwareKeyboardTimer)
-        keyboardSub.remove()
-      }
-      // `searchQuery` and `isSearching` are dependencies so this focus recovery
-      // re-runs while the user types, not just on open. Each keystroke changes
-      // the rendered list (local filtering re-filters it; a query mounts it on
-      // the first keystroke and later swaps in results), and every such change
-      // re-lays-out the dropdown, which triggers the same Portal-cascade blur.
-      // Re-running here re-focuses the input so typing is not interrupted.
-    }, [isOpen, searchable, isSearching, searchQuery])
-
-    const isOpenRef = React.useRef(isOpen)
-    React.useEffect(() => {
-      isOpenRef.current = isOpen
-    })
+    const handleFocus = () => {
+      setIsFocused(true)
+      setFilterQuery("")
+    }
+
+    const handleBlur = () => {
+      const selectionsSeen = selectionCountRef.current
 
-    const handleSearchBlur = () => {
       setTimeout(() => {
-        if (isOpenRef.current) searchInputRef.current?.focus()
-      }, 50)
-    }
+        if (selectionCountRef.current !== selectionsSeen) return
 
-    const isCompound = React.Children.toArray(children).some(
-      (child) =>
-        React.isValidElement(child) && child.type === SelectFieldContent
-    )
+        setIsFocused(false)
 
-    if (isCompound) {
-      return (
-        <StyledRoot ref={ref} {...rest}>
-          {children}
-        </StyledRoot>
-      )
+        const typedLabel = inputText.trim().toLowerCase()
+        const exactMatch = options.find(
+          (option) => option.label.toLowerCase() === typedLabel
+        )
+        commitValue(exactMatch?.value ?? null)
+      }, 0)
     }
 
-    const handleValueChange = (newValue: Option) => {
-      const valueToSet = newValue ?? null
-      setInternalValue(valueToSet)
-      onValueChange?.(valueToSet)
+    const handleChangeText = (text: string) => {
+      setInputText(text)
+      setFilterQuery(text)
     }
 
-    const handleOpenChange = (open: boolean) => {
-      setIsOpen(open)
-      if (!open) setSearchQuery("")
+    const handleSelect = (option: SelectFieldOptionData) => {
+      selectionCountRef.current += 1
+      setInputText(option.label)
+      setFilterQuery("")
+      setIsFocused(false)
+      commitValue(option.value)
+      Keyboard.dismiss()
     }
 
-    const currentValue = value !== undefined ? value : internalValue
-
-    const allItems = React.Children.toArray(children)
-
-    // Local filter mode: filter the passed children by their label text.
-    // Skipped in query mode, where the resolver returns an already-filtered set.
-    const localFilteredItems =
-      searchable && !isQueryMode
-        ? allItems.filter((child) => {
-            if (!searchQuery) return true
-            if (React.isValidElement(child) && child.type === SelectFieldItem) {
-              const label = String(
-                (child.props as { children?: unknown }).children ?? ""
-              )
-              return label.toLowerCase().includes(searchQuery.toLowerCase())
-            }
-            return true
-          })
-        : allItems
-
-    // Query mode, once the user has typed: render the resolver's results.
-    // Before that, `children` act as the default list (via localFilteredItems).
-    const isQueryActive = isQueryMode && searchQuery.length > 0
-
-    const queryResultItems = searchResults.map((result) => (
-      <SelectFieldItem
-        key={String(result.value)}
-        value={result.value}
-        leadingIcon={result.leadingIcon}
-        hintText={result.hintText}
-        disabled={result.disabled}
-      >
-        {result.label}
-      </SelectFieldItem>
-    ))
-
-    const itemsToRender = isQueryActive ? queryResultItems : localFilteredItems
-
-    const hasNoResults = isQueryMode
-      ? isQueryActive &&
-        !isSearching &&
-        !searchFailed &&
-        searchResults.length === 0
-      : searchable && searchQuery.length > 0 && localFilteredItems.length === 0
-
-    // Only render the dropdown when it has something to show. An empty content
-    // subtree (query mode opened before the user types, with no default
-    // children) makes a Slot inside the underlying Select.Content resolve to
-    // nothing, which throws "React.Children.only expected a single child".
-    const hasContentToShow =
-      isSearching || searchFailed || hasNoResults || itemsToRender.length > 0
-
-    const searchActionIcon = (() => {
-      if (!searchable) return undefined
-
-      const showClear =
-        (isOpen && searchQuery.length > 0) || (!isOpen && Boolean(currentValue))
-      if (!showClear) return <Icon icon={Search} size="md" />
+    const handleClear = () => {
+      setInputText("")
+      setFilterQuery("")
+      commitValue(null)
+      inputRef.current?.focus()
+    }
 
-      return (
+    const fieldState: InputState = error ? "error" : state
+    const isOpen = isFocused && !disabled
+    const clearAction =
+      !disabled && inputText.length > 0 ? (
         <Pressable
-          onPress={
-            isOpen
-              ? () => {
-                  setSearchQuery("")
-                  searchInputRef.current?.focus()
-                }
-              : () => {
-                  setInternalValue(null)
-                  onValueChange?.(null)
-                  setClearKey((k) => k + 1)
-                }
-          }
-          accessibilityLabel={isOpen ? "Clear search" : "Clear selection"}
+          onPress={handleClear}
           accessibilityRole="button"
+          accessibilityLabel={clearAccessibilityLabel}
           hitSlop={8}
         >
           <Icon icon={Cancel} size="md" />
         </Pressable>
+      ) : undefined
+
+    const handleSelectRef = React.useRef(handleSelect)
+    handleSelectRef.current = handleSelect
+    const onOptionPress = React.useCallback(
+      (option: SelectFieldOptionData) => handleSelectRef.current(option),
+      []
+    )
+
+    const dropdown = React.useMemo(() => {
+      if (!isOpen || !anchorRect) return null
+
+      return (
+        <SelectFieldDropdown
+          anchor={anchorRect}
+          placement={placement.direction}
+          maxHeight={placement.maxHeight}
+          screenHeight={windowHeight}
+          accessibilityLiveRegion="polite"
+        >
+          <SelectFieldList
+            state={optionsState}
+            selectedValue={selectedValue}
+            onSelect={onOptionPress}
+            noResultsText={noResultsText}
+            errorText={errorText}
+            searchHintText={searchHintText}
+          />
+        </SelectFieldDropdown>
       )
-    })()
+    }, [
+      isOpen,
+      anchorRect,
+      placement,
+      windowHeight,
+      optionsState,
+      noResultsText,
+      errorText,
+      searchHintText,
+      selectedValue,
+      onOptionPress
+    ])
 
     return (
-      <SelectPrimitive.Root
-        key={clearKey}
-        value={currentValue ?? undefined}
-        onValueChange={handleValueChange}
-        disabled={disabled}
-        onOpenChange={handleOpenChange}
-      >
-        <StyledRoot ref={ref} {...rest}>
-          {label && (
-            <InputLabel optionalText={optionalText} state={state}>
-              {label}
-            </InputLabel>
-          )}
-          <SelectFieldTrigger
-            ref={triggerViewRef}
-            state={state}
+      <StyledRoot ref={ref} {...rest}>
+        {label && (
+          <InputLabel optionalText={optionalText} state={fieldState}>
+            {label}
+          </InputLabel>
+        )}
+        <StyledAnchor ref={anchorRef}>
+          <InputField
+            ref={inputRef}
+            value={inputText}
+            onChangeText={handleChangeText}
+            onFocus={handleFocus}
+            onBlur={handleBlur}
+            placeholder={placeholder}
+            editable={!disabled}
+            state={fieldState}
+            hideStateIcons={Boolean(clearAction)}
             leadingIcon={leadingIcon}
-            isOpen={isOpen}
-            isSearching={searchable && isOpen}
-            actionIcon={searchActionIcon}
-          >
-            {searchable && isOpen ? (
-              <InputText
-                ref={searchInputRef}
-                value={searchQuery}
-                onChangeText={setSearchQuery}
-                onBlur={handleSearchBlur}
-                placeholder={searchPlaceholder ?? "Search..."}
-                returnKeyType="search"
-                clearButtonMode="never"
-                accessibilityLabel="Search options"
-              />
-            ) : (
-              <SelectFieldValue
-                placeholder={placeholder}
-                hasValue={Boolean(currentValue)}
-              />
-            )}
-          </SelectFieldTrigger>
-          {description && (
-            <InputDescription state={state}>{description}</InputDescription>
-          )}
-          {error && state === "error" && <InputError>{error}</InputError>}
-        </StyledRoot>
-        <SelectFieldAnchor
-          triggerRef={triggerViewRef}
-          enabled={searchable && isOpen}
-        />
-        {showContent && hasContentToShow && (
-          <SelectFieldContent>
-            {isSearching ? (
-              <StyledStatusRow>
-                <Spinner size="sm" />
-              </StyledStatusRow>
-            ) : searchFailed ? (
-              <StyledStatusRow>
-                <Typography size="sm">{errorText}</Typography>
-              </StyledStatusRow>
-            ) : (
-              <>
-                {itemsToRender.map((child) => {
-                  if (
-                    React.isValidElement(child) &&
-                    child.type === SelectFieldItem
-                  ) {
-                    const selectedValue =
-                      currentValue &&
-                      typeof currentValue === "object" &&
-                      "value" in currentValue
-                        ? (currentValue as { value: string }).value
-                        : currentValue
-
-                    const childProps = child.props as { value: string }
-                    return React.cloneElement(
-                      child as React.ReactElement<{
-                        value: string
-                        isSelected?: boolean
-                      }>,
-                      {
-                        isSelected: childProps.value === selectedValue
-                      }
-                    )
-                  }
-                  return child
-                })}
-                {hasNoResults && (
-                  <StyledStatusRow>
-                    <Typography size="sm">{noResultsText}</Typography>
-                  </StyledStatusRow>
-                )}
-              </>
-            )}
-          </SelectFieldContent>
+            actionIcon={clearAction}
+            selectTextOnFocus
+            autoCorrect={false}
+            autoCapitalize="none"
+            returnKeyType="done"
+            accessibilityRole="combobox"
+            accessibilityState={{ disabled, expanded: isOpen }}
+          />
+        </StyledAnchor>
+        {description && (
+          <InputDescription state={fieldState}>{description}</InputDescription>
         )}
-      </SelectPrimitive.Root>
+        {error && <InputError>{error}</InputError>}
+        {dropdown && <Portal name={portalName}>{dropdown}</Portal>}
+      </StyledRoot>
     )
   }
 )
 
-SelectFieldRoot.displayName = "SelectField"
-
-type SelectFieldComponent = React.ForwardRefExoticComponent<
-  SelectFieldProps<Option | string> & React.RefAttributes<View>
-> & {
-  Root: typeof StyledRoot
-  Label: typeof InputLabel
-  Trigger: typeof SelectFieldTrigger
-  Value: typeof SelectFieldValue
-  Content: typeof SelectFieldContent
-  Item: typeof SelectFieldItem
-  Description: typeof InputDescription
-  Error: typeof InputError
-}
-
-export const SelectField = Object.assign(SelectFieldRoot, {
-  Root: StyledRoot,
-  Label: InputLabel,
-  Trigger: SelectFieldTrigger,
-  Value: SelectFieldValue,
-  Content: SelectFieldContent,
-  Item: SelectFieldItem,
-  Description: InputDescription,
-  Error: InputError
-}) as SelectFieldComponent
+SelectField.displayName = "SelectField"