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

package/lib/global-utils/GlobalUtils.ts

@@ -0,0 +1,130 @@
+import React, { type ReactNode, useEffect } from 'react'
+
+export const toPixels = (value: string | number | undefined): number => {
+    if (typeof value === 'number') {
+        return value
+    }
+
+    if (typeof value === 'string') {
+        // Remove 'px' and convert to number
+        const numericValue = parseFloat(value.replace('px', ''))
+        return isNaN(numericValue) ? 0 : numericValue
+    }
+
+    return 0
+}
+
+export const capitalizeFirstLetter = (string: string): string => {
+    return string.charAt(0).toUpperCase() + string.slice(1).toLowerCase()
+}
+
+export const getTruncatedText = (text: string, limit?: number) => {
+    const shouldTruncate =
+        typeof limit === 'number' && limit > 0 && text.length > limit
+
+    if (!shouldTruncate) {
+        return {
+            truncatedValue: text,
+            fullValue: text,
+            isTruncated: false,
+        }
+    }
+
+    return {
+        truncatedValue: `${text.slice(0, limit)}...`,
+        fullValue: text,
+        isTruncated: true,
+    }
+}
+
+export const formatTextWithLineBreaks = (
+    content: ReactNode | string
+): ReactNode => {
+    if (typeof content === 'string' && content.includes('\n')) {
+        return content
+            .split('\n')
+            .map((line, index, array) =>
+                React.createElement(
+                    'span',
+                    { key: index },
+                    line,
+                    index < array.length - 1 && React.createElement('br')
+                )
+            )
+    }
+    return content
+}
+
+/**
+ * Composes multiple refs (forwarded ref + trigger's ref) so both receive the same DOM instance.
+ * Use when cloning an element and passing a ref so the child's existing ref is not lost.
+ */
+export function composeRefs<T>(
+    ...refs: (React.Ref<T> | null | undefined)[]
+): React.RefCallback<T> {
+    return (instance: T | null) => {
+        refs.forEach((ref) => {
+            if (ref == null) return
+            if (typeof ref === 'function') {
+                ref(instance)
+            } else {
+                ;(ref as React.MutableRefObject<T | null>).current = instance
+            }
+        })
+    }
+}
+
+export const addPxToValue = (value?: number | string): string => {
+    if (typeof value === 'number') {
+        return `${value}px`
+    }
+
+    if (typeof value === 'string') {
+        return value
+    }
+
+    return ''
+}
+
+export const flattenChildren = (
+    children: React.ReactNode
+): React.ReactElement<unknown>[] => {
+    return React.Children.toArray(children).flatMap((child) => {
+        if (React.isValidElement(child) && child.type === React.Fragment) {
+            const fragmentProps = child.props as { children?: React.ReactNode }
+            if (fragmentProps.children != null) {
+                return flattenChildren(fragmentProps.children)
+            }
+        }
+        return [child as React.ReactElement<unknown>]
+    })
+}
+
+export const useAutofillDetection = (
+    inputRef: React.RefObject<HTMLInputElement | null>,
+    setIsAutofilled: (value: boolean) => void
+) => {
+    useEffect(() => {
+        const input = inputRef.current
+        if (!input) return
+
+        if (input.value && input.value.length > 0) {
+            setIsAutofilled(true)
+        }
+
+        const handleAnimationStart = (e: AnimationEvent) => {
+            if (e.animationName === 'blend-autofill-start') {
+                setIsAutofilled(true)
+            }
+            if (e.animationName === 'blend-autofill-cancel') {
+                setIsAutofilled(false)
+            }
+        }
+
+        input.addEventListener('animationstart', handleAnimationStart)
+
+        return () => {
+            input.removeEventListener('animationstart', handleAnimationStart)
+        }
+    }, [inputRef, setIsAutofilled])
+}

package/lib/hooks/index.ts

@@ -0,0 +1,8 @@
+export { default as useClickOutside } from './useClickOutside'
+export { default as useScrollLock } from './useScrollLock'
+export { default as usePreventParentScroll } from './usePreventParentScroll'
+export { default as useDropdownInteractionLock } from './useDropdownInteractionLock'
+export { default as useTruncationDetection } from './useTruncationDetection'
+export type { UseTruncationDetectionOptions } from './useTruncationDetection'
+export { useShadowRoot } from '../context/ShadowAware'
+export { useSectionScroll } from './useSectionScroll'

package/lib/hooks/useBreakPoints.ts

