@elastic/eui 89.0.0 → 89.1.0

package/optimize/es/components/datagrid/body/data_grid_cell.js

@@ -7,7 +7,7 @@ import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["renderCellValue", "column", "setCellContentsRef", "rowHeightsOptions", "rowIndex", "colIndex", "ariaRowIndex", "rowHeightUtils", "isDefinedHeight", "isFocused"],
+var _excluded = ["renderCellValue", "column", "setCellContentsRef", "setPopoverAnchorRef", "rowIndex", "colIndex", "ariaRowIndex", "rowHeight", "rowHeightUtils", "isControlColumn", "isFocused", "cellHeightType", "cellActions"],
   _excluded2 = ["width", "popoverContext", "interactiveCellId", "columnType", "className", "column", "style", "rowHeightUtils", "rowHeightsOptions", "rowManager", "pagination"],
   _excluded3 = ["isExpandable", "style", "className", "data-test-subj"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -30,6 +30,7 @@ import { keys } from '../../../services';
 import { EuiScreenReaderOnly } from '../../accessibility';
 import { EuiFocusTrap } from '../../focus_trap';
 import { EuiI18n } from '../../i18n';
+import { EuiTextBlockTruncate } from '../../text_truncate';
 import { hasResizeObserver } from '../../observer/resize_observer/resize_observer';
 import { DataGridFocusContext } from '../utils/focus';
 import { EuiDataGridCellActions, EuiDataGridCellPopoverActions } from './data_grid_cell_actions';
@@ -40,28 +41,52 @@ var EuiDataGridCellContent = /*#__PURE__*/memo(function (_ref) {
   var renderCellValue = _ref.renderCellValue,
     column = _ref.column,
     setCellContentsRef = _ref.setCellContentsRef,
-    rowHeightsOptions = _ref.rowHeightsOptions,
+    setPopoverAnchorRef = _ref.setPopoverAnchorRef,
     rowIndex = _ref.rowIndex,
     colIndex = _ref.colIndex,
     ariaRowIndex = _ref.ariaRowIndex,
+    rowHeight = _ref.rowHeight,
     rowHeightUtils = _ref.rowHeightUtils,
-    isDefinedHeight = _ref.isDefinedHeight,
+    isControlColumn = _ref.isControlColumn,
     isFocused = _ref.isFocused,
+    cellHeightType = _ref.cellHeightType,
+    cellActions = _ref.cellActions,
     rest = _objectWithoutProperties(_ref, _excluded);
   // React is more permissible than the TS types indicate
   var CellElement = renderCellValue;
-  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX("div", {
-    ref: setCellContentsRef,
+  var wrapperClasses = classNames('euiDataGridRowCell__contentWrapper', "euiDataGridRowCell__".concat(cellHeightType, "Height"));
+  var classes = classNames('euiDataGridRowCell__content', !isControlColumn && {
+    'eui-textBreakWord': cellHeightType !== 'default',
+    'eui-textTruncate': cellHeightType === 'default'
+  });
+  var cellContent = ___EmotionJSX("div", {
+    ref: function ref(el) {
+      setCellContentsRef(el);
+      setPopoverAnchorRef.current = cellHeightType === 'default' ? // Default height cells need the popover to be anchored on the wrapper,
+      // in order for the popover to centered on the full cell width (as content
+      // width is affected by the width of cell actions)
+      el === null || el === void 0 ? void 0 : el.parentElement :
+      // Numerical height cells need the popover anchor to be below the wrapper
+      // class, in order to set height: 100% on the portalled popover div wrappers
+      el;
+    },
     "data-datagrid-cellcontent": true,
-    className: isDefinedHeight ? 'euiDataGridRowCell__definedHeight' : 'euiDataGridRowCell__truncate',
-    style: isDefinedHeight ? rowHeightUtils === null || rowHeightUtils === void 0 ? void 0 : rowHeightUtils.getStylesForCell(rowHeightsOptions, rowIndex) : {}
+    className: classes
   }, ___EmotionJSX(CellElement, _extends({
     isDetails: false,
     "data-test-subj": "cell-content",
     rowIndex: rowIndex,
     colIndex: colIndex,
     schema: (column === null || column === void 0 ? void 0 : column.schema) || rest.columnType
-  }, rest))), ___EmotionJSX(EuiScreenReaderOnly, null, ___EmotionJSX("p", {
+  }, rest)));
+  if (cellHeightType === 'lineCount' && !isControlColumn) {
+    var lines = rowHeightUtils.getLineCount(rowHeight);
+    cellContent = ___EmotionJSX(EuiTextBlockTruncate, {
+      lines: lines,
+      cloneElement: true
+    }, cellContent);
+  }
+  var screenReaderText = ___EmotionJSX(EuiScreenReaderOnly, null, ___EmotionJSX("p", {
     hidden: !isFocused
   }, '- ', ___EmotionJSX(EuiI18n, {
     token: "euiDataGridCell.position",
@@ -71,7 +96,10 @@ var EuiDataGridCellContent = /*#__PURE__*/memo(function (_ref) {
       col: colIndex + 1,
       row: ariaRowIndex
     }
-  }))));
+  })));
+  return ___EmotionJSX("div", {
+    className: wrapperClasses
+  }, cellContent, screenReaderText, cellActions);
 });
 export var EuiDataGridCell = /*#__PURE__*/function (_Component) {
   _inherits(EuiDataGridCell, _Component);
@@ -521,24 +549,43 @@ export var EuiDataGridCell = /*#__PURE__*/function (_Component) {
           }
         }
       };
