jfs-components 0.0.77 → 0.0.78

package/src/components/SuggestiveSearch/SuggestiveSearch.tsx

@@ -0,0 +1,756 @@
+import React, {
+    useCallback,
+    useEffect,
+    useMemo,
+    useRef,
+    useState,
+} from 'react'
+import {
+    Platform,
+    Pressable,
+    Text,
+    TextInput as RNTextInput,
+    View,
+    type AccessibilityProps,
+    type StyleProp,
+    type TextInputProps as RNTextInputProps,
+    type TextStyle,
+    type ViewStyle,
+} from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { useTokens } from '../../design-tokens/JFSThemeProvider'
+import { EMPTY_MODES } from '../../utils/react-utils'
+import SupportText from '../SupportText/SupportText'
+import type { SupportTextStatus } from '../SupportText/SupportTextIcon'
+import Dropdown, { DropdownItem } from '../Dropdown/Dropdown'
+
+const IS_WEB = Platform.OS === 'web'
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export type SuggestiveSearchOptionValue = string | number
+
+export type SuggestiveSearchOption = {
+    /** Stable, unique value used to identify the suggestion. */
+    value: SuggestiveSearchOptionValue
+    /** Human-readable label shown in the suggestion list and the input. */
+    label: string
+    /** Whether the suggestion is non-selectable. */
+    disabled?: boolean
+}
+
+/**
+ * Suggestions accept either a bare string (used as both value and label) or a
+ * full `{ value, label }` option object for richer data.
+ */
+export type SuggestiveSearchItem = string | SuggestiveSearchOption
+
+export type SuggestiveSearchProps = {
+    /** Label rendered above the input. */
+    label?: string
+    /** Placeholder text shown when the query is empty. */
+    placeholder?: string
+    /**
+     * Suggestions to filter against the current query. May be bare strings or
+     * `{ value, label }` objects.
+     */
+    items?: SuggestiveSearchItem[]
+    /**
+     * Current query text (controlled). When `undefined` the component manages
+     * its own query state internally.
+     */
+    inputValue?: string
+    /** Initial query text for uncontrolled mode. */
+    defaultInputValue?: string
+    /** Called whenever the query text changes (typing or selection). */
+    onInputChange?: (text: string) => void
+    /**
+     * Currently selected suggestion value (controlled). When `undefined` the
+     * component tracks the selection internally.
+     */
+    value?: SuggestiveSearchOptionValue | null
+    /** Initial selected value for uncontrolled mode. */
+    defaultValue?: SuggestiveSearchOptionValue | null
+    /** Called when a suggestion is chosen. */
+    onValueChange?: (
+        value: SuggestiveSearchOptionValue | null,
+        option?: SuggestiveSearchOption
+    ) => void
+    /**
+     * Custom predicate deciding whether an option matches the current query.
+     * Defaults to a case-insensitive substring match on the label.
+     */
+    filter?: (query: string, option: SuggestiveSearchOption) => boolean
+    /**
+     * Minimum number of characters required before suggestions are shown.
+     * @default 1
+     */
+    minChars?: number
+    /** Caps the number of suggestions rendered. Defaults to no limit. */
+    maxResults?: number
+    /**
+     * Highlights the matched substring of each suggestion in bold.
+     * @default true
+     */
+    highlightMatch?: boolean
+    /**
+     * Message shown when the query has matched no suggestions. When omitted,
+     * the dropdown simply stays hidden on an empty result set.
+     */
+    emptyMessage?: string
+    /** Custom renderer for a suggestion row (overrides the default label). */
+    renderItem?: (
+        option: SuggestiveSearchOption,
+        meta: { query: string; isSelected: boolean }
+    ) => React.ReactNode
+    /** Controlled open state of the suggestion dropdown. */
+    open?: boolean
+    /** Initial open state for uncontrolled mode. */
+    defaultOpen?: boolean
+    /** Called whenever the open state changes. */
+    onOpenChange?: (open: boolean) => void
+    /**
+     * Maximum height of the suggestion list before it becomes scrollable.
+     * @default 240
+     */
+    menuMaxHeight?: number
+    /**
+     * Vertical gap between the input and the suggestion dropdown.
+     * @default 6
+     */
+    menuOffset?: number
+    /** Renders a required asterisk next to the label. */
+    isRequired?: boolean
+    /** Disables interaction and dims the field. */
+    isDisabled?: boolean
+    /** Marks the field as invalid and shows `errorMessage`. */
+    isInvalid?: boolean
+    /** Renders the field as read-only (non-interactive, not dimmed). */
+    isReadOnly?: boolean
+    /** Helper text displayed below the input. */
+    supportText?: string
+    /** Replaces `supportText` when `isInvalid` is true. */
+    errorMessage?: string
+    /** Modes for design token resolution. */
+    modes?: Record<string, any>
+    /** Style overrides for the outermost wrapper. */
+    style?: StyleProp<ViewStyle>
+    /** Style overrides for the input row. */
+    inputStyle?: StyleProp<ViewStyle>
+    /** Style overrides for the input text. */
+    inputTextStyle?: StyleProp<TextStyle>
+    /** Style overrides for the suggestion dropdown container. */
+    menuStyle?: StyleProp<ViewStyle>
+    /** Accessibility label. Defaults to the visible label / placeholder. */
+    accessibilityLabel?: string
+    /** Accessibility hint. */
+    accessibilityHint?: string
+    /** Called when the input receives focus. */
+    onFocus?: RNTextInputProps['onFocus']
+    /** Called when the input loses focus. */
+    onBlur?: RNTextInputProps['onBlur']
+    /** Test identifier. */
+    testID?: string
+}
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function toNumber(value: unknown, fallback: number): number {
+    if (typeof value === 'number' && Number.isFinite(value)) return value
+    if (typeof value === 'string') {
+        const parsed = parseFloat(value)
+        if (Number.isFinite(parsed)) return parsed
+    }
+    return fallback
+}
+
+function normalizeItem(item: SuggestiveSearchItem): SuggestiveSearchOption {
+    if (typeof item === 'string') return { value: item, label: item }
+    return item
+}
+
+const defaultFilter = (query: string, option: SuggestiveSearchOption) =>
+    option.label.toLowerCase().includes(query.toLowerCase())
+
+// ---------------------------------------------------------------------------
+// Token resolution
+// ---------------------------------------------------------------------------
+
+function useFormFieldTokens(modes: Record<string, any>) {
+    return useMemo(() => {
+        const labelColor =
+            (getVariableByName('formField/label/color', modes) as string) ||
+            '#000000'
+        const labelFontFamily =
+            (getVariableByName('formField/label/fontFamily', modes) as string) ||
+            'JioType Var'
+        const labelFontSize = toNumber(
+            getVariableByName('formField/label/fontSize', modes),
+            14
+        )
+        const labelLineHeight = toNumber(
+            getVariableByName('formField/label/lineHeight', modes),
+            17
+        )
+        const labelFontWeight =
+            (getVariableByName('formField/label/fontWeight', modes) as string) ||
+            '500'
+
+        const gap = toNumber(getVariableByName('formField/gap', modes), 8)
+
+        const inputPaddingH = toNumber(
+            getVariableByName('formField/input/padding/horizontal', modes),
+            12
+        )
+        const inputGap = toNumber(getVariableByName('formField/input/gap', modes), 8)
+        const inputRadius = toNumber(
+            getVariableByName('formField/input/radius', modes),
+            8
+        )
+        const inputBorderSize = toNumber(
+            getVariableByName('formField/input/border/size', modes),
+            1.5
+        )
+        const inputBackground =
+            (getVariableByName('formField/input/background', modes) as string) ||
+            '#ffffff'
+        const inputBorderColor =
+            (getVariableByName('formField/input/border/color', modes) as string) ||
+            '#b5b6b7'
+        const inputFontSize = toNumber(
+            getVariableByName('formField/input/label/fontSize', modes),
+            16
+        )
+        const inputLineHeight = toNumber(
+            getVariableByName('formField/input/label/lineHeight', modes),
+            45
+        )
+        const inputFontFamily =
+            (getVariableByName('formField/input/label/fontFamily', modes) as string) ||
+            'JioType Var'
+        const inputFontWeight =
+            (getVariableByName('formField/input/label/fontWeight', modes) as string) ||
+            '400'
+        const inputTextColor =
+            (getVariableByName('formField/input/label/color', modes) as string) ||
+            '#24262b'
+
+        return {
+            labelColor,
+            labelFontFamily,
+            labelFontSize,
+            labelLineHeight,
+            labelFontWeight,
+            gap,
+            inputPaddingH,
+            inputGap,
+            inputRadius,
+            inputBorderSize,
+            inputBackground,
+            inputBorderColor,
+            inputFontSize,
+            inputLineHeight,
+            inputFontFamily,
+            inputFontWeight,
+            inputTextColor,
+        }
+    }, [modes])
+}
+
+function useDropdownItemTextTokens(modes: Record<string, any>) {
+    return useMemo(() => {
+        const foreground =
+            (getVariableByName('dropdownItem/foreground', modes) as string) ||
+            '#000000'
+        const fontFamily =
+            (getVariableByName('dropdownItem/fontFamily', modes) as string) ||
+            'JioType Var'
+        const fontSize = toNumber(
+            getVariableByName('dropdownItem/fontSize', modes),
+            16
+        )
+        const lineHeight = toNumber(
+            getVariableByName('dropdownItem/lineHeight', modes),
+            19
+        )
+        return { foreground, fontFamily, fontSize, lineHeight }
+    }, [modes])
+}
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+function SuggestiveSearch({
+    label,
+    placeholder = 'Search',
+    items,
+    inputValue,
+    defaultInputValue = '',
+    onInputChange,
+    value,
+    defaultValue = null,
+    onValueChange,
+    filter = defaultFilter,
+    minChars = 1,
+    maxResults,
+    highlightMatch = true,
+    emptyMessage,
+    renderItem,
+    open,
+    defaultOpen = false,
+    onOpenChange,
+    menuMaxHeight = 240,
+    menuOffset = 6,
+    isRequired = false,
+    isDisabled = false,
+    isInvalid = false,
+    isReadOnly = false,
+    supportText,
+    errorMessage,
+    modes: propModes = EMPTY_MODES,
+    style,
+    inputStyle,
+    inputTextStyle,
+    menuStyle,
+    accessibilityLabel,
+    accessibilityHint,
+    onFocus,
+    onBlur,
+    testID,
+}: SuggestiveSearchProps) {
+    // ---------------- Modes ----------------
+    const { modes: globalModes } = useTokens()
+    const baseModes = useMemo(
+        () => ({ ...globalModes, ...propModes }),
+        [globalModes, propModes]
+    )
+
+    const interactive = !isDisabled && !isReadOnly
+
+    // ---------------- Query state ----------------
+    const isControlledInput = inputValue !== undefined
+    const [internalInput, setInternalInput] = useState(defaultInputValue)
+    const query = isControlledInput ? (inputValue as string) : internalInput
+
+    // ---------------- Selected value state ----------------
+    const isControlledValue = value !== undefined
+    const [internalValue, setInternalValue] = useState<
+        SuggestiveSearchOptionValue | null
+    >(defaultValue)
+    const currentValue = isControlledValue
+        ? (value as SuggestiveSearchOptionValue | null)
+        : internalValue
+
+    // ---------------- Open state ----------------
+    const isControlledOpen = open !== undefined
+    const [internalOpen, setInternalOpen] = useState(defaultOpen)
+    const [isFocused, setIsFocused] = useState(false)
+
+    const setOpenState = useCallback(
+        (next: boolean) => {
+            if (!isControlledOpen) setInternalOpen(next)
+            onOpenChange?.(next)
+        },
+        [isControlledOpen, onOpenChange]
+    )
+
+    // ---------------- Suggestions ----------------
+    const normalizedItems = useMemo(
+        () => (items ?? []).map(normalizeItem),
+        [items]
+    )
+
+    const suggestions = useMemo(() => {
+        const trimmed = query.trim()
+        if (trimmed.length < minChars) return []
+        const matched = normalizedItems.filter((opt) => filter(query, opt))
+        return maxResults != null ? matched.slice(0, maxResults) : matched
+    }, [normalizedItems, query, minChars, filter, maxResults])
+
+    const hasSuggestions = suggestions.length > 0
+    const showEmpty = Boolean(
+        emptyMessage && query.trim().length >= minChars && !hasSuggestions
+    )
+    const hasMenuContent = hasSuggestions || showEmpty
+
+    // Resolved open state: an explicit `open` prop wins; otherwise the dropdown
+    // tracks the internal "wants suggestions" flag (set on focus / typing,
+    // cleared on blur / select). Blur and outside-press handle dismissal, so we
+    // intentionally do NOT gate on `isFocused` here — that would suppress
+    // `defaultOpen` on mount.
+    const isOpen =
+        interactive &&
+        (isControlledOpen ? Boolean(open) : internalOpen) &&
+        hasMenuContent
+
+    // ---------------- Token modes (state cascade) ----------------
+    const modes = useMemo(
+        () => ({
+            ...baseModes,
+            'FormField States': isInvalid
+                ? 'Error'
+                : isReadOnly || isDisabled
+                  ? 'Read Only'
+                  : isFocused
+                    ? 'Active'
+                    : (baseModes['FormField States'] as string) || 'Idle',
+        }),
+        [baseModes, isInvalid, isReadOnly, isDisabled, isFocused]
+    )
+
+    const tokens = useFormFieldTokens(modes)
+    const itemTextTokens = useDropdownItemTextTokens(modes)
+
+    // ---------------- Handlers ----------------
+    const inputRef = useRef<RNTextInput>(null)
+    const blurTimer = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+    const clearBlurTimer = useCallback(() => {
+        if (blurTimer.current) {
+            clearTimeout(blurTimer.current)
+            blurTimer.current = null
+        }
+    }, [])
+
+    useEffect(() => () => clearBlurTimer(), [clearBlurTimer])
+
+    const setQuery = useCallback(
+        (text: string) => {
+            if (!isControlledInput) setInternalInput(text)
+            onInputChange?.(text)
+        },
+        [isControlledInput, onInputChange]
+    )
+
+    const handleChangeText = useCallback(
+        (text: string) => {
+            setQuery(text)
+            // Typing invalidates a prior selection unless the text still
+            // exactly matches the selected option's label.
+            if (currentValue != null) {
+                const selected = normalizedItems.find(
+                    (o) => o.value === currentValue
+                )
+                if (!selected || selected.label !== text) {
+                    if (!isControlledValue) setInternalValue(null)
+                    onValueChange?.(null)
+                }
+            }
+            if (!isControlledOpen) setInternalOpen(true)
+        },
+        [
+            setQuery,
+            currentValue,
+            normalizedItems,
+            isControlledValue,
+            onValueChange,
+            isControlledOpen,
+        ]
+    )
+
+    const handleSelect = useCallback(
+        (selectedValue: SuggestiveSearchOptionValue | null) => {
+            clearBlurTimer()
+            const option = normalizedItems.find((o) => o.value === selectedValue)
+            if (!option || option.disabled) return
+            setQuery(option.label)
+            if (!isControlledValue) setInternalValue(option.value)
+            onValueChange?.(option.value, option)
+            setOpenState(false)
+            inputRef.current?.blur()
+        },
+        [
+            clearBlurTimer,
+            normalizedItems,
+            setQuery,
+            isControlledValue,
+            onValueChange,
+            setOpenState,
+        ]
+    )
+
+    const handleFocus = useCallback<NonNullable<RNTextInputProps['onFocus']>>(
+        (e) => {
+            clearBlurTimer()
+            setIsFocused(true)
+            if (!isControlledOpen) setInternalOpen(true)
+            onFocus?.(e)
+        },
+        [clearBlurTimer, isControlledOpen, onFocus]
+    )
+
+    const handleBlur = useCallback<NonNullable<RNTextInputProps['onBlur']>>(
+        (e) => {
+            // Delay closing so a suggestion press (which blurs the input first
+            // on web) still registers before the list unmounts.
+            clearBlurTimer()
+            blurTimer.current = setTimeout(() => {
+                setIsFocused(false)
+                if (!isControlledOpen) setInternalOpen(false)
+            }, 120)
+            onBlur?.(e)
+        },
+        [clearBlurTimer, isControlledOpen, onBlur]
+    )
+
+    // ---------------- Web outside-press to close ----------------
+    const rootRef = useRef<View>(null)
+    useEffect(() => {
+        if (!IS_WEB || !isOpen) return
+        const handler = (e: any) => {
+            const node = rootRef.current as unknown as {
+                contains?: (t: EventTarget | null) => boolean
+            } | null
+            if (node?.contains && !node.contains(e.target)) {
+                clearBlurTimer()
+                setIsFocused(false)
+                if (!isControlledOpen) setInternalOpen(false)
+            }
+        }
+        document.addEventListener('mousedown', handler)
+        return () => document.removeEventListener('mousedown', handler)
+    }, [isOpen, isControlledOpen, clearBlurTimer])
+
+    // ---------------- Styles ----------------
+    const labelTextStyle: TextStyle = {
+        color: tokens.labelColor,
+        fontFamily: tokens.labelFontFamily,
+        fontSize: tokens.labelFontSize,
+        lineHeight: tokens.labelLineHeight,
+        fontWeight: tokens.labelFontWeight as TextStyle['fontWeight'],
+    }
+
+    const requiredIndicatorStyle: TextStyle = {
+        ...labelTextStyle,
+        color: '#d93d3d',
+    }
+
+    const wrapperStyle: ViewStyle = {
+        gap: tokens.gap,
+        opacity: isDisabled ? 0.5 : 1,
+        width: '100%',
+        position: 'relative',
+        // Keep the dropdown above sibling content when it overflows the field.
+        zIndex: isOpen ? 1000 : undefined,
+    }
+
+    const inputRowStyle: ViewStyle = {
+        flexDirection: 'row',
+        alignItems: 'center',
+        backgroundColor: tokens.inputBackground,
+        borderColor: tokens.inputBorderColor,
+        borderWidth: tokens.inputBorderSize,
+        borderStyle: 'solid',
+        borderRadius: tokens.inputRadius,
+        paddingHorizontal: tokens.inputPaddingH,
+        paddingVertical: 0,
+        gap: tokens.inputGap,
+        minHeight: tokens.inputLineHeight,
+        width: '100%',
+    }
+
+    const inputTextStyles: TextStyle = {
+        flex: 1,
+        color: tokens.inputTextColor,
+        fontFamily: tokens.inputFontFamily,
+        fontSize: tokens.inputFontSize,
+        lineHeight: tokens.inputLineHeight,
+        fontWeight: tokens.inputFontWeight as TextStyle['fontWeight'],
+        padding: 0,
+        margin: 0,
+        ...(IS_WEB
+            ? {
+                  outlineStyle: 'none' as TextStyle['outlineStyle'],
+                  outlineWidth: 0,
+                  outlineColor: 'transparent',
+              }
+            : {}),
+    }
+
+    const placeholderColor = '#888a8d'
+
+    const itemBaseTextStyle: TextStyle = {
+        flex: 1,
+        color: itemTextTokens.foreground,
+        fontFamily: itemTextTokens.fontFamily,
+        fontSize: itemTextTokens.fontSize,
+        lineHeight: itemTextTokens.lineHeight,
+        fontWeight: '400',
+    }
+
+    // ---------------- Support text ----------------
+    const supportStatus: SupportTextStatus = isInvalid ? 'Error' : 'Neutral'
+    const supportLabel = isInvalid && errorMessage ? errorMessage : supportText
+
+    // ---------------- Accessibility ----------------
+    const resolvedA11yLabel =
+        accessibilityLabel || label || placeholder || 'Search'
+    const a11yProps: AccessibilityProps & { [key: string]: any } = {
+        accessibilityRole: IS_WEB ? undefined : 'search',
+        accessibilityLabel: resolvedA11yLabel,
+        accessibilityState: { disabled: isDisabled, expanded: isOpen },
+    }
+    if (accessibilityHint) a11yProps.accessibilityHint = accessibilityHint
+
+    // ---------------- Suggestion highlight ----------------
+    const renderHighlighted = useCallback(
+        (optLabel: string) => {
+            const trimmed = query.trim()
+            if (!highlightMatch || trimmed.length === 0) {
+                return <Text style={itemBaseTextStyle}>{optLabel}</Text>
+            }
+            const idx = optLabel.toLowerCase().indexOf(trimmed.toLowerCase())
+            if (idx < 0) {
+                return <Text style={itemBaseTextStyle}>{optLabel}</Text>
+            }
+            const before = optLabel.slice(0, idx)
+            const match = optLabel.slice(idx, idx + trimmed.length)
+            const after = optLabel.slice(idx + trimmed.length)
+            return (
+                <Text style={itemBaseTextStyle}>
+                    {before}
+                    <Text style={{ fontWeight: '700' }}>{match}</Text>
+                    {after}
+                </Text>
+            )
+        },
+        [query, highlightMatch, itemBaseTextStyle]
+    )
+
+    // ---------------- Render ----------------
+    return (
+        <View
+            ref={rootRef}
+            style={[wrapperStyle, style]}
+            pointerEvents={isDisabled ? 'none' : 'auto'}
+            testID={testID}
+        >
+            {label != null && (
+                <View style={styles.labelRow}>
+                    <Text style={labelTextStyle}>{label}</Text>
+                    {isRequired && <Text style={requiredIndicatorStyle}> *</Text>}
+                </View>
+            )}
+
+            <View style={styles.anchor}>
+                <Pressable
+                    style={[inputRowStyle, inputStyle]}
+                    onPress={() => inputRef.current?.focus()}
+                    accessible={false}
+                >
+                    <RNTextInput
+                        ref={inputRef}
+                        style={[inputTextStyles, inputTextStyle]}
+                        value={query}
+                        onChangeText={handleChangeText}
+                        onFocus={handleFocus}
+                        onBlur={handleBlur}
+                        placeholder={placeholder}
+                        placeholderTextColor={placeholderColor}
+                        editable={interactive}
+                        autoCapitalize="none"
+                        autoComplete="off"
+                        autoCorrect={false}
+                        {...a11yProps}
+                        {...(IS_WEB
+                            ? {
+                                  accessibilityRole: 'search' as const,
+                                  'aria-autocomplete': 'list' as const,
+                                  'aria-expanded': isOpen,
+                              }
+                            : {})}
+                    />
+                </Pressable>
+
+                {isOpen && (
+                    <View
+                        style={[
+                            styles.popup,
+                            { top: '100%', marginTop: menuOffset },
+                        ]}
+                        // Keep taps from dismissing the keyboard before the
+                        // item's press handler runs on native.
+                    >
+                        <Dropdown
+                            modes={modes}
+                            maxHeight={menuMaxHeight}
+                            style={menuStyle}
+                            accessibilityLabel={`${resolvedA11yLabel} suggestions`}
+                        >
+                            {hasSuggestions
+                                ? suggestions.map((opt) => {
+                                      const isSelected = opt.value === currentValue
+                                      return (
+                                          <DropdownItem
+                                              key={`sg-${opt.value}`}
+                                              value={opt.value}
+                                              selected={isSelected}
+                                              disabled={opt.disabled ?? false}
+                                              onPress={handleSelect}
+                                              modes={modes}
+                                          >
+                                              {renderItem
+                                                  ? renderItem(opt, {
+                                                        query,
+                                                        isSelected,
+                                                    })
+                                                  : renderHighlighted(opt.label)}
+                                          </DropdownItem>
+                                      )
+                                  })
+                                : showEmpty && (
+                                      <View style={styles.emptyRow}>
+                                          <Text
+                                              style={[
+                                                  itemBaseTextStyle,
+                                                  { color: placeholderColor },
+                                              ]}
+                                          >
+                                              {emptyMessage}
+                                          </Text>
+                                      </View>
+                                  )}
+                        </Dropdown>
+                    </View>
+                )}
+            </View>
+
+            {supportLabel != null && supportLabel !== '' && (
+                <SupportText
+                    label={supportLabel}
+                    status={supportStatus}
+                    modes={modes}
+                />
+            )}
+        </View>
+    )
+}
+
+const styles = {
+    labelRow: {
+        flexDirection: 'row',
+        alignItems: 'baseline',
+    } as ViewStyle,
+    anchor: {
+        position: 'relative',
+        width: '100%',
+        zIndex: 1,
+    } as ViewStyle,
+    popup: {
+        position: 'absolute',
+        left: 0,
+        right: 0,
+        zIndex: 1000,
+    } as ViewStyle,
+    emptyRow: {
+        paddingHorizontal: 12,
+        paddingVertical: 12,
+    } as ViewStyle,
+}
+
+export default SuggestiveSearch