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

package/src/components/shared/dropdown/DropdownList.tsx

@@ -0,0 +1,211 @@
+import { useCallback, memo } from 'react'
+import { FlatList, ScrollView, type ListRenderItem } from 'react-native'
+import { DropdownItem } from './DropdownItem'
+import { DropdownSeparator } from './DropdownSeparator'
+import { Text } from '../../../primitives/Text'
+import { Block } from '../../../primitives/Block'
+import { parseDimension } from '../../../adapters/cssStringAdapter'
+import type {
+    DropdownFlatRow,
+    DropdownItemAdapter,
+    DropdownItemTokens,
+} from './dropdown.types'
+
+/**
+ * Renders a list of `DropdownFlatRow`s — either in a `ScrollView` (default)
+ * or a `FlatList` (when `enableVirtualization` is set and the row count
+ * exceeds the threshold).
+ *
+ * Renders label rows as styled text, separator rows as `DropdownSeparator`,
+ * and item rows as `DropdownItem`.
+ */
+export type DropdownListProps<TItem = unknown> = {
+    rows: DropdownFlatRow<TItem>[]
+    itemTokens: DropdownItemTokens
+    separatorColor: string
+    separatorHeight?: string | number
+    separatorMargin?: string | number
+    labelColor: string
+    labelFontSize: string | number
+    labelFontWeight: string | number
+    labelPaddingTop?: string | number
+    labelPaddingBottom?: string | number
+    labelPaddingHorizontal?: string | number
+    onItemPress: (item: DropdownItemAdapter<TItem>['item']) => void
+    enableVirtualization?: boolean
+    virtualizationThreshold?: number
+    testID?: string
+}
+
+const VIRTUALIZATION_THRESHOLD = 30
+
+function DropdownListImpl<TItem>({
+    rows,
+    itemTokens,
+    separatorColor,
+    separatorHeight = 1,
+    separatorMargin,
+    labelColor,
+    labelFontSize,
+    labelFontWeight,
+    labelPaddingTop,
+    labelPaddingBottom,
+    labelPaddingHorizontal,
+    onItemPress,
+    enableVirtualization = false,
+    virtualizationThreshold = VIRTUALIZATION_THRESHOLD,
+    testID,
+}: DropdownListProps<TItem>) {
+    const renderItem = useCallback<ListRenderItem<DropdownFlatRow<TItem>>>(
+        ({ item: row }) => (
+            <RowRenderer
+                row={row}
+                itemTokens={itemTokens}
+                separatorColor={separatorColor}
+                separatorHeight={separatorHeight}
+                separatorMargin={separatorMargin}
+                labelColor={labelColor}
+                labelFontSize={labelFontSize}
+                labelFontWeight={labelFontWeight}
+                labelPaddingTop={labelPaddingTop}
+                labelPaddingBottom={labelPaddingBottom}
+                labelPaddingHorizontal={labelPaddingHorizontal}
+                onItemPress={onItemPress}
+            />
+        ),
+        [
+            itemTokens,
+            separatorColor,
+            separatorHeight,
+            separatorMargin,
+            labelColor,
+            labelFontSize,
+            labelFontWeight,
+            labelPaddingTop,
+            labelPaddingBottom,
+            labelPaddingHorizontal,
+            onItemPress,
+        ]
+    )
+
+    const keyExtractor = useCallback(
+        (row: DropdownFlatRow<TItem>) => row.id,
+        []
+    )
+
+    const shouldVirtualize =
+        enableVirtualization && rows.length > virtualizationThreshold
+
+    if (shouldVirtualize) {
+        return (
+            <FlatList
+                data={rows}
+                renderItem={renderItem}
+                keyExtractor={keyExtractor}
+                testID={testID}
+                keyboardShouldPersistTaps="handled"
+            />
+        )
+    }
+
+    return (
+        <ScrollView
+            testID={testID}
+            keyboardShouldPersistTaps="handled"
+            nestedScrollEnabled
+        >
+            {rows.map((row) => (
+                <RowRenderer
+                    key={row.id}
+                    row={row}
+                    itemTokens={itemTokens}
+                    separatorColor={separatorColor}
+                    separatorHeight={separatorHeight}
+                    separatorMargin={separatorMargin}
+                    labelColor={labelColor}
+                    labelFontSize={labelFontSize}
+                    labelFontWeight={labelFontWeight}
+                    labelPaddingTop={labelPaddingTop}
+                    labelPaddingBottom={labelPaddingBottom}
+                    labelPaddingHorizontal={labelPaddingHorizontal}
+                    onItemPress={onItemPress}
+                />
+            ))}
+        </ScrollView>
+    )
+}
+
+type RowRendererProps<TItem> = {
+    row: DropdownFlatRow<TItem>
+    itemTokens: DropdownItemTokens
+    separatorColor: string
+    separatorHeight: string | number
+    separatorMargin?: string | number
+    labelColor: string
+    labelFontSize: string | number
+    labelFontWeight: string | number
+    labelPaddingTop?: string | number
+    labelPaddingBottom?: string | number
+    labelPaddingHorizontal?: string | number
+    onItemPress: (item: DropdownItemAdapter<TItem>['item']) => void
+}
+
+function RowRenderer<TItem>({
+    row,
+    itemTokens,
+    separatorColor,
+    separatorHeight,
+    separatorMargin,
+    labelColor,
+    labelFontSize,
+    labelFontWeight,
+    labelPaddingTop,
+    labelPaddingBottom,
+    labelPaddingHorizontal,
+    onItemPress,
+}: RowRendererProps<TItem>) {
+    if (row.type === 'separator') {
+        return (
+            <DropdownSeparator
+                color={separatorColor}
+                height={separatorHeight}
+                margin={separatorMargin}
+            />
+        )
+    }
+
+    if (row.type === 'label') {
+        return (
+            <Block
+                paddingTop={parseDimension(labelPaddingTop) ?? 0}
+                paddingBottom={parseDimension(labelPaddingBottom) ?? 0}
+                paddingLeft={parseDimension(labelPaddingHorizontal) ?? 0}
+                paddingRight={parseDimension(labelPaddingHorizontal) ?? 0}
+            >
+                <Text
+                    fontSize={labelFontSize}
+                    fontWeight={labelFontWeight}
+                    color={labelColor}
+                    style={{ textTransform: 'uppercase' }}
+                >
+                    {row.label}
+                </Text>
+            </Block>
+        )
+    }
+
+    if (!row.item) return null
+
+    return (
+        <DropdownItem
+            adapter={row.item}
+            tokens={itemTokens}
+            onPress={onItemPress as (item: unknown) => void}
+        />
+    )
+}
+
+export const DropdownList = memo(
+    DropdownListImpl
+) as unknown as typeof DropdownListImpl
+;(DropdownList as { displayName?: string }).displayName = 'DropdownList'

