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

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

@@ -0,0 +1,335 @@
+import {
+    SelectV2Variant,
+    SelectV2Size,
+    MultiSelectV2SelectionTagType,
+    type MultiSelectV2ItemType,
+    type MultiSelectV2GroupType,
+    type MultiSelectV2TokensType,
+    type SelectV2ItemStates,
+    getNextSelectionAfterToggle,
+    isBlockedByMaxSelections,
+    clampScopeToMaxSelections,
+    emitLegacyScopeChanges,
+} from '@juspay/blend-design-system/node'
+import type {
+    DropdownItemAdapter,
+    DropdownContentTokens,
+    DropdownItemTokens,
+    DropdownItemState,
+    DropdownTriggerState,
+} from '../shared/dropdown/dropdown.types'
+import type { FilterableItem } from '../shared/dropdown/dropdownFilter'
+
+export {
+    getNextSelectionAfterToggle,
+    isBlockedByMaxSelections,
+    clampScopeToMaxSelections,
+    emitLegacyScopeChanges,
+}
+
+/**
+ * Adapt a `MultiSelectV2ItemType` to the common `DropdownItemAdapter`.
+ * The selected state is derived by checking if `item.value` is in the
+ * `selectedValues` array.
+ */
+export function multiSelectItemAdapter(
+    item: MultiSelectV2ItemType,
+    index: number,
+    selectedValues: string[]
+): DropdownItemAdapter<MultiSelectV2ItemType> {
+    return {
+        id: `ms-item-${index}`,
+        primaryText: item.label,
+        secondaryText: item.subLabel,
+        leadingSlot: item.slot1,
+        trailingSlot: item.slot2,
+        disabled: item.disabled,
+        isSelected: selectedValues.includes(item.value),
+        hasSubMenu: Boolean(item.subMenu && item.subMenu.length > 0),
+        variant: 'default',
+        item,
+    }
+}
+
+/** Build a value→label map (ported from web, pure). */
+export function getValueLabelMap(
+    groups: MultiSelectV2GroupType[]
+): Record<string, string> {
+    const map: Record<string, string> = {}
+    const traverse = (items: MultiSelectV2ItemType[]) => {
+        for (const item of items) {
+            map[item.value] = item.label
+            if (item.subMenu) traverse(item.subMenu)
+        }
+    }
+    for (const group of groups) traverse(group.items)
+    return map
+}
+
+/**
+ * Compute select-all state (ported from web, pure).
+ * `allSelected` is true only when there are available values and every one
+ * is in the selected list. `someSelected` is true when any available value
+ * is selected.
+ */
+export function getSelectAllState(
+    selected: string[],
+    availableValues: string[]
+) {
+    const allSelected =
+        availableValues.length > 0 &&
+        availableValues.every((value) => selected.includes(value))
+    const someSelected = selected.some((value) =>
+        availableValues.includes(value)
+    )
+    return { allSelected, someSelected }
+}
+
+/**
+ * Collect all selectable values — not disabled, not alwaysSelected —
+ * recursing into sub-menus (ported from web, pure).
+ */
+export function getAllAvailableValues(
+    groups: MultiSelectV2GroupType[]
+): string[] {
+    const values: string[] = []
+    const collectValues = (items: MultiSelectV2ItemType[]) => {
+        items.forEach((item) => {
+            if (!item.disabled && !item.alwaysSelected) {
+                values.push(item.value)
+            }
+            if (item.subMenu) collectValues(item.subMenu)
+        })
+    }
+    groups.forEach((group) => collectValues(group.items))
+    return values
+}
+
+/**
+ * Handle a select-all gesture (ported from web, pure). Computes the scoped
+ * values (clamped to maxSelections on the select branch), emits the legacy
+ * per-item `onChange` calls, and returns the resulting selection for the
+ * aggregate `onSelectionChange` callback.
+ */
+export function handleSelectAll(
+    selectAll: boolean,
+    items: MultiSelectV2GroupType[],
+    selectedValues: string[],
+    onChange?: (value: string) => void,
+    maxSelections?: number
+): string[] {
+    const availableValues = getAllAvailableValues(items)
+    const scopedValues = selectAll
+        ? clampScopeToMaxSelections(
+              selectedValues,
+              availableValues,
+              maxSelections
+          )
+        : availableValues
+
+    emitLegacyScopeChanges(selectAll, scopedValues, selectedValues, onChange)
+
+    // Compute the resulting selection
+    const selectedSet = new Set(selectedValues)
+    if (selectAll) {
+        // Add all scoped values
+        scopedValues.forEach((v) => selectedSet.add(v))
+    } else {
+        // Remove all scoped values
+        scopedValues.forEach((v) => selectedSet.delete(v))
+    }
+    return Array.from(selectedSet)
+}
+
+/** Filter a single item (ported from web, pure). */
+export function getFilteredMenuItem(
+    item: MultiSelectV2ItemType,
+    queryLower: string
+): MultiSelectV2ItemType | null {
+    const matches =
+        (item.label && item.label.toLowerCase().includes(queryLower)) ||
+        (item.subLabel && item.subLabel.toLowerCase().includes(queryLower))
+
+    if (item.subMenu) {
+        const filteredSubItems = item.subMenu
+            .map((subItem) => getFilteredMenuItem(subItem, queryLower))
+            .filter(Boolean) as MultiSelectV2ItemType[]
+        if (filteredSubItems.length > 0 || matches) {
+            return { ...item, subMenu: filteredSubItems }
+        }
+        return null
+    }
+    return matches ? item : null
+}
+
+/** Filter groups (ported from web, pure). */
+export function filterMultiSelectV2MenuGroups(
+    groups: MultiSelectV2GroupType[],
+    searchText: string
+): MultiSelectV2GroupType[] {
+    if (!searchText) return groups
+    const queryLower = searchText.toLowerCase()
+    return groups
+        .map((group) => {
+            const filteredItems = group.items
+                .map((item) => getFilteredMenuItem(item, queryLower))
+                .filter(Boolean) as MultiSelectV2ItemType[]
+            if (filteredItems.length === 0) return null
+            return { ...group, items: filteredItems }
+        })
+        .filter(Boolean) as MultiSelectV2GroupType[]
+}
+
+/** Flatten groups (ported from web, pure). */
+export function flattenMenuGroups(groups: MultiSelectV2GroupType[]): Array<{
+    label?: string
+    items: DropdownItemAdapter<MultiSelectV2ItemType>[]
+    showSeparator?: boolean
+}> {
+    let globalIndex = 0
+    return groups.map((group) => ({
+        label: group.groupLabel,
+        items: group.items.map((item) =>
+            multiSelectItemAdapter(item, globalIndex++, [])
+        ),
+        showSeparator: group.showSeparator,
+    }))
+}
+
+/** Convert a MultiSelect item to a filterable shape. */
+export function toFilterableItem(
+    item: MultiSelectV2ItemType
+): FilterableItem<MultiSelectV2ItemType> {
+    return {
+        primaryText: item.label,
+        secondaryText: item.subLabel,
+        subItems: item.subMenu?.map(toFilterableItem),
+    }
+}
+
+/** Map MultiSelectV2 content tokens to the shared `DropdownContentTokens`. */
+export function getMultiSelectContentTokens(
+    tokens: MultiSelectV2TokensType,
+    size: SelectV2Size,
+    variant: SelectV2Variant
+): DropdownContentTokens {
+    const menu = tokens.menu
+    return {
+        backgroundColor: String(menu.backgroundColor),
+        border: String(menu.border),
+        borderRadius: menu.borderRadius,
+        paddingTop: menu.padding[size][variant].top,
+        paddingRight: menu.padding[size][variant].right,
+        paddingBottom: menu.padding[size][variant].bottom,
+        paddingLeft: menu.padding[size][variant].left,
+        minWidth: menu.minWidth,
+    }
+}
+
+/** Map MultiSelectV2 item tokens to the shared `DropdownItemTokens`. */
+export function getMultiSelectItemTokens(
+    tokens: MultiSelectV2TokensType
+): DropdownItemTokens {
+    const item = tokens.menu.item
+    const states: DropdownItemState[] = [
+        'default',
+        'hover',
+        'active',
+        'focus',
+        'focusVisible',
+        'disabled',
+        'selected',
+    ]
+    const bgRecord = {} as Record<DropdownItemState, string>
+    const colorRecord = {} as Record<DropdownItemState, string>
+    const subColorRecord = {} as Record<DropdownItemState, string>
+    for (const s of states) {
+        bgRecord[s] = String(item.backgroundColor[s as SelectV2ItemStates])
+        colorRecord[s] = String(item.option.color[s as SelectV2ItemStates])
+        subColorRecord[s] = String(
+            item.description.color[s as SelectV2ItemStates]
+        )
+    }
+
+    return {
+        paddingTop: item.paddingTop,
+        paddingRight: item.paddingRight,
+        paddingBottom: item.paddingBottom,
+        paddingLeft: item.paddingLeft,
+        margin: item.margin,
+        gap: item.gap,
+        borderRadius: item.borderRadius,
+        backgroundColor: bgRecord,
+        text: {
+            fontSize: item.option.fontSize,
+            fontWeight: item.option.fontWeight,
+            color: colorRecord,
+            subText: {
+                fontSize: item.description.fontSize,
+                fontWeight: item.description.fontWeight,
+                color: subColorRecord,
+            },
+            leftSlot: {
+                maxWidth: 20,
+                maxHeight: 20,
+            },
+            rightChevron: {
+                color: '#6B7280',
+                width: 16,
+            },
+        },
+    }
+}
+
+/** Flatten groups with selected state into adapter-backed groups. */
+export function flattenMultiSelectGroups(
+    groups: MultiSelectV2GroupType[],
+    selectedValues: string[],
+    decorate?: (
+        adapter: DropdownItemAdapter<MultiSelectV2ItemType>
+    ) => DropdownItemAdapter<MultiSelectV2ItemType>
+): Array<{
+    label?: string
+    items: DropdownItemAdapter<MultiSelectV2ItemType>[]
+    showSeparator?: boolean
+}> {
+    let globalIndex = 0
+    return groups.map((group) => ({
+        label: group.groupLabel,
+        items: group.items.map((item) => {
+            const adapter = multiSelectItemAdapter(
+                item,
+                globalIndex++,
+                selectedValues
+            )
+            return decorate ? decorate(adapter) : adapter
+        }),
+        showSeparator: group.showSeparator,
+    }))
+}
+
+/** Resolve the trigger state for token lookup. */
+export function getTriggerState(
+    open: boolean,
+    disabled: boolean,
+    hasError: boolean
+): DropdownTriggerState {
+    if (disabled) return 'closed'
+    if (hasError) return 'error'
+    if (open) return 'open'
+    return 'closed'
+}
+
+/** Build the selection tag text for the trigger. */
+export function getSelectionTagText(
+    selectionTagType: MultiSelectV2SelectionTagType,
+    selectedValues: string[],
+    valueLabelMap: Record<string, string>
+): string | null {
+    if (selectedValues.length === 0) return null
+    if (selectionTagType === MultiSelectV2SelectionTagType.COUNT) {
+        return String(selectedValues.length)
+    }
+    // TEXT type: show comma-separated labels
+    return selectedValues.map((v) => valueLabelMap[v] ?? v).join(', ')
+}

