@flamingo-stack/openframe-frontend-core 0.0.201 → 0.0.202-snapshot.20260521221224

package/src/components/ui/data-table/data-table-row.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import Link from 'next/link'
-import React, { memo, useCallback, type ReactNode } from 'react'
+import React, { memo, useCallback, useRef, type ReactNode } from 'react'
 import { flexRender, type Row } from '@tanstack/react-table'
 import { cn } from '../../../utils/cn'
 import { ROW_HEIGHT_DESKTOP } from './data-table-skeleton'
@@ -19,16 +19,28 @@ export interface DataTableRowProps<T> {
 /**
  * Click-bubbling protocol: any element inside a cell that should NOT trigger
  * `onRowClick` / row navigation must carry the `data-no-row-click` attribute.
- * The row checks `target.closest('[data-no-row-click]')` before firing
- * `onClick(item)`. This is the single primitive that interactive cells
- * (action buttons, dropdown menus, checkboxes) must opt into.
+ * The row checks `target.closest('[data-no-row-click]')` and short-circuits:
+ * in `onClick` mode it skips the consumer's handler; in link mode (when
+ * `href` is set) it calls `e.preventDefault()` so `<Link>` does not navigate.
+ *
+ * Clicks originating from portaled descendants (e.g. `FloatingTooltip`,
+ * dropdown menus rendered through `FloatingPortal`) bubble through React's
+ * component tree and reach this handler, but their DOM target lives outside
+ * the row subtree. The handler ignores any click whose target is not
+ * physically contained within the row element — no `stopPropagation`
+ * required at the source.
+ *
+ * In link mode the row IS the `<Link>` — content lives inside it, not under
+ * an absolute overlay — so native browser link behaviour works: hover,
+ * right-click "Open in new tab", middle-click, `Cmd+click`, focus outlines,
+ * `:visited` styles, etc.
  *
  * Example column with action buttons:
  * ```tsx
  * {
  *   id: 'actions',
  *   cell: ({ row }) => (
- *     <div data-no-row-click className="flex gap-2 justify-end pointer-events-auto">
+ *     <div data-no-row-click className="flex gap-2 justify-end">
  *       <Button onClick={() => edit(row.original)}>Edit</Button>
  *     </div>
  *   ),
@@ -49,61 +61,83 @@ function DataTableRowImpl<T>({
   className,
 }: DataTableRowProps<T>) {
   const isLinkMode = Boolean(href) && !onClick
+  const containerRef = useRef<HTMLElement | null>(null)
 
   const handleClick = useCallback(
     (e: React.MouseEvent) => {
       const target = e.target as HTMLElement
-      if (target.closest('[data-no-row-click]')) return
+      // React-bubbled events from portaled descendants (tooltips, dropdowns, etc.)
+      // reach this handler even though their DOM target lives outside the row.
+      // Suppress them — and in link mode, preventDefault so `<Link>` does not navigate.
+      if (!containerRef.current?.contains(target)) {
+        if (isLinkMode) e.preventDefault()
+        return
+      }
+      if (target.closest('[data-no-row-click]')) {
+        if (isLinkMode) e.preventDefault()
+        return
+      }
       onClick?.(row.original)
     },
-    [onClick, row.original],
+    [onClick, row.original, isLinkMode],
   )
 
-  return (
+  const containerClassName = cn(
+    'block rounded-md bg-ods-card border border-ods-border overflow-hidden no-underline text-inherit',
+    (onClick || isLinkMode) && 'cursor-pointer hover:bg-ods-bg-active transition-colors',
+    className,
+  )
+
+  const cells = (
     <div
       className={cn(
-        'relative rounded-md bg-ods-card border border-ods-border overflow-hidden',
-        (onClick || isLinkMode) &&
-          'cursor-pointer hover:bg-ods-bg-active transition-colors',
-        className,
+        'flex items-center gap-[var(--spacing-system-mf)] px-[var(--spacing-system-mf)]',
+        compact ? 'py-[var(--spacing-system-xsf)]' : `py-0 ${ROW_HEIGHT_DESKTOP}`,
       )}
-      onClick={isLinkMode ? undefined : handleClick}
     >
-      {isLinkMode && href && (
-        <Link
-          href={href}
-          prefetch={false}
-          className="absolute inset-0"
-          aria-label="View details"
-        />
-      )}
-      <div
-        className={cn(
-          'relative flex items-center gap-[var(--spacing-system-mf)] px-[var(--spacing-system-mf)]',
-          compact ? 'py-[var(--spacing-system-xsf)]' : `py-0 ${ROW_HEIGHT_DESKTOP}`,
-          isLinkMode && 'pointer-events-none',
-        )}
+      {row.getVisibleCells().map(cell => {
+        const meta = cell.column.columnDef.meta
+        return (
+          <div
+            key={cell.id}
+            className={cn(
+              'flex flex-col overflow-hidden',
+              alignJustify(meta?.align),
+              meta?.width || 'flex-1 min-w-0',
+              meta?.cellClassName,
+              getHideClasses(meta?.hideAt),
+            )}
+          >
+            <CellContent>
+              {flexRender(cell.column.columnDef.cell, cell.getContext())}
+            </CellContent>
+          </div>
+        )
+      })}
+    </div>
+  )
+
+  if (isLinkMode && href) {
+    return (
+      <Link
+        href={href}
+        prefetch={false}
+        ref={containerRef as React.RefObject<HTMLAnchorElement>}
+        className={containerClassName}
+        onClick={handleClick}
       >
-        {row.getVisibleCells().map(cell => {
-          const meta = cell.column.columnDef.meta
-          return (
-            <div
-              key={cell.id}
-              className={cn(
-                'flex flex-col overflow-hidden',
-                alignJustify(meta?.align),
-                meta?.width || 'flex-1 min-w-0',
-                meta?.cellClassName,
-                getHideClasses(meta?.hideAt),
-              )}
-            >
-              <CellContent>
-                {flexRender(cell.column.columnDef.cell, cell.getContext())}
-              </CellContent>
-            </div>
-          )
-        })}
-      </div>
+        {cells}
+      </Link>
+    )
+  }
+
+  return (
+    <div
+      ref={containerRef as React.RefObject<HTMLDivElement>}
+      className={containerClassName}
+      onClick={onClick ? handleClick : undefined}
+    >
+      {cells}
     </div>
   )
 }
@@ -114,7 +148,7 @@ export const DataTableRow = memo(DataTableRowImpl) as typeof DataTableRowImpl
 function CellContent({ children }: { children: ReactNode }) {
   if (typeof children === 'string' || typeof children === 'number') {
     return (
-      <span className="text-h4 text-ods-text-primary truncate">{children}</span>
+      <span className="text-h4 text-ods-text-primary truncate" title={String(children)}>{children}</span>
     )
   }
   return <>{children}</>

package/src/components/ui/device-card-compact.tsx

@@ -35,12 +35,12 @@ export function DeviceCardCompact({
       {...props}
     >
       {hasName && (
-        <span className="font-['DM_Sans'] font-medium text-[16px] leading-[20px] text-ods-text-primary truncate">
+        <span className="font-['DM_Sans'] font-medium text-[16px] leading-[20px] text-ods-text-primary truncate" title={deviceName}>
           {deviceName}
         </span>
       )}
       {hasOrg && (
-        <span className="font-['DM_Sans'] font-medium text-[14px] leading-[18px] text-ods-text-secondary truncate">
+        <span className="font-['DM_Sans'] font-medium text-[14px] leading-[18px] text-ods-text-secondary truncate" title={organization}>
           {organization}
         </span>
       )}

package/src/components/ui/device-card.tsx

@@ -103,12 +103,12 @@ export function DeviceCard({
                 className="shrink-0"
               />
             )}
-            <span className="text-h4 text-ods-text-primary truncate">
+            <span className="text-h4 text-ods-text-primary truncate" title={device.name}>
               {device.name}
             </span>
           </div>
           {device.organization && (
-            <span className="font-['DM_Sans'] font-medium text-[14px] leading-[20px] text-ods-text-secondary truncate">
+            <span className="font-['DM_Sans'] font-medium text-[14px] leading-[20px] text-ods-text-secondary truncate" title={device.organization}>
               {device.organization}
             </span>
           )}

package/src/components/ui/entity-image.tsx

@@ -48,7 +48,7 @@ export function EntityImage({ src, alt, fallbackText, className }: EntityImagePr
       alt={alt ?? ''}
       onError={() => setImageFailed(true)}
       className={cn(
-        'size-[52px] md:size-[60px] shrink-0 rounded-md border border-ods-border object-cover',
+        'size-[52px] md:size-[60px] shrink-0 rounded-md border border-ods-border object-contain',
         className,
       )}
     />

package/src/components/ui/field-wrapper.tsx

@@ -33,7 +33,7 @@ const FieldWrapper = React.forwardRef<HTMLDivElement, FieldWrapperProps>(
         )}
         {children}
         {error && (
-          <p className={cn("absolute bottom-0 left-0 right-0 translate-y-full text-h6 truncate", errorVariantClasses[errorVariant])}>
+          <p className={cn("absolute bottom-0 left-0 right-0 translate-y-full text-h6 truncate", errorVariantClasses[errorVariant])} title={error}>
             {error}
           </p>
         )}

package/src/components/ui/file-manager/file-manager-table-row.tsx

@@ -76,11 +76,11 @@ export function FileManagerTableRow({
           size="md" 
         />
         <div className="flex flex-col min-w-0">
-          <span className="text-sm text-ods-text-primary truncate">
+          <span className="text-sm text-ods-text-primary truncate" title={file.name}>
             {file.name}
           </span>
           {showPath && file.path && (
-            <span className="text-xs text-ods-text-secondary truncate">
+            <span className="text-xs text-ods-text-secondary truncate" title={file.path}>
               {file.path}
             </span>
           )}

package/src/components/ui/file-upload.tsx

@@ -347,7 +347,7 @@ export function FileUpload({
                     )}
                   >
                     <div className="flex-1 min-w-0">
-                      <p className="text-heading-5 font-medium text-ods-text-primary truncate">
+                      <p className="text-heading-5 font-medium text-ods-text-primary truncate" title={entry.fileName}>
                         {entry.fileName}
                       </p>
                       <div className="flex items-center gap-2">
@@ -385,7 +385,7 @@ export function FileUpload({
                     className="flex items-center gap-3 p-3 rounded-[6px] bg-ods-card border border-ods-border"
                   >
                     <div className="flex-1 min-w-0">
-                      <p className="text-heading-5 font-medium text-ods-text-primary truncate">
+                      <p className="text-heading-5 font-medium text-ods-text-primary truncate" title={file.name}>
                         {file.name}
                       </p>
                       <p className="text-heading-6 text-ods-text-secondary">

package/src/components/ui/filter-list.tsx

@@ -56,7 +56,7 @@ export function FilterListItem({
       )}
     >
       <div className="flex min-w-0 flex-1 flex-col">
-        <p className="truncate text-h4 text-ods-text-primary">
+        <p className="truncate text-h4 text-ods-text-primary" title={title}>
           {title}
         </p>
 

package/src/components/ui/floating-tooltip.tsx

@@ -23,6 +23,8 @@ interface FloatingTooltipProps {
   side?: "top" | "right" | "bottom" | "left"
   className?: string
   delayDuration?: number
+  /** Disable the tooltip without unmounting the trigger wrapper. */
+  disabled?: boolean
 }
 
 // Parse colored text markup like [YELLOW]text[/YELLOW] into JSX
