@flamingo-stack/openframe-frontend-core 0.0.501 → 0.0.502-snapshot.20260731145308

package/src/components/ui/data-table/data-table-column-filter.tsx

@@ -19,6 +19,8 @@ export interface DataTableColumnFilterProps {
   placement?: 'bottom-start' | 'bottom-end' | 'bottom'
   label: string
   align?: 'left' | 'center' | 'right'
+  /** Options are still loading — see `meta.filter.pending`. */
+  pending?: boolean
 }
 
 /** Filter dropdown wrapper that reads/writes TanStack column filter state. */
@@ -28,6 +30,7 @@ export function DataTableColumnFilter({
   placement = 'bottom-start',
   label,
   align = 'left',
+  pending = false,
 }: DataTableColumnFilterProps) {
   const currentValue = column.getFilterValue() as string[] | undefined
   const activeCount = currentValue?.length ?? 0
@@ -62,14 +65,17 @@ export function DataTableColumnFilter({
     column.setFilterValue(undefined)
   }, [column])
 
-  // A filterable column whose choices have not arrived yet. Declaring the filter
-  // with no options is how a caller says "this column filters, ask me later" —
-  // the alternative, dropping `meta.filter` until the query resolves, takes the
-  // header cell with it: below `lg` only filterable cells are shown at all, so
-  // every header on a tablet vanished on reload and came back when the options
-  // landed. It also moved the labels, since the funnel is only drawn for a
-  // filterable column.
-  const isPending = options.length === 0
+  // Nothing to choose from. Two ways to get here, and they look different:
+  //
+  //  - `pending`: the options are in flight. The funnel is drawn but inert, so
+  //    it does not appear out of nowhere when the query answers — the state a
+  //    skeleton, or a table whose facets load separately from its rows, asks for.
+  //  - otherwise: there are no options and there will be none. No funnel: a
+  //    control that cannot be opened reads as a broken one, and the design shows
+  //    the bare label. `meta.filter` still being declared is what keeps the
+  //    header cell alive on tablet (below `lg` only filterable cells show) and
+  //    keeps its 48px box — only the glyph goes.
+  const isEmpty = options.length === 0
 
   const trigger = (
     <div
@@ -82,36 +88,39 @@ export function DataTableColumnFilter({
         // the row it belongs to.
         'group flex w-full items-center gap-[var(--spacing-system-xsf)] h-12 rounded-sm transition-colors duration-200 select-none',
         alignJustify(align),
-        isPending ? 'cursor-default' : 'cursor-pointer',
+        isEmpty ? 'cursor-default' : 'cursor-pointer',
       )}
-      aria-label={`Filter by ${label}`}
-      aria-disabled={isPending || undefined}
+      // Only a real control announces itself as one. With no options this box
+      // is the plain header label the non-filterable columns beside it render.
+      aria-label={isEmpty ? undefined : `Filter by ${label}`}
     >
       <span
         className={cn(
           'text-h5 text-ods-text-secondary whitespace-nowrap transition-colors duration-200',
-          !isPending && 'group-hover:text-ods-text-primary',
+          !isEmpty && 'group-hover:text-ods-text-primary',
         )}
       >
         {label}
       </span>
-      {/* Rendered while pending too, and that is the point: it holds its own
-          width, so the label does not shift sideways the moment the options
-          resolve. */}
-      <Filter02Icon
-        className={cn(
-          'w-4 h-4 transition-colors',
-          activeCount > 0 && 'text-ods-accent',
-          activeCount === 0 && 'text-ods-text-secondary',
-          activeCount === 0 && !isPending && 'group-hover:text-ods-text-primary',
-        )}
-      />
+      {/* Kept while PENDING — it holds its own width, so the label does not
+          shift sideways the moment the options resolve — and dropped once we
+          know there are none. */}
+      {(!isEmpty || pending) && (
+        <Filter02Icon
+          className={cn(
+            'w-4 h-4 transition-colors',
+            activeCount > 0 && 'text-ods-accent',
+            activeCount === 0 && 'text-ods-text-secondary',
+            activeCount === 0 && !isEmpty && 'group-hover:text-ods-text-primary',
+          )}
+        />
+      )}
     </div>
   )
 
   // Same box, no dropdown: opening onto an empty list would be a worse answer
   // than not opening at all.
-  if (isPending) {
+  if (isEmpty) {
     return <div className="block w-full">{trigger}</div>
   }
 

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

@@ -240,6 +240,7 @@ function HeaderCell({ header, sort, onSortChange }: HeaderCellProps) {
           column={column}
           options={meta!.filter!.options}
           placement={meta!.filter!.placement}
+          pending={meta!.filter!.pending}
           label={resolveHeaderLabel(header)}
           align={align}
         />

package/src/components/ui/data-table/types.ts

@@ -22,10 +22,21 @@ declare module '@tanstack/react-table' {
      * (e.g. the date filter calendar trigger).
      */
     alwaysShowHeader?: boolean
-    /** If present, header renders a filter dropdown with these options. */
+    /**
+     * If present, the column filters: the header cell survives on tablet and,
+     * when there is something to choose from, renders the funnel + dropdown.
+     *
+     * An EMPTY `options` list draws no funnel at all — a control that cannot be
+     * opened is worse than no control, and every table in the design shows the
+     * bare label there. Set `pending` for the other empty case, "the options are
+     * still loading": that one keeps the funnel, so it does not appear out of
+     * nowhere the moment the query answers.
+     */
     filter?: {
       options: DataTableFilterOption[]
       placement?: 'bottom-start' | 'bottom-end' | 'bottom'
+      /** Options are in flight — draw the funnel, inert, instead of hiding it. */
+      pending?: boolean
     }
     /**
      * Opt-in: header renders the sort indicator and clicks toggle column sort.

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

@@ -236,8 +236,11 @@ export function FilterModal({
           </div>
         )}
 
-        {/* Filter groups */}
+        {/* Filter groups. A group with no options is skipped, not drawn as an
+            empty box: same rule the column funnels follow — a control that
+            cannot be used is worse than no control. */}
         {filterGroups.map((group) => {
+          if (group.options.length === 0) return null
           const groupSelection = selectedFilters[group.id] || []
           return (
             <div key={group.id} className="flex flex-col gap-1">

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

@@ -27,12 +27,17 @@ interface FloatingTooltipProps {
   /** Disable the tooltip without unmounting the trigger wrapper. */
   disabled?: boolean
   /**
-   * Classes for the trigger wrapper — the `div` this component puts around
-   * `children` to anchor the tooltip. That div becomes the flex/grid item in the
-   * caller's layout, so anything the child needed there (`min-w-0`, `flex-1`)
+   * Classes for the trigger wrapper — the element this component puts around
+   * `children` to anchor the tooltip. That element becomes the flex/grid item in
+   * the caller's layout, so anything the child needed there (`min-w-0`, `flex-1`)
    * must move onto it. Omit it and the wrapper carries no class, exactly as before.
    */
   triggerClassName?: string
+  /**
+   * Trigger wrapper element. Default `'div'`. Use `'span'` where a block element
+   * is invalid HTML — inside a `<p>`, a heading, or another `<span>`.
+   */
+  as?: 'div' | 'span'
 }
 
 // Parse colored text markup like [YELLOW]text[/YELLOW] into JSX
@@ -93,6 +98,7 @@ export function FloatingTooltip({
   delayDuration = 0,
   disabled = false,
   triggerClassName,
+  as: TriggerTag = 'div',
 }: FloatingTooltipProps) {
   const [isOpen, setIsOpen] = React.useState(false)
   const arrowRef = React.useRef<HTMLDivElement>(null)
@@ -159,9 +165,9 @@ export function FloatingTooltip({
 
   return (
     <>
-      <div ref={refs.setReference} className={triggerClassName} {...getReferenceProps()}>
+      <TriggerTag ref={refs.setReference} className={triggerClassName} {...getReferenceProps()}>
         {children}
-      </div>
+      </TriggerTag>
       <FloatingPortal>
         {isOpen && (
           <div

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

@@ -8,6 +8,9 @@ import { CheckIcon } from '../icons-v2-generated/signs-and-symbols'
 import { ExternalLink } from 'lucide-react'
 import { OpenFrameLogo } from '../..'
 import { useCopyToClipboard } from '../../hooks/use-copy-to-clipboard'
+import { useIsTruncated } from '../../hooks/ui/use-is-truncated'
+import { FloatingTooltip } from './floating-tooltip'
+import { TruncateText } from './truncate-text'
 
 export type ServiceCardRowAction = {
   copy?: boolean
@@ -61,9 +64,11 @@ export function ServiceCard({ title, subtitle, icon, tag, rows, className }: Ser
             {resolvedIcon}
           </div>
           <div className="min-w-0">
-            <div className="text-h3 text-ods-text-primary truncate" title={title}>{title}</div>
+            <TruncateText variant="h3">{title}</TruncateText>
             {subtitle && (
-              <div className="text-h6 text-ods-text-secondary truncate" title={subtitle}>{subtitle}</div>
+              <TruncateText variant="h6" tone="secondary">
+                {subtitle}
+              </TruncateText>
             )}
           </div>
         </div>
@@ -87,6 +92,7 @@ export function ServiceCard({ title, subtitle, icon, tag, rows, className }: Ser
 function ServiceCardRowItem({ row }: { row: ServiceCardRow }) {
   const [revealed, setRevealed] = useState(false)
   const { copy, copied } = useCopyToClipboard()
+  const { ref: valueRef, isTruncated: valueTruncated } = useIsTruncated<HTMLDivElement>(row.value)
   const actions = useMemo<ServiceCardRowAction>(() => ({ copy: true, open: !!row.href, reveal: !!row.isSecret, ...row.actions }), [row])
 
   const displayValue = row.isSecret ? <MaskedValue value={row.value} isRevealed={revealed} /> : <span>{row.value}</span>
@@ -104,7 +110,16 @@ function ServiceCardRowItem({ row }: { row: ServiceCardRow }) {
         <div className="w-20 md:w-24 shrink-0 text-h6 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" title={typeof row.value === 'string' ? row.value : undefined}>{displayValue}</div>
+        {/* No tooltip while a secret is masked — the old native `title` leaked the raw value on hover. */}
+        <FloatingTooltip
+          content={row.value}
+          side="top"
+          disabled={!valueTruncated || (row.isSecret && !revealed)}
+          triggerClassName="min-w-0"
+          className="max-w-xs [overflow-wrap:anywhere]"
+        >
+          <div ref={valueRef} className="truncate text-ods-text-primary">{displayValue}</div>
+        </FloatingTooltip>
         <div className="flex items-center gap-2 pl-3 flex-shrink-0">
           {actions.reveal && (
             <button

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}