@elastic/eui 88.5.0 → 88.5.1

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 (83) hide show
  1. package/dist/eui_theme_dark.css +8 -21
  2. package/dist/eui_theme_dark.min.css +1 -1
  3. package/dist/eui_theme_light.css +8 -21
  4. package/dist/eui_theme_light.min.css +1 -1
  5. package/es/components/collapsible_nav_beta/collapsible_nav_beta.js +20 -6
  6. package/es/components/collapsible_nav_beta/collapsible_nav_beta.styles.js +4 -14
  7. package/es/components/collapsible_nav_beta/collapsible_nav_body_footer.js +57 -0
  8. package/es/components/collapsible_nav_beta/collapsible_nav_body_footer.styles.js +25 -0
  9. package/es/components/collapsible_nav_beta/collapsible_nav_group/collapsible_nav_group.js +156 -0
  10. package/es/components/collapsible_nav_beta/collapsible_nav_group/collapsible_nav_group.styles.js +19 -0
  11. package/es/components/collapsible_nav_beta/collapsible_nav_group/index.js +9 -0
  12. package/es/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_button.js +3 -7
  13. package/es/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_item.js +3 -7
  14. package/es/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_popover.js +4 -8
  15. package/es/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_accordion.js +16 -63
  16. package/es/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_accordion.styles.js +2 -10
  17. package/es/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item.js +122 -41
  18. package/es/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item.styles.js +13 -3
  19. package/es/components/combo_box/combo_box.js +12 -25
  20. package/es/components/combo_box/combo_box_input/combo_box_input.js +61 -53
  21. package/eui.d.ts +149 -78
  22. package/i18ntokens.json +8 -8
  23. package/lib/components/collapsible_nav_beta/collapsible_nav_beta.js +20 -6
  24. package/lib/components/collapsible_nav_beta/collapsible_nav_beta.styles.js +11 -19
  25. package/lib/components/collapsible_nav_beta/collapsible_nav_body_footer.js +67 -0
  26. package/lib/components/collapsible_nav_beta/collapsible_nav_body_footer.styles.js +33 -0
  27. package/lib/components/collapsible_nav_beta/collapsible_nav_group/collapsible_nav_group.js +166 -0
  28. package/lib/components/collapsible_nav_beta/collapsible_nav_group/collapsible_nav_group.styles.js +26 -0
  29. package/lib/components/collapsible_nav_beta/collapsible_nav_group/index.js +12 -0
  30. package/lib/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_button.js +3 -7
  31. package/lib/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_item.js +3 -7
  32. package/lib/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_popover.js +4 -8
  33. package/lib/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_accordion.js +14 -61
  34. package/lib/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_accordion.styles.js +1 -9
  35. package/lib/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item.js +122 -39
  36. package/lib/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item.styles.js +13 -4
  37. package/lib/components/combo_box/combo_box.js +12 -25
  38. package/lib/components/combo_box/combo_box_input/combo_box_input.js +61 -53
  39. package/optimize/es/components/collapsible_nav_beta/collapsible_nav_beta.js +17 -3
  40. package/optimize/es/components/collapsible_nav_beta/collapsible_nav_beta.styles.js +4 -14
  41. package/optimize/es/components/collapsible_nav_beta/collapsible_nav_body_footer.js +56 -0
  42. package/optimize/es/components/collapsible_nav_beta/collapsible_nav_body_footer.styles.js +25 -0
  43. package/optimize/es/components/collapsible_nav_beta/collapsible_nav_group/collapsible_nav_group.js +48 -0
  44. package/optimize/es/components/collapsible_nav_beta/collapsible_nav_group/collapsible_nav_group.styles.js +19 -0
  45. package/optimize/es/components/collapsible_nav_beta/collapsible_nav_group/index.js +9 -0
  46. package/optimize/es/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_accordion.js +7 -33
  47. package/optimize/es/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_accordion.styles.js +2 -10
  48. package/optimize/es/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item.js +54 -21
  49. package/optimize/es/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item.styles.js +13 -3
  50. package/optimize/es/components/combo_box/combo_box.js +12 -25
  51. package/optimize/es/components/combo_box/combo_box_input/combo_box_input.js +61 -52
  52. package/optimize/lib/components/collapsible_nav_beta/collapsible_nav_beta.js +15 -1
  53. package/optimize/lib/components/collapsible_nav_beta/collapsible_nav_beta.styles.js +11 -19
  54. package/optimize/lib/components/collapsible_nav_beta/collapsible_nav_body_footer.js +66 -0
  55. package/optimize/lib/components/collapsible_nav_beta/collapsible_nav_body_footer.styles.js +33 -0
  56. package/optimize/lib/components/collapsible_nav_beta/collapsible_nav_group/collapsible_nav_group.js +58 -0
  57. package/optimize/lib/components/collapsible_nav_beta/collapsible_nav_group/collapsible_nav_group.styles.js +26 -0
  58. package/optimize/lib/components/collapsible_nav_beta/collapsible_nav_group/index.js +12 -0
  59. package/optimize/lib/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_accordion.js +5 -31
  60. package/optimize/lib/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_accordion.styles.js +1 -9
  61. package/optimize/lib/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item.js +54 -20
  62. package/optimize/lib/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item.styles.js +13 -4
  63. package/optimize/lib/components/combo_box/combo_box.js +12 -25
  64. package/optimize/lib/components/combo_box/combo_box_input/combo_box_input.js +61 -52
  65. package/package.json +2 -5
  66. package/src/components/combo_box/_combo_box.scss +12 -19
  67. package/test-env/components/collapsible_nav_beta/collapsible_nav_beta.js +20 -6
  68. package/test-env/components/collapsible_nav_beta/collapsible_nav_beta.styles.js +11 -19
  69. package/test-env/components/collapsible_nav_beta/collapsible_nav_body_footer.js +66 -0
  70. package/test-env/components/collapsible_nav_beta/collapsible_nav_body_footer.styles.js +33 -0
  71. package/test-env/components/collapsible_nav_beta/collapsible_nav_group/collapsible_nav_group.js +165 -0
  72. package/test-env/components/collapsible_nav_beta/collapsible_nav_group/collapsible_nav_group.styles.js +26 -0
  73. package/test-env/components/collapsible_nav_beta/collapsible_nav_group/index.js +12 -0
  74. package/test-env/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_button.js +3 -7
  75. package/test-env/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_item.js +3 -7
  76. package/test-env/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_popover.js +4 -8
  77. package/test-env/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_accordion.js +14 -61
  78. package/test-env/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_accordion.styles.js +1 -9
  79. package/test-env/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item.js +122 -39
  80. package/test-env/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item.styles.js +13 -4
  81. package/test-env/components/combo_box/combo_box.js +12 -25
  82. package/test-env/components/combo_box/combo_box_input/combo_box_input.js +61 -53
  83. package/test-env/components/text_truncate/utils.js +38 -283