package/src/components/shared/dropdown/DropdownSearch.tsx

@@ -0,0 +1,60 @@
+import { useCallback } from 'react'
+import { Search } from 'lucide-react-native'
+import { TextInput } from 'react-native'
+import { Block } from '../../../primitives/Block'
+
+/**
+ * Search input for the dropdown header. A bordered `TextInput` with a
+ * leading search icon. Calls `onChange` on every keystroke; the parent
+ * filters via `filterGroups` in `useMemo`.
+ */
+export type DropdownSearchProps = {
+    value: string
+    onChange: (text: string) => void
+    placeholder?: string
+    testID?: string
+    accessibilityLabel?: string
+}
+
+export function DropdownSearch({
+    value,
+    onChange,
+    placeholder = 'Search...',
+    testID,
+    accessibilityLabel = 'Search options',
+}: DropdownSearchProps) {
+    const handleChange = useCallback(
+        (text: string) => {
+            onChange(text)
+        },
+        [onChange]
+    )
+
+    return (
+        <Block
+            flexDirection="row"
+            alignItems="center"
+            gap={8}
+            width="100%"
+            testID={testID ? `${testID}-search` : undefined}
+        >
+            <Search size={16} color="#6B7280" />
+            <TextInput
+                value={value}
+                onChangeText={handleChange}
+                placeholder={placeholder}
+                placeholderTextColor="#9CA3AF"
+                accessibilityLabel={accessibilityLabel}
+                testID={testID ? `${testID}-search-input` : undefined}
+                style={{
+                    flex: 1,
+                    fontSize: 14,
+                    color: '#111827',
+                    paddingVertical: 4,
+                }}
+            />
+        </Block>
+    )
+}
+
+DropdownSearch.displayName = 'DropdownSearch'