package/src/components/NumberInput/NumberInput.tsx

@@ -0,0 +1,323 @@
+import { forwardRef, useState } from 'react'
+import { Pressable as RNPressable, View } from 'react-native'
+import type { AccessibilityActionEvent, View as RNView } from 'react-native'
+import { ChevronDown, ChevronUp } from 'lucide-react-native'
+import {
+    InputSizeV2,
+    NumberInputV2Direction,
+} from '@juspay/blend-design-system/node'
+import type { NumberInputV2TokensType } from '@juspay/blend-design-system/node'
+import { useNativeTokens } from '../../theme/useNativeTokens'
+import Block from '../../primitives/Block'
+import PrimitiveInput from '../../primitives/PrimitiveInput'
+import Text from '../../primitives/Text'
+import { FieldLabels } from '../shared/field/FieldLabels'
+import { FieldFooter } from '../shared/field/FieldFooter'
+import { getFieldState, getFieldVisualState } from '../shared/field/fieldState'
+import { parseDimension } from '../../adapters/cssStringAdapter'
+import type { NumberInputNativeProps } from './numberInput.types'
+import {
+    clampValueOnBlur,
+    getDisplayValue,
+    getRangeErrorMessage,
+    isStepDownDisabled,
+    isStepUpDisabled,
+    isUnitTooLong,
+    parseNumberInput,
+    sanitizeNumberInput,
+} from './numberInput.utils'
+
+/**
+ * Numeric field — the native port of web's `NumberInputV2`.
+ *
+ * Typing stays raw and sanitized; clamping happens on blur (web parity).
+ * Stepper buttons render when there is no unit, exactly web's rule
+ * (chevrons instead of web's Phosphor triangles — icon divergence). Out of
+ * range auto-raises the footer error. Announced as an adjustable with
+ * increment/decrement accessibility actions — more idiomatic than web's
+ * ARIA spinbutton.
+ */
+const NumberInput = forwardRef<RNView, NumberInputNativeProps>(
+    function NumberInput(
+        {
+            value,
+            onValueChange,
+            min,
+            max,
+            step = 1,
+            preventNegative = false,
+            unit,
+            unitDirection = NumberInputV2Direction.RIGHT,
+            label,
+            subLabel,
+            size = InputSizeV2.MD,
+            error,
+            hintText,
+            required = false,
+            disabled = false,
+            placeholder,
+            testID,
+            accessibilityLabel,
+            style,
+            inputRef,
+        },
+        ref
+    ) {
+        const tokens =
+            useNativeTokens<NumberInputV2TokensType>('NUMBER_INPUT_V2')
+        const [focused, setFocused] = useState(false)
+        const [internal, setInternal] = useState(
+            value === null ? '' : String(value)
+        )
+
+        const unitTooLong = isUnitTooLong(unit)
+        const showUnit = Boolean(unit) && !unitTooLong
+        const rangeMessage = getRangeErrorMessage(value, min, max)
+        const fieldError =
+            error?.show || rangeMessage || unitTooLong
+                ? {
+                      show: true,
+                      message:
+                          error?.message ??
+                          rangeMessage ??
+                          (unitTooLong
+                              ? `Unit must be at most 7 characters`
+                              : undefined),
+                  }
+                : undefined
+
+        const fieldState = getFieldState(fieldError, disabled)
+        const visualState = getFieldVisualState(fieldError, disabled, focused)
+        const container = tokens.inputContainer
+
+        const commit = (next: number | null) => {
+            onValueChange?.(next)
+        }
+
+        const handleChangeText = (raw: string) => {
+            const sanitized = sanitizeNumberInput(raw)
+            setInternal(sanitized)
+            commit(parseNumberInput(sanitized))
+        }
+
+        const handleFocus = () => {
+            setInternal(value === null ? '' : String(value))
+            setFocused(true)
+        }
+
+        const handleBlur = () => {
+            setFocused(false)
+            const clamped = clampValueOnBlur(
+                parseNumberInput(internal),
+                min,
+                max,
+                preventNegative
+            )
+            setInternal(clamped === null ? '' : String(clamped))
+            commit(clamped)
+        }
+
+        const stepBy = (direction: 1 | -1) => {
+            const next = clampValueOnBlur(
+                (value ?? 0) + direction * step,
+                min,
+                max,
+                preventNegative
+            )
+            setInternal(next === null ? '' : String(next))
+            commit(next)
+        }
+
+        const upDisabled = disabled || isStepUpDisabled(value, step, max)
+        const downDisabled =
+            disabled || isStepDownDisabled(value, step, min, preventNegative)
+
+        const onAccessibilityAction = (event: AccessibilityActionEvent) => {
+            if (event.nativeEvent.actionName === 'increment' && !upDisabled) {
+                stepBy(1)
+            }
+            if (event.nativeEvent.actionName === 'decrement' && !downDisabled) {
+                stepBy(-1)
+            }
+        }
+
+        const unitBox = showUnit && (
+            <View
+                style={{
+                    justifyContent: 'center',
+                    paddingHorizontal:
+                        parseDimension(
+                            tokens.unit.paddingRight[size] as string | number
+                        ) ?? 12,
+                }}
+                testID={testID ? `${testID}-unit` : undefined}
+            >
+                <Text
+                    fontSize={tokens.unit.fontSize[size] as string | number}
+                    fontWeight={tokens.unit.fontWeight[size] as string | number}
+                    aria-hidden
+                >
+                    {unit?.trim()}
+                </Text>
+            </View>
+        )
+
+        const stepper = !showUnit && (
+            <View
+                style={{
+                    justifyContent: 'center',
+                    width:
+                        parseDimension(
+                            container.stepperButton.width[size] as
+                                | string
+                                | number
+                        ) ?? 32,
+                    alignItems: 'center',
+                }}
+            >
+                <RNPressable
+                    onPress={() => stepBy(1)}
+                    disabled={upDisabled}
+                    accessibilityRole="button"
+                    accessibilityLabel={`Increase ${label ?? 'value'}`}
+                    hitSlop={4}
+                    testID={testID ? `${testID}-step-up` : undefined}
+                >
+                    <ChevronUp
+                        size={14}
+                        color={String(
+                            container.stepperButton.icon.color[
+                                upDisabled ? 'disabled' : 'default'
+                            ] ?? '#99A0AE'
+                        )}
+                    />
+                </RNPressable>
+                <RNPressable
+                    onPress={() => stepBy(-1)}
+                    disabled={downDisabled}
+                    accessibilityRole="button"
+                    accessibilityLabel={`Decrease ${label ?? 'value'}`}
+                    hitSlop={4}
+                    testID={testID ? `${testID}-step-down` : undefined}
+                >
+                    <ChevronDown
+                        size={14}
+                        color={String(
+                            container.stepperButton.icon.color[
+                                downDisabled ? 'disabled' : 'default'
+                            ] ?? '#99A0AE'
+                        )}
+                    />
+                </RNPressable>
+            </View>
+        )
+
+        return (
+            <Block
+                ref={ref}
+                gap={tokens.gap as string | number}
+                style={style}
+                testID={testID}
+            >
+                <FieldLabels
+                    label={label}
+                    sublabel={subLabel}
+                    required={required}
+                    size={size}
+                    state={fieldState}
+                    tokens={tokens.topContainer}
+                    testID={testID ? `${testID}-labels` : undefined}
+                />
+                <Block
+                    flexDirection="row"
+                    alignItems="stretch"
+                    border={String(container.border[visualState] ?? 'none')}
+                    backgroundColor={String(
+                        container.backgroundColor[visualState] ?? 'transparent'
+                    )}
+                    borderRadius={
+                        container.borderRadius[size] as string | number
+                    }
+                    overflow="hidden"
+                    testID={testID ? `${testID}-container` : undefined}
+                >
+                    {unitDirection === NumberInputV2Direction.LEFT && unitBox}
+                    <Block
+                        flexGrow={1}
+                        flexShrink={1}
+                        flexDirection="row"
+                        alignItems="center"
+                        paddingTop={
+                            container.paddingTop[size] as string | number
+                        }
+                        paddingBottom={
+                            container.paddingBottom[size] as string | number
+                        }
+                        paddingLeft={
+                            container.paddingLeft[size] as string | number
+                        }
+                        paddingRight={
+                            container.paddingRight[size] as string | number
+                        }
+                    >
+                        <PrimitiveInput
+                            ref={inputRef}
+                            value={getDisplayValue(internal, focused, value)}
+                            onChangeText={handleChangeText}
+                            keyboardType={
+                                preventNegative ? 'number-pad' : 'numeric'
+                            }
+                            placeholder={placeholder}
+                            placeholderColor={String(
+                                container.placeholder.color[visualState] ??
+                                    undefined
+                            )}
+                            fontSize={
+                                container.fontSize[size] as string | number
+                            }
+                            fontWeight={
+                                container.fontWeight[size] as string | number
+                            }
+                            lineHeight={
+                                container.lineHeight[size] as string | number
+                            }
+                            color={String(
+                                container.color[visualState] ?? '#000000'
+                            )}
+                            editable={!disabled}
+                            accessibilityLabel={accessibilityLabel ?? label}
+                            accessibilityRole="adjustable"
+                            accessibilityValue={{
+                                min,
+                                max,
+                                now: value ?? undefined,
+                            }}
+                            accessibilityActions={[
+                                { name: 'increment' },
+                                { name: 'decrement' },
+                            ]}
+                            onAccessibilityAction={onAccessibilityAction}
+                            accessibilityState={{ disabled }}
+                            onFocus={handleFocus}
+                            onBlur={handleBlur}
+                            testID={testID ? `${testID}-input` : undefined}
+                        />
+                    </Block>
+                    {unitDirection === NumberInputV2Direction.RIGHT && unitBox}
+                    {stepper}
+                </Block>
+                <FieldFooter
+                    error={fieldError}
+                    hintText={hintText}
+                    size={size}
+                    tokens={tokens.bottomContainer}
+                    testID={testID ? `${testID}-footer` : undefined}
+                />
+            </Block>
+        )
+    }
+)
+
+NumberInput.displayName = 'NumberInput'
+
+export default NumberInput

package/src/components/NumberInput/index.ts

@@ -0,0 +1,13 @@
+export { default as NumberInput } from './NumberInput'
+export type { NumberInputNativeProps } from './numberInput.types'
+export {
+    sanitizeNumberInput,
+    parseNumberInput,
+    clampValueOnBlur,
+    getDisplayValue,
+    getRangeErrorMessage,
+    isStepUpDisabled,
+    isStepDownDisabled,
+    isUnitTooLong,
+    UNIT_MAX_LENGTH,
+} from './numberInput.utils'