-      var isDefinedHeight = !!(rowHeightUtils !== null && rowHeightUtils !== void 0 && rowHeightUtils.getRowHeightOption(rowIndex, rowHeightsOptions));
+      var rowHeight = rowHeightUtils === null || rowHeightUtils === void 0 ? void 0 : rowHeightUtils.getRowHeightOption(rowIndex, rowHeightsOptions);
+      var cellHeightType = (rowHeightUtils === null || rowHeightUtils === void 0 ? void 0 : rowHeightUtils.getHeightType(rowHeight)) || 'default';
       var cellContentProps = _objectSpread(_objectSpread({}, rest), {}, {
         setCellProps: this.setCellProps,
         column: column,
         columnType: columnType,
+        cellHeightType: cellHeightType,
         isExpandable: isExpandable,
         isExpanded: popoverIsOpen,
         isDetails: false,
         isFocused: this.state.isFocused,
         setCellContentsRef: this.setCellContentsRef,
-        rowHeightsOptions: rowHeightsOptions,
+        setPopoverAnchorRef: this.popoverAnchorRef,
+        rowHeight: rowHeight,
         rowHeightUtils: rowHeightUtils,
-        isDefinedHeight: isDefinedHeight,
+        isControlColumn: cellClasses.includes('euiDataGridRowCell--controlColumn'),
         ariaRowIndex: ariaRowIndex
       });
