@butternutbox/pawprint-native 0.22.0 → 0.23.0

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

@@ -10,6 +10,7 @@ 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"
@@ -18,7 +19,7 @@ import { SelectFieldItem } from "./SelectFieldItem"
 
 const parseTokenValue = (value: string): number => parseFloat(value)
 
-const StyledNoResults = styled(View)(({ theme }) => {
+const StyledStatusRow = styled(View)(({ theme }) => {
   const { dropdown } = theme.tokens.components.dropdownList
 
   return {
@@ -38,6 +39,18 @@ const StyledRoot = styled(View)(({ theme }) => {
   }
 })
 
+/**
+ * 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> = {
   label?: string
   description?: string
@@ -54,6 +67,9 @@ type SelectFieldOwnProps<Value = Option | string> = {
   searchable?: boolean
   searchPlaceholder?: string
   noResultsText?: string
+  onSearchQuery?: (query: string) => Promise<SelectFieldSearchResult[]>
+  debounceMs?: number
+  errorText?: string
 }
 
 export type SelectFieldProps<Value = Option> = SelectFieldOwnProps<Value> &
@@ -98,7 +114,7 @@ export type SelectFieldProps<Value = Option> = SelectFieldOwnProps<Value> &
  * </SelectField>
  * ```
  *
- * **Searchable:**
+ * **Searchable (local filtering):**
  * @example
  * ```tsx
  * <SelectField
@@ -113,6 +129,25 @@ export type SelectFieldProps<Value = Option> = SelectFieldOwnProps<Value> &
  * </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
@@ -144,6 +179,9 @@ export type SelectFieldProps<Value = Option> = SelectFieldOwnProps<Value> &
  * @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>(
   (
@@ -163,6 +201,9 @@ const SelectFieldRoot = React.forwardRef<View, SelectFieldProps>(
       searchable = false,
       searchPlaceholder,
       noResultsText = "No results found",
+      onSearchQuery,
+      debounceMs = 300,
+      errorText = "Something went wrong",
       ...rest
     },
     ref
@@ -176,6 +217,62 @@ const SelectFieldRoot = React.forwardRef<View, SelectFieldProps>(
     const [clearKey, setClearKey] = React.useState(0)
     const searchInputRef = React.useRef<TextInput>(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
+    })
+
+    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 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 (!isOpen) {
         setShowContent(false)
@@ -210,7 +307,13 @@ const SelectFieldRoot = React.forwardRef<View, SelectFieldProps>(
         clearTimeout(hardwareKeyboardTimer)
         keyboardSub.remove()
       }
-    }, [isOpen, searchable])
+      // `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 isCompound = React.Children.toArray(children).some(
       (child) =>
@@ -240,21 +343,53 @@ const SelectFieldRoot = React.forwardRef<View, SelectFieldProps>(
 
     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
+    // 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 hasNoResults =
-      searchable && searchQuery.length > 0 && filteredItems.length === 0
+    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
@@ -326,37 +461,49 @@ const SelectFieldRoot = React.forwardRef<View, SelectFieldProps>(
           )}
           {error && state === "error" && <InputError>{error}</InputError>}
         </StyledRoot>
-        {showContent && (
+        {showContent && hasContentToShow && (
           <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
+            {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 && (
-              <StyledNoResults>
-                <Typography size="sm">{noResultsText}</Typography>
-              </StyledNoResults>
+                  return child
+                })}
+                {hasNoResults && (
+                  <StyledStatusRow>
+                    <Typography size="sm">{noResultsText}</Typography>
+                  </StyledStatusRow>
+                )}
+              </>
             )}
           </SelectFieldContent>
         )}

package/src/components/molecules/SelectField/index.ts

@@ -1,5 +1,5 @@
 export { SelectField } from "./SelectField"
-export type { SelectFieldProps } from "./SelectField"
+export type { SelectFieldProps, SelectFieldSearchResult } from "./SelectField"
 export { useSelectField } from "./hooks"
 export type { SelectValidationRule } from "./hooks"
 export { SelectFieldTrigger } from "./SelectFieldTrigger"

package/src/components/molecules/Slider/Slider.tsx

@@ -101,7 +101,7 @@ export const Slider = React.forwardRef<View, SliderProps>(
     const [internalValue, setInternalValue] = React.useState(defaultValue)
     const currentValue = isControlled ? controlledValue : internalValue
 
-    const thumbSize = parseTokenValue(buttons.size.md.height)
+    const thumbSize = parseTokenValue(buttons.size.md.minHeight)
     const trackHeight = parseTokenValue(slider.sizing.track.height)
 
     const isWeb = Platform.OS === "web"