@elastic/eui 88.5.2 → 88.5.4

package/optimize/es/components/popover/input_popover.js

@@ -1,7 +1,10 @@
 import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "className", "disableFocusTrap", "focusTrapProps", "input", "fullWidth", "panelMinWidth", "onPanelResize", "inputRef", "panelRef"];
+var _excluded = ["children", "className", "closePopover", "disableFocusTrap", "focusTrapProps", "input", "fullWidth", "panelMinWidth", "onPanelResize", "inputRef", "panelRef"];
+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) { _defineProperty(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; }
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -10,20 +13,22 @@ var _excluded = ["children", "className", "disableFocusTrap", "focusTrapProps",
  * Side Public License, v 1.
  */
 
-import React, { useState, useEffect, useCallback, useRef } from 'react';
+import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react';
+import { css } from '@emotion/react';
 import classnames from 'classnames';
 import { tabbable } from 'tabbable';
+import { logicalCSS } from '../../global_styling';
+import { keys, useCombinedRefs, useEuiTheme } from '../../services';
+import { useResizeObserver } from '../observer/resize_observer';
 import { EuiFocusTrap } from '../focus_trap';
-import { EuiPopover } from './popover';
-import { EuiResizeObserver } from '../observer/resize_observer';
-import { cascadingMenuKeys, useCombinedRefs, useEuiTheme } from '../../services';
 import { euiFormVariables } from '../form/form.styles';
-import { css } from '@emotion/react';
-import { logicalCSS } from '../../global_styling';
+import { EuiPopover } from './popover';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export 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,
@@ -36,80 +41,92 @@ export var EuiInputPopover = function EuiInputPopover(_ref) {
     _inputRef = _ref.inputRef,
     _panelRef = _ref.panelRef,
     props = _objectWithoutProperties(_ref, _excluded);
-  var euiThemeContext = useEuiTheme();
+  var classes = classnames('euiInputPopover', className);
+  var euiTheme = useEuiTheme();
+  var form = euiFormVariables(euiTheme);
+
+  /**
+   * Ref setup
+   */
+
+  var popoverClassRef = useRef(null);
+  // The inputEl state ensures that width is correctly tracked on initial load
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     inputEl = _useState2[0],
     setInputEl = _useState2[1];
-  var _useState3 = useState(),
+  // The panelEl state ensures that width is correctly set every time the popover opens
+  var _useState3 = useState(null),
     _useState4 = _slicedToArray(_useState3, 2),
-    inputElWidth = _useState4[0],
-    setInputElWidth = _useState4[1];
-  var _useState5 = useState(null),
-    _useState6 = _slicedToArray(_useState5, 2),
-    panelEl = _useState6[0],
-    setPanelEl = _useState6[1];
-  var popoverClassRef = useRef(null);
+    panelEl = _useState4[0],
+    setPanelEl = _useState4[1];
   var inputRef = useCombinedRefs([setInputEl, _inputRef]);
   var panelRef = useCombinedRefs([setPanelEl, _panelRef]);
-  var setPanelWidth = 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 = useResizeObserver(inputEl, 'width').width;
+  var panelWidth = useMemo(function () {
+    return inputWidth < panelMinWidth ? panelMinWidth : inputWidth;
+  }, [panelMinWidth, inputWidth]);
+  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 = useCallback(function () {
-    if (inputEl) {
+  }, [panelEl, panelWidth]);
+  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]);
-  useEffect(function () {
-    onResize();
-  }, [onResize]);
-  useEffect(function () {
-    setPanelWidth();
-  }, [setPanelWidth]);
-  var onKeyDown = function onKeyDown(event) {
-    if (panelEl && event.key === cascadingMenuKeys.TAB) {
-      var tabbableItems = 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 = useCallback(function (event) {
+    panelPropsOnKeyDown === null || panelPropsOnKeyDown === void 0 ? void 0 : panelPropsOnKeyDown(event);
+    if (event.key === keys.TAB) {
+      if (disableFocusTrap) {
+        closePopover();
+      } else {
+        var tabbableItems = 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 = classnames('euiInputPopover', className);
-  var form = euiFormVariables(euiThemeContext);
+  }, [disableFocusTrap, closePopover, panelPropsOnKeyDown]);
   return ___EmotionJSX(EuiPopover, _extends({
     css: /*#__PURE__*/css(fullWidth ? undefined : logicalCSS('max-width', form.maxWidth), ";label:EuiInputPopover;"),
     repositionToCrossAxis: false,
     ownFocus: false,
-    button: ___EmotionJSX(EuiResizeObserver, {
-      onResize: onResize
-    }, function (resizeRef) {
-      return ___EmotionJSX("div", {
-        ref: resizeRef
-      }, input);
-    }),
+    button: input,
     buttonRef: inputRef,
     panelRef: panelRef,
     className: classes,
-    ref: popoverClassRef
-  }, props), ___EmotionJSX(EuiFocusTrap, _extends({
+    ref: popoverClassRef,
+    closePopover: closePopover
+  }, props, {
+    panelProps: _objectSpread(_objectSpread({}, props.panelProps), {}, {
+      onKeyDown: onKeyDown
+    })
+  }), ___EmotionJSX(EuiFocusTrap, _extends({
     clickOutsideDisables: true,
     disabled: disableFocusTrap
-  }, focusTrapProps), ___EmotionJSX("div", {
-    onKeyDown: onKeyDown
-  }, children)));
+  }, focusTrapProps), children));
 };
 EuiInputPopover.defaultProps = {
   anchorPosition: 'downLeft',

package/optimize/es/components/text_truncate/text_truncate.js

@@ -1,7 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["width"],
+var _excluded = ["width", "onResize"],
   _excluded2 = ["width", "children", "text", "truncation", "truncationOffset", "truncationPosition", "ellipsis", "containerRef", "className"],
   _excluded3 = ["onResize"];
 /*
@@ -22,10 +22,13 @@ import { jsx as ___EmotionJSX } from "@emotion/react";
 var TRUNCATION_TYPES = ['end', 'start', 'startEnd', 'middle'];
 export var EuiTextTruncate = function EuiTextTruncate(_ref) {
   var width = _ref.width,
+    onResize = _ref.onResize,
     props = _objectWithoutProperties(_ref, _excluded);
   return width != null ? ___EmotionJSX(EuiTextTruncateWithWidth, _extends({
     width: width
-  }, props)) : ___EmotionJSX(EuiTextTruncateWithResizeObserver, props);
+  }, props)) : ___EmotionJSX(EuiTextTruncateWithResizeObserver, _extends({
+    onResize: onResize
+  }, props));
 };
 var EuiTextTruncateWithWidth = function EuiTextTruncateWithWidth(_ref2) {
   var width = _ref2.width,

package/optimize/lib/components/collapsible_nav_beta/collapsible_nav_beta.js

@@ -49,6 +49,8 @@ var _EuiCollapsibleNavBeta = function _EuiCollapsibleNavBeta(_ref) {
     side = _ref$side === void 0 ? 'left' : _ref$side,
     _focusTrapProps = _ref.focusTrapProps,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var _useEuiThemeCSSVariab = (0, _services.useEuiThemeCSSVariables)(),
+    setGlobalCSSVariables = _useEuiThemeCSSVariab.setGlobalCSSVariables;
   var euiTheme = (0, _services.useEuiTheme)();
   var headerHeight = (0, _header.euiHeaderVariables)(euiTheme).height;
 
@@ -107,9 +109,17 @@ var _EuiCollapsibleNavBeta = function _EuiCollapsibleNavBeta(_ref) {
   var width = (0, _react.useMemo)(function () {
     if (isOverlayFullWidth) return '100%';
     if (isPush && isCollapsed) return headerHeight;
-    return _width;
+    return "".concat(_width, "px");
   }, [_width, isOverlayFullWidth, isPush, isCollapsed, headerHeight]);
 
+  // Other UI elements may need to account for the nav width -
+  // set a global CSS variable that they can use
+  (0, _react.useEffect)(function () {
+    setGlobalCSSVariables({
+      '--euiCollapsibleNavOffset': isOverlay ? '0' : width
+    });
+  }, [width, isOverlay, setGlobalCSSVariables]);
+
   /**
    * Prop setup
    */

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

@@ -106,56 +106,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) {
@@ -260,7 +255,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,

package/optimize/lib/components/popover/input_popover.js

@@ -7,19 +7,20 @@ 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 _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
@@ -29,9 +30,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,
@@ -44,80 +49,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.defaultProps = {

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

@@ -16,7 +16,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"];
 /*
@@ -31,10 +31,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;
 var EuiTextTruncateWithWidth = function EuiTextTruncateWithWidth(_ref2) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elastic/eui",
   "description": "Elastic UI Component Library",
-  "version": "88.5.2",
+  "version": "88.5.4",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "lib",
   "module": "es",
@@ -31,12 +31,12 @@
     "lint-sass": "yarn stylelint \"**/*.scss\" --quiet-deprecation-warnings",
     "test": "yarn lint && yarn test-unit",
     "test-ci": "yarn test && yarn test-cypress",
-    "test-unit": "cross-env NODE_ENV=test jest --config ./scripts/jest/config.js",
+    "test-unit": "node ./scripts/test-unit",
     "test-a11y": "node ./scripts/a11y-testing",
     "test-staged": "yarn lint && node scripts/test-staged.js",
-    "test-cypress": "node ./scripts/cypress",
-    "test-cypress-dev": "node ./scripts/cypress --dev",
-    "test-cypress-a11y": "node ./scripts/cypress --a11y",
+    "test-cypress": "node ./scripts/test-cypress",
+    "test-cypress-dev": "yarn test-cypress --dev",
+    "test-cypress-a11y": "yarn test-cypress --a11y",
     "combine-test-coverage": "sh ./scripts/combine-coverage.sh",
     "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",
     "yo-component": "yo ./generator-eui/app/component.js",
@@ -183,6 +183,7 @@
     "dedent": "^0.7.0",
     "dts-generator": "^3.0.0",
     "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.7",
     "enzyme-to-json": "^3.5.0",
     "eslint": "^8.41.0",
     "eslint-config-prettier": "^8.8.0",

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

@@ -50,6 +50,8 @@ var _EuiCollapsibleNavBeta = function _EuiCollapsibleNavBeta(_ref) {
     side = _ref$side === void 0 ? 'left' : _ref$side,
     _focusTrapProps = _ref.focusTrapProps,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var _useEuiThemeCSSVariab = (0, _services.useEuiThemeCSSVariables)(),
+    setGlobalCSSVariables = _useEuiThemeCSSVariab.setGlobalCSSVariables;
   var euiTheme = (0, _services.useEuiTheme)();
   var headerHeight = (0, _header.euiHeaderVariables)(euiTheme).height;
 
@@ -108,9 +110,17 @@ var _EuiCollapsibleNavBeta = function _EuiCollapsibleNavBeta(_ref) {
   var width = (0, _react.useMemo)(function () {
     if (isOverlayFullWidth) return '100%';
     if (isPush && isCollapsed) return headerHeight;
-    return _width;
+    return "".concat(_width, "px");
   }, [_width, isOverlayFullWidth, isPush, isCollapsed, headerHeight]);
 
+  // Other UI elements may need to account for the nav width -
+  // set a global CSS variable that they can use
+  (0, _react.useEffect)(function () {
+    setGlobalCSSVariables({
+      '--euiCollapsibleNavOffset': isOverlay ? '0' : width
+    });
+  }, [width, isOverlay, setGlobalCSSVariables]);
+
   /**
    * Prop setup
    */