carbon-components-svelte/src/CopyButton/CopyButton.svelte.d.ts

Svelte implementation of the Carbon Design System

import { SvelteComponentTyped } from "svelte";
import type { SvelteHTMLElements } from "svelte/elements";

type $RestProps = SvelteHTMLElements["button"];

type $Props<Icon = any> = {
  /**
   * Set the feedback text shown after clicking the button
   * @default "Copied!"
   */
  feedback?: string;

  /**
   * Set the timeout duration (ms) to display feedback text
   * @default 2000
   */
  feedbackTimeout?: number;

  /**
   * Specify an icon to render during the feedback window (for example, after copying).
   * When unset, the copy icon is always shown.
   * @default undefined
   */
  feedbackIcon?: Icon;

  /**
   * Set the title and ARIA label for the copy button
   * @default "Copy to clipboard"
   */
  iconDescription?: string;

  /**
   * Specify the kind of copy button.
   * Use `"ghost"` to match a `Button` with `kind="ghost"`.
   * @default "primary"
   */
  kind?: "primary" | "ghost";

  /**
   * Specify the size of the copy button.
   * `"md"` keeps Carbon's native 2.5rem square; the other sizes match `Button`.
   * @default "md"
   */
  size?: "sm" | "md" | "lg" | "xl";

  /**
   * Specify the text to copy.
   * @default undefined
   */
  text?: string;

  /**
   * Override the default copy behavior (navigator.clipboard.writeText).
   */
  copy?: (text: string) => void | Promise<void>;

  /**
   * Set how the "Copied!" feedback tooltip is rendered.
   * By default, it is rendered in a portal so it shares the same surface as the
   * hover tooltip (the text swaps in place) and is never clipped by an
   * `overflow: hidden` container. Set to `false` to use Carbon's inline feedback
   * caret instead; a non-default `tooltipPosition`/`tooltipAlignment` still
   * portals because the inline caret only supports the default placement.
   * @default undefined
   */
  portalTooltip?: boolean | undefined;

  /**
   * Set the position of the tooltip relative to the button.
   * @default "bottom"
   */
  tooltipPosition?: "top" | "right" | "bottom" | "left";

  /**
   * Set the alignment of the tooltip relative to the button.
   * @default "center"
   */
  tooltipAlignment?: "start" | "center" | "end";

  /**
   * Obtain a reference to the underlying button element.
   * @default null
   */
  ref?: null | HTMLButtonElement;

  [key: `data-${string}`]: unknown;
};

export type CopyButtonProps<Icon = any> = Omit<$RestProps, keyof $Props<Icon>> & $Props<Icon>;

export default class CopyButton<Icon = any> extends SvelteComponentTyped<
  CopyButtonProps<Icon>,
  {
    animationend: WindowEventMap["animationend"];
    blur: WindowEventMap["blur"];
    click: WindowEventMap["click"];
    copy: CustomEvent<null>;
    "copy:error": CustomEvent<any>;
    focus: WindowEventMap["focus"];
    mouseenter: WindowEventMap["mouseenter"];
    mouseleave: WindowEventMap["mouseleave"];
  },
  Record<string, never>
> {}