Upgrade to EUI v22.3.0 (#62963)

* snapshot updates

* bump to eui 22.3.0

* snapshots

* Fix css selector in test to match EUI internal DOM change

* Updated snapshots

* Insert react-beautiful-dnd@10 into top-level kibana to force siem's node_modules to hold its correct version

* More snapshot updates, resolved a typescript issue

* Move react-beautiful-dnd dependency around to make things happy again

* Use SearchFilterConfig from the top-level eui export

* Swallow 'ResizeObserver error does not have an err object' error in canvas

* Swallow ResizeObserver error cross-browser

package.json

@@ -123,7 +123,7 @@
     "@elastic/charts": "18.3.0",
     "@elastic/datemath": "5.0.3",
     "@elastic/ems-client": "7.8.0",
-    "@elastic/eui": "21.0.1",
+    "@elastic/eui": "22.3.0",
     "@elastic/filesaver": "1.1.2",
     "@elastic/good": "8.1.1-kibana2",
     "@elastic/numeral": "2.4.0",

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

@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@elastic/charts": "18.3.0",
-    "@elastic/eui": "21.0.1",
+    "@elastic/eui": "22.3.0",
     "@kbn/i18n": "1.0.0",
     "abortcontroller-polyfill": "^1.4.0",
     "angular": "^1.7.9",

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

@@ -27,6 +27,7 @@ import { SavedObjectsClientContract, SimpleSavedObject } from '../../../../../co
 import { getTitle } from '../../index_patterns/lib';
 
 export type IndexPatternSelectProps = Required<
+  // Omit<EuiComboBoxProps<any>, 'isLoading' | 'onSearchChange' | 'options' | 'selectedOptions' | 'append' | 'prepend' | 'sortMatchesBy'>,
   Omit<EuiComboBoxProps<any>, 'isLoading' | 'onSearchChange' | 'options' | 'selectedOptions'>,
   'onChange' | 'placeholder'
 > & {

src/plugins/saved_objects_management/public/management_section/objects_table/components/relationships.tsx

@@ -32,7 +32,7 @@ import {
   EuiText,
   EuiSpacer,
 } from '@elastic/eui';
-import { FilterConfig } from '@elastic/eui/src/components/search_bar/filters/filters';
+import { SearchFilterConfig } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { IBasePath } from 'src/core/public';
@@ -284,7 +284,7 @@ export class Relationships extends Component<RelationshipsProps, RelationshipsSt
           multiSelect: 'or',
           options: [...filterTypesMap.values()],
         },
-      ] as FilterConfig[],
+      ] as SearchFilterConfig[],
     };
 
     return (

src/plugins/vis_default_editor/public/components/agg_group.tsx

@@ -170,7 +170,7 @@ function DefaultEditorAggGroup({
                     agg={agg}
                     aggIndex={index}
                     aggIsTooLow={calcAggIsTooLow(agg, index, group, schemas)}
-                    dragHandleProps={provided.dragHandleProps}
+                    dragHandleProps={provided.dragHandleProps || null}
                     formIsTouched={aggsState[agg.id] ? aggsState[agg.id].touched : false}
                     groupName={groupName}
                     isDraggable={stats.count > 1}

src/plugins/visualizations/public/wizard/type_selection/type_selection.tsx

@@ -27,7 +27,7 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiKeyPadMenu,
-  EuiKeyPadMenuItemButton,
+  EuiKeyPadMenuItem,
   EuiModalHeader,
   EuiModalHeaderTitle,
   EuiScreenReaderOnly,
@@ -262,7 +262,7 @@ class TypeSelection extends React.Component<TypeSelectionProps, TypeSelectionSta
     };
 
     return (
-      <EuiKeyPadMenuItemButton
+      <EuiKeyPadMenuItem
         key={visType.name}
         label={<span data-test-subj="visTypeTitle">{visType.title}</span>}
         onClick={onClick}
@@ -282,7 +282,7 @@ class TypeSelection extends React.Component<TypeSelectionProps, TypeSelectionSta
           icon={visType.icon}
           image={!('aliasUrl' in visType) ? visType.image : undefined}
         />
-      </EuiKeyPadMenuItemButton>
+      </EuiKeyPadMenuItem>
     );
   };
 

test/interpreter_functional/plugins/kbn_tp_run_pipeline/package.json

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

test/plugin_functional/plugins/kbn_sample_panel_action/package.json

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

test/plugin_functional/plugins/kbn_tp_custom_visualizations/package.json

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

test/plugin_functional/plugins/kbn_tp_embeddable_explorer/package.json

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

x-pack/legacy/plugins/apm/public/components/app/ServiceMap/cytoscapeOptions.ts

@@ -60,7 +60,7 @@ const style: cytoscape.Stylesheet[] = [
           ? theme.euiColorPrimary
           : theme.euiColorMediumShade,
       'border-width': 2,
-      color: theme.textColors.default,
+      color: theme.textColors.text,
       // theme.euiFontFamily doesn't work here for some reason, so we're just
       // specifying a subset of the fonts for the label text.
       'font-family': 'Inter UI, Segoe UI, Helvetica, Arial, sans-serif',

x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/SpanFlyout/index.tsx

@@ -74,7 +74,7 @@ function getSpanTypes(span: Span) {
 const SpanBadge = styled(EuiBadge)`
   display: inline-block;
   margin-right: ${px(units.quarter)};
-`;
+` as any;
 
 const HttpInfoContainer = styled('div')`
   margin-right: ${px(units.quarter)};