@bioturing/components 0.45.0 → 0.46.1

package/dist/components/truncate/helpers.js.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.js","sources":["../../../src/components/truncate/helpers.ts"],"sourcesContent":["import React from \"react\";\nimport { renderToStaticMarkup } from \"react-dom/server\";\n\n/**\n * Finds the closest parent element that has inline flex display\n * @param element - The starting HTMLElement\n * @returns The closest inline flex parent or null if not found\n */\nexport function findClosestInlineFlexParent(\n  element: HTMLElement\n): HTMLElement | null {\n  if (!element) return null;\n\n  let currentElement = element.parentElement;\n  let attempts = 0;\n  const maxAttempts = 10;\n\n  while (currentElement && attempts < maxAttempts) {\n    const computedStyle = window.getComputedStyle(currentElement);\n\n    // Check if display is inline-flex\n    if (computedStyle.display === \"inline-flex\") {\n      return currentElement;\n    }\n\n    // Move to the next parent\n    currentElement = currentElement.parentElement;\n    attempts++;\n  }\n\n  return null;\n}\n\nexport function getFlexRemainingSpace(\n  flexContainer: HTMLElement,\n  ignoreElement: HTMLElement | ((e: HTMLElement) => boolean) = null\n) {\n  const style = window.getComputedStyle(flexContainer);\n  const isRow =\n    style.flexDirection === \"row\" || style.flexDirection === \"row-reverse\";\n  const containerSize = isRow\n    ? flexContainer.offsetWidth\n    : flexContainer.offsetHeight;\n  const gap = parseFloat(style.gap) || 0;\n  const paddingStart =\n    parseFloat(isRow ? style.paddingLeft : style.paddingTop) || 0;\n  const paddingEnd =\n    parseFloat(isRow ? style.paddingRight : style.paddingBottom) || 0;\n\n  let totalItemSize = 0;\n  const items: HTMLElement[] = (\n    [...flexContainer.children] as HTMLElement[]\n  ).filter(\n    (child) =>\n      child instanceof HTMLElement &&\n      (typeof ignoreElement === \"function\"\n        ? !ignoreElement(child)\n        : child !== ignoreElement)\n  );\n  for (let i = 0; i < items.length; i++) {\n    const itemStyle = window.getComputedStyle(items[i]);\n    const marginStart =\n      parseFloat(isRow ? itemStyle.marginLeft : itemStyle.marginTop) || 0;\n    const marginEnd =\n      parseFloat(isRow ? itemStyle.marginRight : itemStyle.marginBottom) || 0;\n    totalItemSize +=\n      (isRow ? items[i].offsetWidth : items[i].offsetHeight) +\n      marginStart +\n      marginEnd;\n  }\n\n  // Add gaps (n-1 gaps for n items)\n  totalItemSize += gap * (items.length - 1);\n\n  // Calculate remaining space\n  const remainingSpace =\n    containerSize - totalItemSize - paddingStart - paddingEnd;\n  return Math.max(0, remainingSpace);\n}\n\n// Cache for measurement results to optimize performance (only used with renderText)\nconst measurementCache = new Map<string, number>();\n\n/**\n * Measures text width with optional render function for styled content\n * @param container - The container element to clone styles from\n * @param renderText - Optional render function to apply styling to text before measurement\n */\nexport const measureText = (\n  container: HTMLElement,\n  renderText?: ((text: string) => React.ReactNode) | null\n) => {\n  const span = document.createElement(\"span\");\n  span.style.opacity = \"0\";\n  span.style.position = \"absolute\";\n  span.style.top = \"-1000px\";\n  span.style.left = \"-1000px\";\n  span.style.whiteSpace = \"nowrap\";\n  span.style.pointerEvents = \"none\";\n\n  const nodeRect = container.getBoundingClientRect();\n\n  const containerClone = container.cloneNode(true) as HTMLElement;\n  containerClone.style.maxWidth = `${nodeRect.width}px`;\n  containerClone.style.position = \"absolute\";\n  containerClone.style.pointerEvents = \"none\";\n  containerClone.style.top = \"-99px\";\n  containerClone.style.left = \"-99px\";\n  containerClone.style.zIndex = \"-1\";\n\n  container.parentElement?.appendChild(containerClone);\n  containerClone.appendChild(span);\n\n  return {\n    measure: (text: string) => {\n      // Only use cache when measuring styled content (renderText case)\n      // This preserves original behavior for default case\n      if (renderText) {\n        const cacheKey = `${text}-styled`;\n\n        // Check cache first\n        if (measurementCache.has(cacheKey)) {\n          return measurementCache.get(cacheKey)!;\n        }\n\n        // Clear previous content\n        span.innerHTML = \"\";\n\n        // Render the content using renderText\n        const rendered = renderText(text);\n\n        // Handle different types of rendered content\n        if (typeof rendered === \"string\") {\n          // Simple string - just set innerHTML\n          span.innerHTML = rendered;\n        } else if (React.isValidElement(rendered)) {\n          // React element - use renderToStaticMarkup for synchronous rendering\n          try {\n            const html = renderToStaticMarkup(rendered);\n            span.innerHTML = html;\n          } catch (_e) {\n            // Fallback to plain text if renderToStaticMarkup fails\n            span.innerText = text;\n          }\n        } else {\n          // Fallback to plain text\n          span.innerText = text;\n        }\n\n        const width = span.clientWidth;\n\n        // Cache the result\n        measurementCache.set(cacheKey, width);\n\n        // Limit cache size to prevent memory leaks\n        if (measurementCache.size > 100) {\n          const firstKey = measurementCache.keys().next().value;\n          measurementCache.delete(firstKey);\n        }\n\n        return width;\n      }\n\n      // Original behavior when renderText is not provided\n      span.innerText = text;\n      return span.clientWidth;\n    },\n    destroy: () => {\n      containerClone.removeChild(span);\n      container.parentElement?.removeChild(containerClone);\n    },\n  };\n};\n\nexport const getMiddleTruncatedString = (\n  text: string,\n  ellipsis: string,\n  container: HTMLElement,\n  renderText?: ((text: string) => React.ReactNode) | null\n): string => {\n  if (!text) return text;\n\n  const { measure: getTextWidth, destroy: destroyMeasure } =\n    measureText(container, renderText);\n\n  const textWidth = getTextWidth(text);\n\n  const containerWidthToCompare = container.clientWidth;\n\n  const initialOffset = Math.floor(\n    (containerWidthToCompare / textWidth) * text.length\n  );\n\n  if (textWidth <= containerWidthToCompare) {\n    destroyMeasure();\n    return text;\n  }\n\n  let offset = initialOffset;\n  const attempts: Record<number, [number, string]> = {};\n  const maxAttempts = 20;\n  const buffer = 4;\n\n  while (Object.values(attempts).length <= maxAttempts) {\n    // If we have already tried this offset, stop\n    if (attempts[offset]) break;\n\n    // If we are at the beginning of the string, just return the ellipsis\n    if (offset <= 1) {\n      attempts[0] = [0, ellipsis];\n      break;\n    }\n\n    const start = text\n      .slice(0, Math.ceil((offset - ellipsis.length) / 2 - 1))\n      .trimEnd();\n    const end = text\n      .slice(Math.floor((offset - ellipsis.length) / 2) - offset)\n      .trimStart();\n    const truncatedStr = start + ellipsis + end;\n    const width = getTextWidth(truncatedStr);\n\n    attempts[offset] = [width, truncatedStr];\n\n    if (width >= containerWidthToCompare) {\n      offset = offset - 2;\n    } else {\n      // If we are close to the container width, stop\n      if (containerWidthToCompare - width < buffer) break;\n      offset = offset + 2;\n    }\n  }\n\n  // Remove the span element used for measuring text\n  destroyMeasure();\n\n  // Find the closest attempt that is smaller than the container width\n  return (\n    Object.values(attempts)\n      .reverse()\n      .find(([width]) => width < containerWidthToCompare)?.[1] ??\n    Object.values(attempts)[0][1]\n  );\n};\n\n// Utility functions for measurements\nexport const createMeasurementClone = (\n  text: string,\n  container: HTMLElement\n) => {\n  const styles = window.getComputedStyle(container);\n  const clone = document.createElement(\"span\");\n  clone.style.visibility = \"hidden\";\n  clone.style.position = \"absolute\";\n  clone.style.width = `${container.clientWidth}px`;\n  clone.style.fontSize = styles.fontSize;\n  clone.style.fontFamily = styles.fontFamily;\n  clone.style.lineHeight = styles.lineHeight;\n  clone.textContent = text;\n  document.body.appendChild(clone);\n  return clone;\n};\n\nexport const checkIfTextTruncated = (\n  text: string,\n  container: HTMLElement,\n  availableHeight?: number\n) => {\n  // Use the new checkOverflow utility for consistency\n  return checkOverflow(container, {\n    type: \"vertical\",\n    availableHeight,\n    text,\n  });\n};\n\nexport const calculateAvailableHeight = (container: HTMLElement) => {\n  const parent = container.parentElement;\n  if (!parent) return 0;\n\n  const parentStyles = window.getComputedStyle(parent);\n  const paddingTop = parseFloat(parentStyles.paddingTop) || 0;\n  const paddingBottom = parseFloat(parentStyles.paddingBottom) || 0;\n  const borderTopWidth = parseFloat(parentStyles.borderTopWidth) || 0;\n  const borderBottomWidth = parseFloat(parentStyles.borderBottomWidth) || 0;\n\n  return (\n    parent.clientHeight -\n    paddingTop -\n    paddingBottom -\n    borderTopWidth -\n    borderBottomWidth\n  );\n};\n\nexport const calculateAvailableWidth = (container: HTMLElement) => {\n  const parent = container.parentElement;\n  if (!parent) return 0;\n\n  const parentStyles = window.getComputedStyle(parent);\n  const paddingLeft = parseFloat(parentStyles.paddingLeft) || 0;\n  const paddingRight = parseFloat(parentStyles.paddingRight) || 0;\n  const borderLeftWidth = parseFloat(parentStyles.borderLeftWidth) || 0;\n  const borderRightWidth = parseFloat(parentStyles.borderRightWidth) || 0;\n\n  return (\n    parent.clientWidth -\n    paddingLeft -\n    paddingRight -\n    borderLeftWidth -\n    borderRightWidth\n  );\n};\n\n// Overflow detection utilities\nexport type OverflowType = \"horizontal\" | \"vertical\" | \"both\";\n\nexport interface OverflowCheckOptions {\n  type?: OverflowType;\n  availableHeight?: number;\n  text?: string;\n}\n\nexport const checkHorizontalOverflow = (container: HTMLElement): boolean => {\n  return container.scrollWidth > container.clientWidth;\n};\n\nexport const checkVerticalOverflow = (\n  container: HTMLElement,\n  availableHeight?: number\n): boolean => {\n  const compareHeight = availableHeight ?? (container.clientHeight || container.offsetHeight);\n  return container.scrollHeight > compareHeight;\n};\n\nexport const checkOverflow = (\n  container: HTMLElement,\n  options: OverflowCheckOptions = {}\n): boolean => {\n  const { type = \"horizontal\", availableHeight, text } = options;\n\n  // If text is provided, use measurement clone for more accurate detection\n  if (text) {\n    const clone = createMeasurementClone(text, container);\n    let isOverflowing = false;\n\n    switch (type) {\n      case \"horizontal\":\n        isOverflowing = clone.scrollWidth > container.clientWidth;\n        break;\n      case \"vertical\":\n        isOverflowing = availableHeight\n          ? clone.scrollHeight > availableHeight\n          : clone.scrollHeight > (container.clientHeight || container.offsetHeight);\n        break;\n      case \"both\":\n        isOverflowing =\n          clone.scrollWidth > container.clientWidth ||\n          (availableHeight\n            ? clone.scrollHeight > availableHeight\n            : clone.scrollHeight > (container.clientHeight || container.offsetHeight));\n        break;\n    }\n\n    document.body.removeChild(clone);\n    return isOverflowing;\n  }\n\n  // Use direct container measurements\n  switch (type) {\n    case \"horizontal\":\n      return checkHorizontalOverflow(container);\n    case \"vertical\":\n      return checkVerticalOverflow(container, availableHeight);\n    case \"both\":\n      return checkHorizontalOverflow(container) || checkVerticalOverflow(container, availableHeight);\n    default:\n      return checkHorizontalOverflow(container);\n  }\n};\n"],"names":["measurementCache","measureText","container","renderText","span","nodeRect","containerClone","text","cacheKey","rendered","React","html","renderToStaticMarkup","width","firstKey","getMiddleTruncatedString","ellipsis","getTextWidth","destroyMeasure","textWidth","containerWidthToCompare","initialOffset","offset","attempts","maxAttempts","buffer","start","end","truncatedStr","createMeasurementClone","styles","clone","calculateAvailableHeight","parent","parentStyles","paddingTop","paddingBottom","borderTopWidth","borderBottomWidth","checkHorizontalOverflow","checkVerticalOverflow","availableHeight","compareHeight","checkOverflow","options","type","isOverflowing"],"mappings":"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"}
+{"version":3,"file":"helpers.js","sources":["../../../src/components/truncate/helpers.ts"],"sourcesContent":["import React from \"react\";\nimport { renderToStaticMarkup } from \"react-dom/server\";\n\n/**\n * Finds the closest parent element that has inline flex display\n * @param element - The starting HTMLElement\n * @returns The closest inline flex parent or null if not found\n */\nexport function findClosestInlineFlexParent(element: HTMLElement): HTMLElement | null {\n  if (!element) return null;\n\n  let currentElement = element.parentElement;\n  let attempts = 0;\n  const maxAttempts = 10;\n\n  while (currentElement && attempts < maxAttempts) {\n    const computedStyle = window.getComputedStyle(currentElement);\n\n    // Check if display is inline-flex\n    if (computedStyle.display === \"inline-flex\") {\n      return currentElement;\n    }\n\n    // Move to the next parent\n    currentElement = currentElement.parentElement;\n    attempts++;\n  }\n\n  return null;\n}\n\nexport function getFlexRemainingSpace(\n  flexContainer: HTMLElement,\n  ignoreElement: HTMLElement | ((e: HTMLElement) => boolean) = null,\n) {\n  const style = window.getComputedStyle(flexContainer);\n  const isRow = style.flexDirection === \"row\" || style.flexDirection === \"row-reverse\";\n  const containerSize = isRow ? flexContainer.offsetWidth : flexContainer.offsetHeight;\n  const gap = parseFloat(style.gap) || 0;\n  const paddingStart = parseFloat(isRow ? style.paddingLeft : style.paddingTop) || 0;\n  const paddingEnd = parseFloat(isRow ? style.paddingRight : style.paddingBottom) || 0;\n\n  let totalItemSize = 0;\n  const items: HTMLElement[] = ([...flexContainer.children] as HTMLElement[]).filter(\n    (child) =>\n      child instanceof HTMLElement &&\n      (typeof ignoreElement === \"function\" ? !ignoreElement(child) : child !== ignoreElement),\n  );\n  for (let i = 0; i < items.length; i++) {\n    const itemStyle = window.getComputedStyle(items[i]);\n    const marginStart = parseFloat(isRow ? itemStyle.marginLeft : itemStyle.marginTop) || 0;\n    const marginEnd = parseFloat(isRow ? itemStyle.marginRight : itemStyle.marginBottom) || 0;\n    totalItemSize +=\n      (isRow ? items[i].offsetWidth : items[i].offsetHeight) + marginStart + marginEnd;\n  }\n\n  // Add gaps (n-1 gaps for n items)\n  totalItemSize += gap * (items.length - 1);\n\n  // Calculate remaining space\n  const remainingSpace = containerSize - totalItemSize - paddingStart - paddingEnd;\n  return Math.max(0, remainingSpace);\n}\n\n// ---------------------------------------------------------------------------\n// Canvas-based text measurement — no DOM mutations, no forced reflows.\n// A single CanvasRenderingContext2D is created once and reused for all\n// measurements across the lifetime of the page.\n// ---------------------------------------------------------------------------\n\nlet _cachedCanvasCtx: CanvasRenderingContext2D | null = null;\n\n/**\n * Returns the singleton canvas 2D context used for text measurement.\n * The canvas is created lazily on first call and reused thereafter.\n */\nfunction getCanvasCtx(): CanvasRenderingContext2D {\n  if (!_cachedCanvasCtx) {\n    const canvas = document.createElement(\"canvas\");\n    const ctx = canvas.getContext(\"2d\");\n    if (!ctx) throw new Error(\"Failed to get 2d context from canvas\");\n    _cachedCanvasCtx = ctx;\n  }\n  return _cachedCanvasCtx;\n}\n\n/**\n * Measures the rendered pixel width of a string using the canvas API.\n * This avoids any DOM layout or reflow cost.\n *\n * @param text - The string to measure.\n * @param font - A CSS font shorthand string (e.g. \"normal 400 14px Inter, sans-serif\").\n */\nfunction measureTextWidth(\n  text: string,\n  font: string,\n  letterSpacing: string,\n  wordSpacing: string,\n): number {\n  const ctx = getCanvasCtx();\n  ctx.font = font;\n  ctx.letterSpacing = letterSpacing;\n  ctx.wordSpacing = wordSpacing;\n  return ctx.measureText(text).width;\n}\n\n/**\n * Builds a CSS font shorthand string from an element's computed style,\n * matching the font the browser will use to render text in that element.\n */\nfunction getComputedTextStyle(el: HTMLElement): {\n  font: string;\n  letterSpacing: string;\n  wordSpacing: string;\n} {\n  const cs = window.getComputedStyle(el);\n  return {\n    font: `${cs.fontStyle} ${cs.fontVariant} ${cs.fontWeight} ${cs.fontSize} ${cs.fontFamily}`,\n    letterSpacing: cs.letterSpacing,\n    wordSpacing: cs.wordSpacing,\n  };\n}\n\nfunction createRenderedTextMeasurer(\n  container: HTMLElement,\n  renderText: (text: string) => React.ReactNode,\n) {\n  const span = document.createElement(\"span\");\n  span.style.opacity = \"0\";\n  span.style.position = \"absolute\";\n  span.style.top = \"-1000px\";\n  span.style.left = \"-1000px\";\n  span.style.whiteSpace = \"nowrap\";\n  span.style.pointerEvents = \"none\";\n\n  const nodeRect = container.getBoundingClientRect();\n  const containerClone = container.cloneNode(true) as HTMLElement;\n  containerClone.style.maxWidth = `${nodeRect.width}px`;\n  containerClone.style.position = \"absolute\";\n  containerClone.style.pointerEvents = \"none\";\n  containerClone.style.top = \"-1000px\";\n  containerClone.style.left = \"-1000px\";\n  containerClone.style.zIndex = \"-1\";\n\n  container.parentElement?.appendChild(containerClone);\n  containerClone.appendChild(span);\n\n  return {\n    measure: (value: string) => {\n      span.innerHTML = \"\";\n\n      const rendered = renderText(value);\n      if (typeof rendered === \"string\" || typeof rendered === \"number\") {\n        span.textContent = String(rendered);\n      } else if (React.isValidElement(rendered)) {\n        try {\n          span.innerHTML = renderToStaticMarkup(rendered);\n        } catch (_error) {\n          span.textContent = value;\n        }\n      } else {\n        span.textContent = value;\n      }\n\n      return span.clientWidth;\n    },\n    destroy: () => {\n      span.remove();\n      containerClone.remove();\n    },\n  };\n}\n\nfunction getMiddleTruncatedStringWithMeasurer(\n  text: string,\n  ellipsis: string,\n  containerW: number,\n  measure: (value: string) => number,\n): string {\n  if (measure(text) <= containerW) return text;\n\n  const getCandidate = (charsToKeep: number) => {\n    if (charsToKeep === 0) return ellipsis;\n\n    const startLen = Math.floor(charsToKeep / 2);\n    const endLen = Math.ceil(charsToKeep / 2);\n\n    return (\n      text.slice(0, startLen).trimEnd() + ellipsis + text.slice(text.length - endLen).trimStart()\n    );\n  };\n\n  let lo = 0;\n  let hi = text.length;\n\n  while (lo < hi) {\n    const mid = Math.ceil((lo + hi) / 2);\n    const truncatedText = getCandidate(mid);\n\n    if (measure(truncatedText) <= containerW) lo = mid;\n    else hi = mid - 1;\n  }\n\n  return getCandidate(lo);\n}\n\n/**\n * Computes a middle-truncated version of `text` that fits within\n * `container.clientWidth` pixels.\n *\n * Uses a binary search over the total number of characters to keep.\n * Plain text uses canvas measurement; custom `renderText` falls back to DOM\n * measurement because styled markup can change the rendered width.\n *\n * @param text       - The original string.\n * @param ellipsis   - Separator to insert at the truncation point (e.g. \"…\").\n * @param container  - The element whose `clientWidth` sets the budget and\n *                     whose computed font is used for measurement.\n * @param renderText - Optional custom renderer used for styled text measurement.\n * @returns The original string if it fits, or a middle-truncated string.\n */\nexport const getMiddleTruncatedString = (\n  text: string,\n  ellipsis: string,\n  container: HTMLElement,\n  renderText?: ((text: string) => React.ReactNode) | null,\n): string => {\n  if (!text) return text;\n\n  const { font, letterSpacing, wordSpacing } = getComputedTextStyle(container);\n  const containerW = container.clientWidth;\n\n  if (renderText) {\n    const { measure, destroy } = createRenderedTextMeasurer(container, renderText);\n\n    try {\n      return getMiddleTruncatedStringWithMeasurer(text, ellipsis, containerW, measure);\n    } finally {\n      destroy();\n    }\n  }\n\n  return getMiddleTruncatedStringWithMeasurer(text, ellipsis, containerW, (value) =>\n    measureTextWidth(value, font, letterSpacing, wordSpacing),\n  );\n};\n\n// Utility functions for measurements\nexport const createMeasurementClone = (text: string, container: HTMLElement) => {\n  const styles = window.getComputedStyle(container);\n  const clone = document.createElement(\"span\");\n  clone.style.visibility = \"hidden\";\n  clone.style.position = \"absolute\";\n  clone.style.width = `${container.clientWidth}px`;\n  clone.style.fontSize = styles.fontSize;\n  clone.style.fontFamily = styles.fontFamily;\n  clone.style.lineHeight = styles.lineHeight;\n  clone.textContent = text;\n  document.body.appendChild(clone);\n  return clone;\n};\n\nexport const checkIfTextTruncated = (\n  text: string,\n  container: HTMLElement,\n  availableHeight?: number,\n) => {\n  // Use the new checkOverflow utility for consistency\n  return checkOverflow(container, {\n    type: \"vertical\",\n    availableHeight,\n    text,\n  });\n};\n\nexport const calculateAvailableHeight = (container: HTMLElement) => {\n  const parent = container.parentElement;\n  if (!parent) return 0;\n\n  const parentStyles = window.getComputedStyle(parent);\n  const paddingTop = parseFloat(parentStyles.paddingTop) || 0;\n  const paddingBottom = parseFloat(parentStyles.paddingBottom) || 0;\n  const borderTopWidth = parseFloat(parentStyles.borderTopWidth) || 0;\n  const borderBottomWidth = parseFloat(parentStyles.borderBottomWidth) || 0;\n\n  return parent.clientHeight - paddingTop - paddingBottom - borderTopWidth - borderBottomWidth;\n};\n\nexport const calculateAvailableWidth = (container: HTMLElement) => {\n  const parent = container.parentElement;\n  if (!parent) return 0;\n\n  const parentStyles = window.getComputedStyle(parent);\n  const paddingLeft = parseFloat(parentStyles.paddingLeft) || 0;\n  const paddingRight = parseFloat(parentStyles.paddingRight) || 0;\n  const borderLeftWidth = parseFloat(parentStyles.borderLeftWidth) || 0;\n  const borderRightWidth = parseFloat(parentStyles.borderRightWidth) || 0;\n\n  return parent.clientWidth - paddingLeft - paddingRight - borderLeftWidth - borderRightWidth;\n};\n\n// Overflow detection utilities\nexport type OverflowType = \"horizontal\" | \"vertical\" | \"both\";\n\nexport interface OverflowCheckOptions {\n  type?: OverflowType;\n  availableHeight?: number;\n  text?: string;\n}\n\nexport const checkHorizontalOverflow = (container: HTMLElement): boolean => {\n  return container.scrollWidth > container.clientWidth;\n};\n\nexport const checkVerticalOverflow = (\n  container: HTMLElement,\n  availableHeight?: number,\n): boolean => {\n  const compareHeight = availableHeight ?? (container.clientHeight || container.offsetHeight);\n  return container.scrollHeight > compareHeight;\n};\n\nexport const checkOverflow = (\n  container: HTMLElement,\n  options: OverflowCheckOptions = {},\n): boolean => {\n  const { type = \"horizontal\", availableHeight, text } = options;\n\n  // If text is provided, use measurement clone for more accurate detection\n  if (text) {\n    const clone = createMeasurementClone(text, container);\n    let isOverflowing = false;\n\n    switch (type) {\n      case \"horizontal\":\n        isOverflowing = clone.scrollWidth > container.clientWidth;\n        break;\n      case \"vertical\":\n        isOverflowing = availableHeight\n          ? clone.scrollHeight > availableHeight\n          : clone.scrollHeight > (container.clientHeight || container.offsetHeight);\n        break;\n      case \"both\":\n        isOverflowing =\n          clone.scrollWidth > container.clientWidth ||\n          (availableHeight\n            ? clone.scrollHeight > availableHeight\n            : clone.scrollHeight > (container.clientHeight || container.offsetHeight));\n        break;\n    }\n\n    document.body.removeChild(clone);\n    return isOverflowing;\n  }\n\n  // Use direct container measurements\n  switch (type) {\n    case \"horizontal\":\n      return checkHorizontalOverflow(container);\n    case \"vertical\":\n      return checkVerticalOverflow(container, availableHeight);\n    case \"both\":\n      return (\n        checkHorizontalOverflow(container) || checkVerticalOverflow(container, availableHeight)\n      );\n    default:\n      return checkHorizontalOverflow(container);\n  }\n};\n"],"names":["_cachedCanvasCtx","getCanvasCtx","ctx","measureTextWidth","text","font","letterSpacing","wordSpacing","getComputedTextStyle","el","cs","createRenderedTextMeasurer","container","renderText","span","nodeRect","containerClone","value","rendered","React","renderToStaticMarkup","getMiddleTruncatedStringWithMeasurer","ellipsis","containerW","measure","getCandidate","charsToKeep","startLen","endLen","lo","hi","mid","truncatedText","getMiddleTruncatedString","destroy","createMeasurementClone","styles","clone","calculateAvailableHeight","parent","parentStyles","paddingTop","paddingBottom","borderTopWidth","borderBottomWidth","checkHorizontalOverflow","checkVerticalOverflow","availableHeight","compareHeight","checkOverflow","options","type","isOverflowing"],"mappings":";;AAsEA,IAAIA,IAAoD;AAMxD,SAASC,IAAyC;AAChD,MAAI,CAACD,GAAkB;AAErB,UAAME,IADS,SAAS,cAAc,QAAQ,EAC3B,WAAW,IAAI;AAClC,QAAI,CAACA,EAAK,OAAM,IAAI,MAAM,sCAAsC;AAChE,IAAAF,IAAmBE;AAAA,EACrB;AACA,SAAOF;AACT;AASA,SAASG,EACPC,GACAC,GACAC,GACAC,GACQ;AACR,QAAML,IAAMD,EAAA;AACZ,SAAAC,EAAI,OAAOG,GACXH,EAAI,gBAAgBI,GACpBJ,EAAI,cAAcK,GACXL,EAAI,YAAYE,CAAI,EAAE;AAC/B;AAMA,SAASI,EAAqBC,GAI5B;AACA,QAAMC,IAAK,OAAO,iBAAiBD,CAAE;AACrC,SAAO;AAAA,IACL,MAAM,GAAGC,EAAG,SAAS,IAAIA,EAAG,WAAW,IAAIA,EAAG,UAAU,IAAIA,EAAG,QAAQ,IAAIA,EAAG,UAAU;AAAA,IACxF,eAAeA,EAAG;AAAA,IAClB,aAAaA,EAAG;AAAA,EAAA;AAEpB;AAEA,SAASC,EACPC,GACAC,GACA;AACA,QAAMC,IAAO,SAAS,cAAc,MAAM;AAC1C,EAAAA,EAAK,MAAM,UAAU,KACrBA,EAAK,MAAM,WAAW,YACtBA,EAAK,MAAM,MAAM,WACjBA,EAAK,MAAM,OAAO,WAClBA,EAAK,MAAM,aAAa,UACxBA,EAAK,MAAM,gBAAgB;AAE3B,QAAMC,IAAWH,EAAU,sBAAA,GACrBI,IAAiBJ,EAAU,UAAU,EAAI;AAC/C,SAAAI,EAAe,MAAM,WAAW,GAAGD,EAAS,KAAK,MACjDC,EAAe,MAAM,WAAW,YAChCA,EAAe,MAAM,gBAAgB,QACrCA,EAAe,MAAM,MAAM,WAC3BA,EAAe,MAAM,OAAO,WAC5BA,EAAe,MAAM,SAAS,MAE9BJ,EAAU,eAAe,YAAYI,CAAc,GACnDA,EAAe,YAAYF,CAAI,GAExB;AAAA,IACL,SAAS,CAACG,MAAkB;AAC1B,MAAAH,EAAK,YAAY;AAEjB,YAAMI,IAAWL,EAAWI,CAAK;AACjC,UAAI,OAAOC,KAAa,YAAY,OAAOA,KAAa;AACtD,QAAAJ,EAAK,cAAc,OAAOI,CAAQ;AAAA,eACzBC,EAAM,eAAeD,CAAQ;AACtC,YAAI;AACF,UAAAJ,EAAK,YAAYM,EAAqBF,CAAQ;AAAA,QAChD,QAAiB;AACf,UAAAJ,EAAK,cAAcG;AAAA,QACrB;AAAA;AAEA,QAAAH,EAAK,cAAcG;AAGrB,aAAOH,EAAK;AAAA,IACd;AAAA,IACA,SAAS,MAAM;AACb,MAAAA,EAAK,OAAA,GACLE,EAAe,OAAA;AAAA,IACjB;AAAA,EAAA;AAEJ;AAEA,SAASK,EACPjB,GACAkB,GACAC,GACAC,GACQ;AACR,MAAIA,EAAQpB,CAAI,KAAKmB,EAAY,QAAOnB;AAExC,QAAMqB,IAAe,CAACC,MAAwB;AAC5C,QAAIA,MAAgB,EAAG,QAAOJ;AAE9B,UAAMK,IAAW,KAAK,MAAMD,IAAc,CAAC,GACrCE,IAAS,KAAK,KAAKF,IAAc,CAAC;AAExC,WACEtB,EAAK,MAAM,GAAGuB,CAAQ,EAAE,QAAA,IAAYL,IAAWlB,EAAK,MAAMA,EAAK,SAASwB,CAAM,EAAE,UAAA;AAAA,EAEpF;AAEA,MAAIC,IAAK,GACLC,IAAK1B,EAAK;AAEd,SAAOyB,IAAKC,KAAI;AACd,UAAMC,IAAM,KAAK,MAAMF,IAAKC,KAAM,CAAC,GAC7BE,IAAgBP,EAAaM,CAAG;AAEtC,IAAIP,EAAQQ,CAAa,KAAKT,IAAYM,IAAKE,QACrCA,IAAM;AAAA,EAClB;AAEA,SAAON,EAAaI,CAAE;AACxB;AAiBO,MAAMI,IAA2B,CACtC7B,GACAkB,GACAV,GACAC,MACW;AACX,MAAI,CAACT,EAAM,QAAOA;AAElB,QAAM,EAAE,MAAAC,GAAM,eAAAC,GAAe,aAAAC,EAAA,IAAgBC,EAAqBI,CAAS,GACrEW,IAAaX,EAAU;AAE7B,MAAIC,GAAY;AACd,UAAM,EAAE,SAAAW,GAAS,SAAAU,EAAA,IAAYvB,EAA2BC,GAAWC,CAAU;AAE7E,QAAI;AACF,aAAOQ,EAAqCjB,GAAMkB,GAAUC,GAAYC,CAAO;AAAA,IACjF,UAAA;AACE,MAAAU,EAAA;AAAA,IACF;AAAA,EACF;AAEA,SAAOb;AAAA,IAAqCjB;AAAA,IAAMkB;AAAA,IAAUC;AAAA,IAAY,CAACN,MACvEd,EAAiBc,GAAOZ,GAAMC,GAAeC,CAAW;AAAA,EAAA;AAE5D,GAGa4B,IAAyB,CAAC/B,GAAcQ,MAA2B;AAC9E,QAAMwB,IAAS,OAAO,iBAAiBxB,CAAS,GAC1CyB,IAAQ,SAAS,cAAc,MAAM;AAC3C,SAAAA,EAAM,MAAM,aAAa,UACzBA,EAAM,MAAM,WAAW,YACvBA,EAAM,MAAM,QAAQ,GAAGzB,EAAU,WAAW,MAC5CyB,EAAM,MAAM,WAAWD,EAAO,UAC9BC,EAAM,MAAM,aAAaD,EAAO,YAChCC,EAAM,MAAM,aAAaD,EAAO,YAChCC,EAAM,cAAcjC,GACpB,SAAS,KAAK,YAAYiC,CAAK,GACxBA;AACT,GAeaC,IAA2B,CAAC1B,MAA2B;AAClE,QAAM2B,IAAS3B,EAAU;AACzB,MAAI,CAAC2B,EAAQ,QAAO;AAEpB,QAAMC,IAAe,OAAO,iBAAiBD,CAAM,GAC7CE,IAAa,WAAWD,EAAa,UAAU,KAAK,GACpDE,IAAgB,WAAWF,EAAa,aAAa,KAAK,GAC1DG,IAAiB,WAAWH,EAAa,cAAc,KAAK,GAC5DI,IAAoB,WAAWJ,EAAa,iBAAiB,KAAK;AAExE,SAAOD,EAAO,eAAeE,IAAaC,IAAgBC,IAAiBC;AAC7E,GAwBaC,IAA0B,CAACjC,MAC/BA,EAAU,cAAcA,EAAU,aAG9BkC,IAAwB,CACnClC,GACAmC,MACY;AACZ,QAAMC,IAAgBD,MAAoBnC,EAAU,gBAAgBA,EAAU;AAC9E,SAAOA,EAAU,eAAeoC;AAClC,GAEaC,IAAgB,CAC3BrC,GACAsC,IAAgC,OACpB;AACZ,QAAM,EAAE,MAAAC,IAAO,cAAc,iBAAAJ,GAAiB,MAAA3C,MAAS8C;AAGvD,MAAI9C,GAAM;AACR,UAAMiC,IAAQF,EAAuB/B,GAAMQ,CAAS;AACpD,QAAIwC,IAAgB;AAEpB,YAAQD,GAAA;AAAA,MACN,KAAK;AACH,QAAAC,IAAgBf,EAAM,cAAczB,EAAU;AAC9C;AAAA,MACF,KAAK;AACH,QAAAwC,IAAgBL,IACZV,EAAM,eAAeU,IACrBV,EAAM,gBAAgBzB,EAAU,gBAAgBA,EAAU;AAC9D;AAAA,MACF,KAAK;AACH,QAAAwC,IACEf,EAAM,cAAczB,EAAU,gBAC7BmC,IACGV,EAAM,eAAeU,IACrBV,EAAM,gBAAgBzB,EAAU,gBAAgBA,EAAU;AAChE;AAAA,IAAA;AAGJ,oBAAS,KAAK,YAAYyB,CAAK,GACxBe;AAAA,EACT;AAGA,UAAQD,GAAA;AAAA,IACN,KAAK;AACH,aAAON,EAAwBjC,CAAS;AAAA,IAC1C,KAAK;AACH,aAAOkC,EAAsBlC,GAAWmC,CAAe;AAAA,IACzD,KAAK;AACH,aACEF,EAAwBjC,CAAS,KAAKkC,EAAsBlC,GAAWmC,CAAe;AAAA,IAE1F;AACE,aAAOF,EAAwBjC,CAAS;AAAA,EAAA;AAE9C;"}