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

package/lib/components/InputsV2/TextAreaV2/TextAreaV2.tsx

@@ -0,0 +1,251 @@
+import Block from '../../Primitives/Block/Block'
+import PrimitiveTextarea from '../../Primitives/PrimitiveTextArea'
+import InputLabelsV2 from '../utils/InputLabels/InputLabelsV2'
+import InputFooterV2 from '../utils/InputFooter/InputFooterV2'
+import type { TextAreaV2Props } from './TextAreaV2.types'
+import type { TextAreaV2TokensType } from './TextAreaV2.tokens'
+import { useResponsiveTokens } from '../../../hooks/useResponsiveTokens'
+import { useState, useId, forwardRef, useMemo } from 'react'
+import { useBreakpoints } from '../../../hooks/useBreakPoints'
+import { BREAKPOINTS } from '../../../breakpoints/breakPoints'
+import { filterBlockedProps } from '../../../utils/prop-helpers'
+import FloatingLabelsV2 from '../utils/FloatingLabelsV2/FloatingLabelsV2'
+import { InputSizeV2, type AnyRef } from '../inputV2.types'
+import { FOCUS_RING_STYLES, TRANSITION } from '../TextInputV2/utils'
+import { generateAccessibilityIds, setExternalRef } from '../utils/utils'
+import { addPxToValue, toPixels } from '../../../global-utils/GlobalUtils'
+import {
+    getTextAreaAriaDescribedBy,
+    getTextAreaInputPadding,
+    getTextAreaInteractionKeys,
+    getTextAreaLabelState,
+    getTextAreaV2MinHeightFromRows,
+    omitTextAreaV2PrivateProps,
+} from './utils'
+
+const TextAreaV2 = forwardRef<HTMLTextAreaElement, TextAreaV2Props>(
+    (props, ref) => {
+        const {
+            value,
+            placeholder,
+            disabled,
+            autoFocus,
+            onChange,
+            onFocus,
+            onBlur,
+            rows = 3,
+            label,
+            sublabel,
+            hintText,
+            helpIconText,
+            required = false,
+            error = { show: false, message: '' },
+            resize = 'none',
+            name = 'text-area',
+            size = InputSizeV2.MD,
+            id: providedId,
+            ...rest
+        } = props
+
+        const { onKeyDown: restOnKeyDown, ...restWithoutKeyDown } = rest
+        const filteredRest = filterBlockedProps(
+            omitTextAreaV2PrivateProps(
+                restWithoutKeyDown as Record<string, unknown>
+            ) as typeof restWithoutKeyDown
+        )
+
+        const textAreaTokens =
+            useResponsiveTokens<TextAreaV2TokensType>('TEXT_AREA_V2')
+        const ic = textAreaTokens.inputContainer
+
+        const [isFocused, setIsFocused] = useState(false)
+        const { breakPointLabel } = useBreakpoints(BREAKPOINTS)
+        const isSmallScreen = breakPointLabel === 'sm'
+
+        const generatedId = useId()
+        const textareaId = providedId || generatedId
+        const { errorId, hintId } = generateAccessibilityIds(textareaId)
+
+        const ariaDescribedBy = useMemo(
+            () => getTextAreaAriaDescribedBy(hintText, error, hintId, errorId),
+            [hintText, error, hintId, errorId]
+        )
+
+        const labelState = useMemo(
+            () => getTextAreaLabelState(disabled, error.show, isFocused),
+            [disabled, error.show, isFocused]
+        )
+
+        const inputFocusedOrWithValue = isFocused || value.length > 0
+
+        const inputPadding = useMemo(
+            () =>
+                getTextAreaInputPadding({
+                    inputContainer: ic,
+                    size,
+                    isSmallScreen,
+                    inputFocusedOrWithValue,
+                }),
+            [ic, size, isSmallScreen, inputFocusedOrWithValue]
+        )
+
+        const {
+            borderDefault,
+            borderHover,
+            borderFocus,
+            bgDefault,
+            bgHover,
+            textColorKey,
+        } = useMemo(
+            () => getTextAreaInteractionKeys(error.show, disabled),
+            [error.show, disabled]
+        )
+
+        const textareaMinHeight = useMemo(
+            () =>
+                getTextAreaV2MinHeightFromRows(rows, ic.lineHeight[size], {
+                    paddingTop: inputPadding.paddingTop,
+                    paddingBottom: inputPadding.paddingBottom,
+                }),
+            [
+                rows,
+                ic.lineHeight,
+                size,
+                inputPadding.paddingTop,
+                inputPadding.paddingBottom,
+            ]
+        )
+
+        const setTextAreaRef = (node: HTMLTextAreaElement | null) => {
+            setExternalRef(ref as AnyRef<HTMLTextAreaElement>, node)
+        }
+
+        return (
+            <Block
+                data-textarea={label || 'textarea'}
+                data-status={disabled ? 'disabled' : 'enabled'}
+                display="flex"
+                flexDirection="column"
+                gap={textAreaTokens.gap}
+                width="100%"
+            >
+                {!isSmallScreen && (
+                    <InputLabelsV2
+                        tokens={textAreaTokens.topContainer}
+                        label={label}
+                        sublabel={sublabel}
+                        helpIconText={helpIconText}
+                        inputId={textareaId}
+                        name={name}
+                        required={required || false}
+                        size={InputSizeV2.SM}
+                        state={labelState}
+                    />
+                )}
+                <Block
+                    display="flex"
+                    flexDirection="column"
+                    position="relative"
+                >
+                    {label && isSmallScreen && (
+                        <FloatingLabelsV2
+                            label={label}
+                            required={required}
+                            name={name}
+                            inputId={textareaId}
+                            isInputFocusedOrWithValue={inputFocusedOrWithValue}
+                            topPadding={inputPadding.floatingLabelTopPadding}
+                            leftPadding={inputPadding.floatingLabelLeftPadding}
+                            tokens={{
+                                placeholder: ic.placeholder,
+                                required: textAreaTokens.topContainer.required,
+                            }}
+                            size={size}
+                            state={labelState}
+                            backgroundColor={ic.backgroundColor[bgDefault]}
+                        />
+                    )}
+                    <PrimitiveTextarea
+                        {...filteredRest}
+                        ref={setTextAreaRef}
+                        id={textareaId}
+                        name={name}
+                        width="100%"
+                        autoFocus={autoFocus}
+                        value={value}
+                        placeholder={isSmallScreen ? '' : placeholder}
+                        onChange={onChange}
+                        onFocus={(e) => {
+                            e.stopPropagation()
+                            setIsFocused(true)
+                            onFocus?.(e)
+                        }}
+                        onBlur={(e) => {
+                            e.stopPropagation()
+                            setIsFocused(false)
+                            onBlur?.(e)
+                        }}
+                        onKeyDown={(e) => {
+                            e.stopPropagation()
+                            restOnKeyDown?.(e)
+                        }}
+                        rows={rows}
+                        minHeight={textareaMinHeight}
+                        style={{
+                            lineHeight: addPxToValue(
+                                toPixels(ic.lineHeight[size])
+                            ),
+                        }}
+                        required={required}
+                        borderRadius={ic.borderRadius}
+                        resize={resize}
+                        paddingTop={inputPadding.paddingTop}
+                        paddingBottom={inputPadding.paddingBottom}
+                        paddingLeft={inputPadding.paddingLeft}
+                        paddingRight={inputPadding.paddingRight}
+                        border={ic.border[borderDefault]}
+                        fontSize={ic.fontSize}
+                        fontWeight={ic.fontWeight}
+                        backgroundColor={ic.backgroundColor[bgDefault]}
+                        transition={TRANSITION}
+                        placeholderStyles={{
+                            transition: ic.placeholder.transition,
+                            color: ic.placeholder.color[labelState],
+                            fontWeight: ic.placeholder.fontWeight[size],
+                        }}
+                        _hover={{
+                            border: ic.border[borderHover],
+                            backgroundColor: ic.backgroundColor[bgHover],
+                        }}
+                        color={ic.color[textColorKey]}
+                        _focus={{
+                            border: ic.border[borderFocus],
+                            boxShadow: FOCUS_RING_STYLES.boxShadow,
+                        }}
+                        disabled={disabled}
+                        _disabled={{
+                            backgroundColor: ic.backgroundColor.disabled,
+                            border: ic.border.disabled,
+                            cursor: 'not-allowed',
+                        }}
+                        aria-required={required ? 'true' : undefined}
+                        aria-invalid={error.show ? 'true' : 'false'}
+                        aria-describedby={ariaDescribedBy}
+                    />
+                </Block>
+                <InputFooterV2
+                    tokens={textAreaTokens.bottomContainer}
+                    error={error.show || false}
+                    errorMessage={error.message}
+                    hintText={hintText}
+                    errorId={errorId}
+                    hintId={hintId}
+                    size={InputSizeV2.SM}
+                />
+            </Block>
+        )
+    }
+)
+
+TextAreaV2.displayName = 'TextAreaV2'
+export default TextAreaV2

