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

package/lib/components/ChatInput/ChatInput.tsx

@@ -7,13 +7,13 @@ import React, {
     useEffect,
     useId,
 } from 'react'
-import { ChatInputProps, AttachedFile, TopQuery } from './types'
+import { ChatInputProps, TopQuery } from './types'
 import Block from '../Primitives/Block/Block'
 import PrimitiveButton from '../Primitives/PrimitiveButton/PrimitiveButton'
 import Button from '../Button/Button'
 import { ButtonType, ButtonSize, ButtonSubType } from '../Button/types'
 import Text from '../Text/Text'
-import { Paperclip, FileMinus, Image, FileText } from 'lucide-react'
+import { Paperclip } from 'lucide-react'
 import { ChatInputTokensType } from './chatInput.tokens'
 import { FOUNDATION_THEME } from '../../tokens'
 import {
@@ -30,38 +30,7 @@ import { useResponsiveTokens } from '../../hooks/useResponsiveTokens'
 import PrimitiveTextarea from '../Primitives/PrimitiveTextArea'
 import AttachmentFile from './AttachmentFile'
 
-export const getDocIcon = (fileType: AttachedFile['type']): React.ReactNode => {
-    switch (fileType) {
-        case 'image':
-            return <Image color={FOUNDATION_THEME.colors.gray[600]} size={12} />
-        case 'pdf':
-            return (
-                <FileMinus
-                    color={FOUNDATION_THEME.colors.gray[600]}
-                    size={12}
-                />
-            )
-        case 'csv':
-            return (
-                <FileMinus
-                    color={FOUNDATION_THEME.colors.gray[600]}
-                    size={12}
-                />
-            )
-        case 'text':
-            return (
-                <FileText color={FOUNDATION_THEME.colors.gray[600]} size={12} />
-            )
-        default:
-            return (
-                <FileMinus
-                    color={FOUNDATION_THEME.colors.gray[600]}
-                    size={12}
-                />
-            )
-    }
-    return '📎'
-}
+export { getDocIcon } from './getDocIcon'
 
 const ChatInput = forwardRef<HTMLTextAreaElement, ChatInputProps>(
     (

package/lib/components/ChatInput/MobileChatInput.tsx

@@ -6,7 +6,8 @@ import PrimitiveTextarea from '../Primitives/PrimitiveTextArea'
 import PrimitiveButton from '../Primitives/PrimitiveButton/PrimitiveButton'
 import { FOUNDATION_THEME } from '../../tokens'
 import { ChatInputTokensType } from './chatInput.tokens'
-import { AttachedFile, MenuProps } from '../../main'
+import type { AttachedFile } from './types'
+import type { MenuProps } from '../Menu/types'
 import AttachmentFile from './AttachmentFile'
 import { truncatePlaceholder } from './utils'
 import { useResponsiveTokens } from '../../hooks/useResponsiveTokens'

package/lib/components/ChatInput/getDocIcon.tsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import { FileMinus, Image, FileText } from 'lucide-react'
+import type { AttachedFile } from './types'
+import { FOUNDATION_THEME } from '../../tokens'
+
+export const getDocIcon = (fileType: AttachedFile['type']): React.ReactNode => {
+    switch (fileType) {
+        case 'image':
+            return <Image color={FOUNDATION_THEME.colors.gray[600]} size={12} />
+        case 'pdf':
+            return (
+                <FileMinus
+                    color={FOUNDATION_THEME.colors.gray[600]}
+                    size={12}
+                />
+            )
+        case 'csv':
+            return (
+                <FileMinus
+                    color={FOUNDATION_THEME.colors.gray[600]}
+                    size={12}
+                />
+            )
+        case 'text':
+            return (
+                <FileText color={FOUNDATION_THEME.colors.gray[600]} size={12} />
+            )
+        default:
+            return (
+                <FileMinus
+                    color={FOUNDATION_THEME.colors.gray[600]}
+                    size={12}
+                />
+            )
+    }
+}

package/lib/components/ChatInput/utils.ts

@@ -2,7 +2,7 @@ import { AttachedFile } from './types'
 import { MenuItemType } from '../Menu/types'
 import { X } from 'lucide-react'
 import React from 'react'
-import { getDocIcon } from './ChatInput'
+import { getDocIcon } from './getDocIcon'
 import { capitalizeFirstLetter } from '../../global-utils/GlobalUtils'
 
 /**

package/lib/components/CodeBlock/CodeBlock.tsx

@@ -265,7 +265,7 @@ const CodeBlock = forwardRef<HTMLDivElement, CodeBlockProps>(
                             )}
                         </Block>
 
-                        {showCopyButton && (
+                        {showCopyButton && !isDiffMode && (
                             <Button
                                 data-element="copy-button"
                                 type="button"
@@ -301,14 +301,18 @@ const CodeBlock = forwardRef<HTMLDivElement, CodeBlockProps>(
                     backgroundColor={tokens.body.backgroundColor}
                     overflow="auto"
                     position={
-                        !showHeader && showCopyButton ? 'relative' : undefined
+                        !showHeader && showCopyButton && !isDiffMode
+                            ? 'relative'
+                            : undefined
                     }
                     className={
-                        !showHeader && showCopyButton ? 'code-body' : undefined
+                        !showHeader && showCopyButton && !isDiffMode
+                            ? 'code-body'
+                            : undefined
                     }
                     style={{ maxHeight: maxHeight || 'none' }}
                 >
-                    {!showHeader && showCopyButton && (
+                    {!showHeader && showCopyButton && !isDiffMode && (
                         <CopyOverlay>
                             <Button
                                 data-element="copy-button"

package/lib/components/CodeEditorV2/codeEditorV2.dark.tokens.ts

@@ -1,6 +1,7 @@
 import { FoundationTokenType } from '../../tokens/theme.token'
-import { ResponsiveCodeEditorV2Tokens } from './codeEditorV2.tokens'
-import { CodeEditorV2DiffLineType, MonacoTheme } from './codeEditorV2.types'
+import type { ResponsiveCodeEditorV2Tokens } from './codeEditorV2.tokens.types'
+import { CodeEditorV2DiffLineType } from './codeEditorV2.tokens.types'
+import { MonacoTheme } from './codeEditorV2.types'
 
 export const darkCodeEditorV2Tokens = (
     foundationToken: FoundationTokenType

package/lib/components/CodeEditorV2/codeEditorV2.light.token.ts

@@ -1,6 +1,7 @@
 import { FoundationTokenType } from '../../tokens/theme.token'
-import { ResponsiveCodeEditorV2Tokens } from './codeEditorV2.tokens'
-import { CodeEditorV2DiffLineType, MonacoTheme } from './codeEditorV2.types'
+import type { ResponsiveCodeEditorV2Tokens } from './codeEditorV2.tokens.types'
+import { CodeEditorV2DiffLineType } from './codeEditorV2.tokens.types'
+import { MonacoTheme } from './codeEditorV2.types'
 
 export const lightCodeEditorV2Tokens = (
     foundationToken: FoundationTokenType

package/lib/components/CodeEditorV2/codeEditorV2.tokens.ts

@@ -1,91 +1,13 @@
-import type { CSSObject } from 'styled-components'
-import { BreakpointType } from '../../breakpoints/breakPoints'
 import { FoundationTokenType } from '../../tokens/theme.token'
 import { darkCodeEditorV2Tokens } from './codeEditorV2.dark.tokens'
 import { lightCodeEditorV2Tokens } from './codeEditorV2.light.token'
 import { Theme } from '../../context/theme.enum'
-import { CodeEditorV2DiffLineType } from './codeEditorV2.types'
+import type { ResponsiveCodeEditorV2Tokens } from './codeEditorV2.tokens.types'
 
-export type CodeEditorV2Tokens = {
-    backgroundColor: CSSObject['backgroundColor']
-    border: CSSObject['border']
-    borderRadius: CSSObject['borderRadius']
-    boxShadow: CSSObject['boxShadow']
-    theme: 'light' | 'dark'
-    // Header tokens
-    header: {
-        backgroundColor: CSSObject['backgroundColor']
-        borderBottom: CSSObject['borderBottom']
-        paddingTop: CSSObject['paddingTop']
-        paddingBottom: CSSObject['paddingBottom']
-        paddingLeft: CSSObject['paddingLeft']
-        paddingRight: CSSObject['paddingRight']
-        gap: CSSObject['gap']
-        icon: {
-            width: CSSObject['width']
-        }
-        text: {
-            fontSize: CSSObject['fontSize']
-            fontWeight: CSSObject['fontWeight']
-            lineHeight: CSSObject['lineHeight']
-            color: CSSObject['color']
-        }
-    }
-    // Content area tokens
-    body: {
-        paddingTop: CSSObject['paddingTop']
-        paddingBottom: CSSObject['paddingBottom']
-        paddingLeft: CSSObject['paddingLeft']
-        paddingRight: CSSObject['paddingRight']
-        backgroundColor: CSSObject['backgroundColor']
-
-        // Gutter (line numbers) tokens
-        gutter: {
-            width: CSSObject['width']
-            color: CSSObject['color']
-            backgroundColor: {
-                [key in CodeEditorV2DiffLineType]: CSSObject['backgroundColor']
-            }
-            borderLeft: {
-                [key in CodeEditorV2DiffLineType]: CSSObject['borderLeft']
-            }
-            borderColor: {
-                [key in CodeEditorV2DiffLineType]: CSSObject['color']
-            }
-        }
-        // Code tokens
-        code: {
-            fontFamily: CSSObject['fontFamily']
-            fontSize: CSSObject['fontSize']
-            lineHeight: CSSObject['lineHeight']
-            paddingTop: CSSObject['paddingTop']
-            paddingBottom: CSSObject['paddingBottom']
-            paddingLeft: CSSObject['paddingLeft']
-            paddingRight: CSSObject['paddingRight']
-        }
-        // Highlighted line tokens (for diff mode and code highlighting)
-        highlightedLine: {
-            backgroundColor: {
-                [key in CodeEditorV2DiffLineType]: CSSObject['backgroundColor']
-            }
-        }
-        // Syntax highlighting tokens
-        syntax: {
-            keyword: { color: CSSObject['color'] }
-            function: { color: CSSObject['color'] }
-            string: { color: CSSObject['color'] }
-            number: { color: CSSObject['color'] }
-            operator: { color: CSSObject['color'] }
-            variable: { color: CSSObject['color'] }
-            comment: { color: CSSObject['color'] }
-            text: { color: CSSObject['color'] }
-        }
-    }
-}
-
-export type ResponsiveCodeEditorV2Tokens = {
-    [key in keyof BreakpointType]: CodeEditorV2Tokens
-}
+export type {
+    CodeEditorV2Tokens,
+    ResponsiveCodeEditorV2Tokens,
+} from './codeEditorV2.tokens.types'
 
 export const getCodeEditorV2Tokens = (
     foundationToken: FoundationTokenType,

package/lib/components/CodeEditorV2/codeEditorV2.tokens.types.ts

@@ -0,0 +1,89 @@
+import type { CSSObject } from 'styled-components'
+import { BreakpointType } from '../../breakpoints/breakPoints'
+
+export enum CodeEditorV2DiffLineType {
+    ADDED = 'added',
+    REMOVED = 'removed',
+    UNCHANGED = 'unchanged',
+}
+
+export type CodeEditorV2Tokens = {
+    backgroundColor: CSSObject['backgroundColor']
+    border: CSSObject['border']
+    borderRadius: CSSObject['borderRadius']
+    boxShadow: CSSObject['boxShadow']
+    theme: 'light' | 'dark'
+    // Header tokens
+    header: {
+        backgroundColor: CSSObject['backgroundColor']
+        borderBottom: CSSObject['borderBottom']
+        paddingTop: CSSObject['paddingTop']
+        paddingBottom: CSSObject['paddingBottom']
+        paddingLeft: CSSObject['paddingLeft']
+        paddingRight: CSSObject['paddingRight']
+        gap: CSSObject['gap']
+        icon: {
+            width: CSSObject['width']
+        }
+        text: {
+            fontSize: CSSObject['fontSize']
+            fontWeight: CSSObject['fontWeight']
+            lineHeight: CSSObject['lineHeight']
+            color: CSSObject['color']
+        }
+    }
+    // Content area tokens
+    body: {
+        paddingTop: CSSObject['paddingTop']
+        paddingBottom: CSSObject['paddingBottom']
+        paddingLeft: CSSObject['paddingLeft']
+        paddingRight: CSSObject['paddingRight']
+        backgroundColor: CSSObject['backgroundColor']
+
+        // Gutter (line numbers) tokens
+        gutter: {
+            width: CSSObject['width']
+            color: CSSObject['color']
+            backgroundColor: {
+                [key in CodeEditorV2DiffLineType]: CSSObject['backgroundColor']
+            }
+            borderLeft: {
+                [key in CodeEditorV2DiffLineType]: CSSObject['borderLeft']
+            }
+            borderColor: {
+                [key in CodeEditorV2DiffLineType]: CSSObject['color']
+            }
+        }
+        // Code tokens
+        code: {
+            fontFamily: CSSObject['fontFamily']
+            fontSize: CSSObject['fontSize']
+            lineHeight: CSSObject['lineHeight']
+            paddingTop: CSSObject['paddingTop']
+            paddingBottom: CSSObject['paddingBottom']
+            paddingLeft: CSSObject['paddingLeft']
+            paddingRight: CSSObject['paddingRight']
+        }
+        // Highlighted line tokens (for diff mode and code highlighting)
+        highlightedLine: {
+            backgroundColor: {
+                [key in CodeEditorV2DiffLineType]: CSSObject['backgroundColor']
+            }
+        }
+        // Syntax highlighting tokens
+        syntax: {
+            keyword: { color: CSSObject['color'] }
+            function: { color: CSSObject['color'] }
+            string: { color: CSSObject['color'] }
+            number: { color: CSSObject['color'] }
+            operator: { color: CSSObject['color'] }
+            variable: { color: CSSObject['color'] }
+            comment: { color: CSSObject['color'] }
+            text: { color: CSSObject['color'] }
+        }
+    }
+}
+
+export type ResponsiveCodeEditorV2Tokens = {
+    [key in keyof BreakpointType]: CodeEditorV2Tokens
+}

package/lib/components/CodeEditorV2/codeEditorV2.types.ts

@@ -1,6 +1,10 @@
 import { ReactNode } from 'react'
-import { CodeEditorV2Tokens } from './codeEditorV2.tokens'
+import type { CodeEditorV2Tokens } from './codeEditorV2.tokens.types'
+import { CodeEditorV2DiffLineType } from './codeEditorV2.tokens.types'
 import type { CSSObject } from 'styled-components'
+
+export { CodeEditorV2DiffLineType } from './codeEditorV2.tokens.types'
+
 export enum CodeEditorV2Variant {
     DEFAULT = 'default',
     NO_GUTTER = 'no-gutter',
@@ -11,11 +15,6 @@ export enum MonacoTheme {
     LIGHT = 'light',
     DARK = 'dark',
 }
-export enum CodeEditorV2DiffLineType {
-    ADDED = 'added',
-    REMOVED = 'removed',
-    UNCHANGED = 'unchanged',
-}
 
 export type CodeEditorV2DiffLine = {
     content: string

package/lib/components/DataTable/DataTable.tsx

@@ -61,6 +61,7 @@ import { MenuGroupType, MenuAlignment } from '../Menu/types'
 
 import { useMobileDataTable } from './hooks/useMobileDataTable'
 import MobileColumnDrawer from './MobileColumnDrawer'
+// eslint-disable-next-line import-x/no-cycle -- intentional recursion: DataTable renders PivotTableModal whose preview renders a nested DataTable
 import PivotTableModal from './PivotTableModal'
 import type { PivotTableConfig } from './PivotTableModal/types'
 import { useResponsiveTokens } from '../../hooks/useResponsiveTokens'
@@ -158,6 +159,7 @@ const DataTable = forwardRef(
             mobileColumnsToShow,
             enablePivotTable = false,
             pivotTableConfig,
+            dateLabel,
             ...rest
         }: DataTableProps<T>,
         ref: React.Ref<HTMLDivElement>
@@ -1974,6 +1976,7 @@ const DataTable = forwardRef(
                                                           >
                                                         | undefined
                                                 }
+                                                dateLabel={dateLabel}
                                                 isLoading={
                                                     isLoading ||
                                                     (serverSidePagination &&

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

@@ -1,7 +1,8 @@
 import { forwardRef, useState, useRef, useEffect, useCallback } from 'react'
 import { Filter, Search, ListFilter, X } from 'lucide-react'
 import { DataTableHeaderProps } from './types'
-import { Button, TextInput } from '../../../main'
+import { Button } from '../../Button'
+import { TextInput } from '../../Inputs/TextInput'
 import { ButtonSize, ButtonType } from '../../Button/types'
 import Block from '../../Primitives/Block/Block'
 import PrimitiveText from '../../Primitives/PrimitiveText/PrimitiveText'

package/lib/components/DataTable/PivotTableModal/PivotPreviewPanel.tsx

@@ -3,6 +3,7 @@ import Block from '../../Primitives/Block/Block'
 import PrimitiveText from '../../Primitives/PrimitiveText/PrimitiveText'
 import Button from '../../Button/Button'
 import { ButtonSize, ButtonType } from '../../Button/types'
+// eslint-disable-next-line import-x/no-cycle -- intentional recursion: the pivot preview renders a nested DataTable
 import DataTable from '../DataTable'
 import { NoScrollbar } from './pivotModal.styled'
 import { PivotTableIllustration } from './PivotTableIllustration'

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

@@ -36,6 +36,7 @@ import {
 } from './utils'
 import { NoScrollbar } from './pivotModal.styled'
 import { getPivotModalStyleTokens } from './pivotModalStyleTokens'
+// eslint-disable-next-line import-x/no-cycle -- intentional recursion: pivot preview renders a nested DataTable
 import PivotPreviewPanel from './PivotPreviewPanel'
 
 type PivotSectionKey = 'rows' | 'columns' | 'values'

package/lib/components/DataTable/TableBody/BulkActionBar.tsx

@@ -1,6 +1,6 @@
 import { forwardRef, useState } from 'react'
 import { Download } from 'lucide-react'
-import { Button } from '../../../main'
+import { Button } from '../../Button'
 import { ButtonSize, ButtonType } from '../../Button/types'
 import Block from '../../Primitives/Block/Block'
 import PrimitiveText from '../../Primitives/PrimitiveText/PrimitiveText'

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

@@ -19,16 +19,10 @@ import { MenuAlignment, MenuSide } from '../../Menu/types'
 import Skeleton from '../../Skeleton/Skeleton'
 import { getSkeletonState } from '../../Skeleton/utils'
 
-import {
-    Button,
-    ButtonType,
-    ButtonSize,
-    ButtonSubType,
-    Checkbox,
-    CheckboxSize,
-    TableTokenType,
-    Tooltip,
-} from '../../../main'
+import { Button, ButtonType, ButtonSize, ButtonSubType } from '../../Button'
+import { Checkbox, CheckboxSize } from '../../Checkbox'
+import { Tooltip } from '../../Tooltip'
+import type { TableTokenType } from '../dataTable.tokens'
 import { useResponsiveTokens } from '../../../hooks/useResponsiveTokens'
 import { TooltipSide, TooltipAlign, TooltipSize } from '../../Tooltip/types'
 
@@ -570,6 +564,7 @@ const TableBody = forwardRef<
             getColumnWidth,
             getRowStyle,
             getDisplayValue,
+            dateLabel,
             isLoading = false,
             showSkeleton = false,
             skeletonVariant = 'pulse',
@@ -1295,6 +1290,7 @@ const TableBody = forwardRef<
                                                       getDisplayValue={
                                                           getDisplayValue
                                                       }
+                                                      dateLabel={dateLabel}
                                                   />
                                               )
                                           }

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

@@ -50,6 +50,7 @@ export type TableBodyProps<T extends Record<string, unknown>> = {
     ) => React.CSSProperties
     getRowStyle?: (row: T, index: number) => React.CSSProperties
     getDisplayValue?: (value: unknown, column: ColumnDefinition<T>) => unknown
+    dateLabel?: string
     isLoading?: boolean
     showSkeleton?: boolean
     skeletonVariant?: SkeletonVariant

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

@@ -11,7 +11,12 @@ 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 {
+    ColumnType,
+    DropdownColumnProps,
+    DateColumnProps,
+    DateFormat,
+} from '../types'
 import SingleSelect from '../../SingleSelect/SingleSelect'
 import { SelectMenuVariant } from '../../Select'
 import { SelectMenuGroupType } from '../../Select/types'
@@ -19,7 +24,7 @@ import { useResponsiveTokens } from '../../../hooks/useResponsiveTokens'
 import { useResizeObserver } from '../../../hooks/useResizeObserver'
 import Tooltip from '../../Tooltip/Tooltip'
 import { TooltipSize } from '../../Tooltip/types'
-import { parseDateLike } from '../utils'
+import { parseDateLike, formatDateString } from '../utils'
 
 const StyledTableCell = styled.td<{
     width?: React.CSSProperties
@@ -79,9 +84,13 @@ const isEmptyValue = (value: unknown, columnType?: ColumnType): boolean => {
 const TruncatedTextWithTooltip = ({
     text,
     style = {},
+    suffix,
+    tableToken,
 }: {
     text: string
     style?: React.CSSProperties
+    suffix?: string
+    tableToken?: TableTokenType
 }) => {
     const textRef = useRef<HTMLSpanElement>(null)
     const [isTruncated, setIsTruncated] = useState(false)
@@ -125,16 +134,32 @@ const TruncatedTextWithTooltip = ({
         <span
             ref={textRef}
             style={{
-                display: 'block',
+                display: 'inline-flex',
+                alignItems: 'baseline',
                 width: '100%',
                 minWidth: 0,
                 overflow: 'hidden',
                 textOverflow: 'ellipsis',
                 whiteSpace: 'nowrap',
+                gap: '3px',
                 ...style,
             }}
         >
             {text}
+            {suffix != null && (
+                <span
+                    style={{
+                        fontSize:
+                            tableToken?.dataTable.table.body.cell.dateLabel
+                                .fontSize,
+                        color: tableToken?.dataTable.table.body.cell.dateLabel
+                            .color,
+                        whiteSpace: 'nowrap',
+                    }}
+                >
+                    {suffix}
+                </span>
+            )}
         </span>
     )
 
@@ -177,6 +202,7 @@ const TableCell = forwardRef<
             hasCustomBackground,
             onFieldChange,
             getDisplayValue,
+            dateLabel,
             'data-row-index': dataRowIndex,
             'data-col-index': dataColIndex,
             tabIndex: cellTabIndex,
@@ -455,23 +481,22 @@ const TableCell = forwardRef<
                 const date = parseDateLike(dateData.date)
                 const showTime = dateData.showTime || false
 
-                const formatDate = (date: Date): string => {
-                    if (isNaN(date.getTime())) return '-'
+                // Format string precedence: cell-level `DateColumnProps.format`
+                // beats column-level `dateFormat`. Falls back to a sensible
+                // default based on whether time should be shown.
+                const formatStr =
+                    dateData.format ||
+                    (column as { dateFormat?: DateFormat }).dateFormat ||
+                    (showTime ? 'DD MMM YYYY, hh:mm A' : 'DD MMM YYYY')
 
-                    const options: Intl.DateTimeFormatOptions = {
-                        year: 'numeric',
-                        month: 'short',
-                        day: '2-digit',
-                    }
+                const dateLabelStr =
+                    dateData.dateLabel ||
+                    (column as { dateLabel?: string }).dateLabel ||
+                    dateLabel
 
-                    if (showTime) {
-                        options.hour = '2-digit'
-                        options.minute = '2-digit'
-                    }
-
-                    return new Intl.DateTimeFormat('en-US', options).format(
-                        date
-                    )
+                const formatDate = (date: Date): string => {
+                    if (isNaN(date.getTime())) return '-'
+                    return formatDateString(date, formatStr)
                 }
 
                 return (
@@ -485,10 +510,10 @@ const TableCell = forwardRef<
                         <TruncatedTextWithTooltip
                             text={date ? formatDate(date) : '-'}
                             style={{
-                                fontSize:
-                                    FOUNDATION_THEME.font.size.body.sm.fontSize,
                                 color: FOUNDATION_THEME.colors.gray[700],
                             }}
+                            suffix={dateLabelStr}
+                            tableToken={tableToken}
                         />
                     </Block>
                 )

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

@@ -15,6 +15,7 @@ export type TableCellProps<T extends Record<string, unknown>> = {
     hasCustomBackground?: boolean
     onFieldChange: (value: unknown) => void
     getDisplayValue?: (value: unknown, column: ColumnDefinition<T>) => unknown
+    dateLabel?: string
     'data-row-index'?: number
     'data-col-index'?: number
     tabIndex?: number

package/lib/components/DataTable/columnTypes.ts

@@ -1,4 +1,4 @@
-import { FilterType, ColumnType } from './types'
+import { FilterType, ColumnType, DateFormat } from './types'
 
 export type ColumnFilterOption = {
     id: string
@@ -45,13 +45,15 @@ export type MultiSelectData = {
 
 export type DateData = {
     date: Date | string
-    format?: string
+    format?: DateFormat
+    dateLabel?: string
 }
 
 export type DateRangeData = {
     startDate: Date | string
     endDate: Date | string
-    format?: string
+    format?: DateFormat
+    dateLabel?: string
 }
 
 export type ColumnDataTypeMap = {