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

package/src/components/Modal/ModalHeader.tsx

@@ -0,0 +1,119 @@
+import { Pressable, View } from 'react-native'
+import { X } from 'lucide-react-native'
+import type { ModalV2TokensType } from '@juspay/blend-design-system/node'
+import { parseBorder, parseDimension } from '../../adapters/cssStringAdapter'
+import Text from '../../primitives/Text'
+
+/**
+ * Title/subtitle block with the header slot and close button. The divider
+ * under the header follows `showDivider` (the token's `borderBottom`).
+ * `header.maxHeight` is "20vh" on web — a viewport unit the adapters
+ * reject by design; the native header sizes to its content instead
+ * (grammar-contract exception).
+ */
+export function ModalHeader({
+    title,
+    subtitle,
+    headerSlot,
+    showCloseButton,
+    showDivider,
+    onClose,
+    tokens,
+    testID,
+}: {
+    title?: string
+    subtitle?: string
+    headerSlot?: React.ReactNode
+    showCloseButton: boolean
+    showDivider: boolean
+    onClose: () => void
+    tokens: ModalV2TokensType
+    testID?: string
+}) {
+    const header = tokens.header
+    if (!title && !subtitle && !headerSlot && !showCloseButton) return null
+
+    return (
+        <View
+            style={{
+                flexDirection: 'row',
+                alignItems: 'flex-start',
+                gap: parseDimension(header.slot.gap as string | number) ?? 8,
+                paddingTop: parseDimension(
+                    header.paddingTop as string | number
+                ),
+                paddingBottom: parseDimension(
+                    header.paddingBottom as string | number
+                ),
+                paddingLeft: parseDimension(
+                    header.paddingLeft as string | number
+                ),
+                paddingRight: parseDimension(
+                    header.paddingRight as string | number
+                ),
+                backgroundColor: String(
+                    header.backgroundColor ?? 'transparent'
+                ),
+                ...(showDivider
+                    ? parseBorder(String(header.borderBottom ?? 'none'))
+                    : null),
+                ...(showDivider ? { borderBottomWidth: 1 } : null),
+                borderLeftWidth: 0,
+                borderRightWidth: 0,
+                borderTopWidth: 0,
+            }}
+            testID={testID}
+        >
+            <View style={{ flex: 1, gap: 4 }}>
+                {title ? (
+                    <Text
+                        color={String(header.text.title.color ?? '#2B303B')}
+                        fontSize={header.text.title.fontSize as string | number}
+                        fontWeight={
+                            header.text.title.fontWeight as string | number
+                        }
+                        lineHeight={
+                            header.text.title.lineHeight as string | number
+                        }
+                        accessibilityRole="header"
+                    >
+                        {title}
+                    </Text>
+                ) : null}
+                {subtitle ? (
+                    <Text
+                        color={String(header.text.subtitle.color ?? '#525866')}
+                        fontSize={
+                            header.text.subtitle.fontSize as string | number
+                        }
+                        fontWeight={
+                            header.text.subtitle.fontWeight as string | number
+                        }
+                        lineHeight={
+                            header.text.subtitle.lineHeight as string | number
+                        }
+                    >
+                        {subtitle}
+                    </Text>
+                ) : null}
+            </View>
+            {headerSlot}
+            {showCloseButton ? (
+                <Pressable
+                    onPress={onClose}
+                    accessibilityRole="button"
+                    accessibilityLabel="Close"
+                    hitSlop={8}
+                    testID={testID ? `${testID}-close` : undefined}
+                >
+                    <X
+                        size={18}
+                        color={String(tokens.closeButton.color ?? '#717784')}
+                    />
+                </Pressable>
+            ) : null}
+        </View>
+    )
+}
+
+export default ModalHeader

package/src/components/Modal/index.ts

@@ -0,0 +1,2 @@
+export { default as Modal } from './Modal'
+export type { ModalNativeProps, ModalAction } from './modal.types'

package/src/components/Modal/modal.types.ts

