@acronis-platform/ui-react 0.62.0 → 1.0.0

package/dist/components/ui/truncate-text/truncate-text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"truncate-text.js","sources":["../../../../src/components/ui/truncate-text/truncate-text.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '@/lib/utils';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '../tooltip';\n\nimport { middleTruncate } from './middle-truncate';\nimport { measureTextWidth } from './text-width';\n\ntype TooltipContentProps = React.ComponentProps<typeof TooltipContent>;\n\nexport interface TruncateTextProps {\n  /** The text to display. Also used verbatim as the tooltip body when truncated. */\n  children: string;\n  /**\n   * Where the ellipsis goes. `'end'` (default) is the familiar CSS\n   * `text-overflow: ellipsis` — reach for `'middle'` when the distinguishing\n   * part of the value is at the tail (a URL, a hash) rather than the start.\n   */\n  mode?: 'middle' | 'end';\n  /** Which side the tooltip opens on. Defaults to `top`. */\n  side?: 'top' | 'bottom' | 'left' | 'right';\n  /**\n   * Max lines before truncating, in `'end'` mode only: `1` (default) =\n   * single-line ellipsis; `>1` = a multi-line clamp. Ignored in `'middle'`\n   * mode, which is inherently single-line.\n   */\n  lines?: number;\n  /**\n   * Force the tooltip open on mount (only has effect when the text is truncated).\n   * Mainly for stories / visual review; normal usage reveals it on hover/focus.\n   */\n  defaultOpen?: boolean;\n  /**\n   * Container the tooltip popup portals into. Pass a shadow root (e.g. a\n   * micro-frontend mount point) so the popup inherits the kit's styles; defaults\n   * to the document body.\n   */\n  portalContainer?: TooltipContentProps['portalContainer'];\n  /** Merged onto the rendered `<span>`. */\n  className?: string;\n}\n\n/**\n * Text that truncates with an ellipsis and reveals its full value in a tooltip\n * **only when it's actually clipped** — the tooltip is skipped when everything\n * fits, so short cells don't get a pointless hover target. Ideal for table cells.\n *\n * `'end'`-mode truncation is detected by comparing scroll vs client size and\n * re-checked on resize; `'middle'`-mode measures a real font metric via canvas\n * (there is no native CSS middle-ellipsis) and re-measures the same way.\n */\nexport const TruncateText = React.forwardRef<HTMLSpanElement, TruncateTextProps>(\n  function TruncateText(\n    { children, mode = 'end', className, side = 'top', lines = 1, defaultOpen, portalContainer },\n    forwardedRef\n  ) {\n    if (mode === 'middle') {\n      return (\n        <TruncateTextMiddle\n          ref={forwardedRef}\n          text={children}\n          side={side}\n          portalContainer={portalContainer}\n          className={className}\n        />\n      );\n    }\n\n    return (\n      <TruncateTextEnd\n        ref={forwardedRef}\n        text={children}\n        side={side}\n        lines={lines}\n        defaultOpen={defaultOpen}\n        portalContainer={portalContainer}\n        className={className}\n      />\n    );\n  }\n);\n\ninterface TruncateTextEndProps {\n  text: string;\n  side: 'top' | 'bottom' | 'left' | 'right';\n  lines: number;\n  defaultOpen: boolean | undefined;\n  portalContainer: TooltipContentProps['portalContainer'];\n  className: string | undefined;\n}\n\n/** The CSS end-ellipsis / multi-line-clamp half of `TruncateText`. */\nconst TruncateTextEnd = React.forwardRef<HTMLSpanElement, TruncateTextEndProps>(\n  function TruncateTextEnd(\n    { text, side, lines, defaultOpen, portalContainer, className },\n    forwardedRef\n  ) {\n    const innerRef = React.useRef<HTMLSpanElement | null>(null);\n    const [truncated, setTruncated] = React.useState(false);\n\n    // The component owns a ref for overflow measurement; still forward it so\n    // callers can reach the underlying span.\n    const setRef = React.useCallback(\n      (node: HTMLSpanElement | null) => {\n        innerRef.current = node;\n        if (typeof forwardedRef === 'function') forwardedRef(node);\n        else if (forwardedRef) forwardedRef.current = node;\n      },\n      [forwardedRef]\n    );\n\n    React.useLayoutEffect(() => {\n      const node = innerRef.current;\n      if (!node) return;\n      // +1 guards against sub-pixel rounding falsely reporting overflow.\n      // Genuine DOM-measuring layout effect: overflow can only be read after\n      // layout, so the sync setState here is required, not incidental.\n      const check = () =>\n        setTruncated(\n          lines > 1\n            ? node.scrollHeight > node.clientHeight + 1\n            : node.scrollWidth > node.clientWidth + 1\n        );\n      check();\n      const observer = new ResizeObserver(check);\n      observer.observe(node);\n      return () => observer.disconnect();\n      // `truncated` is a dep so the observer re-attaches to the span after it moves\n      // into / out of the tooltip trigger on the truncation flip.\n    }, [text, lines, truncated]);\n\n    const multiline = lines > 1;\n    const style: React.CSSProperties | undefined = multiline\n      ? {\n          display: '-webkit-box',\n          WebkitLineClamp: lines,\n          WebkitBoxOrient: 'vertical',\n          overflow: 'hidden',\n        }\n      : undefined;\n\n    const span = (\n      <span\n        ref={setRef}\n        className={cn('block', multiline ? 'overflow-hidden' : 'truncate', className)}\n        style={style}\n      >\n        {text}\n      </span>\n    );\n\n    if (!truncated) return span;\n\n    return (\n      <Tooltip defaultOpen={defaultOpen}>\n        <TooltipTrigger render={span} />\n        <TooltipContent side={side} portalContainer={portalContainer}>\n          {text}\n        </TooltipContent>\n      </Tooltip>\n    );\n  }\n);\n\ninterface TruncateTextMiddleProps {\n  text: string;\n  side: 'top' | 'bottom' | 'left' | 'right';\n  portalContainer: TooltipContentProps['portalContainer'];\n  className: string | undefined;\n}\n\n/**\n * The middle-ellipsis half of `TruncateText`. Sizes to the container, not the\n * other way around — it needs no `size`/`maxSize` on a column or wrapper to\n * have something to truncate against: it measures whatever width it is\n * actually rendered at, however that width was arrived at, and re-measures\n * via `ResizeObserver` if it changes.\n */\nconst TruncateTextMiddle = React.forwardRef<HTMLSpanElement, TruncateTextMiddleProps>(\n  function TruncateTextMiddle({ text, side, portalContainer, className }, forwardedRef) {\n    const [node, setNode] = React.useState<HTMLSpanElement | null>(null);\n    const [display, setDisplay] = React.useState(text);\n    // Distinct from `display !== text`: that's also true before the first\n    // measurement (the initial state is the untruncated `text`), and this needs\n    // to tell \"genuinely fits, confirmed by measuring\" apart from \"haven't\n    // measured yet\" — see the class-name comment below for why they can't share\n    // one flag.\n    const [measured, setMeasured] = React.useState(false);\n\n    const setRefs = React.useCallback(\n      (element: HTMLSpanElement | null) => {\n        setNode(element);\n        if (typeof forwardedRef === 'function') forwardedRef(element);\n        else if (forwardedRef) forwardedRef.current = element;\n      },\n      [forwardedRef]\n    );\n\n    // Depends on `node`, not just `text` — the trigger/no-trigger branch below\n    // swaps this span between being `<Tooltip>`'s child and being the whole\n    // return value, which are different positions in the tree, so React remounts\n    // it (a new DOM node) rather than reusing the old one. A `[text]`-only effect\n    // would keep observing the now-detached old node and never see the\n    // replacement, silently going stale the moment truncation state flips.\n    React.useLayoutEffect(() => {\n      setMeasured(false);\n      if (node === null || typeof ResizeObserver === 'undefined') {\n        setDisplay(text);\n        return;\n      }\n\n      const recompute = () => {\n        const width = node.clientWidth;\n        // 0 during the node's first layout tick (or while a hidden ancestor is\n        // still collapsed) — skip rather than truncate against a width that\n        // isn't real yet; the observer fires again once it settles.\n        if (width === 0) return;\n        const font = getComputedStyle(node).font;\n        setDisplay(\n          middleTruncate(text, width, {\n            measure: (candidate) => measureTextWidth(candidate, font),\n          })\n        );\n        setMeasured(true);\n      };\n\n      recompute();\n      const observer = new ResizeObserver(recompute);\n      observer.observe(node);\n      return () => observer.disconnect();\n    }, [node, text]);\n\n    const span = (\n      <span\n        ref={setRefs}\n        className={cn(\n          // `flex-1` (`flex: 1 1 0%`) only takes effect when the parent this\n          // renders into happens to itself be a flex container — inert\n          // otherwise, so it's safe alongside `block`. It's not decorative:\n          // without it, a `display: block` element with no explicit width\n          // only *auto-fills a plain block parent* — the browser's default\n          // \"fill available width\" rule for `width: auto` is specific to\n          // block layout. Nested inside a flex parent (a caller's own cell\n          // wrapping this next to an icon button, say), the same element\n          // becomes a flex item instead, where `flex-basis: auto` means\n          // \"size to your own content\" — and this component's own content\n          // is whatever it truncated itself to *last* time. Once shrunk, it\n          // would then measure its own shrunken self forever, growing back\n          // only if some ancestor's width changed enough to force a reflow\n          // for an unrelated reason — not when the column actually had more\n          // room to give it all along.\n          'block min-w-0 flex-1',\n          // Nowrap + clip only once `measured` — *before* that, this is the\n          // string's first-ever render, and if it already clips and refuses to\n          // wrap, it dictates its own column's width to `table-layout: auto`\n          // before `ResizeObserver` ever gets a turn: nowrap makes an unbroken\n          // string's min-content the string's *entire* rendered width, so the\n          // browser hands the column exactly that much room — measuring\n          // `clientWidth` after the fact just reads back the width this same\n          // element inflated the column to, not the width some other column\n          // needed and this one gave up.\n          //\n          // Left at the browser's own default on the unmeasured pass rather than\n          // forced to `overflow-wrap: anywhere` — tried that first, and it\n          // overcorrects: telling `auto`-layout this column's min-content is a\n          // single character makes it treat the column as free to take almost\n          // nothing, starving it in favor of siblings with a normal (space- and\n          // punctuation-driven) min-content. The browser's own line-breaking\n          // already finds break opportunities in a URL — after `/`, around `?`,\n          // `=`, `_` — without being told everything is breakable, which is\n          // exactly the multi-line wrap this component exists to replace: worse\n          // than what `nowrap` would give it, but a real, usable column width to\n          // hand to the first `ResizeObserver` measurement, not a starved one.\n          measured && 'overflow-hidden whitespace-nowrap',\n          className\n        )}\n      >\n        {display}\n      </span>\n    );\n\n    if (display === text) return span;\n\n    return (\n      <Tooltip>\n        <TooltipTrigger render={span} />\n        <TooltipContent side={side} portalContainer={portalContainer}>\n          {text}\n        </TooltipContent>\n      </Tooltip>\n    );\n  }\n);\n"],"names":["TruncateText","React","children","mode","className","side","lines","defaultOpen","portalContainer","forwardedRef","jsx","TruncateTextMiddle","TruncateTextEnd","text","innerRef","truncated","setTruncated","setRef","node","check","observer","multiline","style","span","cn","jsxs","Tooltip","TooltipTrigger","TooltipContent","setNode","display","setDisplay","measured","setMeasured","setRefs","element","recompute","width","font","middleTruncate","candidate","measureTextWidth"],"mappings":"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"}