middle-truncate

"use client"

// TEXT CUT IN THE MIDDLE, never at the end. `truncate` cuts the tail, and the tail is
// what tells values apart: `server-1` and `server-2` both read `server…`, a wallet
// address keeps its prefix and loses the end people check, a path keeps its folders
// and loses its file.
//
// Two spans in a row: the head wears the ellipsis and shrinks, the tail never yields.
// No measurement, no resize observer: it follows any width the layout gives it, and
// when everything fits the two spans read as one word.
//
// `tail` says what must stay whole: a count of characters (`6` for a hash), or a
// separator, everything from its last occurrence (`"/"` keeps the file, `"."` the
// extension). A separator the text does not hold guarantees no tail:
// the text cuts at its end like any line. The tail is a promise: wider than the room,
// it overflows rather than break it.

import type * as React from "react"
import { cn } from "@/lib/utils"

export type Tail = number | string

/** Where `text` splits: the head shrinks, the tail is kept whole. */
export function splitTail(
  text: string,
  tail: Tail,
): [head: string, tail: string] {
  const at =
    typeof tail === "number"
      ? Math.max(0, text.length - tail)
      : text.includes(tail)
        ? text.lastIndexOf(tail)
        : text.length
  return [text.slice(0, at), text.slice(at)]
}

export interface MiddleTruncateProps
  extends Omit<React.ComponentProps<"span">, "children"> {
  text: string
  /** What stays whole: characters from the end, or a separator to keep from its
   *  last occurrence. Default 4, enough for `r-12` or a short hash's end. */
  tail?: Tail
}

export function MiddleTruncate({
  text,
  tail = 4,
  className,
  onPointerEnter,
  ...props
}: MiddleTruncateProps) {
  const [head, end] = splitTail(text, tail)
  return (
    <span
      data-slot="middle-truncate"
      // The whole text on hover, only once something is cut: a title on a word shown
      // in full is noise. Read at the hover, the one moment it matters. One hover,
      // one tooltip: inside a tooltip's trigger (a `Copy tip`, a `Tip`) or under a
      // title of the caller's, that one speaks and this one stays quiet.
      onPointerEnter={(event) => {
        onPointerEnter?.(event)
        const self = event.currentTarget
        const shown = self.firstElementChild as HTMLElement
        // Base UI marks every tooltip trigger itself, whatever slot the element
        // wears (a `Copy` stays `data-slot="copy"` under its `Tip`).
        const owned = self.parentElement?.closest(
          "[data-base-ui-tooltip-trigger], [title]",
        )
        if (!owned && shown.scrollWidth > shown.clientWidth) self.title = text
        else self.removeAttribute("title")
      }}
      className={cn("inline-flex min-w-0 max-w-full", className)}
      {...props}
    >
      {/* `pre`, not `nowrap`: a space at the seam would otherwise vanish. */}
      <span
        data-slot="middle-truncate-head"
        className="min-w-0 overflow-hidden text-ellipsis whitespace-pre"
      >
        {head}
      </span>
      <span
        data-slot="middle-truncate-tail"
        className="shrink-0 whitespace-pre"
      >
        {end}
      </span>
    </span>
  )
}