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

package/lib/components/DataTable/TableBody/types.ts

@@ -0,0 +1,59 @@
+import { ColumnDefinition, RowActionsConfig } from '../types'
+import { MobileDataTableConfig } from '../hooks/useMobileDataTable'
+import type { SkeletonVariant } from '../../Skeleton/skeleton.tokens'
+
+export type TableBodyProps<T extends Record<string, unknown>> = {
+    currentData: T[]
+    dataVersion?: number | string
+    visibleColumns: ColumnDefinition<T>[]
+    idField: string
+    tableTitle?: string
+    selectedRows: Record<string, boolean>
+    editingRows: Record<string, boolean>
+    editValues: Record<string, T>
+    expandedRows: Record<string, boolean>
+    enableInlineEdit?: boolean
+    showActionsColumn?: boolean
+    enableColumnManager?: boolean
+    enableRowExpansion?: boolean
+    enableRowSelection?: boolean
+    rowSelectionConfig?: {
+        isDisabled?: (row: T, index: number) => boolean
+        disabledText?: (row: T, index: number) => string
+    }
+    rowActions?: RowActionsConfig<T>
+    columnFreeze?: number
+    /** Freeze last N columns on the right side (sticky right). */
+    columnFreezeRight?: number
+    /** Measured pixel widths of frozen columns (from header ResizeObserver). Used for sticky left offset. */
+    measuredFrozenWidths?: number[]
+    mobileConfig?: MobileDataTableConfig
+    mobileOverflowColumns?: ColumnDefinition<T>[]
+    onMobileOverflowClick?: (row: T) => void
+    renderExpandedRow?: (expandedData: {
+        row: T
+        index: number
+        isExpanded: boolean
+        toggleExpansion: () => void
+    }) => React.ReactNode
+    isRowExpandable?: (row: T, index: number) => boolean
+    onRowSelect: (rowId: unknown, rowIndex?: number) => void
+    onEditRow: (rowId: unknown) => void
+    onSaveRow: (rowId: unknown) => void
+    onCancelEdit: (rowId: unknown) => void
+    onRowExpand: (rowId: unknown) => void
+    onFieldChange: (rowId: unknown, field: keyof T, value: unknown) => void
+    onRowClick?: (row: T, index: number) => void
+    getColumnWidth: (
+        column: ColumnDefinition<T>,
+        index: number
+    ) => React.CSSProperties
+    getRowStyle?: (row: T, index: number) => React.CSSProperties
+    getDisplayValue?: (value: unknown, column: ColumnDefinition<T>) => unknown
+    isLoading?: boolean
+    showSkeleton?: boolean
+    skeletonVariant?: SkeletonVariant
+    isRowLoading?: (row: T, index: number) => boolean
+    focusedCell?: { rowIndex: number; colIndex: number } | null
+    onCellFocus?: (rowIndex: number, colIndex: number) => void
+}

package/lib/components/DataTable/TableCell/index.tsx

