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

package/src/components/MultiSelect/MultiSelectMenuHeader.tsx

@@ -0,0 +1,156 @@
+import { memo, useCallback } from 'react'
+import { Check, Minus } from 'lucide-react-native'
+import { type MultiSelectV2TokensType } from '@juspay/blend-design-system/node'
+import { Pressable } from '../../primitives/Pressable'
+import { Text } from '../../primitives/Text'
+import { Block } from '../../primitives/Block'
+import { DropdownSearch } from '../shared/dropdown/DropdownSearch'
+import { parseBorder } from '../../adapters/cssStringAdapter'
+import type { ViewStyle } from 'react-native'
+
+/** Translate a web `borderBottom` shorthand into a bottom-only RN border. */
+function parseBottomBorder(
+    value: string | number | undefined
+): Partial<Pick<ViewStyle, 'borderBottomWidth' | 'borderBottomColor'>> {
+    if (value === undefined) return {}
+    const parsed = parseBorder(String(value))
+    const out: Partial<
+        Pick<ViewStyle, 'borderBottomWidth' | 'borderBottomColor'>
+    > = {}
+    if (parsed.borderWidth !== undefined)
+        out.borderBottomWidth = parsed.borderWidth
+    if (parsed.borderColor !== undefined)
+        out.borderBottomColor = parsed.borderColor
+    return out
+}
+
+/**
+ * Header row for the MultiSelect dropdown: optional select-all checkbox
+ * row + optional search input. The parent only mounts this header when at
+ * least one of the two is enabled, but each row is gated independently so
+ * search alone doesn't imply select-all (and vice versa).
+ */
+export type MultiSelectMenuHeaderProps = {
+    allSelected: boolean
+    someSelected: boolean
+    selectAllText: string
+    onSelectAllToggle: () => void
+    enableSelectAll: boolean
+    tokens: MultiSelectV2TokensType
+    searchValue: string
+    onSearchChange: (text: string) => void
+    searchPlaceholder?: string
+    enableSearch: boolean
+    testID?: string
+}
+
+function MultiSelectMenuHeaderImpl({
+    allSelected,
+    someSelected,
+    selectAllText,
+    onSelectAllToggle,
+    enableSelectAll,
+    tokens,
+    searchValue,
+    onSearchChange,
+    searchPlaceholder = 'Search...',
+    enableSearch,
+    testID,
+}: MultiSelectMenuHeaderProps) {
+    const headerTokens = tokens.menu.header
+    const selectAllTokens = tokens.menu.selectAll
+
+    const handlePress = useCallback(() => {
+        onSelectAllToggle()
+    }, [onSelectAllToggle])
+
+    return (
+        <Block
+            width="100%"
+            background={String(headerTokens.backgroundColor)}
+            style={{
+                paddingTop: 8,
+                ...parseBottomBorder(headerTokens.borderBottom),
+            }}
+        >
+            {enableSelectAll ? (
+                <Pressable
+                    flexDirection="row"
+                    alignItems="center"
+                    gap={8}
+                    width="100%"
+                    paddingTop={selectAllTokens.paddingTop}
+                    paddingRight={
+                        headerTokens.selectAllRowPaddingRight ??
+                        selectAllTokens.paddingRight
+                    }
+                    paddingBottom={selectAllTokens.paddingBottom}
+                    paddingLeft={
+                        headerTokens.selectAllRowPaddingLeft ??
+                        selectAllTokens.paddingLeft
+                    }
+                    onPress={handlePress}
+                    accessibilityRole="checkbox"
+                    accessibilityState={{
+                        checked: allSelected
+                            ? true
+                            : someSelected
+                              ? 'mixed'
+                              : false,
+                    }}
+                    accessibilityLabel={selectAllText}
+                    testID={testID ? `${testID}-select-all` : undefined}
+                >
+                    {/* Checkbox indicator */}
+                    <Block
+                        width={16}
+                        height={16}
+                        borderRadius={4}
+                        background={
+                            allSelected || someSelected
+                                ? '#2563EB'
+                                : 'transparent'
+                        }
+                        style={{
+                            borderWidth: 2,
+                            borderColor:
+                                allSelected || someSelected
+                                    ? '#2563EB'
+                                    : '#D1D5DB',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                        }}
+                    >
+                        {allSelected ? (
+                            <Check size={12} color="#FFFFFF" />
+                        ) : someSelected ? (
+                            <Minus size={12} color="#FFFFFF" />
+                        ) : null}
+                    </Block>
+                    <Text fontSize={14} fontWeight="500" color="#374151">
+                        {selectAllText}
+                    </Text>
+                </Pressable>
+            ) : null}
+
+            {enableSearch ? (
+                <Block
+                    paddingTop={8}
+                    paddingRight={headerTokens.selectAllRowPaddingRight ?? 8}
+                    paddingBottom={4}
+                    paddingLeft={headerTokens.selectAllRowPaddingLeft ?? 8}
+                >
+                    <DropdownSearch
+                        value={searchValue}
+                        onChange={onSearchChange}
+                        placeholder={searchPlaceholder}
+                        testID={testID ? `${testID}-search` : undefined}
+                    />
+                </Block>
+            ) : null}
+        </Block>
+    )
+}
+
+export const MultiSelectMenuHeader = memo(MultiSelectMenuHeaderImpl)
+MultiSelectMenuHeader.displayName = 'MultiSelectMenuHeader'