package/src/components/shared/dropdown/DropdownSeparator.tsx

@@ -0,0 +1,38 @@
+import { type DimensionValue } from 'react-native'
+import { parseDimension } from '../../../adapters/cssStringAdapter'
+import { Separator } from '../../../primitives/Separator'
+
+/**
+ * Divider between dropdown groups. Renders as a thin horizontal line.
+ */
+export type DropdownSeparatorProps = {
+    color: string
+    height?: string | number
+    margin?: string | number
+    testID?: string
+}
+
+export function DropdownSeparator({
+    color,
+    height = 1,
+    margin,
+    testID,
+}: DropdownSeparatorProps) {
+    const marginValue = parseDimension(margin) as DimensionValue | undefined
+    return (
+        <Separator
+            orientation="horizontal"
+            length="100%"
+            thickness={height}
+            color={color}
+            style={
+                marginValue != null
+                    ? { marginVertical: marginValue }
+                    : undefined
+            }
+            testID={testID}
+        />
+    )
+}
+
+DropdownSeparator.displayName = 'DropdownSeparator'

package/src/components/shared/dropdown/dropdown.types.ts

@@ -0,0 +1,109 @@
+import type { ReactNode } from 'react'
+import type {
+    SelectV2ItemStates,
+    SelectV2TriggerStates,
+} from '@juspay/blend-design-system/node'
+
+/**
+ * Shared dropdown layer — the reusable pieces behind Menu, SingleSelect,
+ * and MultiSelect.
+ *
+ * Each component provides an *adapter* that maps its own item shape to
+ * `DropdownItemAdapter`, so `DropdownItem` / `DropdownList` /
+ * `DropdownContent` work for all three without knowing about their concrete
+ * item types. Mirrors web's `components/shared/` convention.
+ */
+
+export type DropdownPlacement = 'top' | 'bottom' | 'left' | 'right'
+export type DropdownAlignment = 'start' | 'center' | 'end'
+
+/**
+ * Normalized item shape — what every dropdown item looks like after the
+ * component adapter has mapped its own `MenuV2ItemType` /
+ * `SingleSelectV2ItemType` / `MultiSelectV2ItemType` to the common contract.
+ */
+export type DropdownItemAdapter<TItem = unknown> = {
+    /** Stable key for list reconciliation. */
+    id: string
+    primaryText: string
+    secondaryText?: string
+    leadingSlot?: ReactNode
+    trailingSlot?: ReactNode
+    /**
+     * Renders before `leadingSlot`, outside the slot container — for controls
+     * like the Checkbox in MultiSelect that need their own interactivity.
+     */
+    leadingAccessory?: ReactNode
+    disabled?: boolean
+    isSelected?: boolean
+    hasSubMenu?: boolean
+    variant?: 'default' | 'primary' | 'danger'
+    /** The original item, passed back when the row is pressed. */
+    item: TItem
+}
+
+export type DropdownFlatRow<TItem = unknown> = {
+    type: 'label' | 'separator' | 'item'
+    id: string
+    item?: DropdownItemAdapter<TItem>
+    label?: string
+    groupId: number
+}
+
+/**
+ * Item state resolution for native. There is no hover/focus on touch, so the
+ * states that matter are: `default`, `active` (pressed), `disabled`, and
+ * `selected`. The `Pressable` primitive handles `active` via
+ * `activeBackground`; `selected` and `disabled` are resolved from item data.
+ */
+export type DropdownItemState = SelectV2ItemStates
+export type DropdownTriggerState = SelectV2TriggerStates
+
+export type DropdownItemTokens = {
+    paddingTop: string | number | undefined
+    paddingRight: string | number | undefined
+    paddingBottom: string | number | undefined
+    paddingLeft: string | number | undefined
+    margin: string | number | undefined
+    gap: string | number | undefined
+    borderRadius: string | number | undefined
+    backgroundColor: Record<DropdownItemState, string>
+    text: {
+        fontSize: string | number | undefined
+        fontWeight: string | number | undefined
+        lineHeight?: string | number | undefined
+        color: Record<DropdownItemState, string>
+        subText: {
+            fontSize: string | number | undefined
+            fontWeight: string | number | undefined
+            lineHeight?: string | number | undefined
+            color: Record<DropdownItemState, string>
+        }
+        leftSlot: {
+            maxWidth?: string | number | undefined
+            maxHeight: string | number | undefined
+        }
+        checkmark?: {
+            position: 'leading' | 'trailing'
+            width: string | number
+            color: string
+        }
+        rightChevron: {
+            color: string
+            width: string | number
+        }
+    }
+}
+
+export type DropdownContentTokens = {
+    backgroundColor: string
+    border: string
+    borderRadius: string | number | undefined
+    boxShadow?: string
+    paddingTop: string | number | undefined
+    paddingRight: string | number | undefined
+    paddingBottom: string | number | undefined
+    paddingLeft: string | number | undefined
+    minWidth?: string | number | undefined
+    maxWidth?: string | number | undefined
+}

