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

package/lib/components/SelectV2/useSelectV2MenuBehavior.ts

@@ -0,0 +1,135 @@
+import { useEffect, useState, type RefObject } from 'react'
+
+export type UseSelectV2MenuBehaviorParams = {
+    open: boolean
+    enableSearch?: boolean
+    searchText: string
+    searchInputRef: RefObject<HTMLInputElement | null>
+    searchContainerRef?: RefObject<HTMLDivElement | null>
+    shouldMeasureSearchHeight?: boolean
+    focusSearchOnOpen?: boolean
+    focusSearchDelayMs?: number
+    refocusSearchOnTextChange?: boolean
+    menuContainerSelector?: string
+    enableVirtualization?: boolean
+    onVirtualizedSearchChange?: () => void
+    virtualScrollRef?: RefObject<HTMLDivElement | null>
+    onEndReached?: () => void
+    hasMore?: boolean
+    endReachedThreshold?: number
+}
+
+type UseSelectV2MenuBehaviorResult = {
+    searchHeight: number
+}
+
+const DEFAULT_MENU_SELECTOR = '[data-dropdown="dropdown"]'
+const DEFAULT_END_REACHED_THRESHOLD = 100
+
+export function useSelectV2MenuBehavior({
+    open,
+    enableSearch,
+    searchText,
+    searchInputRef,
+    searchContainerRef,
+    shouldMeasureSearchHeight = false,
+    focusSearchOnOpen = true,
+    focusSearchDelayMs = 0,
+    refocusSearchOnTextChange = false,
+    menuContainerSelector = DEFAULT_MENU_SELECTOR,
+    enableVirtualization = false,
+    onVirtualizedSearchChange,
+    virtualScrollRef,
+    onEndReached,
+    hasMore,
+    endReachedThreshold = DEFAULT_END_REACHED_THRESHOLD,
+}: UseSelectV2MenuBehaviorParams): UseSelectV2MenuBehaviorResult {
+    const [searchHeight, setSearchHeight] = useState(0)
+
+    useEffect(() => {
+        if (!shouldMeasureSearchHeight || !searchContainerRef?.current) return
+        const measure = () => {
+            setSearchHeight(searchContainerRef.current?.offsetHeight ?? 0)
+        }
+        measure()
+        const observer = new ResizeObserver(measure)
+        observer.observe(searchContainerRef.current)
+        return () => observer.disconnect()
+    }, [shouldMeasureSearchHeight, open, enableSearch, searchContainerRef])
+
+    useEffect(() => {
+        if (!open || !enableVirtualization || !onVirtualizedSearchChange) return
+        onVirtualizedSearchChange()
+    }, [searchText, open, enableVirtualization, onVirtualizedSearchChange])
+
+    useEffect(() => {
+        if (!focusSearchOnOpen || !open || !enableSearch) return
+        if (focusSearchDelayMs > 0) {
+            const timeoutId = setTimeout(() => {
+                searchInputRef.current?.focus()
+            }, focusSearchDelayMs)
+            return () => clearTimeout(timeoutId)
+        }
+        const frameId = requestAnimationFrame(() => {
+            searchInputRef.current?.focus()
+        })
+        return () => cancelAnimationFrame(frameId)
+    }, [
+        open,
+        enableSearch,
+        focusSearchOnOpen,
+        focusSearchDelayMs,
+        searchInputRef,
+    ])
+
+    useEffect(() => {
+        if (!refocusSearchOnTextChange || !open || !enableSearch) return
+        if (!searchInputRef.current) return
+        const menuElement = searchInputRef.current.closest(
+            menuContainerSelector
+        )
+        const activeElement = document.activeElement
+        if (
+            menuElement &&
+            activeElement &&
+            menuElement.contains(activeElement) &&
+            activeElement !== searchInputRef.current
+        ) {
+            const frameId = requestAnimationFrame(() => {
+                searchInputRef.current?.focus()
+            })
+            return () => cancelAnimationFrame(frameId)
+        }
+    }, [
+        searchText,
+        open,
+        enableSearch,
+        refocusSearchOnTextChange,
+        menuContainerSelector,
+        searchInputRef,
+    ])
+
+    useEffect(() => {
+        if (!enableVirtualization || !onEndReached || !hasMore) return
+        if (!virtualScrollRef?.current) return
+
+        const scrollElement = virtualScrollRef.current
+        const handleScroll = () => {
+            const { scrollHeight, scrollTop, clientHeight } = scrollElement
+            if (scrollHeight - scrollTop - clientHeight < endReachedThreshold) {
+                onEndReached()
+            }
+        }
+
+        scrollElement.addEventListener('scroll', handleScroll)
+        return () => scrollElement.removeEventListener('scroll', handleScroll)
+    }, [
+        enableVirtualization,
+        virtualScrollRef,
+        onEndReached,
+        hasMore,
+        endReachedThreshold,
+    ])
+
+    return { searchHeight }
+}