@@ -0,0 +1,590 @@
+import React, {
+    forwardRef,
+    useRef,
+    useEffect,
+    useState,
+    useCallback,
+} from 'react'
+import { styled } from 'styled-components'
+import { TableCellProps } from './types'
+import { TableTokenType } from '../dataTable.tokens'
+import Block from '../../Primitives/Block/Block'
+import PrimitiveInput from '../../Primitives/PrimitiveInput/PrimitiveInput'
+import { FOUNDATION_THEME } from '../../../tokens'
+import { ColumnType, DropdownColumnProps, DateColumnProps } from '../types'
+import SingleSelect from '../../SingleSelect/SingleSelect'
+import { SelectMenuVariant } from '../../Select'
+import { SelectMenuGroupType } from '../../Select/types'
+import { useResponsiveTokens } from '../../../hooks/useResponsiveTokens'
+import { useResizeObserver } from '../../../hooks/useResizeObserver'
+import Tooltip from '../../Tooltip/Tooltip'
+import { TooltipSize } from '../../Tooltip/types'
+import { parseDateLike } from '../utils'
+
+const StyledTableCell = styled.td<{
+    width?: React.CSSProperties
+    $hasCustomContent?: boolean
+    $tableToken?: TableTokenType
+    $isFirstRow?: boolean
+    $customBackgroundColor?: string
+    $hasCustomBackground?: boolean
+}>`
+    ${(props) =>
+        props.$tableToken ? props.$tableToken.dataTable.table.body.cell : ''}
+    background-color: ${({ $customBackgroundColor, $hasCustomBackground }) =>
+        $hasCustomBackground && $customBackgroundColor
+            ? $customBackgroundColor
+            : FOUNDATION_THEME.colors.gray[0]} !important;
+    box-sizing: border-box;
+    ${({ $isFirstRow }) => $isFirstRow && 'border-top: none'}
+`
+
+const isEmptyValue = (value: unknown, columnType?: ColumnType): boolean => {
+    if (value == null) return true
+
+    if (typeof value === 'string' && value.trim() === '') return true
+
+    if (typeof value === 'number' && value === 0) return true
+
+    if (columnType === ColumnType.DROPDOWN) {
+        const dropdownData = value as DropdownColumnProps
+        if (
+            !dropdownData ||
+            !dropdownData.options ||
+            !dropdownData.selectedValue ||
+            (typeof dropdownData.selectedValue === 'string' &&
+                dropdownData.selectedValue.trim() === '')
+        ) {
+            return true
+        }
+    }
+
+    if (columnType === ColumnType.DATE) {
+        const dateValue =
+            typeof value === 'object' && value !== null && 'date' in value
+                ? (value as DateColumnProps).date
+                : value
+        if (
+            !dateValue ||
+            (typeof dateValue === 'string' && dateValue.trim() === '') ||
+            !parseDateLike(dateValue)
+        ) {
+            return true
+        }
+    }
+
+    return false
+}
+
+const TruncatedTextWithTooltip = ({
+    text,
+    style = {},
+}: {
+    text: string
+    style?: React.CSSProperties
+}) => {
+    const textRef = useRef<HTMLSpanElement>(null)
+    const [isTruncated, setIsTruncated] = useState(false)
+    const rafRef = useRef<number | null>(null)
+
+    const checkTruncation = useCallback(() => {
+        if (rafRef.current !== null) {
+            cancelAnimationFrame(rafRef.current)
+        }
+
+        rafRef.current = requestAnimationFrame(() => {
+            const element = textRef.current
+            if (element) {
+                const truncated =
+                    element.scrollWidth > element.clientWidth &&
+                    element.clientWidth > 0
+                setIsTruncated(truncated)
+            }
+            rafRef.current = null
+        })
+    }, [])
+
+    useResizeObserver(textRef as React.RefObject<HTMLElement>, () =>
+        checkTruncation()
+    )
+
+    useEffect(() => {
+        const timeoutId = setTimeout(checkTruncation, 0)
+        window.addEventListener('resize', checkTruncation, { passive: true })
+
+        return () => {
+            clearTimeout(timeoutId)
+            window.removeEventListener('resize', checkTruncation)
+            if (rafRef.current !== null) {
+                cancelAnimationFrame(rafRef.current)
+            }
+        }
+    }, [text, checkTruncation])
+
+    const truncatedContent = (
+        <span
+            ref={textRef}
+            style={{
+                display: 'block',
+                width: '100%',
+                minWidth: 0,
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                whiteSpace: 'nowrap',
+                ...style,
+            }}
+        >
+            {text}
+        </span>
+    )
+
+    if (isTruncated && text) {
+        const isVeryLongString = text.length > 50 && !text.includes(' ')
+        const tooltipMaxWidth = isVeryLongString ? '600px' : undefined
+
+        return (
+            <Tooltip
+                content={text}
+                size={TooltipSize.SMALL}
+                delayDuration={500}
+                maxWidth={tooltipMaxWidth}
+            >
+                {truncatedContent}
+            </Tooltip>
+        )
+    }
+
+    return truncatedContent
+}
+
+const TableCell = forwardRef<
+    HTMLTableCellElement,
+    TableCellProps<Record<string, unknown>>
+>(
+    (
+        {
+            column,
+            row,
+            rowIndex,
+            colIndex,
+            tableTitle,
+            isEditing,
+            currentValue,
+            width,
+            frozenStyles,
+            isFirstRow,
+            customBackgroundColor,
+            hasCustomBackground,
+            onFieldChange,
+            getDisplayValue,
+            'data-row-index': dataRowIndex,
+            'data-col-index': dataColIndex,
+            tabIndex: cellTabIndex,
+            onFocus: cellOnFocus,
+            onClick: cellOnClick,
+            role: cellRole,
+        },
+        ref
+    ) => {
+        const tableToken = useResponsiveTokens('TABLE') as TableTokenType
+
+        // Apply formatting if getDisplayValue is provided and we're not editing
+        const displayValue =
+            !isEditing && getDisplayValue
+                ? getDisplayValue(currentValue, column)
+                : currentValue
+
+        const generateDataAttributes = () => {
+            const attrs: Record<string, string | number | boolean> = {}
+
+            if (
+                tableTitle &&
+                typeof rowIndex === 'number' &&
+                typeof colIndex === 'number'
+            ) {
+                attrs['data-element'] =
+                    `${tableTitle}_tr${rowIndex + 1}_td${colIndex + 1}`
+            }
+
+            const valueToCheck = displayValue || currentValue
+
+            if (
+                valueToCheck == null ||
+                React.isValidElement(valueToCheck) ||
+                (typeof valueToCheck === 'object' &&
+                    valueToCheck.constructor === Object)
+            ) {
+                if (row.id) {
+                    attrs['data-row-id'] = String(row.id)
+                }
+                return attrs
+            }
+
+            if (
+                column.type === ColumnType.NUMBER ||
+                typeof valueToCheck === 'number'
+            ) {
+                attrs['data-type'] = 'numeric'
+                attrs['data-numeric'] = String(valueToCheck || 0)
+            } else if (column.type === ColumnType.DATE) {
+                attrs['data-type'] = 'date'
+                const dateValue =
+                    typeof valueToCheck === 'object' &&
+                    valueToCheck !== null &&
+                    'date' in valueToCheck
+                        ? (valueToCheck as DateColumnProps).date
+                        : valueToCheck
+                const showTime =
+                    typeof valueToCheck === 'object' &&
+                    valueToCheck !== null &&
+                    'showTime' in valueToCheck
+                        ? Boolean((valueToCheck as DateColumnProps).showTime)
+                        : false
+                if (dateValue) {
+                    const parsedDate = parseDateLike(dateValue)
+                    if (parsedDate) {
+                        attrs['data-date'] = parsedDate.toLocaleDateString(
+                            'en-US',
+                            {
+                                year: 'numeric',
+                                month: 'short',
+                                day: '2-digit',
+                                hour: showTime ? '2-digit' : undefined,
+                                minute: showTime ? '2-digit' : undefined,
+                            }
+                        )
+                    }
+                }
+            } else if (
+                typeof valueToCheck === 'string' &&
+                valueToCheck.trim() !== ''
+            ) {
+                const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+                const moneyPattern = /[$€£¥₹₽₪₩₦₡₵₸₴₺₻₼₽¢]/
+                const numberPattern =
+                    /^\s*[$€£¥₹₽₪₩₦₡₵₸₴₺₻₼₽¢]?[\d,]+\.?\d*\s*$/
+
+                if (emailPattern.test(valueToCheck)) {
+                    attrs['data-type'] = 'email'
+                    attrs['data-id'] = valueToCheck
+                } else if (
+                    moneyPattern.test(valueToCheck) ||
+                    (numberPattern.test(valueToCheck) &&
+                        column.header?.toLowerCase().includes('amount'))
+                ) {
+                    attrs['data-type'] = 'money'
+                    attrs['data-money-cell'] = valueToCheck
+                } else {
+                    attrs['data-type'] = 'text'
+                    attrs['data-id'] = valueToCheck
+                }
+            } else if (typeof valueToCheck === 'boolean') {
+                attrs['data-type'] = 'boolean'
+                attrs['data-boolean'] = String(valueToCheck)
+            }
+
+            if (row.id) {
+                attrs['data-row-id'] = String(row.id)
+            }
+
+            return attrs
+        }
+
+        const dataAttributes = generateDataAttributes()
+
+        const renderContent = () => {
+            if (isEditing && column.isEditable) {
+                if (column.type === ColumnType.DROPDOWN) {
+                    const dropdownData = currentValue as DropdownColumnProps
+                    if (dropdownData && dropdownData.options) {
+                        const selectedOption = dropdownData.options.find(
+                            (opt) => opt.value === dropdownData.selectedValue
+                        )
+
+                        const selectItems: SelectMenuGroupType[] = [
+                            {
+                                items: dropdownData.options.map((option) => ({
+                                    label: option.label,
+                                    value: String(option.value),
+                                    slot1: option.icon || undefined,
+                                })),
+                                showSeparator: false,
+                            },
+                        ]
+
+                        return (
+                            <div style={{ width: '100%', minWidth: '150px' }}>
+                                <SingleSelect
+                                    label=""
+                                    placeholder={
+                                        dropdownData.placeholder || 'Select...'
+                                    }
+                                    variant={SelectMenuVariant.NO_CONTAINER}
+                                    items={selectItems}
+                                    selected={String(
+                                        dropdownData.selectedValue || ''
+                                    )}
+                                    slot={selectedOption?.icon}
+                                    onSelect={(value) => {
+                                        const updatedDropdownData: DropdownColumnProps =
+                                            {
+                                                ...dropdownData,
+                                                selectedValue: value,
+                                            }
+
+                                        if (onFieldChange) {
+                                            onFieldChange(updatedDropdownData)
+                                        }
+                                    }}
+                                    minMenuWidth={150}
+                                    maxMenuWidth={250}
+                                />
+                            </div>
+                        )
+                    }
+                }
+
+                return (
+                    <PrimitiveInput
+                        value={currentValue != null ? String(currentValue) : ''}
+                        onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                            onFieldChange(e.target.value)
+                        }
+                        style={{
+                            width: '100%',
+                            border: 'none',
+                            background: 'transparent',
+                            outline: 'none',
+                            fontSize:
+                                tableToken.dataTable.table.body.cell.fontSize,
+                            fontFamily: 'inherit',
+                            fontWeight:
+                                tableToken.dataTable.table.body.cell.fontWeight,
+                            color: 'inherit',
+                            padding: '4px 0',
+                        }}
+                    />
+                )
+            }
+
+            if (column.type === ColumnType.DROPDOWN && !isEditing) {
+                const dropdownData = displayValue as DropdownColumnProps
+
+                if (isEmptyValue(dropdownData, ColumnType.DROPDOWN)) {
+                    return (
+                        <Block
+                            style={{
+                                width: '100%',
+                                lineHeight: '1.5',
+                                cursor: 'default',
+                            }}
+                        >
+                            <TruncatedTextWithTooltip text="-" />
+                        </Block>
+                    )
+                }
+
+                const selectedOption = dropdownData.options.find(
+                    (opt) => opt.value === dropdownData.selectedValue
+                )
+
+                const selectItems: SelectMenuGroupType[] = [
+                    {
+                        items: dropdownData.options.map((option) => ({
+                            label: option.label,
+                            value: String(option.value),
+                            slot1: option.icon || undefined,
+                        })),
+                        showSeparator: false,
+                    },
+                ]
+
+                return (
+                    <div style={{ width: '100%', minWidth: '150px' }}>
+                        <SingleSelect
+                            label=""
+                            placeholder={
+                                dropdownData.placeholder || 'Select...'
+                            }
+                            variant={SelectMenuVariant.NO_CONTAINER}
+                            items={selectItems}
+                            selected={String(dropdownData.selectedValue || '')}
+                            slot={selectedOption?.icon}
+                            onSelect={(value) => {
+                                const updatedDropdownData: DropdownColumnProps =
+                                    {
+                                        ...dropdownData,
+                                        selectedValue: value,
+                                    }
+                                if (onFieldChange) {
+                                    onFieldChange(updatedDropdownData)
+                                }
+                            }}
+                            minMenuWidth={150}
+                            maxMenuWidth={250}
+                        />
+                    </div>
+                )
+            }
+
+            if (column.type === ColumnType.DATE && !isEditing) {
+                const dateData =
+                    typeof displayValue === 'object' &&
+                    displayValue !== null &&
+                    'date' in displayValue
+                        ? (displayValue as DateColumnProps)
+                        : ({
+                              date: displayValue as Date | string,
+                              showTime: false,
+                          } as DateColumnProps)
+
+                if (isEmptyValue(dateData, ColumnType.DATE)) {
+                    return (
+                        <Block
+                            style={{
+                                width: '100%',
+                                lineHeight: '1.5',
+                                cursor: 'default',
+                            }}
+                        >
+                            <TruncatedTextWithTooltip text="-" />
+                        </Block>
+                    )
+                }
+
+                const date = parseDateLike(dateData.date)
+                const showTime = dateData.showTime || false
+
+                const formatDate = (date: Date): string => {
+                    if (isNaN(date.getTime())) return '-'
+
+                    const options: Intl.DateTimeFormatOptions = {
+                        year: 'numeric',
+                        month: 'short',
+                        day: '2-digit',
+                    }
+
+                    if (showTime) {
+                        options.hour = '2-digit'
+                        options.minute = '2-digit'
+                    }
+
+                    return new Intl.DateTimeFormat('en-US', options).format(
+                        date
+                    )
+                }
+
+                return (
+                    <Block
+                        style={{
+                            width: '100%',
+                            lineHeight: '1.5',
+                            cursor: 'default',
+                        }}
+                    >
+                        <TruncatedTextWithTooltip
+                            text={date ? formatDate(date) : '-'}
+                            style={{
+                                fontSize:
+                                    FOUNDATION_THEME.font.size.body.sm.fontSize,
+                                color: FOUNDATION_THEME.colors.gray[700],
+                            }}
+                        />
+                    </Block>
+                )
+            }
+
+            if (column.renderCell) {
+                return (
+                    <Block
+                        style={{
+                            width: '100%',
+                            minWidth: 0,
+                            maxWidth: '100%',
+                            overflow: 'hidden',
+                        }}
+                    >
+                        {(
+                            column.renderCell as (
+                                value: unknown,
+                                row: unknown,
+                                index: number
+                            ) => React.ReactNode
+                        )(displayValue, row, rowIndex)}
+                    </Block>
+                )
+            }
+
+            if (isEmptyValue(displayValue, column.type)) {
+                return (
+                    <Block
+                        style={{
+                            width: '100%',
+                            lineHeight: '1.5',
+                            cursor: 'default',
+                        }}
+                    >
+                        <TruncatedTextWithTooltip text="-" />
+                    </Block>
+                )
+            }
+
+            return (
+                <Block
+                    style={{
+                        width: '100%',
+                        lineHeight: '1.5',
+                        cursor: 'default',
+                    }}
+                >
+                    <TruncatedTextWithTooltip text={String(displayValue)} />
+                </Block>
+            )
+        }
+
+        return (
+            <StyledTableCell
+                ref={ref}
+                $tableToken={tableToken}
+                $hasCustomContent={
+                    column.type === ColumnType.CUSTOM ||
+                    column.type === ColumnType.REACT_ELEMENT ||
+                    (isEditing && column.isEditable)
+                }
+                $isFirstRow={isFirstRow}
+                $customBackgroundColor={customBackgroundColor}
+                $hasCustomBackground={hasCustomBackground}
+                data-row-index={dataRowIndex}
+                data-col-index={dataColIndex}
+                tabIndex={cellTabIndex}
+                onFocus={cellOnFocus}
+                onClick={cellOnClick}
+                role={cellRole || 'gridcell'}
+                style={{
+                    ...width,
+                    ...frozenStyles,
+                    verticalAlign: 'middle',
+                    position: frozenStyles?.position || 'relative',
+                    outline: 'none',
+                }}
+                {...dataAttributes}
+            >
+                <Block
+                    style={{
+                        width: '100%',
+                        minWidth: 0,
+                        minHeight: `${FOUNDATION_THEME.unit[52]}`,
+                        display: 'flex',
+                        alignItems: 'center',
+                    }}
+                >
+                    {renderContent()}
+                </Block>
+            </StyledTableCell>
+        )
+    }
+)
+
+TableCell.displayName = 'TableCell'
+
+export default TableCell

package/lib/components/DataTable/TableCell/types.ts

@@ -0,0 +1,24 @@
+import { ColumnDefinition } from '../types'
+
+export type TableCellProps<T extends Record<string, unknown>> = {
+    column: ColumnDefinition<T>
+    row: T
+    rowIndex: number
+    colIndex?: number
+    tableTitle?: string
+    isEditing: boolean
+    currentValue: unknown
+    width: React.CSSProperties
+    frozenStyles?: React.CSSProperties
+    isFirstRow?: boolean
+    customBackgroundColor?: string
+    hasCustomBackground?: boolean
+    onFieldChange: (value: unknown) => void
+    getDisplayValue?: (value: unknown, column: ColumnDefinition<T>) => unknown
+    'data-row-index'?: number
+    'data-col-index'?: number
+    tabIndex?: number
+    onFocus?: () => void
+    onClick?: () => void
+    role?: string
+}