-      var anchorClass = 'euiDataGridRowCell__expandFlex';
-      var expandClass = isDefinedHeight ? 'euiDataGridRowCell__contentByHeight' : 'euiDataGridRowCell__expandContent';
-      var innerContent = ___EmotionJSX(EuiFocusTrap, {
+      var cellActions = showCellActions && ___EmotionJSX(EuiDataGridCellActions, {
+        rowIndex: rowIndex,
+        colIndex: colIndex,
+        column: column,
+        cellHeightType: cellHeightType,
+        onExpandClick: function onExpandClick() {
+          if (popoverIsOpen) {
+            closeCellPopover();
+          } else {
+            openCellPopover({
+              rowIndex: visibleRowIndex,
+              colIndex: colIndex
+            });
+          }
+        }
+      });
+      var cellContent = isExpandable ? ___EmotionJSX(EuiDataGridCellContent, _extends({}, cellContentProps, {
+        cellActions: cellActions
+      })) : ___EmotionJSX(EuiFocusTrap, {
         disabled: !this.state.isEntered,
         autoFocus: true,
         onDeactivation: function onDeactivation() {
@@ -547,35 +594,8 @@ export var EuiDataGridCell = /*#__PURE__*/function (_Component) {
           }, _this2.preventTabbing);
         },
         clickOutsideDisables: true
-      }, ___EmotionJSX("div", {
-        className: anchorClass,
-        ref: this.popoverAnchorRef
-      }, ___EmotionJSX("div", {
-        className: expandClass
-      }, ___EmotionJSX(EuiDataGridCellContent, cellContentProps))));
-      if (isExpandable) {
-        innerContent = ___EmotionJSX("div", {
-          className: anchorClass,
-          ref: this.popoverAnchorRef
-        }, ___EmotionJSX("div", {
-          className: expandClass
-        }, ___EmotionJSX(EuiDataGridCellContent, cellContentProps)), showCellActions && ___EmotionJSX(EuiDataGridCellActions, {
-          rowIndex: rowIndex,
-          colIndex: colIndex,
-          column: column,
-          onExpandClick: function onExpandClick() {
-            if (popoverIsOpen) {
-              closeCellPopover();
-            } else {
-              openCellPopover({
-                rowIndex: visibleRowIndex,
-                colIndex: colIndex
-              });
-            }
-          }
-        }));
-      }
-      var content = ___EmotionJSX("div", _extends({
+      }, ___EmotionJSX(EuiDataGridCellContent, cellContentProps));
+      var cell = ___EmotionJSX("div", _extends({
         role: "gridcell",
         "aria-rowindex": ariaRowIndex,
         tabIndex: this.state.isFocused && !this.state.disableCellTabIndex ? 0 : -1,
@@ -605,14 +625,14 @@ export var EuiDataGridCell = /*#__PURE__*/function (_Component) {
           });
         },
         onBlur: this.onBlur
-      }), innerContent);
-      return rowManager && !IS_JEST_ENVIRONMENT ? /*#__PURE__*/createPortal(content, rowManager.getRow({
+      }), cellContent);
+      return rowManager && !IS_JEST_ENVIRONMENT ? /*#__PURE__*/createPortal(cell, rowManager.getRow({
         rowIndex: rowIndex,
         visibleRowIndex: visibleRowIndex,
         top: style.top,
         // comes in as a `{float}px` string from react-window
         height: style.height // comes in as an integer from react-window
-      })) : content;
+      })) : cell;
     }
   }]);
   return EuiDataGridCell;

package/optimize/es/components/datagrid/body/data_grid_cell_actions.js

@@ -15,12 +15,14 @@ import { EuiButtonIcon } from '../../button/button_icon';
 import { EuiButtonEmpty } from '../../button/button_empty';
 import { EuiFlexGroup, EuiFlexItem } from '../../flex';
 import { EuiPopoverFooter } from '../../popover';
+import classNames from 'classnames';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiDataGridCellActions = function EuiDataGridCellActions(_ref) {
   var onExpandClick = _ref.onExpandClick,
     column = _ref.column,
     rowIndex = _ref.rowIndex,
-    colIndex = _ref.colIndex;
+    colIndex = _ref.colIndex,
+    cellHeightType = _ref.cellHeightType;
   // Note: The cell expand button/expansion popover is *always* rendered if
   // column.cellActions is present (regardless of column.isExpandable).
   // This is because cell actions are not otherwise accessible to keyboard
@@ -67,8 +69,11 @@ export var EuiDataGridCellActions = function EuiDataGridCellActions(_ref) {
       });
     });
   }, [column, colIndex, rowIndex]);
