@arcgis/core/widgets/ValuePicker/ValuePickerCombobox.d.ts

ArcGIS Maps SDK for JavaScript: A complete 2D and 3D mapping and data visualization API

import type ValuePickerBaseComponent from "./ValuePickerBaseComponent.js";
import type { ValuePickerBaseComponentProperties } from "./ValuePickerBaseComponent.js";

export interface ValuePickerComboboxProperties extends ValuePickerBaseComponentProperties, Partial<Pick<ValuePickerCombobox, "items" | "placeholder">> {
  /**
   * Combobox label.
   *
   * @default "ValuePickerCombobox"
   * @see [Calcite combobox.label](https://developers.arcgis.com/calcite-design-system/components/combobox/#component-api-properties-label)
   * @since 4.11
   */
  label?: string | null;
}

/** Object used to define the combobox [item](https://developers.arcgis.com/javascript/latest/references/core/widgets/ValuePicker/ValuePickerCombobox/#items). */
export interface ComboboxItem {
  /** The value of the combobox item. */
  value: string;
  /** The label for this item that users will see in the combobox. */
  label: string;
}

/**
 * This class represents a searchable combobox list component that can be assigned to a [ValuePicker.component](https://developers.arcgis.com/javascript/latest/references/core/widgets/ValuePicker/#component)
 * property of the [ValuePicker](https://developers.arcgis.com/javascript/latest/references/core/widgets/ValuePicker/) widget.
 * See [Using the combobox component to present selectable items](https://developers.arcgis.com/javascript/latest/references/core/widgets/ValuePicker/#selectable-items) section
 * for more information how to set this up.
 *
 * @since 4.27
 * @example
 * // Create a ValuePicker widget with a combobox component.
 * const valuePicker = new ValuePicker({
 *   component: new ValuePickerCombobox({
 *     placeholder: "Pick Zoning Type",
 *     items: [
 *       { value: "ind", label: "Industrial" },
 *       { value: "res", label: "Residential" },
 *       { value: "com", label: "Commercial" }
 *     ]
 *   }),
 *   values: ["res"]
 * });
 */
export default class ValuePickerCombobox extends ValuePickerBaseComponent {
  constructor(properties?: ValuePickerComboboxProperties);
  /**
   * An array of combobox items.
   *
   * @example
   * // Create a ValuePicker with a zip code combobox component.
   * const valuePicker = new ValuePicker({
   *   component: new ValuePickerCombobox({
   *     placeholder: "Pick a Zip Code",
   *     items: [
   *       { value: "90606", label: "Whittier, CA (90606)" },
   *       { value: "76001", label: "Arlington, TX (76001)" },
   *       { value: "92335", label: "Fontana, CA (92335)" }
   *     ]
   *   }),
   *   values: ["90606"]
   * });
   */
  accessor items: ComboboxItem[] | null | undefined;
  /**
   * Combobox label.
   *
   * @default "ValuePickerCombobox"
   * @see [Calcite combobox.label](https://developers.arcgis.com/calcite-design-system/components/combobox/#component-api-properties-label)
   * @since 4.11
   */
  accessor label: string | null | undefined;
  /**
   * Combobox placeholder text.
   *
   * @see [Calcite combobox.placeholder](https://developers.arcgis.com/calcite-design-system/components/combobox/#component-api-properties-placeholder)
   */
  accessor placeholder: string | null | undefined;
  get type(): "combobox";
}