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

Svelte implementation of the Carbon Design System

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

export type TagSetItem = {
  id: string;
  node: HTMLElement;
  label: string;
  type?: string;
  size: string;
  disabled: boolean;
  filter: boolean;
};

export type CarbonTagSetContext = {
  items: import("svelte/store").Writable<TagSetItem[]>;
  overflowIds: import("svelte/store").Writable<Set<string>>;
  size: any;
  register: (item: any) => any;
  unregister: (id: any) => any;
  update: (id: any, patch: any) => any;
  notifyClose: (id: any) => any;
};

type $RestProps = SvelteHTMLElements["div"];

type $Props = {
  /**
   * Horizontal alignment of the visible tag row.
   * @default "start"
   */
  align?: "start" | "center" | "end";

  /**
   * Alignment of the overflow tooltip relative to the "+N" indicator.
   * @default "center"
   */
  overflowAlign?: "start" | "center" | "end";

  /**
   * Direction of the overflow tooltip relative to the "+N" indicator.
   * @default "bottom"
   */
  overflowDirection?: "top" | "bottom";

  /**
   * Hard cap on visible tags regardless of available space.
   * @default undefined
   */
  maxVisible?: number | undefined;

  /**
   * Set to `true` to wrap all tags instead of collapsing to overflow.
   * @default false
   */
  multiline?: boolean;

  /**
   * Subtracted from the measured available width before fitting tags.
   * @default 0
   */
  measurementOffset?: number;

  /**
   * Custom element to measure instead of `TagSet`'s own wrapper.
   * @default undefined
   */
  containingElement?: HTMLElement | undefined;

  /**
   * Size of every tag, including the "+N" overflow indicator. Applies to
   * slotted `Tag` children without their own `size`.
   * @default undefined
   */
  size?: "sm" | "default" | "lg";

  /**
   * Spacing between tags. Accepts a Carbon layout scale (`0`–`13`) or a CSS
   * length string.
   * @default 3
   */
  gap?: import("../Stack/Stack.svelte").StackScale | string;

  /** Override the "+N" indicator's tooltip content. Defaults to a comma-separated list of the hidden labels. */
  overflowTooltip?: (this: void, ...args: [{
        tags: TagSetItem[];
        count: number
      }]) => void;

  children?: (this: void) => void;

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

export type TagSetProps = Omit<$RestProps, keyof $Props> & $Props;

export default class TagSet extends SvelteComponentTyped<
  TagSetProps,
  {
    /** User clicks the "+N" indicator. */
    "click:overflow": CustomEvent<{ count: number }>;
    /** User clicks the close icon on a dismissible (`filter`) tag. */
    "close:tag": CustomEvent<{
        tag: TagSetItem;
        index: number
      }>;
    /** Dispatched when the number of overflowing tags changes, from a resize, a slotted-children change, or a `maxVisible` change. */
    "overflow:change": CustomEvent<{ count: number }>;
  },
  {
    default: Record<string, never>;
    /** Override the "+N" indicator's tooltip content. Defaults to a comma-separated list of the hidden labels. */
    overflowTooltip: {
      tags: TagSetItem[];
      count: number
    };
  }
> {}