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

package/lib/components/TopbarV2/topbarV2.tokens.ts

@@ -1,77 +1,14 @@
-import type { CSSObject } from 'styled-components'
 import type { FoundationTokenType } from '../../tokens/theme.token'
-import { BreakpointType } from '../../breakpoints/breakPoints'
 import { Theme } from '../../context/theme.enum'
 import { getTopbarV2DarkTokens } from './topbarV2.dark.tokens'
 import { getTopbarV2LightTokens } from './topbarV2.light.tokens'
+import type { ResponsiveTopbarV2Tokens } from './topbarV2.tokens.types'
 
-export type TopbarV2State = 'default' | 'hover' | 'active'
-
-export type TopbarV2TokenType = {
-    zIndex: CSSObject['zIndex']
-    height: CSSObject['height']
-    borderBottom: CSSObject['borderBottom']
-    backgroundColor: CSSObject['backgroundColor']
-    backdropFilter: CSSObject['backdropFilter']
-    padding: CSSObject['padding']
-    gap: CSSObject['gap']
-    separator: {
-        width: CSSObject['width']
-        color: CSSObject['color']
-    }
-    toggleButton: {
-        borderRadius: CSSObject['borderRadius']
-        padding: CSSObject['padding']
-        backgroundColor: {
-            [key in TopbarV2State]: CSSObject['backgroundColor']
-        }
-        transition: CSSObject['transition']
-        icon: { size: CSSObject['width']; color: CSSObject['color'] }
-    }
-    actionButton: {
-        borderRadius: CSSObject['borderRadius']
-        padding: CSSObject['padding']
-        minWidth: CSSObject['minWidth']
-        height: CSSObject['height']
-        backgroundColor: {
-            [key in TopbarV2State]: CSSObject['backgroundColor']
-        }
-        transition: CSSObject['transition']
-        icon: { size: CSSObject['width']; color: CSSObject['color'] }
-    }
-    tenantIconButton: {
-        borderRadius: CSSObject['borderRadius']
-        minHeight: CSSObject['minHeight']
-        backgroundColor: {
-            [key in TopbarV2State]: CSSObject['backgroundColor']
-        }
-        transition: CSSObject['transition']
-    }
-    merchantSelectTrigger: {
-        gap: CSSObject['gap']
-        icon: { size: CSSObject['width']; color: CSSObject['color'] }
-        text: {
-            fontSize: CSSObject['fontSize']
-            fontWeight: CSSObject['fontWeight']
-            color: CSSObject['color']
-        }
-    }
-    leftSection: {
-        gap: CSSObject['gap']
-        maxHeight: CSSObject['maxHeight']
-        divider: {
-            fontSize: CSSObject['fontSize']
-            fontWeight: CSSObject['fontWeight']
-            color: CSSObject['color']
-        }
-    }
-    rightSection: { gap: CSSObject['gap'] }
-    sidebarSection: { gap: CSSObject['gap'] }
-}
-
-export type ResponsiveTopbarV2Tokens = {
-    [key in keyof BreakpointType]: TopbarV2TokenType
-}
+export type {
+    TopbarV2State,
+    TopbarV2TokenType,
+    ResponsiveTopbarV2Tokens,
+} from './topbarV2.tokens.types'
 
 export const getTopbarV2Tokens = (
     foundationToken: FoundationTokenType,

package/lib/components/TopbarV2/topbarV2.tokens.types.ts

@@ -0,0 +1,70 @@
+import type { CSSObject } from 'styled-components'
+import { BreakpointType } from '../../breakpoints/breakPoints'
+
+export type TopbarV2State = 'default' | 'hover' | 'active'
+
+export type TopbarV2TokenType = {
+    zIndex: CSSObject['zIndex']
+    height: CSSObject['height']
+    borderBottom: CSSObject['borderBottom']
+    backgroundColor: CSSObject['backgroundColor']
+    backdropFilter: CSSObject['backdropFilter']
+    padding: CSSObject['padding']
+    gap: CSSObject['gap']
+    separator: {
+        width: CSSObject['width']
+        color: CSSObject['color']
+    }
+    toggleButton: {
+        borderRadius: CSSObject['borderRadius']
+        padding: CSSObject['padding']
+        backgroundColor: {
+            [key in TopbarV2State]: CSSObject['backgroundColor']
+        }
+        transition: CSSObject['transition']
+        icon: { size: CSSObject['width']; color: CSSObject['color'] }
+    }
+    actionButton: {
+        borderRadius: CSSObject['borderRadius']
+        padding: CSSObject['padding']
+        minWidth: CSSObject['minWidth']
+        height: CSSObject['height']
+        backgroundColor: {
+            [key in TopbarV2State]: CSSObject['backgroundColor']
+        }
+        transition: CSSObject['transition']
+        icon: { size: CSSObject['width']; color: CSSObject['color'] }
+    }
+    tenantIconButton: {
+        borderRadius: CSSObject['borderRadius']
+        minHeight: CSSObject['minHeight']
+        backgroundColor: {
+            [key in TopbarV2State]: CSSObject['backgroundColor']
+        }
+        transition: CSSObject['transition']
+    }
+    merchantSelectTrigger: {
+        gap: CSSObject['gap']
+        icon: { size: CSSObject['width']; color: CSSObject['color'] }
+        text: {
+            fontSize: CSSObject['fontSize']
+            fontWeight: CSSObject['fontWeight']
+            color: CSSObject['color']
+        }
+    }
+    leftSection: {
+        gap: CSSObject['gap']
+        maxHeight: CSSObject['maxHeight']
+        divider: {
+            fontSize: CSSObject['fontSize']
+            fontWeight: CSSObject['fontWeight']
+            color: CSSObject['color']
+        }
+    }
+    rightSection: { gap: CSSObject['gap'] }
+    sidebarSection: { gap: CSSObject['gap'] }
+}
+
+export type ResponsiveTopbarV2Tokens = {
+    [key in keyof BreakpointType]: TopbarV2TokenType
+}

package/lib/components/Upload/Upload.tsx

@@ -146,6 +146,12 @@ const Upload: React.FC<UploadProps> = ({
 
     const uploadManager = useMemo(() => createUploadManager(), [])
 
+    useEffect(() => {
+        return () => {
+            uploadManager.cancelAllUploads()
+        }
+    }, [uploadManager])
+
     const handleInternalDrop = useMemo(
         () =>
             createComplexDropHandler(

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

@@ -1,9 +1,11 @@
-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 } from '../../Tags'
+import { Tooltip } from '../../Tooltip'
+import { Popover } from '../../Popover'
 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 +23,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 +93,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/components/shared/layoutTypes.ts

@@ -0,0 +1,44 @@
+import { type ReactNode } from 'react'
+import type { BadgeColor, BadgePosition, BadgeSize } from '../Badge/Badge.types'
+
+/**
+ * Layout-level types shared between the Sidebar and Topbar components.
+ *
+ * These live in a neutral module to avoid a circular dependency between
+ * `Sidebar/types` and `Topbar/types` (see issue #1473). Both components import
+ * from here, keeping the type graph a clean DAG.
+ */
+
+export type TenantBadge = {
+    text: string
+    size?: BadgeSize
+    color?: BadgeColor
+    position?: BadgePosition
+}
+
+export type LeftPanelItem = {
+    label: string
+    icon: ReactNode
+    value?: string
+    showInPanel?: boolean
+    badge?: TenantBadge
+}
+
+export type LeftPanelInfo = {
+    items: LeftPanelItem[]
+    selected: string
+    onSelect: (value: string) => void
+    tenantSlot1?: ReactNode
+    tenantSlot2?: ReactNode
+    tenantFooter?: ReactNode
+}
+
+export type MerchantInfo = {
+    items: Array<{
+        label: string
+        value: string
+        icon?: ReactNode
+    }>
+    selected: string
+    onSelect: (value: string) => void
+}

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/context/useComponentToken.ts

@@ -46,9 +46,9 @@ import { ResponsiveMobileNavigationV2Tokens } from '../components/SidebarV2/Side
 import { ResponsiveDirectoryTokens } from '../components/Directory/directory.tokens'
 import { ResponsiveChatInputTokensType } from '../components/ChatInput/chatInput.tokens'
 import { ResponsiveTagV2Tokens } from '../components/TagV2/tagV2.tokens'
-import { ResponsiveAlertV2Tokens } from '../components/AlertV2'
-import { ResponsiveAccordionV2Tokens } from '../components/AccordionV2'
-import { ResponsiveSnackbarV2Tokens } from '../components/SnackbarV2'
+import type { ResponsiveAlertV2Tokens } from '../components/AlertV2/alertV2.tokens.types'
+import type { ResponsiveAccordionV2Tokens } from '../components/AccordionV2/accordionV2.tokens.types'
+import type { ResponsiveSnackbarV2Tokens } from '../components/SnackbarV2/snackbarV2.tokens.types'
 import { ResponsiveSwitchV2Tokens } from '../components/SelectorV2/SwitchV2/switchV2.tokens'
 import { ResponsiveSingleSelectV2Tokens } from '../components/SingleSelectV2/singleSelectV2.tokens'
 import type { ResponsiveMultiSelectV2Tokens } from '../components/MultiSelectV2/multiSelectV2.tokens'

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/lib/hooks/useTruncationDetection.ts

@@ -12,6 +12,8 @@ export type UseTruncationDetectionOptions = {
     deps?: DependencyList
 }
 
+const DEBOUNCE_MS = 100
+
 export default function useTruncationDetection<
     T extends HTMLElement = HTMLElement,
 >(
@@ -22,13 +24,9 @@ export default function useTruncationDetection<
     const { disabled = false, deps = [] } = options
     const [isTruncated, setIsTruncated] = useState(false)
     const rafRef = useRef<number | null>(null)
+    const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null)
 
-    const checkTruncation = useCallback(() => {
-        if (disabled) {
-            setIsTruncated(false)
-            return
-        }
-
+    const runTruncationCheck = useCallback(() => {
         if (rafRef.current !== null) {
             cancelAnimationFrame(rafRef.current)
         }
@@ -56,11 +54,35 @@ export default function useTruncationDetection<
             setIsTruncated(truncated)
             rafRef.current = null
         })
-    }, [elementRef, selector, disabled])
+    }, [elementRef, selector])
+
+    const checkTruncation = useCallback(() => {
+        if (disabled) {
+            setIsTruncated(false)
+            return
+        }
+        runTruncationCheck()
+    }, [disabled, runTruncationCheck])
+
+    const debouncedCheckTruncation = useCallback(() => {
+        if (disabled) {
+            setIsTruncated(false)
+            return
+        }
+
+        if (debounceRef.current) {
+            clearTimeout(debounceRef.current)
+        }
+
+        debounceRef.current = setTimeout(() => {
+            runTruncationCheck()
+            debounceRef.current = null
+        }, DEBOUNCE_MS)
+    }, [disabled, runTruncationCheck])
 
     useResizeObserver(elementRef, () => {
         if (!disabled) {
-            checkTruncation()
+            debouncedCheckTruncation()
         }
     })
 
@@ -79,6 +101,9 @@ export default function useTruncationDetection<
             if (rafRef.current !== null) {
                 cancelAnimationFrame(rafRef.current)
             }
+            if (debounceRef.current !== null) {
+                clearTimeout(debounceRef.current)
+            }
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps -- deps is intentionally spread to allow custom dependencies
     }, [disabled, checkTruncation, ...deps])

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.6",
     "description": "A comprehensive React component library and design system by Juspay",
     "type": "module",
     "main": "./dist/main.js",
@@ -35,6 +35,7 @@
     },
     "scripts": {
         "lint": "eslint .",
+        "check:circular": "node scripts/check-circular.mjs",
         "build": "pnpm lint && vite build",
         "prepublishOnly": "pnpm run build",
         "test": "vitest",
@@ -98,6 +99,8 @@
         "@vitest/coverage-v8": "^3.2.4",
         "@vitest/ui": "^3.2.4",
         "eslint": "^9.25.0",
+        "eslint-import-resolver-typescript": "^3.7.0",
+        "eslint-plugin-import-x": "^4.6.1",
         "eslint-plugin-react-hooks": "^5.2.0",
         "eslint-plugin-react-refresh": "^0.4.19",
         "eslint-plugin-storybook": "^0.12.0",
@@ -105,6 +108,7 @@
         "jest-axe": "^10.0.0",
         "jest-styled-components": "^7.2.0",
         "jsdom": "^26.1.0",
+        "madge": "^8.0.0",
         "prettier": "^3.1.0",
         "react": "^19.2.1",
         "react-dom": "^19.2.1",