@elastic/eui 88.5.1 → 88.5.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (32) hide show
  1. package/es/components/combo_box/combo_box_input/combo_box_input.js +1 -2
  2. package/es/components/text_truncate/index.js +1 -1
  3. package/es/components/text_truncate/utils.js +88 -138
  4. package/es/services/canvas/canvas_text_utils.js +64 -0
  5. package/es/services/canvas/index.js +9 -0
  6. package/es/services/index.js +1 -0
  7. package/eui.d.ts +37 -27
  8. package/lib/components/combo_box/combo_box_input/combo_box_input.js +1 -2
  9. package/lib/components/text_truncate/index.js +0 -6
  10. package/lib/components/text_truncate/utils.js +97 -148
  11. package/lib/services/canvas/canvas_text_utils.js +70 -0
  12. package/lib/services/canvas/index.js +12 -0
  13. package/lib/services/index.js +8 -0
  14. package/optimize/es/components/combo_box/combo_box_input/combo_box_input.js +1 -2
  15. package/optimize/es/components/text_truncate/index.js +1 -1
  16. package/optimize/es/components/text_truncate/utils.js +87 -137
  17. package/optimize/es/services/canvas/canvas_text_utils.js +60 -0
  18. package/optimize/es/services/canvas/index.js +9 -0
  19. package/optimize/es/services/index.js +1 -0
  20. package/optimize/lib/components/combo_box/combo_box_input/combo_box_input.js +1 -2
  21. package/optimize/lib/components/text_truncate/index.js +0 -6
  22. package/optimize/lib/components/text_truncate/utils.js +96 -147
  23. package/optimize/lib/services/canvas/canvas_text_utils.js +67 -0
  24. package/optimize/lib/services/canvas/index.js +12 -0
  25. package/optimize/lib/services/index.js +8 -0
  26. package/package.json +1 -1
  27. package/test-env/components/combo_box/combo_box_input/combo_box_input.js +1 -2
  28. package/test-env/components/text_truncate/index.js +0 -6
  29. package/test-env/components/text_truncate/utils.js +232 -38
  30. package/test-env/services/canvas/canvas_text_utils.js +30 -0
  31. package/test-env/services/canvas/index.js +12 -0
  32. package/test-env/services/index.js +8 -0
@@ -1,12 +1,12 @@
1
1
  import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
2
2
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
3
+ import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
4
+ import _createClass from "@babel/runtime/helpers/createClass";
3
5
  import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
4
6
  import _get from "@babel/runtime/helpers/get";
5
7
  import _inherits from "@babel/runtime/helpers/inherits";
6
8
  import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
7
9
  import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
8
- import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
9
- import _createClass from "@babel/runtime/helpers/createClass";
10
10
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
11
11
  var _excluded = ["fullText", "ellipsis", "availableWidth"];
12
12
  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); }; }
@@ -19,57 +19,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
19
19
  * Side Public License, v 1.
20
20
  */
21
21
 