package/lib/components/SelectorV2/CheckboxV2/CheckboxV2.tsx

@@ -0,0 +1,282 @@
+import { forwardRef, useId } from 'react'
+import { Check, Minus } from 'lucide-react'
+import {
+    CheckboxV2ContentProps,
+    CheckboxV2Props,
+    CheckboxV2RootProps,
+} from './checkboxV2.types'
+import { SelectorV2Size } from '../../SelectorV2/selectorV2.types'
+import Block from '../../Primitives/Block/Block'
+import { StyledCheckboxRoot, StyledCheckboxIndicator } from './StyledCheckboxV2'
+import { getErrorShakeStyle } from '../../common/error.animations'
+import { useErrorShake } from '../../common/useErrorShake'
+import {
+    getSubtextId,
+    mergeAriaDescribedBy,
+    getCheckboxIconColor,
+    handleCheckboxKeyDown,
+    getCheckboxState,
+} from './utils'
+import { useResponsiveTokens } from '../../../hooks/useResponsiveTokens'
+import type { CheckboxV2TokensType } from './checkboxV2.tokens'
+import SelectorsLabel from '../../SelectorsContent/SelectorsLabel'
+import {
+    SelectorsLabelTokensType,
+    SelectorsSubLabelTokensType,
+} from '../../SelectorsContent/SelectorsContent.types'
+import SelectorsSubLabel from '../../SelectorsContent/SelectorsSubLabel'
+import { addAccessibleAriaAttributes } from '../../../utils/accessibility/icon-helpers'
+import { filterBlockedProps } from '../../../utils/prop-helpers'
+
+const CheckboxV2 = forwardRef<HTMLButtonElement, CheckboxV2Props>(
+    (
+        {
+            label,
+            id,
+            name,
+            checked,
+            onCheckedChange,
+            disabled = false,
+            required = false,
+            error = false,
+            size = SelectorV2Size.MD,
+            subLabel,
+            slot,
+            maxLength,
+            ...rest
+        },
+        ref
+    ) => {
+        const generatedId = useId()
+        const uniqueId = id || generatedId
+        const shouldShake = useErrorShake(error)
+        const subLabelId = getSubtextId(uniqueId, !!subLabel)
+        const labelMaxLength = maxLength?.label
+        const { 'aria-describedby': customAriaDescribedBy, ...restProps } =
+            rest as { 'aria-describedby'?: string; [key: string]: unknown }
+
+        const filteredRest = filterBlockedProps(restProps)
+        const ariaAttributes = {
+            'aria-required': required ? true : undefined,
+            'aria-invalid': error ? true : undefined,
+            'aria-describedby': mergeAriaDescribedBy(
+                subLabelId,
+                customAriaDescribedBy
+            ),
+            'aria-disabled': disabled ? true : undefined,
+        }
+
+        const tokens = useResponsiveTokens<CheckboxV2TokensType>('CHECKBOXV2')
+
+        return (
+            <Block
+                display="flex"
+                alignItems="flex-start"
+                gap={tokens.gap}
+                data-checkbox={label ?? 'checkbox'}
+            >
+                <CheckboxV2Root
+                    uniqueId={uniqueId}
+                    tokens={tokens}
+                    name={name || 'checkbox'}
+                    ref={ref as React.RefObject<HTMLButtonElement>}
+                    checked={checked || false}
+                    onCheckedChange={
+                        onCheckedChange as (
+                            checked: boolean | 'indeterminate'
+                        ) => void
+                    }
+                    disabled={disabled}
+                    required={required}
+                    size={size}
+                    error={error}
+                    shouldShake={shouldShake}
+                    ariaAttributes={
+                        ariaAttributes as {
+                            'aria-required': boolean
+                            'aria-invalid': boolean
+                            'aria-describedby': string
+                        }
+                    }
+                    restProps={filteredRest}
+                />
+                <CheckboxV2Content
+                    uniqueId={uniqueId}
+                    disabled={disabled}
+                    error={error}
+                    required={required}
+                    size={size}
+                    label={label}
+                    subLabel={subLabel}
+                    slot={slot}
+                    tokens={tokens}
+                    labelMaxLength={labelMaxLength}
+                    subLabelMaxLength={maxLength?.subLabel}
+                    subLabelId={subLabelId}
+                />
+            </Block>
+        )
+    }
+)
+
+CheckboxV2.displayName = 'CheckboxV2'
+
+export default CheckboxV2
+
+const CheckboxV2Root = ({
+    tokens,
+    uniqueId,
+    name,
+    ref,
+    checked,
+    onCheckedChange,
+    disabled,
+    required,
+    size,
+    error,
+    shouldShake,
+    ariaAttributes,
+    restProps,
+}: CheckboxV2RootProps) => {
+    return (
+        <StyledCheckboxRoot
+            role="checkbox"
+            aria-labelledby={`${uniqueId}-label`}
+            id={uniqueId}
+            name={name}
+            ref={ref}
+            checked={checked || false}
+            onCheckedChange={onCheckedChange}
+            onKeyDown={(e: React.KeyboardEvent<HTMLButtonElement>) =>
+                handleCheckboxKeyDown(
+                    e,
+                    checked,
+                    Boolean(disabled),
+                    onCheckedChange as
+                        | undefined
+                        | ((checked: boolean | 'indeterminate') => void)
+                )
+            }
+            disabled={disabled}
+            required={required}
+            size={size}
+            $isDisabled={disabled}
+            $checked={checked || false}
+            $error={error}
+            style={getErrorShakeStyle(shouldShake)}
+            {...ariaAttributes}
+            {...restProps}
+            data-element="checkbox"
+            data-state={getCheckboxState(checked)}
+        >
+            <StyledCheckboxIndicator
+                forceMount={true}
+                size={size}
+                aria-hidden="true"
+                data-state={getCheckboxState(checked)}
+            >
+                {checked ? (
+                    <Block
+                        as="span"
+                        display="flex"
+                        alignItems="center"
+                        justifyContent="center"
+                        width="100%"
+                        height="100%"
+                    >
+                        {checked === 'indeterminate' ? (
+                            <Minus
+                                size={tokens.checkbox.icon.width[size]}
+                                color={getCheckboxIconColor(
+                                    tokens,
+                                    checked,
+                                    disabled
+                                )}
+                                strokeWidth={
+                                    tokens.checkbox.icon.strokeWidth[size]
+                                }
+                                aria-hidden="true"
+                                focusable={false}
+                            />
+                        ) : (
+                            <Check
+                                size={tokens.checkbox.icon.width[size]}
+                                color={getCheckboxIconColor(
+                                    tokens,
+                                    checked,
+                                    disabled
+                                )}
+                                strokeWidth={
+                                    tokens.checkbox.icon.strokeWidth[size]
+                                }
+                                aria-hidden="true"
+                                focusable={false}
+                            />
+                        )}
+                    </Block>
+                ) : null}
+            </StyledCheckboxIndicator>
+        </StyledCheckboxRoot>
+    )
+}
+
+const CheckboxV2Content = ({
+    uniqueId,
+    disabled,
+    error,
+    required,
+    size,
+    label,
+    subLabel,
+    slot,
+    tokens,
+    labelMaxLength,
+    subLabelMaxLength,
+    subLabelId,
+}: CheckboxV2ContentProps) => {
+    const labelId = `${uniqueId}-label`
+    return (
+        <Block display="flex" flexDirection="column" gap={tokens.content.gap}>
+            <Block
+                display="flex"
+                alignItems="center"
+                gap={tokens.content.label.gap}
+            >
+                <SelectorsLabel
+                    id={labelId}
+                    uniqueId={uniqueId}
+                    disabled={disabled}
+                    error={error}
+                    required={required}
+                    size={size}
+                    label={label ?? ''}
+                    tokens={tokens as unknown as SelectorsLabelTokensType}
+                    maxLength={labelMaxLength}
+                    elementType="checkbox-label"
+                />
+                {slot && (
+                    <Block
+                        data-element="slot-icon"
+                        contentCentered
+                        maxHeight={
+                            slot?.maxHeight ||
+                            tokens.content.label.slot.maxHeight[size]
+                        }
+                    >
+                        {addAccessibleAriaAttributes(slot.slot)}
+                    </Block>
+                )}
+            </Block>
+            <SelectorsSubLabel
+                id={subLabelId}
+                subLabel={subLabel ?? ''}
+                size={size}
+                disabled={disabled}
+                error={error}
+                tokens={tokens as unknown as SelectorsSubLabelTokensType}
+                maxLength={subLabelMaxLength}
+                elementType="checkbox-description"
+            />
+        </Block>
+    )
+}

