@elastic/eui 88.4.1 → 88.5.1

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

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

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

@@ -0,0 +1,42 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.icon = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var React = _interopRequireWildcard(require("react"));
+var _react2 = require("@emotion/react");
+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
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var EuiIconGradient = function EuiIconGradient(_ref) {
+  var title = _ref.title,
+    titleId = _ref.titleId,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return (0, _react2.jsx)("svg", (0, _extends2.default)({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    viewBox: "0 0 16 16",
+    "aria-labelledby": titleId
+  }, props), title ? (0, _react2.jsx)("title", {
+    id: titleId
+  }, title) : null, (0, _react2.jsx)("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"
+  }));
+};
+var icon = EuiIconGradient;
+exports.icon = icon;

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

@@ -0,0 +1,43 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.icon = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var React = _interopRequireWildcard(require("react"));
+var _react2 = require("@emotion/react");
+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
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var EuiIconPalette = function EuiIconPalette(_ref) {
+  var title = _ref.title,
+    titleId = _ref.titleId,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return (0, _react2.jsx)("svg", (0, _extends2.default)({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    viewBox: "0 0 16 16",
+    "aria-labelledby": titleId
+  }, props), title ? (0, _react2.jsx)("title", {
+    id: titleId
+  }, title) : null, (0, _react2.jsx)("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"
+  }), (0, _react2.jsx)("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"
+  }));
+};
+var icon = EuiIconPalette;
+exports.icon = icon;

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

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

package/optimize/lib/components/icon/svgs/gradient.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path fill-rule="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"/>
+</svg>

package/optimize/lib/components/icon/svgs/palette.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <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"/>
+  <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"/>
+</svg>

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

