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

Svelte implementation of the Carbon Design System

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

type $RestProps = SvelteHTMLElements["div"];

type $Props = {
  /**
   * Required. Specify the primary action button text.
   * Alternatively, use the "labelChildren" slot for custom button content;
   * `labelText` is still used as the accessible name in that case.
   * @default undefined
   */
  labelText: string;

  /**
   * Set to `true` to disable both the primary action and trigger buttons.
   * @default false
   */
  disabled?: boolean;

  /**
   * Specify the size of both buttons and the menu row height.
   * @default "md"
   */
  size?: "xs" | "sm" | "md" | "lg";

  /**
   * Set the preferred direction the menu opens toward.
   * The menu flips to the opposite direction if there is not enough space.
   * @default "bottom"
   */
  direction?: "top" | "bottom";

  /**
   * Align the menu to the trigger button's intrinsic width.
   * @default "end"
   */
  intrinsicAlign?: "start" | "center" | "end";

  /**
   * Set to `true` to open the menu.
   * @default false
   */
  open?: boolean;

  /**
   * Specify the accessible label for the icon-only trigger button.
   * Set to an empty string to render the trigger without a tooltip, the
   * same way `Button` handles an empty `iconDescription` - the trigger then
   * has no accessible name of its own, so only do this when something else
   * in the surrounding context labels it.
   * @default "Additional actions"
   */
  iconDescription?: string;

  /**
   * Set the position of the icon-only trigger's tooltip.
   * Independent of `direction`, which controls where the menu opens.
   * @default "bottom"
   */
  tooltipPosition?: "top" | "right" | "bottom" | "left";

  /**
   * Obtain a reference to the outer HTML element.
   * @default null
   */
  ref?: null | HTMLDivElement;

  /** Custom content for the primary action button. `labelText` remains the accessible name. */
  labelChildren?: (this: void) => void;

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

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

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

export default class ComboButton extends SvelteComponentTyped<
  ComboButtonProps,
  {
    blur: CustomEvent<FocusEvent>;
    "blur:trigger": CustomEvent<FocusEvent>;
    click: CustomEvent<MouseEvent>;
    /** Fires when the menu trigger button is clicked, separate from the primary action's `click` event. */
    "click:trigger": CustomEvent<MouseEvent>;
    close: CustomEvent<{
        trigger: "escape-key" | "outside-click" | "select";
      }>;
    focus: CustomEvent<FocusEvent>;
    "focus:trigger": CustomEvent<FocusEvent>;
    mousedown: CustomEvent<MouseEvent>;
    "mousedown:trigger": CustomEvent<MouseEvent>;
    mouseenter: CustomEvent<MouseEvent>;
    "mouseenter:trigger": CustomEvent<MouseEvent>;
    mouseleave: CustomEvent<MouseEvent>;
    "mouseleave:trigger": CustomEvent<MouseEvent>;
    mouseover: CustomEvent<MouseEvent>;
    "mouseover:trigger": CustomEvent<MouseEvent>;
  },
  {
    default: Record<string, never>;
    /** Custom content for the primary action button. `labelText` remains the accessible name. */
    labelChildren: Record<string, never>;
  }
> {}