jfs-components 0.0.72 → 0.0.74

package/src/components/DropdownInput/DropdownInput.tsx

@@ -0,0 +1,819 @@
+import React, {
+    useCallback,
+    useEffect,
+    useMemo,
+    useRef,
+    useState,
+} from 'react'
+import {
+    Dimensions,
+    Modal,
+    Platform,
+    Pressable,
+    StyleSheet,
+    Text,
+    View,
+    type AccessibilityProps,
+    type LayoutChangeEvent,
+    type StyleProp,
+    type TextStyle,
+    type ViewStyle,
+} from 'react-native'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { useTokens } from '../../design-tokens/JFSThemeProvider'
+import { EMPTY_MODES, flattenChildren } from '../../utils/react-utils'
+import Icon from '../../icons/Icon'
+import SupportText from '../SupportText/SupportText'
+import type { SupportTextStatus } from '../SupportText/SupportTextIcon'
+import Dropdown, { DropdownItem, type DropdownItemProps } from '../Dropdown/Dropdown'
+
+const IS_WEB = Platform.OS === 'web'
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export type DropdownInputOptionValue = string | number
+
+export type DropdownInputOption = {
+    /** Stable, unique value used to identify the option. */
+    value: DropdownInputOptionValue
+    /** Human-readable label rendered in the menu and selected display. */
+    label: string
+    /** Optional element rendered before the label inside the item. */
+    leading?: React.ReactNode
+    /** Optional element rendered after the label inside the item. */
+    trailing?: React.ReactNode
+    /** Whether the option is non-selectable. */
+    disabled?: boolean
+}
+
+type Rect = { x: number; y: number; width: number; height: number }
+
+export type DropdownInputProps = {
+    /** Label rendered above the input. */
+    label?: string
+    /** Placeholder text shown when no value is selected. */
+    placeholder?: string
+    /**
+     * Data-driven list of options. Mutually compatible with `children`; if
+     * both are provided the `items` are rendered first.
+     */
+    items?: DropdownInputOption[]
+    /**
+     * Currently selected value (controlled). When `value` is `undefined` the
+     * component operates in uncontrolled mode and keeps its own state.
+     */
+    value?: DropdownInputOptionValue | null
+    /** Initial selected value for uncontrolled mode. */
+    defaultValue?: DropdownInputOptionValue | null
+    /** Called when the selected value changes. */
+    onValueChange?: (
+        value: DropdownInputOptionValue | null,
+        option?: DropdownInputOption
+    ) => void
+    /**
+     * Custom slot of `<DropdownItem />` children. Used when finer-grained
+     * control is needed (icons, custom layouts, etc.). When provided alongside
+     * `items`, both are rendered (items first).
+     */
+    children?: React.ReactNode
+    /**
+     * Custom renderer for the trigger label. Receives the currently-selected
+     * option (if any) and a boolean indicating whether the field has a value.
+     */
+    renderValue?: (
+        option: DropdownInputOption | undefined,
+        hasValue: boolean
+    ) => React.ReactNode
+    /** Controlled open state. */
+    open?: boolean
+    /** Initial open state for uncontrolled mode. */
+    defaultOpen?: boolean
+    /** Called whenever the open state changes. */
+    onOpenChange?: (open: boolean) => void
+    /**
+     * Preferred placement for the popup. The component falls back to the
+     * opposite side automatically when there isn't enough room.
+     * @default 'bottom'
+     */
+    placement?: 'bottom' | 'top' | 'auto'
+    /** 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 in read-only mode (non-interactive but not disabled). */
+    isReadOnly?: boolean
+    /** Helper text displayed below the input. */
+    supportText?: string
+    /** Replaces `supportText` when `isInvalid` is true. */
+    errorMessage?: string
+    /**
+     * Maximum height of the popup before it becomes scrollable. Helpful for
+     * long lists. Defaults to 240 (roughly 5 items).
+     */
+    menuMaxHeight?: number
+    /**
+     * Pixel offset between the trigger and the popup. Defaults to 4 so the
+     * popup visually peeks below the input.
+     */
+    menuOffset?: number
+    /**
+     * When true, the popup width matches the trigger width. When false, the
+     * popup uses its intrinsic content width but never exceeds the trigger.
+     * @default true
+     */
+    matchTriggerWidth?: boolean
+    /** Whether tapping the backdrop closes the menu. */
+    closeOnBackdropPress?: boolean
+    /** 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 popup container. */
+    menuStyle?: StyleProp<ViewStyle>
+    /** Accessibility label. Defaults to the visible label / placeholder. */
+    accessibilityLabel?: string
+    /** Accessibility hint. */
+    accessibilityHint?: string
+    /** Called when the trigger receives focus (web only). */
+    onFocus?: (e: any) => void
+    /** Called when the trigger loses focus (web only). */
+    onBlur?: (e: any) => void
+}
+
+// ---------------------------------------------------------------------------
+// Token resolution
+// ---------------------------------------------------------------------------
+
+function useChevronTokens(modes: Record<string, any>) {
+    return useMemo(() => {
+        const iconSize =
+            parseInt(getVariableByName('input/iconSize', modes), 10) || 32
+        const iconColor =
+            (getVariableByName('iconButton/icon/color', modes) as string) ||
+            '#0f0d0a'
+        return { iconSize, iconColor }
+    }, [modes])
+}
+
+function useFormFieldTokens(modes: Record<string, any>) {
+    return useMemo(() => {
+        const labelColor =
+            (getVariableByName('formField/label/color', modes) as string) ||
+            '#0c0d10'
+        const labelFontFamily =
+            (getVariableByName('formField/label/fontFamily', modes) as string) ||
+            'JioType Var'
+        const labelFontSize =
+            parseInt(getVariableByName('formField/label/fontSize', modes), 10) ||
+            14
+        const labelLineHeight =
+            parseInt(
+                getVariableByName('formField/label/lineHeight', modes),
+                10
+            ) || 17
+        const labelFontWeight =
+            (getVariableByName('formField/label/fontWeight', modes) as string) ||
+            '500'
+
+        const gap = parseInt(getVariableByName('formField/gap', modes), 10) || 8
+
+        const inputPaddingH =
+            parseInt(
+                getVariableByName('formField/input/padding/horizontal', modes),
+                10
+            ) || 12
+        const inputGap =
+            parseInt(getVariableByName('formField/input/gap', modes), 10) || 8
+        const inputRadius =
+            parseInt(getVariableByName('formField/input/radius', modes), 10) ||
+            8
+        const inputBackground =
+            (getVariableByName('formField/input/background', modes) as string) ||
+            '#ffffff'
+        const inputFontSize =
+            parseInt(
+                getVariableByName('formField/input/label/fontSize', modes),
+                10
+            ) || 16
+        const inputLineHeight =
+            parseInt(
+                getVariableByName('formField/input/label/lineHeight', modes),
+                10
+            ) || 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(
+                'states/formField/input/label/color',
+                modes
+            ) as string) ||
+            (getVariableByName('formField/input/label/color', modes) as string) ||
+            '#24262b'
+        const inputBorderColor =
+            (getVariableByName(
+                'states/formField/input/border/color',
+                modes
+            ) as string) ||
+            (getVariableByName('formField/input/border/color', modes) as string) ||
+            '#b5b6b7'
+        const inputBorderSize =
+            parseInt(
+                getVariableByName('formField/input/border/size', modes),
+                10
+            ) || 1
+
+        return {
+            labelColor,
+            labelFontFamily,
+            labelFontSize,
+            labelLineHeight,
+            labelFontWeight,
+            gap,
+            inputPaddingH,
+            inputGap,
+            inputRadius,
+            inputBackground,
+            inputFontSize,
+            inputLineHeight,
+            inputFontFamily,
+            inputFontWeight,
+            inputTextColor,
+            inputBorderColor,
+            inputBorderSize,
+        }
+    }, [modes])
+}
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+/**
+ * Collect every option this DropdownInput knows about, in render order, from
+ * both `items` and `children` slots. Used for keyboard navigation, lookups
+ * of the selected option, and accessibility labels.
+ */
+function collectOptionsFromChildren(
+    children: React.ReactNode
+): DropdownInputOption[] {
+    const out: DropdownInputOption[] = []
+    flattenChildren(children).forEach((child) => {
+        if (!React.isValidElement(child)) return
+        if ((child.type as any) !== DropdownItem) return
+        const childProps = child.props as DropdownItemProps
+        const { value, label, disabled } = childProps
+        if (value == null) return
+        if (typeof value !== 'string' && typeof value !== 'number') return
+        if (typeof label !== 'string') return
+        const opt: DropdownInputOption = {
+            value: value as DropdownInputOptionValue,
+            label,
+        }
+        if (disabled != null) opt.disabled = disabled
+        out.push(opt)
+    })
+    return out
+}
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+function DropdownInput({
+    label,
+    placeholder = 'Select an option',
+    items,
+    value,
+    defaultValue = null,
+    onValueChange,
+    children,
+    renderValue,
+    open,
+    defaultOpen = false,
+    onOpenChange,
+    placement = 'bottom',
+    isRequired = false,
+    isDisabled = false,
+    isInvalid = false,
+    isReadOnly = false,
+    supportText,
+    errorMessage,
+    menuMaxHeight = 240,
+    menuOffset = 4,
+    matchTriggerWidth = true,
+    closeOnBackdropPress = true,
+    modes: propModes = EMPTY_MODES,
+    style,
+    inputStyle,
+    menuStyle,
+    accessibilityLabel,
+    accessibilityHint,
+    onFocus,
+    onBlur,
+}: DropdownInputProps) {
+    // ---------------- Modes ----------------
+    const { modes: globalModes } = useTokens()
+    const baseModes = useMemo(
+        () => ({ ...globalModes, ...propModes }),
+        [globalModes, propModes]
+    )
+
+    // ---------------- Open state ----------------
+    const isControlledOpen = open !== undefined
+    const [internalOpen, setInternalOpen] = useState(defaultOpen)
+    const isOpen = (isControlledOpen ? open : internalOpen) && !isDisabled && !isReadOnly
+
+    const setOpenState = useCallback(
+        (next: boolean) => {
+            if (!isControlledOpen) setInternalOpen(next)
+            onOpenChange?.(next)
+        },
+        [isControlledOpen, onOpenChange]
+    )
+
+    const closeMenu = useCallback(() => setOpenState(false), [setOpenState])
+    const toggleMenu = useCallback(() => setOpenState(!isOpen), [isOpen, setOpenState])
+
+    // ---------------- Value state ----------------
+    const isControlledValue = value !== undefined
+    const [internalValue, setInternalValue] = useState<
+        DropdownInputOptionValue | null
+    >(defaultValue)
+    const currentValue: DropdownInputOptionValue | null = isControlledValue
+        ? (value as DropdownInputOptionValue | null)
+        : internalValue
+
+    // Combine items + children-derived options into a single lookup table so
+    // selecting via either API surfaces the same option metadata.
+    const childOptions = useMemo(
+        () => collectOptionsFromChildren(children),
+        [children]
+    )
+    const allOptions = useMemo<DropdownInputOption[]>(
+        () => [...(items ?? []), ...childOptions],
+        [items, childOptions]
+    )
+
+    const selectedOption = useMemo(
+        () => allOptions.find((o) => o.value === currentValue),
+        [allOptions, currentValue]
+    )
+
+    const handleSelect = useCallback(
+        (selectedValue: DropdownItemProps['value']) => {
+            if (
+                typeof selectedValue !== 'string' &&
+                typeof selectedValue !== 'number'
+            ) {
+                // Items without a meaningful value just close the menu.
+                closeMenu()
+                return
+            }
+            const option = allOptions.find((o) => o.value === selectedValue)
+            if (option?.disabled) return
+            if (!isControlledValue) setInternalValue(selectedValue)
+            onValueChange?.(selectedValue, option)
+            closeMenu()
+        },
+        [allOptions, closeMenu, isControlledValue, onValueChange]
+    )
+
+    // ---------------- Token modes (with state cascade) ----------------
+    const modes = useMemo(
+        () => ({
+            ...baseModes,
+            'FormField States': isInvalid
+                ? 'Error'
+                : isReadOnly
+                  ? 'Read Only'
+                  : isOpen
+                    ? 'Active'
+                    : (baseModes['FormField States'] as string) || 'Idle',
+        }),
+        [baseModes, isInvalid, isReadOnly, isOpen]
+    )
+
+    const tokens = useFormFieldTokens(modes)
+    const chevron = useChevronTokens(modes)
+
+    // ---------------- Layout / measurement ----------------
+    const triggerRef = useRef<View>(null)
+    const [triggerRect, setTriggerRect] = useState<Rect | null>(null)
+    const insets = useSafeAreaInsets()
+
+    const measure = useCallback(() => {
+        if (!triggerRef.current) return
+        triggerRef.current.measureInWindow((x, y, width, height) => {
+            if (
+                !Number.isFinite(x) ||
+                !Number.isFinite(y) ||
+                !Number.isFinite(width) ||
+                !Number.isFinite(height)
+            ) {
+                return
+            }
+            setTriggerRect((prev) => {
+                if (
+                    !prev ||
+                    Math.abs(prev.x - x) > 0.5 ||
+                    Math.abs(prev.y - y) > 0.5 ||
+                    prev.width !== width ||
+                    prev.height !== height
+                ) {
+                    return { x, y, width, height }
+                }
+                return prev
+            })
+        })
+    }, [])
+
+    // Keep the trigger rect in sync while the menu is open (handles scroll,
+    // window resize, etc.). One rAF tick per frame is enough; we bail early
+    // if the rect hasn't changed so React doesn't re-render unnecessarily.
+    useEffect(() => {
+        if (!isOpen) return
+        let raf = 0
+        const loop = () => {
+            measure()
+            raf = requestAnimationFrame(loop)
+        }
+        loop()
+        return () => {
+            if (raf) cancelAnimationFrame(raf)
+        }
+    }, [isOpen, measure])
+
+    const handleTriggerLayout = useCallback(
+        (_e: LayoutChangeEvent) => {
+            measure()
+        },
+        [measure]
+    )
+
+    // ---------------- Popup positioning ----------------
+    const [menuSize, setMenuSize] = useState<{
+        width: number
+        height: number
+    } | null>(null)
+
+    const handleMenuLayout = useCallback((e: LayoutChangeEvent) => {
+        const { width, height } = e.nativeEvent.layout
+        setMenuSize((prev) => {
+            if (!prev || prev.width !== width || prev.height !== height) {
+                return { width, height }
+            }
+            return prev
+        })
+    }, [])
+
+    const { width: windowWidth, height: windowHeight } = Dimensions.get('window')
+
+    const computedPlacement = useMemo<'top' | 'bottom'>(() => {
+        if (!triggerRect) return placement === 'top' ? 'top' : 'bottom'
+        const spaceBelow =
+            windowHeight - (triggerRect.y + triggerRect.height) - insets.bottom
+        const spaceAbove = triggerRect.y - insets.top
+        const desiredHeight = Math.min(
+            menuSize?.height ?? menuMaxHeight,
+            menuMaxHeight
+        )
+        const needed = desiredHeight + menuOffset + 8
+        if (placement === 'top') {
+            return spaceAbove >= needed || spaceAbove >= spaceBelow
+                ? 'top'
+                : 'bottom'
+        }
+        if (placement === 'bottom') {
+            return spaceBelow >= needed || spaceBelow >= spaceAbove
+                ? 'bottom'
+                : 'top'
+        }
+        return spaceBelow >= needed || spaceBelow >= spaceAbove
+            ? 'bottom'
+            : 'top'
+    }, [
+        triggerRect,
+        placement,
+        windowHeight,
+        menuSize?.height,
+        menuMaxHeight,
+        menuOffset,
+        insets.top,
+        insets.bottom,
+    ])
+
+    const popupStyle = useMemo<ViewStyle>(() => {
+        if (!triggerRect) {
+            return { position: 'absolute', opacity: 0, top: 0, left: 0 }
+        }
+        const screenPadding = 8
+        const width = matchTriggerWidth ? triggerRect.width : undefined
+        const intrinsicWidth = menuSize?.width ?? triggerRect.width
+        const finalWidth = width ?? intrinsicWidth
+
+        let leftPos = triggerRect.x
+        const maxLeft =
+            windowWidth - insets.right - finalWidth - screenPadding
+        const minLeft = insets.left + screenPadding
+        if (leftPos > maxLeft) leftPos = maxLeft
+        if (leftPos < minLeft) leftPos = minLeft
+
+        let topPos: number
+        if (computedPlacement === 'top') {
+            const desiredHeight = menuSize?.height ?? menuMaxHeight
+            topPos = triggerRect.y - desiredHeight - menuOffset
+            if (topPos < insets.top + screenPadding) {
+                topPos = insets.top + screenPadding
+            }
+        } else {
+            topPos = triggerRect.y + triggerRect.height + menuOffset
+        }
+
+        const style: ViewStyle = {
+            position: 'absolute',
+            top: topPos,
+            left: leftPos,
+        }
+        if (width != null) style.width = width
+        // Hide first frame before measurement to avoid the popup flashing in
+        // the wrong place. menuSize becomes truthy after the first layout.
+        if (menuSize == null) style.opacity = 0
+        return style
+    }, [
+        triggerRect,
+        computedPlacement,
+        menuSize,
+        menuOffset,
+        menuMaxHeight,
+        matchTriggerWidth,
+        windowWidth,
+        insets.top,
+        insets.left,
+        insets.right,
+    ])
+
+    // Reset menu size when closing so the next open re-measures (handles items
+    // changing while the menu was closed).
+    useEffect(() => {
+        if (!isOpen) setMenuSize(null)
+    }, [isOpen])
+
+    // ---------------- 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%',
+    }
+
+    // Focus ring uses the resolved input border color from FormField States so
+    // active/error look consistent with TextInput-based FormField. We also lift
+    // border weight to 2 when "Active" to read as a focus ring.
+    const inputRowStyle: ViewStyle = {
+        flexDirection: 'row',
+        alignItems: 'center',
+        backgroundColor: tokens.inputBackground,
+        borderColor: tokens.inputBorderColor,
+        borderWidth: isOpen ? Math.max(tokens.inputBorderSize, 1) : tokens.inputBorderSize,
+        borderRadius: tokens.inputRadius,
+        paddingHorizontal: tokens.inputPaddingH,
+        paddingVertical: 0,
+        gap: tokens.inputGap,
+        minHeight: tokens.inputLineHeight,
+    }
+
+    const valueTextStyle: TextStyle = {
+        flex: 1,
+        color: tokens.inputTextColor,
+        fontFamily: tokens.inputFontFamily,
+        fontSize: tokens.inputFontSize,
+        lineHeight: tokens.inputLineHeight,
+        fontWeight: tokens.inputFontWeight as TextStyle['fontWeight'],
+        paddingVertical: 0,
+    }
+
+    const placeholderColor = '#888a8d'
+
+    // ---------------- Support text ----------------
+    const supportStatus: SupportTextStatus = isInvalid ? 'Error' : 'Neutral'
+    const supportLabel = isInvalid && errorMessage ? errorMessage : supportText
+
+    // ---------------- Accessibility ----------------
+    const resolvedA11yLabel =
+        accessibilityLabel || label || placeholder || 'Dropdown'
+    const a11yProps: AccessibilityProps & { [key: string]: any } = {
+        accessibilityRole: 'combobox',
+        accessibilityLabel: resolvedA11yLabel,
+        accessibilityState: {
+            disabled: isDisabled,
+            expanded: isOpen,
+        },
+    }
+    if (accessibilityHint) a11yProps.accessibilityHint = accessibilityHint
+
+    // ---------------- Items rendering ----------------
+    const renderItems = useCallback(() => {
+        const itemNodes: React.ReactNode[] = []
+        if (items && items.length > 0) {
+            items.forEach((opt) => {
+                const isSelected = opt.value === currentValue
+                itemNodes.push(
+                    <DropdownItem
+                        key={`item-${opt.value}`}
+                        value={opt.value}
+                        label={opt.label}
+                        selected={isSelected}
+                        disabled={opt.disabled ?? false}
+                        leading={opt.leading}
+                        trailing={opt.trailing}
+                        onPress={handleSelect}
+                        modes={modes}
+                    />
+                )
+            })
+        }
+        if (children) {
+            // Inject `selected` and `onPress` into child DropdownItems so the
+            // consumer doesn't have to wire selection by hand. Existing
+            // `onPress` handlers on a child are preserved and called after our
+            // selection logic runs.
+            flattenChildren(children).forEach((child, idx) => {
+                if (!React.isValidElement(child)) {
+                    itemNodes.push(child)
+                    return
+                }
+                if ((child.type as any) === DropdownItem) {
+                    const original = child.props as DropdownItemProps
+                    const isSelected = original.value === currentValue
+                    const composedOnPress = (
+                        v: DropdownItemProps['value']
+                    ) => {
+                        original.onPress?.(v)
+                        handleSelect(v)
+                    }
+                    itemNodes.push(
+                        React.cloneElement(child, {
+                            key: child.key ?? `child-${idx}`,
+                            selected: isSelected,
+                            onPress: composedOnPress,
+                            modes: { ...modes, ...(original.modes || {}) },
+                        } as Partial<DropdownItemProps>)
+                    )
+                } else {
+                    itemNodes.push(child)
+                }
+            })
+        }
+        return itemNodes
+    }, [items, children, currentValue, handleSelect, modes])
+
+    // ---------------- Render ----------------
+    const hasValue = selectedOption != null
+    const displayLabel = hasValue ? selectedOption!.label : placeholder
+
+    return (
+        <View style={[wrapperStyle, style]} pointerEvents={isDisabled ? 'none' : 'auto'}>
+            {label != null && (
+                <View style={styles.labelRow}>
+                    <Text style={labelTextStyle}>{label}</Text>
+                    {isRequired && <Text style={requiredIndicatorStyle}> *</Text>}
+                </View>
+            )}
+
+            <Pressable
+                ref={triggerRef}
+                onLayout={handleTriggerLayout}
+                onPress={() => {
+                    if (isDisabled || isReadOnly) return
+                    measure()
+                    toggleMenu()
+                }}
+                {...(onFocus ? { onFocus } : {})}
+                {...(onBlur ? { onBlur } : {})}
+                style={[inputRowStyle, inputStyle, IS_WEB && webNoOutline]}
+                {...a11yProps}
+                {...(IS_WEB
+                    ? {
+                          accessibilityRole: 'combobox' as const,
+                          'aria-haspopup': 'listbox' as const,
+                          'aria-expanded': isOpen,
+                      }
+                    : {})}
+            >
+                {renderValue ? (
+                    <View style={{ flex: 1, justifyContent: 'center' }}>
+                        {renderValue(selectedOption, hasValue)}
+                    </View>
+                ) : (
+                    <Text
+                        style={[
+                            valueTextStyle,
+                            !hasValue && { color: placeholderColor },
+                        ]}
+                        numberOfLines={1}
+                    >
+                        {displayLabel}
+                    </Text>
+                )}
+                <View
+                    accessibilityElementsHidden
+                    importantForAccessibility="no"
+                    pointerEvents="none"
+                >
+                    <Icon
+                        name={isOpen ? 'ic_chevron_up' : 'ic_chevron_down'}
+                        size={chevron.iconSize}
+                        color={chevron.iconColor}
+                    />
+                </View>
+            </Pressable>
+
+            {supportLabel != null && (
+                <SupportText
+                    label={supportLabel}
+                    status={supportStatus}
+                    modes={modes}
+                />
+            )}
+
+            <Modal
+                visible={isOpen}
+                transparent
+                animationType="fade"
+                onRequestClose={closeMenu}
+                statusBarTranslucent
+            >
+                <Pressable
+                    style={StyleSheet.absoluteFill}
+                    onPress={closeOnBackdropPress ? closeMenu : undefined}
+                    accessibilityRole="button"
+                    accessibilityLabel="Close options"
+                    accessible={false}
+                >
+                    <View
+                        style={StyleSheet.absoluteFill}
+                        pointerEvents="box-none"
+                    >
+                        <View
+                            style={popupStyle}
+                            onLayout={handleMenuLayout}
+                            pointerEvents="auto"
+                        >
+                            <Dropdown
+                                modes={modes}
+                                maxHeight={menuMaxHeight}
+                                style={menuStyle}
+                                accessibilityLabel={`${resolvedA11yLabel} options`}
+                            >
+                                {renderItems()}
+                            </Dropdown>
+                        </View>
+                    </View>
+                </Pressable>
+            </Modal>
+        </View>
+    )
+}
+
+const webNoOutline: any = {
+    outlineStyle: 'none',
+    outlineWidth: 0,
+    outlineColor: 'transparent',
+    cursor: 'pointer',
+}
+
+const styles = StyleSheet.create({
+    labelRow: {
+        flexDirection: 'row',
+        alignItems: 'baseline',
+    },
+})
+
+export default DropdownInput