@elastic/eui 88.4.0 → 88.5.0

package/test-env/components/text_truncate/utils.js

@@ -4,18 +4,18 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TruncationUtilsWithDOM = exports.TruncationUtilsWithCanvas = void 0;
+exports.TruncationUtils = exports.CanvasTextUtils = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+var _get2 = _interopRequireDefault(require("@babel/runtime/helpers/get"));
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _excluded = ["container"],
-  _excluded2 = ["font", "container"];
+var _excluded = ["fullText", "ellipsis", "availableWidth"];
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 /*
@@ -26,313 +26,281 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
  * Side Public License, v 1.
  */
 /**
- * This internal shared/base class contains the actual logic for truncating text
- * (as well as a few handy utilities for checking whether truncation is possible
- * or even necessary).
- *
- * How the underlying mechanism works: the full text is rendered, and then
- * characters are removed one by one until the width of the text fits within
- * the specified available width.
- *
- * Side note: The exception to this is the `truncateStartEndAtPosition` method,
- * which works by building up from an empty string / by adding characters
- * instead of removing them.
- */
-var _TruncationUtils = /*#__PURE__*/(0, _createClass2.default)(function _TruncationUtils(_ref) {
-  var _this = this;
-  var fullText = _ref.fullText,
-    ellipsis = _ref.ellipsis,
-    availableWidth = _ref.availableWidth;
-  (0, _classCallCheck2.default)(this, _TruncationUtils);
-  (0, _defineProperty2.default)(this, "fullText", void 0);
-  (0, _defineProperty2.default)(this, "ellipsis", void 0);
-  (0, _defineProperty2.default)(this, "availableWidth", void 0);
-  /**
-   * Early return checks
-   */
-  (0, _defineProperty2.default)(this, "checkIfTruncationIsNeeded", function () {
-    _this.setTextToCheck(_this.fullText);
-    if (_this.availableWidth >= _this.textWidth) {
-      return false;
-    }
-  });
-  (0, _defineProperty2.default)(this, "checkSufficientEllipsisWidth", function (truncation) {
-    var textToCheck = truncation === 'startEnd' ? "".concat(_this.ellipsis, " ").concat(_this.ellipsis) // startEnd needs a little more space
-    : _this.ellipsis;
-    _this.setTextToCheck(textToCheck);
-    if (_this.textWidth >= _this.availableWidth * 0.9) {
-      console.error('The truncation ellipsis is larger than the available width. No text can be rendered.');
-      return false;
-    }
-  });
-  (0, _defineProperty2.default)(this, "checkTruncationOffsetWidth", function (text) {
-    _this.setTextToCheck(text);
-    if (_this.textWidth > _this.availableWidth) {
-      console.error("The passed truncationOffset is too large for the available width. Truncating the offset instead.");
-      return false;
-    }
-  });
-  /**
-   * Truncation types logic. This is where the magic happens
-   */
-  (0, _defineProperty2.default)(this, "truncateStart", function (truncationOffset) {
-    var truncatedText = _this.fullText;
-    var leadingText = '';
-    var combinedText = function combinedText() {
-      return "".concat(leadingText).concat(truncatedText);
-    };
-    if (truncationOffset) {
-      var _splitText$at = splitText(_this.fullText).at(truncationOffset);
-      var _splitText$at2 = (0, _slicedToArray2.default)(_splitText$at, 2);
-      leadingText = _splitText$at2[0];
-      truncatedText = _splitText$at2[1];
-      var widthCheck = "".concat(leadingText).concat(_this.ellipsis);
-      if (_this.checkTruncationOffsetWidth(widthCheck) === false) {
-        truncatedText = leadingText;
-        leadingText = '';
-      }
-    }
-    leadingText += _this.ellipsis;
-    _this.setTextToCheck(combinedText());
-    while (_this.textWidth > _this.availableWidth) {
-      truncatedText = removeFirstCharacter(truncatedText);
-      _this.setTextToCheck(combinedText());
-    }
-    return combinedText();
-  });
-  (0, _defineProperty2.default)(this, "truncateEnd", function (truncationOffset) {
-    var truncatedText = _this.fullText;
-    var trailingText = '';
-    var combinedText = function combinedText() {
-      return "".concat(truncatedText).concat(trailingText);
-    };
-    if (truncationOffset) {
-      var index = _this.fullText.length - truncationOffset;
-      var _splitText$at3 = splitText(_this.fullText).at(index);
-      var _splitText$at4 = (0, _slicedToArray2.default)(_splitText$at3, 2);
-      truncatedText = _splitText$at4[0];
-      trailingText = _splitText$at4[1];
-      var widthCheck = "".concat(_this.ellipsis).concat(trailingText);
-      if (_this.checkTruncationOffsetWidth(widthCheck) === false) {
-        truncatedText = trailingText;
-        trailingText = '';
-      }
-    }
-    trailingText = _this.ellipsis + trailingText;
-    _this.setTextToCheck(combinedText());
-    while (_this.textWidth > _this.availableWidth) {
-      truncatedText = removeLastCharacter(truncatedText);
-      _this.setTextToCheck(combinedText());
-    }
-    return combinedText();
-  });
-  (0, _defineProperty2.default)(this, "truncateStartEndAtPosition", function (truncationPosition) {
-    // If using a non-centered startEnd anchor position, we need to *build*
-    // the string from scratch instead of *removing* from the full text string,
-    // to make sure we don't go past the beginning or end of the text
-    var truncatedText = '';
-    _this.setTextToCheck(truncatedText);
-
-    // Ellipses are conditional - if the anchor is towards the beginning or end,
-    // it's possible they shouldn't render
-    var startingEllipsis = _this.ellipsis;
-    var endingEllipsis = _this.ellipsis;
-
-    // Split the text into two at the anchor position
-    var _splitText$at5 = splitText(_this.fullText).at(truncationPosition),
-      _splitText$at6 = (0, _slicedToArray2.default)(_splitText$at5, 2),
-      firstPart = _splitText$at6[0],
-      secondPart = _splitText$at6[1];
-    var combinedText = function combinedText() {
-      return "".concat(startingEllipsis).concat(truncatedText).concat(endingEllipsis);
-    };
-    while (_this.textWidth <= _this.availableWidth) {
-      if (firstPart.length > 0) {
-        truncatedText = "".concat(getLastCharacter(firstPart)).concat(truncatedText);
-        firstPart = removeLastCharacter(firstPart);
-      } else {
-        startingEllipsis = '';
-      }
-      if (secondPart.length > 0) {
-        truncatedText = "".concat(truncatedText).concat(getFirstCharacter(secondPart));
-        secondPart = removeFirstCharacter(secondPart);
-      } else {
-        endingEllipsis = '';
-      }
-      _this.setTextToCheck(combinedText());
-    }
-
-    // Because this logic builds text outwards vs. removing inwards, the final
-    // text width ends up a little larger than the container, and we need to
-    // remove the last added character(s)
-    if (!startingEllipsis) {
-      truncatedText = removeLastCharacter(truncatedText);
-    } else if (!endingEllipsis) {
-      truncatedText = removeFirstCharacter(truncatedText);
-    } else {
-      truncatedText = removeFirstAndLastCharacters(truncatedText);
-    }
-    return combinedText();
-  });
-  (0, _defineProperty2.default)(this, "truncateStartEndAtMiddle", function () {
-    var truncatedText = _this.fullText;
-    _this.setTextToCheck(truncatedText);
-    var combinedText = function combinedText() {
-      return "".concat(_this.ellipsis).concat(truncatedText).concat(_this.ellipsis);
-    };
-    while (_this.textWidth > _this.availableWidth) {
-      truncatedText = removeFirstAndLastCharacters(truncatedText);
-      _this.setTextToCheck(combinedText());
-    }
-    return combinedText();
-  });
-  (0, _defineProperty2.default)(this, "truncateMiddle", function () {
-    var middlePosition = Math.floor(_this.fullText.length / 2);
-    var _splitText$at7 = splitText(_this.fullText).at(middlePosition),
-      _splitText$at8 = (0, _slicedToArray2.default)(_splitText$at7, 2),
-      firstHalf = _splitText$at8[0],
-      secondHalf = _splitText$at8[1];
-    var trimfirstHalf;
-    var combinedText = function combinedText() {
-      return "".concat(firstHalf).concat(_this.ellipsis).concat(secondHalf);
-    };
-    _this.setTextToCheck(combinedText());
-    while (_this.textWidth > _this.availableWidth) {
-      trimfirstHalf = !trimfirstHalf;
-      if (trimfirstHalf) {
-        firstHalf = removeLastCharacter(firstHalf);
-      } else {
-        secondHalf = removeFirstCharacter(secondHalf);
-      }
-      _this.setTextToCheck(combinedText());
-    }
-    return combinedText();
-  });
-  this.fullText = fullText;
-  this.ellipsis = ellipsis;
-  this.availableWidth = availableWidth;
-}
-
-/**
- * Internal measurement utils which will be overridden depending on the
- * rendering approach used (e.g. DOM vs Canvas).
- */);
-/**
- * Creates a temporary vanilla JS DOM element for manipulating text and
- * determining text width.
- *
- * Requires passing in a container element to which the temporary element
- * will be appended. Any CSS/font styles that need to be accounted for should
- * be automatically inherited from the container.
- *
- * NOTE: The consumer is responsible for calling the `cleanup()` method manually
- * to remove the temporary DOM node once their usage of this utility is complete.
- */
-var TruncationUtilsWithDOM = /*#__PURE__*/function (_TruncationUtils2) {
-  (0, _inherits2.default)(TruncationUtilsWithDOM, _TruncationUtils2);
-  var _super = _createSuper(TruncationUtilsWithDOM);
-  function TruncationUtilsWithDOM(_ref2) {
-    var _this2;
-    var container = _ref2.container,
-      rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
-    (0, _classCallCheck2.default)(this, TruncationUtilsWithDOM);
-    _this2 = _super.call(this, rest);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this2), "container", void 0);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this2), "span", void 0);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this2), "setTextToCheck", function (text) {
-      _this2.span.textContent = text;
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this2), "cleanup", function () {
-      _this2.container.removeChild(_this2.span);
-    });
-    _this2.container = container;
-    _this2.span = document.createElement('span');
-    _this2.span.style.position = 'absolute'; // Prevent page reflow/repaint for performance
-    _this2.span.style.whiteSpace = 'nowrap'; // EuiTextTruncate already sets this on the parent, but we'll set it here as well for consumers who use this util standalone
-    _this2.container.appendChild(_this2.span);
-    return _this2;
-  }
-  (0, _createClass2.default)(TruncationUtilsWithDOM, [{
-    key: "textWidth",
-    get: function get() {
-      return this.span.offsetWidth;
-    }
-  }]);
-  return TruncationUtilsWithDOM;
-}(_TruncationUtils);
-/**
- * Creates a temporary Canvas element for manipulating text & determining
- * text width. This method is compatible with charts or other canvas-rendered
- * frameworks, and requires no cleanup method.
+ * Under the hood, a temporary Canvas element is created for manipulating text
+ * & determining text width.
  *
  * To accurately measure text, canvas rendering requires either a container to
  * compute/derive font styles from, or a static font string (useful for usage
  * outside the DOM). Particular care should be applied when fallback fonts are
  * used, as more fallback fonts can lead to less precision.
  *
- * Please note that while canvas is more performant than DOM measurement, there
- * are subpixel to single digit pixel differences between DOM and canvas
- * measurement due to the different rendering engines used.
+ * Please note that while canvas is more significantly more performant than DOM
+ * measurement, there are subpixel to single digit pixel differences between
+ * DOM and canvas measurement due to the different rendering engines used.
  */
