@juspay/blend-design-system 0.0.37-beta.8 → 0.0.37

package/lib/components/InputsV2/UploadV2/UploadV2.tsx

@@ -0,0 +1,336 @@
+import { forwardRef, useEffect, useId, useMemo, useRef, useState } from 'react'
+import Block from '../../Primitives/Block/Block'
+import {
+    UploadDragState,
+    UploadErrorReason,
+    UploadFileV2,
+    UploadState,
+    UploadV2Props,
+} from './UploadV2.types'
+import InputLabelsV2 from '../utils/InputLabels/InputLabelsV2'
+import { InputLabelsV2Tokens } from '../inputV2.tokens'
+import { useResponsiveTokens } from '../../../hooks/useResponsiveTokens'
+import type { UploadV2TokensType } from './UploadV2.tokens.types'
+import { InputSizeV2, InputStateV2, type AnyRef } from '../inputV2.types'
+import { createClickHandler, getFileId, isFileTypeAccepted } from './utils'
+import UploadContainerV2 from './UploadContainerV2'
+import { generateAccessibilityIds, setExternalRef } from '../utils/utils'
+import InputFooterV2 from '../utils/InputFooter/InputFooterV2'
+import { filterBlockedProps } from '../../../utils/prop-helpers'
+
+const UploadV2 = forwardRef<HTMLInputElement, UploadV2Props>(
+    (
+        {
+            id: providedId,
+            name = 'upload',
+            label,
+            subLabel,
+            description = '',
+            size = InputSizeV2.SM,
+            helpIconText,
+            required,
+            multiple = true,
+            acceptedFileTypes = [],
+            disabled = false,
+            slot,
+            files = [],
+            onChange,
+            state = UploadState.IDLE,
+            error = { show: false, message: '' },
+            maxSize = 0,
+            maxFiles = multiple ? undefined : 1,
+            errorText = '',
+            hintText,
+            progressBarValue = 0,
+            progressBarMaxWidth = '300px',
+            uploadHeaderText = 'Choose a file or drag & drop it here',
+            ...rest
+        },
+        ref
+    ) => {
+        const tokens = useResponsiveTokens<UploadV2TokensType>('UPLOADV2')
+        const fileInputRef = useRef<HTMLInputElement>(null)
+        const generatedUploadId = useId()
+        const uploadId = providedId ?? generatedUploadId
+        const { errorId, hintId } = generateAccessibilityIds(uploadId)
+        const filteredRest = filterBlockedProps(rest)
+        const [uploadState, setUploadState] = useState<UploadState>(
+            UploadState.IDLE
+        )
+        const [dragState, setDragState] = useState<UploadDragState>(
+            UploadDragState.DRAG_LEAVE
+        )
+        const isDisabled = disabled || state === UploadState.DISABLED
+        const isUploading = state === UploadState.UPLOADING
+        const isSuccess = state === UploadState.SUCCESS
+        const isInteractionBlocked = isDisabled || isUploading || isSuccess
+        const hasInvalidFiles = files.some((file) => !file.isValid)
+        const displayUploadState = isDisabled
+            ? UploadState.DISABLED
+            : hasInvalidFiles
+              ? UploadState.ERROR
+              : uploadState
+        const descriptionId =
+            description && files.length === 0 && !isUploading
+                ? `${uploadId}-description`
+                : undefined
+        const hasError = Boolean(
+            error?.show || displayUploadState === UploadState.ERROR
+        )
+        const showLabelError = Boolean(error?.show || (!multiple && hasError))
+        const effectiveErrorText = error?.message || errorText
+        const shouldDescribeError = Boolean(
+            hasError && (effectiveErrorText || (!multiple && hasInvalidFiles))
+        )
+        const ariaDescribedBy = useMemo(() => {
+            const ids = [
+                descriptionId,
+                hintText && !hasError ? hintId : undefined,
+                shouldDescribeError ? errorId : undefined,
+            ].filter(Boolean) as string[]
+            return ids.length > 0 ? ids.join(' ') : undefined
+        }, [
+            descriptionId,
+            errorId,
+            hasError,
+            hintId,
+            hintText,
+            shouldDescribeError,
+        ])
+        const setInputRef = (node: HTMLInputElement | null) => {
+            fileInputRef.current = node
+            setExternalRef(ref as AnyRef<HTMLInputElement>, node)
+        }
+
+        // Validate files and mark with isValid flag instead of filtering
+        const validateFiles = (newFiles: File[]): UploadFileV2[] => {
+            const limit = maxFiles ?? (multiple ? undefined : 1)
+            const remainingSlots =
+                limit && multiple ? limit - files.length : Infinity
+            let hasRejection = false
+
+            const validatedFiles: UploadFileV2[] = newFiles.map(
+                (file, index) => {
+                    // Check maxFiles limit
+                    if (limit && index >= remainingSlots) {
+                        hasRejection = true
+                        return {
+                            id: `${file.name}-${file.size}-${file.lastModified}-${Date.now()}-${index}`,
+                            file,
+                            isValid: false,
+                            errorReason: UploadErrorReason.MAX_FILES,
+                        }
+                    }
+
+                    // Check accepted file types for drag/drop and direct file input.
+                    if (!isFileTypeAccepted(file, acceptedFileTypes)) {
+                        hasRejection = true
+                        return {
+                            id: `${file.name}-${file.size}-${file.lastModified}-${Date.now()}-${index}`,
+                            file,
+                            isValid: false,
+                            errorReason: UploadErrorReason.INVALID_TYPE,
+                        }
+                    }
+
+                    // Check maxSize
+                    if (maxSize && file.size > maxSize) {
+                        hasRejection = true
+                        return {
+                            id: `${file.name}-${file.size}-${file.lastModified}-${Date.now()}-${index}`,
+                            file,
+                            isValid: false,
+                            errorReason: UploadErrorReason.OVERSIZED,
+                        }
+                    }
+
+                    return {
+                        id: `${file.name}-${file.size}-${file.lastModified}-${Date.now()}-${index}`,
+                        file,
+                        isValid: true,
+                    }
+                }
+            )
+
+            // Set state based on validation results
+            if (hasRejection) {
+                setUploadState(UploadState.ERROR)
+            } else if (validatedFiles.length > 0) {
+                setUploadState(UploadState.IDLE)
+            }
+
+            return validatedFiles
+        }
+        useEffect(() => {
+            if (state === UploadState.UPLOADING) {
+                setUploadState(UploadState.UPLOADING)
+            } else if (state === UploadState.SUCCESS) {
+                setUploadState(UploadState.SUCCESS)
+            } else if (state === UploadState.ERROR) {
+                setUploadState(UploadState.ERROR)
+            } else if (isDisabled) {
+                setUploadState(UploadState.DISABLED)
+            } else {
+                setUploadState(UploadState.IDLE)
+            }
+        }, [state, isDisabled])
+        return (
+            <Block
+                data-upload={label ?? ''}
+                data-status={isDisabled ? 'disabled' : 'enabled'}
+                display="flex"
+                flexDirection="column"
+                gap={tokens.gap}
+                width="100%"
+            >
+                <InputLabelsV2
+                    tokens={tokens.topContainer as InputLabelsV2Tokens}
+                    label={label}
+                    sublabel={subLabel}
+                    size={size}
+                    state={
+                        showLabelError
+                            ? InputStateV2.ERROR
+                            : displayUploadState === UploadState.DISABLED
+                              ? InputStateV2.DISABLED
+                              : InputStateV2.DEFAULT
+                    }
+                    helpIconText={helpIconText}
+                    inputId={uploadId}
+                    required={required}
+                />
+                {/* fake input file */}
+                <Block
+                    cursor={isDisabled ? 'not-allowed' : 'pointer'}
+                    onClick={(e) => {
+                        if (isInteractionBlocked) {
+                            e.preventDefault()
+                            return
+                        }
+                        createClickHandler(
+                            isDisabled,
+                            fileInputRef as React.RefObject<HTMLInputElement>
+                        )()
+                    }}
+                    onDragEnter={(e) => {
+                        if (isInteractionBlocked) {
+                            e.preventDefault()
+                            return
+                        }
+                        setDragState(UploadDragState.DRAG_ENTER)
+                    }}
+                    onDragLeave={(e) => {
+                        if (isInteractionBlocked) {
+                            e.preventDefault()
+                            return
+                        }
+                        setDragState(UploadDragState.DRAG_LEAVE)
+                    }}
+                    onDragOver={(e) => {
+                        if (isInteractionBlocked) {
+                            e.preventDefault()
+                            return
+                        }
+                        e.preventDefault()
+                        setDragState(UploadDragState.DRAG_OVER)
+                    }}
+                    onDrop={(e) => {
+                        if (isInteractionBlocked) {
+                            e.preventDefault()
+                            return
+                        }
+                        e.preventDefault()
+                        e.stopPropagation()
+                        const droppedFiles = Array.from(e.dataTransfer.files)
+                        const validatedFiles = validateFiles(droppedFiles)
+                        const updatedFiles = multiple
+                            ? [...files, ...validatedFiles]
+                            : validatedFiles[0]
+                              ? [validatedFiles[0]]
+                              : []
+                        onChange?.(updatedFiles)
+                        setDragState(UploadDragState.DRAG_LEAVE)
+                    }}
+                >
+                    <UploadContainerV2
+                        description={description}
+                        descriptionId={descriptionId}
+                        slot={slot}
+                        disabled={isDisabled}
+                        onClick={() => {
+                            fileInputRef.current?.click()
+                        }}
+                        tokens={tokens}
+                        files={files}
+                        multiple={multiple}
+                        onFileRemove={(fileId) => {
+                            const updatedFiles = files.filter(
+                                (f, index) => getFileId(f, index) !== fileId
+                            )
+                            // Check if any invalid files remain
+                            const hasInvalidFiles = updatedFiles.some(
+                                (f) => !f.isValid
+                            )
+                            setUploadState(
+                                hasInvalidFiles
+                                    ? UploadState.ERROR
+                                    : UploadState.IDLE
+                            )
+                            onChange?.(updatedFiles)
+                        }}
+                        state={displayUploadState}
+                        errorText={error?.message ? '' : errorText}
+                        errorId={error?.message ? undefined : errorId}
+                        progressBarValue={progressBarValue}
+                        progressBarMaxWidth={progressBarMaxWidth}
+                        uploadHeaderText={uploadHeaderText}
+                        dragState={dragState}
+                        maxSize={maxSize}
+                        maxFiles={maxFiles}
+                    />
+                </Block>
+
+                {/* real input file */}
+                <input
+                    {...filteredRest}
+                    ref={setInputRef}
+                    id={uploadId}
+                    name={name}
+                    type="file"
+                    multiple={multiple}
+                    accept={acceptedFileTypes.join(',')}
+                    onChange={(e) => {
+                        const newFiles = Array.from(e.target.files || [])
+                        const validatedFiles = validateFiles(newFiles)
+                        const updatedFiles = multiple
+                            ? [...files, ...validatedFiles]
+                            : validatedFiles[0]
+                              ? [validatedFiles[0]]
+                              : []
+                        onChange?.(updatedFiles)
+                        e.target.value = ''
+                    }}
+                    disabled={isDisabled}
+                    required={required}
+                    aria-required={required}
+                    aria-invalid={hasError}
+                    aria-describedby={ariaDescribedBy}
+                    aria-label={label ? undefined : 'File upload'}
+                    style={{ display: 'none' }}
+                />
+                <InputFooterV2
+                    tokens={tokens.bottomContainer}
+                    error={Boolean(error?.show && error?.message)}
+                    errorMessage={error?.message}
+                    hintText={hintText}
+                    errorId={errorId}
+                    hintId={hintId}
+                    size={size}
+                />
+            </Block>
+        )
+    }
+)
+
+UploadV2.displayName = 'UploadV2'
+export default UploadV2

