Upgrade EUI to v96.1.0 (elastic#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:
([elastic#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.
([elastic#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
([elastic#8040](elastic/eui#8040))
- Fixed an `EuiDataGrid` rendering bug that was causing bouncing
scrollbar issues ([elastic#8041](elastic/eui#8041))
- Fixed `EuiSearchBox` skips input when running with React 18 in Legacy
Mode ([elastic#8047](elastic/eui#8047))

**Deprecations**

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

**Breaking changes**

- Removed the following exported `.css` files:
([elastic#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.
([elastic#8045](elastic/eui#8045))
- Removed all `src/theme/legacy` Sass exports
([elastic#8054](elastic/eui#8054))

**CSS-in-JS conversions**

- Removed the following component-specific Sass variables:
([elastic#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:
([elastic#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:
([elastic#8055](elastic/eui#8055))
  - `euiButton`
  - `euiButtonBase`
  - `euiButtonFocus`
  - `euiButtonContent`
  - `euiButtonContentDisabled`
  - `euiButtonDefaultStyle`
  - `euiButtonFillStyle`
  - `euiPanel`
  - `euiFormControlDefaultShadow`
  - `euiToolTipTitle`

Author: cee-chen

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-securitysolution-exception-list-components/src/list_header/__snapshots__/list_header.test.tsx.snap

@@ -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);
 };

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

@@ -87,7 +87,7 @@ 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@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'],
   '[email protected]': ['CC-BY-4.0'], // retired ODC‑By license https://github.com/mattcg/language-subtag-registry
   '[email protected]': ['MIT'], // license in importing module https://www.npmjs.com/package/binary
   '@bufbuild/[email protected]': ['Apache-2.0'], // license (Apache-2.0 AND BSD-3-Clause)

packages/shared-ux/page/kibana_template/impl/src/__snapshots__/page_template.test.tsx.snap

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

src/dev/license_checker/config.ts

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

src/plugins/saved_objects_management/public/management_section/object_view/components/__snapshots__/header.test.tsx.snap

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

src/plugins/unified_search/public/filters_builder/filter_item/filter_item.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">