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

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

@@ -0,0 +1,284 @@
+import { forwardRef, useState, useMemo } from 'react'
+import { FilterType, ColumnDefinition, type ColumnFilter } from '../types'
+import { getColumnTypeConfig } from '../columnTypes'
+import { getUniqueColumnValues } from '../utils'
+import Block from '../../Primitives/Block/Block'
+import PrimitiveText from '../../Primitives/PrimitiveText/PrimitiveText'
+import { SearchInput } from '../../Inputs/SearchInput'
+import MultiSelectMenu from '../../MultiSelect/MultiSelectMenu'
+import SingleSelectMenu from '../../SingleSelect/SingleSelectMenu'
+import { FOUNDATION_THEME } from '../../../tokens'
+import { SelectMenuGroupType } from '../../Select/types'
+
+export type ColumnFilterProps<T extends Record<string, unknown>> = {
+    column: ColumnDefinition<T>
+    data: T[]
+    currentFilter?: ColumnFilter
+    onFilter: (
+        field: keyof T,
+        type: FilterType,
+        value: string | string[],
+        operator?: string
+    ) => void
+}
+
+const ColumnFilter = forwardRef<
+    HTMLDivElement,
+    ColumnFilterProps<Record<string, unknown>>
+>(({ column, data, currentFilter, onFilter }, ref) => {
+    const [searchValue, setSearchValue] = useState(
+        (currentFilter?.value as string) || ''
+    )
+    const [selectedValues, setSelectedValues] = useState<string[]>(
+        Array.isArray(currentFilter?.value)
+            ? currentFilter.value
+            : currentFilter?.value
+              ? [currentFilter.value as string]
+              : []
+    )
+    const [isSelectOpen, setIsSelectOpen] = useState(false)
+    const [isMultiSelectOpen, setIsMultiSelectOpen] = useState(false)
+
+    const columnConfig = getColumnTypeConfig(column.type)
+
+    const filterOptions = useMemo(() => {
+        if (column.filterOptions) {
+            return column.filterOptions.map((option) => ({
+                id: option.id,
+                label: option.label,
+                value: option.value,
+            }))
+        }
+
+        const uniqueValues = getUniqueColumnValues(data, column.field)
+        return uniqueValues.map((val) => ({
+            id: String(val),
+            label: String(val),
+            value: String(val),
+        }))
+    }, [data, column.field, column.filterOptions])
+
+    const menuItems: SelectMenuGroupType[] = [
+        {
+            groupLabel: `${column.header} Options`,
+            items: filterOptions.map((option) => ({
+                label: option.label,
+                value: option.value,
+                onClick: () => {},
+            })),
+            showSeparator: false,
+        },
+    ]
+
+    const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        const value = event.target.value
+        setSearchValue(value)
+        onFilter(column.field, FilterType.TEXT, value, 'contains')
+    }
+
+    const handleSingleSelect = (value: string) => {
+        setSelectedValues([value])
+        onFilter(column.field, FilterType.SELECT, value, 'equals')
+        setIsSelectOpen(false)
+    }
+
+    const handleMultiSelect = (value: string) => {
+        let newSelected = [...selectedValues]
+        if (newSelected.includes(value)) {
+            newSelected = newSelected.filter((v) => v !== value)
+        } else {
+            newSelected.push(value)
+        }
+        setSelectedValues(newSelected)
+        onFilter(column.field, FilterType.MULTISELECT, newSelected, 'equals')
+    }
+
+    const clearFilter = () => {
+        setSearchValue('')
+        setSelectedValues([])
+        onFilter(
+            column.field,
+            column.filterType || FilterType.TEXT,
+            '',
+            'equals'
+        )
+    }
+
+    if (!columnConfig.supportsFiltering) {
+        return null
+    }
+
+    return (
+        <Block
+            ref={ref}
+            display="flex"
+            flexDirection="column"
+            gap={FOUNDATION_THEME.unit[8]}
+            minWidth="200px"
+        >
+            <Block
+                display="flex"
+                alignItems="center"
+                justifyContent="space-between"
+            >
+                <PrimitiveText
+                    style={{
+                        fontSize: FOUNDATION_THEME.font.size.body.sm.fontSize,
+                        fontWeight: FOUNDATION_THEME.font.weight[600],
+                    }}
+                >
+                    Filter {column.header}
+                </PrimitiveText>
+                {(searchValue || selectedValues.length > 0) && (
+                    <PrimitiveText
+                        onClick={clearFilter}
+                        style={{
+                            fontSize:
+                                FOUNDATION_THEME.font.size.body.xs.fontSize,
+                            color: FOUNDATION_THEME.colors.primary[600],
+                            cursor: 'pointer',
+                            textDecoration: 'underline',
+                        }}
+                    >
+                        Clear
+                    </PrimitiveText>
+                )}
+            </Block>
+
+            {columnConfig.filterComponent === 'search' && (
+                <SearchInput
+                    placeholder={`Search ${column.header}...`}
+                    value={searchValue}
+                    onChange={handleSearchChange}
+                />
+            )}
+
+            {columnConfig.filterComponent === 'select' && (
+                <SingleSelectMenu
+                    items={menuItems}
+                    selected={selectedValues[0] || ''}
+                    onSelect={handleSingleSelect}
+                    open={isSelectOpen}
+                    onOpenChange={setIsSelectOpen}
+                    enableSearch={true}
+                    trigger={
+                        <Block
+                            display="flex"
+                            alignItems="center"
+                            justifyContent="space-between"
+                            padding={`${FOUNDATION_THEME.unit[8]} ${FOUNDATION_THEME.unit[12]}`}
+                            border={`1px solid ${FOUNDATION_THEME.colors.gray[300]}`}
+                            borderRadius={FOUNDATION_THEME.border.radius[8]}
+                            backgroundColor={FOUNDATION_THEME.colors.gray[0]}
+                            cursor="pointer"
+                            _hover={{
+                                backgroundColor:
+                                    FOUNDATION_THEME.colors.gray[25],
+                            }}
+                        >
+                            <PrimitiveText
+                                style={{
+                                    fontSize:
+                                        FOUNDATION_THEME.font.size.body.sm
+                                            .fontSize,
+                                    color: selectedValues[0]
+                                        ? FOUNDATION_THEME.colors.gray[700]
+                                        : FOUNDATION_THEME.colors.gray[400],
+                                }}
+                            >
+                                {selectedValues[0]
+                                    ? filterOptions.find(
+                                          (opt) =>
+                                              opt.value === selectedValues[0]
+                                      )?.label || selectedValues[0]
+                                    : 'Select option...'}
+                            </PrimitiveText>
+                            <PrimitiveText
+                                style={{
+                                    fontSize:
+                                        FOUNDATION_THEME.font.size.body.sm
+                                            .fontSize,
+                                }}
+                            >
+                                ▼
+                            </PrimitiveText>
+                        </Block>
+                    }
+                />
+            )}
+
+            {columnConfig.filterComponent === 'multiselect' && (
+                <MultiSelectMenu
+                    items={menuItems}
+                    selected={selectedValues}
+                    onSelect={handleMultiSelect}
+                    open={isMultiSelectOpen}
+                    onOpenChange={setIsMultiSelectOpen}
+                    trigger={
+                        <Block
+                            display="flex"
+                            alignItems="center"
+                            justifyContent="space-between"
+                            padding={`${FOUNDATION_THEME.unit[8]} ${FOUNDATION_THEME.unit[12]}`}
+                            border={`1px solid ${FOUNDATION_THEME.colors.gray[300]}`}
+                            borderRadius={FOUNDATION_THEME.border.radius[8]}
+                            backgroundColor={FOUNDATION_THEME.colors.gray[0]}
+                            cursor="pointer"
+                            _hover={{
+                                backgroundColor:
+                                    FOUNDATION_THEME.colors.gray[25],
+                            }}
+                        >
+                            <PrimitiveText
+                                style={{
+                                    fontSize:
+                                        FOUNDATION_THEME.font.size.body.sm
+                                            .fontSize,
+                                    color:
+                                        selectedValues.length > 0
+                                            ? FOUNDATION_THEME.colors.gray[700]
+                                            : FOUNDATION_THEME.colors.gray[400],
+                                }}
+                            >
+                                {selectedValues.length > 0
+                                    ? `${selectedValues.length} selected`
+                                    : 'Select options...'}
+                            </PrimitiveText>
+                            <PrimitiveText
+                                style={{
+                                    fontSize:
+                                        FOUNDATION_THEME.font.size.body.sm
+                                            .fontSize,
+                                }}
+                            >
+                                ▼
+                            </PrimitiveText>
+                        </Block>
+                    }
+                />
+            )}
+
+            {columnConfig.filterComponent === 'numberRange' && (
+                <Block
+                    display="flex"
+                    flexDirection="column"
+                    gap={FOUNDATION_THEME.unit[4]}
+                >
+                    <PrimitiveText
+                        style={{
+                            fontSize:
+                                FOUNDATION_THEME.font.size.body.xs.fontSize,
+                            color: FOUNDATION_THEME.colors.gray[600],
+                        }}
+                    >
+                        Number range filtering coming soon...
+                    </PrimitiveText>
+                </Block>
+            )}
+        </Block>
+    )
+})
+
+ColumnFilter.displayName = 'ColumnFilter'
+
+export default ColumnFilter