-exports.TruncationUtilsWithDOM = TruncationUtilsWithDOM;
-var TruncationUtilsWithCanvas = /*#__PURE__*/function (_TruncationUtils3) {
-  (0, _inherits2.default)(TruncationUtilsWithCanvas, _TruncationUtils3);
-  var _super2 = _createSuper(TruncationUtilsWithCanvas);
-  function TruncationUtilsWithCanvas(_ref3) {
-    var _this3;
-    var font = _ref3.font,
-      container = _ref3.container,
-      rest = (0, _objectWithoutProperties2.default)(_ref3, _excluded2);
-    (0, _classCallCheck2.default)(this, TruncationUtilsWithCanvas);
-    _this3 = _super2.call(this, rest);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this3), "context", void 0);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this3), "currentText", '');
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this3), "computeFontFromElement", function (element) {
+var CanvasTextUtils = /*#__PURE__*/function () {
+  function CanvasTextUtils(_ref) {
+    var _this = this;
+    var font = _ref.font,
+      container = _ref.container;
+    (0, _classCallCheck2.default)(this, CanvasTextUtils);
+    (0, _defineProperty2.default)(this, "context", void 0);
+    (0, _defineProperty2.default)(this, "currentText", '');
+    (0, _defineProperty2.default)(this, "computeFontFromElement", function (element) {
       var computedStyles = window.getComputedStyle(element);
+      // TODO: font-stretch is not included even though it potentially should be
+      // @see https://developer.mozilla.org/en-US/docs/Web/CSS/font#constituent_properties
+      // It appears to be unsupported and/or breaks font computation in canvas
       return ['font-style', 'font-variant', 'font-weight', 'font-size', 'font-family'].map(function (prop) {
         return computedStyles.getPropertyValue(prop);
       }).join(' ').trim();
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this3), "setTextToCheck", function (text) {
-      _this3.currentText = text;
+    (0, _defineProperty2.default)(this, "setTextToCheck", function (text) {
+      _this.currentText = text;
     });
-    _this3.context = document.createElement('canvas').getContext('2d');
+    this.context = document.createElement('canvas').getContext('2d');
 
     // Set the canvas font to ensure text width calculations are correct
     if (font) {
-      _this3.context.font = font;
+      this.context.font = font;
     } else if (container) {
-      _this3.context.font = _this3.computeFontFromElement(container);
+      this.context.font = this.computeFontFromElement(container);
     }
-    return _this3;
   }
-  (0, _createClass2.default)(TruncationUtilsWithCanvas, [{
+  (0, _createClass2.default)(CanvasTextUtils, [{
     key: "textWidth",
     get: function get() {
       return this.context.measureText(this.currentText).width;
     }
   }]);
-  return TruncationUtilsWithCanvas;
-}(_TruncationUtils);
+  return CanvasTextUtils;
+}();
+/**
+ * Utilities for truncating types at various positions, as well as
+ * determining whether truncation is possible or even necessary.
+ */
+exports.CanvasTextUtils = CanvasTextUtils;
+var TruncationUtils = /*#__PURE__*/function (_CanvasTextUtils) {
+  (0, _inherits2.default)(TruncationUtils, _CanvasTextUtils);
+  var _super = _createSuper(TruncationUtils);
+  function TruncationUtils(_ref2) {
+    var _this2;
+    var fullText = _ref2.fullText,
+      ellipsis = _ref2.ellipsis,
+      _availableWidth = _ref2.availableWidth,
+      rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
+    (0, _classCallCheck2.default)(this, TruncationUtils);
+    _this2 = _super.call(this, rest);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this2), "fullText", void 0);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this2), "ellipsis", void 0);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this2), "availableWidth", void 0);
+    /**
+     * Performance utilities
+     */
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this2), "debugPerformance", false);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this2), "debugCounter", 0);
+    /**
+     * Internal utils for calculating a ratio based on the passed available width
+     * vs the full text width.
+     * This ratio is used to get an initial _approximate_ text string that should
+     * be slightly over the available width, which we can then remove from
+     * character-by-character until the text just fits within the available width.
+     */
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this2), "widthRatio", 0);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this2), "setTextWidthRatio", function () {
+      var text = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _this2.fullText;
+      var textToOffset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+      // Account for reduced available width due to (e.g.) truncation offset
+      var availableWidth = _this2.availableWidth;
+      if (textToOffset) {
+        _this2.setTextToCheck(textToOffset);
+        availableWidth = availableWidth - _this2.textWidth;
+      }
+      _this2.setTextToCheck(text);
+      _this2.widthRatio = availableWidth / _this2.textWidth;
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this2), "getTextFromRatio", function (text, type) {
+      var characterRatio = Math.ceil(text.length * _this2.widthRatio);
+      var index = type === 'start' ? text.length - characterRatio : characterRatio;
+      var _splitText$at = splitText(text).at(index),
+        _splitText$at2 = (0, _slicedToArray2.default)(_splitText$at, 2),
+        end = _splitText$at2[0],
+        start = _splitText$at2[1];
+      return type === 'start' ? start : end;
+    });
+    /**
+     * Early return checks
+     */
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this2), "checkIfTruncationIsNeeded", function () {
+      _this2.setTextToCheck(_this2.fullText);
+      if (_this2.availableWidth >= _this2.textWidth) {
+        return false;
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this2), "checkSufficientEllipsisWidth", function (truncation) {
+      var textToCheck = truncation === 'startEnd' ? "".concat(_this2.ellipsis, " ").concat(_this2.ellipsis) // startEnd needs a little more space
+      : _this2.ellipsis;
+      _this2.setTextToCheck(textToCheck);
+      if (_this2.textWidth >= _this2.availableWidth * 0.9) {
+        console.error('The truncation ellipsis is larger than the available width. No text can be rendered.');
+        return false;
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this2), "checkTruncationOffsetWidth", function (text) {
+      _this2.setTextToCheck(text);
+      if (_this2.textWidth > _this2.availableWidth) {
+        console.error('The passed truncationOffset is too large for the available width. Truncating the offset instead.');
+        return false;
+      }
+    });
+    /**
+     * Truncation types logic. This is where the magic happens
+     */
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this2), "truncateStart", function (truncationOffset) {
+      var truncatedText = _this2.fullText;
+      var leadingText = '';
+      var combinedText = function combinedText() {
+        return leadingText + truncatedText;
+      };
+      if (truncationOffset) {
+        var _splitText$at3 = splitText(_this2.fullText).at(truncationOffset);
+        var _splitText$at4 = (0, _slicedToArray2.default)(_splitText$at3, 2);
+        leadingText = _splitText$at4[0];
+        truncatedText = _splitText$at4[1];
+        var widthCheck = leadingText + _this2.ellipsis;
+        if (_this2.checkTruncationOffsetWidth(widthCheck) === false) {
+          truncatedText = leadingText;
+          leadingText = '';
+        }
+      }
+
+      // Get text width ratio width accounting for any truncation offset text,
+      // and guesstimate an initial truncated string
+      _this2.setTextWidthRatio(truncatedText, leadingText);
+      truncatedText = _this2.getTextFromRatio(truncatedText, 'start');
+      leadingText += _this2.ellipsis;
+      _this2.setTextToCheck(combinedText());
+      while (_this2.textWidth > _this2.availableWidth) {
+        truncatedText = removeFirstCharacter(truncatedText);
+        _this2.setTextToCheck(combinedText());
+      }
+      return combinedText();
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this2), "truncateEnd", function (truncationOffset) {
+      var truncatedText = _this2.fullText;
+      var trailingText = '';
+      var combinedText = function combinedText() {
+        return truncatedText + trailingText;
+      };
+      if (truncationOffset) {
+        var index = _this2.fullText.length - truncationOffset;
+        var _splitText$at5 = splitText(_this2.fullText).at(index);
+        var _splitText$at6 = (0, _slicedToArray2.default)(_splitText$at5, 2);
+        truncatedText = _splitText$at6[0];
+        trailingText = _splitText$at6[1];
+        var widthCheck = _this2.ellipsis + trailingText;
+        if (_this2.checkTruncationOffsetWidth(widthCheck) === false) {
+          truncatedText = trailingText;
+          trailingText = '';
+        }
+      }
+
+      // Get text width ratio width accounting for any truncation offset text,
+      // and guesstimate an initial truncated string
+      _this2.setTextWidthRatio(truncatedText, trailingText);
+      truncatedText = _this2.getTextFromRatio(truncatedText, 'end');
+      trailingText = _this2.ellipsis + trailingText;
+      _this2.setTextToCheck(combinedText());
+      while (_this2.textWidth > _this2.availableWidth) {
+        truncatedText = removeLastCharacter(truncatedText);
+        _this2.setTextToCheck(combinedText());
+      }
+      return combinedText();
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this2), "truncateStartEndAtPosition", function (truncationPosition) {
+      // Split the text from the anchor position, using the width ratio
+      // to get the starting and ending indices from the position
+      _this2.setTextWidthRatio();
+      var characterRatio = Math.floor(_this2.fullText.length * _this2.widthRatio / 2);
+      var truncateStart = truncationPosition - characterRatio;
+      var truncateEnd = truncationPosition + characterRatio;
+
+      // If either of the approximate start/end truncation indices go beyond the
+      // bounds of the actual text, we can simply use end or start truncation instead
+      if (truncateStart < 0) {
+        return _this2.truncateEnd();
+      }
+      if (truncateEnd >= _this2.fullText.length) {
+        return _this2.truncateStart();
+      }
+      var truncatedText = _this2.fullText.substring(truncateStart, truncateEnd);
+      var combinedText = function combinedText() {
+        return _this2.ellipsis + truncatedText + _this2.ellipsis;
+      };
+      _this2.setTextToCheck(combinedText());
+      var alternating;
+      while (_this2.textWidth > _this2.availableWidth) {
+        truncatedText = alternating ? removeLastCharacter(truncatedText) : removeFirstCharacter(truncatedText);
+        alternating = !alternating;
+        _this2.setTextToCheck(combinedText());
+      }
+      return combinedText();
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this2), "truncateStartEndAtMiddle", function () {
+      var middlePosition = Math.floor(_this2.fullText.length / 2);
+      return _this2.truncateStartEndAtPosition(middlePosition);
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this2), "truncateMiddle", function () {
+      var middlePosition = Math.floor(_this2.fullText.length / 2);
+      var _splitText$at7 = splitText(_this2.fullText).at(middlePosition),
+        _splitText$at8 = (0, _slicedToArray2.default)(_splitText$at7, 2),
+        firstHalf = _splitText$at8[0],
+        secondHalf = _splitText$at8[1];
+      _this2.setTextWidthRatio();
+      firstHalf = _this2.getTextFromRatio(firstHalf, 'end');
+      secondHalf = _this2.getTextFromRatio(secondHalf, 'start');
+      var combinedText = function combinedText() {
+        return firstHalf + _this2.ellipsis + secondHalf;
+      };
+      _this2.setTextToCheck(combinedText());
+      var alternating;
+      while (_this2.textWidth > _this2.availableWidth) {
+        alternating = !alternating;
+        if (alternating) {
+          firstHalf = removeLastCharacter(firstHalf);
+        } else {
+          secondHalf = removeFirstCharacter(secondHalf);
+        }
+        _this2.setTextToCheck(combinedText());
+      }
+      return combinedText();
+    });
+    _this2.fullText = fullText;
+    _this2.ellipsis = ellipsis;
+    _this2.availableWidth = _availableWidth;
+    return _this2;
+  }
+  (0, _createClass2.default)(TruncationUtils, [{
+    key: "textWidth",
+    get: function get() {
+      if (this.debugPerformance) {
+        this.debugCounter++;
+      }
+      return (0, _get2.default)((0, _getPrototypeOf2.default)(TruncationUtils.prototype), "textWidth", this);
+    }
+  }]);
+  return TruncationUtils;
+}(CanvasTextUtils);
 /**
  * DRY character/substring utils
  */
