Upgrade EUI to 13.4.1

package.json

@@ -103,7 +103,7 @@
     "@babel/register": "^7.5.5",
     "@elastic/charts": "^10.0.1",
     "@elastic/datemath": "5.0.2",
-    "@elastic/eui": "13.3.0",
+    "@elastic/eui": "13.4.1",
     "@elastic/filesaver": "1.1.2",
     "@elastic/good": "8.1.1-kibana2",
     "@elastic/numeral": "2.3.3",

src/legacy/core_plugins/data/public/filter/filter_bar/filter_editor/index.tsx

@@ -30,6 +30,7 @@ import {
   EuiPopoverTitle,
   EuiSpacer,
   EuiSwitch,
+  EuiSwitchEvent,
 } from '@elastic/eui';
 import { FieldFilter, Filter } from '@kbn/es-query';
 import { i18n } from '@kbn/i18n';
@@ -419,7 +420,7 @@ class FilterEditorUI extends Component<Props, State> {
     this.setState({ selectedOperator, params });
   };
 
-  private onCustomLabelSwitchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+  private onCustomLabelSwitchChange = (event: EuiSwitchEvent) => {
     const useCustomLabel = event.target.checked;
     const customLabel = event.target.checked ? '' : null;
     this.setState({ useCustomLabel, customLabel });

src/legacy/core_plugins/embeddable_api/public/np_ready/public/tests/customize_panel_modal.test.tsx

@@ -199,7 +199,7 @@ test('Can set title to an empty string', async () => {
   );
 
   const inputField = findTestSubject(component, 'customizePanelHideTitle');
-  inputField.simulate('change');
+  inputField.simulate('click');
 
   findTestSubject(component, 'saveNewTitleButton').simulate('click');
   expect(inputField.props().value).toBeUndefined();

src/legacy/core_plugins/input_control_vis/public/components/editor/list_control_editor.test.js

@@ -236,7 +236,7 @@ test('handleCheckboxOptionChange - multiselect', async () => {
   component.update();
 
   const checkbox = findTestSubject(component, 'listControlMultiselectInput');
-  checkbox.simulate('change', { target: { checked: true } });
+  checkbox.simulate('click');
   sinon.assert.notCalled(handleFieldNameChange);
   sinon.assert.notCalled(handleIndexPatternChange);
   sinon.assert.notCalled(handleNumberOptionChange);
@@ -247,7 +247,9 @@ test('handleCheckboxOptionChange - multiselect', async () => {
     expectedControlIndex,
     expectedOptionName,
     sinon.match((evt) => {
-      if (evt.target.checked === true) {
+      // Synthetic `evt.target.checked` does not get altered by EuiSwitch,
+      // but its aria attribute is correctly updated
+      if (evt.target.getAttribute('aria-checked') === 'true') {
         return true;
       }
       return false;

src/legacy/core_plugins/input_control_vis/public/components/editor/options_tab.test.js

@@ -47,26 +47,26 @@ describe('OptionsTab', () => {
 
   it('should update updateFiltersOnChange', () => {
     const component = mountWithIntl(<OptionsTab {...props} />);
-    const checkbox = component.find('[data-test-subj="inputControlEditorUpdateFiltersOnChangeCheckbox"] input[type="checkbox"]');
-    checkbox.simulate('change', { target: { checked: true } });
+    const checkbox = component.find('[data-test-subj="inputControlEditorUpdateFiltersOnChangeCheckbox"] button');
+    checkbox.simulate('click');
 
     expect(props.setValue).toHaveBeenCalledTimes(1);
     expect(props.setValue).toHaveBeenCalledWith('updateFiltersOnChange', true);
   });
 
   it('should update useTimeFilter', () => {
     const component = mountWithIntl(<OptionsTab {...props} />);
-    const checkbox = component.find('[data-test-subj="inputControlEditorUseTimeFilterCheckbox"] input[type="checkbox"]');
-    checkbox.simulate('change', { target: { checked: true } });
+    const checkbox = component.find('[data-test-subj="inputControlEditorUseTimeFilterCheckbox"] button');
+    checkbox.simulate('click');
 
     expect(props.setValue).toHaveBeenCalledTimes(1);
     expect(props.setValue).toHaveBeenCalledWith('useTimeFilter', true);
   });
 
   it('should update pinFilters', () => {
     const component = mountWithIntl(<OptionsTab {...props} />);
-    const checkbox = component.find('[data-test-subj="inputControlEditorPinFiltersCheckbox"] input[type="checkbox"]');
-    checkbox.simulate('change', { target: { checked: true } });
+    const checkbox = component.find('[data-test-subj="inputControlEditorPinFiltersCheckbox"] button');
+    checkbox.simulate('click');
 
     expect(props.setValue).toHaveBeenCalledTimes(1);
     expect(props.setValue).toHaveBeenCalledWith('pinFilters', true);

src/legacy/ui/public/agg_types/controls/auto_precision.tsx

@@ -23,7 +23,7 @@ import { EuiSwitch, EuiFormRow } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { AggParamEditorProps } from 'ui/vis/editors/default';
 
-function AutoPrecisionParamEditor({ value, setValue }: AggParamEditorProps<boolean>) {
+function AutoPrecisionParamEditor({ value = false, setValue }: AggParamEditorProps<boolean>) {
   const label = i18n.translate('common.ui.aggTypes.changePrecisionLabel', {
     defaultMessage: 'Change precision on map zoom',
   });

src/legacy/ui/public/agg_types/controls/precision.tsx

@@ -41,7 +41,9 @@ function PrecisionParamEditor({ agg, value, setValue }: AggParamEditorProps<numb
         min={1}
         max={config.get('visualization:tileMap:maxPrecision')}
         value={value}
-        onChange={ev => setValue(Number(ev.target.value))}
+        onChange={(ev: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLButtonElement>) =>
+          setValue(Number(ev.currentTarget.value))
+        }
         data-test-subj={`visEditorMapPrecision${agg.id}`}
         showValue
       />

src/legacy/ui/public/agg_types/controls/switch.tsx

@@ -30,7 +30,7 @@ interface SwitchParamEditorProps extends AggParamEditorProps<boolean> {
 }
 
 function SwitchParamEditor({
-  value,
+  value = false,
   setValue,
   dataTestSubj,
   displayToolTip,

src/legacy/ui/public/agg_types/controls/use_geocentroid.tsx

@@ -23,7 +23,7 @@ import { EuiSwitch, EuiFormRow } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { AggParamEditorProps } from 'ui/vis/editors/default';
 
-function UseGeocentroidParamEditor({ value, setValue }: AggParamEditorProps<boolean>) {
+function UseGeocentroidParamEditor({ value = false, setValue }: AggParamEditorProps<boolean>) {
   const label = i18n.translate('common.ui.aggTypes.placeMarkersOffGridLabel', {
     defaultMessage: 'Place markers off grid (use geocentroid)',
   });

src/legacy/ui/public/saved_objects/components/saved_object_save_modal.tsx

@@ -31,6 +31,7 @@ import {
   EuiOverlayMask,
   EuiSpacer,
   EuiSwitch,
+  EuiSwitchEvent,
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import React, { Fragment } from 'react';
@@ -193,7 +194,7 @@ export class SavedObjectSaveModal extends React.Component<Props, State> {
     });
   };
 
-  private onCopyOnSaveChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+  private onCopyOnSaveChange = (event: EuiSwitchEvent) => {
     this.setState({
       copyOnSave: event.target.checked,
     });

src/legacy/ui/public/vis/editors/default/controls/radius_ratio_option.tsx

@@ -57,7 +57,9 @@ function RadiusRatioOptionControl({ editorStateParams, setValue }: AggControlPro
         min={1}
         max={100}
         value={editorStateParams.radiusRatio || DEFAULT_VALUE}
-        onChange={e => setValue(editorStateParams, PARAM_NAME, parseFloat(e.target.value))}
+        onChange={(e: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLButtonElement>) =>
+          setValue(editorStateParams, PARAM_NAME, parseFloat(e.currentTarget.value))
+        }
         showRange
         showValue
         valueAppend="%"

test/functional/page_objects/dashboard_page.js

@@ -348,7 +348,7 @@ export function DashboardPageProvider({ getService, getPageObjects }) {
 
     async clickSave() {
       log.debug('DashboardPage.clickSave');
-      await testSubjects.clickWhenNotDisabled('confirmSaveSavedObjectButton');
+      await testSubjects.click('confirmSaveSavedObjectButton');
     }
 
     async pressEnterKey() {
@@ -544,19 +544,21 @@ export function DashboardPageProvider({ getService, getPageObjects }) {
     async setSaveAsNewCheckBox(checked) {
       log.debug('saveAsNewCheckbox: ' + checked);
       const saveAsNewCheckbox = await testSubjects.find('saveAsNewCheckbox');
-      const isAlreadyChecked = (await saveAsNewCheckbox.getAttribute('checked') === 'true');
+      const isAlreadyChecked = (await saveAsNewCheckbox.getAttribute('aria-checked') === 'true');
       if (isAlreadyChecked !== checked) {
         log.debug('Flipping save as new checkbox');
+        const saveAsNewCheckbox = await testSubjects.find('saveAsNewCheckbox');
         await retry.try(() => saveAsNewCheckbox.click());
       }
     }
 
     async setStoreTimeWithDashboard(checked) {
       log.debug('Storing time with dashboard: ' + checked);
       const storeTimeCheckbox = await testSubjects.find('storeTimeWithDashboard');
-      const isAlreadyChecked = (await storeTimeCheckbox.getAttribute('checked') === 'true');
+      const isAlreadyChecked = (await storeTimeCheckbox.getAttribute('aria-checked') === 'true');
       if (isAlreadyChecked !== checked) {
         log.debug('Flipping store time checkbox');
+        const storeTimeCheckbox = await testSubjects.find('storeTimeWithDashboard');
         await retry.try(() => storeTimeCheckbox.click());
       }
     }

test/interpreter_functional/plugins/kbn_tp_run_pipeline/package.json

@@ -7,7 +7,7 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@elastic/eui": "13.3.0",
+    "@elastic/eui": "13.4.1",
     "react": "^16.8.0",
     "react-dom": "^16.8.0"
   }

test/plugin_functional/plugins/kbn_tp_custom_visualizations/package.json

@@ -7,7 +7,7 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@elastic/eui": "13.3.0",
+    "@elastic/eui": "13.4.1",
     "react": "^16.8.0"
   }
 }

test/plugin_functional/plugins/kbn_tp_embeddable_explorer/package.json

@@ -8,7 +8,7 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@elastic/eui": "13.3.0",
+    "@elastic/eui": "13.4.1",
     "react": "^16.8.0"
   },
   "scripts": {

test/plugin_functional/plugins/kbn_tp_sample_panel_action/package.json

@@ -8,7 +8,7 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@elastic/eui": "13.3.0",
+    "@elastic/eui": "13.4.1",
     "react": "^16.8.0"
   },
   "scripts": {

test/plugin_functional/plugins/kbn_tp_visualize_embedding/package.json

@@ -7,7 +7,7 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@elastic/eui": "13.3.0",
+    "@elastic/eui": "13.4.1",
     "react": "^16.8.0",
     "react-dom": "^16.8.0"
   }