@@ -0,0 +1,48 @@
+import { useState, useEffect } from 'react'
+import { BREAKPOINTS } from '../breakpoints/breakPoints'
+
+export function useBreakpoints(breakpoints = BREAKPOINTS) {
+    const getLabel = (width: number) => {
+        if (width >= breakpoints.lg) return 'lg'
+        if (width >= breakpoints.sm) return 'sm'
+        return 'lg'
+    }
+
+    const getRootWindow = () => {
+        if (typeof window === 'undefined') return null
+
+        try {
+            return window.top && window.top !== window ? window.top : window
+        } catch {
+            return window
+        }
+    }
+
+    const getViewportWidth = () => {
+        const root = getRootWindow()
+        if (!root) return breakpoints.lg
+        return root.innerWidth
+    }
+
+    const [innerWidth, setInnerWidth] = useState(() => getViewportWidth())
+    const [breakPointLabel, setBreakPointLabel] = useState(() =>
+        getLabel(getViewportWidth())
+    )
+
+    useEffect(() => {
+        const root = getRootWindow()
+        if (!root) return
+
+        const handleResize = () => {
+            const newWidth = root.innerWidth
+            setInnerWidth(newWidth)
+            setBreakPointLabel(getLabel(newWidth))
+        }
+
+        root.addEventListener('resize', handleResize)
+
+        return () => root.removeEventListener('resize', handleResize)
+    }, [breakpoints])
+
+    return { innerWidth, breakPointLabel }
+}

package/lib/hooks/useClickOutside.ts

@@ -0,0 +1,30 @@
+import { useEffect, RefObject } from 'react'
+
+export function useClickOutside(
+    refs: Array<RefObject<HTMLElement | null>> | RefObject<HTMLElement | null>,
+    callback: () => void
+): void {
+    useEffect(() => {
+        const handleClickOutside = (event: MouseEvent) => {
+            const refsArray = Array.isArray(refs) ? refs : [refs]
+
+            const isOutside = refsArray.every((ref) => {
+                return (
+                    !ref.current || !ref.current.contains(event.target as Node)
+                )
+            })
+
+            if (isOutside) {
+                callback()
+            }
+        }
+
+        document.addEventListener('mousedown', handleClickOutside)
+
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside)
+        }
+    }, [refs, callback])
+}
+
+export default useClickOutside

package/lib/hooks/useDebounce.ts

@@ -0,0 +1,19 @@
+import { useRef, useCallback } from 'react'
+export const useDebounce = <Args extends unknown[]>(
+    fn: (...args: Args) => void,
+    delay: number
+): ((...args: Args) => void) => {
+    const timeoutRef = useRef<NodeJS.Timeout | null>(null)
+
+    const debouncedFn = useCallback(
+        (...args: Args) => {
+            if (timeoutRef.current) clearTimeout(timeoutRef.current)
+            timeoutRef.current = setTimeout(() => {
+                fn(...args)
+            }, delay)
+        },
+        [fn, delay]
+    )
+
+    return debouncedFn
+}

package/lib/hooks/useDropdownInteractionLock.ts