@@ -99,6 +99,7 @@ var EuiInputPopover = function EuiInputPopover(_ref) {
   var form = (0, _form.euiFormVariables)(euiThemeContext);
   return (0, _react2.jsx)(_popover.EuiPopover, (0, _extends2.default)({
     css: /*#__PURE__*/(0, _react2.css)(fullWidth ? undefined : (0, _global_styling.logicalCSS)('max-width', form.maxWidth), ";label:EuiInputPopover;"),
+    repositionToCrossAxis: false,
     ownFocus: false,
     button: (0, _react2.jsx)(_resize_observer.EuiResizeObserver, {
       onResize: onResize

package/optimize/lib/components/popover/popover.js

@@ -35,7 +35,7 @@ var _outside_click_detector = require("../outside_click_detector");
 var _popover_arrow = require("./popover_arrow");
 var _popover2 = require("./popover.styles");
 var _popover_panel = require("./popover_panel");
-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 _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 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; }
@@ -191,7 +191,9 @@ var EuiPopover = /*#__PURE__*/function (_Component) {
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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) {
@@ -205,12 +207,13 @@ 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,
@@ -367,6 +370,7 @@ 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,
@@ -532,6 +536,7 @@ exports.EuiPopover = EuiPopover;
 (0, _defineProperty2.default)(EuiPopover, "defaultProps", {
   isOpen: false,
   ownFocus: true,
+  repositionToCrossAxis: true,
   anchorPosition: 'downCenter',
   panelPaddingSize: 'm',
   hasArrow: true,

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

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.EuiPopoverPanelContext = exports.EuiPopoverPanel = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -42,26 +41,26 @@ var EuiPopoverPanel = function EuiPopoverPanel(_ref) {
     hasDragDrop = _ref.hasDragDrop,
     position = _ref.position,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var _rest$paddingSize = rest.paddingSize,
-    paddingSize = _rest$paddingSize === void 0 ? DEFAULT_PANEL_PADDING_SIZE : _rest$paddingSize;
-  var euiThemeContext = (0, _services.useEuiTheme)();
-  // Using BEM child class for BWC
   var classes = (0, _classnames.default)('euiPopover__panel', className);
-  var styles = (0, _popover_panel.euiPopoverPanelStyles)(euiThemeContext);
-  var panelCSS = [styles.euiPopover__panel, isOpen && styles.isOpen, isOpen && position && styles[position]];
-  if (isAttached) {
-    panelCSS = [].concat((0, _toConsumableArray2.default)(panelCSS), [isOpen && styles.attached.isOpen, position && styles.attached[position]]);
-  }
-  if (hasDragDrop) {
-    panelCSS = [].concat((0, _toConsumableArray2.default)(panelCSS), [styles.hasDragDrop.hasDragDrop, position && styles.hasDragDrop[position]]);
-  }
+  var euiThemeContext = (0, _services.useEuiTheme)();
+  var cssStyles = (0, _react.useMemo)(function () {
+    var styles = (0, _popover_panel.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 (0, _react2.jsx)(EuiPopoverPanelContext.Provider, {
     value: {
-      paddingSize: paddingSize
+      paddingSize: rest.paddingSize || DEFAULT_PANEL_PADDING_SIZE
     }
   }, (0, _react2.jsx)(_panel.EuiPanel, (0, _extends2.default)({
     className: classes,
-    css: panelCSS,
+    css: cssStyles,
     "data-popover-panel": true,
     "data-popover-open": isOpen || undefined
   }, rest), children));

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

@@ -8,59 +8,77 @@ var _react = require("@emotion/react");
 var _mixins = require("../../../themes/amsterdam/global_styling/mixins");
 var _functions = require("../../../themes/amsterdam/global_styling/functions");
 var _global_styling = require("../../../global_styling");
-/*
- * 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.
- */
-
+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
+                                                                                                                                                                                                                                                                                           * 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.
+                                                                                                                                                                                                                                                                                           */
 var openAnimationTiming = 'slow';
-exports.openAnimationTiming = openAnimationTiming;
-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.
  */
-
+exports.openAnimationTiming = openAnimationTiming;
+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__
+};
 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((0, _global_styling.mathWithUnits)(animationSpeed, function (x) {
+    return x + 100;
+  }));
   return {
     // Base
-    euiPopover__panel: /*#__PURE__*/(0, _react.css)("position:absolute;", (0, _global_styling.logicalCSS)('min-width', "".concat(euiTheme.base * 7, "px")), (0, _global_styling.logicalCSS)('max-width', "calc(100vw - ".concat(euiTheme.size.xl, ")")), "backface-visibility:hidden;pointer-events:none;opacity:0;transform:translateY(0) translateX(0) translateZ(0);", (0, _mixins.euiShadowMedium)(euiThemeContext, {
-      property: 'filter'
-    }), " &:focus{outline-offset:0;};label:euiPopover__panel;"),
-    // Is visible / open
-    isOpen: /*#__PURE__*/(0, _react.css)("opacity:1;pointer-events:auto;", _global_styling.euiCanAnimate, "{transition:opacity ", euiTheme.animation.bounce, " ", euiTheme.animation[openAnimationTiming], ",transform ", euiTheme.animation.bounce, " calc(", euiTheme.animation[openAnimationTiming], " + 100ms);};label:isOpen;"),
-    // Positions
-    top: /*#__PURE__*/(0, _react.css)("transform:translateY(", euiTheme.size[translateDistance], ") translateZ(0);;label:top;"),
-    bottom: /*#__PURE__*/(0, _react.css)("transform:translateY(-", euiTheme.size[translateDistance], ") translateZ(0);;label:bottom;"),
-    left: /*#__PURE__*/(0, _react.css)("transform:translateX(", euiTheme.size[translateDistance], ") translateZ(0);;label:left;"),
-    right: /*#__PURE__*/(0, _react.css)("transform:translateX(-", euiTheme.size[translateDistance], ") translateZ(0);;label:right;"),
-    // Attached version overrides
-    attached: {
-      isOpen: /*#__PURE__*/(0, _react.css)("filter:none;", _global_styling.euiCanAnimate, "{transition:opacity ", euiTheme.animation.bounce, " ", euiTheme.animation[openAnimationTiming], ";};label:isOpen;"),
+    euiPopover__panel: /*#__PURE__*/(0, _react.css)("position:absolute;", (0, _global_styling.logicalCSS)('min-width', "".concat(euiTheme.base * 7, "px")), (0, _global_styling.logicalCSS)('max-width', "calc(100vw - ".concat(euiTheme.size.xl, ")")), "backface-visibility:hidden;pointer-events:none;opacity:0;", _global_styling.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__*/(0, _react.css)("transform:translateY(0) translateX(0) translateZ(0);", (0, _mixins.euiShadowMedium)(euiThemeContext, {
+        property: 'filter'
+      }), " ", _global_styling.euiCanAnimate, "{transition:", opacityTransition, ",", transformTransition, ";};label:hasTransform;"),
+      // Positions
+      top: /*#__PURE__*/(0, _react.css)("transform:translateY(", translateDistance, ") translateZ(0);;label:top;"),
+      bottom: /*#__PURE__*/(0, _react.css)("transform:translateY(-", translateDistance, ") translateZ(0);;label:bottom;"),
+      left: /*#__PURE__*/(0, _react.css)("transform:translateX(", translateDistance, ") translateZ(0);;label:left;"),
+      right: /*#__PURE__*/(0, _react.css)("transform:translateX(-", translateDistance, ") translateZ(0);;label:right;")
+    },
+    // No arrow, transform, or filters
+    isAttached: {
+      isAttached: /*#__PURE__*/(0, _react.css)(_global_styling.euiCanAnimate, "{transition:", opacityTransition, ";};label:isAttached;"),
       top: /*#__PURE__*/(0, _react.css)((0, _mixins.euiShadowFlat)(euiThemeContext), ";;label:top;"),
       bottom: /*#__PURE__*/(0, _react.css)((0, _mixins.euiShadow)(euiThemeContext, 'm'), ";;label:bottom;"),
-      // Satisfies TS
-      left: /*#__PURE__*/(0, _react.css)(";label:left;"),
-      right: /*#__PURE__*/(0, _react.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__*/(0, _react.css)("transform:none;filter:none;", (0, _mixins.euiShadowMedium)(euiThemeContext, {
+      hasDragDrop: /*#__PURE__*/(0, _react.css)((0, _mixins.euiShadowMedium)(euiThemeContext, {
         property: 'box-shadow'
-      }), ";;label:hasDragDrop;"),
+      }), " ", _global_styling.euiCanAnimate, "{transition:", opacityTransition, ";};label:hasDragDrop;"),
       // The offset transforms must be recreated in margins
-      top: /*#__PURE__*/(0, _react.css)("margin-block-start:", euiTheme.size[translateDistance], ";;label:top;"),
-      bottom: /*#__PURE__*/(0, _react.css)("margin-block-start:-", euiTheme.size[translateDistance], ";.euiPopover__arrow{filter:drop-shadow(\n            0 -6px 6px ", (0, _functions.getShadowColor)(euiTheme.colors.shadow, 0.12, colorMode), "\n          );};label:bottom;"),
-      left: /*#__PURE__*/(0, _react.css)("margin-inline-start:", euiTheme.size[translateDistance], ";.euiPopover__arrow{filter:drop-shadow(\n            6px 0 6px ", (0, _functions.getShadowColor)(euiTheme.colors.shadow, 0.12, colorMode), "\n          );};label:left;"),
-      right: /*#__PURE__*/(0, _react.css)("margin-inline-start:-", euiTheme.size[translateDistance], ";.euiPopover__arrow{filter:drop-shadow(\n            -6px 0 6px ", (0, _functions.getShadowColor)(euiTheme.colors.shadow, 0.12, colorMode), "\n          );};label:right;")
+      top: /*#__PURE__*/(0, _react.css)("margin-block-start:", translateDistance, ";;label:top;"),
+      bottom: /*#__PURE__*/(0, _react.css)("margin-block-start:-", translateDistance, ";.euiPopover__arrow{filter:drop-shadow(\n            0 -6px 6px ", (0, _functions.getShadowColor)(euiTheme.colors.shadow, 0.12, colorMode), "\n          );};label:bottom;"),
+      left: /*#__PURE__*/(0, _react.css)("margin-inline-start:", translateDistance, ";.euiPopover__arrow{filter:drop-shadow(\n            6px 0 6px ", (0, _functions.getShadowColor)(euiTheme.colors.shadow, 0.12, colorMode), "\n          );};label:left;"),
+      right: /*#__PURE__*/(0, _react.css)("margin-inline-start:-", translateDistance, ";.euiPopover__arrow{filter:drop-shadow(\n            -6px 0 6px ", (0, _functions.getShadowColor)(euiTheme.colors.shadow, 0.12, colorMode), "\n          );};label:right;")
     }
   };
 };

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

@@ -3,22 +3,22 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "EuiTextTruncate", {
+Object.defineProperty(exports, "CanvasTextUtils", {
   enumerable: true,
   get: function get() {
-    return _text_truncate.EuiTextTruncate;
+    return _utils.CanvasTextUtils;
   }
 });
-Object.defineProperty(exports, "TruncationUtilsWithCanvas", {
+Object.defineProperty(exports, "EuiTextTruncate", {
   enumerable: true,
   get: function get() {
-    return _utils.TruncationUtilsWithCanvas;
+    return _text_truncate.EuiTextTruncate;
   }
 });
-Object.defineProperty(exports, "TruncationUtilsWithDOM", {
+Object.defineProperty(exports, "TruncationUtils", {
   enumerable: true,
   get: function get() {
-    return _utils.TruncationUtilsWithDOM;
+    return _utils.TruncationUtils;
   }
 });
 var _text_truncate = require("./text_truncate");

package/optimize/lib/components/text_truncate/text_truncate.js

@@ -17,7 +17,7 @@ var _utils = require("./utils");
 var _text_truncate = require("./text_truncate.styles");
 var _react2 = require("@emotion/react");
 var _excluded = ["width"],
-  _excluded2 = ["width", "children", "text", "truncation", "truncationOffset", "truncationPosition", "ellipsis", "containerRef", "measurementRenderAPI", "className"],
+  _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
@@ -49,8 +49,6 @@ 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 = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
   // Note: This needs to be a state and not a ref to trigger a rerender on mount
@@ -85,13 +83,12 @@ var EuiTextTruncateWithWidth = function EuiTextTruncateWithWidth(_ref2) {
   var truncatedText = (0, _react.useMemo)(function () {
     var truncatedText = '';
     if (!containerEl || !width) return truncatedText;
-    var params = {
+    var utils = new _utils.TruncationUtils({
       fullText: text,
       ellipsis: ellipsis,
       container: containerEl,
       availableWidth: width
-    };
-    var utils = measurementRenderAPI === 'canvas' ? new _utils.TruncationUtilsWithCanvas(params) : new _utils.TruncationUtilsWithDOM(params);
+    });
     if (utils.checkIfTruncationIsNeeded() === false) {
       truncatedText = text;
     } else if (utils.checkSufficientEllipsisWidth(truncation) === false) {
@@ -116,11 +113,8 @@ 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 (0, _react2.jsx)("div", (0, _extends2.default)({
     className: (0, _classnames.default)('euiTextTruncate', className),