Upgrade EUI to v20.0.2 (#59199)

* Updated EUI to 20.0.1; updated typescript usage

* snapshots

* Upgrade to eui 20.0.2, fix one more type

* PR feedback

* Update EUI icon usage to the correct types

* Updated with master

package.json

@@ -120,7 +120,7 @@
     "@elastic/charts": "^17.1.1",
     "@elastic/datemath": "5.0.2",
     "@elastic/ems-client": "7.6.0",
-    "@elastic/eui": "19.0.0",
+    "@elastic/eui": "20.0.2",
     "@elastic/filesaver": "1.1.2",
     "@elastic/good": "8.1.1-kibana2",
     "@elastic/numeral": "2.4.0",

packages/kbn-ui-shared-deps/package.json

@@ -11,7 +11,7 @@
   "devDependencies": {
     "@elastic/charts": "^17.1.1",
     "abortcontroller-polyfill": "^1.4.0",
-    "@elastic/eui": "19.0.0",
+    "@elastic/eui": "20.0.2",
     "@kbn/babel-preset": "1.0.0",
     "@kbn/dev-utils": "1.0.0",
     "@kbn/i18n": "1.0.0",

src/legacy/core_plugins/input_control_vis/public/components/editor/field_select.tsx

@@ -22,13 +22,13 @@ import React, { Component } from 'react';
 import { InjectedIntlProps } from 'react-intl';
 
 import { injectI18n, FormattedMessage } from '@kbn/i18n/react';
-import { EuiFormRow, EuiComboBox, EuiComboBoxOptionProps } from '@elastic/eui';
+import { EuiFormRow, EuiComboBox, EuiComboBoxOptionOption } from '@elastic/eui';
 
 import { IIndexPattern, IFieldType } from '../../../../../../plugins/data/public';
 
 interface FieldSelectUiState {
   isLoading: boolean;
-  fields: Array<EuiComboBoxOptionProps<string>>;
+  fields: Array<EuiComboBoxOptionOption<string>>;
   indexPatternId: string;
 }
 
@@ -105,7 +105,7 @@ class FieldSelectUi extends Component<FieldSelectUiProps, FieldSelectUiState> {
     }
 
     const fieldsByTypeMap = new Map<string, string[]>();
-    const fields: Array<EuiComboBoxOptionProps<string>> = [];
+    const fields: Array<EuiComboBoxOptionOption<string>> = [];
     indexPattern.fields
       .filter(this.props.filterField ?? (() => true))
       .forEach((field: IFieldType) => {
@@ -135,7 +135,7 @@ class FieldSelectUi extends Component<FieldSelectUiProps, FieldSelectUiState> {
     });
   }, 300);
 
-  onChange = (selectedOptions: Array<EuiComboBoxOptionProps<any>>) => {
+  onChange = (selectedOptions: Array<EuiComboBoxOptionOption<any>>) => {
     this.props.onChange(_.get(selectedOptions, '0.value'));
   };
 

src/legacy/core_plugins/input_control_vis/public/components/vis/list_control.tsx

@@ -76,7 +76,7 @@ class ListControlUi extends PureComponent<ListControlUiProps, ListControlUiState
     this.isMounted = false;
   };
 
-  setTextInputRef = (ref: HTMLElement) => {
+  setTextInputRef = (ref: HTMLInputElement | null) => {
     this.textInput = ref;
   };
 

src/legacy/core_plugins/input_control_vis/public/input_control_vis_type.ts

@@ -34,7 +34,7 @@ export function createInputControlVisTypeDefinition(deps: InputControlVisDepende
     title: i18n.translate('inputControl.register.controlsTitle', {
       defaultMessage: 'Controls',
     }),
-    icon: 'visControls',
+    icon: 'controlsHorizontal',
     description: i18n.translate('inputControl.register.controlsDescription', {
       defaultMessage: 'Create interactive controls for easy dashboard manipulation.',
     }),

src/legacy/core_plugins/vis_default_editor/public/components/agg_select.tsx

@@ -19,7 +19,7 @@
 import { get, has } from 'lodash';
 import React, { useEffect, useCallback, useState } from 'react';
 
-import { EuiComboBox, EuiComboBoxOptionProps, EuiFormRow, EuiLink, EuiText } from '@elastic/eui';
+import { EuiComboBox, EuiComboBoxOptionOption, EuiFormRow, EuiLink, EuiText } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 
@@ -104,7 +104,7 @@ function DefaultEditorAggSelect({
   const isValid = !!value && !errors.length && !isDirty;
 
   const onChange = useCallback(
-    (options: EuiComboBoxOptionProps[]) => {
+    (options: EuiComboBoxOptionOption[]) => {
       const selectedOption = get(options, '0.target');
       if (selectedOption) {
         setValue(selectedOption as IAggType);

src/legacy/core_plugins/vis_default_editor/public/components/controls/field.test.tsx

@@ -29,7 +29,7 @@ import { FieldParamEditor, FieldParamEditorProps } from './field';
 import { IAggConfig } from '../../legacy_imports';
 
 function callComboBoxOnChange(comp: ReactWrapper, value: any = []) {
-  const comboBoxProps: EuiComboBoxProps<string> = comp.find(EuiComboBox).props();
+  const comboBoxProps = comp.find(EuiComboBox).props() as EuiComboBoxProps<any>;
   if (comboBoxProps.onChange) {
     comboBoxProps.onChange(value);
   }

src/legacy/core_plugins/vis_default_editor/public/components/controls/field.tsx

@@ -20,7 +20,7 @@
 import { get } from 'lodash';
 import React, { useEffect, useState, useCallback } from 'react';
 
-import { EuiComboBox, EuiComboBoxOptionProps, EuiFormRow } from '@elastic/eui';
+import { EuiComboBox, EuiComboBoxOptionOption, EuiFormRow } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 
 import { IndexPatternField } from 'src/plugins/data/public';
@@ -55,7 +55,7 @@ function FieldParamEditor({
     ? [{ label: value.displayName || value.name, target: value }]
     : [];
 
-  const onChange = (options: EuiComboBoxOptionProps[]) => {
+  const onChange = (options: EuiComboBoxOptionOption[]) => {
     const selectedOption: IndexPatternField = get(options, '0.target');
     if (!(aggParam.required && !selectedOption)) {
       setValue(selectedOption);

src/legacy/core_plugins/vis_default_editor/public/components/controls/time_interval.tsx

@@ -19,14 +19,14 @@
 
 import { get, find } from 'lodash';
 import React, { useEffect } from 'react';
-import { EuiFormRow, EuiIconTip, EuiComboBox, EuiComboBoxOptionProps } from '@elastic/eui';
+import { EuiFormRow, EuiIconTip, EuiComboBox, EuiComboBoxOptionOption } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 
 import { isValidInterval, AggParamOption } from '../../legacy_imports';
 import { AggParamEditorProps } from '../agg_param_props';
 
-interface ComboBoxOption extends EuiComboBoxOptionProps {
+interface ComboBoxOption extends EuiComboBoxOptionOption {
   key: string;
 }
 
@@ -105,7 +105,7 @@ function TimeIntervalParamEditor({
     }
   };
 
-  const onChange = (opts: EuiComboBoxOptionProps[]) => {
+  const onChange = (opts: EuiComboBoxOptionOption[]) => {
     const selectedOpt: ComboBoxOption = get(opts, '0');
     setValue(selectedOpt ? selectedOpt.key : '');
 

src/legacy/core_plugins/vis_type_timelion/public/components/timelion_interval.tsx

@@ -18,7 +18,7 @@
  */
 
 import React, { useMemo, useCallback } from 'react';
-import { EuiFormRow, EuiComboBox, EuiComboBoxOptionProps } from '@elastic/eui';
+import { EuiFormRow, EuiComboBox, EuiComboBoxOptionOption } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 
 import { isValidEsInterval } from '../../../../core_plugins/data/common';
@@ -90,7 +90,7 @@ function TimelionInterval({ value, setValue, setValidity }: TimelionIntervalProp
   );
 
   const onChange = useCallback(
-    (opts: Array<EuiComboBoxOptionProps<string>>) => {
+    (opts: Array<EuiComboBoxOptionOption<string>>) => {
       setValue((opts[0] && opts[0].value) || '');
     },
     [setValue]

src/legacy/core_plugins/vis_type_timeseries/public/components/icon_select/__snapshots__/icon_select.test.js.snap

@@ -2,6 +2,7 @@
 
 exports[`src/legacy/core_plugins/metrics/public/components/icon_select/icon_select.js <IconSelect /> should render and match a snapshot 1`] = `
 <EuiComboBox
+  async={false}
   compressed={false}
   fullWidth={false}
   isClearable={false}

src/legacy/core_plugins/vis_type_timeseries/public/components/splits/__snapshots__/terms.test.js.snap

@@ -193,6 +193,7 @@ exports[`src/legacy/core_plugins/metrics/public/components/splits/terms.test.js
         labelType="label"
       >
         <EuiComboBox
+          async={false}
           compressed={false}
           fullWidth={false}
           isClearable={false}

src/legacy/core_plugins/vis_type_vislib/public/heatmap.ts

@@ -44,7 +44,7 @@ export interface HeatmapVisParams extends CommonVislibParams, ColorSchemaVislibP
 export const createHeatmapVisTypeDefinition = (deps: VisTypeVislibDependencies) => ({
   name: 'heatmap',
   title: i18n.translate('visTypeVislib.heatmap.heatmapTitle', { defaultMessage: 'Heat Map' }),
-  icon: 'visHeatmap',
+  icon: 'heatmap',
   description: i18n.translate('visTypeVislib.heatmap.heatmapDescription', {
     defaultMessage: 'Shade cells within a matrix',
   }),

src/plugins/advanced_settings/public/management_app/components/field/__snapshots__/field.test.tsx.snap

@@ -1350,7 +1350,6 @@ exports[`Field for json setting should render as read only if saving is disabled
             "$blockScrolling": Infinity,
           }
         }
-        fullWidth={true}
         height="auto"
         isReadOnly={true}
         maxLines={30}
@@ -1456,7 +1455,6 @@ exports[`Field for json setting should render as read only with help text if ove
             "$blockScrolling": Infinity,
           }
         }
-        fullWidth={true}
         height="auto"
         isReadOnly={true}
         maxLines={30}
@@ -1538,7 +1536,6 @@ exports[`Field for json setting should render custom setting icon if it is custo
             "$blockScrolling": Infinity,
           }
         }
-        fullWidth={true}
         height="auto"
         isReadOnly={false}
         maxLines={30}
@@ -1651,7 +1648,6 @@ exports[`Field for json setting should render default value if there is no user
             "$blockScrolling": Infinity,
           }
         }
-        fullWidth={true}
         height="auto"
         isReadOnly={false}
         maxLines={30}
@@ -1740,7 +1736,6 @@ exports[`Field for json setting should render unsaved value if there are unsaved
             "$blockScrolling": Infinity,
           }
         }
-        fullWidth={true}
         height="auto"
         isReadOnly={false}
         maxLines={30}
@@ -1864,7 +1859,6 @@ exports[`Field for json setting should render user value if there is user value
             "$blockScrolling": Infinity,
           }
         }
-        fullWidth={true}
         height="auto"
         isReadOnly={false}
         maxLines={30}
@@ -1935,7 +1929,6 @@ exports[`Field for markdown setting should render as read only if saving is disa
             "$blockScrolling": Infinity,
           }
         }
-        fullWidth={true}
         height="auto"
         isReadOnly={true}
         maxLines={30}
@@ -2038,7 +2031,6 @@ exports[`Field for markdown setting should render as read only with help text if
             "$blockScrolling": Infinity,
           }
         }
-        fullWidth={true}
         height="auto"
         isReadOnly={true}
         maxLines={30}
@@ -2120,7 +2112,6 @@ exports[`Field for markdown setting should render custom setting icon if it is c
             "$blockScrolling": Infinity,
           }
         }
-        fullWidth={true}
         height="auto"
         isReadOnly={false}
         maxLines={30}
@@ -2191,7 +2182,6 @@ exports[`Field for markdown setting should render default value if there is no u
             "$blockScrolling": Infinity,
           }
         }
-        fullWidth={true}
         height="auto"
         isReadOnly={false}
         maxLines={30}
@@ -2280,7 +2270,6 @@ exports[`Field for markdown setting should render unsaved value if there are uns
             "$blockScrolling": Infinity,
           }
         }
-        fullWidth={true}
         height="auto"
         isReadOnly={false}
         maxLines={30}
@@ -2397,7 +2386,6 @@ exports[`Field for markdown setting should render user value if there is user va
             "$blockScrolling": Infinity,
           }
         }
-        fullWidth={true}
         height="auto"
         isReadOnly={false}
         maxLines={30}

src/plugins/advanced_settings/public/management_app/components/field/field.test.tsx

@@ -363,7 +363,7 @@ describe('Field', () => {
         (component.instance() as Field).getImageAsBase64 = ({}: Blob) => Promise.resolve('');
 
         it('should be able to change value and cancel', async () => {
-          (component.instance() as Field).onImageChange([userValue]);
+          (component.instance() as Field).onImageChange(([userValue] as unknown) as FileList);
           expect(handleChange).toBeCalled();
           await wrapper.setProps({
             unsavedChanges: {
@@ -387,7 +387,9 @@ describe('Field', () => {
           const updated = wrapper.update();
           findTestSubject(updated, `advancedSetting-changeImage-${setting.name}`).simulate('click');
           const newUserValue = `${userValue}=`;
-          await (component.instance() as Field).onImageChange([newUserValue]);
+          await (component.instance() as Field).onImageChange(([
+            newUserValue,
+          ] as unknown) as FileList);
           expect(handleChange).toBeCalled();
         });
 

src/plugins/advanced_settings/public/management_app/components/field/field.tsx

@@ -90,7 +90,7 @@ export const getEditableValue = (
 };
 
 export class Field extends PureComponent<FieldProps> {
-  private changeImageForm: EuiFilePicker | undefined = React.createRef();
+  private changeImageForm = React.createRef<EuiFilePicker>();
 
   getDisplayedDefaultValue(
     type: UiSettingsType,
@@ -138,7 +138,7 @@ export class Field extends PureComponent<FieldProps> {
     }
   }
 
-  onCodeEditorChange = (value: UiSettingsType) => {
+  onCodeEditorChange = (value: string) => {
     const { defVal, type } = this.props.setting;
 
     let newUnsavedValue;
@@ -212,7 +212,9 @@ export class Field extends PureComponent<FieldProps> {
     });
   };
 
-  onImageChange = async (files: any[]) => {
+  onImageChange = async (files: FileList | null) => {
+    if (files == null) return;
+
     if (!files.length) {
       this.setState({
         unsavedValue: null,
@@ -278,9 +280,9 @@ export class Field extends PureComponent<FieldProps> {
   };
 
   cancelChangeImage = () => {
-    if (this.changeImageForm.current) {
+    if (this.changeImageForm.current?.fileInput) {
-      this.changeImageForm.current.fileInput.value = null;
+      this.changeImageForm.current.fileInput.value = '';
-      this.changeImageForm.current.handleChange({});
+      this.changeImageForm.current.handleChange();
     }
     if (this.props.clearChange) {
       this.props.clearChange(this.props.setting.name);
@@ -352,7 +354,6 @@ export class Field extends PureComponent<FieldProps> {
                 $blockScrolling: Infinity,
               }}
               showGutter={false}
-              fullWidth
             />
           </div>
         );

src/plugins/data/public/ui/filter_bar/filter_editor/generic_combo_box.tsx

@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import { EuiComboBox, EuiComboBoxOptionProps } from '@elastic/eui';
+import { EuiComboBox, EuiComboBoxOptionOption } from '@elastic/eui';
 import React from 'react';
 
 export interface GenericComboBoxProps<T> {
@@ -38,7 +38,7 @@ export function GenericComboBox<T>(props: GenericComboBoxProps<T>) {
   const { options, selectedOptions, getLabel, onChange, ...otherProps } = props;
 
   const labels = options.map(getLabel);
-  const euiOptions: EuiComboBoxOptionProps[] = labels.map(label => ({ label }));
+  const euiOptions: EuiComboBoxOptionOption[] = labels.map(label => ({ label }));
   const selectedEuiOptions = selectedOptions
     .filter(option => {
       return options.indexOf(option) !== -1;
@@ -47,7 +47,7 @@ export function GenericComboBox<T>(props: GenericComboBoxProps<T>) {
       return euiOptions[options.indexOf(option)];
     });
 
-  const onComboBoxChange = (newOptions: EuiComboBoxOptionProps[]) => {
+  const onComboBoxChange = (newOptions: EuiComboBoxOptionOption[]) => {
     const newValues = newOptions.map(({ label }) => {
       return options[labels.indexOf(label)];
     });

src/plugins/data/public/ui/index_pattern_select/index_pattern_select.tsx

@@ -39,7 +39,7 @@ export type IndexPatternSelectProps = Required<
 interface IndexPatternSelectState {
   isLoading: boolean;
   options: [];
-  selectedIndexPattern: string | undefined;
+  selectedIndexPattern: { value: string; label: string } | undefined;
   searchValue: string | undefined;
 }
 

src/plugins/es_ui_shared/static/forms/components/fields/combobox_field.tsx

@@ -19,7 +19,7 @@
 
 import React from 'react';
 import { i18n } from '@kbn/i18n';
-import { EuiFormRow, EuiComboBox, EuiComboBoxOptionProps } from '@elastic/eui';
+import { EuiFormRow, EuiComboBox, EuiComboBoxOptionOption } from '@elastic/eui';
 
 import { FieldHook, VALIDATION_TYPES, FieldValidateResponse } from '../../hook_form_lib';
 
@@ -69,7 +69,7 @@ export const ComboBoxField = ({ field, euiFieldProps = {}, ...rest }: Props) =>
     field.setValue(newValue);
   };
 
-  const onComboChange = (options: EuiComboBoxOptionProps[]) => {
+  const onComboChange = (options: EuiComboBoxOptionOption[]) => {
     field.setValue(options.map(option => option.label));
   };
 

src/plugins/es_ui_shared/static/forms/helpers/de_serializers.ts

@@ -16,10 +16,10 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Option } from '@elastic/eui/src/components/selectable/types';
+import { EuiSelectableOption } from '@elastic/eui';
 import { SerializerFunc } from '../hook_form_lib';
 
-type FuncType = (selectOptions: Option[]) => SerializerFunc;
+type FuncType = (selectOptions: EuiSelectableOption[]) => SerializerFunc;
 
 export const multiSelectComponent: Record<string, FuncType> = {
   // This deSerializer takes the previously selected options and map them
@@ -31,7 +31,7 @@ export const multiSelectComponent: Record<string, FuncType> = {
         return selectOptions;
       }
 
-      return (selectOptions as Option[]).map(option => ({
+      return (selectOptions as EuiSelectableOption[]).map(option => ({
         ...option,
         checked: (defaultFormValue as string[]).includes(option.label) ? 'on' : undefined,
       }));

src/plugins/es_ui_shared/static/forms/helpers/field_validators/min_selectable_selection.ts

@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import { Option } from '@elastic/eui/src/components/selectable/types';
+import { EuiSelectableOption } from '@elastic/eui';
 
 import { ValidationFunc, ValidationError } from '../../hook_form_lib';
 import { hasMinLengthArray } from '../../../validators/array';
@@ -42,7 +42,7 @@ export const minSelectableSelectionField = ({
 
   // We need to convert all the options from the multi selectable component, to the
   // an actual Array of selection _before_ validating the Array length.
-  return hasMinLengthArray(total)(optionsToSelectedValue(value as Option[]))
+  return hasMinLengthArray(total)(optionsToSelectedValue(value as EuiSelectableOption[]))
     ? undefined
     : {
         code: 'ERR_MIN_SELECTION',

src/plugins/es_ui_shared/static/forms/helpers/serializers.ts

@@ -36,7 +36,7 @@
  * ````
  */
 
-import { Option } from '@elastic/eui/src/components/selectable/types';
+import { EuiSelectableOption } from '@elastic/eui';
 import { SerializerFunc } from '../hook_form_lib';
 
 export const multiSelectComponent: Record<string, SerializerFunc<string[]>> = {
@@ -45,7 +45,7 @@ export const multiSelectComponent: Record<string, SerializerFunc<string[]>> = {
    *
    * @param value The Eui Selectable options array
    */
-  optionsToSelectedValue(options: Option[]): string[] {
+  optionsToSelectedValue(options: EuiSelectableOption[]): string[] {
     return options.filter(option => option.checked === 'on').map(option => option.label);
   },
 };

src/plugins/inspector/public/ui/__snapshots__/inspector_panel.test.tsx.snap

@@ -326,21 +326,25 @@ exports[`InspectorPanel should render as expected 1`] = `
       <div
         className="euiFlyoutBody__overflow"
       >
-        <component
+        <div
-          adapters={
+          className="euiFlyoutBody__overflowContent"
-            Object {
-              "bardapter": Object {},
-              "foodapter": Object {
-                "foo": [Function],
-              },
-            }
-          }
-          title="Inspector"
         >
-          <h1>
+          <component
-            View 1
+            adapters={
-          </h1>
+              Object {
-        </component>
+                "bardapter": Object {},
+                "foodapter": Object {
+                  "foo": [Function],
+                },
+              }
+            }
+            title="Inspector"
+          >
+            <h1>
+              View 1
+            </h1>
+          </component>
+        </div>
       </div>
     </div>
   </EuiFlyoutBody>

test/interpreter_functional/plugins/kbn_tp_run_pipeline/package.json

@@ -7,7 +7,7 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@elastic/eui": "19.0.0",
+    "@elastic/eui": "20.0.2",
     "react": "^16.12.0",
     "react-dom": "^16.12.0"
   }

test/plugin_functional/plugins/kbn_tp_custom_visualizations/package.json

@@ -7,7 +7,7 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@elastic/eui": "19.0.0",
+    "@elastic/eui": "20.0.2",
     "react": "^16.12.0"
   }
 }

test/plugin_functional/plugins/kbn_tp_custom_visualizations/public/self_changing_vis/self_changing_vis.js

@@ -25,7 +25,7 @@ import { setup as visualizations } from '../../../../../../src/legacy/core_plugi
 visualizations.types.createReactVisualization({
   name: 'self_changing_vis',
   title: 'Self Changing Vis',
-  icon: 'visControls',
+  icon: 'controlsHorizontal',
   description:
     'This visualization is able to change its own settings, that you could also set in the editor.',
   visConfig: {

test/plugin_functional/plugins/kbn_tp_embeddable_explorer/package.json

@@ -8,7 +8,7 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@elastic/eui": "19.0.0",
+    "@elastic/eui": "20.0.2",
     "react": "^16.12.0"
   },
   "scripts": {

test/plugin_functional/plugins/kbn_tp_sample_panel_action/package.json

@@ -8,7 +8,7 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@elastic/eui": "19.0.0",
+    "@elastic/eui": "20.0.2",
     "react": "^16.12.0"
   },
   "scripts": {

typings/@elastic/eui/index.d.ts

@@ -21,6 +21,5 @@ import { Direction } from '@elastic/eui/src/services/sort/sort_direction';
 // TODO: Remove once typescript definitions are in EUI
 
 declare module '@elastic/eui' {
-  export const EuiCodeEditor: React.FC<any>;
   export const Query: any;
 }

x-pack/legacy/plugins/beats_management/public/components/inputs/code_editor.tsx

@@ -93,13 +93,11 @@ class CodeEditor extends Component<
         error={error ? getErrorMessage() : []}
       >
         <EuiCodeEditor
-          id={id}
           name={name}
           mode={mode}
           theme="github"
           value={getValue() || ''}
           isReadOnly={isReadOnly || false}
-          isInvalid={error}
           onChange={this.handleChange}
           onBlur={this.handleBlur}
           width={fullWidth ? '100%' : undefined}

x-pack/legacy/plugins/canvas/public/components/asset_manager/asset_manager.tsx

@@ -110,7 +110,8 @@ export class AssetManager extends PureComponent<Props, State> {
     this.props.onAssetDelete(this.state.deleteId);
   };
 
-  private handleFileUpload = (files: FileList) => {
+  private handleFileUpload = (files: FileList | null) => {
+    if (files == null) return;
     this.setState({ isLoading: true });
     Promise.all(Array.from(files).map(file => this.props.onAssetAdd(file))).finally(() => {
       this.setState({ isLoading: false });

x-pack/legacy/plugins/canvas/public/components/asset_manager/asset_modal.tsx

@@ -43,7 +43,7 @@ interface Props {
   /** Function to invoke when the modal is closed */
   onClose: () => void;
   /** Function to invoke when a file is uploaded */
-  onFileUpload: (assets: FileList) => void;
+  onFileUpload: (assets: FileList | null) => void;
   /** Function to invoke when an asset is copied */
   onAssetCopy: (asset: AssetType) => void;
   /** Function to invoke when an asset is created */

x-pack/legacy/plugins/canvas/public/components/custom_element_modal/custom_element_modal.tsx

@@ -100,8 +100,9 @@ export class CustomElementModal extends PureComponent<Props, State> {
     this.setState({ [type]: value });
   };
 
-  private _handleUpload = (files: File[]) => {
+  private _handleUpload = (files: FileList | null) => {
-    const [file] = files;
+    if (files == null) return;
+    const file = files[0];
     const [type, subtype] = get(file, 'type', '').split('/');
     if (type === 'image' && VALID_IMAGE_TYPES.indexOf(subtype) >= 0) {
       encode(file).then((dataurl: string) => this._handleChange('image', dataurl));

x-pack/legacy/plugins/graph/public/components/field_manager/field_editor.tsx

@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, ButtonHTMLAttributes } from 'react';
 import {
   EuiPopover,
   EuiFormRow,
@@ -23,7 +23,6 @@ import {
   EuiForm,
   EuiSpacer,
   EuiIconTip,
-  EuiComboBoxOptionProps,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import classNames from 'classnames';
@@ -224,14 +223,12 @@ export function FieldEditor({
                     }}
                     singleSelection={{ asPlainText: true }}
                     isClearable={false}
-                    options={
+                    options={toOptions(allFields, initialField)}
-                      toOptions(allFields, initialField) as Array<EuiComboBoxOptionProps<string>>
-                    }
                     selectedOptions={[
                       {
                         value: currentField.name,
                         label: currentField.name,
-                        type: currentField.type,
+                        type: currentField.type as ButtonHTMLAttributes<HTMLButtonElement>['type'],
                       },
                     ]}
                     renderOption={(option, searchValue, contentClassName) => {
@@ -379,12 +376,12 @@ export function FieldEditor({
 function toOptions(
   fields: WorkspaceField[],
   currentField: WorkspaceField
-): Array<{ label: string; value: string; type: string }> {
+): Array<{ label: string; value: string; type: ButtonHTMLAttributes<HTMLButtonElement>['type'] }> {
   return fields
     .filter(field => !field.selected || field === currentField)
     .map(({ name, type }) => ({
       label: name,
       value: name,
-      type,
+      type: type as ButtonHTMLAttributes<HTMLButtonElement>['type'],
     }));
 }

x-pack/legacy/plugins/lens/public/indexpattern_datasource/dimension_panel/field_select.tsx

@@ -7,7 +7,7 @@
 import _ from 'lodash';
 import React, { useMemo } from 'react';
 import { i18n } from '@kbn/i18n';
-import { EuiComboBox, EuiFlexGroup, EuiFlexItem, EuiComboBoxOptionProps } from '@elastic/eui';
+import { EuiComboBox, EuiFlexGroup, EuiFlexItem, EuiComboBoxOptionOption } from '@elastic/eui';
 import classNames from 'classnames';
 import { EuiHighlight } from '@elastic/eui';
 import { OperationType } from '../indexpattern';
@@ -138,10 +138,10 @@ export function FieldSelect({
       placeholder={i18n.translate('xpack.lens.indexPattern.fieldPlaceholder', {
         defaultMessage: 'Field',
       })}
-      options={(memoizedFieldOptions as unknown) as EuiComboBoxOptionProps[]}
+      options={(memoizedFieldOptions as unknown) as EuiComboBoxOptionOption[]}
       isInvalid={Boolean(incompatibleSelectedOperationType && selectedColumnOperationType)}
       selectedOptions={
-        selectedColumnOperationType
+        ((selectedColumnOperationType
           ? selectedColumnSourceField
             ? [
                 {
@@ -150,7 +150,7 @@ export function FieldSelect({
                 },
               ]
             : [memoizedFieldOptions[0]]
-          : []
+          : []) as unknown) as EuiComboBoxOptionOption[]
       }
       singleSelection={{ asPlainText: true }}
       onChange={choices => {

x-pack/legacy/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/create_analytics_form/create_analytics_form.tsx

@@ -8,7 +8,7 @@ import React, { Fragment, FC, useEffect, useMemo } from 'react';
 
 import {
   EuiComboBox,
-  EuiComboBoxOptionProps,
+  EuiComboBoxOptionOption,
   EuiForm,
   EuiFieldText,
   EuiFormRow,
@@ -118,7 +118,7 @@ export const CreateAnalyticsForm: FC<CreateAnalyticsFormProps> = ({ actions, sta
     }
   };
 
-  const onCreateOption = (searchValue: string, flattenedOptions: EuiComboBoxOptionProps[]) => {
+  const onCreateOption = (searchValue: string, flattenedOptions: EuiComboBoxOptionOption[]) => {
     const normalizedSearchValue = searchValue.trim().toLowerCase();
 
     if (!normalizedSearchValue) {
@@ -132,7 +132,7 @@ export const CreateAnalyticsForm: FC<CreateAnalyticsFormProps> = ({ actions, sta
     // Create the option if it doesn't exist.
     if (
       !flattenedOptions.some(
-        (option: EuiComboBoxOptionProps) =>
+        (option: EuiComboBoxOptionOption) =>
           option.label.trim().toLowerCase() === normalizedSearchValue
       )
     ) {
@@ -164,7 +164,7 @@ export const CreateAnalyticsForm: FC<CreateAnalyticsFormProps> = ({ actions, sta
 
       // If sourceIndex has changed load analysis field options again
       if (previousSourceIndex !== sourceIndex || previousJobType !== jobType) {
-        const analyzedFieldsOptions: EuiComboBoxOptionProps[] = [];
+        const analyzedFieldsOptions: EuiComboBoxOptionOption[] = [];
 
         if (resp.field_selection) {
           resp.field_selection.forEach((selectedField: FieldSelectionItem) => {
@@ -229,7 +229,7 @@ export const CreateAnalyticsForm: FC<CreateAnalyticsFormProps> = ({ actions, sta
         // Get fields and filter for supported types for job type
         const { fields } = newJobCapsService;
 
-        const depVarOptions: EuiComboBoxOptionProps[] = [];
+        const depVarOptions: EuiComboBoxOptionOption[] = [];
 
         fields.forEach((field: Field) => {
           if (shouldAddAsDepVarOption(field, jobType)) {
@@ -276,7 +276,7 @@ export const CreateAnalyticsForm: FC<CreateAnalyticsFormProps> = ({ actions, sta
     return errors;
   };
 
-  const onSourceIndexChange = (selectedOptions: EuiComboBoxOptionProps[]) => {
+  const onSourceIndexChange = (selectedOptions: EuiComboBoxOptionOption[]) => {
     setFormState({
       excludes: [],
       excludesOptions: [],

x-pack/legacy/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/hooks/use_create_analytics_form/state.ts

@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EuiComboBoxOptionProps } from '@elastic/eui';
+import { EuiComboBoxOptionOption } from '@elastic/eui';
 import { DeepPartial } from '../../../../../../../common/types/common';
 import { checkPermission } from '../../../../../privilege/check_privilege';
 import { mlNodesAvailable } from '../../../../../ml_nodes_check/check_ml_nodes';
@@ -46,7 +46,7 @@ export interface State {
     createIndexPattern: boolean;
     dependentVariable: DependentVariable;
     dependentVariableFetchFail: boolean;
-    dependentVariableOptions: EuiComboBoxOptionProps[] | [];
+    dependentVariableOptions: EuiComboBoxOptionOption[];
     description: string;
     destinationIndex: EsIndexName;
     destinationIndexNameExists: boolean;
@@ -54,7 +54,7 @@ export interface State {
     destinationIndexNameValid: boolean;
     destinationIndexPatternTitleExists: boolean;
     excludes: string[];
-    excludesOptions: EuiComboBoxOptionProps[];
+    excludesOptions: EuiComboBoxOptionOption[];
     fieldOptionsFetchFail: boolean;
     jobId: DataFrameAnalyticsId;
     jobIdExists: boolean;

x-pack/legacy/plugins/ml/public/application/datavisualizer/file_based/components/edit_flyout/__snapshots__/overrides.test.js.snap

@@ -40,6 +40,7 @@ exports[`Overrides render overrides 1`] = `
     labelType="label"
   >
     <EuiComboBox
+      async={false}
       compressed={false}
       fullWidth={false}
       isClearable={false}
@@ -99,6 +100,7 @@ exports[`Overrides render overrides 1`] = `
     labelType="label"
   >
     <EuiComboBox
+      async={false}
       compressed={false}
       fullWidth={false}
       isClearable={false}
@@ -338,6 +340,7 @@ exports[`Overrides render overrides 1`] = `
     labelType="label"
   >
     <EuiComboBox
+      async={false}
       compressed={false}
       fullWidth={false}
       isClearable={false}

x-pack/legacy/plugins/ml/public/application/jobs/components/custom_url_editor/__snapshots__/editor.test.tsx.snap

@@ -135,6 +135,7 @@ exports[`CustomUrlEditor renders the editor for a dashboard type URL with a labe
       labelType="label"
     >
       <EuiComboBox
+        async={false}
         compressed={false}
         fullWidth={false}
         isClearable={true}
@@ -334,6 +335,7 @@ exports[`CustomUrlEditor renders the editor for a discover type URL with an enti
       labelType="label"
     >
       <EuiComboBox
+        async={false}
         compressed={false}
         fullWidth={false}
         isClearable={true}
@@ -571,6 +573,7 @@ exports[`CustomUrlEditor renders the editor for a discover type URL with valid t
       labelType="label"
     >
       <EuiComboBox
+        async={false}
         compressed={false}
         fullWidth={false}
         isClearable={true}
@@ -808,6 +811,7 @@ exports[`CustomUrlEditor renders the editor for a new dashboard type URL with no
       labelType="label"
     >
       <EuiComboBox
+        async={false}
         compressed={false}
         fullWidth={false}
         isClearable={true}

x-pack/legacy/plugins/ml/public/application/jobs/components/custom_url_editor/editor.tsx

@@ -8,6 +8,7 @@ import React, { ChangeEvent, FC } from 'react';
 
 import {
   EuiComboBox,
+  EuiComboBoxOptionOption,
   EuiFieldText,
   EuiFlexGroup,
   EuiFlexItem,
@@ -61,11 +62,6 @@ interface CustomUrlEditorProps {
   queryEntityFieldNames: string[];
 }
 
-interface EuiComboBoxOption {
-  label?: string;
-  value?: string;
-}
-
 /*
  * React component for the form for editing a custom URL.
  */
@@ -117,7 +113,7 @@ export const CustomUrlEditor: FC<CustomUrlEditorProps> = ({
     });
   };
 
-  const onQueryEntitiesChange = (selectedOptions: EuiComboBoxOption[]) => {
+  const onQueryEntitiesChange = (selectedOptions: EuiComboBoxOptionOption[]) => {
     const selectedFieldNames = selectedOptions.map(option => option.label);
 
     const kibanaSettings = customUrl.kibanaSettings;
@@ -172,7 +168,7 @@ export const CustomUrlEditor: FC<CustomUrlEditorProps> = ({
   });
 
   const entityOptions = queryEntityFieldNames.map(fieldName => ({ label: fieldName }));
-  let selectedEntityOptions: EuiComboBoxOption[] = [];
+  let selectedEntityOptions: EuiComboBoxOptionOption[] = [];
   if (kibanaSettings !== undefined && kibanaSettings.queryFieldNames !== undefined) {
     const queryFieldNames: string[] = kibanaSettings.queryFieldNames;
     selectedEntityOptions = queryFieldNames.map(fieldName => ({ label: fieldName }));

x-pack/legacy/plugins/ml/public/application/jobs/jobs_list/components/ml_job_editor/ml_job_editor.tsx

@@ -6,7 +6,7 @@
 
 import React, { FC } from 'react';
 
-import { EuiCodeEditor } from '@elastic/eui';
+import { EuiCodeEditor, EuiCodeEditorProps } from '@elastic/eui';
 import { expandLiteralStrings } from '../../../../../../shared_imports';
 import { xJsonMode } from '../../../../components/custom_hooks';
 
@@ -20,7 +20,7 @@ interface MlJobEditorProps {
   readOnly?: boolean;
   syntaxChecking?: boolean;
   theme?: string;
-  onChange?: Function;
+  onChange?: EuiCodeEditorProps['onChange'];
 }
 export const MLJobEditor: FC<MlJobEditorProps> = ({
   value,

x-pack/legacy/plugins/ml/public/application/jobs/new_job/common/components/job_groups_input.tsx

@@ -6,7 +6,7 @@
 
 import React, { FC, memo } from 'react';
 import { i18n } from '@kbn/i18n';
-import { EuiComboBox, EuiComboBoxOptionProps } from '@elastic/eui';
+import { EuiComboBox, EuiComboBoxOptionOption } from '@elastic/eui';
 import { Validation } from '../job_validator';
 import { tabColor } from '../../../../../../common/util/group_color_utils';
 import { Description } from '../../pages/components/job_details_step/components/groups/description';
@@ -20,28 +20,28 @@ export interface JobGroupsInputProps {
 
 export const JobGroupsInput: FC<JobGroupsInputProps> = memo(
   ({ existingGroups, selectedGroups, onChange, validation }) => {
-    const options = existingGroups.map<EuiComboBoxOptionProps>(g => ({
+    const options = existingGroups.map<EuiComboBoxOptionOption>(g => ({
       label: g,
       color: tabColor(g),
     }));
 
-    const selectedOptions = selectedGroups.map<EuiComboBoxOptionProps>(g => ({
+    const selectedOptions = selectedGroups.map<EuiComboBoxOptionOption>(g => ({
       label: g,
       color: tabColor(g),
     }));
 
-    function onChangeCallback(optionsIn: EuiComboBoxOptionProps[]) {
+    function onChangeCallback(optionsIn: EuiComboBoxOptionOption[]) {
       onChange(optionsIn.map(g => g.label));
     }
 
-    function onCreateGroup(input: string, flattenedOptions: EuiComboBoxOptionProps[]) {
+    function onCreateGroup(input: string, flattenedOptions: EuiComboBoxOptionOption[]) {
       const normalizedSearchValue = input.trim().toLowerCase();
 
       if (!normalizedSearchValue) {
         return;
       }
 
-      const newGroup: EuiComboBoxOptionProps = {
+      const newGroup: EuiComboBoxOptionOption = {
         label: input,
         color: tabColor(input),
       };

x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/datafeed_step/components/time_field/time_field_select.tsx

@@ -5,7 +5,7 @@
  */
 
 import React, { FC, useContext } from 'react';
-import { EuiComboBox, EuiComboBoxOptionProps } from '@elastic/eui';
+import { EuiComboBox, EuiComboBoxOptionOption } from '@elastic/eui';
 
 import { JobCreatorContext } from '../../../job_creator_context';
 import { Field } from '../../../../../../../../../common/types/fields';
@@ -19,14 +19,17 @@ interface Props {
 
 export const TimeFieldSelect: FC<Props> = ({ fields, changeHandler, selectedField }) => {
   const { jobCreator } = useContext(JobCreatorContext);
-  const options: EuiComboBoxOptionProps[] = createFieldOptions(fields, jobCreator.additionalFields);
+  const options: EuiComboBoxOptionOption[] = createFieldOptions(
+    fields,
+    jobCreator.additionalFields
+  );
 
-  const selection: EuiComboBoxOptionProps[] = [];
+  const selection: EuiComboBoxOptionOption[] = [];
   if (selectedField !== null) {
     selection.push({ label: selectedField });
   }
 
-  function onChange(selectedOptions: EuiComboBoxOptionProps[]) {
+  function onChange(selectedOptions: EuiComboBoxOptionOption[]) {
     const option = selectedOptions[0];
     if (typeof option !== 'undefined') {
       changeHandler(option.label);

x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/job_details_step/components/additional_section/components/calendars/calendars_selection.tsx

@@ -9,7 +9,7 @@ import { FormattedMessage } from '@kbn/i18n/react';
 import {
   EuiButtonIcon,
   EuiComboBox,
-  EuiComboBoxOptionProps,
+  EuiComboBoxOptionOption,
   EuiComboBoxProps,
   EuiFlexGroup,
   EuiFlexItem,
@@ -28,10 +28,10 @@ import { GLOBAL_CALENDAR } from '../../../../../../../../../../../common/constan
 export const CalendarsSelection: FC = () => {
   const { jobCreator, jobCreatorUpdate } = useContext(JobCreatorContext);
   const [selectedCalendars, setSelectedCalendars] = useState<Calendar[]>(jobCreator.calendars);
-  const [selectedOptions, setSelectedOptions] = useState<Array<EuiComboBoxOptionProps<Calendar>>>(
+  const [selectedOptions, setSelectedOptions] = useState<Array<EuiComboBoxOptionOption<Calendar>>>(
     []
   );
-  const [options, setOptions] = useState<Array<EuiComboBoxOptionProps<Calendar>>>([]);
+  const [options, setOptions] = useState<Array<EuiComboBoxOptionOption<Calendar>>>([]);
   const [isLoading, setIsLoading] = useState(false);
 
   async function loadCalendars() {

x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/job_details_step/components/groups/groups_input.tsx

@@ -5,7 +5,7 @@
  */
 
 import React, { FC, useState, useContext, useEffect } from 'react';
-import { EuiComboBox, EuiComboBoxOptionProps } from '@elastic/eui';
+import { EuiComboBox, EuiComboBoxOptionOption } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { JobCreatorContext } from '../../../job_creator_context';
 import { tabColor } from '../../../../../../../../../common/util/group_color_utils';
@@ -24,28 +24,28 @@ export const GroupsInput: FC = () => {
     jobCreatorUpdate();
   }, [selectedGroups.join()]);
 
-  const options: EuiComboBoxOptionProps[] = existingJobsAndGroups.groupIds.map((g: string) => ({
+  const options: EuiComboBoxOptionOption[] = existingJobsAndGroups.groupIds.map((g: string) => ({
     label: g,
     color: tabColor(g),
   }));
 
-  const selectedOptions: EuiComboBoxOptionProps[] = selectedGroups.map((g: string) => ({
+  const selectedOptions: EuiComboBoxOptionOption[] = selectedGroups.map((g: string) => ({
     label: g,
     color: tabColor(g),
   }));
 
-  function onChange(optionsIn: EuiComboBoxOptionProps[]) {
+  function onChange(optionsIn: EuiComboBoxOptionOption[]) {
     setSelectedGroups(optionsIn.map(g => g.label));
   }
 
-  function onCreateGroup(input: string, flattenedOptions: EuiComboBoxOptionProps[]) {
+  function onCreateGroup(input: string, flattenedOptions: EuiComboBoxOptionOption[]) {
     const normalizedSearchValue = input.trim().toLowerCase();
 
     if (!normalizedSearchValue) {
       return;
     }
 
-    const newGroup: EuiComboBoxOptionProps = {
+    const newGroup: EuiComboBoxOptionOption = {
       label: input,
       color: tabColor(input),
     };

x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/pick_fields_step/components/advanced_detector_modal/advanced_detector_modal.tsx

@@ -10,7 +10,7 @@ import {
   EuiFlexItem,
   EuiFlexGroup,
   EuiFlexGrid,
-  EuiComboBoxOptionProps,
+  EuiComboBoxOptionOption,
   EuiHorizontalRule,
   EuiTextArea,
 } from '@elastic/eui';
@@ -54,11 +54,11 @@ export interface ModalPayload {
   index?: number;
 }
 
-const emptyOption: EuiComboBoxOptionProps = {
+const emptyOption: EuiComboBoxOptionOption = {
   label: '',
 };
 
-const excludeFrequentOptions: EuiComboBoxOptionProps[] = [{ label: 'all' }, { label: 'none' }];
+const excludeFrequentOptions: EuiComboBoxOptionOption[] = [{ label: 'all' }, { label: 'none' }];
 
 export const AdvancedDetectorModal: FC<Props> = ({
   payload,
@@ -90,7 +90,7 @@ export const AdvancedDetectorModal: FC<Props> = ({
   const usingScriptFields = jobCreator.additionalFields.length > 0;
   // list of aggregation combobox options.
 
-  const aggOptions: EuiComboBoxOptionProps[] = aggs
+  const aggOptions: EuiComboBoxOptionOption[] = aggs
     .filter(agg => filterAggs(agg, usingScriptFields))
     .map(createAggOption);
 
@@ -101,19 +101,19 @@ export const AdvancedDetectorModal: FC<Props> = ({
     fields
   );
 
-  const allFieldOptions: EuiComboBoxOptionProps[] = [
+  const allFieldOptions: EuiComboBoxOptionOption[] = [
     ...createFieldOptions(fields, jobCreator.additionalFields),
   ].sort(comboBoxOptionsSort);
 
-  const splitFieldOptions: EuiComboBoxOptionProps[] = [
+  const splitFieldOptions: EuiComboBoxOptionOption[] = [
     ...allFieldOptions,
     ...createMlcategoryFieldOption(jobCreator.categorizationFieldName),
   ].sort(comboBoxOptionsSort);
 
   const eventRateField = fields.find(f => f.id === EVENT_RATE_FIELD_ID);
 
-  const onOptionChange = (func: (p: EuiComboBoxOptionProps) => any) => (
+  const onOptionChange = (func: (p: EuiComboBoxOptionOption) => any) => (
-    selectedOptions: EuiComboBoxOptionProps[]
+    selectedOptions: EuiComboBoxOptionOption[]
   ) => {
     func(selectedOptions[0] || emptyOption);
   };
@@ -312,7 +312,7 @@ export const AdvancedDetectorModal: FC<Props> = ({
   );
 };
 
-function createAggOption(agg: Aggregation | null): EuiComboBoxOptionProps {
+function createAggOption(agg: Aggregation | null): EuiComboBoxOptionOption {
   if (agg === null) {
     return emptyOption;
   }
@@ -328,7 +328,7 @@ function filterAggs(agg: Aggregation, usingScriptFields: boolean) {
   return agg.fields !== undefined && (usingScriptFields || agg.fields.length);
 }
 
-function createFieldOption(field: Field | null): EuiComboBoxOptionProps {
+function createFieldOption(field: Field | null): EuiComboBoxOptionOption {
   if (field === null) {
     return emptyOption;
   }
@@ -337,7 +337,7 @@ function createFieldOption(field: Field | null): EuiComboBoxOptionProps {
   };
 }
 
-function createExcludeFrequentOption(excludeFrequent: string | null): EuiComboBoxOptionProps {
+function createExcludeFrequentOption(excludeFrequent: string | null): EuiComboBoxOptionOption {
   if (excludeFrequent === null) {
     return emptyOption;
   }
@@ -406,15 +406,15 @@ function createDefaultDescription(dtr: RichDetector) {
 // if the options list only contains one option and nothing has been selected, set
 // selectedOptions list to be an empty array
 function createSelectedOptions(
-  selectedOption: EuiComboBoxOptionProps,
+  selectedOption: EuiComboBoxOptionOption,
-  options: EuiComboBoxOptionProps[]
+  options: EuiComboBoxOptionOption[]
-): EuiComboBoxOptionProps[] {
+): EuiComboBoxOptionOption[] {
   return (options.length === 1 && options[0].label !== selectedOption.label) ||
     selectedOption.label === ''
     ? []
     : [selectedOption];
 }
 
-function comboBoxOptionsSort(a: EuiComboBoxOptionProps, b: EuiComboBoxOptionProps) {
+function comboBoxOptionsSort(a: EuiComboBoxOptionOption, b: EuiComboBoxOptionOption) {
   return a.label.localeCompare(b.label);
 }

x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/pick_fields_step/components/agg_select/agg_select.tsx

@@ -5,7 +5,7 @@
  */
 
 import React, { FC, useContext, useState, useEffect } from 'react';
-import { EuiComboBox, EuiComboBoxOptionProps, EuiFormRow } from '@elastic/eui';
+import { EuiComboBox, EuiComboBoxOptionOption, EuiFormRow } from '@elastic/eui';
 
 import { JobCreatorContext } from '../../../job_creator_context';
 import { Field, Aggregation, AggFieldPair } from '../../../../../../../../../common/types/fields';
@@ -26,12 +26,12 @@ export interface DropDownOption {
   options: DropDownLabel[];
 }
 
-export type DropDownProps = DropDownLabel[] | EuiComboBoxOptionProps[];
+export type DropDownProps = DropDownLabel[] | EuiComboBoxOptionOption[];
 
 interface Props {
   fields: Field[];
-  changeHandler(d: EuiComboBoxOptionProps[]): void;
+  changeHandler(d: EuiComboBoxOptionOption[]): void;
-  selectedOptions: EuiComboBoxOptionProps[];
+  selectedOptions: EuiComboBoxOptionOption[];
   removeOptions: AggFieldPair[];
 }
 
@@ -42,7 +42,7 @@ export const AggSelect: FC<Props> = ({ fields, changeHandler, selectedOptions, r
   // so they can be removed from the dropdown list
   const removeLabels = removeOptions.map(createLabel);
 
-  const options: EuiComboBoxOptionProps[] = fields.map(f => {
+  const options: EuiComboBoxOptionOption[] = fields.map(f => {
     const aggOption: DropDownOption = { label: f.name, options: [] };
     if (typeof f.aggs !== 'undefined') {
       aggOption.options = f.aggs

x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/pick_fields_step/components/categorization_field/categorization_field_select.tsx

@@ -5,7 +5,7 @@
  */
 
 import React, { FC, useContext } from 'react';
-import { EuiComboBox, EuiComboBoxOptionProps } from '@elastic/eui';
+import { EuiComboBox, EuiComboBoxOptionOption } from '@elastic/eui';
 
 import { JobCreatorContext } from '../../../job_creator_context';
 import { Field } from '../../../../../../../../../common/types/fields';
@@ -19,16 +19,16 @@ interface Props {
 
 export const CategorizationFieldSelect: FC<Props> = ({ fields, changeHandler, selectedField }) => {
   const { jobCreator } = useContext(JobCreatorContext);
-  const options: EuiComboBoxOptionProps[] = [
+  const options: EuiComboBoxOptionOption[] = [
     ...createFieldOptions(fields, jobCreator.additionalFields),
   ];
 
-  const selection: EuiComboBoxOptionProps[] = [];
+  const selection: EuiComboBoxOptionOption[] = [];
   if (selectedField !== null) {
     selection.push({ label: selectedField });
   }
 
-  function onChange(selectedOptions: EuiComboBoxOptionProps[]) {
+  function onChange(selectedOptions: EuiComboBoxOptionOption[]) {
     const option = selectedOptions[0];
     if (typeof option !== 'undefined') {
       changeHandler(option.label);

x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/pick_fields_step/components/influencers/influencers_select.tsx

@@ -5,7 +5,7 @@
  */
 
 import React, { FC, useContext } from 'react';
-import { EuiComboBox, EuiComboBoxOptionProps } from '@elastic/eui';
+import { EuiComboBox, EuiComboBoxOptionOption } from '@elastic/eui';
 
 import { JobCreatorContext } from '../../../job_creator_context';
 import { Field } from '../../../../../../../../../common/types/fields';
@@ -22,14 +22,14 @@ interface Props {
 
 export const InfluencersSelect: FC<Props> = ({ fields, changeHandler, selectedInfluencers }) => {
   const { jobCreator } = useContext(JobCreatorContext);
-  const options: EuiComboBoxOptionProps[] = [
+  const options: EuiComboBoxOptionOption[] = [
     ...createFieldOptions(fields, jobCreator.additionalFields),
     ...createMlcategoryFieldOption(jobCreator.categorizationFieldName),
   ];
 
-  const selection: EuiComboBoxOptionProps[] = selectedInfluencers.map(i => ({ label: i }));
+  const selection: EuiComboBoxOptionOption[] = selectedInfluencers.map(i => ({ label: i }));
 
-  function onChange(selectedOptions: EuiComboBoxOptionProps[]) {
+  function onChange(selectedOptions: EuiComboBoxOptionOption[]) {
     changeHandler(selectedOptions.map(o => o.label));
   }
 

x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/pick_fields_step/components/split_field/split_field_select.tsx

@@ -5,7 +5,7 @@
  */
 
 import React, { FC } from 'react';
-import { EuiComboBox, EuiComboBoxOptionProps } from '@elastic/eui';
+import { EuiComboBox, EuiComboBoxOptionOption } from '@elastic/eui';
 
 import { Field, SplitField } from '../../../../../../../../../common/types/fields';
 
@@ -31,7 +31,7 @@ export const SplitFieldSelect: FC<Props> = ({
   testSubject,
   placeholder,
 }) => {
-  const options: EuiComboBoxOptionProps[] = fields.map(
+  const options: EuiComboBoxOptionOption[] = fields.map(
     f =>
       ({
         label: f.name,
@@ -39,12 +39,12 @@ export const SplitFieldSelect: FC<Props> = ({
       } as DropDownLabel)
   );
 
-  const selection: EuiComboBoxOptionProps[] = [];
+  const selection: EuiComboBoxOptionOption[] = [];
   if (selectedField !== null) {
     selection.push({ label: selectedField.name, field: selectedField } as DropDownLabel);
   }
 
-  function onChange(selectedOptions: EuiComboBoxOptionProps[]) {
+  function onChange(selectedOptions: EuiComboBoxOptionOption[]) {
     const option = selectedOptions[0] as DropDownLabel;
     if (typeof option !== 'undefined') {
       changeHandler(option.field);

x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/pick_fields_step/components/summary_count_field/summary_count_field_select.tsx

@@ -5,7 +5,7 @@
  */
 
 import React, { FC, useContext } from 'react';
-import { EuiComboBox, EuiComboBoxOptionProps } from '@elastic/eui';
+import { EuiComboBox, EuiComboBoxOptionOption } from '@elastic/eui';
 
 import { JobCreatorContext } from '../../../job_creator_context';
 import { Field } from '../../../../../../../../../common/types/fields';
@@ -22,17 +22,17 @@ interface Props {
 
 export const SummaryCountFieldSelect: FC<Props> = ({ fields, changeHandler, selectedField }) => {
   const { jobCreator } = useContext(JobCreatorContext);
-  const options: EuiComboBoxOptionProps[] = [
+  const options: EuiComboBoxOptionOption[] = [
     ...createFieldOptions(fields, jobCreator.additionalFields),
     ...createDocCountFieldOption(jobCreator.aggregationFields.length > 0),
   ];
 
-  const selection: EuiComboBoxOptionProps[] = [];
+  const selection: EuiComboBoxOptionOption[] = [];
   if (selectedField !== null) {
     selection.push({ label: selectedField });
   }
 
-  function onChange(selectedOptions: EuiComboBoxOptionProps[]) {
+  function onChange(selectedOptions: EuiComboBoxOptionOption[]) {
     const option = selectedOptions[0];
     if (typeof option !== 'undefined') {
       changeHandler(option.label);

x-pack/legacy/plugins/ml/public/application/timeseriesexplorer/components/entity_control/entity_control.tsx

@@ -11,7 +11,7 @@ import { i18n } from '@kbn/i18n';
 
 import {
   EuiComboBox,
-  EuiComboBoxOptionProps,
+  EuiComboBoxOptionOption,
   EuiFlexItem,
   EuiFormRow,
   EuiToolTip,
@@ -29,13 +29,13 @@ interface EntityControlProps {
   isLoading: boolean;
   onSearchChange: (entity: Entity, queryTerm: string) => void;
   forceSelection: boolean;
-  options: EuiComboBoxOptionProps[];
+  options: EuiComboBoxOptionOption[];
 }
 
 interface EntityControlState {
-  selectedOptions: EuiComboBoxOptionProps[] | undefined;
+  selectedOptions: EuiComboBoxOptionOption[] | undefined;
   isLoading: boolean;
-  options: EuiComboBoxOptionProps[] | undefined;
+  options: EuiComboBoxOptionOption[] | undefined;
 }
 
 export class EntityControl extends Component<EntityControlProps, EntityControlState> {
@@ -53,7 +53,7 @@ export class EntityControl extends Component<EntityControlProps, EntityControlSt
 
     const { fieldValue } = entity;
 
-    let selectedOptionsUpdate: EuiComboBoxOptionProps[] | undefined = selectedOptions;
+    let selectedOptionsUpdate: EuiComboBoxOptionOption[] | undefined = selectedOptions;
     if (
       (selectedOptions === undefined && fieldValue.length > 0) ||
       (Array.isArray(selectedOptions) &&
@@ -84,7 +84,7 @@ export class EntityControl extends Component<EntityControlProps, EntityControlSt
     }
   }
 
-  onChange = (selectedOptions: EuiComboBoxOptionProps[]) => {
+  onChange = (selectedOptions: EuiComboBoxOptionOption[]) => {
     const options = selectedOptions.length > 0 ? selectedOptions : undefined;
     this.setState({
       selectedOptions: options,

x-pack/legacy/plugins/reporting/public/components/__snapshots__/report_info_button.test.tsx.snap

@@ -182,9 +182,13 @@ Array [
                             class="euiFlyoutBody__overflow"
                           >
                             <div
-                              class="euiText euiText--medium"
+                              class="euiFlyoutBody__overflowContent"
                             >
-                              Could not fetch the job info
+                              <div
+                                class="euiText euiText--medium"
+                              >
+                                Could not fetch the job info
+                              </div>
                             </div>
                           </div>
                         </div>
@@ -243,9 +247,13 @@ Array [
                               class="euiFlyoutBody__overflow"
                             >
                               <div
-                                class="euiText euiText--medium"
+                                class="euiFlyoutBody__overflowContent"
                               >
-                                Could not fetch the job info
+                                <div
+                                  class="euiText euiText--medium"
+                                >
+                                  Could not fetch the job info
+                                </div>
                               </div>
                             </div>
                           </div>
@@ -332,13 +340,17 @@ Array [
                       <div
                         className="euiFlyoutBody__overflow"
                       >
-                        <EuiText>
+                        <div
-                          <div
+                          className="euiFlyoutBody__overflowContent"
-                            className="euiText euiText--medium"
+                        >
-                          >
+                          <EuiText>
-                            Could not fetch the job info
+                            <div
-                          </div>
+                              className="euiText euiText--medium"
-                        </EuiText>
+                            >
+                              Could not fetch the job info
+                            </div>
+                          </EuiText>
+                        </div>
                       </div>
                     </div>
                   </EuiFlyoutBody>
@@ -440,13 +452,17 @@ Array [
         <div
           className="euiFlyoutBody__overflow"
         >
-          <EuiText>
+          <div
-            <div
+            className="euiFlyoutBody__overflowContent"
-              className="euiText euiText--medium"
+          >
-            >
+            <EuiText>
-              Could not fetch the job info
+              <div
-            </div>
+                className="euiText euiText--medium"
-          </EuiText>
+              >
+                Could not fetch the job info
+              </div>
+            </EuiText>
+          </div>
         </div>
       </div>
     </EuiFlyoutBody>
@@ -599,8 +615,12 @@ Array [
                             class="euiFlyoutBody__overflow"
                           >
                             <div
-                              class="euiText euiText--medium"
+                              class="euiFlyoutBody__overflowContent"
-                            />
+                            >
+                              <div
+                                class="euiText euiText--medium"
+                              />
+                            </div>
                           </div>
                         </div>
                       </div>
@@ -658,8 +678,12 @@ Array [
                               class="euiFlyoutBody__overflow"
                             >
                               <div
-                                class="euiText euiText--medium"
+                                class="euiFlyoutBody__overflowContent"
-                              />
+                              >
+                                <div
+                                  class="euiText euiText--medium"
+                                />
+                              </div>
                             </div>
                           </div>
                         </div>
@@ -745,11 +769,15 @@ Array [
                       <div
                         className="euiFlyoutBody__overflow"
                       >
-                        <EuiText>
+                        <div
-                          <div
+                          className="euiFlyoutBody__overflowContent"
-                            className="euiText euiText--medium"
+                        >
-                          />
+                          <EuiText>
-                        </EuiText>
+                            <div
+                              className="euiText euiText--medium"
+                            />
+                          </EuiText>
+                        </div>
                       </div>
                     </div>
                   </EuiFlyoutBody>
@@ -851,11 +879,15 @@ Array [
         <div
           className="euiFlyoutBody__overflow"
         >
-          <EuiText>
+          <div
-            <div
+            className="euiFlyoutBody__overflowContent"
-              className="euiText euiText--medium"
+          >
-            />
+            <EuiText>
-          </EuiText>
+              <div
+                className="euiText euiText--medium"
+              />
+            </EuiText>
+          </div>
         </div>
       </div>
     </EuiFlyoutBody>

x-pack/legacy/plugins/siem/public/components/edit_data_provider/helpers.tsx

@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 import { findIndex } from 'lodash/fp';
-import { EuiComboBoxOptionProps } from '@elastic/eui';
+import { EuiComboBoxOptionOption } from '@elastic/eui';
 
 import { BrowserField, BrowserFields, getAllFieldsByName } from '../../containers/source';
 import {
@@ -16,7 +16,7 @@ import {
 import * as i18n from './translations';
 
 /** The list of operators to display in the `Operator` select  */
-export const operatorLabels: EuiComboBoxOptionProps[] = [
+export const operatorLabels: EuiComboBoxOptionOption[] = [
   {
     label: i18n.IS,
   },
@@ -38,7 +38,7 @@ export const getFieldNames = (category: Partial<BrowserField>): string[] =>
     : [];
 
 /** Returns all field names by category, for display in an `EuiComboBox`  */
-export const getCategorizedFieldNames = (browserFields: BrowserFields): EuiComboBoxOptionProps[] =>
+export const getCategorizedFieldNames = (browserFields: BrowserFields): EuiComboBoxOptionOption[] =>
   Object.keys(browserFields)
     .sort()
     .map(categoryId => ({
@@ -55,8 +55,8 @@ export const selectionsAreValid = ({
   selectedOperator,
 }: {
   browserFields: BrowserFields;
-  selectedField: EuiComboBoxOptionProps[];
+  selectedField: EuiComboBoxOptionOption[];
-  selectedOperator: EuiComboBoxOptionProps[];
+  selectedOperator: EuiComboBoxOptionOption[];
 }): boolean => {
   const fieldId = selectedField.length > 0 ? selectedField[0].label : '';
   const operator = selectedOperator.length > 0 ? selectedOperator[0].label : '';
@@ -69,7 +69,7 @@ export const selectionsAreValid = ({
 
 /** Returns a `QueryOperator` based on the user's Operator selection */
 export const getQueryOperatorFromSelection = (
-  selectedOperator: EuiComboBoxOptionProps[]
+  selectedOperator: EuiComboBoxOptionOption[]
 ): QueryOperator => {
   const selection = selectedOperator.length > 0 ? selectedOperator[0].label : '';
 
@@ -88,7 +88,7 @@ export const getQueryOperatorFromSelection = (
 /**
  * Returns `true` when the search excludes results that match the specified data provider
  */
-export const getExcludedFromSelection = (selectedOperator: EuiComboBoxOptionProps[]): boolean => {
+export const getExcludedFromSelection = (selectedOperator: EuiComboBoxOptionOption[]): boolean => {
   const selection = selectedOperator.length > 0 ? selectedOperator[0].label : '';
 
   switch (selection) {

x-pack/legacy/plugins/siem/public/components/edit_data_provider/index.tsx

@@ -8,7 +8,7 @@ import { noop } from 'lodash/fp';
 import {
   EuiButton,
   EuiComboBox,
-  EuiComboBoxOptionProps,
+  EuiComboBoxOptionOption,
   EuiFieldText,
   EuiFlexGroup,
   EuiFlexItem,
@@ -64,7 +64,7 @@ const sanatizeValue = (value: string | number): string =>
 export const getInitialOperatorLabel = (
   isExcluded: boolean,
   operator: QueryOperator
-): EuiComboBoxOptionProps[] => {
+): EuiComboBoxOptionOption[] => {
   if (operator === ':') {
     return isExcluded ? [{ label: i18n.IS_NOT }] : [{ label: i18n.IS }];
   } else {
@@ -84,8 +84,8 @@ export const StatefulEditDataProvider = React.memo<Props>(
     timelineId,
     value,
   }) => {
-    const [updatedField, setUpdatedField] = useState<EuiComboBoxOptionProps[]>([{ label: field }]);
+    const [updatedField, setUpdatedField] = useState<EuiComboBoxOptionOption[]>([{ label: field }]);
-    const [updatedOperator, setUpdatedOperator] = useState<EuiComboBoxOptionProps[]>(
+    const [updatedOperator, setUpdatedOperator] = useState<EuiComboBoxOptionOption[]>(
       getInitialOperatorLabel(isExcluded, operator)
     );
     const [updatedValue, setUpdatedValue] = useState<string | number>(value);
@@ -105,13 +105,13 @@ export const StatefulEditDataProvider = React.memo<Props>(
       }
     };
 
-    const onFieldSelected = useCallback((selectedField: EuiComboBoxOptionProps[]) => {
+    const onFieldSelected = useCallback((selectedField: EuiComboBoxOptionOption[]) => {
       setUpdatedField(selectedField);
 
       focusInput();
     }, []);
 
-    const onOperatorSelected = useCallback((operatorSelected: EuiComboBoxOptionProps[]) => {
+    const onOperatorSelected = useCallback((operatorSelected: EuiComboBoxOptionOption[]) => {
       setUpdatedOperator(operatorSelected);
 
       focusInput();

x-pack/legacy/plugins/siem/public/components/timeline/search_super_select/index.tsx

@@ -16,8 +16,8 @@ import {
   EuiFilterButton,
   EuiFilterGroup,
   EuiPortal,
+  EuiSelectableOption,
 } from '@elastic/eui';
-import { Option } from '@elastic/eui/src/components/selectable/types';
 import { isEmpty } from 'lodash/fp';
 import React, { memo, useCallback, useMemo, useState } from 'react';
 import { ListProps } from 'react-virtualized';
@@ -91,10 +91,10 @@ const getBasicSelectableOptions = (timelineId: string) => [
     description: i18n.DEFAULT_TIMELINE_DESCRIPTION,
     favorite: [],
     label: i18n.DEFAULT_TIMELINE_TITLE,
-    id: null,
+    id: undefined,
     title: i18n.DEFAULT_TIMELINE_TITLE,
     checked: timelineId === '-1' ? 'on' : undefined,
-  } as Option,
+  } as EuiSelectableOption,
 ];
 
 const ORIGINAL_PAGE_SIZE = 50;
@@ -326,7 +326,7 @@ const SearchTimelineSuperSelectComponent: React.FC<SearchTimelineSuperSelectProp
                         key: `${t.title}-${index}`,
                         title: t.title,
                         checked: t.savedObjectId === timelineId ? 'on' : undefined,
-                      } as Option)
+                      } as EuiSelectableOption)
                   ),
               ]}
             >

x-pack/legacy/plugins/siem/public/pages/detection_engine/rules/all/columns.tsx

@@ -42,7 +42,7 @@ export const getActions = (
 ) => [
   {
     description: i18n.EDIT_RULE_SETTINGS,
-    icon: 'visControls',
+    icon: 'controlsHorizontal',
     name: i18n.EDIT_RULE_SETTINGS,
     onClick: (rowItem: Rule) => editRuleAction(rowItem, history),
     enabled: (rowItem: Rule) => !rowItem.immutable,

x-pack/legacy/plugins/siem/public/pages/detection_engine/rules/components/import_rule_modal/index.tsx

@@ -113,8 +113,8 @@ export const ImportRuleModalComponent = ({
               <EuiFilePicker
                 id="rule-file-picker"
                 initialPromptText={i18n.INITIAL_PROMPT_TEXT}
-                onChange={(files: FileList) => {
+                onChange={(files: FileList | null) => {
-                  setSelectedFiles(Object.keys(files).length > 0 ? files : null);
+                  setSelectedFiles(files && files.length > 0 ? files : null);
                 }}
                 display={'large'}
                 fullWidth={true}

x-pack/legacy/plugins/siem/public/pages/detection_engine/rules/details/index.tsx

@@ -274,7 +274,7 @@ const RuleDetailsPageComponent: FC<PropsFromRedux> = ({
                             <EuiFlexItem grow={false}>
                               <EuiButton
                                 href={getEditRuleUrl(ruleId ?? '')}
-                                iconType="visControls"
+                                iconType="controlsHorizontal"
                                 isDisabled={(userHasNoPermissions || rule?.immutable) ?? true}
                               >
                                 {ruleI18n.EDIT_RULE_SETTINGS}

x-pack/legacy/plugins/transform/public/app/sections/create_transform/components/aggregation_dropdown/dropdown.tsx

@@ -6,12 +6,12 @@
 
 import React from 'react';
 
-import { EuiComboBox, EuiComboBoxOptionProps } from '@elastic/eui';
+import { EuiComboBox, EuiComboBoxOptionOption } from '@elastic/eui';
 
 interface Props {
-  options: EuiComboBoxOptionProps[];
+  options: EuiComboBoxOptionOption[];
   placeholder?: string;
-  changeHandler(d: EuiComboBoxOptionProps[]): void;
+  changeHandler(d: EuiComboBoxOptionOption[]): void;
   testSubj?: string;
 }
 

x-pack/legacy/plugins/transform/public/app/sections/create_transform/components/step_define/common.ts

@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 import { get } from 'lodash';
-import { EuiComboBoxOptionProps, EuiDataGridSorting } from '@elastic/eui';
+import { EuiComboBoxOptionOption, EuiDataGridSorting } from '@elastic/eui';
 import {
   IndexPattern,
   KBN_FIELD_TYPES,
@@ -112,11 +112,11 @@ const illegalEsAggNameChars = /[[\]>]/g;
 
 export function getPivotDropdownOptions(indexPattern: IndexPattern) {
   // The available group by options
-  const groupByOptions: EuiComboBoxOptionProps[] = [];
+  const groupByOptions: EuiComboBoxOptionOption[] = [];
   const groupByOptionsData: PivotGroupByConfigWithUiSupportDict = {};
 
   // The available aggregations
-  const aggOptions: EuiComboBoxOptionProps[] = [];
+  const aggOptions: EuiComboBoxOptionOption[] = [];
   const aggOptionsData: PivotAggsConfigWithUiSupportDict = {};
 
   const ignoreFieldNames = ['_id', '_index', '_type'];

x-pack/legacy/plugins/uptime/public/components/functional/ping_list/__tests__/ping_list.test.tsx

@@ -8,7 +8,7 @@ import React from 'react';
 import { shallowWithIntl } from 'test_utils/enzyme_helpers';
 import { PingResults, Ping } from '../../../../../common/graphql/types';
 import { PingListComponent, AllLocationOption, toggleDetails } from '../ping_list';
-import { EuiComboBoxOptionProps } from '@elastic/eui';
+import { EuiComboBoxOptionOption } from '@elastic/eui';
 import { ExpandedRowMap } from '../../monitor_list/types';
 
 describe('PingList component', () => {
@@ -205,7 +205,7 @@ describe('PingList component', () => {
         loading={false}
         data={{ allPings }}
         onPageCountChange={jest.fn()}
-        onSelectedLocationChange={(loc: EuiComboBoxOptionProps[]) => {}}
+        onSelectedLocationChange={(loc: EuiComboBoxOptionOption[]) => {}}
         onSelectedStatusChange={jest.fn()}
         pageSize={30}
         selectedOption="down"

x-pack/package.json

@@ -179,7 +179,7 @@
     "@elastic/apm-rum-react": "^0.3.2",
     "@elastic/datemath": "5.0.2",
     "@elastic/ems-client": "7.6.0",
-    "@elastic/eui": "19.0.0",
+    "@elastic/eui": "20.0.2",
     "@elastic/filesaver": "1.1.2",
     "@elastic/maki": "6.1.0",
     "@elastic/node-crypto": "^1.0.0",

x-pack/plugins/infra/public/components/source_configuration/add_log_column_popover.tsx

@@ -5,7 +5,7 @@
  */
 
 import { EuiBadge, EuiButton, EuiPopover, EuiPopoverTitle, EuiSelectable } from '@elastic/eui';
-import { Option } from '@elastic/eui/src/components/selectable/types';
+import { EuiSelectableOption } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import React, { useCallback, useMemo } from 'react';
 import { v4 as uuidv4 } from 'uuid';
@@ -15,7 +15,7 @@ import { useVisibilityState } from '../../utils/use_visibility_state';
 import { euiStyled } from '../../../../observability/public';
 
 interface SelectableColumnOption {
-  optionProps: Option;
+  optionProps: EuiSelectableOption;
   columnConfiguration: LogColumnConfiguration;
 }
 
@@ -78,13 +78,13 @@ export const AddLogColumnButtonAndPopover: React.FunctionComponent<{
     [availableFields]
   );
 
-  const availableOptions = useMemo<Option[]>(
+  const availableOptions = useMemo<EuiSelectableOption[]>(
     () => availableColumnOptions.map(availableColumnOption => availableColumnOption.optionProps),
     [availableColumnOptions]
   );
 
   const handleColumnSelection = useCallback(
-    (selectedOptions: Option[]) => {
+    (selectedOptions: EuiSelectableOption[]) => {
       closePopover();
 
       const selectedOptionIndex = selectedOptions.findIndex(

x-pack/plugins/infra/public/pages/logs/log_entry_categories/sections/top_categories/datasets_selector.tsx

@@ -4,13 +4,13 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EuiComboBox, EuiComboBoxOptionProps } from '@elastic/eui';
+import { EuiComboBox, EuiComboBoxOptionOption } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React, { useCallback, useMemo } from 'react';
 
 import { getFriendlyNameForPartitionId } from '../../../../../../common/log_analysis';
 
-type DatasetOptionProps = EuiComboBoxOptionProps<string>;
+type DatasetOptionProps = EuiComboBoxOptionOption<string>;
 
 export const DatasetsSelector: React.FunctionComponent<{
   availableDatasets: string[];

x-pack/plugins/remote_clusters/public/application/sections/components/remote_cluster_form/__snapshots__/remote_cluster_form.test.js.snap

@@ -165,6 +165,7 @@ Array [
                         style="font-size:14px;display:inline-block"
                       >
                         <input
+                          aria-controls=""
                           data-test-subj="comboBoxSearchInput"
                           id="mockId"
                           role="textbox"
@@ -448,7 +449,7 @@ Array [
         aria-describedby="mockId-help mockId-error-0"
         aria-expanded="false"
         aria-haspopup="listbox"
-        class="euiComboBox euiComboBox-isInvalid euiComboBox--fullWidth"
+        class="euiComboBox euiComboBox--fullWidth euiComboBox-isInvalid"
         data-test-subj="remoteClusterFormSeedsInput"
         role="combobox"
       >
@@ -473,6 +474,7 @@ Array [
                 style="font-size: 14px; display: inline-block;"
               >
                 <input
+                  aria-controls=""
                   data-test-subj="comboBoxSearchInput"
                   id="mockId"
                   role="textbox"

x-pack/plugins/security/public/management/role_combo_box/role_combo_box_option.tsx

@@ -8,10 +8,10 @@ import React from 'react';
 
 import { i18n } from '@kbn/i18n';
 
-import { EuiComboBoxOptionProps, EuiText } from '@elastic/eui';
+import { EuiComboBoxOptionOption, EuiText } from '@elastic/eui';
 
 interface Props {
-  option: EuiComboBoxOptionProps<{ isDeprecated: boolean }>;
+  option: EuiComboBoxOptionOption<{ isDeprecated: boolean }>;
 }
 
 export const RoleComboBoxOption = ({ option }: Props) => {

x-pack/plugins/security/public/management/role_mappings/edit_role_mapping/rule_editor_panel/json_rule_editor.test.tsx

@@ -55,7 +55,7 @@ describe('JSONRuleEditor', () => {
     const wrapper = mountWithIntl(<JSONRuleEditor {...props} />);
 
     const { value } = wrapper.find(EuiCodeEditor).props();
-    expect(JSON.parse(value)).toEqual({
+    expect(JSON.parse(value as string)).toEqual({
       all: [
         {
           any: [{ field: { username: '*' } }],
@@ -90,10 +90,7 @@ describe('JSONRuleEditor', () => {
 
     const allRule = JSON.stringify(new AllRule().toRaw());
     act(() => {
-      wrapper
+      wrapper.find(EuiCodeEditor).props().onChange!(allRule + ', this makes invalid JSON');
-        .find(EuiCodeEditor)
-        .props()
-        .onChange(allRule + ', this makes invalid JSON');
     });
 
     expect(props.onValidityChange).toHaveBeenCalledTimes(1);
@@ -121,10 +118,7 @@ describe('JSONRuleEditor', () => {
     });
 
     act(() => {
-      wrapper
+      wrapper.find(EuiCodeEditor).props().onChange!(invalidRule);
-        .find(EuiCodeEditor)
-        .props()
-        .onChange(invalidRule);
     });
 
     expect(props.onValidityChange).toHaveBeenCalledTimes(1);
@@ -143,10 +137,7 @@ describe('JSONRuleEditor', () => {
 
     const allRule = JSON.stringify(new AllRule().toRaw());
     act(() => {
-      wrapper
+      wrapper.find(EuiCodeEditor).props().onChange!(allRule + ', this makes invalid JSON');
-        .find(EuiCodeEditor)
-        .props()
-        .onChange(allRule + ', this makes invalid JSON');
     });
 
     expect(props.onValidityChange).toHaveBeenCalledTimes(1);
@@ -156,10 +147,7 @@ describe('JSONRuleEditor', () => {
     props.onValidityChange.mockReset();
 
     act(() => {
-      wrapper
+      wrapper.find(EuiCodeEditor).props().onChange!(allRule);
-        .find(EuiCodeEditor)
-        .props()
-        .onChange(allRule);
     });
 
     expect(props.onValidityChange).toHaveBeenCalledTimes(1);

x-pack/plugins/security/public/management/roles/edit_role/privileges/es/__snapshots__/cluster_privileges.test.tsx.snap

@@ -6,6 +6,7 @@ exports[`it renders without crashing 1`] = `
     key="clusterPrivs"
   >
     <EuiComboBox
+      async={false}
       compressed={false}
       data-test-subj="cluster-privileges-combobox"
       fullWidth={false}

x-pack/plugins/security/public/management/roles/edit_role/privileges/es/__snapshots__/elasticsearch_privileges.test.tsx.snap

@@ -108,6 +108,7 @@ exports[`it renders without crashing 1`] = `
       labelType="label"
     >
       <EuiComboBox
+        async={false}
         compressed={false}
         fullWidth={false}
         isClearable={true}

x-pack/plugins/security/public/management/roles/edit_role/privileges/es/__snapshots__/index_privilege_form.test.tsx.snap

@@ -26,6 +26,7 @@ exports[`it renders without crashing 1`] = `
             labelType="label"
           >
             <EuiComboBox
+              async={false}
               compressed={false}
               data-test-subj="indicesInput0"
               fullWidth={false}
@@ -56,6 +57,7 @@ exports[`it renders without crashing 1`] = `
             labelType="label"
           >
             <EuiComboBox
+              async={false}
               compressed={false}
               data-test-subj="privilegesInput0"
               fullWidth={false}

x-pack/plugins/security/public/management/roles/edit_role/privileges/es/index_privilege_form.tsx

@@ -6,7 +6,7 @@
 import {
   EuiButtonIcon,
   EuiComboBox,
-  EuiComboBoxOptionProps,
+  EuiComboBoxOptionOption,
   EuiFlexGroup,
   EuiFlexItem,
   EuiFormRow,
@@ -378,14 +378,14 @@ export class IndexPrivilegeForm extends Component<Props, State> {
     });
   };
 
-  private onIndexPatternsChange = (newPatterns: EuiComboBoxOptionProps[]) => {
+  private onIndexPatternsChange = (newPatterns: EuiComboBoxOptionOption[]) => {
     this.props.onChange({
       ...this.props.indexPrivilege,
       names: newPatterns.map(fromOption),
     });
   };
 
-  private onPrivilegeChange = (newPrivileges: EuiComboBoxOptionProps[]) => {
+  private onPrivilegeChange = (newPrivileges: EuiComboBoxOptionOption[]) => {
     this.props.onChange({
       ...this.props.indexPrivilege,
       privileges: newPrivileges.map(fromOption),
@@ -418,7 +418,7 @@ export class IndexPrivilegeForm extends Component<Props, State> {
     });
   };
 
-  private onGrantedFieldsChange = (grantedFields: EuiComboBoxOptionProps[]) => {
+  private onGrantedFieldsChange = (grantedFields: EuiComboBoxOptionOption[]) => {
     this.props.onChange({
       ...this.props.indexPrivilege,
       field_security: {
@@ -447,7 +447,7 @@ export class IndexPrivilegeForm extends Component<Props, State> {
     });
   };
 
-  private onDeniedFieldsChange = (deniedFields: EuiComboBoxOptionProps[]) => {
+  private onDeniedFieldsChange = (deniedFields: EuiComboBoxOptionOption[]) => {
     this.props.onChange({
       ...this.props.indexPrivilege,
       field_security: {

x-pack/plugins/security/public/management/roles/edit_role/privileges/kibana/space_aware_privilege_section/space_selector.tsx

@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EuiComboBox, EuiComboBoxOptionProps, EuiHealth, EuiHighlight } from '@elastic/eui';
+import { EuiComboBox, EuiComboBoxOptionOption, EuiHealth, EuiHighlight } from '@elastic/eui';
 import { InjectedIntl } from '@kbn/i18n/react';
 import React, { Component } from 'react';
 import { Space, getSpaceColor } from '../../../../../../../../spaces/public';
@@ -65,7 +65,7 @@ export class SpaceSelector extends Component<Props, {}> {
     );
   }
 
-  private onChange = (selectedSpaces: EuiComboBoxOptionProps[]) => {
+  private onChange = (selectedSpaces: EuiComboBoxOptionOption[]) => {
     this.props.onChange(selectedSpaces.map(s => (s.id as string).split('spaceOption_')[1]));
   };
 
@@ -81,12 +81,12 @@ export class SpaceSelector extends Component<Props, {}> {
       )
     );
 
-    return options.filter(Boolean) as EuiComboBoxOptionProps[];
+    return options.filter(Boolean) as EuiComboBoxOptionOption[];
   };
 
   private getSelectedOptions = () => {
     const options = this.props.selectedSpaceIds.map(spaceIdToOption(this.props.spaces));
 
-    return options.filter(Boolean) as EuiComboBoxOptionProps[];
+    return options.filter(Boolean) as EuiComboBoxOptionOption[];
   };
 }

x-pack/plugins/snapshot_restore/public/application/components/policy_form/steps/step_settings.tsx

@@ -20,7 +20,7 @@ import {
   EuiComboBox,
   EuiToolTip,
 } from '@elastic/eui';
-import { Option } from '@elastic/eui/src/components/selectable/types';
+import { EuiSelectableOption } from '@elastic/eui';
 import { SlmPolicyPayload, SnapshotConfig } from '../../../../../common/types';
 import { documentationLinksService } from '../../../services/documentation';
 import { useServices } from '../../../app_context';
@@ -45,9 +45,9 @@ export const PolicyStepSettings: React.FunctionComponent<StepProps> = ({
   // States for choosing all indices, or a subset, including caching previously chosen subset list
   const [isAllIndices, setIsAllIndices] = useState<boolean>(!Boolean(config.indices));
   const [indicesSelection, setIndicesSelection] = useState<SnapshotConfig['indices']>([...indices]);
-  const [indicesOptions, setIndicesOptions] = useState<Option[]>(
+  const [indicesOptions, setIndicesOptions] = useState<EuiSelectableOption[]>(
     indices.map(
-      (index): Option => ({
+      (index): EuiSelectableOption => ({
         label: index,
         checked:
           isAllIndices ||
@@ -210,7 +210,7 @@ export const PolicyStepSettings: React.FunctionComponent<StepProps> = ({
                                 data-test-subj="deselectIndicesLink"
                                 onClick={() => {
                                   // TODO: Change this to setIndicesOptions() when https://github.com/elastic/eui/issues/2071 is fixed
-                                  indicesOptions.forEach((option: Option) => {
+                                  indicesOptions.forEach((option: EuiSelectableOption) => {
                                     option.checked = undefined;
                                   });
                                   updatePolicyConfig({ indices: [] });
@@ -226,7 +226,7 @@ export const PolicyStepSettings: React.FunctionComponent<StepProps> = ({
                               <EuiLink
                                 onClick={() => {
                                   // TODO: Change this to setIndicesOptions() when https://github.com/elastic/eui/issues/2071 is fixed
-                                  indicesOptions.forEach((option: Option) => {
+                                  indicesOptions.forEach((option: EuiSelectableOption) => {
                                     option.checked = 'on';
                                   });
                                   updatePolicyConfig({ indices: [...indices] });

x-pack/plugins/snapshot_restore/public/application/components/repository_form/type_settings/hdfs_settings.tsx

@@ -5,6 +5,7 @@
  */
 
 import React, { Fragment, useState } from 'react';
+import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 import {
   EuiCode,
@@ -391,15 +392,13 @@ export const HDFSSettings: React.FunctionComponent<Props> = ({
             }}
             showGutter={false}
             minLines={6}
-            aria-label={
+            aria-label={i18n.translate(
-              <FormattedMessage
+              'xpack.snapshotRestore.repositoryForm.typeHDFS.configurationAriaLabel',
-                id="xpack.snapshotRestore.repositoryForm.typeHDFS.configurationAriaLabel"
+              {
-                defaultMessage="Additional configuration for HDFS repository '{name}'"
+                defaultMessage: `Additional configuration for HDFS repository '{name}'`,
-                values={{
+                values: { name },
-                  name,
+              }
-                }}
+            )}
-              />
-            }
             onChange={(value: string) => {
               setAdditionalConf(value);
               try {

x-pack/plugins/snapshot_restore/public/application/components/restore_snapshot_form/steps/step_logistics.tsx

@@ -20,7 +20,7 @@ import {
   EuiTitle,
   EuiComboBox,
 } from '@elastic/eui';
-import { Option } from '@elastic/eui/src/components/selectable/types';
+import { EuiSelectableOption } from '@elastic/eui';
 import { RestoreSettings } from '../../../../../common/types';
 import { documentationLinksService } from '../../../services/documentation';
 import { useServices } from '../../../app_context';
@@ -48,9 +48,9 @@ export const RestoreSnapshotStepLogistics: React.FunctionComponent<StepProps> =
 
   // States for choosing all indices, or a subset, including caching previously chosen subset list
   const [isAllIndices, setIsAllIndices] = useState<boolean>(!Boolean(restoreIndices));
-  const [indicesOptions, setIndicesOptions] = useState<Option[]>(
+  const [indicesOptions, setIndicesOptions] = useState<EuiSelectableOption[]>(
     snapshotIndices.map(
-      (index): Option => ({
+      (index): EuiSelectableOption => ({
         label: index,
         checked:
           isAllIndices ||
@@ -230,7 +230,7 @@ export const RestoreSnapshotStepLogistics: React.FunctionComponent<StepProps> =
                               <EuiLink
                                 onClick={() => {
                                   // TODO: Change this to setIndicesOptions() when https://github.com/elastic/eui/issues/2071 is fixed
-                                  indicesOptions.forEach((option: Option) => {
+                                  indicesOptions.forEach((option: EuiSelectableOption) => {
                                     option.checked = undefined;
                                   });
                                   updateRestoreSettings({ indices: [] });
@@ -249,7 +249,7 @@ export const RestoreSnapshotStepLogistics: React.FunctionComponent<StepProps> =
                               <EuiLink
                                 onClick={() => {
                                   // TODO: Change this to setIndicesOptions() when https://github.com/elastic/eui/issues/2071 is fixed
-                                  indicesOptions.forEach((option: Option) => {
+                                  indicesOptions.forEach((option: EuiSelectableOption) => {
                                     option.checked = 'on';
                                   });
                                   updateRestoreSettings({ indices: [...snapshotIndices] });

x-pack/plugins/snapshot_restore/public/application/components/restore_snapshot_form/steps/step_review.tsx

@@ -282,12 +282,10 @@ export const RestoreSnapshotStepReview: React.FunctionComponent<StepProps> = ({
         setOptions={{ maxLines: Infinity }}
         value={JSON.stringify(serializedRestoreSettings, null, 2)}
         editorProps={{ $blockScrolling: Infinity }}
-        aria-label={
+        aria-label={i18n.translate(
-          <FormattedMessage
+          'xpack.snapshotRestore.restoreForm.stepReview.jsonTab.jsonAriaLabel',
-            id="xpack.snapshotRestore.restoreForm.stepReview.jsonTab.jsonAriaLabel"
+          { defaultMessage: 'Restore settings to be executed' }
-            defaultMessage="Restore settings to be executed"
+        )}
-          />
-        }
       />
     </Fragment>
   );

x-pack/plugins/snapshot_restore/public/application/components/restore_snapshot_form/steps/step_settings.tsx

@@ -183,12 +183,10 @@ export const RestoreSnapshotStepSettings: React.FunctionComponent<StepProps> = (
                     showGutter={false}
                     minLines={6}
                     maxLines={15}
-                    aria-label={
+                    aria-label={i18n.translate(
-                      <FormattedMessage
+                      'xpack.snapshotRestore.restoreForm.stepSettings.indexSettingsAriaLabel',
-                        id="xpack.snapshotRestore.restoreForm.stepSettings.indexSettingsAriaLabel"
+                      { defaultMessage: 'Index settings to modify' }
-                        defaultMessage="Index settings to modify"
+                    )}
-                      />
-                    }
                     onChange={(value: string) => {
                       updateRestoreSettings({
                         indexSettings: value,

x-pack/plugins/snapshot_restore/public/application/sections/home/policy_list/policy_details/tabs/tab_history.tsx

@@ -4,6 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 import React, { Fragment } from 'react';
+import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 import {
   EuiCodeEditor,
@@ -155,15 +156,13 @@ export const TabHistory: React.FunctionComponent<Props> = ({ policy }) => {
                   maxLines={12}
                   wrapEnabled={true}
                   showGutter={false}
-                  aria-label={
+                  aria-label={i18n.translate(
-                    <FormattedMessage
+                    'xpack.snapshotRestore.policyDetails.lastFailure.detailsAriaLabel',
-                      id="xpack.snapshotRestore.policyDetails.lastFailure.detailsAriaLabel"
+                    {
-                      defaultMessage="Last failure details for policy '{name}'"
+                      defaultMessage: `Last failure details for policy '{name}'`,
-                      values={{
+                      values: { name },
-                        name,
+                    }
-                      }}
+                  )}
-                    />
-                  }
                 />
               </EuiDescriptionListDescription>
             </EuiFlexItem>

x-pack/plugins/snapshot_restore/public/application/sections/home/repository_list/repository_details/type_details/default_details.tsx

@@ -6,6 +6,7 @@
 
 import 'brace/theme/textmate';
 import React, { Fragment } from 'react';
+import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { EuiCodeEditor, EuiSpacer, EuiTitle } from '@elastic/eui';
 
@@ -47,15 +48,15 @@ export const DefaultDetails: React.FunctionComponent<Props> = ({
         }}
         showGutter={false}
         minLines={6}
-        aria-label={
+        aria-label={i18n.translate(
-          <FormattedMessage
+          'xpack.snapshotRestore.repositoryDetails.genericSettingsDescription',
-            id="xpack.snapshotRestore.repositoryDetails.genericSettingsDescription"
+          {
-            defaultMessage="Readonly settings for repository '{name}'"
+            defaultMessage: `Readonly settings for repository '{name}'`,
-            values={{
+            values: {
               name,
-            }}
+            },
-          />
+          }
-        }
+        )}
       />
     </Fragment>
   );

x-pack/plugins/spaces/public/management/edit_space/customize_space/__snapshots__/customize_space_avatar.test.tsx.snap

@@ -53,14 +53,7 @@ exports[`renders without crashing 1`] = `
     labelType="label"
   >
     <EuiFilePicker
-      accept={
+      accept="image/svg+xml,image/jpeg,image/png,image/gif"
-        Array [
-          "image/svg+xml",
-          "image/jpeg",
-          "image/png",
-          "image/gif",
-        ]
-      }
       compressed={false}
       display="default"
       initialPromptText="Select image file"

x-pack/plugins/spaces/public/management/edit_space/customize_space/customize_space_avatar.tsx

@@ -91,8 +91,9 @@ export class CustomizeSpaceAvatar extends Component<Props, State> {
     image.src = imgUrl;
   };
 
-  private onFileUpload = (files: File[]) => {
+  private onFileUpload = (files: FileList | null) => {
-    const [file] = files;
+    if (files == null) return;
+    const file = files[0];
     if (imageTypes.indexOf(file.type) > -1) {
       encode(file).then((dataurl: string) => this.handleImageUpload(dataurl));
     }
@@ -169,7 +170,7 @@ export class CustomizeSpaceAvatar extends Component<Props, State> {
               }
             )}
             onChange={this.onFileUpload}
-            accept={imageTypes}
+            accept={imageTypes.join(',')}
           />
         </EuiFormRow>
       );

x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/webhook.tsx

@@ -473,8 +473,6 @@ const WebhookParamsFields: React.FunctionComponent<ActionParamsProps<WebhookActi
         error={errors.body}
       >
         <EuiCodeEditor
-          fullWidth
-          isInvalid={errors.body.length > 0 && body !== undefined}
           mode="json"
           width="100%"
           height="200px"

x-pack/plugins/triggers_actions_ui/public/application/components/builtin_alert_types/threshold/expression.tsx

@@ -17,7 +17,7 @@ import {
   EuiSelect,
   EuiSpacer,
   EuiComboBox,
-  EuiComboBoxOptionProps,
+  EuiComboBoxOptionOption,
   EuiFormRow,
   EuiCallOut,
 } from '@elastic/eui';
@@ -104,7 +104,7 @@ export const IndexThresholdAlertTypeExpression: React.FunctionComponent<IndexThr
   const [indexPopoverOpen, setIndexPopoverOpen] = useState(false);
   const [indexPatterns, setIndexPatterns] = useState([]);
   const [esFields, setEsFields] = useState<Record<string, any>>([]);
-  const [indexOptions, setIndexOptions] = useState<EuiComboBoxOptionProps[]>([]);
+  const [indexOptions, setIndexOptions] = useState<EuiComboBoxOptionOption[]>([]);
   const [timeFieldOptions, setTimeFieldOptions] = useState([firstFieldOption]);
   const [isIndiciesLoading, setIsIndiciesLoading] = useState<boolean>(false);
 
@@ -256,7 +256,7 @@ export const IndexThresholdAlertTypeExpression: React.FunctionComponent<IndexThr
                   value: anIndex,
                 };
               })}
-              onChange={async (selected: EuiComboBoxOptionProps[]) => {
+              onChange={async (selected: EuiComboBoxOptionOption[]) => {
                 setAlertParams(
                   'index',
                   selected.map(aSelected => aSelected.value)

x-pack/plugins/triggers_actions_ui/public/common/expression_items/of.test.tsx

@@ -23,6 +23,7 @@ describe('of expression', () => {
     expect(wrapper.find('[data-test-subj="availablefieldsOptionsComboBox"]'))
       .toMatchInlineSnapshot(`
       <EuiComboBox
+        async={false}
         compressed={false}
         data-test-subj="availablefieldsOptionsComboBox"
         fullWidth={true}
@@ -75,35 +76,36 @@ describe('of expression', () => {
     );
     expect(wrapper.find('[data-test-subj="availablefieldsOptionsComboBox"]'))
       .toMatchInlineSnapshot(`
-    <EuiComboBox
+      <EuiComboBox
-      compressed={false}
+        async={false}
-      data-test-subj="availablefieldsOptionsComboBox"
+        compressed={false}
-      fullWidth={true}
+        data-test-subj="availablefieldsOptionsComboBox"
-      isClearable={true}
+        fullWidth={true}
-      isInvalid={false}
+        isClearable={true}
-      noSuggestions={false}
+        isInvalid={false}
-      onChange={[Function]}
+        noSuggestions={false}
-      options={
+        onChange={[Function]}
-        Array [
+        options={
-          Object {
+          Array [
-            "label": "test2",
+            Object {
-          },
+              "label": "test2",
-        ]
+            },
-      }
+          ]
-      placeholder="Select a field"
-      selectedOptions={
-        Array [
-          Object {
-            "label": "test",
-          },
-        ]
-      }
-      singleSelection={
-        Object {
-          "asPlainText": true,
         }
-      }
+        placeholder="Select a field"
-    />
+        selectedOptions={
+          Array [
+            Object {
+              "label": "test",
+            },
+          ]
+        }
+        singleSelection={
+          Object {
+            "asPlainText": true,
+          }
+        }
+      />
     `);
   });
 

x-pack/plugins/watcher/public/application/sections/watch_edit/components/json_watch_edit/json_watch_edit_simulate.tsx

@@ -374,7 +374,6 @@ export const JsonWatchEditSimulate = ({
             errors={executeWatchErrors}
           >
             <EuiCodeEditor
-              fullWidth
               mode={xJsonMode}
               width="100%"
               height="200px"

x-pack/plugins/watcher/public/application/sections/watch_edit/components/threshold_watch_edit/action_fields/webhook_action_fields.tsx

@@ -241,7 +241,6 @@ export const WebhookActionFields: React.FunctionComponent<Props> = ({
         errors={errors}
       >
         <EuiCodeEditor
-          fullWidth
           mode="json"
           width="100%"
           height="200px"

x-pack/plugins/watcher/public/application/sections/watch_edit/components/threshold_watch_edit/threshold_watch_edit.tsx

@@ -9,7 +9,7 @@ import {
   EuiButton,
   EuiButtonEmpty,
   EuiComboBox,
-  EuiComboBoxOptionProps,
+  EuiComboBoxOptionOption,
   EuiExpression,
   EuiFieldNumber,
   EuiFieldText,
@@ -323,7 +323,7 @@ export const ThresholdWatchEdit = ({ pageTitle }: { pageTitle: string }) => {
                     value: anIndex,
                   };
                 })}
-                onChange={async (selected: EuiComboBoxOptionProps[]) => {
+                onChange={async (selected: EuiComboBoxOptionOption[]) => {
                   setWatchProperty(
                     'index',
                     selected.map(aSelected => aSelected.value)

x-pack/typings/@elastic/eui/index.d.ts

@@ -7,7 +7,6 @@
 // TODO: Remove once typescript definitions are in EUI
 
 declare module '@elastic/eui' {
-  export const EuiCodeEditor: React.FC<any>;
   export const Query: any;
 }
 

yarn.lock

@@ -1952,16 +1952,17 @@
     tabbable "^1.1.0"
     uuid "^3.1.0"
 
-"@elastic/eui@19.0.0":
+"@elastic/eui@20.0.2":
-  version "19.0.0"
+  version "20.0.2"
-  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-19.0.0.tgz#cf7d644945c95997d442585cf614e853f173746e"
+  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-20.0.2.tgz#c64b16fef15da6aa9e627d45cdd372f1fc676359"
-  integrity sha512-8/USz56MYhu6bV4oecJct7tsdi0ktErOIFLobNmQIKdxDOni/KpttX6IHqxM7OuIWi1AEMXoIozw68+oyL/uKQ==
+  integrity sha512-8TtazI7RO1zJH4Qkl6TZKvAxaFG9F8BEdwyGmbGhyvXOJbkvttRzoaEg9jSQpKr+z7w2vsjGNbza/fEAE41HOA==
   dependencies:
     "@types/chroma-js" "^1.4.3"
     "@types/enzyme" "^3.1.13"
     "@types/lodash" "^4.14.116"
     "@types/numeral" "^0.0.25"
     "@types/react-beautiful-dnd" "^10.1.0"
+    "@types/react-input-autosize" "^2.0.2"
     "@types/react-virtualized" "^9.18.7"
     chroma-js "^2.0.4"
     classnames "^2.2.5"
@@ -5011,6 +5012,13 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-input-autosize@^2.0.2":
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/@types/react-input-autosize/-/react-input-autosize-2.0.2.tgz#6ccdfb100c21b6096c1a04c3c3fac196b0ce61c1"
+  integrity sha512-QzewaD5kog7c6w5e3dretb+50oM8RDdDvVumQKCtPjI6VHyR8lA/HxCiTrv5l9Vgbi4NCitYuix/NorOevlrng==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-intl@^2.3.15":
   version "2.3.17"
   resolved "https://registry.yarnpkg.com/@types/react-intl/-/react-intl-2.3.17.tgz#e1fc6e46e8af58bdef9531259d509380a8a99e8e"