Upgrade @elastic/eui to 85.0.1

package.json

@@ -98,7 +98,7 @@
     "@elastic/datemath": "5.0.3",
     "@elastic/elasticsearch": "npm:@elastic/elasticsearch-canary@8.8.0-canary.2",
     "@elastic/ems-client": "8.4.0",
-    "@elastic/eui": "84.0.0",
+    "@elastic/eui": "85.0.1",
     "@elastic/filesaver": "1.1.2",
     "@elastic/node-crypto": "1.2.1",
     "@elastic/numeral": "^2.5.1",

packages/content-management/table_list_view_table/src/components/table_sort_select.tsx

@@ -160,7 +160,7 @@ export function TableSortSelect({ tableSort, hasUpdatedAtMetadata, onChange }: P
       closePopover={closePopover}
       panelPaddingSize="none"
       anchorPosition="downCenter"
-      panelClassName="euiFilterGroup__popoverPanel"
+      panelProps={{ css: { width: euiTheme.base * 18 } }}
     >
       <>
         <EuiText css={panelHeaderCSS}>{i18nText.headerSort}</EuiText>

packages/content-management/table_list_view_table/src/components/tag_filter_panel.tsx

@@ -116,7 +116,7 @@ export const TagFilterPanel: FC<Props> = ({
         closePopover={closePopover}
         panelPaddingSize="none"
         anchorPosition="downCenter"
-        panelClassName="euiFilterGroup__popoverPanel"
+        panelProps={{ css: { width: euiTheme.base * 18 } }}
         panelStyle={isInUse ? { transition: 'none' } : undefined}
       >
         <EuiPopoverTitle paddingSize="m" css={popoverTitleCSS}>

packages/kbn-unified-field-list/src/components/field_list_filters/field_type_filter.tsx

@@ -47,7 +47,8 @@ const popoverTitleStyle = css`
   padding: ${EQUAL_HEIGHT_OFFSET}px 0;
 `;
 const filterButtonStyle = css`
-  .euiFilterButton__textShift {
+  &,
+  & .euiFilterButton__textShift {
     min-width: 0;
     line-height: 1;
   }
@@ -105,7 +106,12 @@ export function FieldTypeFilter<T extends FieldListItem = DataViewField>({
   const itemStyle = useMemo(
     () => css`
       font-size: ${euiTheme.size.m};
-      padding: ${euiTheme.size.s} ${euiTheme.size.m};
+
+      // Specificity needed to override Sass styles
+      // EUI TODO: Remove this selector once EuiContextMenu has been converted to Emotion
+      &.euiContextMenuItem {
+        padding: ${euiTheme.size.s} ${euiTheme.size.m};
+      }
 
       & + & {
         border-top: 1px solid ${euiTheme.colors.lightestShade};
@@ -149,7 +155,7 @@ export function FieldTypeFilter<T extends FieldListItem = DataViewField>({
   return (
     <EuiPopover
       id="unifiedFieldTypeFilter"
-      panelClassName="euiFilterGroup__popoverPanel"
+      panelProps={{ css: { width: euiTheme.base * 18 } }}
       panelPaddingSize="none"
       anchorPosition="rightUp"
       display="block"

src/dev/license_checker/config.ts

@@ -85,7 +85,7 @@ 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@84.0.0': ['SSPL-1.0 OR Elastic License 2.0'],
+  '@elastic/eui@85.0.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
   'buffers@0.1.1': ['MIT'], // license in importing module https://www.npmjs.com/package/binary
 };

src/plugins/presentation_util/public/components/field_picker/field_type_filter.scss

@@ -1,4 +1,5 @@
 .presFilterByType__panel {
+  width: $euiSize * 18;
   min-width: $euiSizeXXL * 8;
   @include euiBreakpoint('l', 'xl') {
     width: $euiFormMaxWidth;

src/plugins/presentation_util/public/components/field_picker/field_type_filter.tsx

@@ -66,7 +66,7 @@ export function FieldTypeFilter({
     <EuiOutsideClickDetector onOutsideClick={() => {}} isDisabled={!isPopoverOpen}>
       <EuiFilterGroup fullWidth>
         <EuiPopover
-          panelClassName="euiFilterGroup__popoverPanel presFilterByType__panel"
+          panelClassName="presFilterByType__panel"
           panelPaddingSize="none"
           display="block"
           isOpen={isPopoverOpen}

src/plugins/saved_objects_finder/public/finder/saved_object_finder.test.tsx

@@ -679,8 +679,8 @@ describe('SavedObjectsFinder', () => {
       wrapper.instance().componentDidMount!();
       await nextTick();
       expect(wrapper.find('button.euiFilterButton')).toHaveLength(2);
-      expect(wrapper.find('button.euiFilterButton [data-text="Types"]')).toHaveLength(1);
-      expect(wrapper.find('button.euiFilterButton [data-text="Tags"]')).toHaveLength(1);
+      expect(wrapper.find('button.euiFilterButton span[data-text="Types"]')).toHaveLength(1);
+      expect(wrapper.find('button.euiFilterButton span[data-text="Tags"]')).toHaveLength(1);
     });
 
     it('should not render filter buttons if disabled', async () => {

x-pack/plugins/cases/public/components/user_actions_activity_bar/filter_activity.tsx

@@ -27,6 +27,7 @@ const MyEuiFilterGroup = styled(EuiFilterGroup)`
 `;
 
 const FilterAllButton = styled(EuiFilterButton)`
+  &,
   & .euiFilterButton__textShift {
     min-width: 28px;
   }

x-pack/plugins/security_solution/public/common/components/ml_popover/jobs_table/filters/groups_filter_popover.test.tsx

@@ -38,7 +38,7 @@ describe('GroupsFilterPopover', () => {
       />
     );
 
-    wrapper.find('[data-test-subj="groups-filter-popover-button"]').first().simulate('click');
+    wrapper.find('button[data-test-subj="groups-filter-popover-button"]').first().simulate('click');
     wrapper.update();
 
     wrapper.find('EuiFilterSelectItem').first().simulate('click');

x-pack/plugins/security_solution/public/common/components/ml_popover/jobs_table/filters/jobs_table_filters.test.tsx

@@ -25,7 +25,10 @@ describe('JobsTableFilters', () => {
       <JobsTableFiltersComponent securityJobs={securityJobs} onFilterChanged={onFilterChanged} />
     );
 
-    wrapper.find('[data-test-subj="show-elastic-jobs-filter-button"]').first().simulate('click');
+    wrapper
+      .find('button[data-test-subj="show-elastic-jobs-filter-button"]')
+      .first()
+      .simulate('click');
     wrapper.update();
 
     expect(
@@ -42,7 +45,10 @@ describe('JobsTableFilters', () => {
       <JobsTableFiltersComponent securityJobs={securityJobs} onFilterChanged={onFilterChanged} />
     );
 
-    wrapper.find('[data-test-subj="show-custom-jobs-filter-button"]').first().simulate('click');
+    wrapper
+      .find('button[data-test-subj="show-custom-jobs-filter-button"]')
+      .first()
+      .simulate('click');
     wrapper.update();
 
     expect(
@@ -59,10 +65,16 @@ describe('JobsTableFilters', () => {
       <JobsTableFiltersComponent securityJobs={securityJobs} onFilterChanged={onFilterChanged} />
     );
 
-    wrapper.find('[data-test-subj="show-custom-jobs-filter-button"]').first().simulate('click');
+    wrapper
+      .find('button[data-test-subj="show-custom-jobs-filter-button"]')
+      .first()
+      .simulate('click');
     wrapper.update();
 
-    wrapper.find('[data-test-subj="show-elastic-jobs-filter-button"]').first().simulate('click');
+    wrapper
+      .find('button[data-test-subj="show-elastic-jobs-filter-button"]')
+      .first()
+      .simulate('click');
     wrapper.update();
 
     expect(
@@ -85,10 +97,16 @@ describe('JobsTableFilters', () => {
       <JobsTableFiltersComponent securityJobs={securityJobs} onFilterChanged={onFilterChanged} />
     );
 
-    wrapper.find('[data-test-subj="show-custom-jobs-filter-button"]').first().simulate('click');
+    wrapper
+      .find('button[data-test-subj="show-custom-jobs-filter-button"]')
+      .first()
+      .simulate('click');
     wrapper.update();
 
-    wrapper.find('[data-test-subj="show-custom-jobs-filter-button"]').first().simulate('click');
+    wrapper
+      .find('button[data-test-subj="show-custom-jobs-filter-button"]')
+      .first()
+      .simulate('click');
     wrapper.update();
 
     expect(

x-pack/plugins/security_solution/public/explore/network/components/flow_controls/flow_direction_select.test.tsx

@@ -44,7 +44,7 @@ describe('Select Flow Direction', () => {
       );
 
       wrapper
-        .find(`[data-test-subj="${FlowDirection.biDirectional}"]`)
+        .find(`button[data-test-subj="${FlowDirection.biDirectional}"]`)
         .first()
         .simulate('click', event);
       wrapper.update();

x-pack/plugins/security_solution/public/timelines/components/open_timeline/index.test.tsx

@@ -472,7 +472,7 @@ describe('StatefulOpenTimeline', () => {
         false
       );
 
-      wrapper.find('[data-test-subj="only-favorites-toggle"]').first().simulate('click');
+      wrapper.find('button[data-test-subj="only-favorites-toggle"]').first().simulate('click');
 
       expect(wrapper.find('[data-test-subj="open-timeline"]').last().prop('onlyFavorites')).toEqual(
         true

x-pack/plugins/security_solution/public/timelines/components/open_timeline/search_row/index.test.tsx

@@ -77,7 +77,7 @@ describe('SearchRow', () => {
         </ThemeProvider>
       );
 
-      wrapper.find('[data-test-subj="only-favorites-toggle"]').first().simulate('click');
+      wrapper.find('button[data-test-subj="only-favorites-toggle"]').first().simulate('click');
 
       expect(onToggleOnlyFavorites).toHaveBeenCalled();
     });

x-pack/plugins/triggers_actions_ui/public/application/sections/common/components/event_log/event_log_list_status_filter.test.tsx

@@ -42,7 +42,7 @@ describe('event_log_list_status_filter', () => {
       <EventLogListStatusFilter selectedOptions={[]} onChange={onChangeMock} />
     );
 
-    wrapper.find(EuiFilterButton).simulate('click');
+    wrapper.find(EuiFilterButton).find('button').simulate('click');
 
     const statusItems = wrapper.find(EuiFilterSelectItem);
     expect(statusItems.length).toEqual(4);

x-pack/plugins/triggers_actions_ui/public/application/sections/rules_list/components/rule_status_filter.test.tsx

@@ -35,7 +35,7 @@ describe('RuleStatusFilter', () => {
 
     expect(wrapper.find('[data-test-subj="ruleStateFilterSelect"]').exists()).toBeFalsy();
 
-    wrapper.find(EuiFilterButton).simulate('click');
+    wrapper.find(EuiFilterButton).find('button').simulate('click');
 
     const statusItems = wrapper.find(EuiSelectableListItem);
     expect(statusItems.length).toEqual(3);
@@ -46,7 +46,7 @@ describe('RuleStatusFilter', () => {
       <RuleStatusFilter selectedStatuses={[]} onChange={onChangeMock} />
     );
 
-    wrapper.find(EuiFilterButton).simulate('click');
+    wrapper.find(EuiFilterButton).find('button').simulate('click');
 
     wrapper.find(EuiSelectableListItem).at(0).simulate('click');
     expect(onChangeMock).toHaveBeenCalledWith(['enabled']);

x-pack/plugins/upgrade_assistant/__jest__/client_integration/es_deprecations/es_deprecations.helpers.ts

@@ -56,7 +56,7 @@ const createActions = (testBed: TestBed) => {
         // EUI doesn't support data-test-subj's on the filter buttons, so we must access via CSS selector
         find('searchBarContainer')
           .find('.euiPopover')
-          .find('.euiFilterButton')
+          .find('button.euiFilterButton')
           .at(index)
           .simulate('click');
       });
@@ -75,7 +75,7 @@ const createActions = (testBed: TestBed) => {
     clickCriticalFilterButton: async () => {
       await act(async () => {
         // EUI doesn't support data-test-subj's on the filter buttons, so we must access via CSS selector
-        find('searchBarContainer').find('.euiFilterButton').at(0).simulate('click');
+        find('searchBarContainer').find('button.euiFilterButton').at(0).simulate('click');
       });
 
       component.update();

x-pack/plugins/upgrade_assistant/__jest__/client_integration/kibana_deprecations/kibana_deprecations.helpers.ts

@@ -64,7 +64,7 @@ const createActions = (testBed: TestBed) => {
         find('kibanaDeprecations')
           .find('.euiSearchBar__filtersHolder')
           .find('.euiPopover')
-          .find('.euiFilterButton')
+          .find('button.euiFilterButton')
           .at(0)
           .simulate('click');
       });
@@ -77,7 +77,7 @@ const createActions = (testBed: TestBed) => {
         // EUI doesn't support data-test-subj's on the filter buttons, so we must access via CSS selector
         find('kibanaDeprecations')
           .find('.euiSearchBar__filtersHolder')
-          .find('.euiFilterButton')
+          .find('button.euiFilterButton')
           .at(0)
           .simulate('click');
       });

yarn.lock

@@ -1552,10 +1552,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@84.0.0":
-  version "84.0.0"
-  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-84.0.0.tgz#0d37da1fe3f2f9af54b62e127c9682d381111ba6"
-  integrity sha512-hgDWyXwlhpbNzQgIvGLppqSRMEVt2zMlXIxMzvlV6PYPJUh1K9f5pOyXtNyouFgYZG2bkltvG3cUrMLeBbgUkg==
+"@elastic/eui@85.0.1":
+  version "85.0.1"
+  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-85.0.1.tgz#835b77f20670918d0f30ccfa47f0f94cb1fdc9e8"
+  integrity sha512-OZ8XClOdiRTyhAcipaw3wGgA8HogNqNESJZ8jqUTGbVxN+hsLjAA64rKcqkTndid+7mbxV3+UePieRVnOkzMEg==
   dependencies:
     "@types/chroma-js" "^2.0.0"
     "@types/lodash" "^4.14.194"