Upgrade EUI to v96.1.0 (#194619)

`v95.12.0`⏩`v96.1.0`

_[Questions? Please see our Kibana upgrade
FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams)_

---

## [`v96.0.0`](https://github.com/elastic/eui/releases/v96.0.0)

- Improved `EuiPageHeader`/`EuiPageTemplate.Header`'s responsive UX:
([#8044](elastic/eui#8044))
- `rightSideItems` are no longer pushed to the side by wide `tabs`
content
- `rightSideItems` now wrap more responsively at smaller container
widths
- Updated `EuiDraggable` with a new `usePortal` prop.
([#8048](elastic/eui#8048))
- This prop portals the dragged element to the body, allowing it to
escape stacking contexts which prevents buggy drag positioning in e.g.
popovers, modals, and flyouts.

**Bug fixes**

- Fixed `EuiProvider`'s system color mode detection causing errors
during server-side rendering
([#8040](elastic/eui#8040))
- Fixed an `EuiDataGrid` rendering bug that was causing bouncing
scrollbar issues ([#8041](elastic/eui#8041))
- Fixed `EuiSearchBox` skips input when running with React 18 in Legacy
Mode ([#8047](elastic/eui#8047))

**Deprecations**

- Deprecated `EuiPopover`'s `hasDragDrop` prop. Use `EuiDraggable`'s new
`usePortal` prop instead.
([#8048](elastic/eui#8048))

**Breaking changes**

- Removed the following exported `.css` files:
([#8045](elastic/eui#8045))
  - `@elastic/eui/dist/eui_theme_light.css`
  - `@elastic/eui/dist/eui_theme_light.min.css`
  - `@elastic/eui/dist/eui_theme_dark.css`
  - `@elastic/eui/dist/eui_theme_dark.min.css`
- All EUI components are now on CSS-in-JS. A CSS file/import in
consuming applications is no longer needed, and is safe to remove.
([#8045](elastic/eui#8045))
- Removed all `src/theme/legacy` Sass exports
([#8054](elastic/eui#8054))

**CSS-in-JS conversions**

- Removed the following component-specific Sass variables:
([#8031](elastic/eui#8031))
  - `$euiButtonColorDisabled`
  - `$euiButtonColorDisabledText`
  - `$euiButtonColorGhostDisabled`
  - `$euiButtonFontWeight`
  - `$euiFormControlIconSizes`
  - `$euiFormControlLayoutGroupInputHeight`
  - `$euiFormControlLayoutGroupInputCompressedHeight`
  - `$euiFormControlLayoutGroupInputCompressedBorderRadius`
  - `$euiPageSidebarMinWidth`
  - `$euiPageDefaultMaxWidth`
  - `$euiPanelPaddingModifiers`
  - `$euiPanelBorderRadiusModifiers`
  - `$euiPanelBackgroundColorModifiers`
  - `$euiRangeTrackColor`
  - `$euiRangeHighlightColor`
  - `$euiRangeThumbHeight`
  - `$euiRangeThumbWidth`
  - `$euiRangeThumbBorderColor`
  - `$euiRangeThumbBackgroundColor`
  - `$euiRangeTrackWidth`
  - `$euiRangeTrackHeight`
  - `$euiRangeTrackCompressedHeight`
  - `$euiRangeTrackBorderWidth`
  - `$euiRangeTrackBorderColor`
  - `$euiRangeTrackRadius`
  - `$euiRangeDisabledOpacity`
  - `$euiRangeHighlightHeight`
  - `$euiRangeHighlightCompressedHeight`
  - `$euiRangeHeight`
  - `$euiRangeCompressedHeight`
  - `$euiTooltipAnimations`
  - `$euiTooltipBackgroundColor`
  - `$euiTooltipBorderColor`
- Removed the following Sass mixins due to low external usage:
([#8031](elastic/eui#8031))
  - `euiHoverState`
  - `euiFocusState`
  - `euiDisabledState`
  - `euiInteractiveStates`
  - `euiFormControlStyle`
  - `euiFormControlStyleCompressed`
  - `euiFormControlFocusStyle`
  - `euiFormControlInvalidStyle`
  - `euiFormControlDisabledTextStyle`
  - `euiFormControlDisabledStyle`
  - `euiFormControlReadOnlyStyle`
  - `euiFormControlText`
  - `euiFormControlSize`
  - `euiFormControlGradient`
  - `euiFormControlLayoutPadding`
  - `euiFormControlWithIcon`
  - `euiFormControlIsLoading`
  - `euiFormControlSideBorderRadius`
  - `euiPlaceholderPerBrowser`
  - `euiHiddenSelectableInput`
  - `euiLink`
  - `euiLoadingSpinnerBorderColors`
  - `euiRangeTrackSize`
  - `euiRangeTrackPerBrowser`
  - `euiRangeThumbBorder`
  - `euiRangeThumbBoxShadow`
  - `euiRangeThumbFocusBoxShadow`
  - `euiRangeThumbStyle`
  - `euiRangeThumbPerBrowser`
  - `euiRangeThumbFocus`
  - `euiToolTipAnimation`

## [`v96.1.0`](https://github.com/elastic/eui/releases/v96.1.0)

**CSS-in-JS conversions**

- Removed the following component-specific Sass mixins:
([#8055](elastic/eui#8055))
  - `euiButton`
  - `euiButtonBase`
  - `euiButtonFocus`
  - `euiButtonContent`
  - `euiButtonContentDisabled`
  - `euiButtonDefaultStyle`
  - `euiButtonFillStyle`
  - `euiPanel`
  - `euiFormControlDefaultShadow`
  - `euiToolTipTitle`

package.json

@@ -117,7 +117,7 @@
     "@elastic/ecs": "^8.11.1",
     "@elastic/elasticsearch": "^8.15.0",
     "@elastic/ems-client": "8.5.3",
-    "@elastic/eui": "95.12.0-backport.0",
+    "@elastic/eui": "96.1.0",
     "@elastic/filesaver": "1.1.2",
     "@elastic/node-crypto": "1.2.1",
     "@elastic/numeral": "^2.5.1",

packages/kbn-test/src/jest/setup/emotion.js

@@ -29,5 +29,14 @@ console.error = (message, ...rest) => {
   ) {
     return;
   }
+  // @see https://github.com/jsdom/jsdom/issues/2177
+  // JSDOM doesn't yet know how to parse @container CSS queries -
+  // all we can do is silence its errors for now
+  if (
+    typeof message === 'object' &&
+    message?.message?.startsWith('Could not parse CSS stylesheet')
+  ) {
+    return;
+  }
   consoleError(message, ...rest);
 };

src/dev/license_checker/config.ts

@@ -87,7 +87,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.5.3': ['Elastic License 2.0'],
-  '@elastic/eui@95.12.0-backport.0': ['Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.0'],
+  '@elastic/eui@96.1.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@1.2.1': ['Apache-2.0'], // license (Apache-2.0 AND BSD-3-Clause)

src/plugins/unified_search/public/filters_builder/filter_item/filter_item.tsx

@@ -251,6 +251,7 @@ export function FilterItem({
             hasInteractiveChildren={true}
             disableInteractiveElementBlocking
             className={cx(disabledDraggableCss)}
+            usePortal
           >
             {(provided) => (
               <EuiFlexGroup

src/plugins/unified_search/public/query_string_input/add_filter_popover.tsx

@@ -93,7 +93,6 @@ const AddFilterPopoverComponent = React.memo(function AddFilterPopover({
         initialFocus=".filterEditor__hiddenItem"
         ownFocus
         repositionOnScroll
-        hasDragDrop
       >
         <FilterEditorWrapper
           indexPatterns={indexPatterns}

src/plugins/unified_search/public/query_string_input/query_bar_menu.tsx

@@ -267,7 +267,6 @@ function QueryBarMenuComponent({
       anchorPosition="downLeft"
       repositionOnScroll
       data-test-subj="queryBarMenuPopover"
-      hasDragDrop
     >
       {renderComponent()}
     </EuiPopover>

x-pack/plugins/cases/public/components/all_cases/columns_popover.tsx

@@ -98,7 +98,6 @@ export const ColumnsPopover: React.FC<Props> = ({
       closePopover={closePopover}
       panelPaddingSize="s"
       anchorPosition="leftUp"
-      hasDragDrop
       zIndex={0}
       data-test-subj="column-selection-popover"
       button={
@@ -158,6 +157,7 @@ export const ColumnsPopover: React.FC<Props> = ({
                   css={{ height: euiTheme.size.xl, paddingLeft: euiTheme.size.base }}
                   customDragHandle
                   hasInteractiveChildren
+                  usePortal
                 >
                   {(provided) => (
                     <EuiFlexGroup alignItems="center" gutterSize="m" justifyContent="spaceBetween">

x-pack/plugins/ml/public/application/components/chart_tooltip/_chart_tooltip.scss

@@ -13,8 +13,10 @@
   }
 
   &__header {
-    @include euiToolTipTitle;
+    font-weight: $euiFontWeightBold;
     padding: $euiSizeXS ($euiSizeXS * 2);
+    margin-bottom: $euiSizeXS;
+    border-bottom: $euiBorderThin solid transparentize($euiBorderColor, .8);
   }
 
   &__item {

yarn.lock

@@ -1741,10 +1741,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@95.12.0-backport.0":
-  version "95.12.0-backport.0"
-  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-95.12.0-backport.0.tgz#de862ded9f23053b24e1f1939de1ff8f8109be60"
-  integrity sha512-hqhqWdAGw5tQwWTP/hn2VoM8YQE2k9IdMmGh0RdkG+JcD1GZySvSDWdTQgr9iA4/XaulJp9R3OenwDjkLLmjPw==
+"@elastic/eui@96.1.0":
+  version "96.1.0"
+  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-96.1.0.tgz#cd75f2a7a2ca07df6fb8f9af985dff3f05172fb6"
+  integrity sha512-LmB92xr704Dfth9UnxCOm4b63lghb/7svXsnd0zcbSQA/BPqktUm1evZjWYIWFIek5D4JI4dmM+ygXLWdKSM+Q==
   dependencies:
     "@hello-pangea/dnd" "^16.6.0"
     "@types/lodash" "^4.14.202"