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

package/lib/components/Tabs/types.ts

@@ -0,0 +1,99 @@
+import * as TabsPrimitive from '@radix-ui/react-tabs'
+import type { ComponentPropsWithoutRef, ReactNode } from 'react'
+import type { SkeletonVariant } from '../Skeleton/skeleton.tokens'
+
+export enum TabsVariant {
+    BOXED = 'boxed',
+    FLOATING = 'floating',
+    UNDERLINE = 'underline',
+    PILLS = 'pills',
+}
+
+export enum TabsSize {
+    SM = 'sm',
+    MD = 'md',
+    LG = 'lg',
+}
+
+export type TabItem = {
+    value: string
+    label: string
+    content: ReactNode
+    disable?: boolean
+    showSkeleton?: boolean
+    skeletonVariant?: SkeletonVariant
+    leftSlot?: ReactNode
+    rightSlot?: ReactNode
+    newItem?: boolean
+}
+
+export type TabsProps = ComponentPropsWithoutRef<typeof TabsPrimitive.Root> & {
+    variant?: TabsVariant
+    size?: TabsSize
+    expanded?: boolean
+    fitContent?: boolean
+    items?: TabItem[]
+    onTabClose?: (value: string) => void
+    onTabAdd?: () => void
+    showDropdown?: boolean
+    showAddButton?: boolean
+    dropdownTooltip?: string
+    addButtonTooltip?: string
+    disable?: boolean
+    showSkeleton?: boolean
+    skeletonVariant?: SkeletonVariant
+    stickyHeader?: boolean
+    offsetTop?: number
+}
+
+export type TabsListProps = ComponentPropsWithoutRef<
+    typeof TabsPrimitive.List
+> & {
+    variant?: TabsVariant
+    size?: TabsSize
+    expanded?: boolean
+    fitContent?: boolean
+    items?: TabItem[]
+    originalItems?: TabItem[]
+    onTabClose?: (value: string) => void
+    onTabAdd?: () => void
+    showDropdown?: boolean
+    showAddButton?: boolean
+    dropdownTooltip?: string
+    addButtonTooltip?: string
+    onTabChange?: (value: string) => void
+    activeTab?: string
+    disable?: boolean
+    showSkeleton?: boolean
+    skeletonVariant?: SkeletonVariant
+    stickyHeader?: boolean
+    offsetTop?: number
+}
+
+export type TabsTriggerProps = ComponentPropsWithoutRef<
+    typeof TabsPrimitive.Trigger
+> & {
+    value: string
+    variant?: TabsVariant
+    size?: TabsSize
+    leftSlot?: ReactNode
+    rightSlot?: ReactNode
+    children: string | number
+    closable?: boolean
+    onClose?: () => void
+    disable?: boolean
+    isActive?: boolean
+    isOverlay?: boolean
+    tabsGroupId?: string
+    showSkeleton?: boolean
+    skeletonVariant?: SkeletonVariant
+}
+
+export type TabsContentProps = ComponentPropsWithoutRef<
+    typeof TabsPrimitive.Content
+>
+
+export type TabsStyles = {
+    list: string
+    trigger: string
+}

package/lib/components/Tabs/utils.ts

