@butternutbox/pawprint-native 1.6.2 → 2.0.0

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

@@ -0,0 +1,90 @@
+import React from "react"
+import { ScrollView, View, ViewProps } from "react-native"
+import styled from "@emotion/native"
+import { parseTokenValue } from "../../../utils"
+
+export type SelectFieldPlacement = "below" | "above"
+
+export type SelectFieldAnchorRect = {
+  x: number
+  y: number
+  width: number
+  height: number
+}
+
+type SelectFieldDropdownOwnProps = {
+  anchor: SelectFieldAnchorRect
+  placement: SelectFieldPlacement
+  maxHeight: number
+  screenHeight: number
+  children?: React.ReactNode
+}
+
+export type SelectFieldDropdownProps = SelectFieldDropdownOwnProps &
+  Omit<ViewProps, keyof SelectFieldDropdownOwnProps>
+
+const StyledDropdown = styled(View)<{
+  dropdownPlacement: SelectFieldPlacement
+  anchorRect: SelectFieldAnchorRect
+  screenHeight: number
+}>(({ theme, dropdownPlacement, anchorRect, screenHeight }) => {
+  const { dropdown } = theme.tokens.components.dropdownList
+  const { spacing } = theme.tokens.components.inputs
+  const shadow = dropdown.list.dropshadow.default
+  const offset = parseTokenValue(spacing.gap)
+
+  return {
+    position: "absolute",
+    left: anchorRect.x,
+    width: anchorRect.width,
+    ...(dropdownPlacement === "below"
+      ? { top: anchorRect.y + anchorRect.height + offset }
+      : { bottom: screenHeight - anchorRect.y + offset }),
+    minWidth: parseTokenValue(dropdown.list.size.minWidth),
+    borderRadius: parseTokenValue(dropdown.list.borderRadius.default),
+    shadowColor: shadow.color,
+    shadowOffset: {
+      width: parseTokenValue(shadow.offsetX),
+      height: parseTokenValue(shadow.offsetY)
+    },
+    shadowOpacity: 1,
+    shadowRadius: parseTokenValue(shadow.blur),
+    elevation: 8
+  }
+})
+
+const StyledSurface = styled(View)(({ theme }) => {
+  const { dropdown } = theme.tokens.components.dropdownList
+  const { colour } = theme.tokens.components.inputs
+
+  return {
+    backgroundColor: colour.field.background.default,
+    borderRadius: parseTokenValue(dropdown.list.borderRadius.default),
+    overflow: "hidden"
+  }
+})
+
+export const SelectFieldDropdown = React.forwardRef<
+  View,
+  SelectFieldDropdownProps
+>(({ anchor, placement, maxHeight, screenHeight, children, ...rest }, ref) => (
+  <StyledDropdown
+    ref={ref}
+    dropdownPlacement={placement}
+    anchorRect={anchor}
+    screenHeight={screenHeight}
+    {...rest}
+  >
+    <StyledSurface style={{ maxHeight }}>
+      <ScrollView
+        keyboardShouldPersistTaps="always"
+        nestedScrollEnabled
+        showsVerticalScrollIndicator
+      >
+        {children}
+      </ScrollView>
+    </StyledSurface>
+  </StyledDropdown>
+))
+
+SelectFieldDropdown.displayName = "SelectField.Dropdown"

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

