@flamingo-stack/openframe-frontend-core 0.0.502 → 0.0.503

package/src/components/ui/tag.tsx

@@ -4,6 +4,8 @@ import React from "react"
 import { cva, type VariantProps } from "class-variance-authority"
 import { XmarkCircleIcon } from "../icons-v2-generated/signs-and-symbols/xmark-circle-icon"
 import { cn } from "../../utils/cn"
+import { useIsTruncated } from "../../hooks/ui/use-is-truncated"
+import { FloatingTooltip } from "./floating-tooltip"
 
 const tagVariants = cva(
   [
@@ -107,6 +109,37 @@ export interface TagProps
   as?: 'div' | 'span'
 }
 
+/**
+ * The tag's label slot. String labels get a `FloatingTooltip` with the full
+ * value when (and only when) the text is actually clipped — replacing the old
+ * native `title`, which showed with the OS delay, unstyled, and even when
+ * nothing was truncated. Node labels render exactly as before: the caller owns
+ * their content (and any tooltip), so none is added here.
+ * The trigger is a `span` so the tag stays valid phrasing content (`as="span"`
+ * exists precisely for tags inside a `<p>`).
+ */
+function TagLabel({ label, labelClassName }: { label: React.ReactNode; labelClassName?: string }) {
+  const isString = typeof label === 'string'
+  const { ref, isTruncated } = useIsTruncated<HTMLSpanElement>(isString ? label : null)
+
+  if (!isString) {
+    return <span className={cn("truncate", labelClassName)}>{label}</span>
+  }
+
+  return (
+    <FloatingTooltip
+      content={label}
+      side="top"
+      disabled={!isTruncated}
+      as="span"
+      triggerClassName="min-w-0 max-w-full"
+      className="max-w-xs whitespace-pre-line [overflow-wrap:anywhere]"
+    >
+      <span ref={ref} className={cn("truncate block", labelClassName)}>{label}</span>
+    </FloatingTooltip>
+  )
+}
+
 function Tag({
   label,
   variant,
@@ -134,7 +167,7 @@ function Tag({
           {icon}
         </span>
       )}
-      <span className={cn("truncate", labelClassName)} title={typeof label === 'string' ? label : undefined}>{label}</span>
+      <TagLabel label={label} labelClassName={labelClassName} />
       {onClose && (
         <button
           type="button"

package/src/components/ui/truncate-text.tsx

@@ -26,6 +26,19 @@ export interface TruncateTextProps {
   tone?: TruncateTextTone
   /** Force the monospace (heading) font family — preserves the variant's size while swapping family. */
   mono?: boolean
+  /**
+   * Extra classes for the tooltip trigger wrapper — the element that becomes the
+   * flex/grid item in the caller's layout (e.g. `flex-1`). Merged after the
+   * built-in `min-w-0 max-w-full`, which is what lets the trigger shrink inside
+   * flex rows so the text ellipsizes instead of clipping.
+   */
+  triggerClassName?: string
+  /**
+   * Trigger wrapper element. Default `'div'`. Use `'span'` where a block element
+   * is invalid HTML — inside a `<p>`, a heading, or another `<span>`; the span
+   * trigger is `inline-block` so the inner truncation still measures.
+   */
+  as?: 'div' | 'span'
 }
 
 const VARIANT_CLASS: Record<TruncateTextVariant, string> = {
@@ -69,6 +82,8 @@ export function TruncateText({
   variant = 'h4',
   tone = 'primary',
   mono = false,
+  triggerClassName,
+  as = 'div',
 }: TruncateTextProps) {
   const isMultiLine = lines > 1
   const { ref, isTruncated } = useIsTruncated<HTMLSpanElement>(children, { multiline: isMultiLine })
@@ -83,6 +98,11 @@ export function TruncateText({
       side={side}
       disabled={!isTruncated}
       className="max-w-xs whitespace-pre-line [overflow-wrap:anywhere]"
+      as={as}
+      // min-w-0: a flex/grid item's automatic minimum size is content-based when
+      // overflow is visible, so without this the trigger refuses to shrink and the
+      // text clips with no ellipsis and no tooltip.
+      triggerClassName={cn('min-w-0 max-w-full', as === 'span' && 'inline-block align-bottom', triggerClassName)}
     >
       <span
         ref={ref}