@@ -0,0 +1,235 @@
+import { ReactNode } from 'react'
+import { TabItem } from './types'
+
+/**
+ * Groups tabs by content and concatenates labels for tabs with identical content.
+ * Maximum 3 items can be concatenated.
+ *
+ * @param tabs - Array of tab items to process
+ * @returns Processed tabs with concatenation applied
+ */
+export const processTabsWithConcatenation = (tabs: TabItem[]): TabItem[] => {
+    const contentGroups = new Map<ReactNode, TabItem[]>()
+
+    const processedDynamic: TabItem[] = []
+
+    contentGroups.forEach((groupItems) => {
+        if (groupItems.length > 1) {
+            const limitedItems = groupItems.slice(0, 3)
+            const concatenatedLabel = limitedItems
+                .map((item) => item.label)
+                .join('+')
+
+            processedDynamic.push({
+                value: limitedItems.map((item) => item.value).join('_'),
+                label: concatenatedLabel,
+                content: limitedItems[0].content,
+                newItem: false,
+            })
+        } else {
+            // Single item - keep as is
+            processedDynamic.push(groupItems[0])
+        }
+    })
+
+    return [...tabs, ...processedDynamic]
+}
+
+/**
+ * Sorts tabs to ensure default tabs appear first
+ */
+export const sortTabsByDefault = (tabs: TabItem[]): TabItem[] => {
+    return [...tabs]
+}
+
+/**
+ * Filters available items that haven't been added as tabs yet
+ */
+export const getAvailableItems = <T extends { value: string }>(
+    availableItems: T[],
+    existingTabs: TabItem[]
+): T[] => {
+    const existingValues = existingTabs.map((tab) => tab.value)
+    return availableItems.filter((item) => !existingValues.includes(item.value))
+}
+
+/**
+ * Creates tab items from selected values with shared content
+ */
+export const createTabsFromSelection = <
+    T extends { value: string; label: string },
+>(
+    selectedValues: string[],
+    availableItems: T[],
+    content: ReactNode
+): TabItem[] => {
+    return selectedValues
+        .map((value) => availableItems.find((item) => item.value === value))
+        .filter((item): item is T => item !== undefined)
+        .map((item) => ({
+            value: item.value,
+            label: item.label,
+            content,
+            newItem: false,
+        }))
+}
+
+/**
+ * Prepares items for SingleSelect dropdown (all tabs including scrolled-out)
+ */
+export const prepareDropdownItems = (
+    tabs: TabItem[],
+    originalItems?: TabItem[]
+) => {
+    const itemsToShow =
+        originalItems && originalItems.length > 0 ? originalItems : tabs
+
+    if (!itemsToShow.length) return []
+
+    return [
+        {
+            items: itemsToShow.map((tab) => ({
+                value: tab.value,
+                label: tab.label,
+            })),
+        },
+    ]
+}
+
+/**
+ * Returns tabs for display based on isDefault flag and maxDisplayTabs limit.
+ * - Default tabs (isDefault: true) are shown in the list
+ * - Non-default tabs are shown in dropdown
+ * - If maxDisplayTabs is set and there are more default tabs, only maxDisplayTabs are shown in list
+ */
+export const getDisplayTabs = (
+    tabs: TabItem[],
+    maxDisplayTabs?: number,
+    activeTab?: string
+): TabItem[] => {
+    const defaultTabs = tabs
+
+    if (
+        !maxDisplayTabs ||
+        maxDisplayTabs <= 0 ||
+        defaultTabs.length <= maxDisplayTabs
+    ) {
+        return defaultTabs.length > 0 ? defaultTabs : tabs
+    }
+
+    const activeIndex = activeTab
+        ? defaultTabs.findIndex((tab) => tab.value === activeTab)
+        : -1
+
+    if (activeIndex === -1) {
+        return defaultTabs.slice(0, maxDisplayTabs)
+    }
+
+    let startIndex = Math.max(0, activeIndex - Math.floor(maxDisplayTabs / 2))
+
+    if (startIndex + maxDisplayTabs > defaultTabs.length) {
+        startIndex = Math.max(0, defaultTabs.length - maxDisplayTabs)
+    }
+
+    return defaultTabs.slice(startIndex, startIndex + maxDisplayTabs)
+}
+
+/**
+ * Calculates the position and width for the tab indicator
+ */
+export const calculateTabIndicatorPosition = (
+    tabElement: HTMLButtonElement,
+    listElement: HTMLDivElement
+) => {
+    const listWidth = listElement.offsetWidth
+    const tabLeft = tabElement.offsetLeft
+    const tabWidth = tabElement.offsetWidth / listWidth
+
+    return { tabLeft, tabWidth }
+}
+
+/**
+ * Determines if the tab movement is from left to right
+ */
+export const isMovingRight = (
+    oldTab: HTMLButtonElement,
+    newTab: HTMLButtonElement
+): boolean => {
+    return oldTab.compareDocumentPosition(newTab) === 4
+}
+
+/**
+ * Calculates transition dimensions for the animated underline
+ */
+export const calculateTransitionDimensions = (
+    oldTab: HTMLButtonElement,
+    newTab: HTMLButtonElement,
+    listElement: HTMLDivElement
+) => {
+    const listWidth = listElement.offsetWidth
+    const oldTabLeft = oldTab.offsetLeft
+    const oldTabWidth = oldTab.offsetWidth
+    const newTabLeft = newTab.offsetLeft
+    const newTabWidth = newTab.offsetWidth
+
+    const movingRight = isMovingRight(oldTab, newTab)
+
+    if (movingRight) {
+        // Moving right: expand from old position to cover both tabs
+        const transitionWidth =
+            (newTabLeft + newTabWidth - oldTabLeft) / listWidth
+        return {
+            left: oldTabLeft,
+            width: transitionWidth,
+            finalLeft: newTabLeft,
+            finalWidth: newTabWidth / listWidth,
+        }
+    } else {
+        // Moving left: jump to new position and expand to cover both tabs
+        const transitionWidth =
+            (oldTabLeft + oldTabWidth - newTabLeft) / listWidth
+        return {
+            left: newTabLeft,
+            width: transitionWidth,
+            finalLeft: newTabLeft,
+            finalWidth: newTabWidth / listWidth,
+        }
+    }
+}
+
+/**
+ * Determines the actual tab value from a potentially concatenated value
+ * Concatenated tabs use underscore as separator, but we need to distinguish
+ * from single tabs that naturally have underscores in their values
+ */
+export const getActualTabValue = (
+    processedValue: string,
+    originalTabValues: Set<string>
+): string => {
+    if (originalTabValues.has(processedValue)) {
+        return processedValue
+    }
+
+    if (processedValue.includes('_')) {
+        return processedValue.split('_')[0]
+    }
+
+    return processedValue
+}
+
+/**
+ * Checks if a concatenated tab value should trigger multiple close events
+ */
+export const isConcatenatedTab = (
+    tabValue: string,
+    originalTabValues: Set<string>
+): boolean => {
+    return tabValue.includes('_') && !originalTabValues.has(tabValue)
+}
+
+/**
+ * Extracts original values from a concatenated tab value
+ */
+export const extractOriginalValues = (concatenatedValue: string): string[] => {
+    return concatenatedValue.split('_')
+}

