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

package/lib/components/DataTable/DataTable.tsx

@@ -943,6 +943,14 @@ const DataTable = forwardRef(
 
         const sortTimeoutRef = useRef<NodeJS.Timeout | null>(null)
 
+        useEffect(() => {
+            return () => {
+                if (sortTimeoutRef.current) {
+                    clearTimeout(sortTimeoutRef.current)
+                }
+            }
+        }, [])
+
         const applySortConfig = (
             field: keyof T,
             newSortConfig: SortConfig | null

package/lib/components/DataTable/TableHeader/FilterComponents.tsx

@@ -618,6 +618,8 @@ export const SingleSelectItems: React.FC<{
                                                         .header.filter
                                                         .sortOption.fontWeight,
                                                 flexGrow: 1,
+                                                overflowWrap: 'break-word',
+                                                minWidth: 0,
                                             }}
                                         >
                                             {label}
@@ -824,6 +826,8 @@ export const MultiSelectItems: React.FC<{
                                                         .header.filter
                                                         .sortOption.fontWeight,
                                                 flexGrow: 1,
+                                                overflowWrap: 'break-word',
+                                                minWidth: 0,
                                             }}
                                         >
                                             {label}

package/lib/components/DateRangePicker/DateRangePicker.tsx

@@ -25,6 +25,8 @@ import {
     getPresetLabel,
     getTodayInTimezone,
     validateDateInput,
+    isControlledDateRange,
+    isValidDate,
 } from './utils'
 import CalendarGrid from './CalendarGrid'
 import QuickRangeSelector from './QuickRangeSelector'