+  var classes = classNames('euiDataGridRowCell__actions', {
+    'euiDataGridRowCell__actions--overlay': cellHeightType !== 'default'
+  });
   return ___EmotionJSX("div", {
-    className: "euiDataGridRowCell__expandActions"
+    className: classes
   }, [].concat(_toConsumableArray(additionalButtons), [expandButton]));
 };
 export var EuiDataGridCellPopoverActions = function EuiDataGridCellPopoverActions(_ref2) {

package/optimize/es/components/datagrid/utils/row_heights.js

@@ -41,25 +41,20 @@ export var RowHeightUtils = /*#__PURE__*/function () {
       paddingTop: 0,
       paddingBottom: 0
     });
-    _defineProperty(this, "getStylesForCell", function (rowHeightsOptions, rowIndex) {
-      var height = _this.getRowHeightOption(rowIndex, rowHeightsOptions);
-      if (height === AUTO_HEIGHT) {
-        return {};
+    /**
+     * Height types
+     */
+    _defineProperty(this, "getHeightType", function (option) {
+      if (option == null) {
+        return 'default';
       }
-      var lineCount = _this.getLineCount(height);
-      if (lineCount) {
-        return {
-          WebkitLineClamp: lineCount,
-          display: '-webkit-box',
-          WebkitBoxOrient: 'vertical',
-          height: '100%',
-          overflow: 'hidden'
-        };
+      if (option === AUTO_HEIGHT) {
+        return 'auto';
       }
-      return {
-        height: '100%',
-        overflow: 'hidden'
-      };
+      if (_this.getLineCount(option) != null) {
+        return 'lineCount';
+      }
+      return 'numerical';
     });
     /**
      * Heights cache utils

package/optimize/es/components/icon/assets/tokenVectorDense.js

@@ -0,0 +1,36 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["title", "titleId"];
+/*
+ * 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 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 or the Server
+ * Side Public License, v 1.
+ */
+
+// THIS IS A GENERATED FILE. DO NOT MODIFY MANUALLY. @see scripts/compile-icons.js
+
+import * as React from 'react';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var EuiIconTokenVectorDense = function EuiIconTokenVectorDense(_ref) {
+  var title = _ref.title,
+    titleId = _ref.titleId,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return ___EmotionJSX("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    viewBox: "0 0 16 16",
+    "aria-labelledby": titleId
+  }, props), title ? ___EmotionJSX("title", {
+    id: titleId
+  }, title) : null, ___EmotionJSX("path", {
+    d: "M2 2.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1H3v10h1.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5v-11Z"
+  }), ___EmotionJSX("path", {
+    d: "M6 5a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm0 3a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm-1 4a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm4-7a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM8 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm1 2a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm2-5a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm1 2a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm-1 4a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
+  }), ___EmotionJSX("path", {
+    d: "M13.5 2a.5.5 0 0 1 .5.5v11a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1H13V3h-1.5a.5.5 0 0 1 0-1h2Z"
+  }));
+};
+export var icon = EuiIconTokenVectorDense;

package/optimize/es/components/icon/assets/{tokenDenseVector.js → tokenVectorSparse.js}

@@ -13,7 +13,7 @@ var _excluded = ["title", "titleId"];
 
 import * as React from 'react';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-var EuiIconTokenDenseVector = function EuiIconTokenDenseVector(_ref) {
+var EuiIconTokenVectorSparse = function EuiIconTokenVectorSparse(_ref) {
   var title = _ref.title,
     titleId = _ref.titleId,
     props = _objectWithoutProperties(_ref, _excluded);
@@ -26,7 +26,11 @@ var EuiIconTokenDenseVector = function EuiIconTokenDenseVector(_ref) {
   }, props), title ? ___EmotionJSX("title", {
     id: titleId
   }, title) : null, ___EmotionJSX("path", {
-    d: "M4.154 12V4h2.713v1.14H5.658v5.72h1.21V12H4.153Zm7.692-8v8H9.133v-1.14h1.209V5.14h-1.21V4h2.714Z"
+    d: "M2 2.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1H3v10h1.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5v-11ZM8 6a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm0 6a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
+  }), ___EmotionJSX("path", {
+    d: "M6 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm5 1a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
+  }), ___EmotionJSX("path", {
+    d: "M13.5 2a.5.5 0 0 1 .5.5v11a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1H13V3h-1.5a.5.5 0 0 1 0-1h2Z"
   }));
 };
-export var icon = EuiIconTokenDenseVector;
+export var icon = EuiIconTokenVectorSparse;

package/optimize/es/components/icon/icon_map.js

@@ -446,7 +446,6 @@ export var typeToPathMap = {
   tokenCompletionSuggester: 'tokenCompletionSuggester',
   tokenConstant: 'tokenConstant',
   tokenDate: 'tokenDate',
-  tokenDenseVector: 'tokenDenseVector',
   tokenElement: 'tokenElement',
   tokenEnum: 'tokenEnum',
   tokenEnumMember: 'tokenEnumMember',
@@ -489,5 +488,9 @@ export var typeToPathMap = {
   tokenTag: 'tokenTag',
   tokenText: 'tokenText',
   tokenTokenCount: 'tokenTokenCount',
-  tokenVariable: 'tokenVariable'
+  tokenVariable: 'tokenVariable',
+  tokenVectorDense: 'tokenVectorDense',
+  tokenDenseVector: 'tokenVectorDense',
+  // NOTE: This is an undocumented alias for `tokenVectorDense`, added for legacy compatability
+  tokenVectorSparse: 'tokenVectorSparse'
 };

package/optimize/es/components/provider/provider.js

@@ -7,11 +7,11 @@
  */
 
 import React from 'react';
-import { cache as fallbackCache } from '@emotion/css';
-import { EuiGlobalStyles } from '../../global_styling/reset/global_styles';
-import { EuiUtilityClasses } from '../../global_styling/utility/utility';
 import { EuiThemeProvider, CurrentEuiBreakpointProvider } from '../../services';
 import { emitEuiProviderWarning } from '../../services/theme/warning';
+import { cache as fallbackCache } from '../../services/emotion/css';
+import { EuiGlobalStyles } from '../../global_styling/reset/global_styles';
+import { EuiUtilityClasses } from '../../global_styling/utility/utility';
 import { EuiThemeAmsterdam } from '../../themes';
 import { EuiCacheProvider } from './cache';
 import { EuiProviderNestedCheck, useIsNestedEuiProvider } from './nested';

package/optimize/es/components/token/token_map.js

@@ -49,10 +49,6 @@ export var TOKEN_MAP = {
     shape: 'square',
     color: 'euiColorVis6'
   },
-  tokenDenseVector: {
-    shape: 'square',
-    color: 'euiColorVis2'
-  },
   tokenElement: {
     shape: 'square',
     color: 'euiColorVis3'
@@ -224,5 +220,17 @@ export var TOKEN_MAP = {
   tokenVariable: {
     shape: 'circle',
     color: 'euiColorVis7'
+  },
+  tokenVectorDense: {
+    shape: 'square',
+    color: 'euiColorVis5'
+  },
+  tokenDenseVector: {
+    shape: 'square',
+    color: 'euiColorVis5'
+  },
+  tokenVectorSparse: {
+    shape: 'square',
+    color: 'euiColorVis1'
   }
 };

package/optimize/es/services/emotion/css.js

@@ -0,0 +1,28 @@
+/*
+ * 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 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 or the Server
+ * Side Public License, v 1.
+ */
+
+import createEmotion from '@emotion/css/create-instance';
+import { euiStylisPrefixer } from './prefixer';
+
+/**
+ * This custom instance is needed for internal EUI components to call
+ * `@emotion/css` with EUI's custom prefixer plugin
+ * @see https://emotion.sh/docs/@emotion/css#custom-instances
+ *
+ * NOTE: Usage is currently being beta tested internally,
+ * and is not yet intended to be a public export
+ */
+var _createEmotion = createEmotion({
+    key: 'css',
+    stylisPlugins: [euiStylisPrefixer],
+    speedy: false
+  }),
+  css = _createEmotion.css,
+  cx = _createEmotion.cx,
+  cache = _createEmotion.cache;
+export { css, cx, cache };

package/optimize/es/services/emotion/index.js

@@ -6,4 +6,5 @@
  * Side Public License, v 1.
  */
 
-export * from './clone_element';
+export * from './clone_element';
+export * from './prefixer';

package/optimize/es/services/emotion/prefixer.js

@@ -0,0 +1,93 @@
+/*
+ * 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 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 or the Server
+ * Side Public License, v 1.
+ */
+
+import { charat, DECLARATION, hash, indexof, MOZ, replace, strlen, WEBKIT } from 'stylis';
+
+// This is a heavily modified version of Emotion's default `prefixer` plugin
+// (mostly removing unnecessary prefixes), which is in turn a modified version
+// of stylis's default prefixer.
+// @see https://github.com/emotion-js/emotion/blob/main/packages/cache/src/prefixer.js
+/* eslint-disable prefer-template */
+
+/**
+ * This is a stylis plugin which handles auto-prefixing CSS output by Emotion.
+ *
+ * *Please note*: EUI/Elastic targets latest evergreen browsers for support only.
+ * @see https://www.elastic.co/support/matrix#matrix_browsers
+ */
+export var euiStylisPrefixer = function euiStylisPrefixer(element) {
+  if (element.length > -1) if (!element.return) switch (element.type) {
+    case DECLARATION:
+      element.return = prefix(element.value, element.length);
+      break;
+  }
+};
+var prefix = function prefix(value, length) {
+  switch (hash(value, length)) {
+    /**
+     * `-webkit` prefixes
+     */
+    // user-select - https://caniuse.com/mdn-css_properties_user-select - needed by Safari
+    case 4246:
+    // text-decoration - https://caniuse.com/text-decoration - iOS Safari is the main one that needs this
+    case 5572:
+    // text-size-adjust - https://caniuse.com/text-size-adjust - iOS Safari
+    case 2756:
+    // box-decoration-break - https://caniuse.com/css-boxdecorationbreak - Chrome & Safari
+    case 3005:
+    // mask, mask-image, mask-(mode|clip|size), mask-(repeat|origin), mask-position, mask-composite - Chrome
+    case 6391:
+    case 5879:
+    case 5623:
+    case 6135:
+    case 4599:
+    case 4855:
+    // print-color-adjust - https://caniuse.com/css-color-adjust - Chrome
+    case 2282:
+      return WEBKIT + value + value;
+
+    // background-clip - https://caniuse.com/background-clip-text - Chrome, only for `text` value
+    case 4215:
+      if (~indexof(value, 'text')) {
+        return WEBKIT + value + value;
+      }
+
+    /**
+     * Intrinsic/extrinsic sizing value prefixes
+     * `stretch` alternatives needed by Chrome & Firefox - https://caniuse.com/intrinsic-width
+     */
+    // (min|max)?(width|height|inline-size|block-size)
+    case 8116:
+    case 7059:
+    case 5753:
+    case 5535:
+    case 5445:
+    case 5701:
+    case 4933:
+    case 4677:
+    case 5533:
+    case 5789:
+    case 5021:
+    case 4765:
+      // stretch, max-content, min-content, fill-available
+      if (strlen(value) - 1 - length > 6) switch (charat(value, length + 1)) {
+        // (f)ill-available
+        case 102:
+          if (~indexof(value, 'fill-available')) {
+            return replace(value, /(.+:)(.+)-([^]+)/, '$1' + WEBKIT + '$2-$3' + '$1' + MOZ + (charat(value, length + 3) === 108 ? '$3' : '$2-$3'));
+          }
+        // (s)tretch
+        case 115:
+          if (~indexof(value, 'stretch')) {
+            return prefix(replace(value, 'stretch', 'fill-available'), length) + value;
+          }
+      }
+      break;
+  }
+  return value;
+};

package/optimize/es/services/theme/provider.js

@@ -1,9 +1,11 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import { css as _css } from "@emotion/react";
 var _excluded = ["cloneElement", "className"];
+var _templateObject;
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 /*
@@ -15,11 +17,10 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  */
 
 import React, { useContext, useEffect, useRef, useMemo, useState, useCallback } from 'react';
-import classNames from 'classnames';
-import { css } from '@emotion/css';
 import { Global } from '@emotion/react';
 import isEqual from 'lodash/isEqual';
 import { cloneElementWithCss } from '../emotion';
+import { css, cx } from '../emotion/css';
 import { EuiSystemContext, EuiThemeContext, EuiNestedThemeContext, EuiModificationsContext, EuiColorModeContext } from './context';
 import { EuiEmotionThemeProvider } from './emotion';
 import { buildTheme, getColorMode, getComputed, mergeDeep } from './utils';
@@ -104,13 +105,13 @@ export var EuiThemeProvider = function EuiThemeProvider(_ref) {
       // The theme that determines the global body styles
       bodyColor: isGlobalTheme ? theme.colors.text : bodyColor,
       hasDifferentColorFromGlobalTheme: isGlobalTheme ? false : bodyColor !== theme.colors.text,
-      colorClassName: /*#__PURE__*/css("label:euiColorMode-", _colorMode, ";color:", theme.colors.text, ";;label:colorClassName;"),
+      colorClassName: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        label: euiColorMode-", ";\n        color: ", ";\n      "])), _colorMode || colorMode, theme.colors.text),
       setGlobalCSSVariables: isGlobalTheme ? setThemeCSSVariables : setGlobalCSSVariables,
       globalCSSVariables: isGlobalTheme ? themeCSSVariables : globalCSSVariables,
       setNearestThemeCSSVariables: setThemeCSSVariables,
       themeCSSVariables: themeCSSVariables
     };
-  }, [theme, isGlobalTheme, bodyColor, _colorMode, setGlobalCSSVariables, globalCSSVariables, setThemeCSSVariables, themeCSSVariables]);
+  }, [theme, isGlobalTheme, bodyColor, _colorMode, colorMode, setGlobalCSSVariables, globalCSSVariables, setThemeCSSVariables, themeCSSVariables]);
   var renderedChildren = useMemo(function () {
     if (isGlobalTheme) {
       return children; // No wrapper
@@ -121,7 +122,7 @@ export var EuiThemeProvider = function EuiThemeProvider(_ref) {
       className = _ref2.className,
       rest = _objectWithoutProperties(_ref2, _excluded);
     var props = _objectSpread(_objectSpread({}, rest), {}, {
-      className: classNames(className, nestedThemeContext.colorClassName)
+      className: cx(className, nestedThemeContext.colorClassName)
     });
     // Condition avoids rendering an empty Emotion selector if no
     // theme-specific CSS variables have been set by child components
@@ -132,11 +133,11 @@ export var EuiThemeProvider = function EuiThemeProvider(_ref) {
     }
     if (cloneElement) {
       return cloneElementWithCss(children, _objectSpread(_objectSpread({}, props), {}, {
-        className: classNames(children.props.className, props.className)
+        className: cx(children.props.className, props.className)
       }));
     } else {
       return ___EmotionJSX("span", _extends({}, props, {
-        className: classNames('euiThemeProvider', props.className)
+        className: cx('euiThemeProvider', props.className)
       }), children);
     }
   }, [isGlobalTheme, themeCSSVariables, nestedThemeContext, wrapperProps, children]);

package/optimize/es/services/theme/utils.js

@@ -35,7 +35,7 @@ export var isInverseColorMode = function isInverseColorMode(colorMode) {
 /**
  * Returns the color mode configured in the current EuiThemeProvider.
  * Returns the parent color mode if none is explicity set.
- * @param {string} coloMode - `light`, `dark`, or `inverse`
+ * @param {string} colorMode - `light`, `dark`, or `inverse`
  * @param {string} parentColorMode - `LIGHT` or `DARK`; used as the fallback
  */
 export var getColorMode = function getColorMode(colorMode, parentColorMode) {