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

package/src/components/shared/select/SelectOptionList.tsx

@@ -0,0 +1,313 @@
+import { useMemo, useState } from 'react'
+import { FlatList, Pressable, View } from 'react-native'
+import { Check } from 'lucide-react-native'
+import { parseDimension } from '../../../adapters/cssStringAdapter'
+import Text from '../../../primitives/Text'
+import Slot from '../../../primitives/Slot'
+import Separator from '../../../primitives/Separator'
+import { SearchInput } from '../../SearchInput'
+import { BottomSheetScrollable } from '../../../overlay/sheet/SheetScrollable'
+
+/**
+ * The option-list core both Selects share on both presentations: optional
+ * search pinned above one FlatList over flattened group rows. The list IS
+ * a FlatList (inherently windowed), which is the whole native
+ * virtualization policy. `renderIndicator` lets MultiSelect swap the
+ * default selected-checkmark for its Checkbox; `listHeader` covers the
+ * select-all row injection.
+ */
+
+/**
+ * Structural slice of the option-list token tree — both select token
+ * types satisfy it (MultiSelect's `menu.item` differs only in extras).
+ */
+export type SelectListTokens = {
+    menu: {
+        content?: {
+            backgroundColor?: unknown
+            border?: unknown
+            borderRadius?: unknown
+        }
+        groupLabel?: { color?: unknown; fontSize?: unknown }
+        item: {
+            gap?: unknown
+            borderRadius?: unknown
+            paddingTop?: unknown
+            paddingBottom?: unknown
+            paddingLeft?: unknown
+            paddingRight?: unknown
+            backgroundColor?: Record<string, unknown>
+            option?: {
+                fontSize?: unknown
+                fontWeight?: unknown
+                color?: Record<string, unknown>
+            }
+            description?: {
+                fontSize?: unknown
+                color?: Record<string, unknown>
+            }
+            separator?: { color?: unknown }
+        }
+    }
+}
+
+export type SelectOption = {
+    label: string
+    value: string
+    subLabel?: string
+    disabled?: boolean
+    slot1?: React.ReactNode
+    onPress?: () => void
+}
+
+type Row =
+    | { type: 'label'; id: string; label: string }
+    | { type: 'separator'; id: string }
+    | { type: 'option'; id: string; option: SelectOption }
+
+export function flattenSelectGroups(
+    groups: {
+        groupLabel?: string
+        items: SelectOption[]
+        showSeparator?: boolean
+    }[]
+): Row[] {
+    const rows: Row[] = []
+    groups.forEach((group, groupIndex) => {
+        if (group.groupLabel) {
+            rows.push({
+                type: 'label',
+                id: `label-${groupIndex}`,
+                label: group.groupLabel,
+            })
+        }
+        group.items.forEach((option, index) => {
+            rows.push({
+                type: 'option',
+                id: `option-${groupIndex}-${index}-${option.value}`,
+                option,
+            })
+        })
+        if (groupIndex < groups.length - 1 && group.showSeparator) {
+            rows.push({ type: 'separator', id: `separator-${groupIndex}` })
+        }
+    })
+    return rows
+}
+
+export function SelectOptionList({
+    groups,
+    selectedValues,
+    onOptionPress,
+    search,
+    isSelected,
+    keepOpenOnPress = false,
+    allowCustomValue = false,
+    customValueLabel,
+    tokens,
+    listHeader,
+    listFooter,
+    showItemDividers = false,
+    renderIndicator,
+    testID,
+}: {
+    groups: {
+        groupLabel?: string
+        items: SelectOption[]
+        showSeparator?: boolean
+    }[]
+    selectedValues: string[]
+    onOptionPress: (value: string, option?: SelectOption) => void
+    search?: { show?: boolean; placeholder?: string }
+    /** Trailing indicator style: checkmark (single) handled here; multi passes its own renderer. */
+    isSelected?: (value: string) => boolean
+    keepOpenOnPress?: boolean
+    allowCustomValue?: boolean
+    customValueLabel?: string
+    tokens: SelectListTokens
+    listHeader?: React.ReactNode
+    listFooter?: React.ReactNode
+    showItemDividers?: boolean
+    /** Overrides the trailing indicator (default: checkmark on selected). */
+    renderIndicator?: (
+        selected: boolean,
+        option: SelectOption
+    ) => React.ReactNode
+    testID?: string
+}) {
+    const [searchText, setSearchText] = useState('')
+
+    const filteredGroups = useMemo(() => {
+        if (!searchText) return groups
+        const lower = searchText.toLowerCase()
+        return groups
+            .map((group) => ({
+                ...group,
+                items: group.items.filter((option) =>
+                    option.label.toLowerCase().includes(lower)
+                ),
+            }))
+            .filter((group) => group.items.length > 0)
+    }, [groups, searchText])
+
+    const rows = useMemo(() => {
+        const flattened = flattenSelectGroups(filteredGroups)
+        const hasExact = filteredGroups.some((group) =>
+            group.items.some(
+                (option) =>
+                    option.label.toLowerCase() === searchText.toLowerCase()
+            )
+        )
+        if (allowCustomValue && searchText && !hasExact) {
+            flattened.push({
+                type: 'option',
+                id: `custom-${searchText}`,
+                option: {
+                    label: `${customValueLabel ?? 'Use'} "${searchText}"`,
+                    value: searchText,
+                },
+            })
+        }
+        return flattened
+    }, [filteredGroups, allowCustomValue, customValueLabel, searchText])
+
+    const item = tokens.menu.item
+    const selectedSet = useMemo(() => new Set(selectedValues), [selectedValues])
+    const checkSelected =
+        isSelected ?? ((value: string) => selectedSet.has(value))
+
+    const renderRow = ({ item: row, index }: { item: Row; index: number }) => {
+        if (row.type === 'label') {
+            return (
+                <Text
+                    color={String(tokens.menu.groupLabel?.color ?? '#99A0AE')}
+                    fontSize={
+                        (tokens.menu.groupLabel?.fontSize as number) ?? 12
+                    }
+                    style={{ paddingHorizontal: 8, paddingVertical: 6 }}
+                >
+                    {row.label}
+                </Text>
+            )
+        }
+        if (row.type === 'separator') {
+            return (
+                <Separator
+                    orientation="horizontal"
+                    style={{ alignSelf: 'stretch', marginVertical: 4 }}
+                />
+            )
+        }
+        const option = row.option
+        const selected = checkSelected(option.value)
+        const state = option.disabled
+            ? 'disabled'
+            : selected
+              ? 'selected'
+              : 'default'
+        const optionColor = String(item.option?.color?.[state] ?? '#525866')
+        return (
+            <Pressable
+                onPress={() => onOptionPress(option.value, option)}
+                disabled={option.disabled}
+                accessibilityRole="menuitem"
+                accessibilityState={{
+                    disabled: option.disabled,
+                    selected,
+                }}
+                accessibilityLabel={option.label}
+                style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: parseDimension(item.gap as string | number) ?? 8,
+                    backgroundColor: String(
+                        item.backgroundColor?.[state] ?? 'transparent'
+                    ),
+                    borderRadius:
+                        parseDimension(item.borderRadius as string | number) ??
+                        4,
+                    paddingTop: parseDimension(
+                        item.paddingTop as string | number
+                    ),
+                    paddingBottom: parseDimension(
+                        item.paddingBottom as string | number
+                    ),
+                    paddingLeft: parseDimension(
+                        item.paddingLeft as string | number
+                    ),
+                    paddingRight: parseDimension(
+                        item.paddingRight as string | number
+                    ),
+                    borderBottomWidth:
+                        showItemDividers && index < rows.length - 1 ? 1 : 0,
+                    borderBottomColor: String(
+                        item.separator?.color ?? '#E1E4EA'
+                    ),
+                }}
+                testID={testID ? `${testID}-option-${index}` : undefined}
+            >
+                {option.slot1 ? (
+                    <Slot maxHeight={16} color={optionColor}>
+                        {option.slot1}
+                    </Slot>
+                ) : null}
+                <View style={{ flex: 1 }}>
+                    <Text
+                        color={optionColor}
+                        fontSize={item.option?.fontSize as string | number}
+                        fontWeight={item.option?.fontWeight as string | number}
+                        numberOfLines={1}
+                    >
+                        {option.label}
+                    </Text>
+                    {option.subLabel ? (
+                        <Text
+                            color={String(
+                                item.description?.color?.[state] ?? '#99A0AE'
+                            )}
+                            fontSize={
+                                (item.description?.fontSize as number) ?? 12
+                            }
+                            numberOfLines={1}
+                        >
+                            {option.subLabel}
+                        </Text>
+                    ) : null}
+                </View>
+                {renderIndicator ? (
+                    renderIndicator(selected, option)
+                ) : selected ? (
+                    <Check size={16} color={optionColor} />
+                ) : null}
+            </Pressable>
+        )
+    }
+
+    return (
+        <View>
+            {listHeader}
+            {search?.show ? (
+                <SearchInput
+                    value={searchText}
+                    onChangeText={setSearchText}
+                    placeholder={search.placeholder}
+                    testID={testID ? `${testID}-search` : undefined}
+                />
+            ) : null}
+            <BottomSheetScrollable>
+                <FlatList
+                    data={rows}
+                    keyExtractor={(row) => row.id}
+                    renderItem={renderRow}
+                    keyboardShouldPersistTaps="handled"
+                    accessibilityRole="menu"
+                    extraData={[selectedValues, keepOpenOnPress]}
+                    testID={testID ? `${testID}-list` : undefined}
+                />
+            </BottomSheetScrollable>
+            {listFooter}
+        </View>
+    )
+}
+
+export default SelectOptionList