package/src/components/MultiSelect/MultiSelectTrigger.tsx

@@ -0,0 +1,303 @@
+import React, {
+    forwardRef,
+    memo,
+    useCallback,
+    type ForwardRefExoticComponent,
+    type MemoExoticComponent,
+} from 'react'
+import { ChevronDown, X } from 'lucide-react-native'
+import type { View as RNView, GestureResponderEvent } from 'react-native'
+import {
+    SelectV2Variant,
+    SelectV2Size,
+    MultiSelectV2SelectionTagType,
+    type MultiSelectV2TokensType,
+} from '@juspay/blend-design-system/node'
+import { Pressable } from '../../primitives/Pressable'
+import { Text } from '../../primitives/Text'
+import { Block } from '../../primitives/Block'
+import { getFieldState, type FieldError } from '../shared/field/fieldState'
+import type { DropdownTriggerState } from '../shared/dropdown/dropdown.types'
+import type { SelectV2ErrorState } from '@juspay/blend-design-system/node'
+
+export type MultiSelectTriggerProps = {
+    label?: string
+    subLabel?: string
+    hintText?: string
+    required?: boolean
+    placeholder: string
+    selectionTagText: string | null
+    selectedCount: number
+    selectionTagType: MultiSelectV2SelectionTagType
+    size: SelectV2Size
+    variant: SelectV2Variant
+    disabled: boolean
+    state: DropdownTriggerState
+    error?: SelectV2ErrorState
+    tokens: MultiSelectV2TokensType
+    showClearButton: boolean
+    testID?: string
+    accessibilityLabel?: string
+    onPress?: () => void
+    onClear?: () => void
+}
+
+function MultiSelectTriggerImpl(
+    props: MultiSelectTriggerProps,
+    ref: React.Ref<RNView>
+) {
+    const {
+        label,
+        subLabel,
+        hintText,
+        required = false,
+        placeholder,
+        selectionTagText,
+        selectedCount,
+        selectionTagType,
+        size,
+        variant,
+        disabled,
+        state,
+        error,
+        tokens,
+        showClearButton,
+        testID,
+        accessibilityLabel,
+        onPress,
+        onClear,
+    } = props
+
+    const fieldError: FieldError = error
+        ? { show: Boolean(error.show), message: error.message }
+        : undefined
+    const fieldState = getFieldState(fieldError, disabled)
+    const trigger = tokens.trigger
+    const hasSelection = selectionTagText !== null
+
+    const backgroundColor = String(
+        trigger.backgroundColor[variant][state] ??
+            trigger.backgroundColor[variant].closed
+    )
+    const border = trigger.outline[variant][state]
+    const height = trigger.height[size][variant]
+    const padding = trigger.padding[size][variant]
+    const borderRadius = trigger.borderRadius[size][variant]
+
+    const tagTokens = trigger.selectionTag[variant][selectionTagType]
+    const chevronTokens = trigger.chevron
+    const clearTokens = trigger.clearButton
+
+    const handleClear = useCallback(
+        (e?: GestureResponderEvent) => {
+            e?.stopPropagation?.()
+            onClear?.()
+        },
+        [onClear]
+    )
+
+    const showError = Boolean(fieldError?.show && fieldError?.message)
+    const stateKey = fieldState as string
+
+    return (
+        <>
+            {label ? (
+                <Block
+                    flexDirection="row"
+                    alignItems="center"
+                    gap={4}
+                    width="100%"
+                    testID={testID ? `${testID}-labels` : undefined}
+                >
+                    <Text
+                        fontSize={tokens.label.fontSize}
+                        fontWeight={tokens.label.fontWeight}
+                        color={String(
+                            tokens.label.color[
+                                stateKey as keyof typeof tokens.label.color
+                            ]
+                        )}
+                    >
+                        {label}
+                    </Text>
+                    {required ? (
+                        <Text
+                            color={String(tokens.required.color)}
+                            fontSize={tokens.label.fontSize}
+                            accessibilityElementsHidden
+                            importantForAccessibility="no-hide-descendants"
+                        >
+                            *
+                        </Text>
+                    ) : null}
+                    {subLabel ? (
+                        <Text
+                            fontSize={tokens.subLabel.fontSize}
+                            fontWeight={tokens.subLabel.fontWeight}
+                            color={String(
+                                tokens.subLabel.color[
+                                    stateKey as keyof typeof tokens.subLabel.color
+                                ]
+                            )}
+                        >
+                            ({subLabel})
+                        </Text>
+                    ) : null}
+                </Block>
+            ) : null}
+            <Pressable
+                ref={ref}
+                background={backgroundColor}
+                border={border ? String(border) : undefined}
+                borderRadius={borderRadius}
+                boxShadow={trigger.boxShadow[variant]}
+                paddingTop={padding.top}
+                paddingRight={padding.right}
+                paddingBottom={padding.bottom}
+                paddingLeft={padding.left}
+                flexDirection="row"
+                alignItems="center"
+                gap={trigger.slot.gap}
+                width="100%"
+                height={height}
+                disabled={disabled}
+                onPress={onPress}
+                accessibilityRole="button"
+                accessibilityLabel={accessibilityLabel ?? label ?? placeholder}
+                accessibilityState={{
+                    disabled,
+                    expanded: state === 'open',
+                }}
+                testID={testID}
+            >
+                {/* Content block: placeholder always visible (matching web);
+                    selection tag renders as a sibling beside it. Both
+                    share one nowrap row that truncates with ellipsis. */}
+                <Block
+                    flexDirection="row"
+                    alignItems="center"
+                    width="100%"
+                    flexShrink={1}
+                    minWidth={0}
+                    overflow="hidden"
+                >
+                    <Text
+                        fontSize={trigger.placeholder.fontSize}
+                        fontWeight={trigger.placeholder.fontWeight}
+                        color={String(trigger.placeholder.color)}
+                        style={{ flexShrink: 0 }}
+                        numberOfLines={1}
+                    >
+                        {placeholder}
+                    </Text>
+
+                    {hasSelection &&
+                    selectionTagType === MultiSelectV2SelectionTagType.TEXT ? (
+                        <Text
+                            fontSize={trigger.selectedValue.fontSize}
+                            fontWeight={tagTokens.fontWeight as string | number}
+                            color={String(tagTokens.color)}
+                            style={{
+                                flexShrink: 1,
+                                minWidth: 0,
+                                marginLeft: 4,
+                            }}
+                            numberOfLines={1}
+                        >
+                            {selectionTagText}
+                        </Text>
+                    ) : null}
+
+                    {hasSelection &&
+                    selectionTagType === MultiSelectV2SelectionTagType.COUNT &&
+                    tagTokens.backgroundColor !== 'transparent' ? (
+                        <Block
+                            backgroundColor={String(tagTokens.backgroundColor)}
+                            paddingTop={tagTokens.paddingTop}
+                            paddingRight={tagTokens.paddingRight}
+                            paddingBottom={tagTokens.paddingBottom}
+                            paddingLeft={tagTokens.paddingLeft}
+                            borderRadius={4}
+                            style={{ marginLeft: 4 }}
+                        >
+                            <Text
+                                fontSize={trigger.selectedValue.fontSize}
+                                fontWeight={Number(tagTokens.fontWeight) || 500}
+                                color={String(tagTokens.color)}
+                            >
+                                {selectedCount}
+                            </Text>
+                        </Block>
+                    ) : null}
+                </Block>
+
+                {showClearButton && hasSelection && clearTokens ? (
+                    <Pressable
+                        background={String(
+                            clearTokens.backgroundColor[state] ??
+                                clearTokens.backgroundColor.closed
+                        )}
+                        border={
+                            clearTokens.outline?.[state]
+                                ? String(clearTokens.outline[state])
+                                : undefined
+                        }
+                        onPress={handleClear}
+                        accessibilityRole="button"
+                        accessibilityLabel="Clear selection"
+                        testID={testID ? `${testID}-clear` : undefined}
+                        width={clearTokens.width ?? 16}
+                        height={clearTokens.width ?? 16}
+                        flexDirection="row"
+                        alignItems="center"
+                        justifyContent="center"
+                    >
+                        <X size={12} color={String(clearTokens.color)} />
+                    </Pressable>
+                ) : null}
+
+                <ChevronDown
+                    size={chevronTokens.iconSize ?? 16}
+                    color={String(trigger.placeholder.color)}
+                />
+            </Pressable>
+            {showError ? (
+                <Block
+                    width="100%"
+                    testID={testID ? `${testID}-footer` : undefined}
+                >
+                    <Text
+                        accessibilityLiveRegion="polite"
+                        color={String(tokens.errorMessage.color)}
+                        fontSize={tokens.errorMessage.fontSize}
+                        fontWeight={tokens.errorMessage.fontWeight}
+                    >
+                        {fieldError?.message}
+                    </Text>
+                </Block>
+            ) : hintText ? (
+                <Block
+                    width="100%"
+                    testID={testID ? `${testID}-footer` : undefined}
+                >
+                    <Text
+                        color={String(tokens.hintText.color.default)}
+                        fontSize={tokens.hintText.fontSize}
+                        fontWeight={tokens.hintText.fontWeight}
+                    >
+                        {hintText}
+                    </Text>
+                </Block>
+            ) : null}
+        </>
+    )
+}
+
+export const MultiSelectTrigger = memo(
+    forwardRef(MultiSelectTriggerImpl)
+) as MemoExoticComponent<
+    ForwardRefExoticComponent<
+        MultiSelectTriggerProps & { ref?: React.Ref<RNView> }
+    >
+>
+MultiSelectTrigger.displayName = 'MultiSelectTrigger'

