blend-native 0.0.1-beta.0 → 0.0.1-beta.2

package/src/components/SearchInput/SearchInput.tsx

@@ -0,0 +1,170 @@
+import { forwardRef, useState } from 'react'
+import { Pressable as RNPressable } from 'react-native'
+import type {
+    TextInputProps as RNTextInputProps,
+    View as RNView,
+} from 'react-native'
+import { X } from 'lucide-react-native'
+import { InputSizeV2 } from '@juspay/blend-design-system/node'
+import type { SearchInputV2TokensType } from '@juspay/blend-design-system/node'
+import { useNativeTokens } from '../../theme/useNativeTokens'
+import { useControllableState } from '../../hooks/useControllableState'
+import Block from '../../primitives/Block'
+import PrimitiveInput from '../../primitives/PrimitiveInput'
+import Slot from '../../primitives/Slot'
+import { parseBorder, parseDimension } from '../../adapters/cssStringAdapter'
+import type { SearchInputNativeProps } from './searchInput.types'
+
+/**
+ * Search field — the native port of web's `SearchInputV2`.
+ *
+ * Bottom-border-only chrome that re-resolves per state, slots either side,
+ * and an automatic clear button (lucide X) once there is text — hidden when
+ * `rightSlot` occupies that spot, exactly web's rule. `returnKeyType`
+ * defaults to `search`.
+ */
+const SearchInput = forwardRef<RNView, SearchInputNativeProps>(
+    function SearchInput(
+        {
+            value,
+            defaultValue,
+            onChangeText,
+            error = false,
+            allowClear = true,
+            onClear,
+            clearIcon,
+            disabled = false,
+            leftSlot,
+            rightSlot,
+            testID,
+            accessibilityLabel,
+            style,
+            inputRef,
+            onFocus,
+            onBlur,
+            ...rest
+        },
+        ref
+    ) {
+        const tokens =
+            useNativeTokens<SearchInputV2TokensType>('SEARCH_INPUT_V2')
+        const [focused, setFocused] = useState(false)
+        const [currentValue, setCurrentValue] = useControllableState<string>(
+            value,
+            defaultValue ?? '',
+            onChangeText
+        )
+
+        const state = disabled
+            ? 'disabled'
+            : error
+              ? 'error'
+              : focused
+                ? 'focus'
+                : 'default'
+        const container = tokens.inputContainer
+        // Web hardcodes SM for every padding lookup — no size prop.
+        const size = InputSizeV2.SM
+
+        // Web's `shouldShowSearchInputV2Clear`.
+        const showClear =
+            allowClear && currentValue.length > 0 && !disabled && !rightSlot
+
+        const handleClear = () => {
+            setCurrentValue('')
+            onClear?.()
+        }
+
+        const handleFocus: NonNullable<RNTextInputProps['onFocus']> = (e) => {
+            setFocused(true)
+            onFocus?.(e)
+        }
+        const handleBlur: NonNullable<RNTextInputProps['onBlur']> = (e) => {
+            setFocused(false)
+            onBlur?.(e)
+        }
+
+        const iconSize =
+            parseDimension(tokens.icon.width as string | number) ?? 16
+        const bottomBorder = parseBorder(String(container.borderBottom[state]))
+
+        return (
+            <Block
+                ref={ref}
+                flexDirection="row"
+                alignItems="center"
+                gap={8}
+                paddingTop={container.paddingTop[size] as string | number}
+                paddingBottom={container.paddingBottom[size] as string | number}
+                paddingLeft={container.paddingLeft[size] as string | number}
+                paddingRight={container.paddingRight[size] as string | number}
+                style={[
+                    {
+                        borderBottomWidth: bottomBorder.borderWidth,
+                        borderBottomColor: bottomBorder.borderColor,
+                    },
+                    style,
+                ]}
+                testID={testID}
+            >
+                {leftSlot && (
+                    <Slot
+                        hidden
+                        color={String(tokens.icon.color[state])}
+                        maxHeight={iconSize}
+                    >
+                        {leftSlot}
+                    </Slot>
+                )}
+                <PrimitiveInput
+                    ref={inputRef}
+                    value={currentValue}
+                    onChangeText={setCurrentValue}
+                    placeholderColor={String(
+                        container.placeholderColor[state] ?? undefined
+                    )}
+                    fontSize={container.fontSize as string | number}
+                    fontWeight={container.fontWeight as string | number}
+                    color={String(container.color[state] ?? '#000000')}
+                    editable={!disabled}
+                    returnKeyType="search"
+                    accessibilityLabel={accessibilityLabel ?? 'Search'}
+                    accessibilityState={{ disabled }}
+                    onFocus={handleFocus}
+                    onBlur={handleBlur}
+                    testID={testID ? `${testID}-input` : undefined}
+                    {...rest}
+                />
+                {showClear && (
+                    <RNPressable
+                        onPress={handleClear}
+                        accessibilityRole="button"
+                        accessibilityLabel="Clear search"
+                        hitSlop={8}
+                        testID={testID ? `${testID}-clear` : undefined}
+                    >
+                        {clearIcon ?? (
+                            <X
+                                size={iconSize}
+                                color={String(tokens.icon.color[state])}
+                            />
+                        )}
+                    </RNPressable>
+                )}
+                {rightSlot && (
+                    <Slot
+                        hidden
+                        color={String(tokens.icon.color[state])}
+                        maxHeight={iconSize}
+                    >
+                        {rightSlot}
+                    </Slot>
+                )}
+            </Block>
+        )
+    }
+)
+
+SearchInput.displayName = 'SearchInput'
+
+export default SearchInput

