@elastic/eui 88.5.2 → 88.5.3

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.
@@ -104,56 +104,51 @@ export var EuiComboBoxInput = /*#__PURE__*/function (_Component) {
104
104
  }
105
105
  }
106
106
  });
107
- _defineProperty(_assertThisInitialized(_this), "inputOnChange", function (event) {
108
- var _this$props$onChange, _this$props3;
109
- var value = event.target.value;
110
- _this.updateInputSize(value);
111
- (_this$props$onChange = (_this$props3 = _this.props).onChange) === null || _this$props$onChange === void 0 ? void 0 : _this$props$onChange.call(_this$props3, value);
112
- });
113
107
  return _this;
114
108
  }
115
109
  _createClass(EuiComboBoxInput, [{
116
110
  key: "componentDidUpdate",
117
111
  value: function componentDidUpdate(prevProps) {
118
- var searchValue = prevProps.searchValue;
112
+ if (prevProps.searchValue !== this.props.searchValue) {
113
+ this.updateInputSize(this.props.searchValue);
119
114
 
120
- // We need to update the position of everything if the user enters enough input to change
121
- // the size of the input.
122
- if (searchValue !== this.props.searchValue) {
115
+ // We need to update the position of everything if the user enters enough input to change
116
+ // the size of the input.
123
117
  this.updatePosition();
124
118
  }
125
119
  }
126
120
  }, {
127
121
  key: "render",
128
122
  value: function render() {
129
- var _this$props4 = this.props,
130
- compressed = _this$props4.compressed,
131
- focusedOptionId = _this$props4.focusedOptionId,
132
- fullWidth = _this$props4.fullWidth,
133
- hasSelectedOptions = _this$props4.hasSelectedOptions,
134
- id = _this$props4.id,
135
- isDisabled = _this$props4.isDisabled,
136
- isListOpen = _this$props4.isListOpen,
137
- noIcon = _this$props4.noIcon,
138
- onClear = _this$props4.onClear,
139
- onClick = _this$props4.onClick,
140
- onCloseListClick = _this$props4.onCloseListClick,
141
- onOpenListClick = _this$props4.onOpenListClick,
142
- onRemoveOption = _this$props4.onRemoveOption,
143
- placeholder = _this$props4.placeholder,
144
- rootId = _this$props4.rootId,
145
- searchValue = _this$props4.searchValue,
146
- selectedOptions = _this$props4.selectedOptions,
147
- singleSelectionProp = _this$props4.singleSelection,
148
- toggleButtonRef = _this$props4.toggleButtonRef,
149
- value = _this$props4.value,
150
- prepend = _this$props4.prepend,
151
- append = _this$props4.append,
152
- isLoading = _this$props4.isLoading,
153
- isInvalid = _this$props4.isInvalid,
154
- autoFocus = _this$props4.autoFocus,
155
- ariaLabel = _this$props4['aria-label'],
156
- ariaLabelledby = _this$props4['aria-labelledby'];
123
+ var _this$props3 = this.props,
124
+ compressed = _this$props3.compressed,
125
+ focusedOptionId = _this$props3.focusedOptionId,
126
+ fullWidth = _this$props3.fullWidth,
127
+ hasSelectedOptions = _this$props3.hasSelectedOptions,
128
+ id = _this$props3.id,
129
+ isDisabled = _this$props3.isDisabled,
130
+ isListOpen = _this$props3.isListOpen,
131
+ noIcon = _this$props3.noIcon,
132
+ _onChange = _this$props3.onChange,
133
+ onClear = _this$props3.onClear,
134
+ onClick = _this$props3.onClick,
135
+ onCloseListClick = _this$props3.onCloseListClick,
136
+ onOpenListClick = _this$props3.onOpenListClick,
137
+ onRemoveOption = _this$props3.onRemoveOption,
138
+ placeholder = _this$props3.placeholder,
139
+ rootId = _this$props3.rootId,
140
+ searchValue = _this$props3.searchValue,
141
+ selectedOptions = _this$props3.selectedOptions,
142
+ singleSelectionProp = _this$props3.singleSelection,
143
+ toggleButtonRef = _this$props3.toggleButtonRef,
144
+ value = _this$props3.value,
145
+ prepend = _this$props3.prepend,
146
+ append = _this$props3.append,
147
+ isLoading = _this$props3.isLoading,
148
+ isInvalid = _this$props3.isInvalid,
149
+ autoFocus = _this$props3.autoFocus,
150
+ ariaLabel = _this$props3['aria-label'],
151
+ ariaLabelledby = _this$props3['aria-labelledby'];
157
152
  var singleSelection = Boolean(singleSelectionProp);
158
153
  var asPlainText = singleSelectionProp && _typeof(singleSelectionProp) === 'object' && singleSelectionProp.asPlainText || false;
159
154
  var pills = selectedOptions ? selectedOptions.map(function (option) {
@@ -258,7 +253,9 @@ export var EuiComboBoxInput = /*#__PURE__*/function (_Component) {
258
253
  disabled: isDisabled,
259
254
  id: id,
260
255
  onBlur: this.onBlur,
261
- onChange: this.inputOnChange,
256
+ onChange: function onChange(event) {
257
+ return _onChange(event.target.value);
258
+ },
262
259
  onFocus: this.onFocus,
263
260
  onKeyDown: this.onKeyDown,
264
261
  ref: this.inputRefCallback,
@@ -284,9 +281,9 @@ EuiComboBoxInput.propTypes = {
284
281
  isListOpen: PropTypes.bool.isRequired,
285
282
  noIcon: PropTypes.bool.isRequired,
286
283
  onBlur: PropTypes.any,
287
- onChange: PropTypes.func,
284
+ onChange: PropTypes.func.isRequired,
288
285
  onClear: PropTypes.func,
289
- onClick: PropTypes.func,
286
+ onClick: PropTypes.func.isRequired,
290
287
  onCloseListClick: PropTypes.func.isRequired,
291
288
  onFocus: PropTypes.any.isRequired,
292
289
  onOpenListClick: PropTypes.func.isRequired,
@@ -1,4 +1,4 @@
1
- var _excluded = ["width"],
1
+ var _excluded = ["width", "onResize"],
2
2
  _excluded2 = ["width", "children", "text", "truncation", "truncationOffset", "truncationPosition", "ellipsis", "containerRef", "className"],
3
3
  _excluded3 = ["onResize"];
4
4
  function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
@@ -29,10 +29,13 @@ import { jsx as ___EmotionJSX } from "@emotion/react";
29
29
  var TRUNCATION_TYPES = ['end', 'start', 'startEnd', 'middle'];
30
30
  export var EuiTextTruncate = function EuiTextTruncate(_ref) {
31
31
  var width = _ref.width,
32
+ onResize = _ref.onResize,
32
33
  props = _objectWithoutProperties(_ref, _excluded);
33
34
  return width != null ? ___EmotionJSX(EuiTextTruncateWithWidth, _extends({
34
35
  width: width
35
- }, props)) : ___EmotionJSX(EuiTextTruncateWithResizeObserver, props);
36
+ }, props)) : ___EmotionJSX(EuiTextTruncateWithResizeObserver, _extends({
37
+ onResize: onResize
38
+ }, props));
36
39
  };
37
40
  EuiTextTruncate.propTypes = {
38
41
  className: PropTypes.string,
package/eui.d.ts CHANGED
@@ -11690,7 +11690,7 @@ declare module '@elastic/eui/src/components/combo_box/combo_box_input/combo_box_
11690
11690
 
11691
11691
  }
11692
11692
  declare module '@elastic/eui/src/components/combo_box/combo_box_input/combo_box_input' {
11693
- import React, { Component, ChangeEventHandler, FocusEventHandler, KeyboardEventHandler, RefCallback } from 'react';
11693
+ import React, { Component, FocusEventHandler, KeyboardEventHandler, RefCallback } from 'react';
11694
11694
  import { CommonProps } from '@elastic/eui/src/components/common';
11695
11695
  import { htmlIdGenerator } from '@elastic/eui/src/services';
11696
11696
  import { EuiFormControlLayoutProps } from '@elastic/eui/src/components/form/form_control_layout';
@@ -11706,9 +11706,9 @@ declare module '@elastic/eui/src/components/combo_box/combo_box_input/combo_box_
11706
11706
  isListOpen: boolean;
11707
11707
  noIcon: boolean;
11708
11708
  onBlur?: FocusEventHandler<HTMLInputElement>;
11709
- onChange?: (searchValue: string) => void;
11709
+ onChange: (searchValue: string) => void;
11710
11710
  onClear?: () => void;
11711
- onClick?: () => void;
11711
+ onClick: () => void;
11712
11712
  onCloseListClick: () => void;
11713
11713
  onFocus: FocusEventHandler<HTMLInputElement>;
11714
11714
  onOpenListClick: () => void;
@@ -11743,7 +11743,6 @@ declare module '@elastic/eui/src/components/combo_box/combo_box_input/combo_box_
11743
11743
  onBlur: FocusEventHandler<HTMLInputElement>;
11744
11744
  onKeyDown: KeyboardEventHandler<HTMLInputElement>;
11745
11745
  componentDidUpdate(prevProps: EuiComboBoxInputProps<T>): void;
11746
- inputOnChange: ChangeEventHandler<HTMLInputElement>;
11747
11746
  render(): React.JSX.Element;
11748
11747
  }
11749
11748
  export {};
@@ -111,56 +111,51 @@ var EuiComboBoxInput = /*#__PURE__*/function (_Component) {
111
111
  }
112
112
  }
113
113
  });
114
- _defineProperty(_assertThisInitialized(_this), "inputOnChange", function (event) {
115
- var _this$props$onChange, _this$props3;
116
- var value = event.target.value;
117
- _this.updateInputSize(value);
118
- (_this$props$onChange = (_this$props3 = _this.props).onChange) === null || _this$props$onChange === void 0 ? void 0 : _this$props$onChange.call(_this$props3, value);
119
- });
120
114
  return _this;
121
115
  }
122
116
  _createClass(EuiComboBoxInput, [{
123
117
  key: "componentDidUpdate",
124
118
  value: function componentDidUpdate(prevProps) {
125
- var searchValue = prevProps.searchValue;
119
+ if (prevProps.searchValue !== this.props.searchValue) {
120
+ this.updateInputSize(this.props.searchValue);
126
121
 
127
- // We need to update the position of everything if the user enters enough input to change
128
- // the size of the input.
129
- if (searchValue !== this.props.searchValue) {
122
+ // We need to update the position of everything if the user enters enough input to change
123
+ // the size of the input.
130
124
  this.updatePosition();
131
125
  }
132
126
  }
133
127
  }, {
134
128
  key: "render",
135
129
  value: function render() {
136
- var _this$props4 = this.props,
137
- compressed = _this$props4.compressed,
138
- focusedOptionId = _this$props4.focusedOptionId,
139
- fullWidth = _this$props4.fullWidth,
140
- hasSelectedOptions = _this$props4.hasSelectedOptions,
141
- id = _this$props4.id,
142
- isDisabled = _this$props4.isDisabled,
143
- isListOpen = _this$props4.isListOpen,
144
- noIcon = _this$props4.noIcon,
145
- onClear = _this$props4.onClear,
146
- onClick = _this$props4.onClick,
147
- onCloseListClick = _this$props4.onCloseListClick,
148
- onOpenListClick = _this$props4.onOpenListClick,
149
- onRemoveOption = _this$props4.onRemoveOption,
150
- placeholder = _this$props4.placeholder,
151
- rootId = _this$props4.rootId,
152
- searchValue = _this$props4.searchValue,
153
- selectedOptions = _this$props4.selectedOptions,
154
- singleSelectionProp = _this$props4.singleSelection,
155
- toggleButtonRef = _this$props4.toggleButtonRef,
156
- value = _this$props4.value,
157
- prepend = _this$props4.prepend,
158
- append = _this$props4.append,
159
- isLoading = _this$props4.isLoading,
160
- isInvalid = _this$props4.isInvalid,
161
- autoFocus = _this$props4.autoFocus,
162
- ariaLabel = _this$props4['aria-label'],
163
- ariaLabelledby = _this$props4['aria-labelledby'];
130
+ var _this$props3 = this.props,
131
+ compressed = _this$props3.compressed,
132
+ focusedOptionId = _this$props3.focusedOptionId,
133
+ fullWidth = _this$props3.fullWidth,
134
+ hasSelectedOptions = _this$props3.hasSelectedOptions,
135
+ id = _this$props3.id,
136
+ isDisabled = _this$props3.isDisabled,
137
+ isListOpen = _this$props3.isListOpen,
138
+ noIcon = _this$props3.noIcon,
139
+ _onChange = _this$props3.onChange,
140
+ onClear = _this$props3.onClear,
141
+ onClick = _this$props3.onClick,
142
+ onCloseListClick = _this$props3.onCloseListClick,
143
+ onOpenListClick = _this$props3.onOpenListClick,
144
+ onRemoveOption = _this$props3.onRemoveOption,
145
+ placeholder = _this$props3.placeholder,
146
+ rootId = _this$props3.rootId,
147
+ searchValue = _this$props3.searchValue,
148
+ selectedOptions = _this$props3.selectedOptions,
149
+ singleSelectionProp = _this$props3.singleSelection,
150
+ toggleButtonRef = _this$props3.toggleButtonRef,
151
+ value = _this$props3.value,
152
+ prepend = _this$props3.prepend,
153
+ append = _this$props3.append,
154
+ isLoading = _this$props3.isLoading,
155
+ isInvalid = _this$props3.isInvalid,
156
+ autoFocus = _this$props3.autoFocus,
157
+ ariaLabel = _this$props3['aria-label'],
158
+ ariaLabelledby = _this$props3['aria-labelledby'];
164
159
  var singleSelection = Boolean(singleSelectionProp);
165
160
  var asPlainText = singleSelectionProp && _typeof(singleSelectionProp) === 'object' && singleSelectionProp.asPlainText || false;
166
161
  var pills = selectedOptions ? selectedOptions.map(function (option) {
@@ -265,7 +260,9 @@ var EuiComboBoxInput = /*#__PURE__*/function (_Component) {
265
260
  disabled: isDisabled,
266
261
  id: id,
267
262
  onBlur: this.onBlur,
268
- onChange: this.inputOnChange,
263
+ onChange: function onChange(event) {
264
+ return _onChange(event.target.value);
265
+ },
269
266
  onFocus: this.onFocus,
270
267
  onKeyDown: this.onKeyDown,
271
268
  ref: this.inputRefCallback,
@@ -292,9 +289,9 @@ EuiComboBoxInput.propTypes = {
292
289
  isListOpen: _propTypes.default.bool.isRequired,
293
290
  noIcon: _propTypes.default.bool.isRequired,
294
291
  onBlur: _propTypes.default.any,
295
- onChange: _propTypes.default.func,
292
+ onChange: _propTypes.default.func.isRequired,
296
293
  onClear: _propTypes.default.func,
297
- onClick: _propTypes.default.func,
294
+ onClick: _propTypes.default.func.isRequired,
298
295
  onCloseListClick: _propTypes.default.func.isRequired,
299
296
  onFocus: _propTypes.default.any.isRequired,
300
297
  onOpenListClick: _propTypes.default.func.isRequired,
@@ -13,7 +13,7 @@ var _resize_observer = require("../observer/resize_observer");
13
13
  var _utils = require("./utils");
14
14
  var _text_truncate = require("./text_truncate.styles");
15
15
  var _react2 = require("@emotion/react");
16
- var _excluded = ["width"],
16
+ var _excluded = ["width", "onResize"],
17
17
  _excluded2 = ["width", "children", "text", "truncation", "truncationOffset", "truncationPosition", "ellipsis", "containerRef", "className"],
18
18
  _excluded3 = ["onResize"];
19
19
  /*
@@ -38,10 +38,13 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
38
38
  var TRUNCATION_TYPES = ['end', 'start', 'startEnd', 'middle'];
39
39
  var EuiTextTruncate = function EuiTextTruncate(_ref) {
40
40
  var width = _ref.width,
41
+ onResize = _ref.onResize,
41
42
  props = _objectWithoutProperties(_ref, _excluded);
42
43
  return width != null ? (0, _react2.jsx)(EuiTextTruncateWithWidth, _extends({
43
44
  width: width
44
- }, props)) : (0, _react2.jsx)(EuiTextTruncateWithResizeObserver, props);
45
+ }, props)) : (0, _react2.jsx)(EuiTextTruncateWithResizeObserver, _extends({
46
+ onResize: onResize
47
+ }, props));
45
48
  };
46
49
  exports.EuiTextTruncate = EuiTextTruncate;
47
50
  EuiTextTruncate.propTypes = {
@@ -98,56 +98,51 @@ export var EuiComboBoxInput = /*#__PURE__*/function (_Component) {
98
98
  }
99
99
  }
100
100
  });
101
- _defineProperty(_assertThisInitialized(_this), "inputOnChange", function (event) {
102
- var _this$props$onChange, _this$props3;
103
- var value = event.target.value;
104
- _this.updateInputSize(value);
105
- (_this$props$onChange = (_this$props3 = _this.props).onChange) === null || _this$props$onChange === void 0 ? void 0 : _this$props$onChange.call(_this$props3, value);
106
- });
107
101
  return _this;
108
102
  }
109
103
  _createClass(EuiComboBoxInput, [{
110
104
  key: "componentDidUpdate",
111
105
  value: function componentDidUpdate(prevProps) {
112
- var searchValue = prevProps.searchValue;
106
+ if (prevProps.searchValue !== this.props.searchValue) {
107
+ this.updateInputSize(this.props.searchValue);
113
108
 
114
- // We need to update the position of everything if the user enters enough input to change
115
- // the size of the input.
116
- if (searchValue !== this.props.searchValue) {
109
+ // We need to update the position of everything if the user enters enough input to change
110
+ // the size of the input.
117
111
  this.updatePosition();
118
112
  }
119
113
  }
120
114
  }, {
121
115
  key: "render",
122
116
  value: function render() {
123
- var _this$props4 = this.props,
124
- compressed = _this$props4.compressed,
125
- focusedOptionId = _this$props4.focusedOptionId,
126
- fullWidth = _this$props4.fullWidth,
127
- hasSelectedOptions = _this$props4.hasSelectedOptions,
128
- id = _this$props4.id,
129
- isDisabled = _this$props4.isDisabled,
130
- isListOpen = _this$props4.isListOpen,
131
- noIcon = _this$props4.noIcon,
132
- onClear = _this$props4.onClear,
133
- onClick = _this$props4.onClick,
134
- onCloseListClick = _this$props4.onCloseListClick,
135
- onOpenListClick = _this$props4.onOpenListClick,
136
- onRemoveOption = _this$props4.onRemoveOption,
137
- placeholder = _this$props4.placeholder,
138
- rootId = _this$props4.rootId,
139
- searchValue = _this$props4.searchValue,
140
- selectedOptions = _this$props4.selectedOptions,
141
- singleSelectionProp = _this$props4.singleSelection,
142
- toggleButtonRef = _this$props4.toggleButtonRef,
143
- value = _this$props4.value,
144
- prepend = _this$props4.prepend,
145
- append = _this$props4.append,
146
- isLoading = _this$props4.isLoading,
147
- isInvalid = _this$props4.isInvalid,
148
- autoFocus = _this$props4.autoFocus,
149
- ariaLabel = _this$props4['aria-label'],
150
- ariaLabelledby = _this$props4['aria-labelledby'];
117
+ var _this$props3 = this.props,
118
+ compressed = _this$props3.compressed,
119
+ focusedOptionId = _this$props3.focusedOptionId,
120
+ fullWidth = _this$props3.fullWidth,
121
+ hasSelectedOptions = _this$props3.hasSelectedOptions,
122
+ id = _this$props3.id,
123
+ isDisabled = _this$props3.isDisabled,
124
+ isListOpen = _this$props3.isListOpen,
125
+ noIcon = _this$props3.noIcon,
126
+ _onChange = _this$props3.onChange,
127
+ onClear = _this$props3.onClear,
128
+ onClick = _this$props3.onClick,
129
+ onCloseListClick = _this$props3.onCloseListClick,
130
+ onOpenListClick = _this$props3.onOpenListClick,
131
+ onRemoveOption = _this$props3.onRemoveOption,
132
+ placeholder = _this$props3.placeholder,
133
+ rootId = _this$props3.rootId,
134
+ searchValue = _this$props3.searchValue,
135
+ selectedOptions = _this$props3.selectedOptions,
136
+ singleSelectionProp = _this$props3.singleSelection,
137
+ toggleButtonRef = _this$props3.toggleButtonRef,
138
+ value = _this$props3.value,
139
+ prepend = _this$props3.prepend,
140
+ append = _this$props3.append,
141
+ isLoading = _this$props3.isLoading,
142
+ isInvalid = _this$props3.isInvalid,
143
+ autoFocus = _this$props3.autoFocus,
144
+ ariaLabel = _this$props3['aria-label'],
145
+ ariaLabelledby = _this$props3['aria-labelledby'];
151
146
  var singleSelection = Boolean(singleSelectionProp);
152
147
  var asPlainText = singleSelectionProp && _typeof(singleSelectionProp) === 'object' && singleSelectionProp.asPlainText || false;
153
148
  var pills = selectedOptions ? selectedOptions.map(function (option) {
@@ -252,7 +247,9 @@ export var EuiComboBoxInput = /*#__PURE__*/function (_Component) {
252
247
  disabled: isDisabled,
253
248
  id: id,
254
249
  onBlur: this.onBlur,
255
- onChange: this.inputOnChange,
250
+ onChange: function onChange(event) {
251
+ return _onChange(event.target.value);
252
+ },
256
253
  onFocus: this.onFocus,
257
254
  onKeyDown: this.onKeyDown,
258
255
  ref: this.inputRefCallback,
@@ -1,7 +1,7 @@
1
1
  import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
2
2
  import _extends from "@babel/runtime/helpers/extends";
3
3
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
4
- var _excluded = ["width"],
4
+ var _excluded = ["width", "onResize"],
5
5
  _excluded2 = ["width", "children", "text", "truncation", "truncationOffset", "truncationPosition", "ellipsis", "containerRef", "className"],
6
6
  _excluded3 = ["onResize"];
7
7
  /*
@@ -22,10 +22,13 @@ import { jsx as ___EmotionJSX } from "@emotion/react";
22
22
  var TRUNCATION_TYPES = ['end', 'start', 'startEnd', 'middle'];
23
23
  export var EuiTextTruncate = function EuiTextTruncate(_ref) {
24
24
  var width = _ref.width,
25
+ onResize = _ref.onResize,
25
26
  props = _objectWithoutProperties(_ref, _excluded);
26
27
  return width != null ? ___EmotionJSX(EuiTextTruncateWithWidth, _extends({
27
28
  width: width
28
- }, props)) : ___EmotionJSX(EuiTextTruncateWithResizeObserver, props);
29
+ }, props)) : ___EmotionJSX(EuiTextTruncateWithResizeObserver, _extends({
30
+ onResize: onResize
31
+ }, props));
29
32
  };
30
33
  var EuiTextTruncateWithWidth = function EuiTextTruncateWithWidth(_ref2) {
31
34
  var width = _ref2.width,
@@ -106,56 +106,51 @@ var EuiComboBoxInput = /*#__PURE__*/function (_Component) {
106
106
  }
107
107
  }
108
108
  });
109
- (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "inputOnChange", function (event) {
110
- var _this$props$onChange, _this$props3;
111
- var value = event.target.value;
112
- _this.updateInputSize(value);
113
- (_this$props$onChange = (_this$props3 = _this.props).onChange) === null || _this$props$onChange === void 0 ? void 0 : _this$props$onChange.call(_this$props3, value);
114
- });
115
109
  return _this;
116
110
  }
117
111
  (0, _createClass2.default)(EuiComboBoxInput, [{
118
112
  key: "componentDidUpdate",
119
113
  value: function componentDidUpdate(prevProps) {
120
- var searchValue = prevProps.searchValue;
114
+ if (prevProps.searchValue !== this.props.searchValue) {
115
+ this.updateInputSize(this.props.searchValue);
121
116
 
122
- // We need to update the position of everything if the user enters enough input to change
123
- // the size of the input.
124
- if (searchValue !== this.props.searchValue) {
117
+ // We need to update the position of everything if the user enters enough input to change
118
+ // the size of the input.
125
119
  this.updatePosition();
126
120
  }
127
121
  }
128
122
  }, {
129
123
  key: "render",
130
124
  value: function render() {
131
- var _this$props4 = this.props,
132
- compressed = _this$props4.compressed,
133
- focusedOptionId = _this$props4.focusedOptionId,
134
- fullWidth = _this$props4.fullWidth,
135
- hasSelectedOptions = _this$props4.hasSelectedOptions,
136
- id = _this$props4.id,
137
- isDisabled = _this$props4.isDisabled,
138
- isListOpen = _this$props4.isListOpen,
139
- noIcon = _this$props4.noIcon,
140
- onClear = _this$props4.onClear,
141
- onClick = _this$props4.onClick,
142
- onCloseListClick = _this$props4.onCloseListClick,
143
- onOpenListClick = _this$props4.onOpenListClick,
144
- onRemoveOption = _this$props4.onRemoveOption,
145
- placeholder = _this$props4.placeholder,
146
- rootId = _this$props4.rootId,
147
- searchValue = _this$props4.searchValue,
148
- selectedOptions = _this$props4.selectedOptions,
149
- singleSelectionProp = _this$props4.singleSelection,
150
- toggleButtonRef = _this$props4.toggleButtonRef,
151
- value = _this$props4.value,
152
- prepend = _this$props4.prepend,
153
- append = _this$props4.append,
154
- isLoading = _this$props4.isLoading,
155
- isInvalid = _this$props4.isInvalid,
156
- autoFocus = _this$props4.autoFocus,
157
- ariaLabel = _this$props4['aria-label'],
158
- ariaLabelledby = _this$props4['aria-labelledby'];
125
+ var _this$props3 = this.props,
126
+ compressed = _this$props3.compressed,
127
+ focusedOptionId = _this$props3.focusedOptionId,
128
+ fullWidth = _this$props3.fullWidth,
129
+ hasSelectedOptions = _this$props3.hasSelectedOptions,
130
+ id = _this$props3.id,
131
+ isDisabled = _this$props3.isDisabled,
132
+ isListOpen = _this$props3.isListOpen,
133
+ noIcon = _this$props3.noIcon,
134
+ _onChange = _this$props3.onChange,
135
+ onClear = _this$props3.onClear,
136
+ onClick = _this$props3.onClick,
137
+ onCloseListClick = _this$props3.onCloseListClick,
138
+ onOpenListClick = _this$props3.onOpenListClick,
139
+ onRemoveOption = _this$props3.onRemoveOption,
140
+ placeholder = _this$props3.placeholder,
141
+ rootId = _this$props3.rootId,
142
+ searchValue = _this$props3.searchValue,
143
+ selectedOptions = _this$props3.selectedOptions,
144
+ singleSelectionProp = _this$props3.singleSelection,
145
+ toggleButtonRef = _this$props3.toggleButtonRef,
146
+ value = _this$props3.value,
147
+ prepend = _this$props3.prepend,
148
+ append = _this$props3.append,
149
+ isLoading = _this$props3.isLoading,
150
+ isInvalid = _this$props3.isInvalid,
151
+ autoFocus = _this$props3.autoFocus,
152
+ ariaLabel = _this$props3['aria-label'],
153
+ ariaLabelledby = _this$props3['aria-labelledby'];
159
154
  var singleSelection = Boolean(singleSelectionProp);
160
155
  var asPlainText = singleSelectionProp && (0, _typeof2.default)(singleSelectionProp) === 'object' && singleSelectionProp.asPlainText || false;
161
156
  var pills = selectedOptions ? selectedOptions.map(function (option) {
@@ -260,7 +255,9 @@ var EuiComboBoxInput = /*#__PURE__*/function (_Component) {
260
255
  disabled: isDisabled,
261
256
  id: id,
262
257
  onBlur: this.onBlur,
263
- onChange: this.inputOnChange,
258
+ onChange: function onChange(event) {
259
+ return _onChange(event.target.value);
260
+ },
264
261
  onFocus: this.onFocus,
265
262
  onKeyDown: this.onKeyDown,
266
263
  ref: this.inputRefCallback,
@@ -16,7 +16,7 @@ var _resize_observer = require("../observer/resize_observer");
16
16
  var _utils = require("./utils");
17
17
  var _text_truncate = require("./text_truncate.styles");
18
18
  var _react2 = require("@emotion/react");
19
- var _excluded = ["width"],
19
+ var _excluded = ["width", "onResize"],
20
20
  _excluded2 = ["width", "children", "text", "truncation", "truncationOffset", "truncationPosition", "ellipsis", "containerRef", "className"],
21
21
  _excluded3 = ["onResize"];
22
22
  /*
@@ -31,10 +31,13 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
31
31
  var TRUNCATION_TYPES = ['end', 'start', 'startEnd', 'middle'];
32
32
  var EuiTextTruncate = function EuiTextTruncate(_ref) {
33
33
  var width = _ref.width,
34
+ onResize = _ref.onResize,
34
35
  props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
35
36
  return width != null ? (0, _react2.jsx)(EuiTextTruncateWithWidth, (0, _extends2.default)({
36
37
  width: width
37
- }, props)) : (0, _react2.jsx)(EuiTextTruncateWithResizeObserver, props);
38
+ }, props)) : (0, _react2.jsx)(EuiTextTruncateWithResizeObserver, (0, _extends2.default)({
39
+ onResize: onResize
40
+ }, props));
38
41
  };
39
42
  exports.EuiTextTruncate = EuiTextTruncate;
40
43
  var EuiTextTruncateWithWidth = function EuiTextTruncateWithWidth(_ref2) {
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@elastic/eui",
3
3
  "description": "Elastic UI Component Library",
4
- "version": "88.5.2",
4
+ "version": "88.5.3",
5
5
  "license": "SEE LICENSE IN LICENSE.txt",
6
6
  "main": "lib",
7
7
  "module": "es",
@@ -31,12 +31,12 @@
31
31
  "lint-sass": "yarn stylelint \"**/*.scss\" --quiet-deprecation-warnings",
32
32
  "test": "yarn lint && yarn test-unit",
33
33
  "test-ci": "yarn test && yarn test-cypress",
34
- "test-unit": "cross-env NODE_ENV=test jest --config ./scripts/jest/config.js",
34
+ "test-unit": "node ./scripts/test-unit",
35
35
  "test-a11y": "node ./scripts/a11y-testing",
36
36
  "test-staged": "yarn lint && node scripts/test-staged.js",
37
- "test-cypress": "node ./scripts/cypress",
38
- "test-cypress-dev": "node ./scripts/cypress --dev",
39
- "test-cypress-a11y": "node ./scripts/cypress --a11y",
37
+ "test-cypress": "node ./scripts/test-cypress",
38
+ "test-cypress-dev": "yarn test-cypress --dev",
39
+ "test-cypress-a11y": "yarn test-cypress --a11y",
40
40
  "combine-test-coverage": "sh ./scripts/combine-coverage.sh",
41
41
  "start-test-server": "BABEL_MODULES=false NODE_ENV=puppeteer NODE_OPTIONS=--max-old-space-size=4096 webpack-dev-server --config src-docs/webpack.config.js --port 9999",
42
42
  "yo-component": "yo ./generator-eui/app/component.js",
@@ -183,6 +183,7 @@
183
183
  "dedent": "^0.7.0",
184
184
  "dts-generator": "^3.0.0",
185
185
  "enzyme": "^3.11.0",
186
+ "enzyme-adapter-react-16": "^1.15.7",
186
187
  "enzyme-to-json": "^3.5.0",
187
188
  "eslint": "^8.41.0",
188
189
  "eslint-config-prettier": "^8.8.0",
@@ -107,56 +107,51 @@ var EuiComboBoxInput = /*#__PURE__*/function (_Component) {
107
107
  }
108
108
  }
109
109
  });
110
- (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "inputOnChange", function (event) {
111
- var _this$props$onChange, _this$props3;
112
- var value = event.target.value;
113
- _this.updateInputSize(value);
114
- (_this$props$onChange = (_this$props3 = _this.props).onChange) === null || _this$props$onChange === void 0 ? void 0 : _this$props$onChange.call(_this$props3, value);
115
- });
116
110
  return _this;
117
111
  }
118
112
  (0, _createClass2.default)(EuiComboBoxInput, [{
119
113
  key: "componentDidUpdate",
120
114
  value: function componentDidUpdate(prevProps) {
121
- var searchValue = prevProps.searchValue;
115
+ if (prevProps.searchValue !== this.props.searchValue) {
116
+ this.updateInputSize(this.props.searchValue);
122
117
 
123
- // We need to update the position of everything if the user enters enough input to change
124
- // the size of the input.
125
- if (searchValue !== this.props.searchValue) {
118
+ // We need to update the position of everything if the user enters enough input to change
119
+ // the size of the input.
126
120
  this.updatePosition();
127
121
  }
128
122
  }
129
123
  }, {
130
124
  key: "render",
131
125
  value: function render() {
132
- var _this$props4 = this.props,
133
- compressed = _this$props4.compressed,
134
- focusedOptionId = _this$props4.focusedOptionId,
135
- fullWidth = _this$props4.fullWidth,
136
- hasSelectedOptions = _this$props4.hasSelectedOptions,
137
- id = _this$props4.id,
138
- isDisabled = _this$props4.isDisabled,
139
- isListOpen = _this$props4.isListOpen,
140
- noIcon = _this$props4.noIcon,
141
- onClear = _this$props4.onClear,
142
- onClick = _this$props4.onClick,
143
- onCloseListClick = _this$props4.onCloseListClick,
144
- onOpenListClick = _this$props4.onOpenListClick,
145
- onRemoveOption = _this$props4.onRemoveOption,
146
- placeholder = _this$props4.placeholder,
147
- rootId = _this$props4.rootId,
148
- searchValue = _this$props4.searchValue,
149
- selectedOptions = _this$props4.selectedOptions,
150
- singleSelectionProp = _this$props4.singleSelection,
151
- toggleButtonRef = _this$props4.toggleButtonRef,
152
- value = _this$props4.value,
153
- prepend = _this$props4.prepend,
154
- append = _this$props4.append,
155
- isLoading = _this$props4.isLoading,
156
- isInvalid = _this$props4.isInvalid,
157
- autoFocus = _this$props4.autoFocus,
158
- ariaLabel = _this$props4['aria-label'],
159
- ariaLabelledby = _this$props4['aria-labelledby'];
126
+ var _this$props3 = this.props,
127
+ compressed = _this$props3.compressed,
128
+ focusedOptionId = _this$props3.focusedOptionId,
129
+ fullWidth = _this$props3.fullWidth,
130
+ hasSelectedOptions = _this$props3.hasSelectedOptions,
131
+ id = _this$props3.id,
132
+ isDisabled = _this$props3.isDisabled,
133
+ isListOpen = _this$props3.isListOpen,
134
+ noIcon = _this$props3.noIcon,
135
+ _onChange = _this$props3.onChange,
136
+ onClear = _this$props3.onClear,
137
+ onClick = _this$props3.onClick,
138
+ onCloseListClick = _this$props3.onCloseListClick,
139
+ onOpenListClick = _this$props3.onOpenListClick,
140
+ onRemoveOption = _this$props3.onRemoveOption,
141
+ placeholder = _this$props3.placeholder,
142
+ rootId = _this$props3.rootId,
143
+ searchValue = _this$props3.searchValue,
144
+ selectedOptions = _this$props3.selectedOptions,
145
+ singleSelectionProp = _this$props3.singleSelection,
146
+ toggleButtonRef = _this$props3.toggleButtonRef,
147
+ value = _this$props3.value,
148
+ prepend = _this$props3.prepend,
149
+ append = _this$props3.append,
150
+ isLoading = _this$props3.isLoading,
151
+ isInvalid = _this$props3.isInvalid,
152
+ autoFocus = _this$props3.autoFocus,
153
+ ariaLabel = _this$props3['aria-label'],
154
+ ariaLabelledby = _this$props3['aria-labelledby'];
160
155
  var singleSelection = Boolean(singleSelectionProp);
161
156
  var asPlainText = singleSelectionProp && (0, _typeof2.default)(singleSelectionProp) === 'object' && singleSelectionProp.asPlainText || false;
162
157
  var pills = selectedOptions ? selectedOptions.map(function (option) {
@@ -261,7 +256,9 @@ var EuiComboBoxInput = /*#__PURE__*/function (_Component) {
261
256
  disabled: isDisabled,
262
257
  id: id,
263
258
  onBlur: this.onBlur,
264
- onChange: this.inputOnChange,
259
+ onChange: function onChange(event) {
260
+ return _onChange(event.target.value);
261
+ },
265
262
  onFocus: this.onFocus,
266
263
  onKeyDown: this.onKeyDown,
267
264
  ref: this.inputRefCallback,
@@ -288,9 +285,9 @@ EuiComboBoxInput.propTypes = {
288
285
  isListOpen: _propTypes.default.bool.isRequired,
289
286
  noIcon: _propTypes.default.bool.isRequired,
290
287
  onBlur: _propTypes.default.any,
291
- onChange: _propTypes.default.func,
288
+ onChange: _propTypes.default.func.isRequired,
292
289
  onClear: _propTypes.default.func,
293
- onClick: _propTypes.default.func,
290
+ onClick: _propTypes.default.func.isRequired,
294
291
  onCloseListClick: _propTypes.default.func.isRequired,
295
292
  onFocus: _propTypes.default.any.isRequired,
296
293
  onOpenListClick: _propTypes.default.func.isRequired,
@@ -17,7 +17,7 @@ var _resize_observer = require("../observer/resize_observer");
17
17
  var _utils = require("./utils");
18
18
  var _text_truncate = require("./text_truncate.styles");
19
19
  var _react2 = require("@emotion/react");
20
- var _excluded = ["width"],
20
+ var _excluded = ["width", "onResize"],
21
21
  _excluded2 = ["width", "children", "text", "truncation", "truncationOffset", "truncationPosition", "ellipsis", "containerRef", "className"],
22
22
  _excluded3 = ["onResize"];
23
23
  /*
@@ -32,10 +32,13 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
32
32
  var TRUNCATION_TYPES = ['end', 'start', 'startEnd', 'middle'];
33
33
  var EuiTextTruncate = function EuiTextTruncate(_ref) {
34
34
  var width = _ref.width,
35
+ onResize = _ref.onResize,
35
36
  props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
36
37
  return width != null ? (0, _react2.jsx)(EuiTextTruncateWithWidth, (0, _extends2.default)({
37
38
  width: width
38
- }, props)) : (0, _react2.jsx)(EuiTextTruncateWithResizeObserver, props);
39
+ }, props)) : (0, _react2.jsx)(EuiTextTruncateWithResizeObserver, (0, _extends2.default)({
40
+ onResize: onResize
41
+ }, props));
39
42
  };
40
43
  exports.EuiTextTruncate = EuiTextTruncate;
41
44
  EuiTextTruncate.propTypes = {