@elastic/eui 88.4.0 → 88.5.0

package/optimize/es/components/datagrid/data_grid_types.js

@@ -8,6 +8,9 @@
 
 // since react-window doesn't export a type with the imperative api only we can
 // use this to omit the react-specific class component methods
+/**
+ * Props which are available for a custom toolbar rendering
+ */
 // An array of [x,y] coordinates. Note that the `y` value expected internally is a `visibleRowIndex`
 // Force either aria-label or aria-labelledby to be defined
 /**

package/optimize/es/components/date_picker/date_picker.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["adjustDateOnChange", "calendarClassName", "className", "controlOnly", "customInput", "dateFormat", "dayClassName", "disabled", "excludeDates", "filterDate", "fullWidth", "iconType", "injectTimes", "inline", "inputRef", "isInvalid", "isLoading", "locale", "maxDate", "maxTime", "minDate", "minTime", "onChange", "onClear", "openToDate", "placeholder", "popperClassName", "popoverPlacement", "readOnly", "selected", "shadow", "shouldCloseOnSelect", "showIcon", "showTimeSelect", "showTimeSelectOnly", "timeFormat", "utcOffset"];
+var _excluded = ["adjustDateOnChange", "calendarClassName", "className", "compressed", "controlOnly", "customInput", "dateFormat", "dayClassName", "disabled", "excludeDates", "filterDate", "fullWidth", "iconType", "injectTimes", "inline", "inputRef", "isInvalid", "isLoading", "locale", "maxDate", "maxTime", "minDate", "minTime", "onChange", "onClear", "openToDate", "placeholder", "popperClassName", "popoverPlacement", "readOnly", "selected", "shadow", "shouldCloseOnSelect", "showIcon", "showTimeSelect", "showTimeSelectOnly", "timeFormat", "utcOffset"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -54,6 +54,7 @@ export var EuiDatePicker = function EuiDatePicker(_ref) {
     adjustDateOnChange = _ref$adjustDateOnChan === void 0 ? true : _ref$adjustDateOnChan,
     calendarClassName = _ref.calendarClassName,
     className = _ref.className,
+    compressed = _ref.compressed,
     controlOnly = _ref.controlOnly,
     customInput = _ref.customInput,
     _ref$dateFormat = _ref.dateFormat,
@@ -105,11 +106,12 @@ export var EuiDatePicker = function EuiDatePicker(_ref) {
     isInvalid: isInvalid,
     isLoading: isLoading
   });
-  var datePickerClasses = classNames('euiDatePicker', 'euiFieldText', numIconsClass, {
+  var datePickerClasses = classNames('euiDatePicker', 'euiFieldText', numIconsClass, !inline && {
     'euiFieldText--fullWidth': fullWidth,
     'euiFieldText-isLoading': isLoading,
-    'euiFieldText--withIcon': !inline && showIcon,
-    'euiFieldText--isClearable': !inline && selected && onClear
+    'euiFieldText--compressed': compressed,
+    'euiFieldText--withIcon': showIcon,
+    'euiFieldText--isClearable': selected && onClear
   }, className);
   var optionalIcon;
   if (inline || customInput || !showIcon) {
@@ -185,7 +187,8 @@ export var EuiDatePicker = function EuiDatePicker(_ref) {
     className: classes
   }, ___EmotionJSX(EuiFormControlLayout, {
     icon: optionalIcon,
-    fullWidth: fullWidth,
+    fullWidth: !inline && fullWidth,
+    compressed: !inline && compressed,
     clear: selected && onClear ? {
       onClick: onClear
     } : undefined,

package/optimize/es/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.js

@@ -61,8 +61,8 @@ export var EuiQuickSelectPopover = function EuiQuickSelectPopover(_ref) {
   var buttonlabel = useEuiI18n('euiQuickSelectPopover.buttonLabel', 'Date quick select');
   var quickSelectButton = ___EmotionJSX(EuiButtonEmpty, {
     className: "euiFormControlLayout__prepend",
-    textProps: {
-      className: 'euiQuickSelectPopover__buttonText'
+    contentProps: {
+      className: 'euiQuickSelectPopover__buttonContent'
     },
     onClick: togglePopover,
     "aria-label": buttonlabel,

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

@@ -0,0 +1,33 @@
+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 EuiIconGradient = function EuiIconGradient(_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", {
+    fillRule: "evenodd",
+    d: "M1 2a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2Zm4 0h1v12H5V2Zm3 12V2h2v12H8Zm3 0h3V2h-3v12Z"
+  }));
+};
+export var icon = EuiIconGradient;

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

@@ -0,0 +1,34 @@
+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 EuiIconPalette = function EuiIconPalette(_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: "M4 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm2 2a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM5 6a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm4-2a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm2 2a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
+  }), ___EmotionJSX("path", {
+    d: "M8 1a7 7 0 0 0 0 14h2a2 2 0 1 0 0-4 1 1 0 1 1 0-2h3.98C14.515 9 15 8.583 15 8a7 7 0 0 0-7-7ZM2 8a6 6 0 0 1 12-.005.035.035 0 0 1-.02.005H10a2 2 0 1 0 0 4 1 1 0 1 1 0 2H8a6 6 0 0 1-6-6Z"
+  }));
+};
+export var icon = EuiIconPalette;

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

@@ -161,6 +161,7 @@ export var typeToPathMap = {
   grab: 'grab',
   grabHorizontal: 'grab_horizontal',
   grabOmnidirectional: 'grabOmnidirectional',
+  gradient: 'gradient',
   graphApp: 'app_graph',
   grid: 'grid',
   grokApp: 'app_grok',
@@ -308,6 +309,7 @@ export var typeToPathMap = {
   packetbeatApp: 'app_packetbeat',
   pageSelect: 'pageSelect',
   pagesSelect: 'pagesSelect',
+  palette: 'palette',
   paperClip: 'paper_clip',
   partial: 'partial',
   pause: 'pause',

package/optimize/es/components/popover/input_popover.js

@@ -91,6 +91,7 @@ export var EuiInputPopover = function EuiInputPopover(_ref) {
   var form = euiFormVariables(euiThemeContext);
   return ___EmotionJSX(EuiPopover, _extends({
     css: /*#__PURE__*/css(fullWidth ? undefined : logicalCSS('max-width', form.maxWidth), ";label:EuiInputPopover;"),
