Upgrade EUI to v111.0.0

package.json

@@ -128,8 +128,8 @@
     "@elastic/ecs": "^9.0.0",
     "@elastic/elasticsearch": "9.1.1",
     "@elastic/ems-client": "8.6.3",
-    "@elastic/eui": "110.0.0",
-    "@elastic/eui-theme-borealis": "5.1.0",
+    "@elastic/eui": "111.0.0",
+    "@elastic/eui-theme-borealis": "5.2.0",
     "@elastic/filesaver": "1.1.2",
     "@elastic/kibana-d3-color": "npm:@elastic/kibana-d3-color@2.0.1",
     "@elastic/monaco-esql": "^3.1.11",

src/core/packages/i18n/browser-internal/src/i18n_eui_mapping.tsx

@@ -799,6 +799,15 @@ export const getEuiContextMapping = (): EuiTokensObject => {
         defaultMessage: 'You can still continue tabbing through other global page landmarks.',
       }
     ),
+    'euiFlyoutMenu.back': i18n.translate('core.euiFlyoutMenu.back', {
+      defaultMessage: 'Back',
+    }),
+    'euiFlyoutMenu.history': i18n.translate('core.euiFlyoutMenu.history', {
+      defaultMessage: 'History',
+    }),
+    'euiFlyoutManaged.defaultTitle': i18n.translate('core.euiFlyoutManaged.defaultTitle', {
+      defaultMessage: 'Unknown Flyout',
+    }),
     'euiForm.addressFormErrors': i18n.translate('core.euiForm.addressFormErrors', {
       defaultMessage: 'Please address the highlighted errors.',
     }),

src/dev/license_checker/config.ts

@@ -92,8 +92,8 @@ export const LICENSE_OVERRIDES = {
   'jsts@1.6.2': ['Eclipse Distribution License - v 1.0'], // cf. https://github.com/bjornharrtell/jsts
   '@mapbox/jsonlint-lines-primitives@2.0.2': ['MIT'], // license in readme https://github.com/tmcw/jsonlint
   '@elastic/ems-client@8.6.3': ['Elastic License 2.0'],
-  '@elastic/eui@110.0.0': ['Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.0'],
-  '@elastic/eui-theme-borealis@5.1.0': ['Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.0'],
+  '@elastic/eui@111.0.0': ['Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.0'],
+  '@elastic/eui-theme-borealis@5.2.0': ['Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.0'],
   'language-subtag-registry@0.3.21': ['CC-BY-4.0'], // retired ODC‑By license https://github.com/mattcg/language-subtag-registry
   'buffers@0.1.1': ['MIT'], // license in importing module https://www.npmjs.com/package/binary
   '@bufbuild/protobuf@2.5.2': ['Apache-2.0'], // license (Apache-2.0 AND BSD-3-Clause)

src/platform/packages/shared/kbn-unified-metrics-grid/src/components/flyout/hooks/use_flyout_a11y.tsx

@@ -15,7 +15,7 @@ import useUnmount from 'react-use/lib/useUnmount';
 export const useFlyoutA11y = ({ isXlScreen }: { isXlScreen: boolean }) => {
   const descriptionId = useGeneratedHtmlId();
   const [triggerEl] = useState(document.activeElement);
-  const [flyoutEl, setFlyoutEl] = useState<HTMLElement>();
+  const [flyoutEl, setFlyoutEl] = useState<HTMLElement | null>(null);
 
   // Auto-focus push flyout on open or when switching to XL screen
   useEffect(() => {

src/platform/plugins/shared/data_view_editor/public/open_editor.tsx

@@ -92,10 +92,6 @@ export const getEditorOpener =
         {
           hideCloseButton: true,
           size: 'l',
-          // EUI TODO: This z-index override of EuiOverlayMask is a workaround, and ideally should be resolved with a cleaner UI/UX flow long-term
-          maskProps: {
-            style: 'z-index: 1004', // we need this flyout to be above the timeline flyout (which has a z-index of 1003)
-          },
           'aria-labelledby': 'dataViewEditorFlyoutTitle',
         }
       );

src/platform/plugins/shared/data_view_field_editor/public/open_editor.tsx

@@ -242,11 +242,6 @@ export const getFieldEditorOpener =
               flyout.close();
             }
           },
-          maskProps: {
-            className: 'indexPatternFieldEditorMaskOverlay',
-            // // EUI TODO: This z-index override of EuiOverlayMask is a workaround, and ideally should be resolved with a cleaner UI/UX flow long-term
-            style: 'z-index: 1004', // we need this flyout to be above the timeline flyout (which has a z-index of 1003)
-          },
         }
       );
 

src/platform/plugins/shared/unified_doc_viewer/public/components/doc_viewer_flyout/use_flyout_a11y.tsx