@@ -0,0 +1,59 @@
+import type React from 'react'
+import type { GestureResponderEvent, StyleProp, ViewStyle } from 'react-native'
+import type {
+    ButtonV2Type,
+    ModalBaseProps,
+} from '@juspay/blend-design-system/node'
+
+/**
+ * A footer action. Web types these as `Omit<ButtonV2Props, ...>` — which has
+ * a platform-neutral core but drags DOM handlers; native takes the neutral
+ * fields and renders its own `Button`.
+ */
+export type ModalAction = {
+    text: string
+    onPress?: (event: GestureResponderEvent) => void
+    /** Defaults: primary action PRIMARY, secondary action SECONDARY. */
+    buttonType?: ButtonV2Type
+    disabled?: boolean
+    loading?: boolean
+    accessibilityLabel?: string
+}
+
+/**
+ * Props for the native `Modal` — the port of web's `ModalV2`.
+ *
+ * Derives from `ModalBaseProps`. Presentation follows the breakpoint:
+ * phones (`sm`) get a bottom sheet — exactly web's vaul-under-1024px
+ * behaviour, with `useDrawerOnMobile` omitted since the breakpoint
+ * decides — and tablets (`lg`) a centered dialog card.
+ *
+ * Deliberately omitted rather than accepted-and-ignored (compile errors):
+ * `isCustom` (web-internal layout switch), `skeleton` (deferred
+ * Wave-C-wide), and the DOM attribute spread. `dimensions` are numbers
+ * (web types them as CSS values) and apply to the `lg` card only.
+ */
+export type ModalNativeProps = ModalBaseProps & {
+    children?: React.ReactNode
+    primaryAction?: ModalAction
+    secondaryAction?: ModalAction
+    /** Replaces the built-in header entirely. */
+    customHeader?: React.ReactNode
+    /** Replaces the built-in footer entirely. */
+    customFooter?: React.ReactNode
+    /** Extra content rendered beside the title block. */
+    headerSlot?: React.ReactNode
+    dimensions?: {
+        width?: number
+        height?: number
+        minWidth?: number
+        maxWidth?: number
+        minHeight?: number
+        maxHeight?: number
+    }
+    /** Sheet-mode height cap as a window fraction. Default 0.9. */
+    maxHeightFraction?: number
+    testID?: string
+    /** Styles the modal surface (both presentations). */
+    style?: StyleProp<ViewStyle>
+}

package/src/components/MultiSelect/MultiSelect.tsx