package/lib/components/InputsV2/UploadV2/UploadV2.types.ts

@@ -0,0 +1,67 @@
+import { InputSizeV2 } from '../inputV2.types'
+
+export enum UploadState {
+    IDLE = 'idle',
+    UPLOADING = 'uploading',
+    SUCCESS = 'success',
+    ERROR = 'error',
+
+    DISABLED = 'disabled',
+}
+
+export enum UploadDragState {
+    DRAG_ENTER = 'drag_enter',
+    DRAG_LEAVE = 'drag_leave',
+    DRAG_OVER = 'drag_over',
+    DROP = 'drop',
+}
+
+export const UploadErrorReason = {
+    OVERSIZED: 'oversized',
+    MAX_FILES: 'maxFiles',
+    INVALID_TYPE: 'invalidType',
+} as const
+
+export type UploadErrorReasonValue =
+    (typeof UploadErrorReason)[keyof typeof UploadErrorReason]
+
+export type UploadFileV2 = {
+    id?: string
+    file: File
+    isValid: boolean
+    errorReason?: UploadErrorReasonValue
+}
+
+export type UploadV2Props = {
+    id?: string
+    name?: string
+    label?: string
+    subLabel?: string
+    description?: string
+    size?: InputSizeV2
+    helpIconText?: string
+    required?: boolean
+    multiple?: boolean
+    /** File types to accept (e.g., ['.jpg', '.png', 'image/*', '.pdf']) */
+    acceptedFileTypes?: string[]
+    disabled?: boolean
+    slot?: React.ReactNode
+    files?: UploadFileV2[]
+    /** Callback when files are selected or changed */
+    onChange?: (files: UploadFileV2[]) => void
+    state?: UploadState
+    error?: {
+        show: boolean
+        message?: string
+    }
+    errorText?: string
+    hintText?: string
+    maxSize?: number
+    maxFiles?: number
+    progressBarValue?: number
+    progressBarMaxWidth?: string
+    uploadHeaderText?: string
+} & Omit<
+    React.InputHTMLAttributes<HTMLInputElement>,
+    'size' | 'style' | 'className' | 'multiple' | 'slot' | 'onChange'
+>

