// Type definitions for agate/Dropdown

import * as React from "react";
import { SkinnableProps as agate_Skinnable_SkinnableProps } from "@enact/agate/Skinnable";

type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
type Merge<M, N> = Omit<M, Extract<keyof M, keyof N>> & N;

export interface DropdownBaseProps {
  /**
   * The selections for Dropdown
   */
  children?:
    | string[]
    | {
        key: number | string;
        children: string | React.ComponentType;
        [propName: string]: any;
      }[];
  /**
   * The direction where the dropdown list appears.
   */
  direction?: "left" | "right" | "down" | "up";
  /**
   * Disables Dropdown and becomes non-interactive.
   */
  disabled?: boolean;
  /**
   * Called when the Dropdown is closing.
   */
  onClose?: Function;
  /**
   * Called when the Dropdown is opening.
   */
  onOpen?: Function;
  /**
   * Called when an item is selected.
   */
  onSelect?: Function;
  /**
   * Displays the items.
   */
  open?: boolean;
  /**
   * Index of the selected item.
   */
  selected?: number;
  /**
   * The current skin for this component.
   */
  skin?: string;
  /**
   * The primary title text of Dropdown.
   *
   * The title will be replaced with the selected item, if set.
   */
  title?: string;
}
/**
 * A stateless Dropdown component.
 */

export class DropdownBase extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, DropdownBaseProps>
> {}

export interface DropdownDecoratorProps
  extends agate_Skinnable_SkinnableProps {}
export function DropdownDecorator<P>(
  Component: React.ComponentType<P> | string
): React.ComponentType<P & DropdownDecoratorProps>;

export interface DropdownProps
  extends Merge<DropdownBaseProps, DropdownDecoratorProps> {}
/**
 * An Agate Dropdown component.
 * 
 * By default,  `Dropdown`  maintains the state of its  `selected`  property. Supply the
 `defaultSelected`  property to control its initial value. If you wish to directly control updates
to the component, supply a value to  `selected`  at creation time and update it in response to
 `onSelect`  events.
 */

export class Dropdown extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, DropdownProps>
> {}

export default Dropdown;
