@elastic/eui 88.5.2 → 88.5.4

package/test-env/components/combo_box/combo_box_input/combo_box_input.js

@@ -107,56 +107,51 @@ var EuiComboBoxInput = /*#__PURE__*/function (_Component) {
         }
       }
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "inputOnChange", function (event) {
-      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;
   }
   (0, _createClass2.default)(EuiComboBoxInput, [{
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps) {
-      var searchValue = prevProps.searchValue;
+      if (prevProps.searchValue !== this.props.searchValue) {
+        this.updateInputSize(this.props.searchValue);
 
-      // We need to update the position of everything if the user enters enough input to change
-      // the size of the input.
-      if (searchValue !== this.props.searchValue) {
+        // We need to update the position of everything if the user enters enough input to change
+        // the size of the input.
         this.updatePosition();
       }
     }
   }, {
     key: "render",
     value: function render() {
-      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 _this$props3 = this.props,
+        compressed = _this$props3.compressed,
+        focusedOptionId = _this$props3.focusedOptionId,
+        fullWidth = _this$props3.fullWidth,
+        hasSelectedOptions = _this$props3.hasSelectedOptions,
+        id = _this$props3.id,
+        isDisabled = _this$props3.isDisabled,
+        isListOpen = _this$props3.isListOpen,
+        noIcon = _this$props3.noIcon,
+        _onChange = _this$props3.onChange,
+        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 singleSelection = Boolean(singleSelectionProp);
       var asPlainText = singleSelectionProp && (0, _typeof2.default)(singleSelectionProp) === 'object' && singleSelectionProp.asPlainText || false;
       var pills = selectedOptions ? selectedOptions.map(function (option) {
@@ -261,7 +256,9 @@ var EuiComboBoxInput = /*#__PURE__*/function (_Component) {
         disabled: isDisabled,
         id: id,
         onBlur: this.onBlur,
-        onChange: this.inputOnChange,
+        onChange: function onChange(event) {
+          return _onChange(event.target.value);
+        },
         onFocus: this.onFocus,
         onKeyDown: this.onKeyDown,
         ref: this.inputRefCallback,
@@ -288,9 +285,9 @@ EuiComboBoxInput.propTypes = {
   isListOpen: _propTypes.default.bool.isRequired,
   noIcon: _propTypes.default.bool.isRequired,
   onBlur: _propTypes.default.any,
-  onChange: _propTypes.default.func,
+  onChange: _propTypes.default.func.isRequired,
   onClear: _propTypes.default.func,
-  onClick: _propTypes.default.func,
+  onClick: _propTypes.default.func.isRequired,
   onCloseListClick: _propTypes.default.func.isRequired,
   onFocus: _propTypes.default.any.isRequired,
   onOpenListClick: _propTypes.default.func.isRequired,

package/test-env/components/popover/input_popover.js

@@ -7,20 +7,21 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.EuiInputPopover = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react2 = require("@emotion/react");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _tabbable = require("tabbable");
-var _focus_trap = require("../focus_trap");
-var _popover = require("./popover");
-var _resize_observer = require("../observer/resize_observer");
+var _global_styling = require("../../global_styling");
 var _services = require("../../services");
+var _resize_observer = require("../observer/resize_observer");
+var _focus_trap = require("../focus_trap");
 var _form = require("../form/form.styles");
-var _react2 = require("@emotion/react");
-var _global_styling = require("../../global_styling");
-var _excluded = ["children", "className", "disableFocusTrap", "focusTrapProps", "input", "fullWidth", "panelMinWidth", "onPanelResize", "inputRef", "panelRef"];
+var _popover = require("./popover");
+var _excluded = ["children", "className", "closePopover", "disableFocusTrap", "focusTrapProps", "input", "fullWidth", "panelMinWidth", "onPanelResize", "inputRef", "panelRef"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -30,9 +31,13 @@ var _excluded = ["children", "className", "disableFocusTrap", "focusTrapProps",
  */
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var EuiInputPopover = function EuiInputPopover(_ref) {
+  var _props$panelProps;
   var children = _ref.children,
     className = _ref.className,
+    closePopover = _ref.closePopover,
     _ref$disableFocusTrap = _ref.disableFocusTrap,
     disableFocusTrap = _ref$disableFocusTrap === void 0 ? false : _ref$disableFocusTrap,
     focusTrapProps = _ref.focusTrapProps,
@@ -45,80 +50,92 @@ var EuiInputPopover = function EuiInputPopover(_ref) {
     _inputRef = _ref.inputRef,
     _panelRef = _ref.panelRef,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var euiThemeContext = (0, _services.useEuiTheme)();
+  var classes = (0, _classnames.default)('euiInputPopover', className);
+  var euiTheme = (0, _services.useEuiTheme)();
+  var form = (0, _form.euiFormVariables)(euiTheme);
+
+  /**
+   * Ref setup
+   */
+
+  var popoverClassRef = (0, _react.useRef)(null);
+  // The inputEl state ensures that width is correctly tracked on initial load
   var _useState = (0, _react.useState)(null),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     inputEl = _useState2[0],
     setInputEl = _useState2[1];
-  var _useState3 = (0, _react.useState)(),
+  // The panelEl state ensures that width is correctly set every time the popover opens
+  var _useState3 = (0, _react.useState)(null),
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    inputElWidth = _useState4[0],
-    setInputElWidth = _useState4[1];
-  var _useState5 = (0, _react.useState)(null),
-    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-    panelEl = _useState6[0],
-    setPanelEl = _useState6[1];
-  var popoverClassRef = (0, _react.useRef)(null);
+    panelEl = _useState4[0],
+    setPanelEl = _useState4[1];
   var inputRef = (0, _services.useCombinedRefs)([setInputEl, _inputRef]);
   var panelRef = (0, _services.useCombinedRefs)([setPanelEl, _panelRef]);
-  var setPanelWidth = (0, _react.useCallback)(function (width) {
-    if (panelEl && (!!inputElWidth || !!width)) {
-      var newWidth = !!width ? width : inputElWidth;
-      var widthToSet = newWidth && newWidth > panelMinWidth ? newWidth : panelMinWidth;
-      panelEl.style.width = "".concat(widthToSet, "px");
-      onPanelResize === null || onPanelResize === void 0 ? void 0 : onPanelResize(widthToSet);
+
+  /**
+   * Sizing/width logic
+   */
+
+  var inputWidth = (0, _resize_observer.useResizeObserver)(inputEl, 'width').width;
+  var panelWidth = (0, _react.useMemo)(function () {
+    return inputWidth < panelMinWidth ? panelMinWidth : inputWidth;
+  }, [panelMinWidth, inputWidth]);
+  (0, _react.useEffect)(function () {
+    if (panelEl) {
+      // We have to modify the popover panel DOM node directly instead of using
+      // `panelStyle`, as there's some weird positioning bugs on resize otherwise
+      panelEl.style.inlineSize = "".concat(panelWidth, "px");
     }
-  }, [panelEl, inputElWidth, onPanelResize, panelMinWidth]);
-  var onResize = (0, _react.useCallback)(function () {
-    if (inputEl) {
+  }, [panelEl, panelWidth]);
+  (0, _react.useEffect)(function () {
+    // This fires on all input width changes regardless of minimum size, because on
+    // right/center anchored popovers, the input width affects the position of the popover
+    if (panelEl) {
       var _popoverClassRef$curr;
-      var _width = inputEl.getBoundingClientRect().width;
-      setInputElWidth(_width);
-      setPanelWidth(_width);
       (_popoverClassRef$curr = popoverClassRef.current) === null || _popoverClassRef$curr === void 0 ? void 0 : _popoverClassRef$curr.positionPopoverFluid();
     }
-  }, [inputEl, setPanelWidth]);
-  (0, _react.useEffect)(function () {
-    onResize();
-  }, [onResize]);
-  (0, _react.useEffect)(function () {
-    setPanelWidth();
-  }, [setPanelWidth]);
-  var onKeyDown = function onKeyDown(event) {
-    if (panelEl && event.key === _services.cascadingMenuKeys.TAB) {
-      var tabbableItems = (0, _tabbable.tabbable)(panelEl).filter(function (el) {
-        return Array.from(el.attributes).map(function (el) {
-          return el.name;
-        }).indexOf('data-focus-guard') < 0;
-      });
-      if (disableFocusTrap || tabbableItems.length && tabbableItems[tabbableItems.length - 1] === document.activeElement) {
-        props.closePopover();
+  }, [inputWidth, panelEl]);
+
+  /**
+   * Popover tab to close logic
+   */
+
+  var panelPropsOnKeyDown = (_props$panelProps = props.panelProps) === null || _props$panelProps === void 0 ? void 0 : _props$panelProps.onKeyDown;
+  var onKeyDown = (0, _react.useCallback)(function (event) {
+    panelPropsOnKeyDown === null || panelPropsOnKeyDown === void 0 ? void 0 : panelPropsOnKeyDown(event);
+    if (event.key === _services.keys.TAB) {
+      if (disableFocusTrap) {
+        closePopover();
+      } else {
+        var tabbableItems = (0, _tabbable.tabbable)(event.currentTarget).filter(function (el) {
+          return !el.hasAttribute('data-focus-guard');
+        });
+        if (!tabbableItems.length) return;
+        var tabbingFromLastItemInPopover = document.activeElement === tabbableItems[tabbableItems.length - 1];
+        if (tabbingFromLastItemInPopover) {
+          closePopover();
+        }
       }
     }
-  };
-  var classes = (0, _classnames.default)('euiInputPopover', className);
-  var form = (0, _form.euiFormVariables)(euiThemeContext);
+  }, [disableFocusTrap, closePopover, panelPropsOnKeyDown]);
   return (0, _react2.jsx)(_popover.EuiPopover, (0, _extends2.default)({
     css: /*#__PURE__*/(0, _react2.css)(fullWidth ? undefined : (0, _global_styling.logicalCSS)('max-width', form.maxWidth), ";label:EuiInputPopover;"),
     repositionToCrossAxis: false,
     ownFocus: false,
-    button: (0, _react2.jsx)(_resize_observer.EuiResizeObserver, {
-      onResize: onResize
-    }, function (resizeRef) {
-      return (0, _react2.jsx)("div", {
-        ref: resizeRef
-      }, input);
-    }),
+    button: input,
     buttonRef: inputRef,
     panelRef: panelRef,
     className: classes,
-    ref: popoverClassRef
-  }, props), (0, _react2.jsx)(_focus_trap.EuiFocusTrap, (0, _extends2.default)({
+    ref: popoverClassRef,
+    closePopover: closePopover
+  }, props, {
+    panelProps: _objectSpread(_objectSpread({}, props.panelProps), {}, {
+      onKeyDown: onKeyDown
+    })
+  }), (0, _react2.jsx)(_focus_trap.EuiFocusTrap, (0, _extends2.default)({
     clickOutsideDisables: true,
     disabled: disableFocusTrap
-  }, focusTrapProps), (0, _react2.jsx)("div", {
-    onKeyDown: onKeyDown
-  }, children)));
+  }, focusTrapProps), children));
 };
 exports.EuiInputPopover = EuiInputPopover;
 EuiInputPopover.propTypes = {

package/test-env/components/text_truncate/text_truncate.js

@@ -17,7 +17,7 @@ var _resize_observer = require("../observer/resize_observer");
 var _utils = require("./utils");
 var _text_truncate = require("./text_truncate.styles");
 var _react2 = require("@emotion/react");
-var _excluded = ["width"],
+var _excluded = ["width", "onResize"],
   _excluded2 = ["width", "children", "text", "truncation", "truncationOffset", "truncationPosition", "ellipsis", "containerRef", "className"],
   _excluded3 = ["onResize"];
 /*
@@ -32,10 +32,13 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var TRUNCATION_TYPES = ['end', 'start', 'startEnd', 'middle'];
 var EuiTextTruncate = function EuiTextTruncate(_ref) {
   var width = _ref.width,
+    onResize = _ref.onResize,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   return width != null ? (0, _react2.jsx)(EuiTextTruncateWithWidth, (0, _extends2.default)({
     width: width
-  }, props)) : (0, _react2.jsx)(EuiTextTruncateWithResizeObserver, props);
+  }, props)) : (0, _react2.jsx)(EuiTextTruncateWithResizeObserver, (0, _extends2.default)({
+    onResize: onResize
+  }, props));
 };
 exports.EuiTextTruncate = EuiTextTruncate;
 EuiTextTruncate.propTypes = {