Bumping EUI to v70.4.0

package.json

@@ -108,7 +108,7 @@
     "@elastic/datemath": "5.0.3",
     "@elastic/elasticsearch": "npm:@elastic/[email protected]",
     "@elastic/ems-client": "8.3.3",
-    "@elastic/eui": "70.2.4",
+    "@elastic/eui": "70.4.0",
     "@elastic/filesaver": "1.1.2",
     "@elastic/node-crypto": "1.2.1",
     "@elastic/numeral": "^2.5.1",
@@ -603,7 +603,7 @@
     "react-dom": "^17.0.2",
     "react-dropzone": "^4.2.9",
     "react-fast-compare": "^2.0.4",
-    "react-focus-on": "^3.6.0",
+    "react-focus-on": "3.7.0",
     "react-grid-layout": "^1.3.4",
     "react-hook-form": "^7.39.1",
     "react-intl": "^2.8.0",

src/dev/license_checker/config.ts

@@ -84,6 +84,6 @@ export const LICENSE_OVERRIDES = {
   '[email protected]': ['Eclipse Distribution License - v 1.0'], // cf. https://github.com/bjornharrtell/jsts
   '@mapbox/[email protected]': ['MIT'], // license in readme https://github.com/tmcw/jsonlint
   '@elastic/[email protected]': ['Elastic License 2.0'],
-  '@elastic/eui@70.2.4': ['SSPL-1.0 OR Elastic License 2.0'],
+  '@elastic/eui@70.4.0': ['SSPL-1.0 OR Elastic License 2.0'],
   '[email protected]': ['CC-BY-4.0'], // retired ODC‑By license https://github.com/mattcg/language-subtag-registry
 };

src/plugins/unified_search/public/query_string_input/no_data_popover.test.tsx

@@ -75,7 +75,7 @@ describe('NoDataPopover', () => {
     };
     const instance = mount(<NoDataPopover {...props} />);
     act(() => {
-      instance.find(EuiTourStep).prop('footerAction')!.props.onClick();
+      instance.find('button[data-test-subj="noDataPopoverDismissButton"]').simulate('click');
     });
     instance.setProps({ ...props });
     expect(props.storage.set).toHaveBeenCalledWith(expect.any(String), true);

x-pack/plugins/cases/public/components/use_create_case_modal/create_case_modal.test.tsx

@@ -61,7 +61,7 @@ describe('CreateCaseModal', () => {
       </TestProviders>
     );
 
-    wrapper.find('.euiModal__closeIcon').first().simulate('click');
+    wrapper.find('button.euiModal__closeIcon').first().simulate('click');
     expect(onCloseCaseModal).toBeCalled();
   });
 

x-pack/plugins/index_management/__jest__/components/index_table.test.js

@@ -421,13 +421,13 @@ describe('index table', () => {
     const rowIndex = 0;
     openMenuAndClickButton(rendered, rowIndex, 'forcemergeIndexMenuButton');
     snapshot(status(rendered, rowIndex));
-    expect(rendered.find('.euiModal').length).toBe(1);
+    expect(rendered.find('div.euiModal').length).toBe(1);
 
     let count = 0;
     store.subscribe(() => {
       if (count === 1) {
         snapshot(status(rendered, rowIndex));
-        expect(rendered.find('.euiModal').length).toBe(0);
+        expect(rendered.find('div.euiModal').length).toBe(0);
       }
       count++;
     });

x-pack/plugins/license_management/public/application/sections/license_dashboard/revert_to_basic/revert_to_basic.js

@@ -30,10 +30,12 @@ export class RevertToBasic extends React.PureComponent {
     return (
       <EuiConfirmModal
         title={
-          <FormattedMessage
-            id="xpack.licenseMgmt.licenseDashboard.revertToBasic.confirmModalTitle"
-            defaultMessage="Confirm Revert to Basic License"
-          />
+          <div>
+            <FormattedMessage
+              id="xpack.licenseMgmt.licenseDashboard.revertToBasic.confirmModalTitle"
+              defaultMessage="Confirm Revert to Basic License"
+            />
+          </div>
         }
         onCancel={cancelStartBasicLicense}
         onConfirm={() => startBasicLicense(licenseType, true)}

x-pack/plugins/security/public/management/users/edit_user/change_password_modal.tsx

@@ -102,7 +102,7 @@ export const ChangePasswordModal: FunctionComponent<ChangePasswordModalProps> =
   const isCurrentUser = currentUser?.username === username;
   const isSystemUser = username === 'kibana' || username === 'kibana_system';
 
-  const [form, eventHandlers] = useForm({
+  const [form, { onBlur, ...eventHandlers }] = useForm({
     onSubmit: async (values) => {
       try {
         await new UserAPIClient(services.http!).changePassword(
@@ -141,6 +141,13 @@ export const ChangePasswordModal: FunctionComponent<ChangePasswordModalProps> =
     defaultValues,
   });
 
+  // For some reason, the focus-lock dependency that EuiModal uses to accessibly trap focus
+  // is fighting the form `onBlur` and causing focus to be lost when clicking between password
+  // fields, so this workaround waits a tick before validating the form on blur
+  const validateFormOnBlur = (event: React.FocusEvent<HTMLFormElement & HTMLInputElement>) => {
+    requestAnimationFrame(() => onBlur(event));
+  };
+
   const firstFieldRef = useInitialFocus<HTMLInputElement>([isLoading]);
   const modalFormId = useGeneratedHtmlId({ prefix: 'modalForm' });
 
@@ -158,7 +165,13 @@ export const ChangePasswordModal: FunctionComponent<ChangePasswordModalProps> =
         {isLoading ? (
           <EuiLoadingContent />
         ) : (
-          <EuiForm id={modalFormId} component="form" noValidate {...eventHandlers}>
+          <EuiForm
+            id={modalFormId}
+            component="form"
+            noValidate
+            {...eventHandlers}
+            onBlur={validateFormOnBlur}
+          >
             {isSystemUser ? (
               <>
                 <EuiCallOut