@@ -0,0 +1,226 @@
+import { useEffect, useRef } from 'react'
+import { useShadowRoot } from '../context/ShadowAware'
+
+let lockCount = 0
+let scrollX = 0
+let scrollY = 0
+
+const CLASS_NAME = 'dropdown-interaction-locked'
+const STYLE_ID = 'dropdown-interaction-lock-style'
+
+type DropdownSelectors = {
+    content?: string[]
+    trigger?: string[]
+    disablePointerEvents?: string[]
+}
+
+type DropdownLockHandlers = {
+    wheel: (e: WheelEvent) => void
+    touchmove: (e: TouchEvent) => void
+    keydown: (e: KeyboardEvent) => void
+}
+
+type HTMLElementWithHandlers = HTMLElement & {
+    __dropdownLockHandlers?: DropdownLockHandlers
+}
+
+const DEFAULT_SELECTORS: DropdownSelectors = {
+    content: [
+        '[data-radix-popper-content-wrapper]',
+        '[data-radix-dropdown-menu-content]',
+        '[role="menu"]',
+        '[role="listbox"]',
+        '[data-dropdown="dropdown"]',
+    ],
+    trigger: [
+        '[data-radix-dropdown-menu-trigger]',
+        'button[aria-expanded]',
+        'button[aria-haspopup]',
+        '[data-element="single-select-button"]',
+        '[data-element="multi-select-button"]',
+    ],
+    disablePointerEvents: ['[data-sidebar="sidebar"]', '[data-sidebar-item]'],
+}
+
+function isInsideDropdown(
+    target: HTMLElement | null,
+    contentSelectors: string[]
+): boolean {
+    if (!target) return false
+
+    const selectorString = contentSelectors.join(', ')
+    return Boolean(target.closest(selectorString))
+}
+
+function isTrigger(
+    target: HTMLElement | null,
+    triggerSelectors: string[]
+): boolean {
+    if (!target) return false
+
+    return triggerSelectors.some((selector) => target.matches(selector))
+}
+
+function preventScroll(e: WheelEvent | TouchEvent, contentSelectors: string[]) {
+    const target = e.target as HTMLElement | null
+
+    if (isInsideDropdown(target, contentSelectors)) return
+
+    e.preventDefault()
+}
+
+function preventKeyboardInteraction(
+    e: KeyboardEvent,
+    contentSelectors: string[],
+    triggerSelectors: string[]
+) {
+    const target = e.target as HTMLElement | null
+
+    if (isInsideDropdown(target, contentSelectors)) return
+
+    if (target?.closest('input, textarea')) return
+
+    if (isTrigger(target, triggerSelectors)) return
+
+    e.preventDefault()
+    e.stopPropagation()
+}
+
+function injectStyle(selectors: DropdownSelectors, target: HTMLElement | null) {
+    if (typeof document === 'undefined') return
+
+    const disableSelectors =
+        selectors.disablePointerEvents ||
+        DEFAULT_SELECTORS.disablePointerEvents ||
+        []
+
+    if (disableSelectors.length === 0) return
+
+    // Inject to target element's parent (shadow root) or document.head
+    const targetContainer = target?.parentNode || document.head
+
+    // Check if style already exists in this specific container
+    // This makes injection container-specific for multi-MFE support
+    const existingStyle = targetContainer.querySelector(`#${STYLE_ID}`)
+    if (existingStyle) return
+
+    // If we have a target element (inside shadow DOM), styles go there
+    // Otherwise use body class for scoping in document.head
+    const disableSelectorString = target
+        ? disableSelectors.join(',\n      ')
+        : disableSelectors
+              .map((sel) => `body.${CLASS_NAME} ${sel}`)
+              .join(',\n      ')
+
+    const style = document.createElement('style')
+    style.id = STYLE_ID
+    style.textContent = `
+      /* Disable pointer events only on specific elements when dropdown is open */
+      ${disableSelectorString} {
+        pointer-events: none !important;
+      }
+    `
+
+    targetContainer.appendChild(style)
+}
+
+function applyLock(selectors: DropdownSelectors, target: HTMLElement | null) {
+    injectStyle(selectors, target)
+
+    const contentSelectors =
+        selectors.content || DEFAULT_SELECTORS.content || []
+    const triggerSelectors =
+        selectors.trigger || DEFAULT_SELECTORS.trigger || []
+
+    scrollX = window.scrollX
+    scrollY = window.scrollY
+
+    document.body.classList.add(CLASS_NAME)
+
+    document.documentElement.style.overflow = 'hidden'
+    document.documentElement.style.overscrollBehavior = 'none'
+    document.documentElement.style.touchAction = 'none'
+
+    document.body.style.position = 'fixed'
+    document.body.style.top = `-${scrollY}px`
+    document.body.style.left = `-${scrollX}px`
+    document.body.style.width = '100%'
+    document.body.style.height = '100%'
+    document.body.style.overflow = 'hidden'
+
+    const handleWheel = (e: WheelEvent) => preventScroll(e, contentSelectors)
+    const handleTouchMove = (e: TouchEvent) =>
+        preventScroll(e, contentSelectors)
+    const handleKeyDown = (e: KeyboardEvent) =>
+        preventKeyboardInteraction(e, contentSelectors, triggerSelectors)
+
+    document.addEventListener('wheel', handleWheel, { passive: false })
+    document.addEventListener('touchmove', handleTouchMove, { passive: false })
+    document.addEventListener('keydown', handleKeyDown, { passive: false })
+    ;(document.body as HTMLElementWithHandlers).__dropdownLockHandlers = {
+        wheel: handleWheel,
+        touchmove: handleTouchMove,
+        keydown: handleKeyDown,
+    }
+}
+
+function removeLock() {
+    document.body.classList.remove(CLASS_NAME)
+
+    document.documentElement.style.overflow = ''
+    document.documentElement.style.overscrollBehavior = ''
+    document.documentElement.style.touchAction = ''
+
+    document.body.style.position = ''
+    document.body.style.top = ''
+    document.body.style.left = ''
+    document.body.style.width = ''
+    document.body.style.height = ''
+    document.body.style.overflow = ''
+
+    window.scrollTo(scrollX, scrollY)
+
+    const bodyWithHandlers = document.body as HTMLElementWithHandlers
+    const handlers = bodyWithHandlers.__dropdownLockHandlers
+    if (handlers) {
+        document.removeEventListener('wheel', handlers.wheel)
+        document.removeEventListener('touchmove', handlers.touchmove)
+        document.removeEventListener('keydown', handlers.keydown)
+        delete bodyWithHandlers.__dropdownLockHandlers
+    }
+}
+
+export default function useDropdownInteractionLock(
+    isOpen?: boolean,
+    selectors?: DropdownSelectors
+) {
+    const selectorsRef = useRef(selectors)
+    const { target } = useShadowRoot()
+
+    useEffect(() => {
+        selectorsRef.current = selectors
+    }, [selectors])
+
+    useEffect(() => {
+        if (typeof window === 'undefined') return
+
+        if (isOpen) {
+            lockCount++
+
+            if (lockCount === 1) {
+                applyLock(selectorsRef.current || {}, target)
+            }
+        }
+
+        return () => {
+            if (!isOpen) return
+
+            lockCount--
+
+            if (lockCount <= 0) {
+                lockCount = 0
+                removeLock()
+            }
+        }
+    }, [isOpen, target])
+}