package/src/components/SearchInput/index.ts

@@ -0,0 +1,2 @@
+export { default as SearchInput } from './SearchInput'
+export type { SearchInputNativeProps } from './searchInput.types'

package/src/components/SearchInput/searchInput.types.ts

@@ -0,0 +1,38 @@
+import type React from 'react'
+import type {
+    StyleProp,
+    TextInput as RNTextInput,
+    TextInputProps as RNTextInputProps,
+    ViewStyle,
+} from 'react-native'
+import type { SearchInputBaseProps } from '@juspay/blend-design-system/node'
+
+/**
+ * Props for the native `SearchInput` — the port of web's `SearchInputV2`.
+ *
+ * Derives from `SearchInputBaseProps` (value, boolean error, allowClear,
+ * onClear, disabled) with `onChange` → `onChangeText` and uncontrolled
+ * support. Like web there is no size prop (SM chrome), no label and no
+ * footer — it is a bare bottom-bordered field; the caller supplies the
+ * search icon via `leftSlot`.
+ */
+export type SearchInputNativeProps = SearchInputBaseProps & {
+    defaultValue?: string
+    onChangeText?: (text: string) => void
+    leftSlot?: React.ReactNode
+    rightSlot?: React.ReactNode
+    /** Replaces the default lucide X clear icon. */
+    clearIcon?: React.ReactNode
+    testID?: string
+    accessibilityLabel?: string
+    style?: StyleProp<ViewStyle>
+    inputRef?: React.Ref<RNTextInput>
+} & Omit<
+        RNTextInputProps,
+        | 'value'
+        | 'defaultValue'
+        | 'onChangeText'
+        | 'style'
+        | 'editable'
+        | 'placeholderTextColor'
+    >

package/src/components/SingleSelect/SingleSelect.tsx