@@ -19,8 +19,8 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
19
19
  var _react = _interopRequireWildcard(require("react"));
20
20
  var _propTypes = _interopRequireDefault(require("prop-types"));
21
21
  var _classnames = _interopRequireDefault(require("classnames"));
22
- var _reactInputAutosize = _interopRequireDefault(require("react-input-autosize"));
23
22
  var _services = require("../../../services");
23
+ var _text_truncate = require("../../text_truncate");
24
24
  var _accessibility = require("../../accessibility");
25
25
  var _form_control_layout = require("../../form/form_control_layout");
26
26
  var _num_icons = require("../../form/form_control_layout/_num_icons");
@@ -48,8 +48,27 @@ var EuiComboBoxInput = /*#__PURE__*/function (_Component) {
48
48
  }
49
49
  _this = _super.call.apply(_super, [this].concat(args));
50
50
  (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
51
+ inputWidth: 2,
51
52
  hasFocus: false
52
53
  });
54
+ (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "widthUtils", void 0);
55
+ (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "inputRefCallback", function (el) {
56
+ var _this$props$inputRef, _this$props;
57
+ _this.widthUtils = new _text_truncate.CanvasTextUtils({
58
+ container: el
59
+ });
60
+ (_this$props$inputRef = (_this$props = _this.props).inputRef) === null || _this$props$inputRef === void 0 ? void 0 : _this$props$inputRef.call(_this$props, el);
61
+ });
62
+ (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "updateInputSize", function (inputValue) {
63
+ if (!_this.widthUtils) return;
64
+ _this.widthUtils.setTextToCheck(inputValue);
65
+ // Canvas has minute subpixel differences in rendering compared to DOM
66
+ // We'll buffer the input by ~2px just to ensure sufficient width
67
+ var inputWidth = Math.ceil(_this.widthUtils.textWidth) + 2;
68
+ _this.setState({
69
+ inputWidth: inputWidth
70
+ });
71
+ });
53
72
  (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "updatePosition", function () {
54
73
  // Wait a beat for the DOM to update, since we depend on DOM elements' bounds.
55
74
  requestAnimationFrame(function () {
@@ -71,13 +90,13 @@ var EuiComboBoxInput = /*#__PURE__*/function (_Component) {
71
90
  });
72
91
  });
73
92
  (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onKeyDown", function (event) {
74
- var _this$props = _this.props,
75
- searchValue = _this$props.searchValue,
76
- selectedOptions = _this$props.selectedOptions,
77
- onRemoveOption = _this$props.onRemoveOption,
78
- singleSelection = _this$props.singleSelection,
79
- isListOpen = _this$props.isListOpen,
80
- onOpenListClick = _this$props.onOpenListClick;
93
+ var _this$props2 = _this.props,
94
+ searchValue = _this$props2.searchValue,
95
+ selectedOptions = _this$props2.selectedOptions,
96
+ onRemoveOption = _this$props2.onRemoveOption,
97
+ singleSelection = _this$props2.singleSelection,
98
+ isListOpen = _this$props2.isListOpen,
99
+ onOpenListClick = _this$props2.onOpenListClick;
81
100
 
82
101
  // When backspacing from an empty input, delete the last pill option in the list
83
102
  var searchIsEmpty = !searchValue.length;
@@ -90,18 +109,10 @@ var EuiComboBoxInput = /*#__PURE__*/function (_Component) {
90
109
  }
91
110
  });