package/lib/hooks/useInputSlotPadding.ts

@@ -0,0 +1,50 @@
+import { RefObject, useEffect, useState } from 'react'
+
+export type UseInputSlotPaddingParams = {
+    leftSlotRef: RefObject<HTMLDivElement | null>
+    rightSlotRef: RefObject<HTMLDivElement | null>
+    hasLeftSlot: boolean
+    hasRightSlot: boolean
+    paddingLeft: number
+    paddingRight: number
+    gap: number
+}
+
+export function useInputSlotPadding({
+    leftSlotRef,
+    rightSlotRef,
+    hasLeftSlot,
+    hasRightSlot,
+    paddingLeft,
+    paddingRight,
+    gap,
+}: UseInputSlotPaddingParams) {
+    const [leftSlotWidth, setLeftSlotWidth] = useState(0)
+    const [rightSlotWidth, setRightSlotWidth] = useState(0)
+
+    useEffect(() => {
+        if (leftSlotRef.current) {
+            setLeftSlotWidth(leftSlotRef.current.offsetWidth)
+        } else {
+            setLeftSlotWidth(0)
+        }
+        if (rightSlotRef.current) {
+            setRightSlotWidth(rightSlotRef.current.offsetWidth)
+        } else {
+            setRightSlotWidth(0)
+        }
+    }, [hasLeftSlot, hasRightSlot, leftSlotRef, rightSlotRef])
+
+    const calculatedLeftInputPadding = hasLeftSlot
+        ? paddingLeft + leftSlotWidth + gap
+        : paddingLeft
+
+    const calculatedRightInputPadding = hasRightSlot
+        ? paddingRight + rightSlotWidth + gap
+        : paddingRight
+
+    return {
+        calculatedLeftInputPadding,
+        calculatedRightInputPadding,
+    }
+}

package/lib/hooks/usePreventParentScroll.ts

@@ -0,0 +1,37 @@
+import { useEffect, RefObject } from 'react'
+
+const usePreventParentScroll = (
+    isOpen: boolean,
+    contentRef?: RefObject<HTMLElement | null>,
+    selectors: string[] = []
+): void => {
+    useEffect(() => {
+        if (!isOpen) return
+
+        const handleWheel = (e: WheelEvent) => {
+            const target = e.target as HTMLElement
+
+            const allSelectors = [...selectors]
+
+            const isInsideDropdown =
+                contentRef?.current?.contains(target) ||
+                allSelectors.some((selector) => target.closest(selector))
+            if (isInsideDropdown) {
+                e.stopPropagation()
+            }
+        }
+
+        document.addEventListener('wheel', handleWheel, {
+            passive: false,
+            capture: true,
+        })
+
+        return () => {
+            document.removeEventListener('wheel', handleWheel, {
+                capture: true,
+            })
+        }
+    }, [isOpen, contentRef, selectors])
+}
+
+export default usePreventParentScroll

package/lib/hooks/useResizeObserver.ts