22
- /**
23
- * Under the hood, a temporary Canvas element is created for manipulating text
24
- * & determining text width.
25
- *
26
- * To accurately measure text, canvas rendering requires either a container to
27
- * compute/derive font styles from, or a static font string (useful for usage
28
- * outside the DOM). Particular care should be applied when fallback fonts are
29
- * used, as more fallback fonts can lead to less precision.
30
- *
31
- * Please note that while canvas is more significantly more performant than DOM
32
- * measurement, there are subpixel to single digit pixel differences between
33
- * DOM and canvas measurement due to the different rendering engines used.
34
- */
35
- export var CanvasTextUtils = /*#__PURE__*/function () {
36
- function CanvasTextUtils(_ref) {
37
- var _this = this;
38
- var font = _ref.font,
39
- container = _ref.container;
40
- _classCallCheck(this, CanvasTextUtils);
41
- _defineProperty(this, "context", void 0);
42
- _defineProperty(this, "currentText", '');
43
- _defineProperty(this, "computeFontFromElement", function (element) {
44
- var computedStyles = window.getComputedStyle(element);
45
- // TODO: font-stretch is not included even though it potentially should be
46
- // @see https://developer.mozilla.org/en-US/docs/Web/CSS/font#constituent_properties
47
- // It appears to be unsupported and/or breaks font computation in canvas
48
- return ['font-style', 'font-variant', 'font-weight', 'font-size', 'font-family'].map(function (prop) {
49
- return computedStyles.getPropertyValue(prop);
50
- }).join(' ').trim();
51
- });
52
- _defineProperty(this, "setTextToCheck", function (text) {
53
- _this.currentText = text;
54
- });
55
- this.context = document.createElement('canvas').getContext('2d');
56
-
57
- // Set the canvas font to ensure text width calculations are correct
58
- if (font) {
59
- this.context.font = font;
60
- } else if (container) {
61
- this.context.font = this.computeFontFromElement(container);
62
- }
63
- }
64
- _createClass(CanvasTextUtils, [{
65
- key: "textWidth",
66
- get: function get() {
67
- return this.context.measureText(this.currentText).width;
68
- }
69
- }]);
70
- return CanvasTextUtils;
71
- }();
72
-
22
+ import { CanvasTextUtils } from '../../services/canvas';
73
23
  /**
74
24
  * Utilities for truncating types at various positions, as well as
75
25
  * determining whether truncation is possible or even necessary.
@@ -77,22 +27,22 @@ export var CanvasTextUtils = /*#__PURE__*/function () {
77
27
  export var TruncationUtils = /*#__PURE__*/function (_CanvasTextUtils) {
78
28
  _inherits(TruncationUtils, _CanvasTextUtils);
79
29
  var _super = _createSuper(TruncationUtils);
80
- function TruncationUtils(_ref2) {
81
- var _this2;
82
- var fullText = _ref2.fullText,
83
- ellipsis = _ref2.ellipsis,
84
- _availableWidth = _ref2.availableWidth,
85
- rest = _objectWithoutProperties(_ref2, _excluded);
30
+ function TruncationUtils(_ref) {
31
+ var _this;
32
+ var fullText = _ref.fullText,
33
+ ellipsis = _ref.ellipsis,
34
+ _availableWidth = _ref.availableWidth,
35
+ rest = _objectWithoutProperties(_ref, _excluded);
86
36
  _classCallCheck(this, TruncationUtils);
87
- _this2 = _super.call(this, rest);
88
- _defineProperty(_assertThisInitialized(_this2), "fullText", void 0);
89
- _defineProperty(_assertThisInitialized(_this2), "ellipsis", void 0);
90
- _defineProperty(_assertThisInitialized(_this2), "availableWidth", void 0);
37
+ _this = _super.call(this, rest);
38
+ _defineProperty(_assertThisInitialized(_this), "fullText", void 0);
39
+ _defineProperty(_assertThisInitialized(_this), "ellipsis", void 0);
40
+ _defineProperty(_assertThisInitialized(_this), "availableWidth", void 0);
91
41
  /**
92
42
  * Performance utilities
93
43
  */
94
- _defineProperty(_assertThisInitialized(_this2), "debugPerformance", false);
95
- _defineProperty(_assertThisInitialized(_this2), "debugCounter", 0);
44
+ _defineProperty(_assertThisInitialized(_this), "debugPerformance", false);
45
+ _defineProperty(_assertThisInitialized(_this), "debugCounter", 0);
96
46
  /**
97
47
  * Internal utils for calculating a ratio based on the passed available width
98
48
  * vs the full text width.
@@ -100,21 +50,21 @@ export var TruncationUtils = /*#__PURE__*/function (_CanvasTextUtils) {
100
50
  * be slightly over the available width, which we can then remove from
101
51
  * character-by-character until the text just fits within the available width.
102
52
  */
103
- _defineProperty(_assertThisInitialized(_this2), "widthRatio", 0);
104
- _defineProperty(_assertThisInitialized(_this2), "setTextWidthRatio", function () {
105
- var text = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _this2.fullText;
53
+ _defineProperty(_assertThisInitialized(_this), "widthRatio", 0);
54
+ _defineProperty(_assertThisInitialized(_this), "setTextWidthRatio", function () {
55
+ var text = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _this.fullText;
106
56
  var textToOffset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
107
57
  // Account for reduced available width due to (e.g.) truncation offset
108
- var availableWidth = _this2.availableWidth;
58
+ var availableWidth = _this.availableWidth;
109
59
  if (textToOffset) {
110
- _this2.setTextToCheck(textToOffset);
111
- availableWidth = availableWidth - _this2.textWidth;
60
+ _this.setTextToCheck(textToOffset);
61
+ availableWidth = availableWidth - _this.textWidth;
112
62
  }
113
- _this2.setTextToCheck(text);
114
- _this2.widthRatio = availableWidth / _this2.textWidth;
63
+ _this.setTextToCheck(text);
64
+ _this.widthRatio = availableWidth / _this.textWidth;
115
65
  });
116
- _defineProperty(_assertThisInitialized(_this2), "getTextFromRatio", function (text, type) {
117
- var characterRatio = Math.ceil(text.length * _this2.widthRatio);
66
+ _defineProperty(_assertThisInitialized(_this), "getTextFromRatio", function (text, type) {
67
+ var characterRatio = Math.ceil(text.length * _this.widthRatio);
118
68
  var index = type === 'start' ? text.length - characterRatio : characterRatio;
119
69
  var _splitText$at = splitText(text).at(index),
120
70
  _splitText$at2 = _slicedToArray(_splitText$at, 2),
@@ -125,24 +75,24 @@ export var TruncationUtils = /*#__PURE__*/function (_CanvasTextUtils) {
125
75
  /**
126
76
  * Early return checks
127
77
  */
128
- _defineProperty(_assertThisInitialized(_this2), "checkIfTruncationIsNeeded", function () {
129
- _this2.setTextToCheck(_this2.fullText);
130
- if (_this2.availableWidth >= _this2.textWidth) {
78
+ _defineProperty(_assertThisInitialized(_this), "checkIfTruncationIsNeeded", function () {
79
+ _this.setTextToCheck(_this.fullText);
80
+ if (_this.availableWidth >= _this.textWidth) {
131
81
  return false;
132
82
  }
133
83
  });
134
- _defineProperty(_assertThisInitialized(_this2), "checkSufficientEllipsisWidth", function (truncation) {
135
- var textToCheck = truncation === 'startEnd' ? "".concat(_this2.ellipsis, " ").concat(_this2.ellipsis) // startEnd needs a little more space
136
- : _this2.ellipsis;
137
- _this2.setTextToCheck(textToCheck);
138
- if (_this2.textWidth >= _this2.availableWidth * 0.9) {
84
+ _defineProperty(_assertThisInitialized(_this), "checkSufficientEllipsisWidth", function (truncation) {
85
+ var textToCheck = truncation === 'startEnd' ? "".concat(_this.ellipsis, " ").concat(_this.ellipsis) // startEnd needs a little more space
86
+ : _this.ellipsis;
87
+ _this.setTextToCheck(textToCheck);
88
+ if (_this.textWidth >= _this.availableWidth * 0.9) {
139
89
  console.error('The truncation ellipsis is larger than the available width. No text can be rendered.');
140
90
  return false;
141
91
  }
142
92
  });
143
- _defineProperty(_assertThisInitialized(_this2), "checkTruncationOffsetWidth", function (text) {
144
- _this2.setTextToCheck(text);
145
- if (_this2.textWidth > _this2.availableWidth) {
93
+ _defineProperty(_assertThisInitialized(_this), "checkTruncationOffsetWidth", function (text) {
94
+ _this.setTextToCheck(text);
95
+ if (_this.textWidth > _this.availableWidth) {
146
96
  console.error('The passed truncationOffset is too large for the available width. Truncating the offset instead.');
147
97
  return false;
148
98
  }
@@ -150,19 +100,19 @@ export var TruncationUtils = /*#__PURE__*/function (_CanvasTextUtils) {
150
100
  /**
151
101
  * Truncation types logic. This is where the magic happens
152
102
  */
153
- _defineProperty(_assertThisInitialized(_this2), "truncateStart", function (truncationOffset) {
154
- var truncatedText = _this2.fullText;
103
+ _defineProperty(_assertThisInitialized(_this), "truncateStart", function (truncationOffset) {
104
+ var truncatedText = _this.fullText;
155
105
  var leadingText = '';
156
106
  var combinedText = function combinedText() {
157
107
  return leadingText + truncatedText;
158
108
  };
159
109
  if (truncationOffset) {
160
- var _splitText$at3 = splitText(_this2.fullText).at(truncationOffset);
110
+ var _splitText$at3 = splitText(_this.fullText).at(truncationOffset);
161
111
  var _splitText$at4 = _slicedToArray(_splitText$at3, 2);
162
112
  leadingText = _splitText$at4[0];
163
113
  truncatedText = _splitText$at4[1];
164
- var widthCheck = leadingText + _this2.ellipsis;
165
- if (_this2.checkTruncationOffsetWidth(widthCheck) === false) {
114
+ var widthCheck = leadingText + _this.ellipsis;
115
+ if (_this.checkTruncationOffsetWidth(widthCheck) === false) {
166
116
  truncatedText = leadingText;
167
117
  leadingText = '';
168
118
  }
@@ -170,30 +120,30 @@ export var TruncationUtils = /*#__PURE__*/function (_CanvasTextUtils) {
170
120
 
171
121
  // Get text width ratio width accounting for any truncation offset text,
172
122
  // and guesstimate an initial truncated string
173
- _this2.setTextWidthRatio(truncatedText, leadingText);
174
- truncatedText = _this2.getTextFromRatio(truncatedText, 'start');
175
- leadingText += _this2.ellipsis;
176
- _this2.setTextToCheck(combinedText());
177
- while (_this2.textWidth > _this2.availableWidth) {
123
+ _this.setTextWidthRatio(truncatedText, leadingText);
124
+ truncatedText = _this.getTextFromRatio(truncatedText, 'start');
125
+ leadingText += _this.ellipsis;
126
+ _this.setTextToCheck(combinedText());
127
+ while (_this.textWidth > _this.availableWidth) {
178
128
  truncatedText = removeFirstCharacter(truncatedText);
179
- _this2.setTextToCheck(combinedText());
129
+ _this.setTextToCheck(combinedText());
180
130
  }
181
131
  return combinedText();
182
132
  });
183
- _defineProperty(_assertThisInitialized(_this2), "truncateEnd", function (truncationOffset) {
184
- var truncatedText = _this2.fullText;
133
+ _defineProperty(_assertThisInitialized(_this), "truncateEnd", function (truncationOffset) {
134
+ var truncatedText = _this.fullText;
185
135
  var trailingText = '';
186
136
  var combinedText = function combinedText() {
187
137
  return truncatedText + trailingText;
188
138
  };
189
139
  if (truncationOffset) {
190
- var index = _this2.fullText.length - truncationOffset;
191
- var _splitText$at5 = splitText(_this2.fullText).at(index);
140
+ var index = _this.fullText.length - truncationOffset;
141
+ var _splitText$at5 = splitText(_this.fullText).at(index);
192
142
  var _splitText$at6 = _slicedToArray(_splitText$at5, 2);
193
143
  truncatedText = _splitText$at6[0];
194
144
  trailingText = _splitText$at6[1];
195
- var widthCheck = _this2.ellipsis + trailingText;
196
- if (_this2.checkTruncationOffsetWidth(widthCheck) === false) {
145
+ var widthCheck = _this.ellipsis + trailingText;
146
+ if (_this.checkTruncationOffsetWidth(widthCheck) === false) {
197
147
  truncatedText = trailingText;
198
148
  trailingText = '';
199
149
  }
@@ -201,78 +151,78 @@ export var TruncationUtils = /*#__PURE__*/function (_CanvasTextUtils) {
201
151
 
202
152
  // Get text width ratio width accounting for any truncation offset text,
203
153
  // and guesstimate an initial truncated string
204
- _this2.setTextWidthRatio(truncatedText, trailingText);
205
- truncatedText = _this2.getTextFromRatio(truncatedText, 'end');
206
- trailingText = _this2.ellipsis + trailingText;
207
- _this2.setTextToCheck(combinedText());
208
- while (_this2.textWidth > _this2.availableWidth) {
154
+ _this.setTextWidthRatio(truncatedText, trailingText);
155
+ truncatedText = _this.getTextFromRatio(truncatedText, 'end');
156
+ trailingText = _this.ellipsis + trailingText;
157
+ _this.setTextToCheck(combinedText());
158
+ while (_this.textWidth > _this.availableWidth) {
209
159
  truncatedText = removeLastCharacter(truncatedText);
210
- _this2.setTextToCheck(combinedText());
160
+ _this.setTextToCheck(combinedText());
211
161
  }
212
162
  return combinedText();
213
163
  });
214
- _defineProperty(_assertThisInitialized(_this2), "truncateStartEndAtPosition", function (truncationPosition) {
164
+ _defineProperty(_assertThisInitialized(_this), "truncateStartEndAtPosition", function (truncationPosition) {
215
165
  // Split the text from the anchor position, using the width ratio
216
166
  // to get the starting and ending indices from the position
217
- _this2.setTextWidthRatio();
218
- var characterRatio = Math.floor(_this2.fullText.length * _this2.widthRatio / 2);
167
+ _this.setTextWidthRatio();
168
+ var characterRatio = Math.floor(_this.fullText.length * _this.widthRatio / 2);
219
169
  var truncateStart = truncationPosition - characterRatio;
220
170
  var truncateEnd = truncationPosition + characterRatio;
221
171
 
222
172
  // If either of the approximate start/end truncation indices go beyond the
223
173
  // bounds of the actual text, we can simply use end or start truncation instead
224
174
  if (truncateStart < 0) {
225
- return _this2.truncateEnd();
175
+ return _this.truncateEnd();
226
176
  }
227
- if (truncateEnd >= _this2.fullText.length) {
228
- return _this2.truncateStart();
177
+ if (truncateEnd >= _this.fullText.length) {
178
+ return _this.truncateStart();
229
179
  }
230
- var truncatedText = _this2.fullText.substring(truncateStart, truncateEnd);
180
+ var truncatedText = _this.fullText.substring(truncateStart, truncateEnd);
231
181
  var combinedText = function combinedText() {
232
- return _this2.ellipsis + truncatedText + _this2.ellipsis;
182
+ return _this.ellipsis + truncatedText + _this.ellipsis;
233
183
  };
234
- _this2.setTextToCheck(combinedText());
184
+ _this.setTextToCheck(combinedText());
235
185
  var alternating;
236
- while (_this2.textWidth > _this2.availableWidth) {
186
+ while (_this.textWidth > _this.availableWidth) {
237
187
  truncatedText = alternating ? removeLastCharacter(truncatedText) : removeFirstCharacter(truncatedText);
238
188
  alternating = !alternating;
239
- _this2.setTextToCheck(combinedText());
189
+ _this.setTextToCheck(combinedText());
240
190
  }
241
191
  return combinedText();
242
192
  });
243
- _defineProperty(_assertThisInitialized(_this2), "truncateStartEndAtMiddle", function () {
244
- var middlePosition = Math.floor(_this2.fullText.length / 2);
245
- return _this2.truncateStartEndAtPosition(middlePosition);
193
+ _defineProperty(_assertThisInitialized(_this), "truncateStartEndAtMiddle", function () {
194
+ var middlePosition = Math.floor(_this.fullText.length / 2);
195
+ return _this.truncateStartEndAtPosition(middlePosition);
246
196
  });
247
- _defineProperty(_assertThisInitialized(_this2), "truncateMiddle", function () {
248
- var middlePosition = Math.floor(_this2.fullText.length / 2);
249
- var _splitText$at7 = splitText(_this2.fullText).at(middlePosition),
197
+ _defineProperty(_assertThisInitialized(_this), "truncateMiddle", function () {
198
+ var middlePosition = Math.floor(_this.fullText.length / 2);
199
+ var _splitText$at7 = splitText(_this.fullText).at(middlePosition),
250
200
  _splitText$at8 = _slicedToArray(_splitText$at7, 2),
251
201
  firstHalf = _splitText$at8[0],
252
202
  secondHalf = _splitText$at8[1];
253
- _this2.setTextWidthRatio();
254
- firstHalf = _this2.getTextFromRatio(firstHalf, 'end');
255
- secondHalf = _this2.getTextFromRatio(secondHalf, 'start');
203
+ _this.setTextWidthRatio();
204
+ firstHalf = _this.getTextFromRatio(firstHalf, 'end');
205
+ secondHalf = _this.getTextFromRatio(secondHalf, 'start');
256
206
  var combinedText = function combinedText() {
257
- return firstHalf + _this2.ellipsis + secondHalf;
207
+ return firstHalf + _this.ellipsis + secondHalf;
258
208
  };
259
- _this2.setTextToCheck(combinedText());
209
+ _this.setTextToCheck(combinedText());
260
210
  var alternating;
261
- while (_this2.textWidth > _this2.availableWidth) {
211
+ while (_this.textWidth > _this.availableWidth) {
262
212
  alternating = !alternating;
263
213
  if (alternating) {
264
214
  firstHalf = removeLastCharacter(firstHalf);
265
215
  } else {
266
216
  secondHalf = removeFirstCharacter(secondHalf);
267
217
  }
268
- _this2.setTextToCheck(combinedText());
218
+ _this.setTextToCheck(combinedText());
269
219
  }
270
220
  return combinedText();
271
221
  });
272
- _this2.fullText = fullText;
273
- _this2.ellipsis = ellipsis;
274
- _this2.availableWidth = _availableWidth;
275
- return _this2;
222
+ _this.fullText = fullText;
223
+ _this.ellipsis = ellipsis;
224
+ _this.availableWidth = _availableWidth;
225
+ return _this;
276
226
  }
277
227
  _createClass(TruncationUtils, [{
278
228
  key: "textWidth",
@@ -0,0 +1,60 @@
1
+ import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
2
+ import _createClass from "@babel/runtime/helpers/createClass";
3
+ import _defineProperty from "@babel/runtime/helpers/defineProperty";
4
+ /*
5
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
6
+ * or more contributor license agreements. Licensed under the Elastic License
7
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
8
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
9
+ * Side Public License, v 1.
10
+ */
11
+
12
+ /**
13
+ * Creates a temporary Canvas element for manipulating text & determining text width.
14
+ *
15
+ * To accurately measure text, canvas rendering requires either a container to
16
+ * compute/derive font styles from, or a static font string (useful for usage
17
+ * outside the DOM). Particular care should be applied when fallback fonts are
18
+ * used, as more fallback fonts can lead to less precision.
19
+ *
20
+ * Please note that while canvas is more significantly more performant than DOM
21
+ * measurement, there are subpixel to single digit pixel differences between
22
+ * DOM and canvas measurement due to the different rendering engines used.
23
+ */
24
+ export var CanvasTextUtils = /*#__PURE__*/function () {
25
+ function CanvasTextUtils(_ref) {
26
+ var _this = this;
27
+ var font = _ref.font,
28
+ container = _ref.container;
29
+ _classCallCheck(this, CanvasTextUtils);
30
+ _defineProperty(this, "context", void 0);
31
+ _defineProperty(this, "currentText", '');
32
+ _defineProperty(this, "computeFontFromElement", function (element) {
33
+ var computedStyles = window.getComputedStyle(element);
34
+ // TODO: font-stretch is not included even though it potentially should be
35
+ // @see https://developer.mozilla.org/en-US/docs/Web/CSS/font#constituent_properties
36
+ // It appears to be unsupported and/or breaks font computation in canvas
37
+ return ['font-style', 'font-variant', 'font-weight', 'font-size', 'font-family'].map(function (prop) {
38
+ return computedStyles.getPropertyValue(prop);
39
+ }).join(' ').trim();
40
+ });
41
+ _defineProperty(this, "setTextToCheck", function (text) {
42
+ _this.currentText = text;
43
+ });
44
+ this.context = document.createElement('canvas').getContext('2d');
45
+
46
+ // Set the canvas font to ensure text width calculations are correct
47
+ if (font) {
48
+ this.context.font = font;
49
+ } else if (container) {
50
+ this.context.font = this.computeFontFromElement(container);
51
+ }
52
+ }
53
+ _createClass(CanvasTextUtils, [{
54
+ key: "textWidth",
55
+ get: function get() {
56
+ return this.context.measureText(this.currentText).width;
57
+ }
58
+ }]);
59
+ return CanvasTextUtils;
60
+ }();
@@ -0,0 +1,9 @@
1
+ /*
2
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
3
+ * or more contributor license agreements. Licensed under the Elastic License
4
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
5
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
6
+ * Side Public License, v 1.
7
+ */
8
+
9
+ export { CanvasTextUtils } from './canvas_text_utils';
@@ -11,6 +11,7 @@ import * as keys from './keys';
11
11
  export { accessibleClickKeys, cascadingMenuKeys, comboBoxKeys, htmlIdGenerator, useGeneratedHtmlId } from './accessibility';
12
12
  export { CENTER_ALIGNMENT, LEFT_ALIGNMENT, RIGHT_ALIGNMENT } from './alignment';
13
13
  export { CurrentEuiBreakpointContext, CurrentEuiBreakpointProvider, useCurrentEuiBreakpoint, useIsWithinBreakpoints, useIsWithinMaxBreakpoint, useIsWithinMinBreakpoint } from './breakpoint';
14
+ export { CanvasTextUtils } from './canvas';
14
15
  export { brighten, calculateContrast, calculateLuminance, colorPalette, darken, DEFAULT_VISUALIZATION_COLOR, desaturate, euiPaletteColorBlind, euiPaletteColorBlindBehindText, euiPaletteComplimentary, euiPaletteComplementary, euiPaletteCool, euiPaletteForDarkBackground, euiPaletteForLightBackground, euiPaletteForStatus, euiPaletteForTemperature, euiPaletteGray, euiPaletteNegative, euiPalettePositive, euiPaletteWarm, getSteppedGradient, hexToHsv, hexToRgb, hsvToHex, hsvToRgb, isColorDark, isValidHex, lightness, makeDisabledContrastColor, makeHighContrastColor, rgbToHex, rgbToHsv, saturate, shade, shadeOrTint, tint, tintOrShade, transparentize, VISUALIZATION_COLORS, wcagContrastMin } from './color';
15
16
  export { useColorPickerState, useColorStopsState } from './color_picker';
16
17
  export * from './console';
@@ -19,7 +19,6 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
19
19
  var _react = _interopRequireWildcard(require("react"));
20
20
  var _classnames = _interopRequireDefault(require("classnames"));
21
21
  var _services = require("../../../services");
22
- var _text_truncate = require("../../text_truncate");
23
22
  var _accessibility = require("../../accessibility");
24
23
  var _form_control_layout = require("../../form/form_control_layout");
25
24
  var _num_icons = require("../../form/form_control_layout/_num_icons");
@@ -53,7 +52,7 @@ var EuiComboBoxInput = /*#__PURE__*/function (_Component) {
53
52
  (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "widthUtils", void 0);
54
53
  (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "inputRefCallback", function (el) {
55
54
  var _this$props$inputRef, _this$props;
56
- _this.widthUtils = new _text_truncate.CanvasTextUtils({
55
+ _this.widthUtils = new _services.CanvasTextUtils({
57
56
  container: el
58
57
  });
59
58
  (_this$props$inputRef = (_this$props = _this.props).inputRef) === null || _this$props$inputRef === void 0 ? void 0 : _this$props$inputRef.call(_this$props, el);
@@ -3,12 +3,6 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- Object.defineProperty(exports, "CanvasTextUtils", {
7
- enumerable: true,
8
- get: function get() {
9
- return _utils.CanvasTextUtils;
10
- }
11
- });
12
6
  Object.defineProperty(exports, "EuiTextTruncate", {
13
7
  enumerable: true,
14
8
  get: function get() {