92
111
  (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "inputOnChange", function (event) {
93
- var _this$props2 = _this.props,
94
- onChange = _this$props2.onChange,
95
- searchValue = _this$props2.searchValue;
96
- if (onChange) {
97
- onChange(event.target.value);
98
- }
99
- });
100
- (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "inputRefCallback", function (ref) {
101
- var autoSizeInputRef = _this.props.autoSizeInputRef;
102
- if (autoSizeInputRef) {
103
- autoSizeInputRef(ref);
104
- }
112
+ var _this$props$onChange, _this$props3;
113
+ var value = event.target.value;
114
+ _this.updateInputSize(value);
115
+ (_this$props$onChange = (_this$props3 = _this.props).onChange) === null || _this$props$onChange === void 0 ? void 0 : _this$props$onChange.call(_this$props3, value);
105
116
  });
106
117
  return _this;
107
118
  }
@@ -119,35 +130,34 @@ var EuiComboBoxInput = /*#__PURE__*/function (_Component) {
119
130
  }, {
120
131
  key: "render",
121
132
  value: function render() {
122
- var _this$props3 = this.props,
123
- compressed = _this$props3.compressed,
124
- focusedOptionId = _this$props3.focusedOptionId,
125
- fullWidth = _this$props3.fullWidth,
126
- hasSelectedOptions = _this$props3.hasSelectedOptions,
127
- id = _this$props3.id,
128
- inputRef = _this$props3.inputRef,
129
- isDisabled = _this$props3.isDisabled,
130
- isListOpen = _this$props3.isListOpen,
131
- noIcon = _this$props3.noIcon,
132
- onClear = _this$props3.onClear,
133
- onClick = _this$props3.onClick,
134
- onCloseListClick = _this$props3.onCloseListClick,
135
- onOpenListClick = _this$props3.onOpenListClick,
136
- onRemoveOption = _this$props3.onRemoveOption,
137
- placeholder = _this$props3.placeholder,
138
- rootId = _this$props3.rootId,
139
- searchValue = _this$props3.searchValue,
140
- selectedOptions = _this$props3.selectedOptions,
141
- singleSelectionProp = _this$props3.singleSelection,
142
- toggleButtonRef = _this$props3.toggleButtonRef,
143
- value = _this$props3.value,
144
- prepend = _this$props3.prepend,
145
- append = _this$props3.append,
146
- isLoading = _this$props3.isLoading,
147
- isInvalid = _this$props3.isInvalid,
148
- autoFocus = _this$props3.autoFocus,
149
- ariaLabel = _this$props3['aria-label'],
150
- ariaLabelledby = _this$props3['aria-labelledby'];
133
+ var _this$props4 = this.props,
134
+ compressed = _this$props4.compressed,
135
+ focusedOptionId = _this$props4.focusedOptionId,
136
+ fullWidth = _this$props4.fullWidth,
137
+ hasSelectedOptions = _this$props4.hasSelectedOptions,
138
+ id = _this$props4.id,
139
+ isDisabled = _this$props4.isDisabled,
140
+ isListOpen = _this$props4.isListOpen,
141
+ noIcon = _this$props4.noIcon,
142
+ onClear = _this$props4.onClear,
143
+ onClick = _this$props4.onClick,
144
+ onCloseListClick = _this$props4.onCloseListClick,
145
+ onOpenListClick = _this$props4.onOpenListClick,
146
+ onRemoveOption = _this$props4.onRemoveOption,
147
+ placeholder = _this$props4.placeholder,
148
+ rootId = _this$props4.rootId,
149
+ searchValue = _this$props4.searchValue,
150
+ selectedOptions = _this$props4.selectedOptions,
151
+ singleSelectionProp = _this$props4.singleSelection,
152
+ toggleButtonRef = _this$props4.toggleButtonRef,
153
+ value = _this$props4.value,
154
+ prepend = _this$props4.prepend,
155
+ append = _this$props4.append,
156
+ isLoading = _this$props4.isLoading,
157
+ isInvalid = _this$props4.isInvalid,
158
+ autoFocus = _this$props4.autoFocus,
159
+ ariaLabel = _this$props4['aria-label'],
160
+ ariaLabelledby = _this$props4['aria-labelledby'];
151
161
  var singleSelection = Boolean(singleSelectionProp);
152
162
  var asPlainText = singleSelectionProp && (0, _typeof2.default)(singleSelectionProp) === 'object' && singleSelectionProp.asPlainText || false;
153
163
  var pills = selectedOptions ? selectedOptions.map(function (option) {
@@ -239,7 +249,7 @@ var EuiComboBoxInput = /*#__PURE__*/function (_Component) {
239
249
  "data-test-subj": "comboBoxInput",
240
250
  onClick: onClick,
241
251
  tabIndex: -1 // becomes onBlur event's relatedTarget, otherwise relatedTarget is null when clicking on this div
242
- }, !singleSelection || !searchValue ? pills : null, placeholderMessage, (0, _react2.jsx)(_reactInputAutosize.default, {
252
+ }, !singleSelection || !searchValue ? pills : null, placeholderMessage, (0, _react2.jsx)("input", {
243
253
  "aria-activedescendant": focusedOptionId,
244
254
  "aria-autocomplete": "list",
245
255
  "aria-controls": isListOpen ? rootId('listbox') : '',
@@ -251,7 +261,6 @@ var EuiComboBoxInput = /*#__PURE__*/function (_Component) {
251
261
  "data-test-subj": "comboBoxSearchInput",
252
262
  disabled: isDisabled,
253
263
  id: id,
254
- inputRef: inputRef,
255
264
  onBlur: this.onBlur,
256
265
  onChange: this.inputOnChange,
257
266
  onFocus: this.onFocus,
@@ -259,7 +268,7 @@ var EuiComboBoxInput = /*#__PURE__*/function (_Component) {
259
268
  ref: this.inputRefCallback,
260
269
  role: "combobox",
261
270
  style: {
262
- fontSize: 14
271
+ inlineSize: this.state.inputWidth
263
272
  },
264
273
  value: searchValue,
265
274
  autoFocus: autoFocus
@@ -270,7 +279,6 @@ var EuiComboBoxInput = /*#__PURE__*/function (_Component) {
270
279
  }(_react.Component);
271
280
  exports.EuiComboBoxInput = EuiComboBoxInput;
272
281
  EuiComboBoxInput.propTypes = {
273
- autoSizeInputRef: _propTypes.default.any,
274
282
  compressed: _propTypes.default.bool.isRequired,
275
283
  focusedOptionId: _propTypes.default.string,
276
284
  fullWidth: _propTypes.default.bool,
@@ -5,306 +5,61 @@ Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
7
  exports.TruncationUtils = exports.CanvasTextUtils = void 0;
8
- var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
9
- var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
10
8
  var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
11
- var _get2 = _interopRequireDefault(require("@babel/runtime/helpers/get"));
12
9
  var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
13
10
  var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
14
11
  var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
15
- var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
16
12
  var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
13
+ var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
17
14
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
18
- var _excluded = ["fullText", "ellipsis", "availableWidth"];
15
+ var _utils = require("./utils");
19
16
  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); }; }
20
- 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; } }
21
- /*
22
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
23
- * or more contributor license agreements. Licensed under the Elastic License
24
- * 2.0 and the Server Side Public License, v 1; you may not use this file except
25
- * in compliance with, at your election, the Elastic License 2.0 or the Server
26
- * Side Public License, v 1.
27
- */
28
- /**
29
- * Under the hood, a temporary Canvas element is created for manipulating text
30
- * & determining text width.
31
- *
32
- * To accurately measure text, canvas rendering requires either a container to
33
- * compute/derive font styles from, or a static font string (useful for usage
34
- * outside the DOM). Particular care should be applied when fallback fonts are
35
- * used, as more fallback fonts can lead to less precision.
36
- *
37
- * Please note that while canvas is more significantly more performant than DOM
38
- * measurement, there are subpixel to single digit pixel differences between
39
- * DOM and canvas measurement due to the different rendering engines used.
40
- */
41
- var CanvasTextUtils = /*#__PURE__*/function () {
42
- function CanvasTextUtils(_ref) {
43
- var _this = this;
44
- var font = _ref.font,
45
- container = _ref.container;
46
- (0, _classCallCheck2.default)(this, CanvasTextUtils);
47
- (0, _defineProperty2.default)(this, "context", void 0);
48
- (0, _defineProperty2.default)(this, "currentText", '');
49
- (0, _defineProperty2.default)(this, "computeFontFromElement", function (element) {
50
- var computedStyles = window.getComputedStyle(element);
51
- // TODO: font-stretch is not included even though it potentially should be
52
- // @see https://developer.mozilla.org/en-US/docs/Web/CSS/font#constituent_properties
53
- // It appears to be unsupported and/or breaks font computation in canvas
54
- return ['font-style', 'font-variant', 'font-weight', 'font-size', 'font-family'].map(function (prop) {
55
- return computedStyles.getPropertyValue(prop);
56
- }).join(' ').trim();
57
- });
58
- (0, _defineProperty2.default)(this, "setTextToCheck", function (text) {
59
- _this.currentText = text;
60
- });
61
- this.context = document.createElement('canvas').getContext('2d');
62
-
63
- // Set the canvas font to ensure text width calculations are correct
64
- if (font) {
65
- this.context.font = font;
66
- } else if (container) {
67
- this.context.font = this.computeFontFromElement(container);
68
- }
69
- }
70
- (0, _createClass2.default)(CanvasTextUtils, [{
71
- key: "textWidth",
72
- get: function get() {
73
- return this.context.measureText(this.currentText).width;
74
- }
75
- }]);
76
- return CanvasTextUtils;
77
- }();
78
- /**
79
- * Utilities for truncating types at various positions, as well as
80
- * determining whether truncation is possible or even necessary.
81
- */
17
+ 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; } } /*
18
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
19
+ * or more contributor license agreements. Licensed under the Elastic License
20
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
21
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
22
+ * Side Public License, v 1.
23
+ */
24
+ var CanvasTextUtils = /*#__PURE__*/(0, _createClass2.default)(function CanvasTextUtils(_) {
25
+ var _this = this;
26
+ (0, _classCallCheck2.default)(this, CanvasTextUtils);
27
+ (0, _defineProperty2.default)(this, "computeFontFromElement", function (_) {
28
+ return '';
29
+ });
30
+ (0, _defineProperty2.default)(this, "textWidth", 0);
31
+ (0, _defineProperty2.default)(this, "currentText", '');
32
+ (0, _defineProperty2.default)(this, "setTextToCheck", function (text) {
33
+ _this.currentText = text;
34
+ });
35
+ });
82
36
  exports.CanvasTextUtils = CanvasTextUtils;
83
- var TruncationUtils = /*#__PURE__*/function (_CanvasTextUtils) {
84
- (0, _inherits2.default)(TruncationUtils, _CanvasTextUtils);
37
+ var TruncationUtils = /*#__PURE__*/function (_TruncationUtils2) {
38
+ (0, _inherits2.default)(TruncationUtils, _TruncationUtils2);
85
39
  var _super = _createSuper(TruncationUtils);
86
- function TruncationUtils(_ref2) {
40
+ function TruncationUtils(props) {
87
41
  var _this2;
88
- var fullText = _ref2.fullText,
89
- ellipsis = _ref2.ellipsis,
90
- _availableWidth = _ref2.availableWidth,
91
- rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
92
42
  (0, _classCallCheck2.default)(this, TruncationUtils);
93
- _this2 = _super.call(this, rest);
94
- (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this2), "fullText", void 0);
95
- (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this2), "ellipsis", void 0);
96
- (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this2), "availableWidth", void 0);
97
- /**
98
- * Performance utilities
99
- */
100
- (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this2), "debugPerformance", false);
101
- (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this2), "debugCounter", 0);
102
- /**
103
- * Internal utils for calculating a ratio based on the passed available width
104
- * vs the full text width.
105
- * This ratio is used to get an initial _approximate_ text string that should
106
- * be slightly over the available width, which we can then remove from
107
- * character-by-character until the text just fits within the available width.
108
- */
109
- (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this2), "widthRatio", 0);
110
- (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this2), "setTextWidthRatio", function () {
111
- var text = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _this2.fullText;
112
- var textToOffset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
113
- // Account for reduced available width due to (e.g.) truncation offset
114
- var availableWidth = _this2.availableWidth;
115
- if (textToOffset) {
116
- _this2.setTextToCheck(textToOffset);
117
- availableWidth = availableWidth - _this2.textWidth;
118
- }
119
- _this2.setTextToCheck(text);
120
- _this2.widthRatio = availableWidth / _this2.textWidth;
121
- });
122
- (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this2), "getTextFromRatio", function (text, type) {
123
- var characterRatio = Math.ceil(text.length * _this2.widthRatio);
124
- var index = type === 'start' ? text.length - characterRatio : characterRatio;
125
- var _splitText$at = splitText(text).at(index),
126
- _splitText$at2 = (0, _slicedToArray2.default)(_splitText$at, 2),
127
- end = _splitText$at2[0],
128
- start = _splitText$at2[1];
129
- return type === 'start' ? start : end;
43
+ _this2 = _super.call(this, props);
44
+ // Jest perf optimization - since there's no meaningful truncation we can make
45
+ // without meaningful width calculations, just return the full untruncated text
46
+ (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this2), "truncateStart", function (_) {
47
+ return _this2.fullText;
130
48
  });