package/lib/components/TabsV2/StyledTabsV2.tsx

@@ -0,0 +1,166 @@
+import styled from 'styled-components'
+import * as TabsPrimitive from '@radix-ui/react-tabs'
+import { TabsV2Variant, TabsV2Size } from './tabsV2.types'
+import type { TabsV2TokensType } from './tabsV2.tokens'
+import { FOUNDATION_THEME } from '../../tokens'
+
+export const StyledTabsRoot = styled(TabsPrimitive.Root)<{
+    $tabsToken: TabsV2TokensType
+}>((props) => ({
+    width: props.$tabsToken.width,
+}))
+
+export const StyledTabsContent = styled(TabsPrimitive.Content)<{
+    $tabsToken: TabsV2TokensType
+}>((props) => ({
+    width: props.$tabsToken.width,
+    outline: props.$tabsToken.outline,
+    position: 'relative',
+}))
+
+export const StyledTabsList = styled(TabsPrimitive.List)<{
+    $variant: TabsV2Variant
+    $size: TabsV2Size
+    $expanded: boolean
+    $fitContent: boolean
+    $tabsToken: TabsV2TokensType
+    $hideIndicator?: boolean
+}>((props) => ({
+    display: 'flex',
+    width: props.$fitContent ? 'fit-content' : '100%',
+    alignItems: 'center',
+    gap: props.$tabsToken.tabList.gap,
+    position: 'relative',
+    paddingTop:
+        props.$tabsToken.tabList.padding[props.$size][props.$variant].top,
+    paddingRight:
+        props.$tabsToken.tabList.padding[props.$size][props.$variant].right,
+    paddingBottom:
+        props.$tabsToken.tabList.padding[props.$size][props.$variant].bottom,
+    paddingLeft:
+        props.$tabsToken.tabList.padding[props.$size][props.$variant].left,
+    backgroundColor: props.$tabsToken.tabList.backgroundColor[props.$variant],
+    borderRadius:
+        props.$tabsToken.tabList.borderRadius[props.$size][props.$variant],
+
+    ...(props.$expanded &&
+        !props.$fitContent && {
+            justifyContent: 'space-between',
+            '& > *': {
+                flex: 1,
+                textAlign: 'center',
+            },
+        }),
+
+    ...(props.$variant === TabsV2Variant.UNDERLINE &&
+        !props.$hideIndicator && {
+            '&::after': {
+                content: "''",
+                position: 'absolute',
+                left: 0,
+                right: 0,
+                bottom: props.$tabsToken.tabList.activeIndicator.position
+                    .bottom,
+                height: props.$tabsToken.tabList.activeIndicator.height,
+                backgroundColor: props.$tabsToken.tabList.activeIndicator.color,
+                scale: 'var(--tabs-indicator-width, 0.125) 1',
+                translate: 'var(--tabs-indicator-left, 0) 0',
+                transformOrigin: 'left',
+                transition: props.$tabsToken.tabList.activeIndicator.transition,
+                zIndex: props.$tabsToken.tabList.activeIndicator.zIndex,
+            },
+        }),
+}))
+
+export const StyledTabsTrigger = styled(TabsPrimitive.Trigger)<{
+    $variant: TabsV2Variant
+    $size: TabsV2Size
+    $tabsToken: TabsV2TokensType
+    $isOverlay?: boolean
+}>((props) => ({
+    display: 'inline-flex',
+    gap: props.$tabsToken.tabList.trigger.gap,
+    alignItems: 'center',
+    justifyContent: 'center',
+    whiteSpace: 'nowrap',
+    boxSizing: 'border-box',
+    paddingTop:
+        props.$tabsToken.tabList.trigger.padding[props.$size][props.$variant]
+            .top,
+    paddingRight:
+        props.$tabsToken.tabList.trigger.padding[props.$size][props.$variant]
+            .right,
+    paddingBottom:
+        props.$tabsToken.tabList.trigger.padding[props.$size][props.$variant]
+            .bottom,
+    paddingLeft:
+        props.$tabsToken.tabList.trigger.padding[props.$size][props.$variant]
+            .left,
+    fontSize: props.$tabsToken.tabList.trigger.text.fontSize[props.$size],
+    fontWeight: props.$tabsToken.tabList.trigger.text.fontWeight[props.$size],
+    color: props.$isOverlay
+        ? props.$tabsToken.tabList.trigger.text.color[props.$variant].active
+        : props.$tabsToken.tabList.trigger.text.color[props.$variant].default,
+    backgroundColor: props.$isOverlay
+        ? 'transparent'
+        : props.$tabsToken.tabList.trigger.backgroundColor[props.$variant]
+              .default,
+    borderRadius:
+        props.$tabsToken.tabList.trigger.borderRadius[props.$size][
+            props.$variant
+        ],
+    border: props.$isOverlay
+        ? 'none'
+        : props.$tabsToken.tabList.trigger.border[props.$variant],
+    transition: props.$tabsToken.tabList.trigger.transition,
+    position: 'relative',
+    cursor: 'pointer',
+    overflow: 'visible',
+
+    ...(!props.$isOverlay && {
+        "&:hover:not([data-state='active']):not(:disabled)": {
+            color: props.$tabsToken.tabList.trigger.text.color[props.$variant]
+                .hover,
+            backgroundColor:
+                props.$tabsToken.tabList.trigger.backgroundColor[props.$variant]
+                    .hover,
+            borderRadius:
+                props.$tabsToken.tabList.trigger.borderRadius[props.$size][
+                    props.$variant
+                ],
+        },
+
+        "&[data-state='active']": {
+            color: props.$tabsToken.tabList.trigger.text.color[props.$variant]
+                .active,
+            backgroundColor: 'transparent',
+            fontWeight:
+                props.$tabsToken.tabList.trigger.text.fontWeight[props.$size],
+            borderRadius:
+                props.$tabsToken.tabList.trigger.borderRadius[props.$size][
+                    props.$variant
+                ],
+            zIndex: 1,
+        },
+    }),
+
+    '&:disabled': {
+        color: props.$tabsToken.tabList.trigger.text.color[props.$variant]
+            .disabled,
+        opacity: FOUNDATION_THEME.opacity[50],
+        pointerEvents: 'none',
+        cursor: 'not-allowed',
+    },
+}))
+
+export const TabsV2IconContainer = styled.span<{
+    $tabsToken: TabsV2TokensType
+}>((props) => ({
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: props.$tabsToken.tabList.trigger.gap,
+    maxWidth: props.$tabsToken.tabList.trigger.icon.maxWidth,
+    maxHeight: props.$tabsToken.tabList.trigger.icon.maxWidth,
+    color: 'inherit',
+}))