@@ -0,0 +1,88 @@
+import React from "react"
+import { View } from "react-native"
+import styled from "@emotion/native"
+import { Spinner } from "../../atoms/Spinner"
+import { Typography } from "../../atoms/Typography"
+import { parseTokenValue } from "../../../utils"
+import { SelectFieldOption } from "./SelectFieldOption"
+import type { SelectFieldOptionData, SelectOptionsState } from "./core"
+
+export type SelectFieldListProps = {
+  state: SelectOptionsState
+  selectedValue: string | null | undefined
+  onSelect: (option: SelectFieldOptionData) => void
+  noResultsText: string
+  errorText: string
+  searchHintText: string
+}
+
+const StyledStatusRow = styled(View)(({ theme }) => {
+  const { dropdown } = theme.tokens.components.dropdownList
+
+  return {
+    height: parseTokenValue(dropdown.listItem.size.height),
+    paddingHorizontal: parseTokenValue(
+      dropdown.listItem.spacing.horiztonalPadding
+    ),
+    alignItems: "center",
+    justifyContent: "center"
+  }
+})
+
+export const SelectFieldList = ({
+  state,
+  selectedValue,
+  onSelect,
+  noResultsText,
+  errorText,
+  searchHintText
+}: SelectFieldListProps) => {
+  if (state.needsMoreInput) {
+    return (
+      <StyledStatusRow>
+        <Typography size="sm">{searchHintText}</Typography>
+      </StyledStatusRow>
+    )
+  }
+
+  if (state.isLoading) {
+    return (
+      <StyledStatusRow accessibilityLabel="Loading results">
+        <Spinner size="sm" />
+      </StyledStatusRow>
+    )
+  }
+
+  if (state.hasError) {
+    return (
+      <StyledStatusRow>
+        <Typography size="sm">{errorText}</Typography>
+      </StyledStatusRow>
+    )
+  }
+
+  if (state.options.length === 0) {
+    return (
+      <StyledStatusRow>
+        <Typography size="sm">{noResultsText}</Typography>
+      </StyledStatusRow>
+    )
+  }
+
+  return (
+    <>
+      {state.options.map((option) => (
+        <SelectFieldOption
+          key={option.value}
+          label={option.label}
+          leadingIcon={option.leadingIcon}
+          disabled={option.disabled}
+          isSelected={option.value === selectedValue}
+          onPress={() => onSelect(option)}
+        />
+      ))}
+    </>
+  )
+}
+
+SelectFieldList.displayName = "SelectField.List"

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

@@ -0,0 +1,90 @@
+import React from "react"
+import { Pressable, PressableProps, View } from "react-native"
+import styled from "@emotion/native"
+import { useTheme } from "@emotion/react"
+import { Typography } from "../../atoms/Typography"
+import { parseTokenValue } from "../../../utils"
+
+type SelectFieldOptionOwnProps = {
+  label: string
+  leadingIcon?: React.ReactNode
+  disabled?: boolean
+  isSelected?: boolean
+}
+
+export type SelectFieldOptionProps = SelectFieldOptionOwnProps &
+  Omit<PressableProps, keyof SelectFieldOptionOwnProps>
+
+const StyledOption = styled(Pressable)(({ theme }) => {
+  const { dropdown } = theme.tokens.components.dropdownList
+
+  return {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: parseTokenValue(dropdown.listItem.content.gap),
+    height: parseTokenValue(dropdown.listItem.size.height),
+    paddingHorizontal: parseTokenValue(
+      dropdown.listItem.spacing.horiztonalPadding
+    )
+  }
+})
+
+const StyledIconSlot = styled(View)({
+  flexShrink: 0,
+  alignItems: "center",
+  justifyContent: "center"
+})
+
+const StyledTextSlot = styled(View)({
+  flex: 1,
+  minWidth: 0
+})
+
+export const SelectFieldOption = React.forwardRef<View, SelectFieldOptionProps>(
+  (
+    { label, leadingIcon, disabled = false, isSelected = false, ...rest },
+    ref
+  ) => {
+    const theme = useTheme()
+    const { dropdown } = theme.tokens.components.dropdownList
+    const { colour, typography } = dropdown.listItem
+
+    const backgroundColor = disabled
+      ? colour.background.disabled
+      : isSelected
+        ? colour.background.hover
+        : colour.background.default
+
+    return (
+      <StyledOption
+        ref={ref}
+        disabled={disabled}
+        accessibilityRole="button"
+        accessibilityState={{ disabled, selected: isSelected }}
+        style={{ backgroundColor }}
+        {...rest}
+      >
+        {leadingIcon && <StyledIconSlot>{leadingIcon}</StyledIconSlot>}
+        <StyledTextSlot>
+          <Typography
+            token={
+              isSelected
+                ? typography.placeholder.hover
+                : typography.placeholder.default
+            }
+            color={
+              disabled
+                ? colour.text.placeholder.disabled
+                : colour.text.placeholder.default
+            }
+            numberOfLines={1}
+          >
+            {label}
+          </Typography>
+        </StyledTextSlot>
+      </StyledOption>
+    )
+  }
+)
+
+SelectFieldOption.displayName = "SelectField.Option"

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