131
- /**
132
- * Early return checks
133
- */
134
- (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this2), "checkIfTruncationIsNeeded", function () {
135
- _this2.setTextToCheck(_this2.fullText);
136
- if (_this2.availableWidth >= _this2.textWidth) {
137
- return false;
138
- }
49
+ (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this2), "truncateEnd", function (_) {
50
+ return _this2.fullText;
139
51
  });
140
- (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this2), "checkSufficientEllipsisWidth", function (truncation) {
141
- var textToCheck = truncation === 'startEnd' ? "".concat(_this2.ellipsis, " ").concat(_this2.ellipsis) // startEnd needs a little more space
142
- : _this2.ellipsis;
143
- _this2.setTextToCheck(textToCheck);
144
- if (_this2.textWidth >= _this2.availableWidth * 0.9) {
145
- console.error('The truncation ellipsis is larger than the available width. No text can be rendered.');
146
- return false;
147
- }
148
- });
149
- (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this2), "checkTruncationOffsetWidth", function (text) {
150
- _this2.setTextToCheck(text);
151
- if (_this2.textWidth > _this2.availableWidth) {
152
- console.error('The passed truncationOffset is too large for the available width. Truncating the offset instead.');
153
- return false;
154
- }
155
- });
156
- /**
157
- * Truncation types logic. This is where the magic happens
158
- */
159
- (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this2), "truncateStart", function (truncationOffset) {
160
- var truncatedText = _this2.fullText;
161
- var leadingText = '';
162
- var combinedText = function combinedText() {
163
- return leadingText + truncatedText;
164
- };
165
- if (truncationOffset) {
166
- var _splitText$at3 = splitText(_this2.fullText).at(truncationOffset);
167
- var _splitText$at4 = (0, _slicedToArray2.default)(_splitText$at3, 2);
168
- leadingText = _splitText$at4[0];
169
- truncatedText = _splitText$at4[1];
170
- var widthCheck = leadingText + _this2.ellipsis;
171
- if (_this2.checkTruncationOffsetWidth(widthCheck) === false) {
172
- truncatedText = leadingText;
173
- leadingText = '';
174
- }
175
- }
176
-
177
- // Get text width ratio width accounting for any truncation offset text,
178
- // and guesstimate an initial truncated string
179
- _this2.setTextWidthRatio(truncatedText, leadingText);
180
- truncatedText = _this2.getTextFromRatio(truncatedText, 'start');
181
- leadingText += _this2.ellipsis;
182
- _this2.setTextToCheck(combinedText());
183
- while (_this2.textWidth > _this2.availableWidth) {
184
- truncatedText = removeFirstCharacter(truncatedText);
185
- _this2.setTextToCheck(combinedText());
186
- }
187
- return combinedText();
188
- });
189
- (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this2), "truncateEnd", function (truncationOffset) {
190
- var truncatedText = _this2.fullText;
191
- var trailingText = '';
192
- var combinedText = function combinedText() {
193
- return truncatedText + trailingText;
194
- };
195
- if (truncationOffset) {
196
- var index = _this2.fullText.length - truncationOffset;
197
- var _splitText$at5 = splitText(_this2.fullText).at(index);
198
- var _splitText$at6 = (0, _slicedToArray2.default)(_splitText$at5, 2);
199
- truncatedText = _splitText$at6[0];
200
- trailingText = _splitText$at6[1];
201
- var widthCheck = _this2.ellipsis + trailingText;
202
- if (_this2.checkTruncationOffsetWidth(widthCheck) === false) {
203
- truncatedText = trailingText;
204
- trailingText = '';
205
- }
206
- }
207
-
208
- // Get text width ratio width accounting for any truncation offset text,
209
- // and guesstimate an initial truncated string
210
- _this2.setTextWidthRatio(truncatedText, trailingText);
211
- truncatedText = _this2.getTextFromRatio(truncatedText, 'end');
212
- trailingText = _this2.ellipsis + trailingText;
213
- _this2.setTextToCheck(combinedText());
214
- while (_this2.textWidth > _this2.availableWidth) {
215
- truncatedText = removeLastCharacter(truncatedText);
216
- _this2.setTextToCheck(combinedText());
217
- }
218
- return combinedText();
219
- });
220
- (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this2), "truncateStartEndAtPosition", function (truncationPosition) {
221
- // Split the text from the anchor position, using the width ratio
222
- // to get the starting and ending indices from the position
223
- _this2.setTextWidthRatio();
224
- var characterRatio = Math.floor(_this2.fullText.length * _this2.widthRatio / 2);
225
- var truncateStart = truncationPosition - characterRatio;
226
- var truncateEnd = truncationPosition + characterRatio;
227
-
228
- // If either of the approximate start/end truncation indices go beyond the
229
- // bounds of the actual text, we can simply use end or start truncation instead
230
- if (truncateStart < 0) {
231
- return _this2.truncateEnd();
232
- }
233
- if (truncateEnd >= _this2.fullText.length) {
234
- return _this2.truncateStart();
235
- }
236
- var truncatedText = _this2.fullText.substring(truncateStart, truncateEnd);
237
- var combinedText = function combinedText() {
238
- return _this2.ellipsis + truncatedText + _this2.ellipsis;
239
- };
240
- _this2.setTextToCheck(combinedText());
241
- var alternating;
242
- while (_this2.textWidth > _this2.availableWidth) {
243
- truncatedText = alternating ? removeLastCharacter(truncatedText) : removeFirstCharacter(truncatedText);
244
- alternating = !alternating;
245
- _this2.setTextToCheck(combinedText());
246
- }
247
- return combinedText();
52
+ (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this2), "truncateStartEndAtPosition", function (_) {
53
+ return _this2.fullText;
248
54
  });