-exports.TruncationUtilsWithCanvas = TruncationUtilsWithCanvas;
+exports.TruncationUtils = TruncationUtils;
 var removeLastCharacter = function removeLastCharacter(text) {
   return text.substring(0, text.length - 1);
 };
-var getLastCharacter = function getLastCharacter(text) {
-  return text.substring(text.length - 1);
-};
 var removeFirstCharacter = function removeFirstCharacter(text) {
   return text.substring(1);
 };
-var getFirstCharacter = function getFirstCharacter(text) {
-  return text.substring(0, 1);
-};
-var removeFirstAndLastCharacters = function removeFirstAndLastCharacters(text) {
-  return text.substring(1, text.length - 1);
-};
 var splitText = function splitText(text) {
   return {
     at: function at(index) {

package/test-env/components/timeline/timeline_item_icon.js

@@ -48,7 +48,7 @@ EuiTimelineItemIcon.propTypes = {
   /**
      * Any `ReactNode`, but preferably `EuiAvatar`, or a `string` as an `EuiIcon['type']`.
      */
-  icon: _propTypes.default.oneOfType([_propTypes.default.node.isRequired, _propTypes.default.oneOfType([_propTypes.default.oneOf(["accessibility", "addDataApp", "advancedSettingsApp", "agentApp", "aggregate", "analyzeEvent", "annotation", "apmApp", "apmTrace", "appSearchApp", "apps", "arrowDown", "arrowLeft", "arrowRight", "arrowUp", "arrowStart", "arrowEnd", "article", "asterisk", "at", "auditbeatApp", "beaker", "bell", "bellSlash", "beta", "bolt", "boxesHorizontal", "boxesVertical", "branch", "branchUser", "broom", "brush", "bug", "bullseye", "calendar", "canvasApp", "casesApp", "check", "checkInCircleFilled", "cheer", "classificationJob", "clock", "cloudDrizzle", "cloudStormy", "cloudSunny", "cluster", "codeApp", "color", "compute", "console", "consoleApp", "container", "continuityAbove", "continuityAboveBelow", "continuityBelow", "continuityWithin", "controlsHorizontal", "controlsVertical", "copy", "copyClipboard", "createAdvancedJob", "createMultiMetricJob", "createPopulationJob", "createSingleMetricJob", "cross", "crossClusterReplicationApp", "crosshairs", "currency", "cut", "dashboardApp", "dataVisualizer", "database", "desktop", "devToolsApp", "discoverApp", "discuss", "document", "documentEdit", "documentation", "documents", "dot", "dotInCircle", "doubleArrowLeft", "doubleArrowRight", "download", "editorAlignCenter", "editorAlignLeft", "editorAlignRight", "editorBold", "editorChecklist", "editorCodeBlock", "editorComment", "editorDistributeHorizontal", "editorDistributeVertical", "editorHeading", "editorItalic", "editorItemAlignBottom", "editorItemAlignCenter", "editorItemAlignLeft", "editorItemAlignMiddle", "editorItemAlignRight", "editorItemAlignTop", "editorLink", "editorOrderedList", "editorPositionBottomLeft", "editorPositionBottomRight", "editorPositionTopLeft", "editorPositionTopRight", "editorRedo", "editorStrike", "editorTable", "editorUnderline", "editorUndo", "editorUnorderedList", "email", "empty", "emsApp", "eql", "eraser", "error", "exit", "expand", "expandMini", "exportAction", "eye", "eyeClosed", "faceHappy", "faceNeutral", "faceSad", "filebeatApp", "filter", "filterExclude", "filterIgnore", "filterInclude", "filterInCircle", "flag", "fleetApp", "fold", "folderCheck", "folderClosed", "folderExclamation", "folderOpen", "frameNext", "framePrevious", "fullScreen", "fullScreenExit", "function", "gear", "gisApp", "glasses", "globe", "grab", "grabHorizontal", "grabOmnidirectional", "graphApp", "grid", "grokApp", "heart", "heartbeatApp", "heatmap", "help", "home", "iInCircle", "image", "importAction", "indexClose", "indexEdit", "indexFlush", "indexManagementApp", "indexMapping", "indexOpen", "indexPatternApp", "indexRollupApp", "indexRuntime", "indexSettings", "indexTemporary", "infinity", "inputOutput", "inspect", "invert", "ip", "key", "keyboard", "kqlField", "kqlFunction", "kqlOperand", "kqlSelector", "kqlValue", "kubernetesNode", "kubernetesPod", "launch", "layers", "lensApp", "lettering", "lineDashed", "lineDotted", "lineSolid", "link", "list", "listAdd", "lock", "lockOpen", "logoAWS", "logoAWSMono", "logoAerospike", "logoApache", "logoAppSearch", "logoAzure", "logoAzureMono", "logoBeats", "logoBusinessAnalytics", "logoCeph", "logoCloud", "logoCloudEnterprise", "logoCode", "logoCodesandbox", "logoCouchbase", "logoDocker", "logoDropwizard", "logoElastic", "logoElasticStack", "logoElasticsearch", "logoEnterpriseSearch", "logoEtcd", "logoGCP", "logoGCPMono", "logoGithub", "logoGmail", "logoGolang", "logoGoogleG", "logoHAproxy", "logoIBM", "logoIBMMono", "logoKafka", "logoKibana", "logoKubernetes", "logoLogging", "logoLogstash", "logoMaps", "logoMemcached", "logoMetrics", "logoMongodb", "logoMySQL", "logoNginx", "logoObservability", "logoOsquery", "logoPhp", "logoPostgres", "logoPrometheus", "logoRabbitmq", "logoRedis", "logoSecurity", "logoSiteSearch", "logoSketch", "logoSlack", "logoUptime", "logoVulnerabilityManagement", "logoWebhook", "logoWindows", "logoWorkplaceSearch", "logsApp", "logstashFilter", "logstashIf", "logstashInput", "logstashOutput", "logstashQueue", "machineLearningApp", "magnet", "magnifyWithExclamation", "magnifyWithMinus", "magnifyWithPlus", "managementApp", "mapMarker", "memory", "menu", "menuDown", "menuLeft", "menuRight", "menuUp", "merge", "metricbeatApp", "metricsApp", "minimize", "minus", "minusInCircle", "minusInCircleFilled", "mobile", "monitoringApp", "moon", "namespace", "nested", "node", "notebookApp", "number", "offline", "online", "outlierDetectionJob", "package", "packetbeatApp", "pageSelect", "pagesSelect", "paperClip", "partial", "pause", "payment", "pencil", "percent", "pin", "pinFilled", "pipelineApp", "pivot", "play", "playFilled", "plus", "plusInCircle", "plusInCircleFilled", "popout", "push", "questionInCircle", "quote", "recentlyViewedApp", "refresh", "regressionJob", "reporter", "reportingApp", "returnKey", "save", "savedObjectsApp", "scale", "search", "searchProfilerApp", "securityAnalyticsApp", "securityApp", "securitySignal", "securitySignalDetected", "securitySignalResolved", "sessionViewer", "shard", "share", "snowflake", "sortAscending", "sortDescending", "sortDown", "sortLeft", "sortRight", "sortUp", "sortable", "spaces", "spacesApp", "sparkles", "sqlApp", "starEmpty", "starEmptySpace", "starFilled", "starFilledSpace", "starMinusEmpty", "starMinusFilled", "starPlusEmpty", "starPlusFilled", "stats", "stop", "stopFilled", "stopSlash", "storage", "string", "submodule", "sun", "swatchInput", "symlink", "tableDensityCompact", "tableDensityExpanded", "tableDensityNormal", "tableOfContents", "tag", "tear", "temperature", "timeline", "timelineWithArrow", "timelionApp", "timeRefresh", "timeslider", "training", "transitionLeftIn", "transitionLeftOut", "transitionTopIn", "transitionTopOut", "trash", "unfold", "unlink", "upgradeAssistantApp", "uptimeApp", "user", "userAvatar", "users", "usersRolesApp", "vector", "videoPlayer", "visArea", "visAreaStacked", "visBarHorizontal", "visBarHorizontalStacked", "visBarVertical", "visBarVerticalStacked", "visGauge", "visGoal", "visLine", "visMapCoordinate", "visMapRegion", "visMetric", "visPie", "visTable", "visTagCloud", "visText", "visTimelion", "visVega", "visVisualBuilder", "visualizeApp", "vulnerabilityManagementApp", "warning", "alert", "watchesApp", "wordWrap", "wordWrapDisabled", "workplaceSearchApp", "wrench", "tokenAlias", "tokenAnnotation", "tokenArray", "tokenBinary", "tokenBoolean", "tokenClass", "tokenCompletionSuggester", "tokenConstant", "tokenDate", "tokenDenseVector", "tokenElement", "tokenEnum", "tokenEnumMember", "tokenEvent", "tokenException", "tokenField", "tokenFile", "tokenFlattened", "tokenFunction", "tokenGeo", "tokenHistogram", "tokenInterface", "tokenIP", "tokenJoin", "tokenKey", "tokenKeyword", "tokenMethod", "tokenMetricCounter", "tokenMetricGauge", "tokenModule", "tokenNamespace", "tokenNested", "tokenNull", "tokenNumber", "tokenObject", "tokenOperator", "tokenPackage", "tokenParameter", "tokenPercolator", "tokenProperty", "tokenRange", "tokenRankFeature", "tokenRankFeatures", "tokenRepo", "tokenSearchType", "tokenShape", "tokenString", "tokenStruct", "tokenSymbol", "tokenTag", "tokenText", "tokenTokenCount", "tokenVariable"]).isRequired, _propTypes.default.string.isRequired, _propTypes.default.elementType.isRequired]).isRequired]).isRequired,
+  icon: _propTypes.default.oneOfType([_propTypes.default.node.isRequired, _propTypes.default.oneOfType([_propTypes.default.oneOf(["accessibility", "addDataApp", "advancedSettingsApp", "agentApp", "aggregate", "analyzeEvent", "annotation", "apmApp", "apmTrace", "appSearchApp", "apps", "arrowDown", "arrowLeft", "arrowRight", "arrowUp", "arrowStart", "arrowEnd", "article", "asterisk", "at", "auditbeatApp", "beaker", "bell", "bellSlash", "beta", "bolt", "boxesHorizontal", "boxesVertical", "branch", "branchUser", "broom", "brush", "bug", "bullseye", "calendar", "canvasApp", "casesApp", "check", "checkInCircleFilled", "cheer", "classificationJob", "clock", "cloudDrizzle", "cloudStormy", "cloudSunny", "cluster", "codeApp", "color", "compute", "console", "consoleApp", "container", "continuityAbove", "continuityAboveBelow", "continuityBelow", "continuityWithin", "controlsHorizontal", "controlsVertical", "copy", "copyClipboard", "createAdvancedJob", "createMultiMetricJob", "createPopulationJob", "createSingleMetricJob", "cross", "crossClusterReplicationApp", "crosshairs", "currency", "cut", "dashboardApp", "dataVisualizer", "database", "desktop", "devToolsApp", "discoverApp", "discuss", "document", "documentEdit", "documentation", "documents", "dot", "dotInCircle", "doubleArrowLeft", "doubleArrowRight", "download", "editorAlignCenter", "editorAlignLeft", "editorAlignRight", "editorBold", "editorChecklist", "editorCodeBlock", "editorComment", "editorDistributeHorizontal", "editorDistributeVertical", "editorHeading", "editorItalic", "editorItemAlignBottom", "editorItemAlignCenter", "editorItemAlignLeft", "editorItemAlignMiddle", "editorItemAlignRight", "editorItemAlignTop", "editorLink", "editorOrderedList", "editorPositionBottomLeft", "editorPositionBottomRight", "editorPositionTopLeft", "editorPositionTopRight", "editorRedo", "editorStrike", "editorTable", "editorUnderline", "editorUndo", "editorUnorderedList", "email", "empty", "emsApp", "eql", "eraser", "error", "exit", "expand", "expandMini", "exportAction", "eye", "eyeClosed", "faceHappy", "faceNeutral", "faceSad", "filebeatApp", "filter", "filterExclude", "filterIgnore", "filterInclude", "filterInCircle", "flag", "fleetApp", "fold", "folderCheck", "folderClosed", "folderExclamation", "folderOpen", "frameNext", "framePrevious", "fullScreen", "fullScreenExit", "function", "gear", "gisApp", "glasses", "globe", "grab", "grabHorizontal", "grabOmnidirectional", "gradient", "graphApp", "grid", "grokApp", "heart", "heartbeatApp", "heatmap", "help", "home", "iInCircle", "image", "importAction", "indexClose", "indexEdit", "indexFlush", "indexManagementApp", "indexMapping", "indexOpen", "indexPatternApp", "indexRollupApp", "indexRuntime", "indexSettings", "indexTemporary", "infinity", "inputOutput", "inspect", "invert", "ip", "key", "keyboard", "kqlField", "kqlFunction", "kqlOperand", "kqlSelector", "kqlValue", "kubernetesNode", "kubernetesPod", "launch", "layers", "lensApp", "lettering", "lineDashed", "lineDotted", "lineSolid", "link", "list", "listAdd", "lock", "lockOpen", "logoAWS", "logoAWSMono", "logoAerospike", "logoApache", "logoAppSearch", "logoAzure", "logoAzureMono", "logoBeats", "logoBusinessAnalytics", "logoCeph", "logoCloud", "logoCloudEnterprise", "logoCode", "logoCodesandbox", "logoCouchbase", "logoDocker", "logoDropwizard", "logoElastic", "logoElasticStack", "logoElasticsearch", "logoEnterpriseSearch", "logoEtcd", "logoGCP", "logoGCPMono", "logoGithub", "logoGmail", "logoGolang", "logoGoogleG", "logoHAproxy", "logoIBM", "logoIBMMono", "logoKafka", "logoKibana", "logoKubernetes", "logoLogging", "logoLogstash", "logoMaps", "logoMemcached", "logoMetrics", "logoMongodb", "logoMySQL", "logoNginx", "logoObservability", "logoOsquery", "logoPhp", "logoPostgres", "logoPrometheus", "logoRabbitmq", "logoRedis", "logoSecurity", "logoSiteSearch", "logoSketch", "logoSlack", "logoUptime", "logoVulnerabilityManagement", "logoWebhook", "logoWindows", "logoWorkplaceSearch", "logsApp", "logstashFilter", "logstashIf", "logstashInput", "logstashOutput", "logstashQueue", "machineLearningApp", "magnet", "magnifyWithExclamation", "magnifyWithMinus", "magnifyWithPlus", "managementApp", "mapMarker", "memory", "menu", "menuDown", "menuLeft", "menuRight", "menuUp", "merge", "metricbeatApp", "metricsApp", "minimize", "minus", "minusInCircle", "minusInCircleFilled", "mobile", "monitoringApp", "moon", "namespace", "nested", "node", "notebookApp", "number", "offline", "online", "outlierDetectionJob", "package", "packetbeatApp", "pageSelect", "pagesSelect", "palette", "paperClip", "partial", "pause", "payment", "pencil", "percent", "pin", "pinFilled", "pipelineApp", "pivot", "play", "playFilled", "plus", "plusInCircle", "plusInCircleFilled", "popout", "push", "questionInCircle", "quote", "recentlyViewedApp", "refresh", "regressionJob", "reporter", "reportingApp", "returnKey", "save", "savedObjectsApp", "scale", "search", "searchProfilerApp", "securityAnalyticsApp", "securityApp", "securitySignal", "securitySignalDetected", "securitySignalResolved", "sessionViewer", "shard", "share", "snowflake", "sortAscending", "sortDescending", "sortDown", "sortLeft", "sortRight", "sortUp", "sortable", "spaces", "spacesApp", "sparkles", "sqlApp", "starEmpty", "starEmptySpace", "starFilled", "starFilledSpace", "starMinusEmpty", "starMinusFilled", "starPlusEmpty", "starPlusFilled", "stats", "stop", "stopFilled", "stopSlash", "storage", "string", "submodule", "sun", "swatchInput", "symlink", "tableDensityCompact", "tableDensityExpanded", "tableDensityNormal", "tableOfContents", "tag", "tear", "temperature", "timeline", "timelineWithArrow", "timelionApp", "timeRefresh", "timeslider", "training", "transitionLeftIn", "transitionLeftOut", "transitionTopIn", "transitionTopOut", "trash", "unfold", "unlink", "upgradeAssistantApp", "uptimeApp", "user", "userAvatar", "users", "usersRolesApp", "vector", "videoPlayer", "visArea", "visAreaStacked", "visBarHorizontal", "visBarHorizontalStacked", "visBarVertical", "visBarVerticalStacked", "visGauge", "visGoal", "visLine", "visMapCoordinate", "visMapRegion", "visMetric", "visPie", "visTable", "visTagCloud", "visText", "visTimelion", "visVega", "visVisualBuilder", "visualizeApp", "vulnerabilityManagementApp", "warning", "alert", "watchesApp", "wordWrap", "wordWrapDisabled", "workplaceSearchApp", "wrench", "tokenAlias", "tokenAnnotation", "tokenArray", "tokenBinary", "tokenBoolean", "tokenClass", "tokenCompletionSuggester", "tokenConstant", "tokenDate", "tokenDenseVector", "tokenElement", "tokenEnum", "tokenEnumMember", "tokenEvent", "tokenException", "tokenField", "tokenFile", "tokenFlattened", "tokenFunction", "tokenGeo", "tokenHistogram", "tokenInterface", "tokenIP", "tokenJoin", "tokenKey", "tokenKeyword", "tokenMethod", "tokenMetricCounter", "tokenMetricGauge", "tokenModule", "tokenNamespace", "tokenNested", "tokenNull", "tokenNumber", "tokenObject", "tokenOperator", "tokenPackage", "tokenParameter", "tokenPercolator", "tokenProperty", "tokenRange", "tokenRankFeature", "tokenRankFeatures", "tokenRepo", "tokenSearchType", "tokenShape", "tokenString", "tokenStruct", "tokenSymbol", "tokenTag", "tokenText", "tokenTokenCount", "tokenVariable"]).isRequired, _propTypes.default.string.isRequired, _propTypes.default.elementType.isRequired]).isRequired]).isRequired,
   verticalAlign: _propTypes.default.any,
   /**
      * Specify an `aria-label` for the icon when passed as an `IconType`.