package/lib/components/SelectorV2/CheckboxV2/StyledCheckboxV2.tsx

@@ -0,0 +1,100 @@
+import styled, { css } from 'styled-components'
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
+import { CheckboxV2CheckedState } from './checkboxV2.types'
+import {
+    SelectorV2Size,
+    SelectorV2InteractionState,
+} from '../../SelectorV2/selectorV2.types'
+import type { CheckboxV2TokensType } from './checkboxV2.tokens'
+import { useResponsiveTokens } from '../../../hooks/useResponsiveTokens'
+import {
+    checkboxRootAnimations,
+    checkboxIndicatorAnimations,
+} from './checkboxV2.animations'
+
+const getInteractionState = (
+    isDisabled: boolean,
+    error?: boolean
+): Exclude<SelectorV2InteractionState, SelectorV2InteractionState.HOVER> => {
+    if (isDisabled) return SelectorV2InteractionState.DISABLED
+    if (error) return SelectorV2InteractionState.ERROR
+    return SelectorV2InteractionState.DEFAULT
+}
+
+export const StyledCheckboxRoot = styled(CheckboxPrimitive.Root)<{
+    size: SelectorV2Size
+    $isDisabled: boolean
+    $checked: boolean | 'indeterminate'
+    $error?: boolean
+}>`
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+
+    ${({ size, $isDisabled, $checked, $error }) => {
+        const tokens = useResponsiveTokens<CheckboxV2TokensType>('CHECKBOXV2')
+        const currentCheckedState: CheckboxV2CheckedState =
+            $checked === 'indeterminate'
+                ? CheckboxV2CheckedState.INDETERMINATE
+                : $checked
+                  ? CheckboxV2CheckedState.CHECKED
+                  : CheckboxV2CheckedState.UNCHECKED
+
+        const currentInteractionState = getInteractionState($isDisabled, $error)
+
+        return css`
+            ${checkboxRootAnimations}
+
+            border-radius: ${tokens.checkbox.borderRadius[size]};
+            background-color: ${tokens.checkbox.backgroundColor[
+                currentCheckedState
+            ]?.[currentInteractionState]};
+            border-style: solid;
+            border: ${tokens.checkbox.border[currentCheckedState]?.[
+                currentInteractionState
+            ]};
+            width: ${tokens.checkbox.width[size]};
+            height: ${tokens.checkbox.height[size]};
+            margin: 0;
+            padding: 0;
+            flex-shrink: 0;
+
+            &:focus-visible {
+                outline: ${tokens.checkbox.outline};
+                outline-offset: ${tokens.checkbox.outlineOffset};
+                box-shadow: ${tokens.checkbox.boxShadow};
+            }
+
+            &:not([disabled]):hover {
+                background-color: ${tokens.checkbox.backgroundColor[
+                    currentCheckedState
+                ]?.hover};
+                border: ${tokens.checkbox.border[currentCheckedState]?.hover};
+            }
+
+            ${$isDisabled &&
+            css`
+                opacity: ${tokens.checkbox.opacity};
+                cursor: not-allowed;
+            `}
+
+            ${!$isDisabled &&
+            css`
+                cursor: pointer;
+            `}
+        `
+    }}
+`
+
+export const StyledCheckboxIndicator = styled(CheckboxPrimitive.Indicator)<{
+    size: SelectorV2Size
+}>`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+
+    ${checkboxIndicatorAnimations}
+`