package/src/components/shared/dropdown/dropdownFilter.ts

@@ -0,0 +1,60 @@
+/**
+ * Pure group/item filter — recursive for sub-menus.
+ *
+ * Mirrors web's `filterMenuV2Groups` / `filterMultiSelectV2MenuGroups`:
+ * case-insensitive substring match on primary + secondary text, preserving
+ * sub-menu structure (a parent that matches stays even if its children do
+ * not; children that match stay even if the parent does not).
+ */
+
+export type FilterableItem<TItem = unknown> = {
+    primaryText: string
+    secondaryText?: string
+    subItems?: FilterableItem<TItem>[]
+}
+
+/**
+ * Filter a single item against a query. Returns the item (with filtered
+ * sub-items) if it or any descendant matches, or `null` otherwise.
+ */
+export function filterItem<TItem extends FilterableItem>(
+    item: TItem,
+    queryLower: string
+): TItem | null {
+    const matches =
+        item.primaryText.toLowerCase().includes(queryLower) ||
+        (item.secondaryText != null &&
+            item.secondaryText.toLowerCase().includes(queryLower))
+
+    if (item.subItems) {
+        const filteredSubItems = item.subItems
+            .map((sub) => filterItem(sub, queryLower))
+            .filter((x): x is TItem => x !== null)
+        if (filteredSubItems.length > 0 || matches) {
+            return { ...item, subItems: filteredSubItems }
+        }
+        return null
+    }
+
+    return matches ? item : null
+}
+
+/**
+ * Filter a list of groups. Groups with no surviving items are dropped.
+ */
+export function filterGroups<
+    TItem extends FilterableItem<TItem>,
+    TGroup extends { items: TItem[] },
+>(groups: TGroup[], query: string): TGroup[] {
+    if (!query) return groups
+    const queryLower = query.toLowerCase()
+    return groups
+        .map((group) => {
+            const filteredItems = group.items
+                .map((item) => filterItem(item, queryLower))
+                .filter((x): x is TItem => x !== null)
+            if (filteredItems.length === 0) return null
+            return { ...group, items: filteredItems }
+        })
+        .filter((x): x is TGroup => x !== null)
+}

