Upgrade EUI to v77.1.1 (#154838)

EUI `77.0.0` ➡️ `77.1.1` ## [`77.1.0`](https://github.com/elastic/eui/tree/v77.1.0) - Updated `EuiDatePicker` to display a warning icon and correctly set `aria-invalid` when `isInvalid` is passed ([#6677](https://github.com/elastic/eui/pull/6677)) - Updated `EuiFilePicker` to display an alert icon when `isInvalid` ([#6678](https://github.com/elastic/eui/pull/6678)) - Updated `EuiTextArea` to display an alert icon when `isInvalid` ([#6679](https://github.com/elastic/eui/pull/6679)) - Updated `EuiTextArea` to support the `isLoading` prop ([#6679](https://github.com/elastic/eui/pull/6679)) - Updated `EuiComboBox` to display a warning icon and correctly set `aria-invalid` when `isInvalid` is passed ([#6680](https://github.com/elastic/eui/pull/6680)) **Bug fixes** - Fixed `EuiAccordion` to not set an `aria-expanded` attribute on non-interactive `buttonElement`s ([#6694](https://github.com/elastic/eui/pull/6694)) - Fixed an `EuiPopoverFooter` bug causing nested popovers within popovers (note: not a recommended use-case) to unintentionally override its panel padding size inherited from context ([#6698](https://github.com/elastic/eui/pull/6698)) - Fixed `EuiComboBox` to only delete the last selected item on backspace if the input caret is present ([#6699](https://github.com/elastic/eui/pull/6699)) --------- Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Jon <jon@elastic.co>
2025-04-23 17:28:26 -04:00 · 2023-04-18 16:51:39 -04:00 · 2023-04-18 16:51:39 -04:00 · 3259647b00
commit 3259647b00
parent 98843eeef4
14 changed files with 70 additions and 53 deletions
--- a/package.json
+++ b/package.json
@ -96,7 +96,7 @@
    "@elastic/datemath": "5.0.3",
    "@elastic/elasticsearch": "npm:@elastic/elasticsearch-canary@8.6.0-canary.3",
    "@elastic/ems-client": "8.4.0",
-    "@elastic/eui": "77.0.0",
+    "@elastic/eui": "77.1.1",
    "@elastic/filesaver": "1.1.2",
    "@elastic/node-crypto": "1.2.1",
    "@elastic/numeral": "^2.5.1",
--- a/packages/kbn-securitysolution-autocomplete/src/field/tests/snapshots/index.test.tsx.snap
+++ b/packages/kbn-securitysolution-autocomplete/src/field/tests/snapshots/index.test.tsx.snap
@ -16,7 +16,7 @@ Object {
            class="euiFormControlLayout__childrenWrapper"
          >
            <div
-              class="euiComboBox__inputWrap euiComboBox__inputWrap--fullWidth euiComboBox__inputWrap--noWrap euiComboBox__inputWrap-isClearable"
+              class="euiComboBox__inputWrap euiFormControlLayout--2icons euiComboBox__inputWrap--fullWidth euiComboBox__inputWrap--noWrap"
              data-test-subj="comboBoxInput"
              tabindex="-1"
            >
@ -33,6 +33,7 @@ Object {
                  aria-autocomplete="list"
                  aria-controls=""
                  aria-expanded="false"
+                  aria-invalid="false"
                  data-test-subj="comboBoxSearchInput"
                  id="generated-id__eui-combobox-id"
                  role="combobox"
@ -89,7 +90,7 @@ Object {
          class="euiFormControlLayout__childrenWrapper"
        >
          <div
-            class="euiComboBox__inputWrap euiComboBox__inputWrap--fullWidth euiComboBox__inputWrap--noWrap euiComboBox__inputWrap-isClearable"
+            class="euiComboBox__inputWrap euiFormControlLayout--2icons euiComboBox__inputWrap--fullWidth euiComboBox__inputWrap--noWrap"
            data-test-subj="comboBoxInput"
            tabindex="-1"
          >
@ -106,6 +107,7 @@ Object {
                aria-autocomplete="list"
                aria-controls=""
                aria-expanded="false"
+                aria-invalid="false"
                data-test-subj="comboBoxSearchInput"
                id="generated-id__eui-combobox-id"
                role="combobox"
@ -219,7 +221,7 @@ Object {
            class="euiFormControlLayout__childrenWrapper"
          >
            <div
-              class="euiComboBox__inputWrap euiComboBox__inputWrap--fullWidth euiComboBox__inputWrap--noWrap"
+              class="euiComboBox__inputWrap euiFormControlLayout--1icons euiComboBox__inputWrap--fullWidth euiComboBox__inputWrap--noWrap"
              data-test-subj="comboBoxInput"
              tabindex="-1"
            >
@ -236,6 +238,7 @@ Object {
                  aria-autocomplete="list"
                  aria-controls=""
                  aria-expanded="false"
+                  aria-invalid="false"
                  data-test-subj="comboBoxSearchInput"
                  disabled=""
                  id="generated-id__eui-combobox-id"
@ -283,7 +286,7 @@ Object {
          class="euiFormControlLayout__childrenWrapper"
        >
          <div
-            class="euiComboBox__inputWrap euiComboBox__inputWrap--fullWidth euiComboBox__inputWrap--noWrap"
+            class="euiComboBox__inputWrap euiFormControlLayout--1icons euiComboBox__inputWrap--fullWidth euiComboBox__inputWrap--noWrap"
            data-test-subj="comboBoxInput"
            tabindex="-1"
          >
@ -300,6 +303,7 @@ Object {
                aria-autocomplete="list"
                aria-controls=""
                aria-expanded="false"
+                aria-invalid="false"
                data-test-subj="comboBoxSearchInput"
                disabled=""
                id="generated-id__eui-combobox-id"
@ -404,7 +408,7 @@ Object {
            class="euiFormControlLayout__childrenWrapper"
          >
            <div
-              class="euiComboBox__inputWrap euiComboBox__inputWrap--fullWidth euiComboBox__inputWrap--noWrap"
+              class="euiComboBox__inputWrap euiFormControlLayout--1icons euiComboBox__inputWrap--fullWidth euiComboBox__inputWrap--noWrap"
              data-test-subj="comboBoxInput"
              tabindex="-1"
            >
@ -421,6 +425,7 @@ Object {
                  aria-autocomplete="list"
                  aria-controls=""
                  aria-expanded="false"
+                  aria-invalid="false"
                  data-test-subj="comboBoxSearchInput"
                  id="generated-id__eui-combobox-id"
                  role="combobox"
@ -466,7 +471,7 @@ Object {
          class="euiFormControlLayout__childrenWrapper"
        >
          <div
-            class="euiComboBox__inputWrap euiComboBox__inputWrap--fullWidth euiComboBox__inputWrap--noWrap"
+            class="euiComboBox__inputWrap euiFormControlLayout--1icons euiComboBox__inputWrap--fullWidth euiComboBox__inputWrap--noWrap"
            data-test-subj="comboBoxInput"
            tabindex="-1"
          >
@ -483,6 +488,7 @@ Object {
                aria-autocomplete="list"
                aria-controls=""
                aria-expanded="false"
+                aria-invalid="false"
                data-test-subj="comboBoxSearchInput"
                id="generated-id__eui-combobox-id"
                role="combobox"
@ -585,7 +591,7 @@ Object {
            class="euiFormControlLayout__childrenWrapper"
          >
            <div
-              class="euiComboBox__inputWrap euiComboBox__inputWrap--fullWidth euiComboBox__inputWrap--noWrap euiComboBox__inputWrap-isLoading"
+              class="euiComboBox__inputWrap euiFormControlLayout--2icons euiComboBox__inputWrap--fullWidth euiComboBox__inputWrap--noWrap"
              data-test-subj="comboBoxInput"
              tabindex="-1"
            >
@ -602,6 +608,7 @@ Object {
                  aria-autocomplete="list"
                  aria-controls=""
                  aria-expanded="false"
+                  aria-invalid="false"
                  data-test-subj="comboBoxSearchInput"
                  disabled=""
                  id="generated-id__eui-combobox-id"
@ -654,7 +661,7 @@ Object {
          class="euiFormControlLayout__childrenWrapper"
        >
          <div
-            class="euiComboBox__inputWrap euiComboBox__inputWrap--fullWidth euiComboBox__inputWrap--noWrap euiComboBox__inputWrap-isLoading"
+            class="euiComboBox__inputWrap euiFormControlLayout--2icons euiComboBox__inputWrap--fullWidth euiComboBox__inputWrap--noWrap"
            data-test-subj="comboBoxInput"
            tabindex="-1"
          >
@ -671,6 +678,7 @@ Object {
                aria-autocomplete="list"
                aria-controls=""
                aria-expanded="false"
+                aria-invalid="false"
                data-test-subj="comboBoxSearchInput"
                disabled=""
                id="generated-id__eui-combobox-id"
--- a/packages/kbn-securitysolution-autocomplete/src/field_value_match/index.test.tsx
+++ b/packages/kbn-securitysolution-autocomplete/src/field_value_match/index.test.tsx
@ -142,11 +142,7 @@ describe('AutocompleteFieldMatchComponent', () => {
      />
    );

-    expect(
-      wrapper
-        .find('[data-test-subj="comboBoxInput"]')
-        .hasClass('euiComboBox__inputWrap-isClearable')
-    ).toBeTruthy();
+    expect(wrapper.find(`[data-test-subj="comboBoxClearButton"]`)).toBeTruthy();
  });

  test('it correctly displays selected value', () => {
--- a/packages/kbn-securitysolution-autocomplete/src/field_value_match_any/index.test.tsx
+++ b/packages/kbn-securitysolution-autocomplete/src/field_value_match_any/index.test.tsx
@ -131,11 +131,7 @@ describe('AutocompleteFieldMatchAnyComponent', () => {
      />
    );

-    expect(
-      wrapper
-        .find(`[data-test-subj="comboBoxInput"]`)
-        .hasClass('euiComboBox__inputWrap-isClearable')
-    ).toBeTruthy();
+    expect(wrapper.find(`[data-test-subj="comboBoxClearButton"]`)).toBeTruthy();
  });

  test('it correctly displays selected value', () => {
--- a/packages/kbn-securitysolution-autocomplete/src/field_value_wildcard/index.test.tsx
+++ b/packages/kbn-securitysolution-autocomplete/src/field_value_wildcard/index.test.tsx
@ -143,11 +143,7 @@ describe('AutocompleteFieldWildcardComponent', () => {
      />
    );

-    expect(
-      wrapper
-        .find('[data-test-subj="comboBoxInput"]')
-        .hasClass('euiComboBox__inputWrap-isClearable')
-    ).toBeTruthy();
+    expect(wrapper.find(`[data-test-subj="comboBoxClearButton"]`)).toBeTruthy();
  });

  test('it correctly displays selected value', () => {
--- a/packages/kbn-securitysolution-exception-list-components/src/list_header/snapshots/list_header.test.tsx.snap
+++ b/packages/kbn-securitysolution-exception-list-components/src/list_header/snapshots/list_header.test.tsx.snap
@ -331,15 +331,23 @@ Object {
                  <div
                    class="euiFormRow__fieldWrapper"
                  >
-                    <textarea
-                      class="euiTextArea euiTextArea--resizeVertical euiTextArea--fullWidth"
-                      data-test-subj="editModalDescriptionTextField"
-                      id="generated-id"
-                      name="description"
-                      rows="6"
+                    <div
+                      class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--euiTextArea"
                    >
-                      List description
-                    </textarea>
+                      <div
+                        class="euiFormControlLayout__childrenWrapper"
+                      >
+                        <textarea
+                          class="euiTextArea euiTextArea--resizeVertical euiTextArea--fullWidth"
+                          data-test-subj="editModalDescriptionTextField"
+                          id="generated-id"
+                          name="description"
+                          rows="6"
+                        >
+                          List description
+                        </textarea>
+                      </div>
+                    </div>
                  </div>
                </div>
              </form>
--- a/packages/kbn-securitysolution-exception-list-components/src/list_header/edit_modal/snapshots/edit_modal.test.tsx.snap
+++ b/packages/kbn-securitysolution-exception-list-components/src/list_header/edit_modal/snapshots/edit_modal.test.tsx.snap
@ -107,15 +107,23 @@ Object {
                  <div
                    class="euiFormRow__fieldWrapper"
                  >
-                    <textarea
-                      class="euiTextArea euiTextArea--resizeVertical euiTextArea--fullWidth"
-                      data-test-subj="editModalDescriptionTextField"
-                      id="generated-id"
-                      name="description"
-                      rows="6"
+                    <div
+                      class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--euiTextArea"
                    >
-                      list description
-                    </textarea>
+                      <div
+                        class="euiFormControlLayout__childrenWrapper"
+                      >
+                        <textarea
+                          class="euiTextArea euiTextArea--resizeVertical euiTextArea--fullWidth"
+                          data-test-subj="editModalDescriptionTextField"
+                          id="generated-id"
+                          name="description"
+                          rows="6"
+                        >
+                          list description
+                        </textarea>
+                      </div>
+                    </div>
                  </div>
                </div>
              </form>
--- a/src/dev/license_checker/config.ts
+++ b/src/dev/license_checker/config.ts
@ -85,6 +85,6 @@ 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.4.0': ['Elastic License 2.0'],
-  '@elastic/eui@77.0.0': ['SSPL-1.0 OR Elastic License 2.0'],
+  '@elastic/eui@77.1.1': ['SSPL-1.0 OR Elastic License 2.0'],
  'language-subtag-registry@0.3.21': ['CC-BY-4.0'], // retired ODC‑By license https://github.com/mattcg/language-subtag-registry
 };
--- a/x-pack/plugins/security_solution/public/detections/components/rules/eql_query_bar/eql_query_bar.test.tsx
+++ b/x-pack/plugins/security_solution/public/detections/components/rules/eql_query_bar/eql_query_bar.test.tsx
@ -67,7 +67,7 @@ describe('EqlQueryBar', () => {

    wrapper
      .find('[data-test-subj="eqlQueryBarTextInput"]')
-      .first()
+      .last()
      .simulate('change', { target: { value: 'newQuery' } });

    const expected = {
--- a/x-pack/plugins/stack_connectors/public/connector_types/email/email_params.test.tsx
+++ b/x-pack/plugins/stack_connectors/public/connector_types/email/email_params.test.tsx
@ -111,7 +111,7 @@ describe('EmailParamsFields renders', () => {
    const valueToSimulate = 'some new value';
    wrapper
      .find('[data-test-subj="messageTextArea"]')
-      .first()
+      .last()
      .simulate('change', { target: { value: valueToSimulate } });
    expect(editAction).toHaveBeenCalledWith('message', valueToSimulate, 0);
    wrapper.setProps({
--- a/x-pack/plugins/stack_connectors/public/connector_types/server_log/server_log_params.test.tsx
+++ b/x-pack/plugins/stack_connectors/public/connector_types/server_log/server_log_params.test.tsx
@ -119,7 +119,7 @@ describe('ServerLogParamsFields renders', () => {
    const valueToSimulate = 'some new value';
    wrapper
      .find('[data-test-subj="messageTextArea"]')
-      .first()
+      .last()
      .simulate('change', { target: { value: valueToSimulate } });
    expect(editAction).toHaveBeenCalledWith('message', valueToSimulate, 0);
    wrapper.setProps({
--- a/x-pack/plugins/threat_intelligence/public/modules/indicators/components/barchart/snapshots/wrapper.test.tsx.snap
+++ b/x-pack/plugins/threat_intelligence/public/modules/indicators/components/barchart/snapshots/wrapper.test.tsx.snap
@ -37,7 +37,7 @@ exports[`<IndicatorsBarChartWrapper /> when not loading or refetching should ren
              class="euiFormControlLayout__childrenWrapper"
            >
              <div
-                class="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap euiComboBox__inputWrap--inGroup"
+                class="euiComboBox__inputWrap euiFormControlLayout--1icons euiComboBox__inputWrap--noWrap euiComboBox__inputWrap--inGroup"
                data-test-subj="comboBoxInput"
                tabindex="-1"
              >
@ -54,6 +54,7 @@ exports[`<IndicatorsBarChartWrapper /> when not loading or refetching should ren
                    aria-autocomplete="list"
                    aria-controls=""
                    aria-expanded="false"
+                    aria-invalid="false"
                    data-test-subj="comboBoxSearchInput"
                    id="generated-id__eui-combobox-id"
                    role="combobox"
--- a/x-pack/plugins/threat_intelligence/public/modules/indicators/components/barchart/field_selector/snapshots/field_selector.test.tsx.snap
+++ b/x-pack/plugins/threat_intelligence/public/modules/indicators/components/barchart/field_selector/snapshots/field_selector.test.tsx.snap
@ -22,7 +22,7 @@ Object {
            class="euiFormControlLayout__childrenWrapper"
          >
            <div
-              class="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap euiComboBox__inputWrap--inGroup"
+              class="euiComboBox__inputWrap euiFormControlLayout--1icons euiComboBox__inputWrap--noWrap euiComboBox__inputWrap--inGroup"
              data-test-subj="comboBoxInput"
              tabindex="-1"
            >
@ -39,6 +39,7 @@ Object {
                  aria-autocomplete="list"
                  aria-controls=""
                  aria-expanded="false"
+                  aria-invalid="false"
                  data-test-subj="comboBoxSearchInput"
                  id="generated-id__eui-combobox-id"
                  role="combobox"
@ -90,7 +91,7 @@ Object {
          class="euiFormControlLayout__childrenWrapper"
        >
          <div
-            class="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap euiComboBox__inputWrap--inGroup"
+            class="euiComboBox__inputWrap euiFormControlLayout--1icons euiComboBox__inputWrap--noWrap euiComboBox__inputWrap--inGroup"
            data-test-subj="comboBoxInput"
            tabindex="-1"
          >
@ -107,6 +108,7 @@ Object {
                aria-autocomplete="list"
                aria-controls=""
                aria-expanded="false"
+                aria-invalid="false"
                data-test-subj="comboBoxSearchInput"
                id="generated-id__eui-combobox-id"
                role="combobox"
@ -215,7 +217,7 @@ Object {
            class="euiFormControlLayout__childrenWrapper"
          >
            <div
-              class="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap euiComboBox__inputWrap--inGroup"
+              class="euiComboBox__inputWrap euiFormControlLayout--1icons euiComboBox__inputWrap--noWrap euiComboBox__inputWrap--inGroup"
              data-test-subj="comboBoxInput"
              tabindex="-1"
            >
@ -232,6 +234,7 @@ Object {
                  aria-autocomplete="list"
                  aria-controls=""
                  aria-expanded="false"
+                  aria-invalid="false"
                  data-test-subj="comboBoxSearchInput"
                  id="generated-id__eui-combobox-id"
                  role="combobox"
@ -283,7 +286,7 @@ Object {
          class="euiFormControlLayout__childrenWrapper"
        >
          <div
-            class="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap euiComboBox__inputWrap--inGroup"
+            class="euiComboBox__inputWrap euiFormControlLayout--1icons euiComboBox__inputWrap--noWrap euiComboBox__inputWrap--inGroup"
            data-test-subj="comboBoxInput"
            tabindex="-1"
          >
@ -300,6 +303,7 @@ Object {
                aria-autocomplete="list"
                aria-controls=""
                aria-expanded="false"
+                aria-invalid="false"
                data-test-subj="comboBoxSearchInput"
                id="generated-id__eui-combobox-id"
                role="combobox"
--- a/yarn.lock
+++ b/yarn.lock
@ -1543,10 +1543,10 @@
  resolved "https://registry.yarnpkg.com/@elastic/eslint-plugin-eui/-/eslint-plugin-eui-0.0.2.tgz#56b9ef03984a05cc213772ae3713ea8ef47b0314"
  integrity sha512-IoxURM5zraoQ7C8f+mJb9HYSENiZGgRVcG4tLQxE61yHNNRDXtGDWTZh8N1KIHcsqN1CEPETjuzBXkJYF/fDiQ==

-"@elastic/eui@77.0.0":
-  version "77.0.0"
-  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-77.0.0.tgz#931bb7f8a109b571dedefe481ccf41a9229a6286"
-  integrity sha512-4RV6GxSFFWGEZtUkLpZWQrwTdEVMq/hmicSZiCpvJUnilLmhfnNEGqCn5Qu8g/OOb5AL3XayfytWMiiaJ9Yw+g==
+"@elastic/eui@77.1.1":
+  version "77.1.1"
+  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-77.1.1.tgz#82f4294bf3239d5d825c1d939c49d125bfdbeb72"
+  integrity sha512-guJmHoGDbvKh/738taKDZGSdNk+OXMse513oPaPf4NoXpQUeYvl3gLT50mX5J4nwILS1LFKNGrbU2Es77HM1cQ==
  dependencies:
    "@types/chroma-js" "^2.0.0"
    "@types/lodash" "^4.14.160"