package/lib/components/InputsV2/TextAreaV2/TextAreaV2.types.ts

@@ -0,0 +1,26 @@
+import { InputSizeV2 } from '../inputV2.types'
+
+export type TextAreaV2Props = {
+    size?: InputSizeV2
+    value: string
+    placeholder: string
+    disabled?: boolean
+    autoFocus?: boolean
+    onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void
+    onFocus?: (e: React.FocusEvent<HTMLTextAreaElement>) => void
+    onBlur?: (e: React.FocusEvent<HTMLTextAreaElement>) => void
+    rows?: number
+    label?: string
+    sublabel?: string
+    hintText?: string
+    helpIconText?: string
+    required?: boolean
+    error?: {
+        show: boolean
+        message?: string
+    }
+    resize?: 'none' | 'both' | 'horizontal' | 'vertical' | 'block' | 'inline'
+} & Omit<
+    React.TextareaHTMLAttributes<HTMLTextAreaElement>,
+    'size' | 'style' | 'className' | 'onFocus' | 'onBlur' | 'cols'
+>

package/lib/components/InputsV2/TextAreaV2/index.tsx

@@ -0,0 +1,3 @@
+export { default as TextAreaV2 } from './TextAreaV2'
+export * from './TextAreaV2.types'
+export * from './TextAreaV2.tokens'

