[7.x] Upgrade EUI to v30.5.1 (#84677) (#85040)

* Updated to eui@30.4.1, fixed types and unit tests

* Cleanup some imports

* Fix a text color swap, now back to danger text

* Bump EUI to v30.4.2

* Revert snapshot changes from ownFocus modification

* Clean up alert flyout test actions to better represent user actions

* Upgrade EUI to 30.5.1

* More accurate test interaction

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

package.json

@@ -104,7 +104,7 @@
     "@elastic/datemath": "link:packages/elastic-datemath",
     "@elastic/elasticsearch": "7.10.0",
     "@elastic/ems-client": "7.11.0",
-    "@elastic/eui": "30.2.0",
+    "@elastic/eui": "30.5.1",
     "@elastic/filesaver": "1.1.2",
     "@elastic/good": "^9.0.1-kibana3",
     "@elastic/node-crypto": "1.2.1",

src/core/public/chrome/ui/header/header_help_menu.tsx

@@ -319,7 +319,6 @@ class HeaderHelpMenuUI extends Component<Props, State> {
         data-test-subj="helpMenuButton"
         id="headerHelpMenu"
         isOpen={this.state.isOpen}
-        ownFocus
         repositionOnScroll
       >
         <EuiPopoverTitle>

src/plugins/dashboard/public/application/actions/library_notification_popover.tsx

@@ -50,7 +50,6 @@ export function LibraryNotificationPopover({
 
   return (
     <EuiPopover
-      ownFocus
       button={
         <EuiButtonIcon
           data-test-subj={`embeddablePanelNotification-${id}`}

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

@@ -110,7 +110,6 @@ function FilterBarUI(props: Props) {
           closePopover={() => setIsAddFilterPopoverOpen(false)}
           anchorPosition="downLeft"
           panelPaddingSize="none"
-          ownFocus={true}
           initialFocus=".filterEditor__hiddenItem"
           repositionOnScroll
         >

src/plugins/data/public/ui/query_string_input/language_switcher.tsx

@@ -71,7 +71,6 @@ export function QueryLanguageSwitcher(props: Props) {
     <EuiPopover
       id="queryLanguageSwitcherPopover"
       anchorClassName="euiFormControlLayout__append"
-      ownFocus
       anchorPosition={props.anchorPosition || 'downRight'}
       button={button}
       isOpen={isPopoverOpen}

src/plugins/data/public/ui/saved_query_management/saved_query_management_component.tsx

@@ -206,7 +206,6 @@ export function SavedQueryManagementComponent({
         anchorPosition="downLeft"
         panelPaddingSize="none"
         buffer={-8}
-        ownFocus
         repositionOnScroll
       >
         <div

src/plugins/discover/public/application/components/sidebar/change_indexpattern.tsx

@@ -75,7 +75,6 @@ export function ChangeIndexPattern({
       closePopover={() => setPopoverIsOpen(false)}
       display="block"
       panelPaddingSize="s"
-      ownFocus
     >
       <div style={{ width: 320 }}>
         <EuiPopoverTitle>

src/plugins/discover/public/application/components/sidebar/discover_field.tsx

@@ -197,7 +197,6 @@ export function DiscoverField({
 
   return (
     <EuiPopover
-      ownFocus
       display="block"
       button={
         <FieldButton

src/plugins/discover/public/application/components/sidebar/discover_field_search.test.tsx

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React, { EventHandler, MouseEvent as ReactMouseEvent } from 'react';
+import React from 'react';
 import { act } from 'react-dom/test-utils';
 import { mountWithIntl } from '@kbn/test/jest';
 import { findTestSubject } from '@elastic/eui/lib/test';
@@ -146,33 +146,4 @@ describe('DiscoverFieldSearch', () => {
     popover = component.find(EuiPopover);
     expect(popover.prop('isOpen')).toBe(false);
   });
-
-  test('click outside popover should close popover', () => {
-    const triggerDocumentMouseDown: EventHandler<any> = (e: ReactMouseEvent<any>) => {
-      const event = new Event('mousedown');
-      // @ts-ignore
-      event.euiGeneratedBy = e.nativeEvent.euiGeneratedBy;
-      document.dispatchEvent(event);
-    };
-    const triggerDocumentMouseUp: EventHandler<any> = (e: ReactMouseEvent<any>) => {
-      const event = new Event('mouseup');
-      // @ts-ignore
-      event.euiGeneratedBy = e.nativeEvent.euiGeneratedBy;
-      document.dispatchEvent(event);
-    };
-    const component = mountWithIntl(
-      <div onMouseDown={triggerDocumentMouseDown} onMouseUp={triggerDocumentMouseUp} id="wrapperId">
-        <DiscoverFieldSearch {...defaultProps} />
-      </div>
-    );
-    const btn = findTestSubject(component, 'toggleFieldFilterButton');
-    btn.simulate('click');
-    let popover = component.find(EuiPopover);
-    expect(popover.length).toBe(1);
-    expect(popover.prop('isOpen')).toBe(true);
-    component.find('#wrapperId').simulate('mousedown');
-    component.find('#wrapperId').simulate('mouseup');
-    popover = component.find(EuiPopover);
-    expect(popover.prop('isOpen')).toBe(false);
-  });
 });

src/plugins/home/public/application/components/recently_accessed.js

@@ -99,7 +99,6 @@ export class RecentlyAccessed extends Component {
     return (
       <EuiPopover
         id="popover"
-        ownFocus
         button={openPopoverComponent}
         isOpen={this.state.isPopoverOpen}
         closePopover={this.closePopover}

src/plugins/inspector/public/ui/inspector_view_chooser.tsx

@@ -121,7 +121,6 @@ export class InspectorViewChooser extends Component<Props, State> {
     return (
       <EuiPopover
         id="inspectorViewChooser"
-        ownFocus
         button={triggerButton}
         isOpen={this.state.isSelectorOpen}
         closePopover={this.closeSelector}

src/plugins/ui_actions/public/context_menu/open_context_menu.tsx

@@ -186,7 +186,6 @@ export function openContextMenu(
       closePopover={onClose}
       panelPaddingSize="none"
       anchorPosition="downRight"
-      ownFocus={true}
     >
       <EuiContextMenu
         initialPanelId="mainMenu"

src/plugins/vis_type_vislib/public/vislib/components/legend/legend_item.tsx

@@ -152,7 +152,6 @@ const VisLegendItemComponent = ({
 
   const renderDetails = () => (
     <EuiPopover
-      ownFocus
       display="block"
       button={button}
       isOpen={selected}

x-pack/plugins/apm/public/components/app/ServiceMap/Popover/Info.tsx

@@ -24,7 +24,7 @@ const ItemRow = styled.div`
 
 const SubduedDescriptionListTitle = styled(EuiDescriptionListTitle)`
   &&& {
-    color: ${({ theme }) => theme.eui.textColors.subdued};
+    color: ${({ theme }) => theme.eui.euiTextSubduedColor};
   }
 `;
 

x-pack/plugins/apm/public/components/app/ServiceMap/Popover/ServiceStatsList.tsx

@@ -20,7 +20,7 @@ export const ItemRow = styled('tr')`
 `;
 
 export const ItemTitle = styled('td')`
-  color: ${({ theme }) => theme.eui.textColors.subdued};
+  color: ${({ theme }) => theme.eui.euiTextSubduedColor};
   padding-right: 1rem;
 `;
 

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

@@ -129,7 +129,7 @@ const getStyle = (theme: EuiTheme): cytoscape.Stylesheet[] => {
         color: (el: cytoscape.NodeSingular) =>
           el.hasClass('primary') || el.selected()
             ? theme.eui.euiColorPrimaryText
-            : theme.eui.textColors.text,
+            : theme.eui.euiTextColor,
         // 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/plugins/apm/public/components/shared/Stacktrace/CauseStacktrace.tsx

@@ -22,7 +22,7 @@ const CausedByContainer = styled('h5')`
 `;
 
 const CausedByHeading = styled('span')`
-  color: ${({ theme }) => theme.eui.textColors.subdued};
+  color: ${({ theme }) => theme.eui.euiTextSubduedColor};
   display: block;
   font-size: ${({ theme }) => theme.eui.euiFontSizeXS};
   font-weight: ${({ theme }) => theme.eui.euiFontWeightBold};