analytica-frontend-lib
Version:
Repositório público dos componentes utilizados nas plataformas da Analytica Ensino
1 lines • 5.13 kB
Source Map (JSON)
{"version":3,"sources":["../src/components/TruncatedText/TruncatedText.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ElementType, ReactNode } from 'react';\nimport { Tooltip } from '../Tooltip/Tooltip';\nimport { cn } from '../../utils/utils';\n\n/**\n * Text size variants — matches the `Text` component.\n */\nexport type TruncatedTextSize =\n | '2xs'\n | 'xs'\n | 'sm'\n | 'md'\n | 'lg'\n | 'xl'\n | '2xl'\n | '3xl'\n | '4xl'\n | '5xl'\n | '6xl';\n\n/**\n * Font weight variants — matches the `Text` component.\n */\nexport type TruncatedTextWeight =\n | 'hairline'\n | 'light'\n | 'normal'\n | 'medium'\n | 'semibold'\n | 'bold'\n | 'extrabold'\n | 'black';\n\n/**\n * Tooltip position relative to the truncated element.\n */\nexport type TruncatedTextTooltipPosition = 'top' | 'bottom' | 'left' | 'right';\n\nconst SIZE_CLASS_MAP: Record<TruncatedTextSize, string> = {\n '2xs': 'text-2xs',\n xs: 'text-xs',\n sm: 'text-sm',\n md: 'text-md',\n lg: 'text-lg',\n xl: 'text-xl',\n '2xl': 'text-2xl',\n '3xl': 'text-3xl',\n '4xl': 'text-4xl',\n '5xl': 'text-5xl',\n '6xl': 'text-6xl',\n};\n\nconst WEIGHT_CLASS_MAP: Record<TruncatedTextWeight, string> = {\n hairline: 'font-hairline',\n light: 'font-light',\n normal: 'font-normal',\n medium: 'font-medium',\n semibold: 'font-semibold',\n bold: 'font-bold',\n extrabold: 'font-extrabold',\n black: 'font-black',\n};\n\n/**\n * Base props for the TruncatedText component.\n */\ntype BaseProps = {\n /** Text content rendered with `truncate`. Tooltip falls back to this when it's a string. */\n children: ReactNode;\n /** Optional override for the tooltip content. */\n tooltipContent?: ReactNode;\n /** Tooltip position relative to the text (default: 'top'). */\n tooltipPosition?: TruncatedTextTooltipPosition;\n /** Text size variant (default: 'md'). */\n size?: TruncatedTextSize;\n /** Font weight variant (default: 'normal'). */\n weight?: TruncatedTextWeight;\n /** Tailwind color class (default: 'text-text-950'). */\n color?: string;\n /** Additional class names for the text element. */\n className?: string;\n /** Additional class names for the tooltip wrapper. */\n wrapperClassName?: string;\n};\n\n/**\n * Polymorphic props — uses `as` to choose the underlying HTML element.\n */\nexport type TruncatedTextProps<T extends ElementType = 'span'> = BaseProps & {\n /** HTML tag for the text element (default: 'span'). */\n as?: T;\n} & Omit<ComponentPropsWithoutRef<T>, keyof BaseProps | 'as' | 'ref'>;\n\n/**\n * Text that visually truncates on overflow (via Tailwind `truncate`) and\n * always shows the design-system `Tooltip` with the full text on hover/focus.\n *\n * No JS overflow detection is performed: when the text fits, the tooltip\n * still appears at hover but with the same visible content — an acceptable\n * trade-off equivalent to the previously used HTML `title=` attribute,\n * and the only approach that works across every container (table-layout\n * auto/fixed, grid, flex) without changing existing layout.\n *\n * @example\n * ```tsx\n * <TruncatedText size=\"sm\">{subject.name}</TruncatedText>\n * ```\n */\nexport const TruncatedText = <T extends ElementType = 'span'>({\n children,\n tooltipContent,\n tooltipPosition = 'top',\n size = 'md',\n weight = 'normal',\n color = 'text-text-950',\n className,\n wrapperClassName,\n as,\n ...rest\n}: TruncatedTextProps<T>) => {\n const Component: ElementType = as ?? 'span';\n\n const resolvedTooltipContent =\n tooltipContent ?? (typeof children === 'string' ? children : '');\n\n return (\n <Tooltip\n content={resolvedTooltipContent}\n position={tooltipPosition}\n disabled={!resolvedTooltipContent}\n usePortal\n className={cn('inline-flex min-w-0 max-w-full', wrapperClassName)}\n >\n <Component\n className={cn(\n 'font-primary truncate block min-w-0 max-w-full',\n SIZE_CLASS_MAP[size],\n WEIGHT_CLASS_MAP[weight],\n color,\n className\n )}\n {...rest}\n >\n {children}\n </Component>\n </Tooltip>\n );\n};\n\nexport default TruncatedText;\n"],"mappings":";;;;;;;;AAqIM;AA/FN,IAAM,iBAAoD;AAAA,EACxD,OAAO;AAAA,EACP,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AACT;AAEA,IAAM,mBAAwD;AAAA,EAC5D,UAAU;AAAA,EACV,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,MAAM;AAAA,EACN,WAAW;AAAA,EACX,OAAO;AACT;AA+CO,IAAM,gBAAgB,CAAiC;AAAA,EAC5D;AAAA,EACA;AAAA,EACA,kBAAkB;AAAA,EAClB,OAAO;AAAA,EACP,SAAS;AAAA,EACT,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAA6B;AAC3B,QAAM,YAAyB,MAAM;AAErC,QAAM,yBACJ,mBAAmB,OAAO,aAAa,WAAW,WAAW;AAE/D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAS;AAAA,MACT,UAAU;AAAA,MACV,UAAU,CAAC;AAAA,MACX,WAAS;AAAA,MACT,WAAW,GAAG,kCAAkC,gBAAgB;AAAA,MAEhE;AAAA,QAAC;AAAA;AAAA,UACC,WAAW;AAAA,YACT;AAAA,YACA,eAAe,IAAI;AAAA,YACnB,iBAAiB,MAAM;AAAA,YACvB;AAAA,YACA;AAAA,UACF;AAAA,UACC,GAAG;AAAA,UAEH;AAAA;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,wBAAQ;","names":[]}