Feature/1102 combo box typedefs (#1115)

* small progress

* more progress

* Almost completed types for EuiComboBox and related components

* filled out combobox types

* update @types/react versions to be the same

* add combobox index.d.ts to components

* changelog, updated yarn.lock

CHANGELOG.md

@@ -19,6 +19,7 @@ No public interface changes since `3.7.0`.
 ## [`3.6.1`](https://github.com/elastic/eui/tree/v3.6.1)
 
 - Added TypeScript definition for `findTestSubject` test util ([#1106](https://github.com/elastic/eui/pull/1106))
+- Added TypeScript definition for `EuiComboBox` ([#1115](https://github.com/elastic/eui/pull/1115))
 
 **Bug fixes**
 

package.json

@@ -59,7 +59,8 @@
   "devDependencies": {
     "@elastic/eslint-config-kibana": "^0.15.0",
     "@types/enzyme": "^3.1.13",
-    "@types/react": "^16.4.9",
+    "@types/react": "^16.0.31",
+    "@types/react-virtualized": "^9.18.6",
     "autoprefixer": "^7.1.5",
     "babel-cli": "^6.26.0",
     "babel-eslint": "^8.0.1",

src/components/combo_box/index.d.ts

@@ -0,0 +1,73 @@
+import { ButtonHTMLAttributes, ReactNode, SFC } from 'react';
+import { ListProps } from 'react-virtualized';
+import {
+  EuiComboBoxOption,
+  EuiComboBoxOptionProps,
+  EuiComboBoxOptionsListPosition,
+  EuiComboBoxOptionsListProps,
+} from '@elastic/eui';
+
+declare module '@elastic/eui' {
+  export type EuiComboBoxOptionProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+    label: string,
+    isGroupLabelOption: boolean,
+  }
+
+  export type EuiComboBoxOptionsListPosition = 'top' | 'bottom'
+
+  export interface EuiComboBoxOption {
+    option: EuiComboBoxOptionProps,
+    children?: ReactNode,
+    className?: string,
+    optionRef?: RefCallback<HTMLButtonElement>,
+    onClick: (option: EuiComboBoxOptionProps) => any,
+    onEnterKey: (option: EuiComboBoxOptionProps) => any,
+    disabled?: boolean,
+  }
+
+  export interface EuiComboBoxOptionsListProps {
+    options?: Array<EuiComboBoxOptionProps>,
+    isLoading?: boolean,
+    selectedOptions?: Array<any>,
+    onCreateOption?: any,
+    searchValue?: string,
+    matchingOptions?: Array<EuiComboBoxOptionProps>,
+    optionRef?: EuiComboBoxOption['optionRef'],
+    onOptionClick?: EuiComboBoxOption['onClick'],
+    onOptionEnterKey?: EuiComboBoxOption['onEnterKey'],
+    areAllOptionsSelected?: boolean,
+    getSelectedOptionForSearchValue?: (searchValue: string, selectedOptions: Array<any>) => EuiComboBoxOptionProps,
+    updatePosition: (parameter?: UIEvent | EuiPanelProps['panelRef']) => any,
+    position?: EuiComboBoxOptionsListPosition,
+    listRef: EuiPanelProps['panelRef'],
+    renderOption?: (option: EuiComboBoxOptionProps, searchValue: string, OPTION_CONTENT_CLASSNAME: string) => ReactNode,
+    width?: number,
+    scrollToIndex?: number,
+    onScroll?: ListProps['onScroll'],
+    rowHeight?: number,
+    fullWidth?: boolean,
+  }
+  export const EuiComboBoxOptionsList: SFC<EuiComboBoxOptionsListProps>;
+
+  export interface EuiComboBoxProps {
+    id?: string,
+    isDisabled?: boolean,
+    className?: string,
+    placeholder?: string,
+    isLoading?: boolean,
+    async?: boolean,
+    singleSelection?: boolean,
+    noSuggestions?: boolean,
+    options?: EuiComboBoxOptionsListProps['options'],
+    selectedOptions?: EuiComboBoxOptionsListProps['selectedOptions'],
+    onChange?: (options: Array<EuiComboBoxOptionProps>) => any,
+    onSearchChange?: (searchValue: string) => any,
+    onCreateOption?: EuiComboBoxOptionsListProps['onCreateOption'],
+    renderOption?: EuiComboBoxOptionsListProps['renderOption'],
+    isInvalid?: boolean,
+    rowHeight?: number,
+    isClearable?: boolean,
+    fullWidth?: boolean,
+  }
+  export const EuiComboBox: SFC<EuiComboBoxProps>;
+}

src/components/index.d.ts

@@ -1,6 +1,7 @@
 /// <reference path="./common.d.ts" />
 /// <reference path="./avatar/index.d.ts" />
 /// <reference path="./button/index.d.ts" />
+/// <reference path="./combo_box/index.d.ts" />
 /// <reference path="./context_menu/index.d.ts" />
 /// <reference path="./flex/index.d.ts" />
 /// <reference path="./health/index.d.ts" />
@@ -28,3 +29,4 @@
 /// <reference path="./badge/index.d.ts" />
 /// <reference path="./toast/index.d.ts" />
 /// <reference path="./tool_tip/index.d.ts" />
+/// <reference path="./combo_box/index.d.ts" />

yarn.lock

@@ -93,9 +93,23 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react@*", "@types/react@^16.4.9":
-  version "16.4.9"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.4.9.tgz#98b4dba5a0419dbd594f5dbbb2479e1e153431bb"
+"@types/react-virtualized@^9.18.6":
+  version "9.18.6"
+  resolved "https://registry.yarnpkg.com/@types/react-virtualized/-/react-virtualized-9.18.6.tgz#d5c559bd003a6c58ba9e20d6cda0dde0342f59af"
+  dependencies:
+    "@types/prop-types" "*"
+    "@types/react" "*"
+
+"@types/react@*":
+  version "16.4.10"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.4.10.tgz#fb577091034b25a81f829923e7d38258f43e3165"
+  dependencies:
+    "@types/prop-types" "*"
+    csstype "^2.2.0"
+
+"@types/react@^16.0.31":
+  version "16.4.10"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.4.10.tgz#fb577091034b25a81f829923e7d38258f43e3165"
   dependencies:
     "@types/prop-types" "*"
     csstype "^2.2.0"