Bumping EUI to v70.4.0 (#145888)

`[email protected]` ⏩ `[email protected]`

- "Fixed EuiButtonGroup firing onChange twice" required changing some
tests from `click` to `change`
___

## [`70.4.0`](https://github.com/elastic/eui/tree/v70.4.0)

- Updated `EuiTourStep.footerAction` type to accept `ReactNode[]`
([#6384](elastic/eui#6384))
- Vertically aligned all footer content so that `euiTourStepIndicator`
is always centered ([#6384](elastic/eui#6384))
- Added `filterInCircle` glyph to `EuiIcon`
([#6385](elastic/eui#6385))
- Added `color` prop to `EuiBeacon`
([#6420](elastic/eui#6420))
- Added the `euiMaxBreakpoint` and `euiMinBreakpoint` CSS-in-JS
utilities for creating min/max-width media queries
([#6431](elastic/eui#6431))

**Bug fixes**

- Restores the previous match operator behaviour when the query value is
split into multiple terms after analysis.
([#6409](elastic/eui#6409))
- Fixed missing slide-in animation on `EuiCollapsibleNav`s and left-side
`EuiFlyout`s ([#6422](elastic/eui#6422))
- Fix bug in `EuiCard` where footer were not aligned to the bottom of
the card ([#6424](elastic/eui#6424))
- Fixed multiple component media queries for consumers with custom theme
breakpoints ([#6431](elastic/eui#6431))

## [`70.3.0`](https://github.com/elastic/eui/tree/v70.3.0)

- `EuiSearchBar` now automatically wraps special characters not used by
query syntax in quotes
([#6356](elastic/eui#6356))
- Added `alignment` prop to `EuiBetaBadge`
([#6361](elastic/eui#6361))
- `EuiButton` now accepts `minWidth={false}`
([#6373](elastic/eui#6373))

**Bug fixes**

- Fixed `EuiPageTemplate` not correctly passing the `component` prop to
the inner main content wrapper.
([#6352](elastic/eui#6352))
- `EuiSkipLink` now correctly calls `onClick` even when
`fallbackDestination` is invalid
([#6355](elastic/eui#6355))
- Permanently fixed `EuiModal` to not cause scroll-jumping issues on
modal open ([#6360](elastic/eui#6360))
- Re-fixed `EuiPageSection` not correctly merging `contentProps.css`
([#6365](elastic/eui#6365))
- Fixed `EuiTab` not defaulting to size `m`
([#6366](elastic/eui#6366))
- Fixed the shadow sizes of `.eui-yScrollWithShadows` and
`.eui-xScrollWithShadows`
([#6374](elastic/eui#6374))
- Fixed bug in `EuiCard` where the inner content in vertical cards was
not growing 100% in width
([#6377](elastic/eui#6377))
- Fixed incorrect margins in `EuiSuperDatePicker` caused by `EuiFlex`
CSS gap change ([#6380](elastic/eui#6380))
- Fixed visual bug in nested `EuiFlexGroup`s, where the parent
`EuiFlexGroup` is responsive but a child `EuiFlexGroup` is not
([#6381](elastic/eui#6381))

**CSS-in-JS conversions**

- Converted `EuiModal` to Emotion
([#6321](elastic/eui#6321))

**Fixes**

- `EuiButton` no longer outputs unnecessary inline styles for
`minWidth={0}` or `minWidth={false}`
([#6373](elastic/eui#6373))
- `EuiFacetButton` no longer reports type issues when passing props
accepted by `EuiButton`
([#6373](elastic/eui#6373))

Co-authored-by: Constance Chen <[email protected]>

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",
@@ -613,7 +613,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.5",
     "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

@@ -10,6 +10,7 @@ import React from 'react';
 import { EuiFlexItem, EuiCard, EuiButton, EuiLink, EuiConfirmModal, EuiText } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { EXTERNAL_LINKS } from '../../../../../common/constants';
+import { i18n } from '@kbn/i18n';
 
 export class RevertToBasic extends React.PureComponent {
   cancel = () => {
@@ -29,12 +30,10 @@ export class RevertToBasic extends React.PureComponent {
     }
     return (
       <EuiConfirmModal
-        title={
-          <FormattedMessage
-            id="xpack.licenseMgmt.licenseDashboard.revertToBasic.confirmModalTitle"
-            defaultMessage="Confirm Revert to Basic License"
-          />
-        }
+        title={i18n.translate(
+          'xpack.licenseMgmt.licenseDashboard.revertToBasic.confirmModalTitle',
+          { defaultMessage: 'Confirm Revert to Basic License' }
+        )}
         onCancel={cancelStartBasicLicense}
         onConfirm={() => startBasicLicense(licenseType, true)}
         cancelButtonText={

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