@juspay/blend-design-system 0.0.37-beta.4 → 0.0.37-beta.5

package/lib/components/Upload/components/FileListDisplay.tsx

@@ -1,9 +1,9 @@
-import React from 'react'
+import React, { useState } from 'react'
 import Block from '../../Primitives/Block/Block'
 import Text from '../../Text/Text'
-import { Tag, Tooltip } from '../../../main'
+import { Tag, Tooltip, Popover } from '../../../main'
 import { TagColor, TagVariant, TagShape } from '../../Tags/types'
-import { X } from 'lucide-react'
+import { X, ChevronUp, ChevronDown } from 'lucide-react'
 import type { UploadedFileWithStatus } from '../types'
 import type { UploadTokenType } from '../upload.tokens'
 import { truncateFileList } from '../utils'
@@ -21,6 +21,8 @@ const FileListDisplay: React.FC<FileListDisplayProps> = ({
     onFileRemove,
     uploadTokens,
 }) => {
+    const [isOpen, setIsOpen] = useState(false)
+
     const sortedFiles = [...files].sort((a, b) => {
         if (a.status === 'error' && b.status !== 'error') return -1
         if (a.status !== 'error' && b.status === 'error') return 1
@@ -89,20 +91,161 @@ const FileListDisplay: React.FC<FileListDisplayProps> = ({
                         />
                     </Tooltip>
                 ))}
+                {truncatedCount > 0 && (
+                    <Popover
+                        open={isOpen}
+                        onOpenChange={setIsOpen}
+                        trigger={
+                            <Tag
+                                text={`+ ${truncatedCount}`}
+                                variant={TagVariant.SUBTLE}
+                                color={TagColor.NEUTRAL}
+                                shape={TagShape.ROUNDED}
+                                rightSlot={
+                                    isOpen ? (
+                                        <ChevronUp size={14} />
+                                    ) : (
+                                        <ChevronDown size={14} />
+                                    )
+                                }
+                                onClick={(e) => e.stopPropagation()}
+                                cursor="pointer"
+                            />
+                        }
+                        minWidth={240}
+                        maxWidth={300}
+                        maxHeight={220}
+                        showCloseButton={false}
+                        asModal={true}
+                    >
+                        <Block
+                            display="flex"
+                            flexDirection="column"
+                            gap={FOUNDATION_THEME.unit[8]}
+                            padding={FOUNDATION_THEME.unit[12]}
+                            overflow="auto"
+                        >
+                            {sortedFiles
+                                .slice(displayFiles.length)
+                                .map((file) => (
+                                    <Block
+                                        key={file.id}
+                                        display="flex"
+                                        alignItems="center"
+                                        justifyContent="space-between"
+                                        gap={FOUNDATION_THEME.unit[12]}
+                                    >
+                                        <Block
+                                            display="flex"
+                                            alignItems="center"
+                                            gap={FOUNDATION_THEME.unit[8]}
+                                            minWidth={0}
+                                            flexGrow={1}
+                                        >
+                                            <Tooltip
+                                                content={
+                                                    file.status === 'error' &&
+                                                    file.error
+                                                        ? file.error
+                                                        : file.file.name
+                                                }
+                                                fullWidth
+                                            >
+                                                <Block
+                                                    display="flex"
+                                                    alignItems="center"
+                                                    gap={
+                                                        FOUNDATION_THEME.unit[8]
+                                                    }
+                                                    minWidth={0}
+                                                    flexGrow={1}
+                                                    width="0"
+                                                    overflow="hidden"
+                                                >
+                                                    <Text
+                                                        fontSize={
+                                                            uploadTokens
+                                                                .container
+                                                                .content.text
+                                                                .subtitle
+                                                                .fontSize
+                                                        }
+                                                        fontWeight={
+                                                            uploadTokens
+                                                                .container
+                                                                .content.text
+                                                                .subtitle
+                                                                .fontWeight
+                                                        }
+                                                        color={
+                                                            uploadTokens
+                                                                .container
+                                                                .content.text
+                                                                .subtitle.color
+                                                        }
+                                                        truncate={true}
+                                                    >
+                                                        {file.file.name}
+                                                    </Text>
+                                                </Block>
+                                            </Tooltip>
+                                        </Block>
+                                        {(file.status === 'error' ||
+                                            file.error) && (
+                                            <Block
+                                                padding={`${FOUNDATION_THEME.unit[2]} ${FOUNDATION_THEME.unit[8]}`}
+                                                borderRadius={
+                                                    FOUNDATION_THEME.unit[4]
+                                                }
+                                                backgroundColor={
+                                                    FOUNDATION_THEME.colors
+                                                        .red[50]
+                                                }
+                                            >
+                                                <Text
+                                                    fontSize={12}
+                                                    fontWeight={500}
+                                                    color={
+                                                        FOUNDATION_THEME.colors
+                                                            .red[600]
+                                                    }
+                                                >
+                                                    Failed
+                                                </Text>
+                                            </Block>
+                                        )}
+                                        {onFileRemove && (
+                                            <X
+                                                size={14}
+                                                onClick={(e) => {
+                                                    e.stopPropagation()
+                                                    onFileRemove(file.id)
+                                                }}
+                                                style={{
+                                                    cursor: 'pointer',
+                                                    flexShrink: 0,
+                                                }}
+                                                aria-label={`Remove ${file.file.name}`}
+                                                role="button"
+                                                tabIndex={0}
+                                                onKeyDown={(e) => {
+                                                    if (
+                                                        e.key === 'Enter' ||
+                                                        e.key === ' '
+                                                    ) {
+                                                        e.preventDefault()
+                                                        e.stopPropagation()
+                                                        onFileRemove(file.id)
+                                                    }
+                                                }}
+                                            />
+                                        )}
+                                    </Block>
+                                ))}
+                        </Block>
+                    </Popover>
+                )}
             </Block>
-            {truncatedCount > 0 && (
-                <Text
-                    fontSize={
-                        uploadTokens.container.content.text.subtitle.fontSize
-                    }
-                    fontWeight={
-                        uploadTokens.container.content.text.subtitle.fontWeight
-                    }
-                    color={uploadTokens.container.content.text.subtitle.color}
-                >
-                    +{truncatedCount} more files
-                </Text>
-            )}
         </Block>
     )
 }