@@ -0,0 +1,8 @@
+export { matchOptions, labelFor } from "./options"
+export type { SelectFieldOptionData } from "./options"
+export { useSelectOptions } from "./useSelectOptions"
+export type {
+  SelectOptionsResolver,
+  SelectOptionsState
+} from "./useSelectOptions"
+export { drawerListMaxHeight } from "./listHeight"

package/src/components/molecules/SelectField/core/listHeight.test.ts

@@ -0,0 +1,22 @@
+import { describe, it, expect } from "vitest"
+import { drawerListMaxHeight } from "./listHeight"
+
+describe("drawerListMaxHeight", () => {
+  it("takes half the window on a phone", () => {
+    expect(drawerListMaxHeight(812)).toBe(406)
+  })
+
+  it("caps a tall screen rather than filling it", () => {
+    expect(drawerListMaxHeight(1180)).toBe(480)
+    expect(drawerListMaxHeight(2000)).toBe(480)
+  })
+
+  it("never exceeds the ceiling", () => {
+    expect(drawerListMaxHeight(10000)).toBeLessThanOrEqual(480)
+  })
+
+  it("prefers an explicit override", () => {
+    expect(drawerListMaxHeight(1180, 200)).toBe(200)
+    expect(drawerListMaxHeight(400, 900)).toBe(900)
+  })
+})

package/src/components/molecules/SelectField/core/listHeight.ts

@@ -0,0 +1,8 @@
+const LIST_HEIGHT_RATIO = 0.5
+const LIST_HEIGHT_CEILING = 480
+
+export const drawerListMaxHeight = (
+  windowHeight: number,
+  override?: number
+): number =>
+  override ?? Math.min(windowHeight * LIST_HEIGHT_RATIO, LIST_HEIGHT_CEILING)

package/src/components/molecules/SelectField/core/options.ts

@@ -0,0 +1,35 @@
+import React from "react"
+
+export type SelectFieldOptionData = {
+  value: string
+  label: string
+  leadingIcon?: React.ReactNode
+  disabled?: boolean
+}
+
+export const matchOptions = (
+  options: SelectFieldOptionData[],
+  query: string
+): SelectFieldOptionData[] => {
+  const needle = query.trim().toLowerCase()
+  if (needle.length === 0) return options
+
+  const startsWith: SelectFieldOptionData[] = []
+  const contains: SelectFieldOptionData[] = []
+
+  options.forEach((option) => {
+    const haystack = option.label.toLowerCase()
+    if (haystack.startsWith(needle)) {
+      startsWith.push(option)
+    } else if (haystack.includes(needle)) {
+      contains.push(option)
+    }
+  })
+
+  return [...startsWith, ...contains]
+}
+
+export const labelFor = (
+  options: SelectFieldOptionData[],
+  value: string | null | undefined
+): string => options.find((option) => option.value === value)?.label ?? ""

package/src/components/molecules/SelectField/core/useSelectOptions.ts

