@elastic/eui 88.5.0 → 88.5.2

package/optimize/lib/components/combo_box/combo_box.js

@@ -91,10 +91,6 @@ var EuiComboBox = /*#__PURE__*/function (_Component) {
         });
       }
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "autoSizeInputRefInstance", null);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "autoSizeInputRefCallback", function (ref) {
-      _this.autoSizeInputRefInstance = ref;
-    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "searchInputRefInstance", null);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "searchInputRefCallback", function (ref) {
       _this.searchInputRefInstance = ref;
@@ -567,15 +563,7 @@ var EuiComboBox = /*#__PURE__*/function (_Component) {
   (0, _createClass2.default)(EuiComboBox, [{
     key: "componentDidMount",
     value: function componentDidMount() {
-      var _this2 = this;
       this._isMounted = true;
-
-      // TODO: This will need to be called once the actual stylesheet loads.
-      setTimeout(function () {
-        if (_this2.autoSizeInputRefInstance) {
-          _this2.autoSizeInputRefInstance.copyInputStyles();
-        }
-      }, 100);
     }
   }, {
     key: "componentDidUpdate",
@@ -608,7 +596,7 @@ var EuiComboBox = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this3 = this;
+      var _this2 = this;
       var _this$props8 = this.props,
         dataTestSubj = _this$props8['data-test-subj'],
         async = _this$props8.async,
@@ -679,32 +667,32 @@ var EuiComboBox = /*#__PURE__*/function (_Component) {
           default: "Choose from the following options"
         }, function (listboxAriaLabel) {
           return (0, _react2.jsx)(_combo_box_options_list.EuiComboBoxOptionsList, {
-            zIndex: _this3.state.listZIndex,
-            activeOptionIndex: _this3.state.activeOptionIndex,
-            areAllOptionsSelected: _this3.areAllOptionsSelected(),
+            zIndex: _this2.state.listZIndex,
+            activeOptionIndex: _this2.state.activeOptionIndex,
+            areAllOptionsSelected: _this2.areAllOptionsSelected(),
             customOptionText: customOptionText,
             "data-test-subj": optionsListDataTestSubj,
             fullWidth: fullWidth,
             isCaseSensitive: isCaseSensitive,
             isLoading: isLoading,
-            listRef: _this3.listRefCallback,
+            listRef: _this2.listRefCallback,
             matchingOptions: matchingOptions,
-            onCloseList: _this3.closeList,
+            onCloseList: _this2.closeList,
             onCreateOption: onCreateOption,
-            onOptionClick: _this3.onOptionClick,
-            onOptionEnterKey: _this3.onOptionEnterKey,
-            onScroll: _this3.onOptionListScroll,
-            optionRef: _this3.optionRefCallback,
+            onOptionClick: _this2.onOptionClick,
+            onOptionEnterKey: _this2.onOptionEnterKey,
+            onScroll: _this2.onOptionListScroll,
+            optionRef: _this2.optionRefCallback,
             options: options,
             position: listPosition,
             singleSelection: singleSelection,
             renderOption: renderOption,
-            rootId: _this3.rootId,
+            rootId: _this2.rootId,
             rowHeight: rowHeight,
             scrollToIndex: activeOptionIndex,
             searchValue: searchValue,
             selectedOptions: selectedOptions,
-            updatePosition: _this3.updatePosition,
+            updatePosition: _this2.updatePosition,
             width: width,
             delimiter: delimiter,
             getSelectedOptionForSearchValue: _matching_options.getSelectedOptionForSearchValue,
@@ -728,7 +716,6 @@ var EuiComboBox = /*#__PURE__*/function (_Component) {
           onBlur: this.onContainerBlur,
           ref: this.comboBoxRefCallback
         }), (0, _react2.jsx)(_combo_box_input.EuiComboBoxInput, {
-          autoSizeInputRef: this.autoSizeInputRefCallback,
           compressed: compressed,
           focusedOptionId: this.hasActiveOption() ? this.rootId("_option-".concat(this.state.activeOptionIndex)) : undefined,
           fullWidth: fullWidth,

package/optimize/lib/components/combo_box/combo_box_input/combo_box_input.js

@@ -18,7 +18,6 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
-var _reactInputAutosize = _interopRequireDefault(require("react-input-autosize"));
 var _services = require("../../../services");
 var _accessibility = require("../../accessibility");
 var _form_control_layout = require("../../form/form_control_layout");
@@ -47,8 +46,27 @@ var EuiComboBoxInput = /*#__PURE__*/function (_Component) {
     }
     _this = _super.call.apply(_super, [this].concat(args));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
+      inputWidth: 2,
       hasFocus: false
     });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "widthUtils", void 0);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "inputRefCallback", function (el) {
+      var _this$props$inputRef, _this$props;
+      _this.widthUtils = new _services.CanvasTextUtils({
+        container: el
+      });
+      (_this$props$inputRef = (_this$props = _this.props).inputRef) === null || _this$props$inputRef === void 0 ? void 0 : _this$props$inputRef.call(_this$props, el);
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "updateInputSize", function (inputValue) {
+      if (!_this.widthUtils) return;
+      _this.widthUtils.setTextToCheck(inputValue);
+      // Canvas has minute subpixel differences in rendering compared to DOM
+      // We'll buffer the input by ~2px just to ensure sufficient width
+      var inputWidth = Math.ceil(_this.widthUtils.textWidth) + 2;
+      _this.setState({
+        inputWidth: inputWidth
+      });
+    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "updatePosition", function () {
       // Wait a beat for the DOM to update, since we depend on DOM elements' bounds.
       requestAnimationFrame(function () {
@@ -70,13 +88,13 @@ var EuiComboBoxInput = /*#__PURE__*/function (_Component) {
       });
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onKeyDown", function (event) {
-      var _this$props = _this.props,
-        searchValue = _this$props.searchValue,
-        selectedOptions = _this$props.selectedOptions,
-        onRemoveOption = _this$props.onRemoveOption,
-        singleSelection = _this$props.singleSelection,
-        isListOpen = _this$props.isListOpen,
-        onOpenListClick = _this$props.onOpenListClick;
+      var _this$props2 = _this.props,
+        searchValue = _this$props2.searchValue,
+        selectedOptions = _this$props2.selectedOptions,
+        onRemoveOption = _this$props2.onRemoveOption,
+        singleSelection = _this$props2.singleSelection,
+        isListOpen = _this$props2.isListOpen,
+        onOpenListClick = _this$props2.onOpenListClick;
 
       // When backspacing from an empty input, delete the last pill option in the list
       var searchIsEmpty = !searchValue.length;
@@ -89,18 +107,10 @@ var EuiComboBoxInput = /*#__PURE__*/function (_Component) {
       }
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "inputOnChange", function (event) {
-      var _this$props2 = _this.props,
-        onChange = _this$props2.onChange,
-        searchValue = _this$props2.searchValue;
-      if (onChange) {
-        onChange(event.target.value);
-      }
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "inputRefCallback", function (ref) {
-      var autoSizeInputRef = _this.props.autoSizeInputRef;
-      if (autoSizeInputRef) {
-        autoSizeInputRef(ref);
-      }
+      var _this$props$onChange, _this$props3;
+      var value = event.target.value;
+      _this.updateInputSize(value);
+      (_this$props$onChange = (_this$props3 = _this.props).onChange) === null || _this$props$onChange === void 0 ? void 0 : _this$props$onChange.call(_this$props3, value);
     });
     return _this;
   }
@@ -118,35 +128,34 @@ var EuiComboBoxInput = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this$props3 = this.props,
-        compressed = _this$props3.compressed,
-        focusedOptionId = _this$props3.focusedOptionId,
-        fullWidth = _this$props3.fullWidth,
-        hasSelectedOptions = _this$props3.hasSelectedOptions,
-        id = _this$props3.id,
-        inputRef = _this$props3.inputRef,
-        isDisabled = _this$props3.isDisabled,
-        isListOpen = _this$props3.isListOpen,
-        noIcon = _this$props3.noIcon,
-        onClear = _this$props3.onClear,
-        onClick = _this$props3.onClick,
-        onCloseListClick = _this$props3.onCloseListClick,
-        onOpenListClick = _this$props3.onOpenListClick,
-        onRemoveOption = _this$props3.onRemoveOption,
-        placeholder = _this$props3.placeholder,
-        rootId = _this$props3.rootId,
-        searchValue = _this$props3.searchValue,
-        selectedOptions = _this$props3.selectedOptions,
-        singleSelectionProp = _this$props3.singleSelection,
-        toggleButtonRef = _this$props3.toggleButtonRef,
-        value = _this$props3.value,
-        prepend = _this$props3.prepend,
-        append = _this$props3.append,
-        isLoading = _this$props3.isLoading,
-        isInvalid = _this$props3.isInvalid,
-        autoFocus = _this$props3.autoFocus,
-        ariaLabel = _this$props3['aria-label'],
-        ariaLabelledby = _this$props3['aria-labelledby'];
+      var _this$props4 = this.props,
+        compressed = _this$props4.compressed,
+        focusedOptionId = _this$props4.focusedOptionId,
+        fullWidth = _this$props4.fullWidth,
+        hasSelectedOptions = _this$props4.hasSelectedOptions,
+        id = _this$props4.id,
+        isDisabled = _this$props4.isDisabled,
+        isListOpen = _this$props4.isListOpen,
+        noIcon = _this$props4.noIcon,
+        onClear = _this$props4.onClear,
+        onClick = _this$props4.onClick,
+        onCloseListClick = _this$props4.onCloseListClick,
+        onOpenListClick = _this$props4.onOpenListClick,
+        onRemoveOption = _this$props4.onRemoveOption,
+        placeholder = _this$props4.placeholder,
+        rootId = _this$props4.rootId,
+        searchValue = _this$props4.searchValue,
+        selectedOptions = _this$props4.selectedOptions,
+        singleSelectionProp = _this$props4.singleSelection,
+        toggleButtonRef = _this$props4.toggleButtonRef,
+        value = _this$props4.value,
+        prepend = _this$props4.prepend,
+        append = _this$props4.append,
+        isLoading = _this$props4.isLoading,
+        isInvalid = _this$props4.isInvalid,
+        autoFocus = _this$props4.autoFocus,
+        ariaLabel = _this$props4['aria-label'],
+        ariaLabelledby = _this$props4['aria-labelledby'];
       var singleSelection = Boolean(singleSelectionProp);
       var asPlainText = singleSelectionProp && (0, _typeof2.default)(singleSelectionProp) === 'object' && singleSelectionProp.asPlainText || false;
       var pills = selectedOptions ? selectedOptions.map(function (option) {
@@ -238,7 +247,7 @@ var EuiComboBoxInput = /*#__PURE__*/function (_Component) {
         "data-test-subj": "comboBoxInput",
         onClick: onClick,
         tabIndex: -1 // becomes onBlur event's relatedTarget, otherwise relatedTarget is null when clicking on this div
-      }, !singleSelection || !searchValue ? pills : null, placeholderMessage, (0, _react2.jsx)(_reactInputAutosize.default, {
+      }, !singleSelection || !searchValue ? pills : null, placeholderMessage, (0, _react2.jsx)("input", {
         "aria-activedescendant": focusedOptionId,
         "aria-autocomplete": "list",
         "aria-controls": isListOpen ? rootId('listbox') : '',
@@ -250,7 +259,6 @@ var EuiComboBoxInput = /*#__PURE__*/function (_Component) {
         "data-test-subj": "comboBoxSearchInput",
         disabled: isDisabled,
         id: id,
-        inputRef: inputRef,
         onBlur: this.onBlur,
         onChange: this.inputOnChange,
         onFocus: this.onFocus,
@@ -258,7 +266,7 @@ var EuiComboBoxInput = /*#__PURE__*/function (_Component) {
         ref: this.inputRefCallback,
         role: "combobox",
         style: {
-          fontSize: 14
+          inlineSize: this.state.inputWidth
         },
         value: searchValue,
         autoFocus: autoFocus

package/optimize/lib/components/text_truncate/index.js

@@ -3,12 +3,6 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "CanvasTextUtils", {
-  enumerable: true,
-  get: function get() {
-    return _utils.CanvasTextUtils;
-  }
-});
 Object.defineProperty(exports, "EuiTextTruncate", {
   enumerable: true,
   get: function get() {