package/lib/components/InputsV2/TextAreaV2/utils.ts

@@ -0,0 +1,140 @@
+import { toPixels } from '../../../global-utils/GlobalUtils'
+import type { TextAreaV2TokensType } from './TextAreaV2.tokens'
+import { InputSizeV2, InputStateV2 } from '../inputV2.types'
+
+export function getTextAreaAriaDescribedBy(
+    hintText: string | undefined,
+    error: { show: boolean; message?: string },
+    hintId: string,
+    errorId: string
+): string | undefined {
+    const ids = [
+        hintText && !error.show ? hintId : null,
+        error.show && error.message ? errorId : null,
+    ].filter(Boolean) as string[]
+    return ids.length > 0 ? ids.join(' ') : undefined
+}
+
+export function getTextAreaLabelState(
+    disabled: boolean | undefined,
+    errorShow: boolean,
+    isFocused: boolean
+): InputStateV2 {
+    if (disabled) return InputStateV2.DISABLED
+    if (errorShow) return InputStateV2.ERROR
+    if (isFocused) return InputStateV2.FOCUS
+    return InputStateV2.DEFAULT
+}
+
+export type TextAreaInputPadding = {
+    paddingTop: number
+    paddingBottom: number
+    paddingLeft: number
+    paddingRight: number
+    /** Base top token — FloatingLabelsV2 anchor (not the scaled focused top). */
+    floatingLabelTopPadding: number
+    floatingLabelLeftPadding: number
+}
+
+/**
+ * Computes textarea padding from tokens. On small screens when the field has focus or
+ * value, top padding increases and bottom goes to 0 to make room for the floating label.
+ */
+export function getTextAreaInputPadding({
+    inputContainer,
+    size,
+    isSmallScreen,
+    inputFocusedOrWithValue,
+}: {
+    inputContainer: TextAreaV2TokensType['inputContainer']
+    size: InputSizeV2
+    isSmallScreen: boolean
+    inputFocusedOrWithValue: boolean
+}): TextAreaInputPadding {
+    const paddingTopBase = toPixels(inputContainer.padding.top[size])
+    const paddingBottomBase = toPixels(inputContainer.padding.bottom[size])
+    const paddingLeft = toPixels(inputContainer.padding.left[size])
+    const paddingRight = toPixels(inputContainer.padding.right[size])
+
+    const isFloating = isSmallScreen && inputFocusedOrWithValue
+    const paddingTop = isFloating
+        ? paddingTopBase + paddingTopBase
+        : paddingTopBase
+    const paddingBottom = isFloating ? 0 : paddingBottomBase
+
+    return {
+        paddingTop,
+        paddingBottom,
+        paddingLeft,
+        paddingRight,
+        floatingLabelTopPadding: paddingTopBase,
+        floatingLabelLeftPadding: paddingLeft,
+    }
+}
+
+/**
+ * Minimum textarea height so the visible area matches `rows` lines of text at the
+ * given line-height, including vertical padding (same numbers as {@link getTextAreaInputPadding}).
+ */
+export function getTextAreaV2MinHeightFromRows(
+    rows: number,
+    lineHeight: Parameters<typeof toPixels>[0],
+    padding: Pick<TextAreaInputPadding, 'paddingTop' | 'paddingBottom'>
+): number {
+    const lineHeightPx = toPixels(lineHeight)
+    const rowCount = Math.max(1, Math.floor(rows))
+    return padding.paddingTop + padding.paddingBottom + rowCount * lineHeightPx
+}
+
+export type TextAreaInteractionKeys = {
+    borderDefault: 'error' | 'default'
+    borderHover: 'error' | 'hover'
+    borderFocus: 'error' | 'focus'
+    bgDefault: 'error' | 'default'
+    bgHover: 'error' | 'hover'
+    textColorKey: 'disabled' | 'default'
+}
+
+export function getTextAreaInteractionKeys(
+    errorShow: boolean,
+    disabled: boolean | undefined
+): TextAreaInteractionKeys {
+    return {
+        borderDefault: errorShow ? 'error' : 'default',
+        borderHover: errorShow ? 'error' : 'hover',
+        borderFocus: errorShow ? 'error' : 'focus',
+        bgDefault: errorShow ? 'error' : 'default',
+        bgHover: errorShow ? 'error' : 'hover',
+        textColorKey: disabled ? 'disabled' : 'default',
+    }
+}
+
+/**
+ * Strips TextAreaV2-only props (and `cols`, which this component does not support) so they are
+ * never forwarded to a native {@link HTMLTextAreaElement}.
+ * Use after extracting top-level props, as a safety net for spreads / future API fields.
+ */
+export function omitTextAreaV2PrivateProps(
+    props: Record<string, unknown>
+): Record<string, unknown> {
+    const {
+        label: _label,
+        sublabel: _sublabel,
+        hintText: _hintText,
+        helpIconHintText: _helpIconHintText,
+        helpIconText: _helpIconText,
+        error: _error,
+        size: _size,
+        cols: _cols,
+        ...rest
+    } = props
+    void _label
+    void _sublabel
+    void _hintText
+    void _helpIconHintText
+    void _helpIconText
+    void _error
+    void _size
+    void _cols
+    return rest
+}