@@ -75,12 +77,13 @@ function parseColoredText(text: string): React.ReactNode {
   return parts.length > 0 ? <>{parts}</> : text
 }
 
-export function FloatingTooltip({ 
-  content, 
-  children, 
-  side = "right", 
+export function FloatingTooltip({
+  content,
+  children,
+  side = "right",
   className,
-  delayDuration = 0 
+  delayDuration = 0,
+  disabled = false,
 }: FloatingTooltipProps) {
   const [isOpen, setIsOpen] = React.useState(false)
   const arrowRef = React.useRef<HTMLDivElement>(null)
@@ -104,6 +107,7 @@ export function FloatingTooltip({
 
   const hover = useHover(context, {
     move: false,
+    enabled: !disabled,
     delay: { open: delayDuration, close: 0 },
     handleClose: safePolygon(),
   })

package/src/components/ui/hidden-tags-popup.tsx

@@ -40,7 +40,7 @@ export const HiddenTagsPopup = forwardRef(function HiddenTagsPopup(
             "border-b border-ods-border last:border-b-0",
           )}
         >
-          <span className="text-h5 truncate uppercase text-ods-text-primary">
+          <span className="text-h5 truncate uppercase text-ods-text-primary" title={typeof item.label === 'string' ? item.label : undefined}>
             {item.label}
           </span>
           {!disabled && onRemove && (

package/src/components/ui/index.ts

@@ -76,6 +76,7 @@ export * from './entity-image'
 export * from './feature-card'
 export * from './feature-list'
 export { FloatingTooltip } from './floating-tooltip'
+export { TruncateText, type TruncateTextProps } from './truncate-text'
 export * from './highlight-card'
 export * from './icons-block'
 export * from './filter-modal'

package/src/components/ui/info-card.tsx

@@ -39,7 +39,7 @@ export function InfoCard({ data, className = '' }: InfoCardProps) {
     >
       {data.title && (
         <div className="flex items-center gap-[var(--spacing-system-xsf)] self-stretch h-6">
-          <span className="text-h4 text-ods-text-primary truncate">
+          <span className="text-h4 text-ods-text-primary truncate" title={data.title}>
             {data.title}
           </span>
           {data.icon}
@@ -48,7 +48,7 @@ export function InfoCard({ data, className = '' }: InfoCardProps) {
 
       {/* Subtitle */}
       {data.subtitle && (
-        <div className="text-h4 text-ods-text-secondary truncate self-stretch">
+        <div className="text-h4 text-ods-text-secondary truncate self-stretch" title={data.subtitle}>
           {data.subtitle}
         </div>
       )}

package/src/components/ui/input-trigger.tsx

@@ -66,8 +66,7 @@ export const InputTrigger = React.forwardRef<HTMLButtonElement, InputTriggerProp
 					className={cn(
 						"flex-1 min-w-0 text-left truncate",
 						isPlaceholder && "text-ods-text-secondary",
-					)}
-				>
+					)} title={isPlaceholder ? placeholder : (typeof selectedLabel === 'string' ? selectedLabel : undefined)}>
 					{isPlaceholder ? placeholder : selectedLabel}
 				</span>
 				{endIcon && (

package/src/components/ui/organization-card.tsx

@@ -104,10 +104,10 @@ export function OrganizationCard({
         />
 
         <div className="flex-1 flex flex-col justify-center py-2 min-w-0">
-          <h3 className="font-['DM_Sans'] font-bold text-lg leading-[1.33] tracking-[-0.02em] text-ods-text-primary transition-colors truncate">
+          <h3 className="font-['DM_Sans'] font-bold text-lg leading-[1.33] tracking-[-0.02em] text-ods-text-primary transition-colors truncate" title={organization.name}>
             {organization.name}
           </h3>
-          <p className="font-['DM_Sans'] font-medium text-sm leading-[1.43] text-ods-text-secondary truncate">
+          <p className="font-['DM_Sans'] font-medium text-sm leading-[1.43] text-ods-text-secondary truncate" title={organization.industry || organization.tier || organization.websiteUrl || "Organization"}>
             {organization.industry || organization.tier || organization.websiteUrl || "Organization"}
           </p>
         </div>
@@ -116,7 +116,7 @@ export function OrganizationCard({
       {/* Description */}
       {organization.description && (
         <div className="w-full h-12 overflow-hidden">
-          <p className="font-['DM_Sans'] font-medium text-lg leading-[1.33] text-ods-text-primary line-clamp-2">
+          <p className="font-['DM_Sans'] font-medium text-lg leading-[1.33] text-ods-text-primary line-clamp-2" title={organization.description}>
             {organization.description}
           </p>
         </div>

package/src/components/ui/radio-group.tsx

@@ -145,8 +145,7 @@ const RadioGroupBlock = React.forwardRef<
                     className={cn(
                       "font-[family-name:var(--font-h4-family)] font-[number:var(--font-h4-weight)] text-[length:var(--font-size-h4-body)] leading-[24px]",
                       "text-ods-text-primary select-none truncate"
-                    )}
-                  >
+                    )} title={typeof option.label === 'string' ? option.label : undefined}>
                     {option.label}
                   </span>
                   {option.description && (
@@ -168,7 +167,7 @@ const RadioGroupBlock = React.forwardRef<
           })}
         </RadioGroupPrimitive.Root>
         {error && (
-          <p className="absolute bottom-0 left-0 right-0 translate-y-full text-h6 truncate text-ods-error">
+          <p className="absolute bottom-0 left-0 right-0 translate-y-full text-h6 truncate text-ods-error" title={error}>
             {error}
           </p>
         )}

package/src/components/ui/search-input.tsx

@@ -325,11 +325,11 @@ export function SearchInput({
         <div className={cn(
           "text-sm font-medium leading-5 truncate",
           isHighlighted ? "text-ods-accent" : "text-ods-text-primary"
-        )}>
+        )} title={result.title}>
           {result.title}
         </div>
         {result.description && (
-          <div className="text-xs leading-4 text-ods-text-secondary truncate mt-0.5">
+          <div className="text-xs leading-4 text-ods-text-secondary truncate mt-0.5" title={result.description}>
             {result.description}
           </div>
         )}

package/src/components/ui/service-card.tsx

@@ -61,9 +61,9 @@ export function ServiceCard({ title, subtitle, icon, tag, rows, className }: Ser
             {resolvedIcon}
           </div>
           <div className="min-w-0">
-            <div className="text-xl font-semibold text-ods-text-primary truncate">{title}</div>
+            <div className="text-xl font-semibold text-ods-text-primary truncate" title={title}>{title}</div>
             {subtitle && (
-              <div className="text-sm text-ods-text-secondary truncate">{subtitle}</div>
+              <div className="text-sm text-ods-text-secondary truncate" title={subtitle}>{subtitle}</div>
             )}
           </div>
         </div>
@@ -104,7 +104,7 @@ function ServiceCardRowItem({ row }: { row: ServiceCardRow }) {
         <div className="w-20 md:w-24 shrink-0 text-sm font-medium text-ods-text-primary">{row.label}</div>
       )}
       <div className={cn('flex-1 h-12 rounded-md border border-ods-border bg-ods-bg px-3 md:px-4 flex items-center justify-between min-w-0', row.monospace ? 'font-mono' : '')}>
-        <div className="truncate text-ods-text-primary min-w-0">{displayValue}</div>
+        <div className="truncate text-ods-text-primary min-w-0" title={typeof row.value === 'string' ? row.value : undefined}>{displayValue}</div>
         <div className="flex items-center gap-2 pl-3 flex-shrink-0">
           {actions.reveal && (
             <button