package/lib/components/Upload/utils.ts

@@ -601,12 +601,16 @@ export const createUploadManager = () => {
         progressInterval: number = 200
     ): (() => void) => {
         let currentProgress = uploadFile.progress || 0
+        let completeTimeout: ReturnType<typeof setTimeout> | null = null
 
         const interval = setInterval(() => {
             if (currentProgress >= 100) {
                 clearInterval(interval)
-                runningUploads.delete(uploadFile.id)
-                setTimeout(() => onComplete(uploadFile.id), 500)
+                completeTimeout = setTimeout(() => {
+                    completeTimeout = null
+                    runningUploads.delete(uploadFile.id)
+                    onComplete(uploadFile.id)
+                }, 500)
                 return
             }
 
@@ -617,6 +621,10 @@ export const createUploadManager = () => {
 
         const cleanup = () => {
             clearInterval(interval)
+            if (completeTimeout !== null) {
+                clearTimeout(completeTimeout)
+                completeTimeout = null
+            }
             runningUploads.delete(uploadFile.id)
         }
 

package/lib/context/ThemeProvider.tsx

@@ -1,3 +1,4 @@
+import { useMemo } from 'react'
 import { BREAKPOINTS, type BreakpointType } from '../breakpoints/breakPoints'
 import { FOUNDATION_THEME, type ThemeType } from '../tokens'
 import initTokens from './initComponentTokens'
@@ -6,6 +7,8 @@ import { Theme } from './theme.enum'
 import { AutofillStyles } from '../components/Inputs/AutofillStyles/AutofillStyles'
 import ShadowAware from './ShadowAware'
 
+const EMPTY_COMPONENT_TOKENS: ComponentTokenType = {}
+
 type ThemeProviderProps = {
     foundationTokens?: ThemeType
     componentTokens?: ComponentTokenType
@@ -25,18 +28,26 @@ type ThemeProviderProps = {
 
 const ThemeProvider = ({
     foundationTokens = FOUNDATION_THEME,
-    componentTokens = {},
+    componentTokens = EMPTY_COMPONENT_TOKENS,
     breakpoints = BREAKPOINTS,
     theme = Theme.LIGHT,
     children,
     target,
 }: ThemeProviderProps) => {
-    const defaultThemeContextValue = {
-        foundationTokens,
-        componentTokens: initTokens(componentTokens, foundationTokens, theme),
-        breakpoints,
-        theme,
-    }
+    const resolvedComponentTokens = useMemo(
+        () => initTokens(componentTokens, foundationTokens, theme),
+        [componentTokens, foundationTokens, theme]
+    )
+
+    const themeContextValue = useMemo(
+        () => ({
+            foundationTokens,
+            componentTokens: resolvedComponentTokens,
+            breakpoints,
+            theme,
+        }),
+        [foundationTokens, resolvedComponentTokens, breakpoints, theme]
+    )
 
     const content = (
         <>
@@ -46,7 +57,7 @@ const ThemeProvider = ({
     )
 
     return (
-        <ThemeContext.Provider value={defaultThemeContextValue}>
+        <ThemeContext.Provider value={themeContextValue}>
             {target ? (
                 <ShadowAware target={target}>{content}</ShadowAware>
             ) : (

package/lib/hooks/useDebounce.ts

@@ -1,4 +1,4 @@
-import { useRef, useCallback } from 'react'
+import { useRef, useCallback, useEffect } from 'react'
 export const useDebounce = <Args extends unknown[]>(
     fn: (...args: Args) => void,
     delay: number
@@ -15,5 +15,13 @@ export const useDebounce = <Args extends unknown[]>(
         [fn, delay]
     )
 
+    useEffect(() => {
+        return () => {
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current)
+            }
+        }
+    }, [])
+
     return debouncedFn
 }

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@juspay/blend-design-system",
     "private": false,
-    "version": "0.0.37-beta.4",
+    "version": "0.0.37-beta.5",
     "description": "A comprehensive React component library and design system by Juspay",
     "type": "module",
     "main": "./dist/main.js",