@@ -408,7 +410,7 @@ const DateRangePicker = forwardRef<HTMLDivElement, DateRangePickerProps>(
 
         const [selectedRange, setSelectedRange] = useState<
             DateRange | undefined
-        >(value)
+        >(() => (isControlledDateRange(value) ? value : undefined))
         const lastExternalValueRef = React.useRef<{
             start: number | null
             end: number | null
@@ -524,32 +526,44 @@ const DateRangePicker = forwardRef<HTMLDivElement, DateRangePickerProps>(
 
         const resetValues = useCallback(
             (dateRangeObj?: DateRange) => {
-                setSelectedRange(dateRangeObj)
+                const normalizedRange = isControlledDateRange(dateRangeObj)
+                    ? dateRangeObj
+                    : undefined
+
+                setSelectedRange(normalizedRange)
                 setActivePreset(
-                    dateRangeObj
-                        ? detectPresetFromRange(dateRangeObj, timezone)
+                    normalizedRange
+                        ? detectPresetFromRange(normalizedRange, timezone)
                         : DateRangePreset.CUSTOM
                 )
                 setStartDate(
-                    dateRangeObj &&
-                        formatDate(dateRangeObj.startDate, dateFormat, timezone)
+                    normalizedRange &&
+                        formatDate(
+                            normalizedRange.startDate,
+                            dateFormat,
+                            timezone
+                        )
                 )
-                if (dateRangeObj && dateRangeObj.endDate) {
+                if (normalizedRange?.endDate) {
                     setEndDate(
-                        formatDate(dateRangeObj.endDate, dateFormat, timezone)
+                        formatDate(
+                            normalizedRange.endDate,
+                            dateFormat,
+                            timezone
+                        )
                     )
-                } else if (!dateRangeObj) {
+                } else if (!normalizedRange) {
                     setEndDate(undefined)
                 }
                 setStartTime(
-                    dateRangeObj &&
-                        formatDate(dateRangeObj.startDate, 'HH:mm', timezone)
+                    normalizedRange &&
+                        formatDate(normalizedRange.startDate, 'HH:mm', timezone)
                 )
-                if (dateRangeObj && dateRangeObj.endDate) {
+                if (normalizedRange?.endDate) {
                     setEndTime(
-                        formatDate(dateRangeObj.endDate, 'HH:mm', timezone)
+                        formatDate(normalizedRange.endDate, 'HH:mm', timezone)
                     )
-                } else if (!dateRangeObj) {
+                } else if (!normalizedRange) {
                     setEndTime(undefined)
                 }
                 setStartDateValidation({ isValid: true, error: 'none' })
@@ -562,7 +576,7 @@ const DateRangePicker = forwardRef<HTMLDivElement, DateRangePickerProps>(
         )
 
         useEffect(() => {
-            if (!value) {
+            if (!isControlledDateRange(value)) {
                 if (lastExternalValueRef.current !== null) {
                     lastExternalValueRef.current = null
                     resetValues(undefined)
@@ -571,8 +585,11 @@ const DateRangePicker = forwardRef<HTMLDivElement, DateRangePickerProps>(
             }
 
             const nextSignature = {
-                start: value.startDate.getTime() ?? null,
-                end: value.endDate?.getTime() ?? null,
+                start: value.startDate.getTime(),
+                end:
+                    value.endDate && isValidDate(value.endDate)
+                        ? value.endDate.getTime()
+                        : null,
                 dateFormat,
             }
 

package/lib/components/DateRangePicker/types.ts

@@ -194,11 +194,11 @@ export type CustomPresetDefinition = {
 /**
  * Presets configuration - can be predefined presets, custom configs, or custom definitions
  */
-export type PresetsConfig =
-    | DateRangePreset[]
-    | CustomPresetConfig[]
-    | CustomPresetDefinition[]
-    | (DateRangePreset | CustomPresetConfig | CustomPresetDefinition)[]
+export type PresetsConfig = (
+    | DateRangePreset
+    | CustomPresetConfig
+    | CustomPresetDefinition
+)[]
 
 // =============================================================================
 // COMPONENT PROPS

package/lib/components/DateRangePicker/utils.ts

@@ -256,6 +256,11 @@ export const isValidDate = (date: Date): boolean => {
     return date instanceof Date && !isNaN(date.getTime())
 }
 
+/** True when a controlled `value` has a usable start date (avoids `.getTime()` on undefined). */
+export const isControlledDateRange = (
+    value?: DateRange | null
+): value is DateRange => !!value && isValidDate(value.startDate)
+
 /**
  * Formats time in 12-hour format
  * @param date The date to format

package/lib/components/Directory/Directory.tsx

@@ -5,19 +5,20 @@ import { createRef, useEffect, useRef } from 'react'
 import type { DirectoryProps } from './types'
 import Section from './Section'
 import Block from '../Primitives/Block/Block'
-import { handleSectionNavigation } from './utils'
+import { handleSectionNavigation, normalizeDirectoryData } from './utils'
 import { ActiveItemProvider } from './NavItem'
 import { useResponsiveTokens } from '../../hooks/useResponsiveTokens'
 import { DirectoryTokenType } from './directory.tokens'
 
 const Directory = ({
-    directoryData,
+    directoryData: directoryDataProp,
     idPrefix,
     activeItem,
     onActiveItemChange,
     defaultActiveItem,
     iconOnlyMode = false,
 }: DirectoryProps) => {
+    const directoryData = normalizeDirectoryData(directoryDataProp)
     const sectionRefs = useRef<Array<React.RefObject<HTMLDivElement | null>>>(
         []
     )

package/lib/components/Directory/types.ts

@@ -1,7 +1,7 @@
 import type { ReactNode } from 'react'
 
 export type DirectoryProps = {
-    directoryData: DirectoryData[]
+    directoryData: DirectoryData[] | null
     idPrefix?: string
     activeItem?: string | null
     onActiveItemChange?: (item: string | null) => void

package/lib/components/Directory/utils.ts

@@ -1,3 +1,9 @@
+import type { DirectoryData } from './types'
+
+export const normalizeDirectoryData = (
+    directoryData: DirectoryData[] | null
+): DirectoryData[] => (Array.isArray(directoryData) ? directoryData : [])
+
 export const handleSectionNavigation = (
     direction: 'up' | 'down',
     currentIndex: number,

package/lib/components/Drawer/components/DrawerBase.tsx

@@ -299,6 +299,22 @@ export const Drawer = ({
         string | undefined
     >(undefined)
 
+    // Prevent focus from escaping to underlying content when a nested drawer is open
+    React.useLayoutEffect(() => {
+        const stopFocus = (e: FocusEvent) => {
+            // only intercept when a nested modal is open
+            if (document.querySelector('[data-modal]')) {
+                e.stopImmediatePropagation()
+            }
+        }
+        document.addEventListener('focusin', stopFocus)
+        document.addEventListener('focusout', stopFocus)
+        return () => {
+            document.removeEventListener('focusin', stopFocus)
+            document.removeEventListener('focusout', stopFocus)
+        }
+    }, [])
+
     // Screen reader announcement for drawer state changes
     React.useEffect(() => {
         if (open) {

package/lib/components/Drawer/components/NestedSelectDrawer.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import React, { useState, useMemo, createContext } from 'react'
+import React, { useState, useMemo, createContext, useEffect } from 'react'
 import {
     Drawer,
     DrawerPortal,
@@ -249,6 +249,11 @@ export const NestedMultiSelectDrawer = ({
         }>
     >([{ title: heading, items, selectedValues: internalSelectedValues }])
 
+    useEffect(() => {
+        setInternalSelectedValues(selectedValues)
+        setNavigationStack([{ title: heading, items, selectedValues }])
+    }, [selectedValues])
+
     const selectMobileOffset = {
         top: '74px',
         bottom: '0px',
@@ -579,6 +584,13 @@ export const NestedSingleSelectDrawer = ({
         }>
     >([{ title: heading, items, selectedValue: internalSelectedValue }])
 
+    useEffect(() => {
+        setInternalSelectedValue(selectedValue || '')
+        setNavigationStack([
+            { title: heading, items, selectedValue: selectedValue || '' },
+        ])
+    }, [selectedValue])
+
     const selectMobileOffset = {
         top: '74px',
         bottom: '16px',

package/lib/components/Drawer/components/SelectDrawer.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import React, { useState, useMemo } from 'react'
+import React, { useState, useMemo, useEffect } from 'react'
 import {
     Drawer,
     DrawerPortal,
@@ -46,6 +46,10 @@ export const MultiSelectDrawer = ({
     const [internalSelectedValues, setInternalSelectedValues] =
         useState<string[]>(selectedValues)
 
+    useEffect(() => {
+        setInternalSelectedValues(selectedValues)
+    }, [selectedValues])
+
     const selectMobileOffset = {
         top: '74px',
         bottom: '16px',
@@ -386,6 +390,10 @@ export const SingleSelectDrawer = ({
         selectedValue || ''
     )
 
+    useEffect(() => {
+        setInternalSelectedValue(selectedValue || '')
+    }, [selectedValue])
+
     const selectMobileOffset = {
         top: '74px',
         bottom: '0px',

package/lib/components/Inputs/OTPInput/OTPInput.tsx

@@ -74,15 +74,17 @@ const OTPInput = ({
             .join(' ') || undefined
 
     useEffect(() => {
-        if (!disabled) return
         const val = value || ''
         const otpArray = val.split('').slice(0, length)
         const paddedOtp = [
             ...otpArray,
             ...new Array(Math.max(length - otpArray.length, 0)).fill(''),
         ]
-        setOtp(paddedOtp)
-    }, [disabled, value, length])
+        setOtp((prevOtp) => {
+            if (prevOtp.join('') === paddedOtp.join('')) return prevOtp
+            return paddedOtp
+        })
+    }, [value, length])
 
     useEffect(() => {
         setOtp((prevOtp) => {

package/lib/components/Menu/Menu.tsx

@@ -7,7 +7,7 @@ import {
     MenuSide,
     type MenuItemType,
 } from './types'
-import React, { useState, useRef, useMemo, useCallback } from 'react'
+import React, { useState, useRef, useMemo, useCallback, useEffect } from 'react'
 import { filterMenuGroups } from './utils'
 import MenuItem from './MenuItem'
 import Block from '../Primitives/Block/Block'
@@ -115,6 +115,14 @@ const Menu = ({
         onOpenChange?.(newOpen)
     }
 
+    useEffect(() => {
+        return () => {
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current)
+            }
+        }
+    }, [])
+
     const handleOutsideInteraction = useCallback((e: Event) => {
         if (justOpenedRef.current) {
             e.preventDefault()

package/lib/components/Modal/useModal.ts

@@ -22,6 +22,12 @@ export const useModal = (isOpen: boolean, onClose: () => void) => {
             const container = getPortalContainer()
             setPortalContainer(container)
 
+            document.body.style.setProperty(
+                'pointer-events',
+                'auto',
+                'important'
+            )
+
             let animationFrame2: number | null = null
             const animationFrame1 = requestAnimationFrame(() => {
                 animationFrame2 = requestAnimationFrame(() => {
@@ -44,6 +50,7 @@ export const useModal = (isOpen: boolean, onClose: () => void) => {
                     cancelAnimationFrame(animationFrame2)
                 }
                 document.removeEventListener('keydown', handleEscapeKey)
+                document.body.style.removeProperty('pointer-events')
             }
         } else {
             // Start exit animation

package/lib/components/Radio/Radio.tsx

@@ -16,7 +16,7 @@ import { getTruncatedText } from '../../global-utils/GlobalUtils'
 export const Radio = ({
     id,
     checked,
-    defaultChecked = false,
+    defaultChecked,
     onChange,
     disabled = false,
     required = false,
@@ -45,12 +45,20 @@ export const Radio = ({
         subtextId && customAriaDescribedBy
             ? `${customAriaDescribedBy} ${subtextId}`
             : subtextId || customAriaDescribedBy
+    const isControlled = checked !== undefined
+    const checkedProps = isControlled
+        ? { checked }
+        : { defaultChecked: defaultChecked ?? false }
 
     return (
         <Block
             data-radio={children ?? 'radio'}
             data-status={disabled ? 'disabled' : 'enabled'}
-            data-state={checked ? 'checked' : 'unchecked'}
+            data-state={
+                (isControlled ? checked : defaultChecked)
+                    ? 'checked'
+                    : 'unchecked'
+            }
             data-id={value ?? ''}
             display="flex"
             alignItems={subtext ? 'flex-start' : 'center'}
@@ -60,14 +68,13 @@ export const Radio = ({
                 type="radio"
                 id={uniqueId}
                 name={name}
-                checked={checked}
-                defaultChecked={defaultChecked}
+                {...checkedProps}
                 disabled={disabled}
                 required={required}
+                readOnly={isControlled && !onChange ? true : undefined}
                 onChange={onChange}
                 size={size}
                 $isDisabled={disabled}
-                $isChecked={checked || false}
                 $error={error}
                 $tokens={radioTokens}
                 style={getErrorShakeStyle(shouldShake)}

package/lib/components/Radio/StyledRadio.tsx

@@ -7,7 +7,6 @@ import { radioAnimations } from './radio.animations'
 export const StyledRadioInput = styled.input<{
     size: RadioSize
     $isDisabled: boolean
-    $isChecked: boolean
     $error?: boolean
     $tokens: RadioTokensType
 }>`
@@ -22,17 +21,17 @@ export const StyledRadioInput = styled.input<{
     padding: 0;
     flex-shrink: 0;
 
-    ${({ size, $isChecked, $isDisabled, $tokens }) => {
+    ${({ size, $isDisabled, $tokens }) => {
         const state = $isDisabled ? 'disabled' : 'default'
-        const indicatorState = $isChecked ? 'active' : 'inactive'
+        const inactiveIndicator = $tokens.indicator.inactive
+        const activeIndicator = $tokens.indicator.active
 
         return css`
             ${radioAnimations}
 
-            background-color: ${$tokens.indicator[indicatorState]
-                .backgroundColor[state]};
-            border: ${$tokens.borderWidth[indicatorState][state]}px solid
-                ${$tokens.indicator[indicatorState].borderColor[state]};
+            background-color: ${inactiveIndicator.backgroundColor[state]};
+            border: ${$tokens.borderWidth.inactive[state]}px solid
+                ${inactiveIndicator.borderColor[state]};
             width: ${$tokens.height[size]};
             height: ${$tokens.height[size]};
 
@@ -41,28 +40,45 @@ export const StyledRadioInput = styled.input<{
                 width: 50%;
                 height: 50%;
                 border-radius: 50%;
-                background-color: ${$isChecked
-                    ? $tokens.activeIndicator.active.backgroundColor[state]
-                    : 'transparent'};
-                transform: ${$isChecked ? 'scale(1)' : 'scale(0)'};
+                background-color: transparent;
+                transform: scale(0);
                 transition:
                     transform 250ms cubic-bezier(0.4, 0, 0.2, 1),
                     background-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
             }
+
+            &:checked {
+                background-color: ${activeIndicator.backgroundColor[state]};
+                border: ${$tokens.borderWidth.active[state]}px solid
+                    ${activeIndicator.borderColor[state]};
+
+                &::after {
+                    background-color: ${$tokens.activeIndicator.active
+                        .backgroundColor[state]};
+                    transform: scale(1);
+                }
+            }
+
             &:focus-visible {
-                outline: 2px solid
-                    ${$tokens.indicator[indicatorState].borderColor[state]};
+                outline: 2px solid ${inactiveIndicator.borderColor[state]};
                 outline-offset: 2px;
                 /* WCAG 2.4.7 Focus Visible (AA): Focus indicator must be visible
                  * WCAG 1.4.11 Non-text Contrast (AA): Focus outline must have contrast ratio ≥3:1 against adjacent colors
                  * Manual verification recommended for all states */
             }
 
+            &:checked:focus-visible {
+                outline-color: ${activeIndicator.borderColor[state]};
+            }
+
             &:not(:disabled):hover {
-                background-color: ${$tokens.indicator[indicatorState]
-                    .backgroundColor.hover};
-                border-color: ${$tokens.indicator[indicatorState].borderColor
-                    .hover};
+                background-color: ${inactiveIndicator.backgroundColor.hover};
+                border-color: ${inactiveIndicator.borderColor.hover};
+            }
+
+            &:checked:not(:disabled):hover {
+                background-color: ${activeIndicator.backgroundColor.hover};
+                border-color: ${activeIndicator.borderColor.hover};
             }
 
             cursor: ${$isDisabled ? 'not-allowed' : 'pointer'};

package/lib/components/Sidebar/Sidebar.tsx

@@ -323,12 +323,22 @@ const Sidebar = forwardRef<HTMLDivElement, SidebarProps>(
                 passive: true,
             })
 
-            const handleResize = () => setTimeout(updateBlurState, 50)
+            let resizeTimeoutId: ReturnType<typeof setTimeout> | null = null
+
+            const handleResize = () => {
+                if (resizeTimeoutId) {
+                    clearTimeout(resizeTimeoutId)
+                }
+                resizeTimeoutId = setTimeout(updateBlurState, 50)
+            }
             window.addEventListener('resize', handleResize, { passive: true })
 
             return () => {
                 scrollingElement.removeEventListener('scroll', updateBlurState)
                 window.removeEventListener('resize', handleResize)
+                if (resizeTimeoutId) {
+                    clearTimeout(resizeTimeoutId)
+                }
             }
         }, [isExpanded, data, isHovering])
 

package/lib/components/Sidebar/SidebarContent.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import styled from 'styled-components'
 import Block from '../Primitives/Block/Block'
 import Directory from '../Directory/Directory'
+import { normalizeDirectoryData } from '../Directory/utils'
 import SidebarHeader from './SidebarHeader'
 import SidebarFooter from './SidebarFooter'
 import type { DirectoryData } from '../Directory/types'
@@ -35,7 +36,7 @@ export type SidebarContentProps = {
     sidebarNavId?: string
     showTopBlur: boolean
     showBottomBlur: boolean
-    data: DirectoryData[]
+    data: DirectoryData[] | null
     idPrefix: string
     activeItem?: string | null
     onActiveItemChange?: (item: string | null) => void
@@ -66,6 +67,8 @@ const SidebarContent: React.FC<SidebarContentProps> = ({
     setIsHovering,
     sidebarState = 'expanded',
 }) => {
+    const directoryData = normalizeDirectoryData(data)
+
     return (
         <Block
             data-element="sidebar-content"
@@ -104,7 +107,7 @@ const SidebarContent: React.FC<SidebarContentProps> = ({
                 onMouseEnter={() => setIsHovering?.(true)}
             >
                 <Directory
-                    directoryData={data}
+                    directoryData={directoryData}
                     idPrefix={idPrefix}
                     activeItem={activeItem}
                     onActiveItemChange={onActiveItemChange}

package/lib/components/Sidebar/TenantPanel.tsx

@@ -13,6 +13,7 @@ import { arrangeTenants } from './utils'
 import type { TenantItem } from './types'
 import { Tooltip } from '../Tooltip'
 import { TooltipSide, TooltipSize } from '../Tooltip/types'
+import { Badge, BadgeColor, BadgeSize } from '../Badge'
 import { useResponsiveTokens } from '../../hooks/useResponsiveTokens'
 import type { SidebarTokenType } from './sidebar.tokens'
 
@@ -125,6 +126,56 @@ const TenantItem: React.FC<{
 }> = ({ tenant, isSelected, onSelect }) => {
     const tokens = useResponsiveTokens<SidebarTokenType>('SIDEBAR')
 
+    const tenantButton = (
+        <PrimitiveButton
+            data-element="sidebar-section"
+            data-id={tenant.label}
+            data-status={isSelected ? 'selected' : 'not selected'}
+            type="button"
+            onClick={onSelect}
+            backgroundColor={tokens.leftPanel.item.backgroundColor.default}
+            width={tokens.leftPanel.item.width}
+            height={tokens.leftPanel.item.width}
+            borderRadius={tokens.leftPanel.item.borderRadius}
+            display="flex"
+            alignItems="center"
+            justifyContent="center"
+            cursor="pointer"
+            border={
+                isSelected
+                    ? tokens.leftPanel.item.border.active
+                    : tokens.leftPanel.item.border.default
+            }
+            aria-label={`Select tenant: ${tenant.label}`}
+            aria-pressed={isSelected}
+            style={{
+                transition: 'all 75ms ease',
+            }}
+            _hover={{
+                backgroundColor: tokens.leftPanel.item.backgroundColor.hover,
+                outline: isSelected
+                    ? tokens.leftPanel.item.border.active
+                    : tokens.leftPanel.item.border.hover,
+            }}
+        >
+            <span aria-hidden="true">{tenant.icon}</span>
+        </PrimitiveButton>
+    )
+
+    const trigger = tenant.badge ? (
+        <Badge
+            text={tenant.badge.text.slice(0, 2)}
+            size={BadgeSize.SM}
+            color={BadgeColor.NEUTRAL}
+            position={'bottom-right'}
+            isCircular
+        >
+            {tenantButton}
+        </Badge>
+    ) : (
+        tenantButton
+    )
+
     return (
         <Tooltip
             content={tenant.label}
@@ -132,40 +183,7 @@ const TenantItem: React.FC<{
             delayDuration={500}
             size={TooltipSize.SMALL}
         >
-            <PrimitiveButton
-                data-element="sidebar-section"
-                data-id={tenant.label}
-                data-status={isSelected ? 'selected' : 'not selected'}
-                type="button"
-                onClick={onSelect}
-                backgroundColor={tokens.leftPanel.item.backgroundColor.default}
-                width={tokens.leftPanel.item.width}
-                height={tokens.leftPanel.item.width}
-                borderRadius={tokens.leftPanel.item.borderRadius}
-                display="flex"
-                alignItems="center"
-                justifyContent="center"
-                cursor="pointer"
-                border={
-                    isSelected
-                        ? tokens.leftPanel.item.border.active
-                        : tokens.leftPanel.item.border.default
-                }
-                aria-label={`Select tenant: ${tenant.label}`}
-                aria-pressed={isSelected}
-                style={{
-                    transition: 'all 75ms ease',
-                }}
-                _hover={{
-                    backgroundColor:
-                        tokens.leftPanel.item.backgroundColor.hover,
-                    outline: isSelected
-                        ? tokens.leftPanel.item.border.active
-                        : tokens.leftPanel.item.border.hover,
-                }}
-            >
-                <span aria-hidden="true">{tenant.icon}</span>
-            </PrimitiveButton>
+            {trigger}
         </Tooltip>
     )
 }