CopyLine

Контейнер <div> с однострочным truncate-контентом слева и inline-кнопкой копирования справа. Кликабельна вся строка целиком — клик копирует valueToCopy (по умолчанию равно content, если он string или number). Внутри использует TruncateString для усечения длинных значений.

Демо

<CopyLine copyButtonHideStrategy="hover" content="example-copy-value-12345" valueToCopy="example-value" />

Когда использовать

• Карточки ресурсов: ID, ARN, IP, URL, токены — где значение надо одновременно показать и дать скопировать.
• Detail view’ы и таблицы с длинными identifier-ами, не помещающимися в одну строку без усечения.
• Если нужна только кнопка без контента:
  • берите CopyButton.

Анатомия

CopyButtonHideStrategy (default hover)

Управляет видимостью встроенной кнопки копирования. Значение прокидывается в DOM как data-copy-button-hide-strategy на корневом элементе:

• hover — кнопка показывается только при наведении на строку.
• never — кнопка видна всегда.

Content

Слот content принимает ReactNode:

• string или number — автоматически оборачивается в TruncateString (одна строка, троеточие при переполнении) и используется как valueToCopy по умолчанию.
• Произвольный JSX — truncate не применяется, valueToCopy нужно задавать явно.

Установка

pnpm add @cloud-ru/ds-uikit-product-copy

import { CopyLine } from '@cloud-ru/ds-uikit-product-copy'

Примеры использования

Базовый случай

import { CopyLine } from '@cloud-ru/ds-uikit-product-copy';

export function CopyLineBasic() {
  return <CopyLine content='550e8400-e29b-41d4-a716-446655440000' />;
}

Длинный контент с truncate

import { CopyLine } from '@cloud-ru/ds-uikit-product-copy';

export function CopyLineTruncated() {
  return (
    <div style={{ width: 280 }}>
      <CopyLine content='very-long-identifier-1234567890-abcdefghijklmnop' />
    </div>
  );
}

Кнопка всегда видна

import { CopyLine } from '@cloud-ru/ds-uikit-product-copy';

export function CopyLineAlwaysVisible() {
  return <CopyLine content='persistent-token-9000' copyButtonHideStrategy='never' />;
}

Кастомное значение для копирования

import { CopyLine } from '@cloud-ru/ds-uikit-product-copy';

export function CopyLineCustomValue() {
  return <CopyLine content='IP: 192.168.0.1 (production)' valueToCopy='192.168.0.1' />;
}

JSX-контент

import { CopyLine } from '@cloud-ru/ds-uikit-product-copy';

export function CopyLineRichContent() {
  return (
    <CopyLine
      content={
        <span>
          <strong>Token:</strong> <code>sk-prod-9000</code>
        </span>
      }
      valueToCopy='sk-prod-9000'
    />
  );
}

Props

Types

CopyLineProps

Unions

CopyButtonHideStrategy

Storybook

Figma

Смотри также

• CopyButton — только кнопка, без контента.
• TruncateString — нижележащий примитив усечения.