package/src/components/shared/select/SelectTrigger.tsx

@@ -0,0 +1,276 @@
+import { Pressable, View } from 'react-native'
+import { ChevronDown } from 'lucide-react-native'
+import { SelectV2Size, SelectV2Variant } from '@juspay/blend-design-system/node'
+import { parseBorder, parseDimension } from '../../../adapters/cssStringAdapter'
+import Text from '../../../primitives/Text'
+import Slot from '../../../primitives/Slot'
+
+/**
+ * The field-shaped trigger both Selects share: label row above, the
+ * token-styled pressable surface (slot + value/placeholder + chevron),
+ * hint/error row below.
+ *
+ * Deliberately NOT built on the input field chrome (`FieldLabels`/
+ * `FieldFooter`): the select token trees carry their own label/hintText/
+ * errorMessage subtrees with a different shape, and reusing the input
+ * chrome would silently restyle selects from the wrong slot.
+ *
+ * Web's `outline` trigger-border tokens carry an ` !important` suffix —
+ * a CSS-specificity artifact with no RN meaning — stripped before
+ * `parseBorder`.
+ */
+
+/**
+ * Structural slice of the trigger-relevant token tree — both
+ * `SingleSelectV2TokensType` and `MultiSelectV2TokensType` satisfy it, so
+ * the one trigger serves both selects without a union of the full types.
+ */
+export type SelectTriggerTokens = {
+    gap?: unknown
+    label?: {
+        fontSize?: unknown
+        fontWeight?: unknown
+        color?: Record<string, unknown>
+    }
+    subLabel?: { fontSize?: unknown; color?: Record<string, unknown> }
+    hintText?: { fontSize?: unknown; color?: Record<string, unknown> }
+    errorMessage?: { fontSize?: unknown; color?: unknown }
+    required?: { color?: unknown }
+    trigger: {
+        height?: Record<string, Record<string, unknown>>
+        padding?: Record<
+            string,
+            Record<
+                string,
+                {
+                    top?: unknown
+                    right?: unknown
+                    bottom?: unknown
+                    left?: unknown
+                }
+            >
+        >
+        borderRadius?: Record<string, Record<string, unknown>>
+        backgroundColor?: Record<string, Record<string, unknown>>
+        outline?: Record<string, Record<string, unknown>>
+        slot?: { gap?: unknown; width?: unknown }
+        placeholder?: { color?: unknown; fontSize?: unknown }
+        selectedValue?: {
+            color?: unknown
+            fontSize?: unknown
+            fontWeight?: unknown
+        }
+    }
+}
+
+function triggerState(open: boolean, error: boolean): string {
+    if (error) return 'error'
+    return open ? 'open' : 'closed'
+}
+
+export function SelectTrigger({
+    label,
+    subLabel,
+    hintText,
+    errorMessage,
+    required = false,
+    error = false,
+    disabled = false,
+    open,
+    placeholder,
+    valueText,
+    slot,
+    customTrigger,
+    size = SelectV2Size.MD,
+    variant = SelectV2Variant.CONTAINER,
+    onPress,
+    tokens,
+    testID,
+}: {
+    label?: string
+    subLabel?: string
+    hintText?: string
+    errorMessage?: string
+    required?: boolean
+    error?: boolean
+    disabled?: boolean
+    open: boolean
+    placeholder: string
+    /** The rendered selection (text for Single, tag/text for Multi). */
+    valueText?: React.ReactNode
+    slot?: React.ReactNode
+    /** Replaces the built-in surface entirely (label/footer kept). */
+    customTrigger?: React.ReactNode
+    size?: SelectV2Size
+    variant?: SelectV2Variant
+    onPress: () => void
+    tokens: SelectTriggerTokens
+    testID?: string
+}) {
+    const trigger = tokens.trigger
+    const state = triggerState(open, error)
+    const labelState = disabled ? 'disabled' : 'default'
+
+    const outline = String(
+        (trigger.outline?.[variant] as Record<string, unknown>)?.[state] ??
+            'none'
+        // Linear-time strip (a leading \s* here is a polynomial-ReDoS
+        // pattern per CodeQL, even on trusted token strings).
+    )
+        .replace(/!important\s*$/, '')
+        .trimEnd()
+    const backgroundColor = String(
+        (trigger.backgroundColor?.[variant] as Record<string, unknown>)?.[
+            state
+        ] ?? 'transparent'
+    )
+
+    const surface = customTrigger ?? (
+        <Pressable
+            onPress={onPress}
+            disabled={disabled}
+            accessibilityRole="button"
+            accessibilityState={{ disabled, expanded: open }}
+            accessibilityLabel={label ?? placeholder}
+            style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: parseDimension(trigger.slot?.gap as string | number) ?? 8,
+                height: parseDimension(
+                    trigger.height?.[size]?.[variant] as string | number
+                ),
+                borderRadius:
+                    parseDimension(
+                        trigger.borderRadius?.[size]?.[variant] as
+                            | string
+                            | number
+                    ) ?? 10,
+                backgroundColor,
+                ...(outline !== 'none' ? parseBorder(outline) : null),
+                paddingTop: parseDimension(
+                    trigger.padding?.[size]?.[variant]?.top as string | number
+                ),
+                paddingBottom: parseDimension(
+                    trigger.padding?.[size]?.[variant]?.bottom as
+                        | string
+                        | number
+                ),
+                paddingLeft: parseDimension(
+                    trigger.padding?.[size]?.[variant]?.left as string | number
+                ),
+                paddingRight: parseDimension(
+                    trigger.padding?.[size]?.[variant]?.right as string | number
+                ),
+                opacity: disabled ? 0.5 : 1,
+            }}
+            testID={testID ? `${testID}-trigger` : undefined}
+        >
+            {slot ? (
+                <Slot
+                    maxHeight={
+                        parseDimension(
+                            trigger.slot?.width as string | number
+                        ) ?? 20
+                    }
+                    color={String(trigger.placeholder?.color ?? '#99A0AE')}
+                >
+                    {slot}
+                </Slot>
+            ) : null}
+            <View style={{ flex: 1 }}>
+                {valueText ?? (
+                    <Text
+                        color={String(trigger.placeholder?.color ?? '#99A0AE')}
+                        fontSize={
+                            trigger.placeholder?.fontSize as string | number
+                        }
+                        numberOfLines={1}
+                    >
+                        {placeholder}
+                    </Text>
+                )}
+            </View>
+            <ChevronDown
+                size={16}
+                color={String(trigger.placeholder?.color ?? '#99A0AE')}
+            />
+        </Pressable>
+    )
+
+    return (
+        <View
+            style={{
+                gap: parseDimension(tokens.gap as string | number) ?? 8,
+                // A field fills its container like the web trigger does,
+                // even under a centering parent.
+                alignSelf: 'stretch',
+            }}
+            testID={testID}
+        >
+            {label ? (
+                <View
+                    style={{
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        gap: 4,
+                    }}
+                >
+                    <Text
+                        color={String(
+                            tokens.label?.color?.[labelState] ?? '#2B303B'
+                        )}
+                        fontSize={tokens.label?.fontSize as string | number}
+                        fontWeight={tokens.label?.fontWeight as string | number}
+                    >
+                        {label}
+                    </Text>
+                    {required ? (
+                        <Text
+                            color={String(tokens.required?.color ?? '#E7000B')}
+                            fontSize={tokens.label?.fontSize as string | number}
+                            aria-hidden
+                        >
+                            *
+                        </Text>
+                    ) : null}
+                    {subLabel ? (
+                        <Text
+                            color={String(
+                                tokens.subLabel?.color?.[labelState] ??
+                                    '#717784'
+                            )}
+                            fontSize={
+                                tokens.subLabel?.fontSize as string | number
+                            }
+                        >
+                            {subLabel}
+                        </Text>
+                    ) : null}
+                </View>
+            ) : null}
+            {surface}
+            {error && errorMessage ? (
+                <Text
+                    color={String(tokens.errorMessage?.color ?? '#E7000B')}
+                    fontSize={tokens.errorMessage?.fontSize as string | number}
+                    accessibilityLiveRegion="polite"
+                    testID={testID ? `${testID}-error` : undefined}
+                >
+                    {errorMessage}
+                </Text>
+            ) : hintText ? (
+                <Text
+                    color={String(
+                        tokens.hintText?.color?.[labelState] ?? '#717784'
+                    )}
+                    fontSize={tokens.hintText?.fontSize as string | number}
+                    testID={testID ? `${testID}-hint` : undefined}
+                >
+                    {hintText}
+                </Text>
+            ) : null}
+        </View>
+    )
+}
+
+export default SelectTrigger

