[8.19] Update Emotion dependencies (main) (#251761)

package.json

@@ -143,12 +143,12 @@
     "@elastic/search-ui": "1.20.2",
     "@elastic/search-ui-app-search-connector": "1.20.2",
     "@elastic/search-ui-engines-connector": "1.20.2",
-    "@emotion/cache": "11.11.0",
-    "@emotion/css": "11.11.0",
-    "@emotion/react": "11.11.1",
-    "@emotion/serialize": "1.1.2",
+    "@emotion/cache": "11.14.0",
+    "@emotion/css": "11.13.5",
+    "@emotion/react": "11.14.0",
+    "@emotion/serialize": "1.3.3",
     "@emotion/server": "11.11.0",
-    "@emotion/styled": "11.11.0",
+    "@emotion/styled": "11.14.1",
     "@faker-js/faker": "8.3.1",
     "@formatjs/icu-messageformat-parser": "2.11.1",
     "@formatjs/intl": "2.10.2",

src/platform/packages/private/kbn-ui-shared-deps-npm/version_dependencies.txt

@@ -19,21 +19,20 @@
 @elastic/eui@104.0.0-amsterdam.1
 @elastic/numeral@2.5.1
 @elastic/prismjs-esql@1.1.0
-@emotion/babel-plugin@11.11.0
-@emotion/cache@11.11.0
-@emotion/hash@0.9.1
+@emotion/babel-plugin@11.13.5
+@emotion/cache@11.14.0
+@emotion/hash@0.9.2
 @emotion/is-prop-valid@1.4.0
-@emotion/memoize@0.8.1
 @emotion/memoize@0.9.0
-@emotion/react@11.11.1
-@emotion/serialize@1.1.2
-@emotion/sheet@1.2.2
+@emotion/react@11.14.0
+@emotion/serialize@1.3.3
+@emotion/sheet@1.4.0
 @emotion/stylis@0.8.5
+@emotion/unitless@0.10.0
 @emotion/unitless@0.7.5
-@emotion/unitless@0.8.1
-@emotion/use-insertion-effect-with-fallbacks@1.0.1
-@emotion/utils@1.2.1
-@emotion/weak-memoize@0.3.1
+@emotion/use-insertion-effect-with-fallbacks@1.2.0
+@emotion/utils@1.4.2
+@emotion/weak-memoize@0.4.0
 @hello-pangea/dnd@16.6.0
 @jridgewell/gen-mapping@0.3.5
 @jridgewell/resolve-uri@3.1.2

src/platform/packages/shared/kbn-test/jest-preset.js

@@ -91,6 +91,7 @@ module.exports = {
   snapshotSerializers: [
     '<rootDir>/src/platform/packages/shared/react/kibana_mount/test_helpers/react_mount_serializer.ts',
     'enzyme-to-json/serializer',
+    '<rootDir>/src/platform/packages/shared/kbn-test/src/jest/setup/enzyme_emotion_serializer.js',
     '<rootDir>/src/platform/packages/shared/kbn-test/src/jest/setup/emotion.js',
   ],
 

src/platform/packages/shared/kbn-test/src/jest/setup/enzyme_emotion_serializer.js

@@ -0,0 +1,92 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+/**
+ * Custom serializer to handle Emotion-styled components in Enzyme shallow renders.
+ * This must run BEFORE enzyme-to-json to properly transform Emotion components.
+ *
+ * The problem: When using Enzyme's shallow() with Emotion-styled components,
+ * the component's internal structure (ForwardRef, __EMOTION_TYPE_PLEASE_DO_NOT_USE__)
+ * gets exposed in snapshots. This serializer intercepts those components and
+ * transforms them to match the expected format before enzyme-to-json processes them.
+ */
+
+module.exports = {
+  test(val) {
+    // Skip if not an object
+    if (!val || typeof val !== 'object') {
+      return false;
+    }
+
+    // Must have type and props to be a valid React element
+    if (!val.type || !val.props) {
+      return false;
+    }
+
+    // Check if this is an Enzyme ShallowWrapper with Emotion props
+    if (val.props.__EMOTION_TYPE_PLEASE_DO_NOT_USE__) {
+      return true;
+    }
+
+    // Also check for components with a css prop (function, object, or string)
+    // These are Emotion-styled components that need css prop normalization
+    // BUT skip if css is already the processed string "unknown styles" to avoid infinite recursion
+    if (val.props.css && val.props.css !== 'unknown styles') {
+      return true;
+    }
+
+    return false;
+  },
+  serialize(val, config, indentation, depth, refs, printer) {
+    const props = { ...val.props };
+
+    // Get the original component type before we modify props
+    const emotionType = props.__EMOTION_TYPE_PLEASE_DO_NOT_USE__;
+
+    // Simplify the css prop to match the old snapshot format
+    // Handle css as object, function, or any truthy value
+    if (props.css) {
+      props.css = 'unknown styles';
+    }
+
+    // Remove Emotion internals from props
+    delete props.__EMOTION_TYPE_PLEASE_DO_NOT_USE__;
+
+    // Try to get the original component name from Emotion's internal type
+    let componentName = null;
+    if (emotionType) {
+      // If emotionType is a string (like 'div', 'span'), use it directly
+      if (typeof emotionType === 'string') {
+        componentName = emotionType;
+      }
+      // Emotion wraps components, try to get the display name
+      else if (emotionType.displayName) {
+        componentName = emotionType.displayName;
+      } else if (emotionType.name) {
+        componentName = emotionType.name;
+      } else if (typeof emotionType === 'function' && emotionType.render) {
+        componentName = emotionType.render.displayName || emotionType.render.name;
+      }
+    }
+
+    // Return the cleaned up component structure
+    // Only replace the type if we successfully extracted a component name
+    return printer(
+      {
+        ...val,
+        type: componentName || val.type, // Preserve original type if we couldn't extract one
+        props,
+      },
+      config,
+      indentation,
+      depth,
+      refs
+    );
+  },
+};

src/platform/packages/shared/kbn-test/src/jest/transforms/babel/transformer_config.js

@@ -27,6 +27,8 @@ module.exports = () => ({
         [
           require.resolve('@emotion/babel-preset-css-prop'),
           {
+            // Use Babel's compile-time labeling for better test performance
+            // This is preferred over Emotion's runtime labeling via stack traces because of performance
             autoLabel: 'always',
             labelFormat: '[local]',
             sourceMap: false,