package/lib/components/DataTable/ColumnManager.tsx

@@ -0,0 +1,322 @@
+import { Plus } from 'lucide-react'
+import { useState, useRef } from 'react'
+import PrimitiveButton from '../Primitives/PrimitiveButton/PrimitiveButton'
+import Block from '../Primitives/Block/Block'
+import { ColumnManagerProps } from './types'
+import { useMobileDataTable } from './hooks/useMobileDataTable'
+import { useResponsiveTokens } from '../../hooks/useResponsiveTokens'
+import { TableTokenType } from './dataTable.tokens'
+import { MultiSelect } from '../MultiSelect'
+import {
+    MultiSelectVariant,
+    MultiSelectMenuAlignment,
+    MultiSelectMenuSize,
+    type MultiSelectMenuGroupType,
+    MultiSelectMenuSide,
+} from '../MultiSelect/types'
+import { TooltipSide, TooltipAlign, TooltipSize } from '../Tooltip/types'
+
+export const ColumnManager = <T extends Record<string, unknown>>({
+    columns,
+    visibleColumns,
+    onColumnChange,
+    maxSelections,
+    alwaysSelectedColumns = [],
+    columnManagerPrimaryAction,
+    columnManagerSecondaryAction,
+    multiSelectWidth = 250,
+    disabled = false,
+}: ColumnManagerProps<T>) => {
+    const mobileConfig = useMobileDataTable()
+    const tableTokens = useResponsiveTokens<TableTokenType>('TABLE')
+    const hasPrimaryAction = !!columnManagerPrimaryAction
+    const triggerButtonRef = useRef<HTMLButtonElement | null>(null)
+    const skipStateResetRef = useRef(false)
+
+    const [pendingSelectedColumns, setPendingSelectedColumns] = useState<
+        string[]
+    >(() => visibleColumns.map((col) => String(col.field)))
+
+    const managableColumns = columns.filter((col) => col.canHide !== false)
+    const selectedColumnValues = hasPrimaryAction
+        ? pendingSelectedColumns
+        : visibleColumns.map((col) => String(col.field))
+
+    const multiSelectItems: MultiSelectMenuGroupType[] = [
+        {
+            groupLabel: '',
+            showSeparator: false,
+            items: managableColumns.map((column) => ({
+                label: column.header,
+                value: String(column.field),
+                alwaysSelected: alwaysSelectedColumns.includes(
+                    String(column.field)
+                ),
+                tooltipProps: {
+                    side: TooltipSide.LEFT,
+                    align: TooltipAlign.CENTER,
+                    size: TooltipSize.SMALL,
+                    delayDuration: 300,
+                },
+            })),
+        },
+    ]
+
+    const handleDeselectAll = () => {
+        if (hasPrimaryAction) {
+            setPendingSelectedColumns(alwaysSelectedColumns)
+            return
+        }
+
+        const alwaysSelectedCols = visibleColumns.filter((col) =>
+            alwaysSelectedColumns.includes(String(col.field))
+        )
+
+        if (alwaysSelectedCols.length > 0) {
+            onColumnChange(alwaysSelectedCols)
+        } else if (visibleColumns.length > 1) {
+            onColumnChange([visibleColumns[0]])
+        }
+    }
+
+    const handleColumnToggle = (field: string) => {
+        if (hasPrimaryAction) {
+            const isSelected = pendingSelectedColumns.includes(field)
+            const isAlwaysSelected = alwaysSelectedColumns.includes(field)
+
+            skipStateResetRef.current = true
+
+            if (
+                isSelected &&
+                !isAlwaysSelected &&
+                pendingSelectedColumns.length > 1
+            ) {
+                setPendingSelectedColumns((prev) =>
+                    prev.filter((col) => col !== field)
+                )
+            } else if (!isSelected) {
+                const selectableCount = pendingSelectedColumns.filter(
+                    (col) => !alwaysSelectedColumns.includes(col)
+                ).length
+
+                const canAdd =
+                    !maxSelections ||
+                    selectableCount < maxSelections ||
+                    isAlwaysSelected
+                if (canAdd) {
+                    setPendingSelectedColumns((prev) => [...prev, field])
+                }
+            }
+
+            return
+        }
+
+        const isCurrentlyVisible = visibleColumns.some(
+            (col) => col.field === field
+        )
+        const isAlwaysSelected = alwaysSelectedColumns.includes(field)
+
+        if (
+            isCurrentlyVisible &&
+            !isAlwaysSelected &&
+            visibleColumns.length > 1
+        ) {
+            const newVisibleColumns = visibleColumns.filter(
+                (col) => col.field !== field
+            )
+            onColumnChange(newVisibleColumns)
+        } else if (!isCurrentlyVisible) {
+            const selectableCount = visibleColumns.filter(
+                (col) => !alwaysSelectedColumns.includes(String(col.field))
+            ).length
+
+            const canAdd =
+                !maxSelections ||
+                selectableCount < maxSelections ||
+                isAlwaysSelected
+            if (canAdd) {
+                const columnToAdd = columns.find((col) => col.field === field)
+                if (columnToAdd) {
+                    onColumnChange([...visibleColumns, columnToAdd])
+                }
+            }
+        }
+    }
+
+    const handleMultiSelectChange = (value: string) => {
+        if (value === '') {
+            handleDeselectAll()
+        } else {
+            handleColumnToggle(value)
+        }
+    }
+
+    const handlePrimaryActionClick = () => {
+        if (!columnManagerPrimaryAction) return
+
+        const newVisibleColumns = pendingSelectedColumns
+            .map((fieldValue) =>
+                columns.find((col) => String(col.field) === fieldValue)
+            )
+            .filter(Boolean) as typeof columns
+
+        const newSelectedFields = newVisibleColumns.map((col) =>
+            String(col.field)
+        )
+
+        skipStateResetRef.current = true
+        setPendingSelectedColumns(newSelectedFields)
+
+        onColumnChange(newVisibleColumns)
+        columnManagerPrimaryAction.onClick(newSelectedFields)
+        handleMenuClose()
+    }
+
+    const handleMenuClose = () => {
+        setTimeout(() => {
+            if (triggerButtonRef.current) {
+                triggerButtonRef.current.focus()
+            }
+        }, 100)
+    }
+
+    const handleOpenChange = (open: boolean) => {
+        if (!hasPrimaryAction) return
+
+        if (open) {
+            setPendingSelectedColumns(
+                visibleColumns.map((col) => String(col.field))
+            )
+            skipStateResetRef.current = false
+        } else {
+            if (!skipStateResetRef.current) {
+                setPendingSelectedColumns(
+                    visibleColumns.map((col) => String(col.field))
+                )
+            }
+            skipStateResetRef.current = false
+        }
+    }
+
+    const columnManagerIcon = tableTokens.header.actionIcons.columnManagerIcon
+    const columnManagerTrigger =
+        tableTokens.header.actionIcons.columnManagerTrigger
+
+    const customTrigger = (
+        <PrimitiveButton
+            ref={(el) => {
+                triggerButtonRef.current = el
+            }}
+            display="flex"
+            alignItems="center"
+            justifyContent="center"
+            width="auto"
+            height="auto"
+            backgroundColor={columnManagerTrigger?.backgroundColor}
+            cursor={disabled ? 'not-allowed' : 'pointer'}
+            border="none"
+            disabled={disabled}
+            aria-label="Manage columns"
+            title="Manage columns"
+            tabIndex={disabled ? -1 : 0}
+            type="button"
+            onKeyDown={(e) => {
+                if (disabled) return
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.stopPropagation()
+                    e.preventDefault()
+                    if (triggerButtonRef.current) {
+                        triggerButtonRef.current.click()
+                    }
+                }
+            }}
+            style={{
+                opacity: disabled
+                    ? (columnManagerTrigger?.opacity as React.CSSProperties['opacity'])
+                    : 1,
+            }}
+            _focus={{
+                outline: 'none',
+            }}
+            _focusVisible={{
+                outline: columnManagerTrigger?.focusVisible.outline,
+                outlineOffset: columnManagerTrigger?.focusVisible.outlineOffset,
+                borderRadius: columnManagerTrigger?.focusVisible.borderRadius,
+                boxShadow: columnManagerTrigger?.focusVisible.boxShadow,
+            }}
+        >
+            <Plus
+                size={columnManagerIcon.width}
+                color={columnManagerIcon.color}
+                aria-hidden="true"
+            />
+        </PrimitiveButton>
+    )
+
+    const primaryAction = columnManagerPrimaryAction
+        ? {
+              ...columnManagerPrimaryAction,
+              onClick: handlePrimaryActionClick,
+          }
+        : undefined
+
+    const secondaryAction = columnManagerSecondaryAction
+        ? {
+              ...columnManagerSecondaryAction,
+              onClick: () => {
+                  setPendingSelectedColumns(
+                      visibleColumns.map((col) => String(col.field))
+                  )
+                  skipStateResetRef.current = true
+                  columnManagerSecondaryAction.onClick()
+              },
+          }
+        : undefined
+
+    const commonProps = {
+        items: multiSelectItems,
+        selectedValues: selectedColumnValues,
+        onChange: handleMultiSelectChange,
+        enableSearch: true,
+        enableSelectAll: false,
+        showHeaderBorder: false,
+        maxSelections,
+        minMenuWidth: multiSelectWidth,
+        customTrigger,
+        showActionButtons: true,
+        primaryAction,
+        secondaryAction,
+        disabled,
+        onOpenChange: handleOpenChange,
+    }
+
+    return (
+        <Block>
+            {mobileConfig.isMobile ? (
+                <MultiSelect
+                    label=""
+                    side={MultiSelectMenuSide.BOTTOM}
+                    placeholder="Select columns to display"
+                    variant={MultiSelectVariant.CONTAINER}
+                    size={MultiSelectMenuSize.MEDIUM}
+                    showItemDividers={true}
+                    {...commonProps}
+                />
+            ) : (
+                <MultiSelect
+                    label=""
+                    placeholder="Manage Columns"
+                    side={MultiSelectMenuSide.BOTTOM}
+                    variant={MultiSelectVariant.NO_CONTAINER}
+                    alignment={MultiSelectMenuAlignment.END}
+                    size={MultiSelectMenuSize.SMALL}
+                    selectAllText="Select All Columns"
+                    maxMenuHeight={400}
+                    {...commonProps}
+                />
+            )}
+        </Block>
+    )
+}
+
+ColumnManager.displayName = 'ColumnManager'