package/src/components/MultiSelect/index.ts

@@ -0,0 +1,15 @@
+export { default as MultiSelect } from './MultiSelect'
+export type {
+    MultiSelectNativeProps,
+    MultiSelectRef,
+    MultiSelectAction,
+} from './multiSelect.types'
+export type {
+    MultiSelectV2ItemType,
+    MultiSelectV2GroupType,
+    SelectV2Alignment,
+    SelectV2Variant,
+    SelectV2Size,
+    SelectV2Side,
+    MultiSelectV2SelectionTagType,
+} from './multiSelect.types'

package/src/components/MultiSelect/multiSelect.types.ts

@@ -0,0 +1,96 @@
+import type { ReactElement, ReactNode } from 'react'
+import type { View as RNView } from 'react-native'
+import type {
+    SelectV2Alignment,
+    SelectV2Variant,
+    SelectV2Size,
+    SelectV2Side,
+    MultiSelectV2ItemType,
+    MultiSelectV2GroupType,
+    MultiSelectV2SelectionTagType,
+    SelectV2ErrorState,
+    SelectV2SearchConfig,
+} from '@juspay/blend-design-system/node'
+
+/**
+ * MultiSelect — React Native implementation of web's `MultiSelectV2`.
+ *
+ * A trigger button that opens a dropdown panel with multi-select items.
+ * Supports select-all, action buttons, maxSelections, clear button,
+ * search, and mobile bottom-sheet mode.
+ */
+export type MultiSelectAction = {
+    text: string
+    onClick: () => void
+    disabled?: boolean
+    loading?: boolean
+}
+
+export type MultiSelectNativeProps = {
+    label?: string
+    subLabel?: string
+    hintText?: string
+    required?: boolean
+
+    placeholder: string
+    size?: SelectV2Size
+    variant?: SelectV2Variant
+    selectionTagType?: MultiSelectV2SelectionTagType
+
+    items?: MultiSelectV2GroupType[]
+    selectedValues: string[]
+    /** Legacy per-item toggle callback. */
+    onChange?: (value: string) => void
+    /** Recommended: fires with the complete resulting selection. */
+    onSelectionChange?: (selectedValues: string[]) => void
+
+    search?: SelectV2SearchConfig
+    enableSelectAll?: boolean
+    selectAllText?: string
+    maxSelections?: number
+
+    slot?: ReactNode
+    customTrigger?: ReactElement
+
+    open?: boolean
+    onOpenChange?: (open: boolean) => void
+
+    usePanelOnMobile?: boolean
+
+    alignment?: SelectV2Alignment
+    side?: SelectV2Side
+    sideOffset?: number
+
+    error?: SelectV2ErrorState
+    disabled?: boolean
+
+    showActionButtons?: boolean
+    primaryAction?: MultiSelectAction & {
+        onClick: (selectedValues: string[]) => void
+    }
+    secondaryAction?: MultiSelectAction
+
+    showItemDividers?: boolean
+    showClearButton?: boolean
+    onClearAllClick?: () => void
+
+    enableVirtualization?: boolean
+
+    menuFooter?: ReactNode
+
+    testID?: string
+    accessibilityLabel?: string
+    style?: import('react-native').StyleProp<import('react-native').ViewStyle>
+}
+
+export type { MultiSelectV2ItemType }
+export type { MultiSelectV2GroupType }
+export type {
+    SelectV2Alignment,
+    SelectV2Variant,
+    SelectV2Size,
+    SelectV2Side,
+    MultiSelectV2SelectionTagType,
+}
+
+export type MultiSelectRef = RNView