package/src/components/shared/dropdown/dropdownFlatten.ts

@@ -0,0 +1,49 @@
+import type { DropdownFlatRow, DropdownItemAdapter } from './dropdown.types'
+
+/**
+ * Flatten groups into a row list for rendering / virtualization.
+ *
+ * Emits `label` rows for group labels, `item` rows for items, and
+ * `separator` rows between groups that have `showSeparator` set. Mirrors
+ * web's `flattenMenuV2Groups` / `flattenMenuGroups`.
+ */
+export function flattenGroups<TItem>(
+    groups: Array<{
+        label?: string
+        items: DropdownItemAdapter<TItem>[]
+        showSeparator?: boolean
+    }>
+): DropdownFlatRow<TItem>[] {
+    const flattened: DropdownFlatRow<TItem>[] = []
+    let idCounter = 0
+
+    groups.forEach((group, groupId) => {
+        if (group.label) {
+            flattened.push({
+                id: `label-${groupId}`,
+                type: 'label',
+                label: group.label,
+                groupId,
+            })
+        }
+
+        group.items.forEach((item) => {
+            flattened.push({
+                id: item.id || `item-${idCounter++}`,
+                type: 'item',
+                item,
+                groupId,
+            })
+        })
+
+        if (groupId !== groups.length - 1 && group.showSeparator) {
+            flattened.push({
+                id: `separator-${groupId}`,
+                type: 'separator',
+                groupId,
+            })
+        }
+    })
+
+    return flattened
+}

package/src/components/shared/dropdown/index.ts

@@ -0,0 +1,25 @@
+export type {
+    DropdownPlacement,
+    DropdownAlignment,
+    DropdownItemAdapter,
+    DropdownFlatRow,
+    DropdownItemState,
+    DropdownTriggerState,
+    DropdownItemTokens,
+    DropdownContentTokens,
+} from './dropdown.types'
+
+export { useDropdown } from './useDropdown'
+export { DropdownContent } from './DropdownContent'
+export type { DropdownContentProps } from './DropdownContent'
+export { DropdownItem } from './DropdownItem'
+export type { DropdownItemProps } from './DropdownItem'
+export { DropdownSearch } from './DropdownSearch'
+export type { DropdownSearchProps } from './DropdownSearch'
+export { DropdownList } from './DropdownList'
+export type { DropdownListProps } from './DropdownList'
+export { DropdownSeparator } from './DropdownSeparator'
+export type { DropdownSeparatorProps } from './DropdownSeparator'
+export { filterGroups, filterItem } from './dropdownFilter'
+export type { FilterableItem } from './dropdownFilter'
+export { flattenGroups } from './dropdownFlatten'

package/src/components/shared/dropdown/useDropdown.ts

