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

package/lib/components/StatCard/StatCard.tsx

@@ -1,4 +1,12 @@
-import { useCallback, useMemo, useRef, useState, useId } from 'react'
+import {
+    useCallback,
+    useEffect,
+    useMemo,
+    useRef,
+    useState,
+    useId,
+    type ReactNode,
+} from 'react'
 import {
     BarChart,
     Bar,
@@ -50,14 +58,32 @@ type StatCardHeaderTitleTextProps = {
     title: string
     titleId: string
     statCardToken: StatCardTokenType
+    isSmallScreen: boolean
 }
 
 const StatCardHeaderTitleText = ({
     title,
     titleId,
     statCardToken,
-}: StatCardHeaderTitleTextProps) => (
-    <Tooltip content={title}>
+    isSmallScreen,
+}: StatCardHeaderTitleTextProps) => {
+    const [forceTooltipOpen, setForceTooltipOpen] = useState<boolean>(false)
+    const titleRef = useRef<HTMLDivElement>(null)
+
+    useEffect(() => {
+        if (!isSmallScreen || !forceTooltipOpen) return
+
+        const handlePointerDown = (event: PointerEvent) => {
+            if (titleRef.current?.contains(event.target as Node)) return
+            setForceTooltipOpen(false)
+        }
+
+        document.addEventListener('pointerdown', handlePointerDown)
+        return () =>
+            document.removeEventListener('pointerdown', handlePointerDown)
+    }, [isSmallScreen, forceTooltipOpen])
+
+    const titleText = (
         <Text
             as="span"
             id={titleId}
@@ -77,61 +103,176 @@ const StatCardHeaderTitleText = ({
         >
             {title}
         </Text>
-    </Tooltip>
-)
+    )
+
+    if (!isSmallScreen) {
+        return <Tooltip content={title}>{titleText}</Tooltip>
+    }
+
+    return (
+        <Block
+            ref={titleRef}
+            minWidth={0}
+            flexGrow={1}
+            onClick={() => {
+                setForceTooltipOpen(!forceTooltipOpen)
+            }}
+            style={{ cursor: 'pointer' }}
+        >
+            <Tooltip open={forceTooltipOpen} content={title}>
+                {titleText}
+            </Tooltip>
+        </Block>
+    )
+}
 
 type StatCardHelpIconProps = {
     helpIconText?: string
     title: string
     statCardToken: StatCardTokenType
+    isSmallScreen: boolean
 }
 
 const StatCardHelpIcon = ({
     helpIconText,
     title,
     statCardToken,
+    isSmallScreen,
 }: StatCardHelpIconProps) => {
+    const [forceTooltipOpen, setForceTooltipOpen] = useState<boolean>(false)
+    const helpIconRef = useRef<HTMLDivElement>(null)
+
+    useEffect(() => {
+        if (!isSmallScreen || !forceTooltipOpen) return
+
+        const handlePointerDown = (event: PointerEvent) => {
+            if (helpIconRef.current?.contains(event.target as Node)) return
+            setForceTooltipOpen(false)
+        }
+
+        document.addEventListener('pointerdown', handlePointerDown)
+        return () =>
+            document.removeEventListener('pointerdown', handlePointerDown)
+    }, [isSmallScreen, forceTooltipOpen])
+
     if (!helpIconText) return null
 
+    const helpIconTrigger = (
+        <Block
+            as="span"
+            display="inline-flex"
+            alignItems="center"
+            justifyContent="center"
+            role="button"
+            tabIndex={0}
+            aria-label={helpIconText || `Help for ${title}`}
+        >
+            <CircleHelp
+                width={parseInt(
+                    statCardToken.textContainer.header.helpIcon.width?.toString() ||
+                        '16'
+                )}
+                height={parseInt(
+                    statCardToken.textContainer.header.helpIcon.width?.toString() ||
+                        '16'
+                )}
+                color={
+                    statCardToken.textContainer.header.helpIcon.color.default
+                }
+                aria-hidden="true"
+            />
+        </Block>
+    )
+
+    if (!isSmallScreen) {
+        return (
+            <Block
+                data-element="help-icon"
+                display="flex"
+                alignItems="center"
+                justifyContent="center"
+                flexShrink={0}
+            >
+                <Tooltip content={helpIconText}>{helpIconTrigger}</Tooltip>
+            </Block>
+        )
+    }
+
     return (
         <Block
+            ref={helpIconRef}
             data-element="help-icon"
             display="flex"
             alignItems="center"
             justifyContent="center"
             flexShrink={0}
+            onClick={() => {
+                setForceTooltipOpen(!forceTooltipOpen)
+            }}
         >
-            <Tooltip content={helpIconText}>
-                <Block
-                    as="span"
-                    display="inline-flex"
-                    alignItems="center"
-                    justifyContent="center"
-                    role="button"
-                    tabIndex={0}
-                    aria-label={helpIconText || `Help for ${title}`}
-                >
-                    <CircleHelp
-                        width={parseInt(
-                            statCardToken.textContainer.header.helpIcon.width?.toString() ||
-                                '16'
-                        )}
-                        height={parseInt(
-                            statCardToken.textContainer.header.helpIcon.width?.toString() ||
-                                '16'
-                        )}
-                        color={
-                            statCardToken.textContainer.header.helpIcon.color
-                                .default
-                        }
-                        aria-hidden="true"
-                    />
-                </Block>
+            <Tooltip open={forceTooltipOpen} content={helpIconText}>
+                {helpIconTrigger}
             </Tooltip>
         </Block>
     )
 }
 
+type StatCardValueTooltipProps = {
+    content: ReactNode
+    isSmallScreen: boolean
+    children: ReactNode
+}
+
+const StatCardValueTooltip = ({
+    content,
+    isSmallScreen,
+    children,
+}: StatCardValueTooltipProps) => {
+    const [open, setOpen] = useState(false)
+    const triggerRef = useRef<HTMLSpanElement>(null)
+
+    useEffect(() => {
+        if (!isSmallScreen || !open || !content) return
+
+        const handlePointerDown = (event: PointerEvent) => {
+            const target = event.target as Node
+            if (triggerRef.current?.contains(target)) return
+
+            const tooltipEl = document.querySelector('[data-tooltip="tooltip"]')
+            if (tooltipEl?.contains(target)) return
+
+            setOpen(false)
+        }
+
+        document.addEventListener('pointerdown', handlePointerDown)
+        return () =>
+            document.removeEventListener('pointerdown', handlePointerDown)
+    }, [isSmallScreen, open, content])
+
+    if (content === undefined || content === null || content === '') {
+        return <>{children}</>
+    }
+
+    if (!isSmallScreen) {
+        return <Tooltip content={content}>{children}</Tooltip>
+    }
+
+    return (
+        <Tooltip content={content} open={open}>
+            <span
+                ref={triggerRef}
+                style={{ display: 'inline-flex', cursor: 'pointer' }}
+                onClick={(event) => {
+                    event.stopPropagation()
+                    setOpen(true)
+                }}
+            >
+                {children}
+            </span>
+        </Tooltip>
+    )
+}
+
 const StatCard = ({
     title,
     value,
@@ -496,11 +637,13 @@ const StatCard = ({
                                 title={title}
                                 titleId={titleId}
                                 statCardToken={statCardToken}
+                                isSmallScreen={isSmallScreen}
                             />
                             <StatCardHelpIcon
                                 helpIconText={helpIconText}
                                 title={title}
                                 statCardToken={statCardToken}
+                                isSmallScreen={isSmallScreen}
                             />
                         </Block>
                     </Block>
@@ -522,30 +665,31 @@ const StatCard = ({
                                     : 'center'
                             }
                         >
-                            {
-                                <Tooltip content={valueTooltip || ''}>
-                                    <Text
-                                        as="span"
-                                        fontSize={
-                                            statCardToken.textContainer.stats
-                                                .title.value[variant].fontSize
-                                        }
-                                        fontWeight={
-                                            statCardToken.textContainer.stats
-                                                .title.value[variant].fontWeight
-                                        }
-                                        color={
-                                            statCardToken.textContainer.stats
-                                                .title.value[variant].color
-                                        }
-                                        style={{
-                                            cursor: 'pointer',
-                                        }}
-                                    >
-                                        {'--'}
-                                    </Text>
-                                </Tooltip>
-                            }
+                            <StatCardValueTooltip
+                                content={valueTooltip}
+                                isSmallScreen={isSmallScreen}
+                            >
+                                <Text
+                                    as="span"
+                                    fontSize={
+                                        statCardToken.textContainer.stats.title
+                                            .value[variant].fontSize
+                                    }
+                                    fontWeight={
+                                        statCardToken.textContainer.stats.title
+                                            .value[variant].fontWeight
+                                    }
+                                    color={
+                                        statCardToken.textContainer.stats.title
+                                            .value[variant].color
+                                    }
+                                    style={{
+                                        cursor: 'pointer',
+                                    }}
+                                >
+                                    {'--'}
+                                </Text>
+                            </StatCardValueTooltip>
                         </Block>
                         {!isSmallScreen && (
                             <Text
@@ -677,16 +821,17 @@ const StatCard = ({
                                                 title={title}
                                                 titleId={titleId}
                                                 statCardToken={statCardToken}
+                                                isSmallScreen={isSmallScreen}
                                             />
                                             <StatCardHelpIcon
                                                 helpIconText={helpIconText}
                                                 title={title}
                                                 statCardToken={statCardToken}
+                                                isSmallScreen={isSmallScreen}
                                             />
                                         </Block>
                                     )}
                                     {actionIcon &&
-                                        !isSmallScreen &&
                                         direction !==
                                             StatCardDirection.HORIZONTAL && (
                                             <Block
@@ -767,110 +912,37 @@ const StatCard = ({
                                                             .header.gap
                                                     }
                                                 >
-                                                    <Tooltip content={title}>
-                                                        <Text
-                                                            as="span"
-                                                            id={titleId}
-                                                            fontSize={
-                                                                statCardToken
-                                                                    .textContainer
-                                                                    .header
-                                                                    .title
-                                                                    .fontSize
-                                                            }
-                                                            fontWeight={
-                                                                statCardToken
-                                                                    .textContainer
-                                                                    .header
-                                                                    .title
-                                                                    .fontWeight
-                                                            }
-                                                            color={
-                                                                statCardToken
-                                                                    .textContainer
-                                                                    .header
-                                                                    .title.color
-                                                            }
-                                                            style={{
-                                                                display:
-                                                                    '-webkit-box',
-                                                                WebkitLineClamp: 1,
-                                                                WebkitBoxOrient:
-                                                                    'vertical',
-                                                                overflow:
-                                                                    'hidden',
-                                                                textOverflow:
-                                                                    'ellipsis',
-                                                                wordBreak:
-                                                                    'break-word',
-                                                            }}
-                                                            data-element="statcard-header"
-                                                            data-id={
-                                                                title ||
-                                                                'statcard-header'
-                                                            }
-                                                        >
-                                                            {title}
-                                                        </Text>
-                                                    </Tooltip>
-                                                    {helpIconText && (
-                                                        <Block
-                                                            data-element="help-icon"
-                                                            flexShrink={0}
-                                                            display="flex"
-                                                            alignItems="center"
-                                                            justifyContent="center"
-                                                        >
-                                                            <Tooltip
-                                                                content={
-                                                                    helpIconText
-                                                                }
-                                                            >
-                                                                <Block
-                                                                    as="span"
-                                                                    display="inline-flex"
-                                                                    alignItems="center"
-                                                                    justifyContent="center"
-                                                                    role="button"
-                                                                    tabIndex={0}
-                                                                    aria-label={
-                                                                        helpIconText ||
-                                                                        `Help for ${title}`
-                                                                    }
-                                                                >
-                                                                    <CircleHelp
-                                                                        width={parseInt(
-                                                                            statCardToken.textContainer.header.helpIcon.width?.toString() ||
-                                                                                '16'
-                                                                        )}
-                                                                        height={parseInt(
-                                                                            statCardToken.textContainer.header.helpIcon.width?.toString() ||
-                                                                                '16'
-                                                                        )}
-                                                                        color={
-                                                                            statCardToken
-                                                                                .textContainer
-                                                                                .header
-                                                                                .helpIcon
-                                                                                .color
-                                                                                .default
-                                                                        }
-                                                                        aria-hidden="true"
-                                                                    />
-                                                                </Block>
-                                                            </Tooltip>
-                                                        </Block>
-                                                    )}
+                                                    <StatCardHeaderTitleText
+                                                        title={title}
+                                                        titleId={titleId}
+                                                        statCardToken={
+                                                            statCardToken
+                                                        }
+                                                        isSmallScreen={
+                                                            isSmallScreen
+                                                        }
+                                                    />
+                                                    <StatCardHelpIcon
+                                                        helpIconText={
+                                                            helpIconText
+                                                        }
+                                                        title={title}
+                                                        statCardToken={
+                                                            statCardToken
+                                                        }
+                                                        isSmallScreen={
+                                                            isSmallScreen
+                                                        }
+                                                    />
                                                 </Block>
-                                                {actionIcon &&
-                                                    !isSmallScreen && (
-                                                        <Block
-                                                            data-element="view-more"
-                                                            flexShrink={0}
-                                                        >
-                                                            {actionIcon}
-                                                        </Block>
-                                                    )}
+                                                {actionIcon && (
+                                                    <Block
+                                                        data-element="view-more"
+                                                        flexShrink={0}
+                                                    >
+                                                        {actionIcon}
+                                                    </Block>
+                                                )}
                                             </Block>
                                         </Block>
                                     )}
@@ -887,7 +959,10 @@ const StatCard = ({
                                         alignItems="center"
                                         gap={4}
                                     >
-                                        <Tooltip content={valueTooltip || ''}>
+                                        <StatCardValueTooltip
+                                            content={valueTooltip}
+                                            isSmallScreen={isSmallScreen}
+                                        >
                                             <Text
                                                 as="span"
                                                 id={valueId}
@@ -914,7 +989,7 @@ const StatCard = ({
                                             >
                                                 {formatMainValue(value || '--')}
                                             </Text>
-                                        </Tooltip>
+                                        </StatCardValueTooltip>
 
                                         {formattedChange && (
                                             <Tooltip
@@ -1006,7 +1081,7 @@ const StatCard = ({
                                 style={{ flex: 1 }}
                                 position="relative"
                             >
-                                {actionIcon && !isSmallScreen && (
+                                {actionIcon && (
                                     <Block
                                         data-element="action-icon"
                                         display="flex"
@@ -1053,11 +1128,13 @@ const StatCard = ({
                                             title={title}
                                             titleId={titleId}
                                             statCardToken={statCardToken}
+                                            isSmallScreen={isSmallScreen}
                                         />
                                         <StatCardHelpIcon
                                             helpIconText={helpIconText}
                                             title={title}
                                             statCardToken={statCardToken}
+                                            isSmallScreen={isSmallScreen}
                                         />
                                     </Block>
                                 </Block>
@@ -1085,48 +1162,42 @@ const StatCard = ({
                                                 : 'center'
                                         }
                                     >
-                                        {
-                                            <Tooltip
-                                                content={valueTooltip || ''}
+                                        <StatCardValueTooltip
+                                            content={valueTooltip}
+                                            isSmallScreen={isSmallScreen}
+                                        >
+                                            <Text
+                                                as="span"
+                                                id={valueId}
+                                                fontSize={
+                                                    statCardToken.textContainer
+                                                        .stats.title.value[
+                                                        variant
+                                                    ].fontSize
+                                                }
+                                                fontWeight={
+                                                    statCardToken.textContainer
+                                                        .stats.title.value[
+                                                        variant
+                                                    ].fontWeight
+                                                }
+                                                color={
+                                                    statCardToken.textContainer
+                                                        .stats.title.value[
+                                                        variant
+                                                    ].color
+                                                }
+                                                style={{
+                                                    cursor: 'pointer',
+                                                }}
+                                                data-numeric={formatMainValue(
+                                                    value || '--'
+                                                )}
+                                                data-element="statcard-data"
                                             >
-                                                <Text
-                                                    as="span"
-                                                    id={valueId}
-                                                    fontSize={
-                                                        statCardToken
-                                                            .textContainer.stats
-                                                            .title.value[
-                                                            variant
-                                                        ].fontSize
-                                                    }
-                                                    fontWeight={
-                                                        statCardToken
-                                                            .textContainer.stats
-                                                            .title.value[
-                                                            variant
-                                                        ].fontWeight
-                                                    }
-                                                    color={
-                                                        statCardToken
-                                                            .textContainer.stats
-                                                            .title.value[
-                                                            variant
-                                                        ].color
-                                                    }
-                                                    style={{
-                                                        cursor: 'pointer',
-                                                    }}
-                                                    data-numeric={formatMainValue(
-                                                        value || '--'
-                                                    )}
-                                                    data-element="statcard-data"
-                                                >
-                                                    {formatMainValue(
-                                                        value || '--'
-                                                    )}
-                                                </Text>
-                                            </Tooltip>
-                                        }
+                                                {formatMainValue(value || '--')}
+                                            </Text>
+                                        </StatCardValueTooltip>
                                         {formattedChange && (
                                             <Tooltip
                                                 content={change?.tooltip || ''}

package/lib/components/StatCard/statcard.tokens.ts

@@ -325,7 +325,7 @@ export const getStatCardToken = (
                         width: foundationToken.unit[20],
                     },
                     title: {
-                        fontSize: foundationToken.font.size.body.md.fontSize,
+                        fontSize: foundationToken.font.size.body.lg.fontSize,
                         fontWeight: foundationToken.font.weight[500],
                         color: foundationToken.colors.gray[400],
                     },

package/lib/components/StatCard/types.ts

@@ -1,7 +1,7 @@
 import type { ReactNode } from 'react'
-import { SingleSelectProps } from '../SingleSelect'
+import type { SingleSelectProps } from '../SingleSelect/types'
 import { AxisType } from '../Charts/types'
-import { SkeletonVariant } from '../Skeleton'
+import type { SkeletonVariant } from '../Skeleton/types'
 
 export type StatCardSkeletonProps = {
     variant: SkeletonVariant

package/lib/components/StatCardV2/StatCardV2.tsx

@@ -37,6 +37,7 @@ const StatCardV2 = forwardRef<HTMLDivElement, StatCardV2Props>(
             variant = StatCardV2Variant.NUMBER,
             actionIcon,
             value,
+            valueTooltip,
             progressValue,
             change,
             subtitle,
@@ -198,6 +199,7 @@ const StatCardV2 = forwardRef<HTMLDivElement, StatCardV2Props>(
                                     title={title}
                                     helpIconText={helpIconText}
                                     tokens={tokens}
+                                    isSmallScreen={isSmallScreen}
                                 />
                                 <Block
                                     display="flex"
@@ -215,8 +217,10 @@ const StatCardV2 = forwardRef<HTMLDivElement, StatCardV2Props>(
                                         <StatCardV2Value
                                             id={valueId}
                                             value={value}
+                                            valueTooltip={valueTooltip}
                                             tokens={tokens}
                                             variant={variant}
+                                            isSmallScreen={isSmallScreen}
                                         />
                                         <StatCardV2Change
                                             id={changeId}
@@ -227,6 +231,7 @@ const StatCardV2 = forwardRef<HTMLDivElement, StatCardV2Props>(
                                                 effectiveArrowDirection
                                             }
                                             changeType={effectiveChangeType}
+                                            tooltip={change?.tooltip}
                                             tokens={tokens}
                                         />
                                     </Block>