package/lib/components/InputsV2/UploadV2/index.ts

@@ -0,0 +1,3 @@
+export { default as UploadV2 } from './UploadV2'
+export * from './UploadV2.types'
+export * from './UploadV2.tokens'

package/lib/components/InputsV2/UploadV2/utils.ts

@@ -0,0 +1,170 @@
+import { useState } from 'react'
+import { UploadFileV2 } from './UploadV2.types'
+
+export const FILE_NAME_TAG_MAX_LEN = 24
+
+export const createClickHandler =
+    (disabled: boolean, fileInputRef: React.RefObject<HTMLInputElement>) =>
+    () => {
+        if (disabled) return
+        fileInputRef.current?.click()
+    }
+
+export const useUploadState = () => {
+    const [internalDragState, setInternalDragState] = useState({
+        isDragActive: false,
+        isDragAccept: false,
+        isDragReject: false,
+    })
+    const [, setDragCounter] = useState(0)
+
+    return {
+        internalDragState,
+        setInternalDragState,
+        setDragCounter,
+    }
+}
+
+export const createDragHandlers = (
+    disabled: boolean,
+    setDragCounter: (fn: (prev: number) => number) => void,
+    updateDragStateFn: (isDragActive: boolean, files?: File[]) => void,
+    processFilesFn: (files: FileList) => void
+) => {
+    const handleDragEnter = (e: React.DragEvent) => {
+        e.preventDefault()
+        e.stopPropagation()
+        if (disabled) return
+
+        setDragCounter((prev) => {
+            const newCounter = prev + 1
+            if (newCounter === 1 && e.dataTransfer.items) {
+                const files = Array.from(e.dataTransfer.items)
+                    .filter((item) => item.kind === 'file')
+                    .map((item) => item.getAsFile())
+                    .filter(Boolean) as File[]
+                updateDragStateFn(true, files)
+            }
+            return newCounter
+        })
+    }
+
+    const handleDragLeave = (e: React.DragEvent) => {
+        e.preventDefault()
+        e.stopPropagation()
+        if (disabled) return
+
+        setDragCounter((prev) => {
+            const newCounter = prev - 1
+            if (newCounter === 0) {
+                updateDragStateFn(false)
+            }
+            return newCounter
+        })
+    }
+
+    const handleDragOver = (e: React.DragEvent) => {
+        e.preventDefault()
+        e.stopPropagation()
+    }
+
+    const handleDrop = (e: React.DragEvent) => {
+        e.preventDefault()
+        e.stopPropagation()
+        if (disabled) return
+
+        setDragCounter(() => 0)
+        updateDragStateFn(false)
+
+        if (e.dataTransfer.files) {
+            processFilesFn(e.dataTransfer.files)
+        }
+    }
+
+    return {
+        handleDragEnter,
+        handleDragLeave,
+        handleDragOver,
+        handleDrop,
+    }
+}
+
+export const truncateFileNameForTag = (name: string): string =>
+    name.length > FILE_NAME_TAG_MAX_LEN
+        ? `${name.slice(0, FILE_NAME_TAG_MAX_LEN)}…`
+        : name
+
+export const getFileId = (uploadFile: UploadFileV2, index: number) =>
+    uploadFile.id ??
+    `${uploadFile.file.name}-${uploadFile.file.size}-${uploadFile.file.lastModified}-${index}`
+
+export const isFileTypeAccepted = (file: File, acceptedFileTypes: string[]) => {
+    if (acceptedFileTypes.length === 0) return true
+
+    const fileName = file.name.toLowerCase()
+    const fileType = file.type.toLowerCase()
+
+    return acceptedFileTypes.some((acceptedType) => {
+        const normalizedAcceptedType = acceptedType.trim().toLowerCase()
+        if (!normalizedAcceptedType) return false
+
+        if (normalizedAcceptedType.startsWith('.')) {
+            return fileName.endsWith(normalizedAcceptedType)
+        }
+
+        if (normalizedAcceptedType.endsWith('/*')) {
+            const acceptedGroup = normalizedAcceptedType.slice(0, -1)
+            return fileType.startsWith(acceptedGroup)
+        }
+
+        return fileType === normalizedAcceptedType
+    })
+}
+
+const KNOWN_UPLOAD_ERROR_REASONS = [
+    'oversized',
+    'maxFiles',
+    'invalidType',
+] as const
+type KnownUploadErrorReason = (typeof KNOWN_UPLOAD_ERROR_REASONS)[number]
+
+export const formatFileSize = (sizeInBytes: number) => {
+    if (sizeInBytes >= 1024 * 1024) {
+        const sizeInMb = sizeInBytes / (1024 * 1024)
+        return `${Number(sizeInMb.toFixed(2))} MB`
+    }
+    if (sizeInBytes >= 1024) {
+        const sizeInKb = sizeInBytes / 1024
+        return `${Number(sizeInKb.toFixed(2))} KB`
+    }
+    return `${sizeInBytes} B`
+}
+
+export const isKnownUploadErrorReason = (
+    reason: unknown
+): reason is KnownUploadErrorReason =>
+    KNOWN_UPLOAD_ERROR_REASONS.includes(reason as KnownUploadErrorReason)
+
+export const normalizeUploadErrorReason = (reason: unknown) =>
+    isKnownUploadErrorReason(reason) ? reason : undefined
+
+export const getValidationMessage = (
+    reason?: unknown,
+    maxSize?: number,
+    maxFiles?: number
+) => {
+    switch (normalizeUploadErrorReason(reason)) {
+        case 'oversized':
+            return maxSize
+                ? `File is too large. Max size is ${formatFileSize(maxSize)}`
+                : 'File is too large'
+        case 'maxFiles':
+            return maxFiles
+                ? `File limit exceeded. Maximum ${maxFiles} files allowed`
+                : 'File limit exceeded'
+        case 'invalidType':
+            return 'Invalid file type'
+        default:
+            return 'Invalid file'
+    }
+}