package/src/components/shared/selector/SelectorContent.tsx

@@ -0,0 +1,120 @@
+import { View } from 'react-native'
+import Text from '../../../primitives/Text'
+import { parseDimension } from '../../../adapters/cssStringAdapter'
+
+/**
+ * Label / subLabel / required-marker column shared by Checkbox, Radio and
+ * Switch — the native counterpart of web's `SelectorsLabel`/`SelectorsSubLabel`.
+ * Internal; the whole control row (including this content) is one Pressable,
+ * so tapping the label toggles the control (web's label-click parity).
+ *
+ * Typed structurally against the `content` subtree the three selector token
+ * types share, so no one component's token type is privileged.
+ */
+export type SelectorContentTokens = {
+    gap: unknown
+    label: {
+        gap: unknown
+        color: Record<string, unknown>
+        fontSize: Record<string, unknown>
+        fontWeight: Record<string, unknown>
+        lineHeight: Record<string, unknown>
+    }
+    subLabel: {
+        color: Record<string, unknown>
+        fontSize: Record<string, unknown>
+        fontWeight: Record<string, unknown>
+        lineHeight: Record<string, unknown>
+    }
+    required: { color: unknown }
+}
+
+export type SelectorContentProps = {
+    label?: string
+    subLabel?: string
+    required?: boolean
+    size: string
+    /** InteractionState key: 'default' | 'disabled' | 'error'. */
+    state: string
+    tokens: SelectorContentTokens
+    testID?: string
+}
+
+export function SelectorContent({
+    label,
+    subLabel,
+    required = false,
+    size,
+    state,
+    tokens,
+    testID,
+}: SelectorContentProps) {
+    if (!label && !subLabel) return null
+
+    return (
+        <View
+            style={{
+                flexShrink: 1,
+                gap: parseDimension(tokens.gap as string | number) ?? 0,
+            }}
+            testID={testID}
+        >
+            {label ? (
+                <View
+                    style={{
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        gap:
+                            parseDimension(
+                                tokens.label.gap as string | number
+                            ) ?? 4,
+                    }}
+                >
+                    <Text
+                        fontSize={
+                            tokens.label.fontSize[size] as string | number
+                        }
+                        fontWeight={
+                            tokens.label.fontWeight[size] as string | number
+                        }
+                        lineHeight={
+                            tokens.label.lineHeight[size] as string | number
+                        }
+                        color={String(tokens.label.color[state])}
+                        style={{ flexShrink: 1 }}
+                    >
+                        {label}
+                    </Text>
+                    {required && (
+                        // Visual-only: "required" reaches assistive tech
+                        // through the control's accessibility props.
+                        <Text
+                            color={String(tokens.required.color)}
+                            accessible={false}
+                            importantForAccessibility="no-hide-descendants"
+                        >
+                            *
+                        </Text>
+                    )}
+                </View>
+            ) : null}
+            {subLabel ? (
+                <Text
+                    fontSize={tokens.subLabel.fontSize[size] as string | number}
+                    fontWeight={
+                        tokens.subLabel.fontWeight[size] as string | number
+                    }
+                    lineHeight={
+                        tokens.subLabel.lineHeight[size] as string | number
+                    }
+                    color={String(tokens.subLabel.color[state])}
+                    style={{ flexShrink: 1 }}
+                >
+                    {subLabel}
+                </Text>
+            ) : null}
+        </View>
+    )
+}
+
+SelectorContent.displayName = 'SelectorContent'