package/lib/components/SelectorV2/CheckboxV2/checkboxV2.animations.ts

@@ -0,0 +1,85 @@
+import { css } from 'styled-components'
+import { errorShakeAnimation } from '../../common/error.animations'
+
+const easing = 'cubic-bezier(0.4, 0, 0.2, 1)'
+
+export const checkboxRootAnimations = css`
+    ${errorShakeAnimation}
+
+    will-change: background-color, border-color, transform;
+    transition:
+        background-color 250ms ${easing},
+        border-color 250ms ${easing},
+        transform 200ms ${easing};
+    backface-visibility: hidden;
+
+    /* Subtle scale on hover */
+    &:not([disabled]):hover {
+        transform: scale(1.05);
+    }
+
+    /* Disabled state - no transform */
+    &[disabled] {
+        transform: scale(1);
+    }
+
+    /* Focus ring animation */
+    &:focus-visible {
+        animation: checkbox-focus-ring 300ms ${easing};
+    }
+
+    @keyframes checkbox-focus-ring {
+        0% {
+            outline-offset: 2px;
+            outline-width: 2px;
+        }
+        50% {
+            outline-offset: 3px;
+            outline-width: 3px;
+        }
+        100% {
+            outline-offset: 2px;
+            outline-width: 2px;
+        }
+    }
+`
+
+export const checkboxIndicatorAnimations = css`
+    will-change: transform, opacity;
+    transform-origin: center;
+    backface-visibility: hidden;
+
+    &[data-state='checked'],
+    &[data-state='indeterminate'] {
+        animation: checkbox-scale-in 250ms ${easing};
+    }
+
+    &[data-state='unchecked'] {
+        animation: checkbox-scale-out 200ms ${easing};
+    }
+
+    @keyframes checkbox-scale-in {
+        from {
+            transform: scale(0.7);
+            opacity: 0;
+        }
+        50% {
+            transform: scale(1.1);
+        }
+        to {
+            transform: scale(1);
+            opacity: 1;
+        }
+    }
+
+    @keyframes checkbox-scale-out {
+        from {
+            transform: scale(1);
+            opacity: 1;
+        }
+        to {
+            transform: scale(0.7);
+            opacity: 0;
+        }
+    }
+`