@esri/calcite-components/dist/types/components/dropdown/dropdown.d.ts

Web Components for Esri's Calcite Design System.

import { Event, EventEmitter, VNode } from "../../stencil-public-runtime";
import { ItemKeyboardEvent } from "./interfaces";
import { EffectivePlacement, FloatingUIComponent, MenuPlacement, OverlayPositioning } from "../../utils/floating-ui";
import { InteractiveComponent } from "../../utils/interactive";
import { LoadableComponent } from "../../utils/loadable";
import { OpenCloseComponent } from "../../utils/openCloseComponent";
import { RequestedItem } from "../dropdown-group/interfaces";
import { Scale } from "../interfaces";
/**
 * @slot - A slot for adding `calcite-dropdown-group` elements. Every `calcite-dropdown-item` must have a parent `calcite-dropdown-group`, even if the `groupTitle` property is not set.
 * @slot trigger - A slot for the element that triggers the `calcite-dropdown`.
 */
export declare class Dropdown implements InteractiveComponent, LoadableComponent, OpenCloseComponent, FloatingUIComponent {
  el: HTMLCalciteDropdownElement;
  /**
   * When `true`, displays and positions the component.
   */
  open: boolean;
  openHandler(value: boolean): void;
  /**
   * When `true`, the component will remain open after a selection is made.
   *
   * If the `selectionMode` of the selected `calcite-dropdown-item`'s containing `calcite-dropdown-group` is `"none"`, the component will always close.
   *
   */
  closeOnSelectDisabled: boolean;
  /**
   * When `true`, interaction is prevented and the component is displayed with lower opacity.
   */
  disabled: boolean;
  handleDisabledChange(value: boolean): void;
  /**
   * Defines the available placements that can be used when a flip occurs.
   */
  flipPlacements: EffectivePlacement[];
  flipPlacementsHandler(): void;
  /**
   * Specifies the maximum number of `calcite-dropdown-item`s to display before showing a scroller.
   * Value must be greater than `0`, and does not include `groupTitle`'s from `calcite-dropdown-group`.
   */
  maxItems: number;
  maxItemsHandler(): void;
  /**
   * Determines the type of positioning to use for the overlaid content.
   *
   * Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.
   *
   * `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
   *
   */
  overlayPositioning: OverlayPositioning;
  overlayPositioningHandler(): void;
  /**
   * Determines where the component will be positioned relative to the container element.
   *
   * @default "bottom-start"
   */
  placement: MenuPlacement;
  placementHandler(): void;
  /**
   * Specifies the size of the component.
   */
  scale: Scale;
  /**
   * Specifies the component's selected items.
   *
   * @readonly
   */
  selectedItems: HTMLCalciteDropdownItemElement[];
  /**
   * Specifies the action to open the component from the container element.
   */
  type: "hover" | "click";
  /**
   * Specifies the width of the component.
   */
  width: Scale;
  /** Sets focus on the component's first focusable element. */
  setFocus(): Promise<void>;
  connectedCallback(): void;
  componentWillLoad(): void;
  componentDidLoad(): void;
  componentDidRender(): void;
  disconnectedCallback(): void;
  render(): VNode;
  /**
   * Updates the position of the component.
   *
   * @param delayed
   */
  reposition(delayed?: boolean): Promise<void>;
  /** Fires when a `calcite-dropdown-item`'s selection changes. */
  calciteDropdownSelect: EventEmitter<void>;
  /** Fires when the component is requested to be closed and before the closing transition begins. */
  calciteDropdownBeforeClose: EventEmitter<void>;
  /** Fires when the component is closed and animation is complete. */
  calciteDropdownClose: EventEmitter<void>;
  /** Fires when the component is added to the DOM but not rendered, and before the opening transition begins. */
  calciteDropdownBeforeOpen: EventEmitter<void>;
  /** Fires when the component is open and animation is complete. */
  calciteDropdownOpen: EventEmitter<void>;
  closeCalciteDropdownOnClick(event: PointerEvent): void;
  closeCalciteDropdownOnEvent(event: Event): void;
  closeCalciteDropdownOnOpenEvent(event: Event): void;
  pointerEnterHandler(): void;
  pointerLeaveHandler(): void;
  calciteInternalDropdownItemKeyEvent(event: CustomEvent<ItemKeyboardEvent>): void;
  handleItemSelect(event: CustomEvent<RequestedItem>): void;
  filteredFlipPlacements: EffectivePlacement[];
  private items;
  private groups;
  /** trigger elements */
  private triggers;
  floatingEl: HTMLDivElement;
  referenceEl: HTMLDivElement;
  private scrollerEl;
  mutationObserver: import("../../utils/observers").ExtendedMutationObserver;
  resizeObserver: ResizeObserver;
  openTransitionProp: string;
  transitionEl: HTMLDivElement;
  guid: string;
  defaultAssignedElements: Element[];
  slotChangeHandler: (event: Event) => void;
  setFilteredPlacements: () => void;
  updateTriggers: (event: Event) => void;
  updateItems: () => void;
  updateGroups: (event: Event) => void;
  resizeObserverCallback: (entries: ResizeObserverEntry[]) => void;
  setDropdownWidth: () => void;
  setMaxScrollerHeight: () => void;
  setScrollerAndTransitionEl: (el: HTMLDivElement) => void;
  onBeforeOpen(): void;
  onOpen(): void;
  onBeforeClose(): void;
  onClose(): void;
  setReferenceEl: (el: HTMLDivElement) => void;
  setFloatingEl: (el: HTMLDivElement) => void;
  private keyDownHandler;
  private updateSelectedItems;
  private getMaxScrollerHeight;
  private closeCalciteDropdown;
  private focusOnFirstActiveOrFirstItem;
  private getFocusableElement;
  private toggleOpenEnd;
  private openCalciteDropdown;
}