249
55
  (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this2), "truncateStartEndAtMiddle", function () {
250
- var middlePosition = Math.floor(_this2.fullText.length / 2);
251
- return _this2.truncateStartEndAtPosition(middlePosition);
56
+ return _this2.fullText;
252
57
  });
253
58
  (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this2), "truncateMiddle", function () {
254
- var middlePosition = Math.floor(_this2.fullText.length / 2);
255
- var _splitText$at7 = splitText(_this2.fullText).at(middlePosition),
256
- _splitText$at8 = (0, _slicedToArray2.default)(_splitText$at7, 2),
257
- firstHalf = _splitText$at8[0],
258
- secondHalf = _splitText$at8[1];
259
- _this2.setTextWidthRatio();
260
- firstHalf = _this2.getTextFromRatio(firstHalf, 'end');
261
- secondHalf = _this2.getTextFromRatio(secondHalf, 'start');
262
- var combinedText = function combinedText() {
263
- return firstHalf + _this2.ellipsis + secondHalf;
264
- };
265
- _this2.setTextToCheck(combinedText());
266
- var alternating;
267
- while (_this2.textWidth > _this2.availableWidth) {
268
- alternating = !alternating;
269
- if (alternating) {
270
- firstHalf = removeLastCharacter(firstHalf);
271
- } else {
272
- secondHalf = removeFirstCharacter(secondHalf);
273
- }
274
- _this2.setTextToCheck(combinedText());
275
- }
276
- return combinedText();
59
+ return _this2.fullText;
277
60
  });
