Update Emotion to 11.14

packages/docusaurus-theme/package.json

@@ -38,8 +38,8 @@
     "@elastic/eui": "workspace:^",
     "@elastic/eui-docgen": "workspace:^",
     "@elastic/eui-theme-borealis": "workspace:^",
-    "@emotion/css": "^11.11.2",
-    "@emotion/react": "^11.11.4",
+    "@emotion/css": "^11.13.5",
+    "@emotion/react": "^11.14.0",
     "@types/react-window": "^1.8.8",
     "clsx": "^2.1.1",
     "codesandbox": "^2.2.3",

packages/eui-theme-common/package.json

@@ -32,7 +32,7 @@
     "@babel/preset-env": "^7.21.5",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.21.5",
-    "@emotion/react": "^11.11.0",
+    "@emotion/react": "^11.14.0",
     "@types/chroma-js": "^2.4.0",
     "@types/jest": "^29.5.12",
     "@types/prettier": "2.7.3",

packages/eui/package.json

@@ -108,12 +108,12 @@
     "@elastic/charts": "^64.1.0",
     "@elastic/datemath": "^5.0.3",
     "@elastic/eui-theme-borealis": "workspace:*",
-    "@emotion/babel-preset-css-prop": "^11.11.0",
-    "@emotion/cache": "^11.11.0",
-    "@emotion/css": "^11.11.0",
-    "@emotion/eslint-plugin": "^11.11.0",
-    "@emotion/jest": "^11.11.0",
-    "@emotion/react": "^11.11.0",
+    "@emotion/babel-preset-css-prop": "^11.12.0",
+    "@emotion/cache": "^11.14.0",
+    "@emotion/css": "^11.13.5",
+    "@emotion/eslint-plugin": "^11.12.0",
+    "@emotion/jest": "^11.13.0",
+    "@emotion/react": "^11.14.0",
     "@faker-js/faker": "^8.0.2",
     "@loki/create-async-callback": "^0.35.0",
     "@loki/is-loki-running": "^0.35.0",

packages/eui/src/components/breadcrumbs/_breadcrumb_content.tsx

@@ -13,7 +13,10 @@ import React, {
   useCallback,
   forwardRef,
 } from 'react';
-import { ArrayCSSInterpolation } from '@emotion/css';
+import type {
+  ArrayCSSInterpolation,
+  CSSInterpolation,
+} from '@emotion/css/create-instance';
 import classNames from 'classnames';
 
 import { useEuiMemoizedStyles } from '../../services';
@@ -54,7 +57,7 @@ export const EuiBreadcrumbContent: FunctionComponent<
   const classes = classNames('euiBreadcrumb__content', className);
 
   const styles = useEuiMemoizedStyles(euiBreadcrumbContentStyles);