+    repositionToCrossAxis: false,
     ownFocus: false,
     button: ___EmotionJSX(EuiResizeObserver, {
       onResize: onResize

package/optimize/es/components/popover/popover.js

@@ -10,7 +10,7 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-var _excluded = ["anchorClassName", "anchorPosition", "button", "buttonRef", "insert", "isOpen", "ownFocus", "children", "className", "closePopover", "panelClassName", "panelPaddingSize", "panelProps", "panelRef", "panelStyle", "popoverScreenReaderText", "popoverRef", "hasArrow", "arrowChildren", "repositionOnScroll", "hasDragDrop", "zIndex", "attachToAnchor", "display", "offset", "onPositionChange", "buffer", "aria-label", "aria-labelledby", "container", "focusTrapProps", "initialFocus", "tabIndex"];
+var _excluded = ["anchorClassName", "anchorPosition", "button", "buttonRef", "insert", "isOpen", "ownFocus", "children", "className", "closePopover", "panelClassName", "panelPaddingSize", "panelProps", "panelRef", "panelStyle", "popoverScreenReaderText", "popoverRef", "hasArrow", "arrowChildren", "repositionOnScroll", "repositionToCrossAxis", "hasDragDrop", "zIndex", "attachToAnchor", "display", "offset", "onPositionChange", "buffer", "aria-label", "aria-labelledby", "container", "focusTrapProps", "initialFocus", "tabIndex"];
 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; }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
@@ -181,7 +181,9 @@ export var EuiPopover = /*#__PURE__*/function (_Component) {
     _defineProperty(_assertThisInitialized(_this), "positionPopover", function (allowEnforcePosition) {
       if (_this.button == null || _this.panel == null) return;
       var _ref6 = _this.props,
-        anchorPosition = _ref6.anchorPosition;
+        anchorPosition = _ref6.anchorPosition,
+        _ref6$offset = _ref6.offset,
+        offset = _ref6$offset === void 0 ? 0 : _ref6$offset;
       var position = getPopoverPositionFromAnchorPosition(anchorPosition);
       var forcePosition = undefined;
       if (allowEnforcePosition && _this.state.isOpenStable && _this.state.openPosition != null) {
@@ -195,12 +197,13 @@ export var EuiPopover = /*#__PURE__*/function (_Component) {
           align: getPopoverAlignFromAnchorPosition(anchorPosition),
           anchor: _this.button,
           popover: _this.panel,
-          offset: !_this.props.attachToAnchor && _this.props.hasArrow ? 16 + (_this.props.offset || 0) : 8 + (_this.props.offset || 0),
+          offset: _this.props.attachToAnchor ? offset : _this.props.hasArrow ? 16 + offset : 8 + offset,
           arrowConfig: {
             arrowWidth: 24,
             arrowBuffer: 10
           },
           returnBoundingBox: _this.props.attachToAnchor,
+          allowCrossAxis: _this.props.repositionToCrossAxis,
           buffer: _this.props.buffer
         }),
         top = _findPopoverPosition.top,
@@ -357,6 +360,7 @@ export var EuiPopover = /*#__PURE__*/function (_Component) {
         hasArrow = _this$props.hasArrow,
         arrowChildren = _this$props.arrowChildren,
         repositionOnScroll = _this$props.repositionOnScroll,
+        repositionToCrossAxis = _this$props.repositionToCrossAxis,
         hasDragDrop = _this$props.hasDragDrop,
         zIndex = _this$props.zIndex,
         attachToAnchor = _this$props.attachToAnchor,
@@ -521,6 +525,7 @@ export var EuiPopover = /*#__PURE__*/function (_Component) {
 _defineProperty(EuiPopover, "defaultProps", {
   isOpen: false,
   ownFocus: true,
+  repositionToCrossAxis: true,
   anchorPosition: 'downCenter',
   panelPaddingSize: 'm',
   hasArrow: true,

package/optimize/es/components/popover/popover_panel/_popover_panel.js

@@ -1,5 +1,4 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children", "className", "isOpen", "isAttached", "hasDragDrop", "position"];
 /*
@@ -10,7 +9,7 @@ var _excluded = ["children", "className", "isOpen", "isAttached", "hasDragDrop",
  * Side Public License, v 1.
  */
 
-import React, { createContext } from 'react';
+import React, { createContext, useMemo } from 'react';
 import classNames from 'classnames';
 import { useEuiTheme } from '../../../services';
 import { EuiPanel } from '../../panel/panel';
@@ -32,26 +31,26 @@ export var EuiPopoverPanel = function EuiPopoverPanel(_ref) {
     hasDragDrop = _ref.hasDragDrop,
     position = _ref.position,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var _rest$paddingSize = rest.paddingSize,
-    paddingSize = _rest$paddingSize === void 0 ? DEFAULT_PANEL_PADDING_SIZE : _rest$paddingSize;
-  var euiThemeContext = useEuiTheme();
-  // Using BEM child class for BWC
   var classes = classNames('euiPopover__panel', className);
-  var styles = euiPopoverPanelStyles(euiThemeContext);
-  var panelCSS = [styles.euiPopover__panel, isOpen && styles.isOpen, isOpen && position && styles[position]];
-  if (isAttached) {
-    panelCSS = [].concat(_toConsumableArray(panelCSS), [isOpen && styles.attached.isOpen, position && styles.attached[position]]);
-  }
-  if (hasDragDrop) {
-    panelCSS = [].concat(_toConsumableArray(panelCSS), [styles.hasDragDrop.hasDragDrop, position && styles.hasDragDrop[position]]);
-  }
+  var euiThemeContext = useEuiTheme();
+  var cssStyles = useMemo(function () {
+    var styles = euiPopoverPanelStyles(euiThemeContext);
+    var sharedStyles = [styles.euiPopover__panel, isOpen && styles.isOpen];
+    if (hasDragDrop) {
+      return [].concat(sharedStyles, [styles.hasDragDrop.hasDragDrop, position && styles.hasDragDrop[position]]);
+    }
+    if (isAttached) {
+      return [].concat(sharedStyles, [styles.isAttached.isAttached, position && styles.isAttached[position]]);
+    }
+    return [].concat(sharedStyles, [styles.hasTransform.hasTransform, isOpen && position && styles.hasTransform[position]]);
+  }, [euiThemeContext, isOpen, position, isAttached, hasDragDrop]);
   return ___EmotionJSX(EuiPopoverPanelContext.Provider, {
     value: {
-      paddingSize: paddingSize
+      paddingSize: rest.paddingSize || DEFAULT_PANEL_PADDING_SIZE
     }
   }, ___EmotionJSX(EuiPanel, _extends({
     className: classes,
-    css: panelCSS,
+    css: cssStyles,
     "data-popover-panel": true,
     "data-popover-open": isOpen || undefined
   }, rest), children));

package/optimize/es/components/popover/popover_panel/_popover_panel.styles.js

@@ -1,3 +1,4 @@
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -9,51 +10,70 @@
 import { css } from '@emotion/react';
 import { euiShadow, euiShadowFlat, euiShadowMedium } from '../../../themes/amsterdam/global_styling/mixins';
 import { getShadowColor } from '../../../themes/amsterdam/global_styling/functions';
-import { euiCanAnimate, logicalCSS } from '../../../global_styling';
+import { euiCanAnimate, logicalCSS, mathWithUnits } from '../../../global_styling';
 export var openAnimationTiming = 'slow';
-var translateDistance = 's';
 
 /**
  * 1. Can expand further, but it looks weird if it's smaller than the originating button.
  * 2. Animation happens on the panel. But don't animate position when using the attached mode like for inputs
  * 3. Make sure the panel stays within the window.
  */
-
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "j5y6yx-isOpen",
+  styles: "opacity:1;pointer-events:auto;label:isOpen;"
+} : {
+  name: "j5y6yx-isOpen",
+  styles: "opacity:1;pointer-events:auto;label:isOpen;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
 export var euiPopoverPanelStyles = function euiPopoverPanelStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme,
     colorMode = euiThemeContext.colorMode;
+  var translateDistance = euiTheme.size.s;
+  var animationSpeed = euiTheme.animation[openAnimationTiming];
+  var opacityTransition = "opacity ".concat(euiTheme.animation.bounce, " ").concat(animationSpeed);
+  var transformTransition = "transform ".concat(euiTheme.animation.bounce, " ").concat(mathWithUnits(animationSpeed, function (x) {
+    return x + 100;
+  }));
   return {
     // Base
-    euiPopover__panel: /*#__PURE__*/css("position:absolute;", logicalCSS('min-width', "".concat(euiTheme.base * 7, "px")), logicalCSS('max-width', "calc(100vw - ".concat(euiTheme.size.xl, ")")), "backface-visibility:hidden;pointer-events:none;opacity:0;transform:translateY(0) translateX(0) translateZ(0);", euiShadowMedium(euiThemeContext, {
-      property: 'filter'
-    }), " &:focus{outline-offset:0;};label:euiPopover__panel;"),
-    // Is visible / open
-    isOpen: /*#__PURE__*/css("opacity:1;pointer-events:auto;", euiCanAnimate, "{transition:opacity ", euiTheme.animation.bounce, " ", euiTheme.animation[openAnimationTiming], ",transform ", euiTheme.animation.bounce, " calc(", euiTheme.animation[openAnimationTiming], " + 100ms);};label:isOpen;"),
-    // Positions
-    top: /*#__PURE__*/css("transform:translateY(", euiTheme.size[translateDistance], ") translateZ(0);;label:top;"),
-    bottom: /*#__PURE__*/css("transform:translateY(-", euiTheme.size[translateDistance], ") translateZ(0);;label:bottom;"),
-    left: /*#__PURE__*/css("transform:translateX(", euiTheme.size[translateDistance], ") translateZ(0);;label:left;"),
-    right: /*#__PURE__*/css("transform:translateX(-", euiTheme.size[translateDistance], ") translateZ(0);;label:right;"),
-    // Attached version overrides
-    attached: {
-      isOpen: /*#__PURE__*/css("filter:none;", euiCanAnimate, "{transition:opacity ", euiTheme.animation.bounce, " ", euiTheme.animation[openAnimationTiming], ";};label:isOpen;"),
+    euiPopover__panel: /*#__PURE__*/css("position:absolute;", logicalCSS('min-width', "".concat(euiTheme.base * 7, "px")), logicalCSS('max-width', "calc(100vw - ".concat(euiTheme.size.xl, ")")), "backface-visibility:hidden;pointer-events:none;opacity:0;", euiCanAnimate, "{transition:", opacityTransition, ",", transformTransition, ";}&:focus{outline-offset:0;};label:euiPopover__panel;"),
+    isOpen: _ref,
+    // Regular popover with an arrow, a transform animation/transition, and a
+    // drop shadow via `filter` (which automatically handles the arrow)
+    hasTransform: {
+      hasTransform: /*#__PURE__*/css("transform:translateY(0) translateX(0) translateZ(0);", euiShadowMedium(euiThemeContext, {
+        property: 'filter'
+      }), " ", euiCanAnimate, "{transition:", opacityTransition, ",", transformTransition, ";};label:hasTransform;"),
+      // Positions
+      top: /*#__PURE__*/css("transform:translateY(", translateDistance, ") translateZ(0);;label:top;"),
+      bottom: /*#__PURE__*/css("transform:translateY(-", translateDistance, ") translateZ(0);;label:bottom;"),
+      left: /*#__PURE__*/css("transform:translateX(", translateDistance, ") translateZ(0);;label:left;"),
+      right: /*#__PURE__*/css("transform:translateX(-", translateDistance, ") translateZ(0);;label:right;")
+    },
+    // No arrow, transform, or filters
+    isAttached: {
+      isAttached: /*#__PURE__*/css(euiCanAnimate, "{transition:", opacityTransition, ";};label:isAttached;"),
       top: /*#__PURE__*/css(euiShadowFlat(euiThemeContext), ";;label:top;"),
       bottom: /*#__PURE__*/css(euiShadow(euiThemeContext, 'm'), ";;label:bottom;"),
-      // Satisfies TS
-      left: /*#__PURE__*/css(";label:left;"),
-      right: /*#__PURE__*/css(";label:right;")
+      get left() {
+        return this.bottom;
+      },
+      get right() {
+        return this.bottom;
+      }
     },
-    // Overrides for drag & drop contexts within popovers. This is required because
-    // the fixed positions of drag and drop don't work inside of transformed elements
+    // Has an arrow, but cannot have transform or filter CSS - they create a
+    // stacking context that messes up the drag/drop fixed positioning
     hasDragDrop: {
-      hasDragDrop: /*#__PURE__*/css("transform:none;filter:none;", euiShadowMedium(euiThemeContext, {
+      hasDragDrop: /*#__PURE__*/css(euiShadowMedium(euiThemeContext, {
         property: 'box-shadow'
-      }), ";;label:hasDragDrop;"),
+      }), " ", euiCanAnimate, "{transition:", opacityTransition, ";};label:hasDragDrop;"),
       // The offset transforms must be recreated in margins
-      top: /*#__PURE__*/css("margin-block-start:", euiTheme.size[translateDistance], ";;label:top;"),
-      bottom: /*#__PURE__*/css("margin-block-start:-", euiTheme.size[translateDistance], ";.euiPopover__arrow{filter:drop-shadow(\n            0 -6px 6px ", getShadowColor(euiTheme.colors.shadow, 0.12, colorMode), "\n          );};label:bottom;"),
-      left: /*#__PURE__*/css("margin-inline-start:", euiTheme.size[translateDistance], ";.euiPopover__arrow{filter:drop-shadow(\n            6px 0 6px ", getShadowColor(euiTheme.colors.shadow, 0.12, colorMode), "\n          );};label:left;"),
-      right: /*#__PURE__*/css("margin-inline-start:-", euiTheme.size[translateDistance], ";.euiPopover__arrow{filter:drop-shadow(\n            -6px 0 6px ", getShadowColor(euiTheme.colors.shadow, 0.12, colorMode), "\n          );};label:right;")
+      top: /*#__PURE__*/css("margin-block-start:", translateDistance, ";;label:top;"),
+      bottom: /*#__PURE__*/css("margin-block-start:-", translateDistance, ";.euiPopover__arrow{filter:drop-shadow(\n            0 -6px 6px ", getShadowColor(euiTheme.colors.shadow, 0.12, colorMode), "\n          );};label:bottom;"),
+      left: /*#__PURE__*/css("margin-inline-start:", translateDistance, ";.euiPopover__arrow{filter:drop-shadow(\n            6px 0 6px ", getShadowColor(euiTheme.colors.shadow, 0.12, colorMode), "\n          );};label:left;"),
+      right: /*#__PURE__*/css("margin-inline-start:-", translateDistance, ";.euiPopover__arrow{filter:drop-shadow(\n            -6px 0 6px ", getShadowColor(euiTheme.colors.shadow, 0.12, colorMode), "\n          );};label:right;")
     }
   };
 };

package/optimize/es/components/text_truncate/index.js

@@ -7,4 +7,4 @@
  */
 
 export { EuiTextTruncate } from './text_truncate';
-export { TruncationUtilsWithDOM, TruncationUtilsWithCanvas } from './utils';
+export { CanvasTextUtils, TruncationUtils } from './utils';

package/optimize/es/components/text_truncate/text_truncate.js

@@ -2,7 +2,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["width"],
-  _excluded2 = ["width", "children", "text", "truncation", "truncationOffset", "truncationPosition", "ellipsis", "containerRef", "measurementRenderAPI"],
+  _excluded2 = ["width", "children", "text", "truncation", "truncationOffset", "truncationPosition", "ellipsis", "containerRef", "className"],
   _excluded3 = ["onResize"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -13,10 +13,11 @@ var _excluded = ["width"],
  */
 
 import React, { useState, useMemo, useCallback } from 'react';
+import classNames from 'classnames';
 import { useCombinedRefs } from '../../services';
 import { EuiResizeObserver } from '../observer/resize_observer';
-import { TruncationUtilsWithDOM, TruncationUtilsWithCanvas } from './utils';
-import { euiTextTruncateStyles } from './text_truncate.styles';
+import { TruncationUtils } from './utils';
+import { euiTextTruncateStyles as styles } from './text_truncate.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var TRUNCATION_TYPES = ['end', 'start', 'startEnd', 'middle'];
 export var EuiTextTruncate = function EuiTextTruncate(_ref) {
@@ -38,8 +39,7 @@ var EuiTextTruncateWithWidth = function EuiTextTruncateWithWidth(_ref2) {
     _ref2$ellipsis = _ref2.ellipsis,
     ellipsis = _ref2$ellipsis === void 0 ? '…' : _ref2$ellipsis,
     containerRef = _ref2.containerRef,
-    _ref2$measurementRend = _ref2.measurementRenderAPI,
-    measurementRenderAPI = _ref2$measurementRend === void 0 ? 'dom' : _ref2$measurementRend,
+    className = _ref2.className,
     rest = _objectWithoutProperties(_ref2, _excluded2);
   // Note: This needs to be a state and not a ref to trigger a rerender on mount
   var _useState = useState(null),
@@ -73,13 +73,12 @@ var EuiTextTruncateWithWidth = function EuiTextTruncateWithWidth(_ref2) {
   var truncatedText = useMemo(function () {
     var truncatedText = '';
     if (!containerEl || !width) return truncatedText;
-    var params = {
+    var utils = new TruncationUtils({
       fullText: text,
       ellipsis: ellipsis,
       container: containerEl,
       availableWidth: width
-    };
-    var utils = measurementRenderAPI === 'canvas' ? new TruncationUtilsWithCanvas(params) : new TruncationUtilsWithDOM(params);
+    });
     if (utils.checkIfTruncationIsNeeded() === false) {
       truncatedText = text;
     } else if (utils.checkSufficientEllipsisWidth(truncation) === false) {
@@ -104,26 +103,27 @@ var EuiTextTruncateWithWidth = function EuiTextTruncateWithWidth(_ref2) {
           break;
       }
     }
-    if (measurementRenderAPI === 'dom') {
-      utils.cleanup();
-    }
     return truncatedText;
-  }, [width, text, truncation, truncationOffset, truncationPosition, ellipsis, containerEl, measurementRenderAPI]);
+  }, [width, text, truncation, truncationOffset, truncationPosition, ellipsis, containerEl]);
   var isTruncating = truncatedText !== text;
   return ___EmotionJSX("div", _extends({
-    css: euiTextTruncateStyles.euiTextTruncate,
+    className: classNames('euiTextTruncate', className),
+    css: styles.euiTextTruncate,
     ref: refs,
     title: isTruncating ? text : undefined
   }, rest), isTruncating ? ___EmotionJSX(React.Fragment, null, ___EmotionJSX("span", {
-    css: euiTextTruncateStyles.truncatedText,
+    className: "euiTextTruncate__truncatedText",
+    css: styles.euiTextTruncate__truncatedText,
     "aria-hidden": true,
     "data-test-subj": "truncatedText"
   }, children ? children(truncatedText) : truncatedText), ___EmotionJSX("span", {
-    css: euiTextTruncateStyles.fullText,
+    className: "euiTextTruncate__fullText",
+    css: styles.euiTextTruncate__fullText,
     "data-test-subj": "fullText"
   }, text)) : ___EmotionJSX("span", {
+    className: "euiTextTruncate__fullText",
     "data-test-subj": "fullText"
-  }, text));
+  }, children ? children(text) : text));
 };
 var EuiTextTruncateWithResizeObserver = function EuiTextTruncateWithResizeObserver(_ref3) {
   var _onResize = _ref3.onResize,

package/optimize/es/components/text_truncate/text_truncate.styles.js

@@ -28,22 +28,22 @@ export var euiTextTruncateStyles = {
    * and there'll be no need for the entire component at that point 🙏
    */
   // Makes the truncated text unselectable/un-clickable
-  truncatedText: process.env.NODE_ENV === "production" ? {
-    name: "1dore6v-truncatedText",
-    styles: "user-select:none;pointer-events:none;label:truncatedText;"
+  euiTextTruncate__truncatedText: process.env.NODE_ENV === "production" ? {
+    name: "1sjxkb1-euiTextTruncate__truncatedText",
+    styles: "user-select:none;pointer-events:none;label:euiTextTruncate__truncatedText;"
   } : {
-    name: "1dore6v-truncatedText",
-    styles: "user-select:none;pointer-events:none;label:truncatedText;",
+    name: "1sjxkb1-euiTextTruncate__truncatedText",
+    styles: "user-select:none;pointer-events:none;label:euiTextTruncate__truncatedText;",
     toString: _EMOTION_STRINGIFIED_CSS_ERROR__
   },
   // Positions the full text on top of the truncated text (so that clicking targets it)
   // and gives it a color opacity of 0 so that it's not actually visible
-  fullText: process.env.NODE_ENV === "production" ? {
-    name: "1kxt4rj-fullText",
-    styles: "position:absolute;inset:0;overflow:hidden;color:rgba(0, 0, 0, 0);@supports (-webkit-hyphens: none){text-overflow:ellipsis;};label:fullText;"
+  euiTextTruncate__fullText: process.env.NODE_ENV === "production" ? {
+    name: "19c9gqi-euiTextTruncate__fullText",
+    styles: "position:absolute;inset:0;overflow:hidden;color:rgba(0, 0, 0, 0);@supports (-webkit-hyphens: none){text-overflow:ellipsis;};label:euiTextTruncate__fullText;"
   } : {
-    name: "1kxt4rj-fullText",
-    styles: "position:absolute;inset:0;overflow:hidden;color:rgba(0, 0, 0, 0);@supports (-webkit-hyphens: none){text-overflow:ellipsis;};label:fullText;",
+    name: "19c9gqi-euiTextTruncate__fullText",
+    styles: "position:absolute;inset:0;overflow:hidden;color:rgba(0, 0, 0, 0);@supports (-webkit-hyphens: none){text-overflow:ellipsis;};label:euiTextTruncate__fullText;",
     toString: _EMOTION_STRINGIFIED_CSS_ERROR__
   }
 };