package/lib/components/KeyValuePair/index.ts

@@ -1,3 +1,4 @@
+/** @deprecated Will be deprecated soon. Use KeyValuePairV2 instead. */
 export { default as KeyValuePair } from './KeyValuePair'
 export * from './KeyValuePair.tokens'
 export * from './types'

package/lib/components/Menu/Menu.tsx

@@ -8,7 +8,7 @@ import {
     type MenuItemType,
 } from './types'
 import React, { useState, useRef, useMemo, useCallback, useEffect } from 'react'
-import { filterMenuGroups } from './utils'
+import { filterMenuGroups, defaultSearchSortFn } from './utils'
 import MenuItem from './MenuItem'
 import Block from '../Primitives/Block/Block'
 import SearchInput from '../Inputs/SearchInput/SearchInput'
@@ -62,6 +62,8 @@ const Menu = ({
     maxHeight,
     enableSearch = false,
     searchPlaceholder = 'Search',
+    searchSortFn = defaultSearchSortFn,
+    onEnter,
     minWidth,
     maxWidth,
     open,
@@ -81,7 +83,7 @@ const Menu = ({
     const searchInputRef = useRef<HTMLInputElement>(null)
     const justOpenedRef = useRef(false)
     const timeoutRef = useRef<NodeJS.Timeout | null>(null)
-    const filteredItems = filterMenuGroups(items, searchText)
+    const filteredItems = filterMenuGroups(items, searchText, searchSortFn)
     const menuTokens = useResponsiveTokens<MenuTokensType>('MENU')
     const { target: portalContainer } = useShadowRoot()
 
@@ -353,6 +355,20 @@ const Menu = ({
                                         value={searchText}
                                         onChange={handleSearchChange}
                                         autoFocus
+                                        onKeyDown={(e) => {
+                                            if (e.key === 'Enter') {
+                                                e.stopPropagation()
+                                                e.preventDefault()
+                                                onEnter?.(
+                                                    searchText,
+                                                    filteredItems
+                                                )
+                                                return
+                                            }
+                                            if (e.key.length === 1) {
+                                                e.stopPropagation()
+                                            }
+                                        }}
                                         aria-label={`Search menu items${searchPlaceholder ? `: ${searchPlaceholder}` : ''}`}
                                     />
                                 </Block>

package/lib/components/Menu/SubMenu.tsx

@@ -11,7 +11,7 @@ import PrimitiveText from '../Primitives/PrimitiveText/PrimitiveText'
 import { useResponsiveTokens } from '../../hooks/useResponsiveTokens'
 import SearchInput from '../Inputs/SearchInput/SearchInput'
 import { FOUNDATION_THEME } from '../../tokens'
-import { filterMenuItem } from './utils'
+import { filterMenuItem, defaultSearchSortFn } from './utils'
 import React, { useState, useRef, useMemo, useCallback } from 'react'
 import { submenuContentAnimations } from './menu.animations'
 import { VirtualList, type VirtualListItem } from '../VirtualList'
@@ -183,10 +183,18 @@ export const SubMenu = ({
         if (!searchText || !item.enableSubMenuSearch) return item.subMenu
 
         const lower = searchText.toLowerCase()
-        return item.subMenu
+        const matched = item.subMenu
             .map((subItem) => filterMenuItem(subItem, lower))
             .filter(Boolean) as MenuItemType[]
-    }, [item.subMenu, searchText, item.enableSubMenuSearch])
+
+        const sortFn = item.subMenuSearchSortFn ?? defaultSearchSortFn
+        return sortFn(matched, searchText)
+    }, [
+        item.subMenu,
+        searchText,
+        item.enableSubMenuSearch,
+        item.subMenuSearchSortFn,
+    ])
 
     const totalItemCount = useMemo(() => {
         return filteredSubMenuItems.length
@@ -383,6 +391,20 @@ export const SubMenu = ({
                                 value={searchText}
                                 onChange={handleSearchChange}
                                 autoFocus
+                                onKeyDown={(e) => {
+                                    if (e.key === 'Enter') {
+                                        e.stopPropagation()
+                                        e.preventDefault()
+                                        item.onSubMenuSearchEnter?.(
+                                            searchText,
+                                            filteredSubMenuItems
+                                        )
+                                        return
+                                    }
+                                    if (e.key.length === 1) {
+                                        e.stopPropagation()
+                                    }
+                                }}
                             />
                         </Block>
                     )}

package/lib/components/Menu/index.ts

@@ -1,3 +1,4 @@
+/** @deprecated Will be deprecated soon. Use MenuV2 instead. */
 export { default as Menu } from './Menu'
 export * from './menu.tokens'
 export * from './types'