-  const cssStyles: ArrayCSSInterpolation = [
+  const cssStyles: CSSInterpolation[] = [
     styles.euiBreadcrumb__content,
     styles[type],
   ];

packages/eui/src/components/button/button_group/button_group_button.tsx

@@ -12,7 +12,7 @@ import React, {
   MouseEventHandler,
   ReactElement,
 } from 'react';
-import { CSSInterpolation } from '@emotion/css';
+import type { CSSInterpolation } from '@emotion/css/create-instance';
 
 import {
   isEuiThemeRefreshVariant,

packages/eui/src/components/collapsible_nav_beta/_kibana_solution/__snapshots__/collapsible_nav_kibana_solution.test.tsx.snap

@@ -56,7 +56,7 @@ exports[`KibanaCollapsibleNavSolution renders docked icons: popover 1`] = `
   aria-label="Solution view"
   aria-live="off"
   aria-modal="true"
-  class="euiPanel euiPanel--plain euiPanel--paddingSmall euiPopover__panel  emotion-euiPanel-grow-m-s-plain-euiPopover__panel-light-isOpen-hasTransform-right-euiCollapsedNavPopover__panel-euiCollapsibleNavKibanaSolution__switcherPopover"
+  class="euiPanel euiPanel--plain euiPanel--paddingSmall euiPopover__panel emotion-euiPanel-grow-m-s-plain-euiPopover__panel-light-isOpen-hasTransform-right-euiCollapsedNavPopover__panel-euiCollapsibleNavKibanaSolution__switcherPopover"
   data-autofocus="true"
   data-popover-open="true"
   data-popover-panel="true"
@@ -187,7 +187,7 @@ exports[`KibanaCollapsibleNavSolution renders with a solution switcher: popover
   aria-label="Solution view"
   aria-live="off"
   aria-modal="true"
-  class="euiPanel euiPanel--plain euiPanel--paddingSmall euiPopover__panel  emotion-euiPanel-grow-m-s-plain-euiPopover__panel-light-isOpen-isAttached-bottom-euiCollapsibleNavKibanaSolution__switcherPopover"
+  class="euiPanel euiPanel--plain euiPanel--paddingSmall euiPopover__panel emotion-euiPanel-grow-m-s-plain-euiPopover__panel-light-isOpen-isAttached-bottom-euiCollapsibleNavKibanaSolution__switcherPopover"
   data-autofocus="true"
   data-popover-open="true"
   data-popover-panel="true"

packages/eui/src/components/collapsible_nav_beta/collapsible_nav_item/__snapshots__/collapsible_nav_link.test.tsx.snap

@@ -20,7 +20,7 @@ exports[`EuiCollapsibleNavLink renders a link 1`] = `
 >
   Link
   <span
-    class="emotion-EuiExternalLinkIcon"
+    class="emotion-euiExternalLinkIconStyles"
     data-euiicon-type="popout"
     role="presentation"
   />

packages/eui/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/__snapshots__/collapsed_nav_popover.test.tsx.snap

@@ -42,7 +42,7 @@ exports[`EuiCollapsedNavPopover renders 1`] = `
         aria-label="aria-label"
         aria-live="off"
         aria-modal="true"
-        class="euiPanel euiPanel--plain euiPopover__panel  emotion-euiPanel-grow-m-plain-euiPopover__panel-light-isOpen-hasTransform-right-euiCollapsedNavPopover__panel"
+        class="euiPanel euiPanel--plain euiPopover__panel emotion-euiPanel-grow-m-plain-euiPopover__panel-light-isOpen-hasTransform-right-euiCollapsedNavPopover__panel"
         data-autofocus="true"
         data-popover-open="true"
         data-popover-panel="true"

packages/eui/src/components/color_picker/__snapshots__/color_picker.test.tsx.snap

@@ -314,7 +314,7 @@ exports[`EuiColorPicker inline 1`] = `
       />
     </div>
     <span
-      class="euiToolTipAnchor  emotion-euiToolTipAnchor-inlineBlock-euiSaturation__tooltip"
+      class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock-euiSaturation__tooltip"
       style="inset-inline-start: 0; inset-block-start: 0;"
     >
       <button
@@ -342,7 +342,7 @@ exports[`EuiColorPicker inline 1`] = `
       Select the HSV color mode 'hue' value
     </label>
     <span
-      class="euiToolTipAnchor  emotion-euiToolTipAnchor-inlineBlock-euiHue__tooltip"
+      class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock-euiHue__tooltip"
     >
       <input
         aria-roledescription="Hue slider"
@@ -371,7 +371,7 @@ exports[`EuiColorPicker inline 1`] = `
   >
     <li>
       <span
-        class="euiToolTipAnchor  emotion-euiToolTipAnchor-inlineBlock-tooltip"
+        class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock-tooltip"
       >
         <button
           aria-label="Select #16C5C0 as the color"
@@ -383,7 +383,7 @@ exports[`EuiColorPicker inline 1`] = `
     </li>
     <li>
       <span
-        class="euiToolTipAnchor  emotion-euiToolTipAnchor-inlineBlock-tooltip"
+        class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock-tooltip"
       >
         <button
           aria-label="Select #A6EDEA as the color"
@@ -395,7 +395,7 @@ exports[`EuiColorPicker inline 1`] = `
     </li>
     <li>
       <span
-        class="euiToolTipAnchor  emotion-euiToolTipAnchor-inlineBlock-tooltip"
+        class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock-tooltip"
       >
         <button
           aria-label="Select #61A2FF as the color"
@@ -407,7 +407,7 @@ exports[`EuiColorPicker inline 1`] = `
     </li>
     <li>
       <span
-        class="euiToolTipAnchor  emotion-euiToolTipAnchor-inlineBlock-tooltip"
+        class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock-tooltip"
       >
         <button
           aria-label="Select #BFDBFF as the color"
@@ -419,7 +419,7 @@ exports[`EuiColorPicker inline 1`] = `
     </li>
     <li>
       <span
-        class="euiToolTipAnchor  emotion-euiToolTipAnchor-inlineBlock-tooltip"
+        class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock-tooltip"
       >
         <button
           aria-label="Select #EE72A6 as the color"
@@ -431,7 +431,7 @@ exports[`EuiColorPicker inline 1`] = `
     </li>
     <li>
       <span
-        class="euiToolTipAnchor  emotion-euiToolTipAnchor-inlineBlock-tooltip"
+        class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock-tooltip"
       >
         <button
           aria-label="Select #FFC7DB as the color"
@@ -443,7 +443,7 @@ exports[`EuiColorPicker inline 1`] = `
     </li>
     <li>
       <span
-        class="euiToolTipAnchor  emotion-euiToolTipAnchor-inlineBlock-tooltip"
+        class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock-tooltip"
       >
         <button
           aria-label="Select #F6726A as the color"
@@ -455,7 +455,7 @@ exports[`EuiColorPicker inline 1`] = `
     </li>
     <li>
       <span
-        class="euiToolTipAnchor  emotion-euiToolTipAnchor-inlineBlock-tooltip"
+        class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock-tooltip"
       >
         <button
           aria-label="Select #FFC9C2 as the color"
@@ -467,7 +467,7 @@ exports[`EuiColorPicker inline 1`] = `
     </li>
     <li>
       <span
-        class="euiToolTipAnchor  emotion-euiToolTipAnchor-inlineBlock-tooltip"
+        class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock-tooltip"
       >
         <button
           aria-label="Select #EAAE01 as the color"
@@ -479,7 +479,7 @@ exports[`EuiColorPicker inline 1`] = `
     </li>
     <li>
       <span
-        class="euiToolTipAnchor  emotion-euiToolTipAnchor-inlineBlock-tooltip"
+        class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock-tooltip"
       >
         <button
           aria-label="Select #FCD883 as the color"

packages/eui/src/components/color_picker/__snapshots__/color_picker_swatch.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`EuiColorPickerSwatch is rendered 1`] = `
 <span
-  class="euiToolTipAnchor  emotion-euiToolTipAnchor-inlineBlock-tooltip"
+  class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock-tooltip"
 >
   <button
     aria-label="aria-label"

packages/eui/src/components/color_picker/__snapshots__/hue.test.tsx.snap

@@ -12,7 +12,7 @@ exports[`EuiHue accepts a hex value 1`] = `
       Select the HSV color mode 'hue' value
     </label>
     <span
-      class="euiToolTipAnchor  emotion-euiToolTipAnchor-inlineBlock-euiHue__tooltip"
+      class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock-euiHue__tooltip"
     >
       <input
         aria-label="aria-label"
@@ -44,7 +44,7 @@ exports[`EuiHue accepts a hue value 1`] = `
       Select the HSV color mode 'hue' value
     </label>
     <span
-      class="euiToolTipAnchor  emotion-euiToolTipAnchor-inlineBlock-euiHue__tooltip"
+      class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock-euiHue__tooltip"
     >
       <input
         aria-label="aria-label"
@@ -76,7 +76,7 @@ exports[`EuiHue is rendered 1`] = `
       Select the HSV color mode 'hue' value
     </label>
     <span
-      class="euiToolTipAnchor  emotion-euiToolTipAnchor-inlineBlock-euiHue__tooltip"
+      class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock-euiHue__tooltip"
     >
       <input
         aria-label="aria-label"

packages/eui/src/components/color_picker/__snapshots__/saturation.test.tsx.snap

@@ -16,7 +16,7 @@ exports[`EuiSaturation accepts a color 1`] = `
     />
   </div>
   <span
-    class="euiToolTipAnchor  emotion-euiToolTipAnchor-inlineBlock-euiSaturation__tooltip"
+    class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock-euiSaturation__tooltip"
     style="inset-inline-start: 0; inset-block-start: 0;"
   >
     <button
@@ -52,7 +52,7 @@ exports[`EuiSaturation is rendered 1`] = `
     />
   </div>
   <span
-    class="euiToolTipAnchor  emotion-euiToolTipAnchor-inlineBlock-euiSaturation__tooltip"
+    class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock-euiSaturation__tooltip"
     style="inset-inline-start: 0; inset-block-start: 0;"
   >
     <button

packages/eui/src/components/link/__snapshots__/link.test.tsx.snap

@@ -42,7 +42,7 @@ exports[`EuiLink it is an external link 1`] = `
   rel="noreferrer"
 >
   <span
-    class="emotion-EuiExternalLinkIcon"
+    class="emotion-euiExternalLinkIconStyles"
     data-euiicon-type="popout"
     role="presentation"
   />
@@ -136,7 +136,7 @@ exports[`EuiLink supports target 1`] = `
   target="_blank"
 >
   <span
-    class="emotion-EuiExternalLinkIcon"
+    class="emotion-euiExternalLinkIconStyles"
     data-euiicon-type="popout"
     role="presentation"
   />

packages/eui/src/components/link/external_link_icon.test.tsx

@@ -21,7 +21,7 @@ describe('EuiExternalLinkIcon', () => {
     expect(container).toMatchInlineSnapshot(`
       <div>
         <span
-          class="emotion-EuiExternalLinkIcon"
+          class="emotion-euiExternalLinkIconStyles"
           data-euiicon-type="popout"
           role="presentation"
         />
@@ -40,7 +40,7 @@ describe('EuiExternalLinkIcon', () => {
       expect(container).toMatchInlineSnapshot(`
         <div>
           <span
-            class="emotion-EuiExternalLinkIcon"
+            class="emotion-euiExternalLinkIconStyles"
             data-euiicon-type="popout"
             role="presentation"
           />

packages/eui/src/components/link/external_link_icon.tsx

@@ -7,9 +7,9 @@
  */
 
 import React, { FunctionComponent, AnchorHTMLAttributes } from 'react';
+import { css } from '@emotion/react';
 
 import { useEuiMemoizedStyles, UseEuiTheme } from '../../services';
-import { logicalStyle } from '../../global_styling';
 import { EuiIcon, EuiIconProps } from '../icon';
 import { EuiI18n } from '../i18n';
 import { EuiScreenReaderOnly } from '../accessibility';
@@ -28,13 +28,14 @@ export type EuiExternalLinkIconProps = {
   external?: boolean;
 };
 
-const iconStyle = ({ euiTheme }: UseEuiTheme) =>
-  logicalStyle('margin-left', euiTheme.size.xs);
+const euiExternalLinkIconStyles = ({ euiTheme }: UseEuiTheme) => css`
+  margin-inline-start: ${euiTheme.size.xs};
+`;
 
 export const EuiExternalLinkIcon: FunctionComponent<
   EuiExternalLinkIconProps & Partial<EuiIconProps>
 > = ({ target, external, ...rest }) => {
-  const iconCssStyle = useEuiMemoizedStyles(iconStyle);
+  const iconCssStyle = useEuiMemoizedStyles(euiExternalLinkIconStyles);
 
   const showExternalLinkIcon =
     (target === '_blank' && external !== false) || external === true;

packages/eui/src/components/provider/cache/cache_provider.tsx

@@ -7,8 +7,7 @@
  */
 
 import React, { PropsWithChildren } from 'react';
-import { EmotionCache } from '@emotion/css';
-import { CacheProvider } from '@emotion/react';
+import { CacheProvider, type EmotionCache } from '@emotion/react';
 
 export interface EuiCacheProviderProps extends PropsWithChildren {
   cache?: false | EmotionCache;

packages/eui/src/components/provider/provider.test.tsx

@@ -57,12 +57,15 @@ describe('EuiProvider', () => {
   describe('providing an @emotion cache config', () => {
     const defaultCache = createCache({
       key: 'default',
+      speedy: false,
     });
     const globalCache = createCache({
       key: 'global',
+      speedy: false,
     });
     const utilityCache = createCache({
       key: 'utility',
+      speedy: false,
     });
 
     const getStyleByCss = (content: string) => {

packages/eui/src/components/provider/provider.tsx

@@ -7,7 +7,7 @@
  */
 
 import React, { PropsWithChildren, JSX } from 'react';
-import type { EmotionCache } from '@emotion/css';
+import type { EmotionCache } from '@emotion/react';
 import { EuiThemeBorealis } from '@elastic/eui-theme-borealis';
 
 import {