converts ComboBox family of components to TypeScript (#2838)

* first pass at ComboBox components

* organizes exports/imports, adjusts refs, minor fixes/adjustments

* fixes errors related to singleSelection prop

* types cleanup and abstractions

* reverts all attempts to use createRef and RefObject

* runs tests, updates snapshots

* small update from personal review

* moves common types to types file (and out of index.ts)

* adds HTMLAttributes to EuiComboBoxProps per review feedback

* gives FocusEvent types to onContainerBlur event

* uses class members where feasible per review feedback

* updates CHANGELOG

* adds CommonProps extensions to base components

CHANGELOG.md

@@ -1,7 +1,8 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-- Converted `EuiCodeEditor` to Typescript ([#2836](https://github.com/elastic/eui/pull/2836))
-- Converted `EuiCode` and `EuiCodeBlock` and to Typescript ([#2835](https://github.com/elastic/eui/pull/2835))
+- Converted `EuiComboBox`, `EuiComboBoxInput`, `EuiComboBoxPill`, `EuiComboBoxOptionsList`, `EuiComboBoxOption`, and `EuiComboBoxTitle` to TypeScript ([#2838](https://github.com/elastic/eui/pull/2838))
+- Converted `EuiCodeEditor` to TypeScript ([#2836](https://github.com/elastic/eui/pull/2836))
+- Converted `EuiCode` and `EuiCodeBlock` and to TypeScript ([#2835](https://github.com/elastic/eui/pull/2835))
 - Converted `EuiFilePicker` to TypeScript ([#2832](https://github.com/elastic/eui/issues/2832))
 - Exported `EuiSelectOptionProps` type ([#2830](https://github.com/elastic/eui/pull/2830))
 - Added `paperClip` glyph to `EuiIcon` ([#2845](https://github.com/elastic/eui/pull/2845))

package.json

@@ -89,8 +89,10 @@
     "@types/jest": "^24.0.6",
     "@types/react": "^16.9.11",
     "@types/react-dom": "^16.9.4",
+    "@types/react-input-autosize": "^2.0.1",
     "@types/react-is": "^16.7.1",
     "@types/resize-observer-browser": "^0.1.1",
+    "@types/sinon": "^7.5.1",
     "@types/tabbable": "^3.1.0",
     "@types/uuid": "^3.4.4",
     "@typescript-eslint/eslint-plugin": "^1.13.0",

src/components/badge/badge.tsx

@@ -1,7 +1,8 @@
 import React, {
+  AriaAttributes,
   FunctionComponent,
-  MouseEventHandler,
   HTMLAttributes,
+  MouseEventHandler,
   ReactNode,
 } from 'react';
 import classNames from 'classnames';
@@ -22,7 +23,7 @@ type WithButtonProps = {
   /**
    * Aria label applied to the onClick button
    */
-  onClickAriaLabel: string;
+  onClickAriaLabel: AriaAttributes['aria-label'];
 } & Omit<HTMLAttributes<HTMLButtonElement>, 'onClick' | 'color'>;
 
 type WithSpanProps = Omit<HTMLAttributes<HTMLSpanElement>, 'onClick' | 'color'>;
@@ -36,7 +37,7 @@ interface WithIconOnClick {
   /**
    * Aria label applied to the iconOnClick button
    */
-  iconOnClickAriaLabel: string;
+  iconOnClickAriaLabel: AriaAttributes['aria-label'];
 }
 
 export type EuiBadgeProps = {

src/components/combo_box/__snapshots__/combo_box.test.js.snap → src/components/combo_box/__snapshots__/combo_box.test.tsx.snap

@@ -25,6 +25,7 @@ exports[`EuiComboBox is rendered 1`] = `
           style="font-size:14px;display:inline-block"
         >
           <input
+            aria-controls=""
             data-test-subj="comboBoxSearchInput"
             role="textbox"
             style="box-sizing:content-box;width:1px"
@@ -72,7 +73,6 @@ exports[`props full width is rendered 1`] = `
   <EuiComboBoxInput
     autoSizeInputRef={[Function]}
     compressed={false}
-    focusedOptionId={null}
     fullWidth={true}
     hasSelectedOptions={true}
     inputRef={[Function]}
@@ -113,7 +113,6 @@ exports[`props isClearable=false disallows user from clearing input when no opti
   <EuiComboBoxInput
     autoSizeInputRef={[Function]}
     compressed={false}
-    focusedOptionId={null}
     fullWidth={false}
     hasSelectedOptions={false}
     inputRef={[Function]}
@@ -147,7 +146,6 @@ exports[`props isClearable=false disallows user from clearing input when options
   <EuiComboBoxInput
     autoSizeInputRef={[Function]}
     compressed={false}
-    focusedOptionId={null}
     fullWidth={false}
     hasSelectedOptions={true}
     inputRef={[Function]}
@@ -190,7 +188,6 @@ exports[`props isDisabled is rendered 1`] = `
   <EuiComboBoxInput
     autoSizeInputRef={[Function]}
     compressed={false}
-    focusedOptionId={null}
     fullWidth={false}
     hasSelectedOptions={true}
     inputRef={[Function]}
@@ -310,7 +307,6 @@ exports[`props selectedOptions are rendered 1`] = `
   <EuiComboBoxInput
     autoSizeInputRef={[Function]}
     compressed={false}
-    focusedOptionId={null}
     fullWidth={false}
     hasSelectedOptions={true}
     inputRef={[Function]}
@@ -354,7 +350,6 @@ exports[`props singleSelection is rendered 1`] = `
   <EuiComboBoxInput
     autoSizeInputRef={[Function]}
     compressed={false}
-    focusedOptionId={null}
     fullWidth={false}
     hasSelectedOptions={true}
     inputRef={[Function]}
@@ -395,7 +390,6 @@ exports[`props singleSelection selects existing option when opened 1`] = `
   <EuiComboBoxInput
     autoSizeInputRef={[Function]}
     compressed={false}
-    focusedOptionId={null}
     fullWidth={false}
     hasSelectedOptions={true}
     inputRef={[Function]}
@@ -428,7 +422,6 @@ exports[`props singleSelection selects existing option when opened 1`] = `
       areAllOptionsSelected={false}
       data-test-subj=""
       fullWidth={false}
-      getSelectedOptionForSearchValue={[Function]}
       listRef={[Function]}
       matchingOptions={
         Array [
@@ -518,6 +511,7 @@ exports[`props singleSelection selects existing option when opened 1`] = `
         ]
       }
       updatePosition={[Function]}
+      width={0}
     />
   </EuiPortal>
 </div>

src/components/combo_box/combo_box.test.js → src/components/combo_box/combo_box.test.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { shallow, render, mount } from 'enzyme';
 import sinon from 'sinon';
 import {
@@ -11,20 +11,24 @@ import { comboBoxKeyCodes } from '../../services';
 import { EuiComboBox } from './combo_box';
 
 jest.mock('../portal', () => ({
-  EuiPortal: ({ children }) => children,
+  EuiPortal: ({ children }: { children: ReactNode }) => children,
 }));
 
 // Mock the htmlIdGenerator to generate predictable ids for snapshot tests
 jest.mock('../../services/accessibility/html_id_generator', () => ({
   htmlIdGenerator: () => {
-    return suffix => `htmlid_${suffix}`;
+    return (suffix: string) => `htmlid_${suffix}`;
   },
 }));
 
-const options = [
+interface TitanOption {
+  'data-test-subj'?: 'titanOption';
+  label: string;
+}
+const options: TitanOption[] = [
   {
-    label: 'Titan',
     'data-test-subj': 'titanOption',
+    label: 'Titan',
   },
   {
     label: 'Enceladus',