package/lib/components/TabsV2/TabsV2.tsx

@@ -0,0 +1,202 @@
+import * as React from 'react'
+import { forwardRef, useState, useCallback, useMemo, useEffect } from 'react'
+import { type TabsV2Props, TabsV2Size, TabsV2Variant } from './tabsV2.types'
+import { StyledTabsRoot } from './StyledTabsV2'
+import { TabsV2Provider } from './tabsV2.context'
+import type { TabsV2ContextValue } from './tabsV2.context'
+import type { TabsV2TokensType } from './tabsV2.tokens'
+import type { SkeletonVariant } from '../Skeleton/skeleton.tokens'
+import { useResponsiveTokens } from '../../hooks/useResponsiveTokens'
+
+const toTabValueString = (v: unknown): string => {
+    if (v === undefined || v === null) return ''
+    return String(v)
+}
+
+const TabsV2 = forwardRef<HTMLDivElement, TabsV2Props>(
+    (
+        {
+            className,
+            variant: variantProp = TabsV2Variant.UNDERLINE,
+            size: sizeProp = TabsV2Size.MD,
+            expanded: expandedProp = false,
+            fitContent: fitContentProp = false,
+            value,
+            defaultValue,
+            onValueChange,
+            disabled: disabledProp = false,
+            showSkeleton: showSkeletonProp = false,
+            skeletonVariant: skeletonVariantProp = 'pulse',
+            stickyHeader: stickyHeaderProp = false,
+            offsetTop: offsetTopProp = 0,
+            children,
+            ...props
+        },
+        ref
+    ) => {
+        const variant = variantProp ?? TabsV2Variant.UNDERLINE
+        const size = sizeProp ?? TabsV2Size.MD
+        const expanded = Boolean(expandedProp)
+        const fitContent = Boolean(fitContentProp)
+        const disabled = Boolean(disabledProp)
+        const showSkeleton = Boolean(showSkeletonProp)
+        const skeletonVariant = (skeletonVariantProp ??
+            'pulse') as SkeletonVariant
+        const stickyHeader = Boolean(stickyHeaderProp)
+        const offsetTop = offsetTopProp ?? 0
+
+        const [activeTab, setActiveTab] = useState<string>(() =>
+            toTabValueString(value ?? defaultValue)
+        )
+        const tabsToken = useResponsiveTokens<TabsV2TokensType>('TABSV2')
+
+        useEffect(() => {
+            if (value !== undefined && value !== null) {
+                setActiveTab(toTabValueString(value))
+            }
+        }, [value])
+
+        const isControlled = value !== undefined && value !== null
+
+        const handleValueChange = useCallback(
+            (newValue: string) => {
+                const next = toTabValueString(newValue)
+                if (!isControlled) {
+                    setActiveTab(next)
+                }
+                onValueChange?.(next)
+            },
+            [onValueChange, isControlled]
+        )
+
+        const renderChildren = (
+            childrenToRender: React.ReactNode
+        ): React.ReactNode => {
+            if (childrenToRender === undefined || childrenToRender === null) {
+                return null
+            }
+
+            return React.Children.map(childrenToRender, (child) => {
+                if (!React.isValidElement(child)) return child
+
+                const existingProps = (child.props ?? {}) as Record<
+                    string,
+                    unknown
+                >
+                const childDisabled =
+                    'disabled' in existingProps
+                        ? (existingProps.disabled as boolean | undefined)
+                        : undefined
+
+                const isTabsList =
+                    child.type &&
+                    (child.type as { displayName?: string }).displayName ===
+                        'TabsV2List'
+
+                const isTabsTrigger =
+                    child.type &&
+                    (child.type as { displayName?: string }).displayName ===
+                        'TabsV2Trigger'
+
+                if (isTabsList || isTabsTrigger) {
+                    const childProps = {
+                        ...existingProps,
+                        disabled: childDisabled || disabled,
+                        ...(isTabsList && {
+                            showSkeleton:
+                                'showSkeleton' in existingProps
+                                    ? existingProps.showSkeleton
+                                    : showSkeleton,
+                            skeletonVariant:
+                                'skeletonVariant' in existingProps
+                                    ? existingProps.skeletonVariant
+                                    : skeletonVariant,
+                            variant:
+                                'variant' in existingProps
+                                    ? existingProps.variant
+                                    : variant,
+                            size:
+                                'size' in existingProps
+                                    ? existingProps.size
+                                    : size,
+                            stickyHeader:
+                                'stickyHeader' in existingProps
+                                    ? existingProps.stickyHeader
+                                    : stickyHeader,
+                        }),
+                        ...(isTabsTrigger && {
+                            showSkeleton:
+                                'showSkeleton' in existingProps
+                                    ? existingProps.showSkeleton
+                                    : showSkeleton,
+                            skeletonVariant:
+                                'skeletonVariant' in existingProps
+                                    ? existingProps.skeletonVariant
+                                    : skeletonVariant,
+                        }),
+                    }
+                    return React.cloneElement(child, childProps)
+                }
+
+                const childChildren =
+                    (existingProps.children as React.ReactNode) || null
+                if (childChildren) {
+                    const childProps = {
+                        ...existingProps,
+                        children: renderChildren(childChildren),
+                    }
+                    return React.cloneElement(child, childProps)
+                }
+
+                return child
+            })
+        }
+
+        const context = useMemo<TabsV2ContextValue>(
+            () => ({
+                variant,
+                size,
+                expanded,
+                fitContent,
+                disabled,
+                showSkeleton,
+                skeletonVariant,
+                stickyHeader,
+                offsetTop,
+                activeTab,
+            }),
+            [
+                variant,
+                size,
+                expanded,
+                fitContent,
+                disabled,
+                showSkeleton,
+                skeletonVariant,
+                stickyHeader,
+                offsetTop,
+                activeTab,
+            ]
+        )
+
+        return (
+            <TabsV2Provider value={context}>
+                <StyledTabsRoot
+                    data-tabs={toTabValueString(value) || 'tabs'}
+                    ref={ref}
+                    className={className}
+                    value={activeTab}
+                    onValueChange={handleValueChange}
+                    $tabsToken={tabsToken}
+                    {...props}
+                >
+                    {renderChildren(children)}
+                </StyledTabsRoot>
+            </TabsV2Provider>
+        )
+    }
+)
+
+TabsV2.displayName = 'TabsV2'
+
+export default TabsV2