@@ -15,7 +15,7 @@ import useUnmount from 'react-use/lib/useUnmount';
 export const useFlyoutA11y = ({ isXlScreen }: { isXlScreen: boolean }) => {
   const descriptionId = useGeneratedHtmlId();
   const [triggerEl] = useState(document.activeElement);
-  const [flyoutEl, setFlyoutEl] = useState<HTMLElement>();
+  const [flyoutEl, setFlyoutEl] = useState<HTMLElement | null>(null);
 
   // Auto-focus push flyout on open or when switching to XL screen
   useEffect(() => {

x-pack/platform/packages/shared/kbn-elastic-assistant/impl/assistant/assistant_overlay/index.tsx

@@ -11,7 +11,6 @@ import { EuiFlyoutResizable } from '@elastic/eui';
 import useEvent from 'react-use/lib/useEvent';
 import { css } from '@emotion/react';
 
-import { createGlobalStyle } from 'styled-components';
 import type { ShowAssistantOverlayProps } from '../../assistant_context';
 import { useAssistantContext } from '../../assistant_context';
 import { Assistant, CONVERSATION_SIDE_PANEL_WIDTH } from '..';
@@ -23,17 +22,6 @@ import {
 
 const isMac = navigator.platform.toLowerCase().indexOf('mac') >= 0;
 
-/**
- * Modal container for Elastic AI Assistant conversations, receiving the page contents as context, plus whatever
- * component currently has focus and any specific context it may provide through the SAssInterface.
- */
-
-export const UnifiedTimelineGlobalStyles = createGlobalStyle`
-  body:has(.timeline-portal-overlay-mask) .euiOverlayMask {
-    z-index: 1003 !important;
-  }
-`;
-
 export const AssistantOverlay = React.memo(() => {
   const spaceId = useAssistantSpaceId();
   const [isModalVisible, setIsModalVisible] = useState(false);
@@ -118,6 +106,8 @@ export const AssistantOverlay = React.memo(() => {
   );
   useEvent('keydown', onKeyDown);
 
+  const flyoutRef = useRef<HTMLElement>(null);
+
   // Modal control functions
   const cleanupAndCloseModal = useCallback(() => {
     setIsModalVisible(false);
@@ -144,8 +134,6 @@ export const AssistantOverlay = React.memo(() => {
     });
   }, []);
 
-  const flyoutRef = useRef<HTMLDivElement>();
-
   if (!isModalVisible) return null;
 
   return (
@@ -172,7 +160,6 @@ export const AssistantOverlay = React.memo(() => {
           setChatHistoryVisible={toggleChatHistory}
         />
       </EuiFlyoutResizable>
-      <UnifiedTimelineGlobalStyles />
     </>
   );
 });

x-pack/platform/plugins/shared/cases/public/components/create/flyout/create_case_flyout.tsx

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React, { useMemo } from 'react';
+import React from 'react';
 import { css } from '@emotion/react';
 import { EuiFlyout, EuiFlyoutBody, EuiFlyoutHeader, EuiTitle, useEuiTheme } from '@elastic/eui';
 
@@ -41,15 +41,10 @@ export const CreateCaseFlyout = React.memo<CreateCaseFlyoutProps>(
     onSuccess,
     observables = [],
   }) => {
+    const { euiTheme } = useEuiTheme();
     const handleCancel = onClose || noop;
     const handleOnSuccess = onSuccess || noop;
 
-    const { euiTheme } = useEuiTheme();
-    const maskProps = useMemo(
-      () => ({ style: `z-index: ${(euiTheme.levels.flyout as number) + 4}` }), // we need this flyout to be above the timeline flyout (which has a z-index of 1003)
-      [euiTheme.levels.flyout]
-    );
-
     return (
       <>
         <ReactQueryDevtools initialIsOpen={false} />
@@ -58,8 +53,6 @@ export const CreateCaseFlyout = React.memo<CreateCaseFlyoutProps>(
           tour-step="create-case-flyout"
           aria-label={i18n.CREATE_CASE_LABEL}
           data-test-subj="create-case-flyout"
-          // EUI TODO: This z-index override of EuiOverlayMask is a workaround, and ideally should be resolved with a cleaner UI/UX flow long-term
-          maskProps={maskProps}
         >
           <EuiFlyoutHeader data-test-subj="create-case-flyout-header" hasBorder>
             <EuiTitle size="m">

x-pack/platform/plugins/shared/fleet/public/applications/fleet/sections/agent_policy/list_page/components/create_agent_policy.tsx

@@ -199,8 +199,14 @@ export const CreateAgentPolicyFlyout: React.FunctionComponent<Props> = ({
     </EuiFlyoutFooter>
   );
 
+  // ref={null} is needed to fix styled-components' ref prop type
   return (
-    <FlyoutWithHigherZIndex onClose={() => onClose()} {...restOfProps} maxWidth={MAX_FLYOUT_WIDTH}>
+    <FlyoutWithHigherZIndex
+      onClose={() => onClose()}
+      {...restOfProps}
+      maxWidth={MAX_FLYOUT_WIDTH}
+      ref={null}
+    >
       {header}
       {body}
       {footer}

x-pack/platform/plugins/shared/osquery/public/live_queries/form/query_details_flyout.tsx

@@ -14,9 +14,8 @@ import {
   EuiPortal,
   EuiSpacer,
   EuiTitle,
-  useEuiTheme,
 } from '@elastic/eui';
-import React, { useMemo } from 'react';
+import React from 'react';
 import { FormattedMessage } from '@kbn/i18n-react';
 
 interface QueryDetailsFlyoutProps {
@@ -27,64 +26,46 @@ interface QueryDetailsFlyoutProps {
   onClose: () => void;
 }
 
-const QueryDetailsFlyoutComponent: React.FC<QueryDetailsFlyoutProps> = ({ action, onClose }) => {
-  const { euiTheme } = useEuiTheme();
-  const maskProps = useMemo(
-    () => ({ style: `z-index: ${(euiTheme.levels.flyout as number) + 4}` }), // we need this flyout to be above the timeline flyout (which has a z-index of 1003)
-    [euiTheme.levels.flyout]
-  );
-
-  return (
-    <EuiPortal>
-      <EuiFlyout
-        size="m"
-        ownFocus
-        onClose={onClose}
-        aria-labelledby="flyoutTitle"
-        // EUI TODO: This z-index override of EuiOverlayMask is a workaround, and ideally should be resolved with a cleaner UI/UX flow long-term
-        maskProps={maskProps}
-      >
-        <EuiFlyoutHeader hasBorder>
-          <EuiTitle size="s">
-            <h2 id="flyoutTitle">
-              <FormattedMessage
-                id="xpack.osquery.liveQueryActions.details.title"
-                defaultMessage="Query Details"
-              />
-            </h2>
-          </EuiTitle>
-        </EuiFlyoutHeader>
-        <EuiFlyoutBody>
-          <EuiFlexItem grow={false}>
-            <strong>
-              <FormattedMessage
-                id="xpack.osquery.liveQueryActions.details.id"
-                defaultMessage="Id"
-              />
-            </strong>
-            <EuiSpacer size="xs" />
-            <EuiCodeBlock fontSize="m" paddingSize="s" isCopyable={true}>
-              {action.id}
-            </EuiCodeBlock>
-          </EuiFlexItem>
-          <EuiSpacer size="m" />
-          <EuiFlexItem grow={false}>
-            <strong>
-              <FormattedMessage
-                id="xpack.osquery.liveQueryActions.details.query"
-                defaultMessage="Query"
-              />
-            </strong>
-            <EuiSpacer size="xs" />
-            <EuiCodeBlock language="sql" fontSize="m" paddingSize="s" isCopyable={true}>
-              {action.query}
-            </EuiCodeBlock>
-          </EuiFlexItem>
-          <EuiSpacer size="m" />
-        </EuiFlyoutBody>
-      </EuiFlyout>
-    </EuiPortal>
-  );
-};
+const QueryDetailsFlyoutComponent: React.FC<QueryDetailsFlyoutProps> = ({ action, onClose }) => (
+  <EuiPortal>
+    <EuiFlyout size="m" ownFocus onClose={onClose} aria-labelledby="flyoutTitle">
+      <EuiFlyoutHeader hasBorder>
+        <EuiTitle size="s">
+          <h2 id="flyoutTitle">
+            <FormattedMessage
+              id="xpack.osquery.liveQueryActions.details.title"
+              defaultMessage="Query Details"
+            />
+          </h2>
+        </EuiTitle>
+      </EuiFlyoutHeader>
+      <EuiFlyoutBody>
+        <EuiFlexItem grow={false}>
+          <strong>
+            <FormattedMessage id="xpack.osquery.liveQueryActions.details.id" defaultMessage="Id" />
+          </strong>
+          <EuiSpacer size="xs" />
+          <EuiCodeBlock fontSize="m" paddingSize="s" isCopyable={true}>
+            {action.id}
+          </EuiCodeBlock>
+        </EuiFlexItem>
+        <EuiSpacer size="m" />
+        <EuiFlexItem grow={false}>
+          <strong>
+            <FormattedMessage
+              id="xpack.osquery.liveQueryActions.details.query"
+              defaultMessage="Query"
+            />
+          </strong>
+          <EuiSpacer size="xs" />
+          <EuiCodeBlock language="sql" fontSize="m" paddingSize="s" isCopyable={true}>
+            {action.query}
+          </EuiCodeBlock>
+        </EuiFlexItem>
+        <EuiSpacer size="m" />
+      </EuiFlyoutBody>
+    </EuiFlyout>
+  </EuiPortal>
+);
 
 export const QueryDetailsFlyout = React.memo(QueryDetailsFlyoutComponent);