@@ -0,0 +1,116 @@
+import React from "react"
+import { matchOptions } from "./options"
+import type { SelectFieldOptionData } from "./options"
+
+export type SelectOptionsResolver = (
+  query: string
+) => Promise<SelectFieldOptionData[]>
+
+type UseSelectOptionsArgs = {
+  options: SelectFieldOptionData[]
+  query: string
+  onSearchQuery?: SelectOptionsResolver
+  debounceMs: number
+  minQueryLength: number
+  enabled: boolean
+}
+
+export type SelectOptionsState = {
+  options: SelectFieldOptionData[]
+  isLoading: boolean
+  hasError: boolean
+  needsMoreInput: boolean
+}
+
+export const useSelectOptions = ({
+  options,
+  query,
+  onSearchQuery,
+  debounceMs,
+  minQueryLength,
+  enabled
+}: UseSelectOptionsArgs): SelectOptionsState => {
+  const isQueryMode = enabled && typeof onSearchQuery === "function"
+  const trimmedQuery = query.trim()
+  const meetsMinimum = trimmedQuery.length >= minQueryLength
+  const isQueryActive = isQueryMode && trimmedQuery.length > 0 && meetsMinimum
+  const needsMoreInput = isQueryMode && !meetsMinimum
+
+  const [results, setResults] = React.useState<SelectFieldOptionData[]>([])
+  const [isLoading, setIsLoading] = React.useState(false)
+  const [hasError, setHasError] = React.useState(false)
+
+  const resolverRef = React.useRef(onSearchQuery)
+  React.useEffect(() => {
+    resolverRef.current = onSearchQuery
+  })
+
+  const requestIdRef = React.useRef(0)
+
+  React.useEffect(() => {
+    if (!isQueryMode) return
+
+    if (trimmedQuery.length === 0 || trimmedQuery.length < minQueryLength) {
+      requestIdRef.current += 1
+      setResults([])
+      setIsLoading(false)
+      setHasError(false)
+      return
+    }
+
+    const requestId = requestIdRef.current + 1
+    requestIdRef.current = requestId
+    setIsLoading(true)
+    setHasError(false)
+
+    const timer = setTimeout(() => {
+      const resolve = resolverRef.current
+      if (!resolve) {
+        setIsLoading(false)
+        return
+      }
+
+      Promise.resolve(resolve(trimmedQuery))
+        .then((items) => {
+          if (requestIdRef.current !== requestId) return
+          setResults(items)
+          setIsLoading(false)
+        })
+        .catch(() => {
+          if (requestIdRef.current !== requestId) return
+          setResults([])
+          setHasError(true)
+          setIsLoading(false)
+        })
+    }, debounceMs)
+
+    return () => clearTimeout(timer)
+  }, [isQueryMode, trimmedQuery, debounceMs, minQueryLength])
+
+  const localOptions = React.useMemo(
+    () => (enabled ? matchOptions(options, query) : options),
+    [enabled, options, query]
+  )
+
+  if (needsMoreInput) {
+    const hasDefaultList = trimmedQuery.length === 0 && options.length > 0
+
+    return {
+      options: hasDefaultList ? options : [],
+      isLoading: false,
+      hasError: false,
+      needsMoreInput: !hasDefaultList
+    }
+  }
+
+  if (!isQueryActive) {
+    return {
+      options: localOptions,
+      isLoading: false,
+      hasError: false,
+      needsMoreInput: false
+    }
+  }
+
+  return { options: results, isLoading, hasError, needsMoreInput: false }
+}

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

@@ -1,10 +1,13 @@
 export { SelectField } from "./SelectField"
-export type { SelectFieldProps, SelectFieldSearchResult } from "./SelectField"
-export { useSelectField } from "./hooks"
-export type { SelectValidationRule } from "./hooks"
-export { SelectFieldTrigger } from "./SelectFieldTrigger"
-export type { SelectFieldTriggerProps } from "./SelectFieldTrigger"
-export { SelectFieldValue } from "./SelectFieldValue"
-export { SelectFieldContent } from "./SelectFieldContent"
-export { SelectFieldItem } from "./SelectFieldItem"
-export type { SelectFieldItemProps } from "./SelectFieldItem"
+export type { SelectFieldProps } from "./SelectField"
+export { SelectDrawerField } from "./SelectDrawerField"
+export type { SelectDrawerFieldProps } from "./SelectDrawerField"
+export { SelectFieldOption } from "./SelectFieldOption"
+export type { SelectFieldOptionProps } from "./SelectFieldOption"
+export { SelectFieldDropdown } from "./SelectFieldDropdown"
+export type {
+  SelectFieldDropdownProps,
+  SelectFieldPlacement
+} from "./SelectFieldDropdown"
+export { matchOptions, labelFor } from "./core"
+export type { SelectFieldOptionData } from "./core"

package/src/index.ts