278
- _this2.fullText = fullText;
279
- _this2.ellipsis = ellipsis;
280
- _this2.availableWidth = _availableWidth;
281
61
  return _this2;
282
62
  }
283
- (0, _createClass2.default)(TruncationUtils, [{
284
- key: "textWidth",
285
- get: function get() {
286
- if (this.debugPerformance) {
287
- this.debugCounter++;
288
- }
289
- return (0, _get2.default)((0, _getPrototypeOf2.default)(TruncationUtils.prototype), "textWidth", this);
290
- }
291
- }]);
292
- return TruncationUtils;
293
- }(CanvasTextUtils);
294
- /**
295
- * DRY character/substring utils
296
- */
297
- exports.TruncationUtils = TruncationUtils;
298
- var removeLastCharacter = function removeLastCharacter(text) {
299
- return text.substring(0, text.length - 1);
300
- };
301
- var removeFirstCharacter = function removeFirstCharacter(text) {
302
- return text.substring(1);
303
- };
304
- var splitText = function splitText(text) {
305
- return {
306
- at: function at(index) {
307
- return [text.substring(0, index), text.substring(index)];
308
- }
309
- };
310
- };
63
+ return (0, _createClass2.default)(TruncationUtils);
64
+ }(_utils.TruncationUtils);
65
+ exports.TruncationUtils = TruncationUtils;