@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.
- package/es/components/combo_box/combo_box_input/combo_box_input.js +38 -41
- package/es/components/text_truncate/text_truncate.js +5 -2
- package/eui.d.ts +3 -4
- package/lib/components/combo_box/combo_box_input/combo_box_input.js +38 -41
- package/lib/components/text_truncate/text_truncate.js +5 -2
- package/optimize/es/components/combo_box/combo_box_input/combo_box_input.js +36 -39
- package/optimize/es/components/text_truncate/text_truncate.js +5 -2
- package/optimize/lib/components/combo_box/combo_box_input/combo_box_input.js +36 -39
- package/optimize/lib/components/text_truncate/text_truncate.js +5 -2
- package/package.json +6 -5
- package/test-env/components/combo_box/combo_box_input/combo_box_input.js +38 -41
- package/test-env/components/text_truncate/text_truncate.js +5 -2
|
@@ -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
|
-
|
|
112
|
+
if (prevProps.searchValue !== this.props.searchValue) {
|
|
113
|
+
this.updateInputSize(this.props.searchValue);
|
|
119
114
|
|
|
120
|
-
|
|
121
|
-
|
|
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$
|
|
130
|
-
compressed = _this$
|
|
131
|
-
focusedOptionId = _this$
|
|
132
|
-
fullWidth = _this$
|
|
133
|
-
hasSelectedOptions = _this$
|
|
134
|
-
id = _this$
|
|
135
|
-
isDisabled = _this$
|
|
136
|
-
isListOpen = _this$
|
|
137
|
-
noIcon = _this$
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
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:
|
|
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,
|
|
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,
|
|
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
|
|
11709
|
+
onChange: (searchValue: string) => void;
|
|
11710
11710
|
onClear?: () => void;
|
|
11711
|
-
onClick
|
|
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
|
-
|
|
119
|
+
if (prevProps.searchValue !== this.props.searchValue) {
|
|
120
|
+
this.updateInputSize(this.props.searchValue);
|
|
126
121
|
|
|
127
|
-
|
|
128
|
-
|
|
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$
|
|
137
|
-
compressed = _this$
|
|
138
|
-
focusedOptionId = _this$
|
|
139
|
-
fullWidth = _this$
|
|
140
|
-
hasSelectedOptions = _this$
|
|
141
|
-
id = _this$
|
|
142
|
-
isDisabled = _this$
|
|
143
|
-
isListOpen = _this$
|
|
144
|
-
noIcon = _this$
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
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:
|
|
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,
|
|
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
|
-
|
|
106
|
+
if (prevProps.searchValue !== this.props.searchValue) {
|
|
107
|
+
this.updateInputSize(this.props.searchValue);
|
|
113
108
|
|
|
114
|
-
|
|
115
|
-
|
|
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$
|
|
124
|
-
compressed = _this$
|
|
125
|
-
focusedOptionId = _this$
|
|
126
|
-
fullWidth = _this$
|
|
127
|
-
hasSelectedOptions = _this$
|
|
128
|
-
id = _this$
|
|
129
|
-
isDisabled = _this$
|
|
130
|
-
isListOpen = _this$
|
|
131
|
-
noIcon = _this$
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
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:
|
|
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,
|
|
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
|
-
|
|
114
|
+
if (prevProps.searchValue !== this.props.searchValue) {
|
|
115
|
+
this.updateInputSize(this.props.searchValue);
|
|
121
116
|
|
|
122
|
-
|
|
123
|
-
|
|
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$
|
|
132
|
-
compressed = _this$
|
|
133
|
-
focusedOptionId = _this$
|
|
134
|
-
fullWidth = _this$
|
|
135
|
-
hasSelectedOptions = _this$
|
|
136
|
-
id = _this$
|
|
137
|
-
isDisabled = _this$
|
|
138
|
-
isListOpen = _this$
|
|
139
|
-
noIcon = _this$
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
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:
|
|
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,
|
|
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.
|
|
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": "
|
|
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": "
|
|
39
|
-
"test-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
|
-
|
|
115
|
+
if (prevProps.searchValue !== this.props.searchValue) {
|
|
116
|
+
this.updateInputSize(this.props.searchValue);
|
|
122
117
|
|
|
123
|
-
|
|
124
|
-
|
|
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$
|
|
133
|
-
compressed = _this$
|
|
134
|
-
focusedOptionId = _this$
|
|
135
|
-
fullWidth = _this$
|
|
136
|
-
hasSelectedOptions = _this$
|
|
137
|
-
id = _this$
|
|
138
|
-
isDisabled = _this$
|
|
139
|
-
isListOpen = _this$
|
|
140
|
-
noIcon = _this$
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
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:
|
|
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,
|
|
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 = {
|