@@ -7,4 +7,3 @@ export { default as styled } from "@emotion/native"
 export * from "@butternutbox/pawprint-fonts"
 export * from "./theme"
 export * from "./components"
-export * from "./hooks"

package/src/test-utils.tsx

@@ -1,6 +1,7 @@
 import React from "react"
 import { render, type RenderOptions } from "@testing-library/react"
 import { ThemeProvider } from "@emotion/react"
+import { PortalHost } from "@rn-primitives/portal"
 import { createPawprintTheme } from "./theme/utils"
 
 const theme = createPawprintTheme()
@@ -11,7 +12,10 @@ export function renderWithTheme(
 ) {
   return render(ui, {
     wrapper: ({ children }) => (
-      <ThemeProvider theme={theme}>{children}</ThemeProvider>
+      <ThemeProvider theme={theme}>
+        {children}
+        <PortalHost />
+      </ThemeProvider>
     ),
     ...options
   })

package/vitest.config.ts

@@ -66,6 +66,13 @@ export default defineConfig({
           "src/__mocks__/rn-primitives/select.tsx"
         )
       },
+      {
+        find: /^@rn-primitives\/portal$/,
+        replacement: resolve(
+          __dirname,
+          "src/__mocks__/rn-primitives/portal.tsx"
+        )
+      },
       {
         find: /^@rn-primitives\/slot$/,
         replacement: resolve(__dirname, "src/__mocks__/rn-primitives/slot.tsx")

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

@@ -1,81 +0,0 @@
-import React from "react"
-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"
-import { Slot } from "@rn-primitives/slot"
-
-type SelectFieldContentProps = {
-  children?: React.ReactNode
-} & Omit<ViewProps, "children">
-
-const parseTokenValue = (value: string): number => parseFloat(value)
-
-const StyledContentShadow = styled(View)(({ theme }) => {
-  const { dropdown } = theme.tokens.components.dropdownList
-  const shadow = dropdown.list.dropshadow.default
-
-  return {
-    borderRadius: parseTokenValue(dropdown.list.borderRadius.default),
-    shadowColor: shadow.color,
-    shadowOffset: {
-      width: parseTokenValue(shadow.offsetX),
-      height: parseTokenValue(shadow.offsetY)
-    },
-    shadowOpacity: 1,
-    shadowRadius: parseTokenValue(shadow.blur),
-    elevation: 8
-  }
-})
-
-const StyledContentInner = styled(View)(({ theme }) => {
-  const { dropdown } = theme.tokens.components.dropdownList
-  const { colour } = theme.tokens.components.inputs
-
-  return {
-    backgroundColor: colour.field.background.default,
-    borderRadius: parseTokenValue(dropdown.list.borderRadius.default),
-    minWidth: parseTokenValue(dropdown.list.size.minWidth),
-    maxHeight: parseTokenValue(dropdown.list.size.maxHeight),
-    overflow: "hidden"
-  }
-})
-
-export const SelectFieldContent = React.forwardRef<
-  View,
-  SelectFieldContentProps
->(({ children, ...rest }, ref) => {
-  const theme = useTheme()
-  const { spacing } = theme.tokens.components.inputs
-
-  return (
-    <SelectPrimitive.Portal>
-      <SelectPrimitive.Overlay style={StyleSheet.absoluteFill} />
-      <SelectPrimitive.Content
-        side="bottom"
-        align="start"
-        sideOffset={parseTokenValue(spacing.gap)}
-        alignOffset={0}
-        asChild
-      >
-        <Slot ref={ref}>
-          <StyledContentShadow {...rest}>
-            <StyledContentInner>
-              <SelectPrimitive.Viewport>
-                <ScrollView
-                  showsVerticalScrollIndicator
-                  nestedScrollEnabled
-                  keyboardShouldPersistTaps="handled"
-                >
-                  {children}
-                </ScrollView>
-              </SelectPrimitive.Viewport>
-            </StyledContentInner>
-          </StyledContentShadow>
-        </Slot>
-      </SelectPrimitive.Content>
-    </SelectPrimitive.Portal>
-  )
-})
-
-SelectFieldContent.displayName = "SelectField.Content"