@cube-dev/ui-kit 0.0.0-canary-5bbff30 → 0.0.0-canary-604857b

package/dist/components/fields/TextInput/useAutoSizeTextArea.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useAutoSizeTextArea.js","names":[],"sources":["../../../../src/components/fields/TextInput/useAutoSizeTextArea.ts"],"sourcesContent":["import { RefObject, useEffect, useLayoutEffect, useRef } from 'react';\n\nimport { useEvent } from '../../../_internal/index';\n\n/**\n * Computed properties that decide where text wraps and how tall a line box is.\n * Copied onto the mirror so it wraps exactly like the live textarea.\n */\nconst MIRROR_TYPOGRAPHY_PROPS = [\n  'direction',\n  'fontFamily',\n  'fontFeatureSettings',\n  'fontKerning',\n  'fontSize',\n  'fontStretch',\n  'fontStyle',\n  'fontVariant',\n  'fontVariationSettings',\n  'fontWeight',\n  'letterSpacing',\n  'lineHeight',\n  'overflowWrap',\n  'tabSize',\n  'textIndent',\n  'textTransform',\n  'whiteSpace',\n  'wordBreak',\n  'wordSpacing',\n] as const;\n\nconst FALLBACK_LINE_HEIGHT = 20;\n\n/**\n * An off-screen textarea used to measure how tall the content wants to be.\n *\n * It carries no padding and no border, and its width is set to the live\n * element's *content* width, so `scrollHeight` is the content height and\n * nothing else. `height: 0` is what makes shrinking measurable: a textarea's\n * `scrollHeight` never drops below its own client height, so measuring the live\n * element can only ever report \"at least what it already is\".\n */\nfunction createMirror(): HTMLTextAreaElement {\n  const mirror = document.createElement('textarea');\n\n  mirror.setAttribute('aria-hidden', 'true');\n  mirror.setAttribute('tabindex', '-1');\n  mirror.readOnly = true;\n  mirror.rows = 1;\n\n  Object.assign(mirror.style, {\n    position: 'absolute',\n    top: '0',\n    left: '-9999px',\n    boxSizing: 'content-box',\n    margin: '0',\n    padding: '0',\n    border: '0',\n    height: '0',\n    minHeight: '0',\n    maxHeight: 'none',\n    overflow: 'hidden',\n    resize: 'none',\n    visibility: 'hidden',\n    pointerEvents: 'none',\n  });\n\n  return mirror;\n}\n\n/** The width the text actually has to wrap in, scrollbar and padding removed. */\nfunction getContentWidth(\n  textarea: HTMLTextAreaElement,\n  style: CSSStyleDeclaration,\n): number {\n  const paddingLeft = parseFloat(style.paddingLeft) || 0;\n  const paddingRight = parseFloat(style.paddingRight) || 0;\n  const borderLeft = parseFloat(style.borderLeftWidth) || 0;\n  const borderRight = parseFloat(style.borderRightWidth) || 0;\n  // A classic (space-taking) scrollbar narrows the text; overlay scrollbars\n  // report 0 here.\n  const scrollbar = Math.max(\n    0,\n    Math.round(\n      textarea.offsetWidth - textarea.clientWidth - borderLeft - borderRight,\n    ),\n  );\n\n  return Math.max(\n    0,\n    textarea.getBoundingClientRect().width -\n      borderLeft -\n      borderRight -\n      scrollbar -\n      paddingLeft -\n      paddingRight,\n  );\n}\n\n/** `line-height: normal` has no px value to read, so measure one line instead. */\nfunction getLineHeight(\n  style: CSSStyleDeclaration,\n  mirror: HTMLTextAreaElement,\n): number {\n  const parsed = parseFloat(style.lineHeight);\n\n  if (Number.isFinite(parsed) && parsed > 0) return parsed;\n\n  const previousValue = mirror.value;\n\n  mirror.value = 'x';\n\n  const measured = mirror.scrollHeight;\n\n  mirror.value = previousValue;\n\n  return measured > 0 ? measured : FALLBACK_LINE_HEIGHT;\n}\n\nexport interface AutoSizeTextAreaOptions {\n  inputRef: RefObject<HTMLTextAreaElement | null>;\n  /** Whether the textarea resizes to fit its content. */\n  autoSize: boolean;\n  /** Minimum number of visible rows. */\n  rows: number;\n  /** Maximum number of visible rows. */\n  maxRows: number;\n  /** The rendered value. A change re-measures, so buffered drafts count too. */\n  value: unknown;\n}\n\n/**\n * Keeps an `autoSize` textarea's height in step with its content, and returns\n * the `adjustHeight` callback so a change handler can resize in the same tick\n * as the keystroke.\n *\n * The height is derived from an off-screen mirror rather than from the live\n * element. Measuring the live element — `height: auto`, read `scrollHeight`,\n * restore — re-lays out every ancestor mid-keystroke: in a chat-style column\n * the input box collapses to one row and the scroll viewport grows by the\n * difference, and the browser's scroll anchoring has to undo that. It does so\n * imperfectly, which is visible as the whole conversation bouncing by a pixel\n * on every keystroke (CUB-4042). Measuring off-screen touches no ancestor, so\n * there is nothing to undo.\n */\nexport function useAutoSizeTextArea({\n  inputRef,\n  autoSize,\n  rows,\n  maxRows,\n  value,\n}: AutoSizeTextAreaOptions) {\n  const mirrorRef = useRef<HTMLTextAreaElement | null>(null);\n\n  const adjustHeight = useEvent(() => {\n    const textarea = inputRef.current;\n\n    if (!textarea || !autoSize) return;\n\n    let mirror = mirrorRef.current;\n\n    if (!mirror) {\n      mirror = createMirror();\n      mirrorRef.current = mirror;\n      document.body.appendChild(mirror);\n    }\n\n    const style = getComputedStyle(textarea);\n    const contentWidth = getContentWidth(textarea, style);\n\n    // Nothing to wrap into: the field is display:none, or has not been laid out\n    // yet. Measuring at zero width would wrap every character onto its own line\n    // and pin the height at `maxRows`; keep the current height instead and wait\n    // for the ResizeObserver to report a real one.\n    if (contentWidth === 0) return;\n\n    for (const prop of MIRROR_TYPOGRAPHY_PROPS) {\n      mirror.style[prop] = style[prop];\n    }\n\n    mirror.style.width = `${contentWidth}px`;\n    mirror.value = textarea.value;\n\n    const lineHeight = getLineHeight(style, mirror);\n    // A textarea lays every line out at `line-height`, so the content height is\n    // a whole number of lines — `round` keeps a fractional line height (a zoomed\n    // page, a percentage preset) from adding a phantom row.\n    const contentRows = Math.max(\n      1,\n      Math.round(mirror.scrollHeight / lineHeight),\n    );\n    const targetRows = Math.max(Math.min(contentRows, maxRows), rows);\n\n    const paddingTop = parseFloat(style.paddingTop) || 0;\n    const paddingBottom = parseFloat(style.paddingBottom) || 0;\n    const borderTop = parseFloat(style.borderTopWidth) || 0;\n    const borderBottom = parseFloat(style.borderBottomWidth) || 0;\n    // `height` covers padding and border under `border-box` only.\n    const box =\n      style.boxSizing === 'border-box'\n        ? paddingTop + paddingBottom + borderTop + borderBottom\n        : 0;\n\n    const nextHeight = `${targetRows * lineHeight + box}px`;\n\n    // Writing an unchanged height would wake the ResizeObserver below for\n    // nothing.\n    if (textarea.style.height !== nextHeight) {\n      textarea.style.height = nextHeight;\n    }\n  });\n\n  const useEnvironmentalEffect =\n    typeof window !== 'undefined' ? useLayoutEffect : useEffect;\n\n  // Re-measure on element resize as that can affect wrapping.\n  useEnvironmentalEffect(() => {\n    if (!autoSize || !inputRef.current) return;\n\n    adjustHeight();\n\n    const resizeObserver = new ResizeObserver(adjustHeight);\n\n    resizeObserver.observe(inputRef.current);\n\n    return () => resizeObserver.disconnect();\n  }, [autoSize, inputRef.current]);\n\n  // Adjust when the value changes programmatically (controlled mode).\n  useEnvironmentalEffect(() => {\n    if (autoSize && inputRef.current) {\n      adjustHeight();\n    }\n  }, [value]);\n\n  useEffect(\n    () => () => {\n      mirrorRef.current?.remove();\n      mirrorRef.current = null;\n    },\n    [],\n  );\n\n  return adjustHeight;\n}\n"],"mappings":"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"}