@@ -0,0 +1,278 @@
+import React, { forwardRef, memo, useCallback, useMemo, useState } from 'react'
+import { View } from 'react-native'
+import {
+    SelectV2Alignment,
+    SelectV2Side,
+    SelectV2Variant,
+    SelectV2Size,
+    type SingleSelectV2TokensType,
+} from '@juspay/blend-design-system/node'
+import { useNativeTokens } from '../../theme/useNativeTokens'
+import { BottomSheet } from '../../overlay/sheet/BottomSheet'
+import { Block } from '../../primitives/Block'
+import {
+    DropdownContent,
+    DropdownList,
+    DropdownSearch,
+    useDropdown,
+} from '../shared/dropdown'
+import { filterGroups } from '../shared/dropdown/dropdownFilter'
+import { flattenGroups } from '../shared/dropdown/dropdownFlatten'
+import { SingleSelectTrigger } from './SingleSelectTrigger'
+import {
+    getSingleSelectContentTokens,
+    getSingleSelectItemTokens,
+    getTriggerState,
+    getValueLabelMap,
+    flattenSingleSelectGroups,
+    toFilterableItem,
+} from './singleSelect.utils'
+import type {
+    SingleSelectNativeProps,
+    SingleSelectRef,
+} from './singleSelect.types'
+
+const PLACEMENT_MAP: Record<SelectV2Side, 'top' | 'bottom' | 'left' | 'right'> =
+    {
+        [SelectV2Side.TOP]: 'top',
+        [SelectV2Side.BOTTOM]: 'bottom',
+        [SelectV2Side.LEFT]: 'left',
+        [SelectV2Side.RIGHT]: 'right',
+    }
+
+const ALIGN_MAP: Record<SelectV2Alignment, 'start' | 'center' | 'end'> = {
+    [SelectV2Alignment.START]: 'start',
+    [SelectV2Alignment.CENTER]: 'center',
+    [SelectV2Alignment.END]: 'end',
+}
+
+/**
+ * SingleSelect — React Native implementation of web's `SingleSelectV2`.
+ *
+ * A trigger button opens a dropdown panel; selecting an item fires
+ * `onSelect(value)` and closes the panel. Supports search, sub-menus,
+ * custom triggers, error state, and mobile bottom-sheet mode.
+ */
+const SingleSelect = forwardRef<SingleSelectRef, SingleSelectNativeProps>(
+    function SingleSelect(
+        {
+            label,
+            subLabel,
+            hintText,
+            required = false,
+            placeholder,
+            size = SelectV2Size.MD,
+            variant = SelectV2Variant.CONTAINER,
+            items,
+            selected,
+            onSelect,
+            search,
+            slot,
+            customTrigger,
+            open: openProp,
+            onOpenChange,
+            usePanelOnMobile = true,
+            alignment = SelectV2Alignment.START,
+            side = SelectV2Side.BOTTOM,
+            sideOffset = 8,
+            error,
+            disabled = false,
+            enableVirtualization = false,
+            menuFooter,
+            testID,
+            accessibilityLabel,
+        },
+        ref
+    ) {
+        const tokens =
+            useNativeTokens<SingleSelectV2TokensType>('SINGLE_SELECT_V2')
+        const [searchText, setSearchText] = useState('')
+
+        const dropdown = useDropdown({
+            open: openProp,
+            onOpenChange,
+            placement: PLACEMENT_MAP[side],
+            alignment: ALIGN_MAP[alignment],
+            offset: sideOffset,
+            usePanelOnMobile,
+        })
+
+        const hasError = Boolean(error?.show)
+        const triggerState = getTriggerState(dropdown.open, disabled, hasError)
+
+        const valueLabelMap = useMemo(() => getValueLabelMap(items), [items])
+        const selectedLabel = valueLabelMap[selected]
+
+        const contentTokens = useMemo(
+            () => getSingleSelectContentTokens(tokens, size, variant),
+            [tokens, size, variant]
+        )
+
+        const itemTokens = useMemo(
+            () => getSingleSelectItemTokens(tokens),
+            [tokens]
+        )
+
+        const filteredGroups = useMemo(() => {
+            const enableSearch = search?.show ?? false
+            if (!enableSearch || !searchText) return items
+            const filterable = items.map((g) => ({
+                label: g.groupLabel,
+                items: g.items.map(toFilterableItem),
+                showSeparator: g.showSeparator,
+            }))
+            const filtered = filterGroups(filterable, searchText)
+            return items
+                .map((originalGroup) => {
+                    const match = filtered.find(
+                        (fg) => fg.label === originalGroup.groupLabel
+                    )
+                    if (!match) return null
+                    const survivingOriginals = match.items
+                        .map((fi) =>
+                            originalGroup.items.find(
+                                (oi) => oi.label === fi.primaryText
+                            )
+                        )
+                        .filter(Boolean)
+                    if (!survivingOriginals.length) return null
+                    return {
+                        ...originalGroup,
+                        items: survivingOriginals as typeof originalGroup.items,
+                    }
+                })
+                .filter(Boolean) as typeof items
+        }, [items, search, searchText])
+
+        const adapterGroups = useMemo(
+            () => flattenSingleSelectGroups(filteredGroups, selected),
+            [filteredGroups, selected]
+        )
+
+        const flatRows = useMemo(
+            () => flattenGroups(adapterGroups),
+            [adapterGroups]
+        )
+
+        const handleItemPress = useCallback(
+            (item: unknown) => {
+                const ssItem = item as { value: string }
+                onSelect(ssItem.value)
+                dropdown.setOpen(false)
+            },
+            [onSelect, dropdown]
+        )
+
+        React.useEffect(() => {
+            if (!dropdown.open) setSearchText('')
+        }, [dropdown.open])
+
+        const enableSearch = search?.show ?? false
+        const searchPlaceholder = search?.placeholder ?? 'Search...'
+
+        // Trigger element: custom or built-in
+        const triggerElement = customTrigger ? (
+            React.cloneElement(customTrigger, {
+                ref: dropdown.anchorRef,
+                onPress: dropdown.handleOpen,
+            } as React.Attributes)
+        ) : (
+            <SingleSelectTrigger
+                ref={dropdown.anchorRef}
+                label={label}
+                subLabel={subLabel}
+                hintText={hintText}
+                required={required}
+                placeholder={placeholder}
+                selectedLabel={selectedLabel}
+                size={size}
+                variant={variant}
+                disabled={disabled}
+                state={triggerState}
+                error={error}
+                tokens={tokens}
+                slot={slot}
+                testID={testID ? `${testID}-trigger` : undefined}
+                accessibilityLabel={accessibilityLabel}
+                onPress={dropdown.handleOpen}
+            />
+        )
+
+        const content = (
+            <>
+                {enableSearch ? (
+                    <Block paddingBottom={8} paddingLeft={8} paddingRight={8}>
+                        <DropdownSearch
+                            value={searchText}
+                            onChange={setSearchText}
+                            placeholder={searchPlaceholder}
+                            testID={testID}
+                        />
+                    </Block>
+                ) : null}
+                <DropdownList
+                    rows={flatRows}
+                    itemTokens={itemTokens}
+                    separatorColor={String(tokens.menu.item.separator.color)}
+                    separatorHeight={tokens.menu.item.separator.height}
+                    separatorMargin={tokens.menu.item.separator.margin}
+                    labelColor={String(tokens.menu.groupLabel.color.default)}
+                    labelFontSize={tokens.menu.groupLabel.fontSize ?? 14}
+                    labelFontWeight={tokens.menu.groupLabel.fontWeight ?? '500'}
+                    labelPaddingTop={tokens.menu.groupLabel.paddingTop}
+                    labelPaddingBottom={tokens.menu.groupLabel.paddingBottom}
+                    labelPaddingHorizontal={tokens.menu.groupLabel.paddingLeft}
+                    onItemPress={handleItemPress}
+                    enableVirtualization={enableVirtualization}
+                    testID={testID ? `${testID}-list` : undefined}
+                />
+                {menuFooter ? <Block paddingTop={4}>{menuFooter}</Block> : null}
+            </>
+        )
+
+        if (dropdown.shouldUseSheet) {
+            return (
+                <View ref={ref} testID={testID}>
+                    {triggerElement}
+                    <BottomSheet
+                        open={dropdown.open}
+                        onClose={() => dropdown.setOpen(false)}
+                        backgroundColor={contentTokens.backgroundColor}
+                        topRadius={16}
+                        accessibilityLabel={accessibilityLabel ?? 'Select'}
+                        testID={testID ? `${testID}-sheet` : undefined}
+                    >
+                        <Block
+                            paddingTop={contentTokens.paddingTop}
+                            paddingRight={contentTokens.paddingRight}
+                            paddingBottom={contentTokens.paddingBottom}
+                            paddingLeft={contentTokens.paddingLeft}
+                        >
+                            {content}
+                        </Block>
+                    </BottomSheet>
+                </View>
+            )
+        }
+
+        return (
+            <View ref={ref} testID={testID}>
+                {triggerElement}
+                <DropdownContent
+                    open={dropdown.open}
+                    onClose={() => dropdown.setOpen(false)}
+                    position={dropdown.position}
+                    onContentLayout={dropdown.onContentLayout}
+                    tokens={contentTokens}
+                    accessibilityLabel={accessibilityLabel ?? 'Select'}
+                    testID={testID ? `${testID}-content` : undefined}
+                >
+                    {content}
+                </DropdownContent>
+            </View>
+        )
+    }
+)
+
+export default memo(SingleSelect)
+SingleSelect.displayName = 'SingleSelect'