@@ -0,0 +1,76 @@
+import { useCallback, useMemo } from 'react'
+import { useControllableState } from '../../../hooks/useControllableState'
+import { useAnchoredPosition } from '../../../overlay/useAnchoredPosition'
+import { useNativeBreakpoint } from '../../../theme/useNativeBreakpoint'
+import type { DropdownAlignment, DropdownPlacement } from './dropdown.types'
+
+/**
+ * Open state + anchored positioning + mobile breakpoint, wired together.
+ *
+ * The shared hook behind Menu, SingleSelect, and MultiSelect. Each
+ * component passes its `open`/`onOpenChange` (controlled or not), the
+ * placement/alignment/offset from its props, and `usePanelOnMobile`; the
+ * hook returns the anchor ref, the content layout handler, the resolved
+ * `position`, and `shouldUseSheet` (true when the breakpoint is `sm` and
+ * `usePanelOnMobile` is set).
+ */
+export function useDropdown(options: {
+    open?: boolean
+    defaultOpen?: boolean
+    onOpenChange?: (open: boolean) => void
+    placement?: DropdownPlacement
+    alignment?: DropdownAlignment
+    offset?: number
+    usePanelOnMobile?: boolean
+}) {
+    const {
+        open: openProp,
+        defaultOpen = false,
+        onOpenChange,
+        placement = 'bottom',
+        alignment = 'start',
+        offset = 8,
+        usePanelOnMobile = true,
+    } = options
+
+    const [open, setOpen] = useControllableState(
+        openProp,
+        defaultOpen,
+        onOpenChange
+    )
+
+    const positioning = useAnchoredPosition({
+        open,
+        placement,
+        alignment,
+        offset,
+    })
+
+    const breakpoint = useNativeBreakpoint()
+    const shouldUseSheet = usePanelOnMobile && breakpoint === 'sm'
+
+    const handleOpen = useCallback(() => {
+        setOpen(!open)
+    }, [open, setOpen])
+
+    return useMemo(
+        () => ({
+            open,
+            setOpen,
+            handleOpen,
+            anchorRef: positioning.anchorRef,
+            onContentLayout: positioning.onContentLayout,
+            position: positioning.position,
+            shouldUseSheet,
+        }),
+        [
+            open,
+            setOpen,
+            handleOpen,
+            positioning.anchorRef,
+            positioning.onContentLayout,
+            positioning.position,
+            shouldUseSheet,
+        ]
+    )
+}

package/src/components/shared/field/FieldFooter.tsx

@@ -1,6 +1,6 @@
 import {
     InputSizeV2,
-    type TextInputV2TokensType,
+    type InputFooterV2Tokens,
 } from '@juspay/blend-design-system/node'
 import { Block } from '../../../primitives/Block'
 import { Text } from '../../../primitives/Text'
@@ -20,7 +20,7 @@ export type FieldFooterProps = {
     error?: FieldError
     hintText?: string
     size?: InputSizeV2
-    tokens: TextInputV2TokensType['bottomContainer']
+    tokens: InputFooterV2Tokens
     testID?: string
 }
 

package/src/components/shared/field/FieldLabels.tsx

@@ -1,7 +1,7 @@
 import {
     InputSizeV2,
     InputStateV2,
-    type TextInputV2TokensType,
+    type InputLabelsV2Tokens,
 } from '@juspay/blend-design-system/node'
 import { Block } from '../../../primitives/Block'
 import { Text } from '../../../primitives/Text'
@@ -25,7 +25,7 @@ export type FieldLabelsProps = {
     required?: boolean
     size?: InputSizeV2
     state?: InputStateV2
-    tokens: TextInputV2TokensType['topContainer']
+    tokens: InputLabelsV2Tokens
     testID?: string
 }
 

package/src/components/shared/group.ts

@@ -70,3 +70,28 @@ export function getGroupedBorderWidths(
     if (position !== 'center') return {}
     return { borderLeftWidth: 0, borderRightWidth: 0 }
 }
+
+/**
+ * A member's position from its index — what a group container injects into
+ * each child. Reimplements web's `Primitives/Group/utils.ts
+ * getGroupPosition`, horizontal-only (native groups have no vertical
+ * orientation yet); web does not export it from `/node`.
+ *
+ * A single member gets `undefined` so it keeps its full, ungrouped radius.
+ *
+ * ```
+ * getGroupPosition(0, 1) -> undefined
+ * getGroupPosition(0, 3) -> 'left'
+ * getGroupPosition(1, 3) -> 'center'
+ * getGroupPosition(2, 3) -> 'right'
+ * ```
+ */
+export function getGroupPosition(
+    index: number,
+    totalCount: number
+): GroupPosition | undefined {
+    if (totalCount <= 1) return undefined
+    if (index === 0) return 'left'
+    if (index === totalCount - 1) return 'right'
+    return 'center'
+}