@butternutbox/pawprint-native 0.8.0 → 0.10.0

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>
     )
   }

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

@@ -1,5 +1,5 @@
 import React from "react"
-import { View, ViewProps, ScrollView } from "react-native"
+import { View, ViewProps, ScrollView, StyleSheet } from "react-native"
 import styled from "@emotion/native"
 import { useTheme } from "@emotion/react"
 import * as SelectPrimitive from "@rn-primitives/select"
@@ -11,11 +11,6 @@ type SelectFieldContentProps = {
 
 const parseTokenValue = (value: string): number => parseFloat(value)
 
-// TODO: Replace with dynamic positioning when @rn-primitives/select supports it on React Native
-// These values position the dropdown below and aligned with the trigger
-const DROPDOWN_OFFSET_X = -32 // Align with trigger left edge
-const DROPDOWN_OFFSET_Y = -94 // Position below trigger with gap
-
 const StyledContentShadow = styled(View)(({ theme }) => {
   const { dropdown } = theme.tokens.components.dropdownList
   const shadow = dropdown.list.dropshadow.default
@@ -29,11 +24,7 @@ const StyledContentShadow = styled(View)(({ theme }) => {
     },
     shadowOpacity: 1,
     shadowRadius: parseTokenValue(shadow.blur),
-    elevation: 8,
-    transform: [
-      { translateX: DROPDOWN_OFFSET_X },
-      { translateY: DROPDOWN_OFFSET_Y }
-    ]
+    elevation: 8
   }
 })
 
@@ -59,6 +50,7 @@ export const SelectFieldContent = React.forwardRef<
 
   return (
     <SelectPrimitive.Portal>
+      <SelectPrimitive.Overlay style={StyleSheet.absoluteFill} />
       <SelectPrimitive.Content
         side="bottom"
         align="start"
@@ -70,7 +62,11 @@ export const SelectFieldContent = React.forwardRef<
           <StyledContentShadow {...rest}>
             <StyledContentInner>
               <SelectPrimitive.Viewport>
-                <ScrollView showsVerticalScrollIndicator nestedScrollEnabled>
+                <ScrollView
+                  showsVerticalScrollIndicator
+                  nestedScrollEnabled
+                  keyboardShouldPersistTaps="handled"
+                >
                   {children}
                 </ScrollView>
               </SelectPrimitive.Viewport>

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

@@ -17,6 +17,8 @@ type SelectFieldTriggerOwnProps = {
   leadingIcon?: React.ReactNode
   children?: React.ReactNode
   isOpen?: boolean
+  isSearching?: boolean
+  actionIcon?: React.ReactNode
 }
 
 export type SelectFieldTriggerProps = SelectFieldTriggerOwnProps &
@@ -59,7 +61,15 @@ export const SelectFieldTrigger = React.forwardRef<
   SelectFieldTriggerProps
 >(
   (
-    { state = "default", leadingIcon, children, isOpen = false, ...rest },
+    {
+      state = "default",
+      leadingIcon,
+      children,
+      isOpen = false,
+      isSearching = false,
+      actionIcon,
+      ...rest
+    },
     ref
   ) => {
     const theme = useTheme()
@@ -134,33 +144,41 @@ export const SelectFieldTrigger = React.forwardRef<
         <Icon icon={SuccessIcon} size="md" colour="success" />
       ) : null
 
+    const triggerContent = (
+      <StyledTriggerWrapper
+        state={state}
+        style={[
+          {
+            borderColor,
+            borderWidth: animatedBorderWidth,
+            paddingVertical: animatedPaddingVertical,
+            paddingHorizontal: animatedPaddingHorizontal
+          }
+        ]}
+      >
+        {leadingIcon && <StyledIconWrapper>{leadingIcon}</StyledIconWrapper>}
+        {children}
+        {stateIcon && <StyledIconWrapper>{stateIcon}</StyledIconWrapper>}
+        {actionIcon ? (
+          <StyledIconWrapper>{actionIcon}</StyledIconWrapper>
+        ) : (
+          <StyledArrowIcon
+            style={{ transform: [{ rotate: animatedRotation }] }}
+          >
+            <Icon icon={KeyboardArrowDown} size="md" colour="primary" />
+          </StyledArrowIcon>
+        )}
+      </StyledTriggerWrapper>
+    )
+
+    if (isSearching) {
+      return <View ref={ref}>{triggerContent}</View>
+    }
+
     return (
       <SelectPrimitive.Trigger asChild>
         <Slot ref={ref}>
-          <Pressable {...rest}>
-            <StyledTriggerWrapper
-              state={state}
-              style={[
-                {
-                  borderColor,
-                  borderWidth: animatedBorderWidth,
-                  paddingVertical: animatedPaddingVertical,
-                  paddingHorizontal: animatedPaddingHorizontal
-                }
-              ]}
-            >
-              {leadingIcon && (
-                <StyledIconWrapper>{leadingIcon}</StyledIconWrapper>
-              )}
-              {children}
-              {stateIcon && <StyledIconWrapper>{stateIcon}</StyledIconWrapper>}
-              <StyledArrowIcon
-                style={{ transform: [{ rotate: animatedRotation }] }}
-              >
-                <Icon icon={KeyboardArrowDown} size="md" colour="primary" />
-              </StyledArrowIcon>
-            </StyledTriggerWrapper>
-          </Pressable>
+          <Pressable {...rest}>{triggerContent}</Pressable>
         </Slot>
       </SelectPrimitive.Trigger>
     )