Upgrade EUI to v20.0.2

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_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/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) {
-      this.changeImageForm.current.fileInput.value = null;
-      this.changeImageForm.current.handleChange({});
+    if (this.changeImageForm.current?.fileInput) {
+      this.changeImageForm.current.fileInput.value = '';
+      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;
 }