@butternutbox/pawprint-native 0.9.0 → 0.10.1

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

@@ -1,6 +1,5 @@
 import React, { useState } from "react"
 import { View, StyleSheet } from "react-native"
-import { PortalHost } from "@rn-primitives/portal"
 import { SelectField, useSelectField } from "."
 import { Typography } from "../../atoms/Typography"
 import { Icon } from "../../atoms/Icon"
@@ -8,10 +7,7 @@ import { Search, Settings, Lock, Info } from "@butternutbox/pawprint-icons/core"
 import type { Option } from "@rn-primitives/select"
 
 const StoryWrapper = ({ children }: { children: React.ReactNode }) => (
-  <>
-    {children}
-    <PortalHost />
-  </>
+  <>{children}</>
 )
 
 export default {
@@ -304,6 +300,115 @@ export const Controlled = () => {
   )
 }
 
+export const Searchable = () => (
+  <StoryWrapper>
+    <View style={styles.column}>
+      <View style={styles.section}>
+        <Typography size="sm" weight="semiBold" color="tertiary">
+          Searchable Select
+        </Typography>
+        <SelectField
+          label="Country"
+          placeholder="Select a country"
+          description="Type to filter countries"
+          searchable
+          searchPlaceholder="Search countries..."
+        >
+          <SelectField.Item value="au">Australia</SelectField.Item>
+          <SelectField.Item value="br">Brazil</SelectField.Item>
+          <SelectField.Item value="ca">Canada</SelectField.Item>
+          <SelectField.Item value="dk">Denmark</SelectField.Item>
+          <SelectField.Item value="eg">Egypt</SelectField.Item>
+          <SelectField.Item value="fr">France</SelectField.Item>
+          <SelectField.Item value="de">Germany</SelectField.Item>
+          <SelectField.Item value="in">India</SelectField.Item>
+          <SelectField.Item value="jp">Japan</SelectField.Item>
+          <SelectField.Item value="mx">Mexico</SelectField.Item>
+          <SelectField.Item value="nl">Netherlands</SelectField.Item>
+          <SelectField.Item value="nz">New Zealand</SelectField.Item>
+          <SelectField.Item value="no">Norway</SelectField.Item>
+          <SelectField.Item value="pl">Poland</SelectField.Item>
+          <SelectField.Item value="pt">Portugal</SelectField.Item>
+          <SelectField.Item value="es">Spain</SelectField.Item>
+          <SelectField.Item value="se">Sweden</SelectField.Item>
+          <SelectField.Item value="ch">Switzerland</SelectField.Item>
+          <SelectField.Item value="uk">United Kingdom</SelectField.Item>
+          <SelectField.Item value="us">United States</SelectField.Item>
+        </SelectField>
+      </View>
+    </View>
+  </StoryWrapper>
+)
+
+export const SearchableControlled = () => {
+  const [value, setValue] = useState<Option | string | null>(null)
+
+  const displayValue = (() => {
+    if (!value) return "(none)"
+    if (typeof value === "object" && "value" in value) return value.value
+    return String(value)
+  })()
+
+  return (
+    <StoryWrapper>
+      <View style={styles.column}>
+        <View style={styles.section}>
+          <Typography size="sm" weight="semiBold" color="tertiary">
+            Controlled value: {displayValue}
+          </Typography>
+          <SelectField
+            label="Country"
+            placeholder="Select a country"
+            description="Select a country — the clear button resets the controlled value"
+            searchable
+            searchPlaceholder="Search countries..."
+            value={value}
+            onValueChange={(newValue) => setValue(newValue)}
+          >
+            <SelectField.Item value="au">Australia</SelectField.Item>
+            <SelectField.Item value="ca">Canada</SelectField.Item>
+            <SelectField.Item value="fr">France</SelectField.Item>
+            <SelectField.Item value="de">Germany</SelectField.Item>
+            <SelectField.Item value="jp">Japan</SelectField.Item>
+            <SelectField.Item value="uk">United Kingdom</SelectField.Item>
+            <SelectField.Item value="us">United States</SelectField.Item>
+          </SelectField>
+        </View>
+      </View>
+    </StoryWrapper>
+  )
+}
+
+export const SearchableDefaultPlaceholder = () => (
+  <StoryWrapper>
+    <View style={styles.column}>
+      <View style={styles.section}>
+        <Typography size="sm" weight="semiBold" color="tertiary">
+          Default Search Placeholder
+        </Typography>
+        <SelectField label="Pet breed" placeholder="Select a breed" searchable>
+          <SelectField.Item value="labrador">
+            Labrador Retriever
+          </SelectField.Item>
+          <SelectField.Item value="german-shepherd">
+            German Shepherd
+          </SelectField.Item>
+          <SelectField.Item value="golden-retriever">
+            Golden Retriever
+          </SelectField.Item>
+          <SelectField.Item value="bulldog">Bulldog</SelectField.Item>
+          <SelectField.Item value="poodle">Poodle</SelectField.Item>
+          <SelectField.Item value="beagle">Beagle</SelectField.Item>
+          <SelectField.Item value="rottweiler">Rottweiler</SelectField.Item>
+          <SelectField.Item value="yorkshire-terrier">
+            Yorkshire Terrier
+          </SelectField.Item>
+        </SelectField>
+      </View>
+    </View>
+  </StoryWrapper>
+)
+
 const styles = StyleSheet.create({
   container: {
     width: 320

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

@@ -1,6 +1,6 @@
 import React from "react"
 import { View } from "react-native"
-import { screen } from "@testing-library/react"
+import { screen, fireEvent, act } from "@testing-library/react"
 import { describe, it, expect, vi } from "vitest"
 import { renderWithTheme } from "../../../test-utils"
 import { SelectField } from "./SelectField"
@@ -194,7 +194,7 @@ describe("SelectField", () => {
   })
 
   describe("uncontrolled mode with defaultValue", () => {
-    it("uses defaultValue as initial value", () => {
+    it("renders with defaultValue without crashing and shows items when opened", () => {
       renderWithTheme(
         <SelectField
           label="Country"
@@ -206,11 +206,180 @@ describe("SelectField", () => {
         </SelectField>
       )
 
+      fireEvent.click(screen.getAllByRole("button")[0])
       expect(screen.getByText("United Kingdom")).toBeInTheDocument()
     })
   })
 
+  describe("when searchable", () => {
+    const openDropdown = () => {
+      fireEvent.click(screen.getAllByRole("button")[0])
+    }
+
+    const openDropdownWithContent = () => {
+      vi.useFakeTimers()
+      fireEvent.click(screen.getAllByRole("button")[0])
+      act(() => vi.advanceTimersByTime(500))
+      vi.useRealTimers()
+    }
+
+    it("shows search input in the trigger when dropdown is opened", () => {
+      renderWithTheme(
+        <SelectField label="Country" placeholder="Select a country" searchable>
+          <SelectField.Item value="uk">United Kingdom</SelectField.Item>
+          <SelectField.Item value="us">United States</SelectField.Item>
+        </SelectField>
+      )
+
+      expect(screen.queryByPlaceholderText("Search...")).not.toBeInTheDocument()
+      openDropdown()
+      expect(screen.getByPlaceholderText("Search...")).toBeInTheDocument()
+    })
+
+    it("does not show search input when not searchable", () => {
+      renderWithTheme(
+        <SelectField label="Country" placeholder="Select a country">
+          <SelectField.Item value="uk">United Kingdom</SelectField.Item>
+          <SelectField.Item value="us">United States</SelectField.Item>
+        </SelectField>
+      )
+
+      openDropdown()
+      expect(screen.queryByPlaceholderText("Search...")).not.toBeInTheDocument()
+    })
+
+    it("renders with a custom searchPlaceholder", () => {
+      renderWithTheme(
+        <SelectField
+          label="Country"
+          placeholder="Select a country"
+          searchable
+          searchPlaceholder="Find a country..."
+        >
+          <SelectField.Item value="uk">United Kingdom</SelectField.Item>
+        </SelectField>
+      )
+
+      openDropdown()
+      expect(
+        screen.getByPlaceholderText("Find a country...")
+      ).toBeInTheDocument()
+    })
+
+    it("filters items based on the search query", () => {
+      renderWithTheme(
+        <SelectField label="Country" placeholder="Select a country" searchable>
+          <SelectField.Item value="uk">United Kingdom</SelectField.Item>
+          <SelectField.Item value="us">United States</SelectField.Item>
+          <SelectField.Item value="ca">Canada</SelectField.Item>
+        </SelectField>
+      )
+
+      openDropdownWithContent()
+      fireEvent.change(screen.getByPlaceholderText("Search..."), {
+        target: { value: "united" }
+      })
+
+      expect(screen.getByText("United Kingdom")).toBeInTheDocument()
+      expect(screen.getByText("United States")).toBeInTheDocument()
+      expect(screen.queryByText("Canada")).not.toBeInTheDocument()
+    })
+
+    it("is case-insensitive when filtering", () => {
+      renderWithTheme(
+        <SelectField label="Country" placeholder="Select a country" searchable>
+          <SelectField.Item value="uk">United Kingdom</SelectField.Item>
+          <SelectField.Item value="ca">Canada</SelectField.Item>
+        </SelectField>
+      )
+
+      openDropdownWithContent()
+      fireEvent.change(screen.getByPlaceholderText("Search..."), {
+        target: { value: "CANADA" }
+      })
+
+      expect(screen.getByText("Canada")).toBeInTheDocument()
+      expect(screen.queryByText("United Kingdom")).not.toBeInTheDocument()
+    })
+
+    it("shows default 'No results found' when search matches no items", () => {
+      renderWithTheme(
+        <SelectField label="Country" placeholder="Select a country" searchable>
+          <SelectField.Item value="uk">United Kingdom</SelectField.Item>
+          <SelectField.Item value="us">United States</SelectField.Item>
+        </SelectField>
+      )
+
+      openDropdownWithContent()
+      fireEvent.change(screen.getByPlaceholderText("Search..."), {
+        target: { value: "xyz" }
+      })
+
+      expect(screen.getByText("No results found")).toBeInTheDocument()
+    })
+
+    it("shows custom noResultsText when provided", () => {
+      renderWithTheme(
+        <SelectField
+          label="Country"
+          placeholder="Select a country"
+          searchable
+          noResultsText="No countries match your search"
+        >
+          <SelectField.Item value="uk">United Kingdom</SelectField.Item>
+        </SelectField>
+      )
+
+      openDropdownWithContent()
+      fireEvent.change(screen.getByPlaceholderText("Search..."), {
+        target: { value: "xyz" }
+      })
+
+      expect(
+        screen.getByText("No countries match your search")
+      ).toBeInTheDocument()
+    })
+
+    it("shows all items when search query is cleared", () => {
+      renderWithTheme(
+        <SelectField label="Country" placeholder="Select a country" searchable>
+          <SelectField.Item value="uk">United Kingdom</SelectField.Item>
+          <SelectField.Item value="ca">Canada</SelectField.Item>
+        </SelectField>
+      )
+
+      openDropdownWithContent()
+      const input = screen.getByPlaceholderText("Search...")
+      fireEvent.change(input, { target: { value: "canada" } })
+      expect(screen.queryByText("United Kingdom")).not.toBeInTheDocument()
+
+      fireEvent.change(input, { target: { value: "" } })
+      expect(screen.getByText("United Kingdom")).toBeInTheDocument()
+      expect(screen.getByText("Canada")).toBeInTheDocument()
+    })
+
+    it("closes the dropdown and clears the search when closed", () => {
+      renderWithTheme(
+        <SelectField label="Country" placeholder="Select a country" searchable>
+          <SelectField.Item value="uk">United Kingdom</SelectField.Item>
+          <SelectField.Item value="ca">Canada</SelectField.Item>
+        </SelectField>
+      )
+
+      openDropdownWithContent()
+      fireEvent.change(screen.getByPlaceholderText("Search..."), {
+        target: { value: "canada" }
+      })
+      expect(screen.queryByText("United Kingdom")).not.toBeInTheDocument()
+
+      fireEvent.click(screen.getByTestId("select-overlay"))
+      expect(screen.queryByPlaceholderText("Search...")).not.toBeInTheDocument()
+    })
+  })
+
   describe("with items", () => {
+    const openDropdown = () => fireEvent.click(screen.getAllByRole("button")[0])
+
     it("renders items with leadingIcon", () => {
       renderWithTheme(
         <SelectField label="Country" placeholder="Select a country">
@@ -223,6 +392,7 @@ describe("SelectField", () => {
         </SelectField>
       )
 
+      openDropdown()
       expect(screen.getByTestId("icon")).toBeInTheDocument()
     })
 
@@ -235,6 +405,7 @@ describe("SelectField", () => {
         </SelectField>
       )
 
+      openDropdown()
       expect(screen.getByText("Europe")).toBeInTheDocument()
     })
 
@@ -247,6 +418,7 @@ describe("SelectField", () => {
         </SelectField>
       )
 
+      openDropdown()
       const item = screen.getByText("United Kingdom")
       expect(item).toBeInTheDocument()
     })

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

@@ -1,12 +1,16 @@
 import React from "react"
-import { View, ViewProps } from "react-native"
+import { View, ViewProps, TextInput, Keyboard, Pressable } from "react-native"
 import styled from "@emotion/native"
 import * as SelectPrimitive from "@rn-primitives/select"
 import type { Option } from "@rn-primitives/select"
 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 { Search, Cancel } from "@butternutbox/pawprint-icons/core"
 import { SelectFieldTrigger } from "./SelectFieldTrigger"
 import { SelectFieldValue } from "./SelectFieldValue"
 import { SelectFieldContent } from "./SelectFieldContent"
@@ -14,6 +18,18 @@ import { SelectFieldItem } from "./SelectFieldItem"
 
 const parseTokenValue = (value: string): number => parseFloat(value)
 
+const StyledNoResults = 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
 
@@ -35,6 +51,9 @@ type SelectFieldOwnProps<Value = Option | string> = {
   onValueChange?: (value: Value | null) => void
   children?: React.ReactNode
   disabled?: boolean
+  searchable?: boolean
+  searchPlaceholder?: string
+  noResultsText?: string
 }
 
 export type SelectFieldProps<Value = Option> = SelectFieldOwnProps<Value> &
@@ -79,6 +98,21 @@ export type SelectFieldProps<Value = Option> = SelectFieldOwnProps<Value> &
  * </SelectField>
  * ```
  *
+ * **Searchable:**
+ * @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>
+ * ```
+ *
  * **Compound Component API:**
  * @example
  * ```tsx
@@ -107,6 +141,9 @@ export type SelectFieldProps<Value = Option> = SelectFieldOwnProps<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
  */
 const SelectFieldRoot = React.forwardRef<View, SelectFieldProps>(
   (
@@ -123,14 +160,57 @@ const SelectFieldRoot = React.forwardRef<View, SelectFieldProps>(
       defaultValue,
       onValueChange,
       disabled,
+      searchable = false,
+      searchPlaceholder,
+      noResultsText = "No results found",
       ...rest
     },
     ref
   ) => {
     const [isOpen, setIsOpen] = React.useState(false)
+    const [showContent, setShowContent] = React.useState(false)
     const [internalValue, setInternalValue] = React.useState(
       defaultValue ?? null
     )
+    const [searchQuery, setSearchQuery] = React.useState("")
+    const [clearKey, setClearKey] = React.useState(0)
+    const searchInputRef = React.useRef<TextInput>(null)
+
+    React.useEffect(() => {
+      if (!isOpen) {
+        setShowContent(false)
+        return
+      }
+      if (!searchable) {
+        setShowContent(true)
+        return
+      }
+
+      const openTimer = setTimeout(() => {
+        setShowContent(true)
+        searchInputRef.current?.focus()
+      }, 0)
+
+      // 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
+      )
+
+      return () => {
+        clearTimeout(openTimer)
+        clearTimeout(hardwareKeyboardTimer)
+        keyboardSub.remove()
+      }
+    }, [isOpen, searchable])
 
     const isCompound = React.Children.toArray(children).some(
       (child) =>
@@ -151,15 +231,68 @@ const SelectFieldRoot = React.forwardRef<View, SelectFieldProps>(
       onValueChange?.(valueToSet)
     }
 
+    const handleOpenChange = (open: boolean) => {
+      setIsOpen(open)
+      if (!open) setSearchQuery("")
+    }
+
     const currentValue = value !== undefined ? value : internalValue
 
+    const allItems = React.Children.toArray(children)
+
+    const filteredItems = searchable
+      ? 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
+
+    const hasNoResults =
+      searchable && searchQuery.length > 0 && filteredItems.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" />
+
+      return (
+        <Pressable
+          onPress={
+            isOpen
+              ? () => {
+                  setSearchQuery("")
+                  searchInputRef.current?.focus()
+                }
+              : () => {
+                  setInternalValue(null)
+                  onValueChange?.(null)
+                  setClearKey((k) => k + 1)
+                }
+          }
+          accessibilityLabel={isOpen ? "Clear search" : "Clear selection"}
+          accessibilityRole="button"
+          hitSlop={8}
+        >
+          <Icon icon={Cancel} size="md" />
+        </Pressable>
+      )
+    })()
+
     return (
       <SelectPrimitive.Root
-        value={value ?? undefined}
-        defaultValue={defaultValue ?? undefined}
+        key={clearKey}
+        value={currentValue ?? undefined}
         onValueChange={handleValueChange}
         disabled={disabled}
-        onOpenChange={setIsOpen}
+        onOpenChange={handleOpenChange}
       >
         <StyledRoot ref={ref} {...rest}>
           {label && (
@@ -171,39 +304,62 @@ const SelectFieldRoot = React.forwardRef<View, SelectFieldProps>(
             state={state}
             leadingIcon={leadingIcon}
             isOpen={isOpen}
+            isSearching={searchable && isOpen}
+            actionIcon={searchActionIcon}
           >
-            <SelectFieldValue placeholder={placeholder} />
+            {searchable && isOpen ? (
+              <InputText
+                ref={searchInputRef}
+                value={searchQuery}
+                onChangeText={setSearchQuery}
+                placeholder={searchPlaceholder ?? "Search..."}
+                returnKeyType="search"
+                clearButtonMode="never"
+                accessibilityLabel="Search options"
+              />
+            ) : (
+              <SelectFieldValue placeholder={placeholder} />
+            )}
           </SelectFieldTrigger>
           {description && (
             <InputDescription state={state}>{description}</InputDescription>
           )}
           {error && state === "error" && <InputError>{error}</InputError>}
         </StyledRoot>
-        <SelectFieldContent>
-          {React.Children.map(children, (child) => {
-            if (React.isValidElement(child) && child.type === SelectFieldItem) {
-              // Extract value from object if needed
-              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
-          })}
-        </SelectFieldContent>
+        {showContent && (
+          <SelectFieldContent>
+            {filteredItems.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 && (
+              <StyledNoResults>
+                <Typography size="sm">{noResultsText}</Typography>
+              </StyledNoResults>
+            )}
+          </SelectFieldContent>
+        )}
       </SelectPrimitive.Root>
     )
   }