@@ -0,0 +1,376 @@
+import React, { forwardRef, memo, useCallback, useMemo, useState } from 'react'
+import { View } from 'react-native'
+import { Checkbox } from '../Checkbox'
+import {
+    SelectV2Alignment,
+    SelectV2Side,
+    SelectV2Variant,
+    SelectV2Size,
+    SelectorV2Size,
+    MultiSelectV2SelectionTagType,
+    type MultiSelectV2TokensType,
+} 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, useDropdown } from '../shared/dropdown'
+import { flattenGroups } from '../shared/dropdown/dropdownFlatten'
+import { MultiSelectTrigger } from './MultiSelectTrigger'
+import { MultiSelectMenuHeader } from './MultiSelectMenuHeader'
+import { MultiSelectMenuActions } from './MultiSelectMenuActions'
+import {
+    getMultiSelectContentTokens,
+    getMultiSelectItemTokens,
+    getTriggerState,
+    getValueLabelMap,
+    getSelectionTagText,
+    getSelectAllState,
+    getAllAvailableValues,
+    handleSelectAll,
+    filterMultiSelectV2MenuGroups,
+    flattenMultiSelectGroups,
+    getNextSelectionAfterToggle as toggleSelection,
+    isBlockedByMaxSelections as isBlocked,
+} from './multiSelect.utils'
+import type {
+    MultiSelectNativeProps,
+    MultiSelectRef,
+} from './multiSelect.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',
+}
+
+/**
+ * MultiSelect — React Native implementation of web's `MultiSelectV2`.
+ *
+ * A trigger button opens a dropdown panel with multi-select items. Supports
+ * select-all, action buttons, maxSelections, clear button, search, and
+ * mobile bottom-sheet mode.
+ */
+const MultiSelect = forwardRef<MultiSelectRef, MultiSelectNativeProps>(
+    function MultiSelect(
+        {
+            label,
+            subLabel,
+            hintText,
+            required = false,
+            placeholder,
+            size = SelectV2Size.MD,
+            variant = SelectV2Variant.CONTAINER,
+            selectionTagType = MultiSelectV2SelectionTagType.COUNT,
+            items = [],
+            selectedValues,
+            onChange,
+            onSelectionChange,
+            search,
+            enableSelectAll = false,
+            selectAllText = 'Select All',
+            maxSelections,
+            customTrigger,
+            open: openProp,
+            onOpenChange,
+            usePanelOnMobile = true,
+            alignment = SelectV2Alignment.START,
+            side = SelectV2Side.BOTTOM,
+            sideOffset = 8,
+            error,
+            disabled = false,
+            showActionButtons = false,
+            primaryAction,
+            secondaryAction,
+            showClearButton = false,
+            onClearAllClick,
+            enableVirtualization = false,
+            menuFooter,
+            testID,
+            accessibilityLabel,
+        },
+        ref
+    ) {
+        const tokens =
+            useNativeTokens<MultiSelectV2TokensType>('MULTI_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 selectionTagText = getSelectionTagText(
+            selectionTagType,
+            selectedValues,
+            valueLabelMap
+        )
+
+        const contentTokens = useMemo(
+            () => getMultiSelectContentTokens(tokens, size, variant),
+            [tokens, size, variant]
+        )
+
+        const itemTokens = useMemo(
+            () => getMultiSelectItemTokens(tokens),
+            [tokens]
+        )
+
+        const enableSearch = search?.show ?? false
+
+        const filteredGroups = useMemo(() => {
+            if (!enableSearch || !searchText) return items
+            return filterMultiSelectV2MenuGroups(items, searchText)
+        }, [items, enableSearch, searchText])
+
+        const adapterGroups = useMemo(
+            () =>
+                flattenMultiSelectGroups(
+                    filteredGroups,
+                    selectedValues,
+                    (adapter) => ({
+                        ...adapter,
+                        leadingAccessory: (
+                            <View pointerEvents="none">
+                                <Checkbox
+                                    checked={Boolean(adapter.isSelected)}
+                                    disabled={Boolean(adapter.disabled)}
+                                    size={SelectorV2Size.SM}
+                                    accessibilityLabel={adapter.primaryText}
+                                />
+                            </View>
+                        ),
+                    })
+                ),
+            [filteredGroups, selectedValues]
+        )
+
+        const flatRows = useMemo(
+            () => flattenGroups(adapterGroups),
+            [adapterGroups]
+        )
+
+        const availableValues = useMemo(
+            () => getAllAvailableValues(items),
+            [items]
+        )
+        const { allSelected, someSelected } = getSelectAllState(
+            selectedValues,
+            availableValues
+        )
+
+        const handleItemPress = useCallback(
+            (item: unknown) => {
+                const msItem = item as { value: string; disabled?: boolean }
+                if (isBlocked(selectedValues, msItem.value, maxSelections)) {
+                    return
+                }
+                const nextSelection = toggleSelection(
+                    selectedValues,
+                    msItem.value
+                )
+                onSelectionChange?.(nextSelection)
+                if (
+                    !selectedValues.includes(msItem.value) ||
+                    nextSelection.includes(msItem.value)
+                ) {
+                    // Emit legacy per-item callback only when the item is
+                    // being added (matching web's onChange semantics)
+                    if (
+                        nextSelection.includes(msItem.value) &&
+                        !selectedValues.includes(msItem.value)
+                    ) {
+                        onChange?.(msItem.value)
+                    } else if (
+                        !nextSelection.includes(msItem.value) &&
+                        selectedValues.includes(msItem.value)
+                    ) {
+                        onChange?.(msItem.value)
+                    }
+                }
+            },
+            [selectedValues, maxSelections, onSelectionChange, onChange]
+        )
+
+        const handleSelectAllToggle = useCallback(() => {
+            const nextSelection = handleSelectAll(
+                !allSelected,
+                items,
+                selectedValues,
+                onChange,
+                maxSelections
+            )
+            onSelectionChange?.(nextSelection)
+        }, [
+            allSelected,
+            items,
+            selectedValues,
+            onChange,
+            maxSelections,
+            onSelectionChange,
+        ])
+
+        const handleClear = useCallback(() => {
+            onSelectionChange?.([])
+            onClearAllClick?.()
+        }, [onSelectionChange, onClearAllClick])
+
+        React.useEffect(() => {
+            if (!dropdown.open) setSearchText('')
+        }, [dropdown.open])
+
+        const triggerElement = customTrigger ? (
+            React.cloneElement(customTrigger, {
+                ref: dropdown.anchorRef,
+                onPress: dropdown.handleOpen,
+            } as React.Attributes)
+        ) : (
+            <MultiSelectTrigger
+                ref={dropdown.anchorRef}
+                label={label}
+                subLabel={subLabel}
+                hintText={hintText}
+                required={required}
+                placeholder={placeholder}
+                selectionTagText={selectionTagText}
+                selectedCount={selectedValues.length}
+                selectionTagType={selectionTagType}
+                size={size}
+                variant={variant}
+                disabled={disabled}
+                state={triggerState}
+                error={error}
+                tokens={tokens}
+                showClearButton={showClearButton}
+                testID={testID ? `${testID}-trigger` : undefined}
+                accessibilityLabel={accessibilityLabel}
+                onPress={dropdown.handleOpen}
+                onClear={handleClear}
+            />
+        )
+
+        const content = (
+            <>
+                {enableSelectAll || enableSearch ? (
+                    <MultiSelectMenuHeader
+                        allSelected={allSelected}
+                        someSelected={someSelected}
+                        selectAllText={selectAllText}
+                        onSelectAllToggle={handleSelectAllToggle}
+                        enableSelectAll={enableSelectAll}
+                        tokens={tokens}
+                        searchValue={searchText}
+                        onSearchChange={setSearchText}
+                        searchPlaceholder={search?.placeholder}
+                        enableSearch={enableSearch}
+                        testID={testID}
+                    />
+                ) : null}
+                <Block paddingTop={enableSelectAll || enableSearch ? 8 : 0}>
+                    <DropdownList
+                        rows={flatRows}
+                        itemTokens={itemTokens}
+                        separatorColor={String(
+                            tokens.menu.item.seperator.color
+                        )}
+                        separatorHeight={tokens.menu.item.seperator.height}
+                        separatorMargin={tokens.menu.item.seperator.margin}
+                        labelColor={String(
+                            tokens.menu.item.optionsLabel.color.default
+                        )}
+                        labelFontSize={
+                            tokens.menu.item.optionsLabel.fontSize ?? 14
+                        }
+                        labelFontWeight={
+                            tokens.menu.item.optionsLabel.fontWeight ?? '500'
+                        }
+                        labelPaddingTop={
+                            tokens.menu.item.optionsLabel.paddingTop
+                        }
+                        labelPaddingBottom={
+                            tokens.menu.item.optionsLabel.paddingBottom
+                        }
+                        labelPaddingHorizontal={
+                            tokens.menu.item.optionsLabel.paddingLeft
+                        }
+                        onItemPress={handleItemPress}
+                        enableVirtualization={enableVirtualization}
+                        testID={testID ? `${testID}-list` : undefined}
+                    />
+                </Block>
+                {showActionButtons ? (
+                    <MultiSelectMenuActions
+                        primaryAction={primaryAction}
+                        secondaryAction={secondaryAction}
+                        tokens={tokens}
+                        selectedValues={selectedValues}
+                        testID={testID ? `${testID}-actions` : undefined}
+                    />
+                ) : null}
+                {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 ?? 'Multi-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 ?? 'Multi-select'}
+                    testID={testID ? `${testID}-content` : undefined}
+                >
+                    {content}
+                </DropdownContent>
+            </View>
+        )
+    }
+)
+
+export default memo(MultiSelect)
+MultiSelect.displayName = 'MultiSelect'

package/src/components/MultiSelect/MultiSelectMenuActions.tsx

@@ -0,0 +1,65 @@
+import { memo } from 'react'
+import { type MultiSelectV2TokensType } from '@juspay/blend-design-system/node'
+import { Block } from '../../primitives/Block'
+import { Button } from '../Button'
+import type { MultiSelectAction } from './multiSelect.types'
+
+/**
+ * Footer actions for the MultiSelect dropdown: primary + secondary buttons.
+ */
+export type MultiSelectMenuActionsProps = {
+    primaryAction?: MultiSelectAction & {
+        onClick: (selectedValues: string[]) => void
+    }
+    secondaryAction?: MultiSelectAction
+    tokens: MultiSelectV2TokensType
+    selectedValues: string[]
+    testID?: string
+}
+
+function MultiSelectMenuActionsImpl({
+    primaryAction,
+    secondaryAction,
+    tokens,
+    selectedValues,
+    testID,
+}: MultiSelectMenuActionsProps) {
+    const actionsTokens = tokens.menu.actions
+    if (!primaryAction && !secondaryAction) return null
+
+    return (
+        <Block
+            flexDirection="row"
+            alignItems="center"
+            gap={actionsTokens.gap}
+            width="100%"
+            background={String(actionsTokens.backgroundColor)}
+            border={String(actionsTokens.borderTop)}
+            paddingTop={actionsTokens.paddingTop}
+            paddingRight={actionsTokens.paddingRight}
+            paddingBottom={actionsTokens.paddingBottom}
+            paddingLeft={actionsTokens.paddingLeft}
+            testID={testID}
+        >
+            {secondaryAction ? (
+                <Button
+                    text={secondaryAction.text}
+                    onPress={() => secondaryAction.onClick()}
+                    disabled={secondaryAction.disabled}
+                    loading={secondaryAction.loading}
+                />
+            ) : null}
+            {primaryAction ? (
+                <Button
+                    text={primaryAction.text}
+                    onPress={() => primaryAction.onClick(selectedValues)}
+                    disabled={primaryAction.disabled}
+                    loading={primaryAction.loading}
+                />
+            ) : null}
+        </Block>
+    )
+}
+
+export const MultiSelectMenuActions = memo(MultiSelectMenuActionsImpl)
+MultiSelectMenuActions.displayName = 'MultiSelectMenuActions'