@@ -0,0 +1,33 @@
+import { useEffect, useRef } from 'react'
+
+export function useResizeObserver<T extends HTMLElement = HTMLElement>(
+    targetRef: React.RefObject<T | null>,
+    callback: (rect: DOMRectReadOnly) => void
+) {
+    // Keep the latest callback in a ref so the observer is never disconnected
+    // and reconnected just because the callback function changed identity
+    // (e.g. when callers pass an inline/non-memoized function).
+    const callbackRef = useRef(callback)
+    callbackRef.current = callback
+
+    useEffect(() => {
+        const el = targetRef.current
+        if (!el) return
+
+        const observer = new ResizeObserver((entries) => {
+            for (const entry of entries) {
+                callbackRef.current(entry.contentRect)
+            }
+        })
+
+        observer.observe(el)
+
+        return () => observer.disconnect()
+        // Key the effect on the actual element rather than the ref object so
+        // that the observer is reattached whenever the target element is
+        // replaced (e.g. after a conditional unmount/remount).
+        // The callback is intentionally omitted from deps because it is kept
+        // current via callbackRef above.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [targetRef.current])
+}

package/lib/hooks/useResponsiveTokens.ts

@@ -0,0 +1,26 @@
+import { useContext } from 'react'
+import ThemeContext, { type ComponentTokenType } from '../context/ThemeContext'
+import { useBreakpoints } from './useBreakPoints'
+import { useComponentToken } from '../context/useComponentToken'
+import type { BreakpointType } from '../breakpoints/breakPoints'
+
+export const useResponsiveTokens = <T>(component: keyof ComponentTokenType) => {
+    const { breakpoints } = useContext(ThemeContext)
+    const { breakPointLabel } = useBreakpoints(breakpoints)
+
+    const componentTokens = useComponentToken(component) as Record<
+        keyof BreakpointType,
+        T
+    >
+
+    if (!componentTokens) {
+        throw new Error(
+            `Component tokens for '${component}' are not defined. Make sure the component is properly registered in the theme provider and context.`
+        )
+    }
+
+    const responsiveComponentTokens =
+        componentTokens[breakPointLabel as keyof BreakpointType]
+
+    return responsiveComponentTokens
+}

package/lib/hooks/useRipple.ts

@@ -0,0 +1,74 @@
+import { useCallback, useState, useRef, useEffect } from 'react'
+
+export type RippleElement = {
+    id: string
+    x: number
+    y: number
+    size: number
+}
+
+export const useRipple = () => {
+    const [ripples, setRipples] = useState<RippleElement[]>([])
+    const timeoutRefs = useRef<Map<string, NodeJS.Timeout>>(new Map())
+    const isMountedRef = useRef(true)
+
+    useEffect(() => {
+        isMountedRef.current = true
+        const timeouts = timeoutRefs.current
+        return () => {
+            isMountedRef.current = false
+            // Clear all pending timeouts on unmount
+            timeouts.forEach((timeout) => {
+                clearTimeout(timeout)
+            })
+            timeouts.clear()
+        }
+    }, [])
+
+    const createRipple = useCallback((event: React.MouseEvent<HTMLElement>) => {
+        const button = event.currentTarget
+        const rect = button.getBoundingClientRect()
+
+        const diameter = Math.max(button.clientWidth, button.clientHeight)
+        const radius = diameter / 2
+
+        const x = event.clientX - rect.left - radius
+        const y = event.clientY - rect.top - radius
+
+        const newRipple: RippleElement = {
+            id: `ripple-${Date.now()}-${Math.random()}`,
+            x,
+            y,
+            size: diameter,
+        }
+
+        setRipples((prev) => [...prev, newRipple])
+
+        const timeoutId = setTimeout(() => {
+            // Only update state if component is still mounted
+            if (isMountedRef.current) {
+                setRipples((prev) =>
+                    prev.filter((ripple) => ripple.id !== newRipple.id)
+                )
+            }
+            timeoutRefs.current.delete(newRipple.id)
+        }, 600)
+
+        timeoutRefs.current.set(newRipple.id, timeoutId)
+    }, [])
+
+    const clearRipples = useCallback(() => {
+        // Clear all pending timeouts
+        timeoutRefs.current.forEach((timeout) => {
+            clearTimeout(timeout)
+        })
+        timeoutRefs.current.clear()
+        setRipples([])
+    }, [])
+
+    return {
+        ripples,
+        createRipple,
+        clearRipples,
+    }
+}