@elastic/eui 88.4.0 → 88.5.0

package/es/components/text_truncate/utils.js

@@ -1,8 +1,15 @@
-var _excluded = ["container"],
-  _excluded2 = ["font", "container"];
+var _excluded = ["fullText", "ellipsis", "availableWidth"];
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+function _get() { if (typeof Reflect !== "undefined" && Reflect.get) { _get = Reflect.get.bind(); } else { _get = function _get(target, property, receiver) { var base = _superPropBase(target, property); if (!base) return; var desc = Object.getOwnPropertyDescriptor(base, property); if (desc.get) { return desc.get.call(arguments.length < 3 ? target : receiver); } return desc.value; }; } return _get.apply(this, arguments); }
+function _superPropBase(object, property) { while (!Object.prototype.hasOwnProperty.call(object, property)) { object = _getPrototypeOf(object); if (object === null) break; } return object; }
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
 function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
 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); }; }
@@ -10,15 +17,9 @@ function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) ===
 function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
 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; } }
 function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
-function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
@@ -29,296 +30,273 @@ function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input ==
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * 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__*/_createClass(function _TruncationUtils(_ref) {
-  var _this = this;
-  var fullText = _ref.fullText,
-    ellipsis = _ref.ellipsis,
-    availableWidth = _ref.availableWidth;
-  _classCallCheck(this, _TruncationUtils);
-  _defineProperty(this, "fullText", void 0);
-  _defineProperty(this, "ellipsis", void 0);
-  _defineProperty(this, "availableWidth", void 0);
-  /**
-   * Early return checks
-   */
-  _defineProperty(this, "checkIfTruncationIsNeeded", function () {
-    _this.setTextToCheck(_this.fullText);
-    if (_this.availableWidth >= _this.textWidth) {
-      return false;
-    }
-  });
-  _defineProperty(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;
-    }
-  });
-  _defineProperty(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
-   */
-  _defineProperty(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 = _slicedToArray(_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();
-  });
-  _defineProperty(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 = _slicedToArray(_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();
-  });
-  _defineProperty(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 = _slicedToArray(_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();
-  });
-  _defineProperty(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();
-  });
-  _defineProperty(this, "truncateMiddle", function () {
-    var middlePosition = Math.floor(_this.fullText.length / 2);
-    var _splitText$at7 = splitText(_this.fullText).at(middlePosition),
-      _splitText$at8 = _slicedToArray(_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.
- */
-
-export var TruncationUtilsWithDOM = /*#__PURE__*/function (_TruncationUtils2) {
-  _inherits(TruncationUtilsWithDOM, _TruncationUtils2);
-  var _super = _createSuper(TruncationUtilsWithDOM);
-  function TruncationUtilsWithDOM(_ref2) {
-    var _this2;
-    var container = _ref2.container,
-      rest = _objectWithoutProperties(_ref2, _excluded);
-    _classCallCheck(this, TruncationUtilsWithDOM);
-    _this2 = _super.call(this, rest);
-    _defineProperty(_assertThisInitialized(_this2), "container", void 0);
-    _defineProperty(_assertThisInitialized(_this2), "span", void 0);
-    _defineProperty(_assertThisInitialized(_this2), "setTextToCheck", function (text) {
-      _this2.span.textContent = text;
-    });
-    _defineProperty(_assertThisInitialized(_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;
-  }
-  _createClass(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.
  */
-export var TruncationUtilsWithCanvas = /*#__PURE__*/function (_TruncationUtils3) {
-  _inherits(TruncationUtilsWithCanvas, _TruncationUtils3);
-  var _super2 = _createSuper(TruncationUtilsWithCanvas);
-  function TruncationUtilsWithCanvas(_ref3) {
-    var _this3;
-    var font = _ref3.font,
-      container = _ref3.container,
-      rest = _objectWithoutProperties(_ref3, _excluded2);
-    _classCallCheck(this, TruncationUtilsWithCanvas);
-    _this3 = _super2.call(this, rest);
-    _defineProperty(_assertThisInitialized(_this3), "context", void 0);
-    _defineProperty(_assertThisInitialized(_this3), "currentText", '');
-    _defineProperty(_assertThisInitialized(_this3), "computeFontFromElement", function (element) {
+export var CanvasTextUtils = /*#__PURE__*/function () {
+  function CanvasTextUtils(_ref) {
+    var _this = this;
+    var font = _ref.font,
+      container = _ref.container;
+    _classCallCheck(this, CanvasTextUtils);
+    _defineProperty(this, "context", void 0);
+    _defineProperty(this, "currentText", '');
+    _defineProperty(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();
     });
-    _defineProperty(_assertThisInitialized(_this3), "setTextToCheck", function (text) {
-      _this3.currentText = text;
+    _defineProperty(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;
   }
-  _createClass(TruncationUtilsWithCanvas, [{
+  _createClass(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.
+ */
+export var TruncationUtils = /*#__PURE__*/function (_CanvasTextUtils) {
+  _inherits(TruncationUtils, _CanvasTextUtils);
+  var _super = _createSuper(TruncationUtils);
+  function TruncationUtils(_ref2) {
+    var _this2;
+    var fullText = _ref2.fullText,
+      ellipsis = _ref2.ellipsis,
+      _availableWidth = _ref2.availableWidth,
+      rest = _objectWithoutProperties(_ref2, _excluded);
+    _classCallCheck(this, TruncationUtils);
+    _this2 = _super.call(this, rest);
+    _defineProperty(_assertThisInitialized(_this2), "fullText", void 0);
+    _defineProperty(_assertThisInitialized(_this2), "ellipsis", void 0);
+    _defineProperty(_assertThisInitialized(_this2), "availableWidth", void 0);
+    /**
+     * Performance utilities
+     */
+    _defineProperty(_assertThisInitialized(_this2), "debugPerformance", false);
+    _defineProperty(_assertThisInitialized(_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.
+     */
+    _defineProperty(_assertThisInitialized(_this2), "widthRatio", 0);
+    _defineProperty(_assertThisInitialized(_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;
+    });
+    _defineProperty(_assertThisInitialized(_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 = _slicedToArray(_splitText$at, 2),
+        end = _splitText$at2[0],
+        start = _splitText$at2[1];
+      return type === 'start' ? start : end;
+    });
+    /**
+     * Early return checks
+     */
+    _defineProperty(_assertThisInitialized(_this2), "checkIfTruncationIsNeeded", function () {
+      _this2.setTextToCheck(_this2.fullText);
+      if (_this2.availableWidth >= _this2.textWidth) {
+        return false;
+      }
+    });
+    _defineProperty(_assertThisInitialized(_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;
+      }
+    });
+    _defineProperty(_assertThisInitialized(_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
+     */
+    _defineProperty(_assertThisInitialized(_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 = _slicedToArray(_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();
+    });
+    _defineProperty(_assertThisInitialized(_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 = _slicedToArray(_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();
+    });
+    _defineProperty(_assertThisInitialized(_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();
+    });
+    _defineProperty(_assertThisInitialized(_this2), "truncateStartEndAtMiddle", function () {
+      var middlePosition = Math.floor(_this2.fullText.length / 2);
+      return _this2.truncateStartEndAtPosition(middlePosition);
+    });
+    _defineProperty(_assertThisInitialized(_this2), "truncateMiddle", function () {
+      var middlePosition = Math.floor(_this2.fullText.length / 2);
+      var _splitText$at7 = splitText(_this2.fullText).at(middlePosition),
+        _splitText$at8 = _slicedToArray(_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;
+  }
+  _createClass(TruncationUtils, [{
+    key: "textWidth",
+    get: function get() {
+      if (this.debugPerformance) {
+        this.debugCounter++;
+      }
+      return _get(_getPrototypeOf(TruncationUtils.prototype), "textWidth", this);
+    }
+  }]);
+  return TruncationUtils;
+}(CanvasTextUtils);
 
 /**
  * DRY character/substring utils
@@ -327,18 +305,9 @@ export var TruncationUtilsWithCanvas = /*#__PURE__*/function (_TruncationUtils3)
 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/es/components/timeline/timeline_item_icon.js

@@ -37,7 +37,7 @@ EuiTimelineItemIcon.propTypes = {
   /**
      * Any `ReactNode`, but preferably `EuiAvatar`, or a `string` as an `EuiIcon['type']`.
      */
-  icon: PropTypes.oneOfType([PropTypes.node.isRequired, PropTypes.oneOfType([PropTypes.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.string.isRequired, PropTypes.elementType.isRequired]).isRequired]).isRequired,
+  icon: PropTypes.oneOfType([PropTypes.node.isRequired, PropTypes.oneOfType([PropTypes.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.string.isRequired, PropTypes.elementType.isRequired]).isRequired]).isRequired,
   verticalAlign: PropTypes.any,
   /**
      * Specify an `aria-label` for the icon when passed as an `IconType`.