@elastic/eui 88.5.3 → 88.5.4

package/es/components/collapsible_nav_beta/collapsible_nav_beta.js

@@ -29,7 +29,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import React, { useRef, useMemo, useState, useEffect, useCallback } from 'react';
 import PropTypes from "prop-types";
 import classNames from 'classnames';
-import { useEuiTheme, useGeneratedHtmlId, throttle } from '../../services';
+import { useEuiTheme, useEuiThemeCSSVariables, useGeneratedHtmlId, throttle } from '../../services';
 import { EuiFlyout } from '../flyout';
 import { useEuiI18n } from '../i18n';
 import { euiHeaderVariables } from '../header/header.styles';
@@ -49,6 +49,8 @@ var _EuiCollapsibleNavBeta = function _EuiCollapsibleNavBeta(_ref) {
     side = _ref$side === void 0 ? 'left' : _ref$side,
     _focusTrapProps = _ref.focusTrapProps,
     rest = _objectWithoutProperties(_ref, _excluded);
+  var _useEuiThemeCSSVariab = useEuiThemeCSSVariables(),
+    setGlobalCSSVariables = _useEuiThemeCSSVariab.setGlobalCSSVariables;
   var euiTheme = useEuiTheme();
   var headerHeight = euiHeaderVariables(euiTheme).height;
 
@@ -107,9 +109,17 @@ var _EuiCollapsibleNavBeta = function _EuiCollapsibleNavBeta(_ref) {
   var width = 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
+  useEffect(function () {
+    setGlobalCSSVariables({
+      '--euiCollapsibleNavOffset': isOverlay ? '0' : width
+    });
+  }, [width, isOverlay, setGlobalCSSVariables]);
+
   /**
    * Prop setup
    */

package/es/components/popover/input_popover.js

@@ -1,5 +1,11 @@
-var _excluded = ["children", "className", "disableFocusTrap", "focusTrapProps", "input", "fullWidth", "panelMinWidth", "onPanelResize", "inputRef", "panelRef"];
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+var _excluded = ["children", "className", "closePopover", "disableFocusTrap", "focusTrapProps", "input", "fullWidth", "panelMinWidth", "onPanelResize", "inputRef", "panelRef"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+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; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
@@ -16,21 +22,23 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
  * Side Public License, v 1.
  */
 
-import React, { useState, useEffect, useCallback, useRef } from 'react';
+import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react';
 import PropTypes from "prop-types";
+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,
@@ -43,80 +51,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.propTypes = {
   className: PropTypes.string,

package/eui.d.ts

@@ -4785,6 +4785,67 @@ declare module '@elastic/eui/src/services/number/number' {
 declare module '@elastic/eui/src/services/number' {
 	export * from '@elastic/eui/src/services/number/number';
 
+}
+declare module '@elastic/eui/src/components/observer/observer' {
+	import { Component, ReactNode } from 'react';
+	interface BaseProps {
+	    /**
+	     * ReactNode to render as this component's content
+	     */
+	    children: (ref: any) => ReactNode;
+	}
+	export interface Observer {
+	    disconnect: () => void;
+	    observe: (element: Element, options?: {
+	        [key: string]: any;
+	    }) => void;
+	}
+	export class EuiObserver<Props extends BaseProps> extends Component<Props> {
+	    protected name: string;
+	    protected childNode: null | Element;
+	    protected observer: null | Observer;
+	    componentDidMount(): void;
+	    componentWillUnmount(): void;
+	    updateChildNode: (ref: Element) => void;
+	    beginObserve: () => void;
+	    render(): ReactNode;
+	}
+	export {};
+
+}
+declare module '@elastic/eui/src/components/observer/resize_observer/resize_observer' {
+	import { ReactNode } from 'react';
+	import { EuiObserver } from '@elastic/eui/src/components/observer/observer';
+	export interface EuiResizeObserverProps {
+	    /**
+	     * ReactNode to render as this component's content
+	     */
+	    children: (ref: (e: HTMLElement | null) => void) => ReactNode;
+	    onResize: (dimensions: {
+	        height: number;
+	        width: number;
+	    }) => void;
+	}
+	export const hasResizeObserver: boolean;
+	export class EuiResizeObserver extends EuiObserver<EuiResizeObserverProps> {
+	    name: string;
+	    state: {
+	        height: number;
+	        width: number;
+	    };
+	    onResize: ResizeObserverCallback;
+	    beginObserve: () => void;
+	}
+	export const useResizeObserver: (container: Element | null, dimension?: "height" | "width" | undefined) => {
+	    width: number;
+	    height: number;
+	};
+
+}
+declare module '@elastic/eui/src/components/observer/resize_observer' {
+	export type { EuiResizeObserverProps } from '@elastic/eui/src/components/observer/resize_observer/resize_observer';
+	export { EuiResizeObserver, useResizeObserver } from '@elastic/eui/src/components/observer/resize_observer/resize_observer';
+
 }
 declare module '@elastic/eui/src/components/portal/portal' {
 	/**
@@ -4951,67 +5012,6 @@ declare module '@elastic/eui/src/components/table/table_header_cell_checkbox' {
 	}
 	export const EuiTableHeaderCellCheckbox: FunctionComponent<CommonProps & ThHTMLAttributes<HTMLTableHeaderCellElement> & EuiTableHeaderCellCheckboxProps>;
 
-}
-declare module '@elastic/eui/src/components/observer/observer' {
-	import { Component, ReactNode } from 'react';
-	interface BaseProps {
-	    /**
-	     * ReactNode to render as this component's content
-	     */
-	    children: (ref: any) => ReactNode;
-	}
-	export interface Observer {
-	    disconnect: () => void;
-	    observe: (element: Element, options?: {
-	        [key: string]: any;
-	    }) => void;
-	}
-	export class EuiObserver<Props extends BaseProps> extends Component<Props> {
-	    protected name: string;
-	    protected childNode: null | Element;
-	    protected observer: null | Observer;
-	    componentDidMount(): void;
-	    componentWillUnmount(): void;
-	    updateChildNode: (ref: Element) => void;
-	    beginObserve: () => void;
-	    render(): ReactNode;
-	}
-	export {};
-
-}
-declare module '@elastic/eui/src/components/observer/resize_observer/resize_observer' {
-	import { ReactNode } from 'react';
-	import { EuiObserver } from '@elastic/eui/src/components/observer/observer';
-	export interface EuiResizeObserverProps {
-	    /**
-	     * ReactNode to render as this component's content
-	     */
-	    children: (ref: (e: HTMLElement | null) => void) => ReactNode;
-	    onResize: (dimensions: {
-	        height: number;
-	        width: number;
-	    }) => void;
-	}
-	export const hasResizeObserver: boolean;
-	export class EuiResizeObserver extends EuiObserver<EuiResizeObserverProps> {
-	    name: string;
-	    state: {
-	        height: number;
-	        width: number;
-	    };
-	    onResize: ResizeObserverCallback;
-	    beginObserve: () => void;
-	}
-	export const useResizeObserver: (container: Element | null, dimension?: "height" | "width" | undefined) => {
-	    width: number;
-	    height: number;
-	};
-
-}
-declare module '@elastic/eui/src/components/observer/resize_observer' {
-	export type { EuiResizeObserverProps } from '@elastic/eui/src/components/observer/resize_observer/resize_observer';
-	export { EuiResizeObserver, useResizeObserver } from '@elastic/eui/src/components/observer/resize_observer/resize_observer';
-
 }
 declare module '@elastic/eui/src/themes/amsterdam' {
 	export * from '@elastic/eui/src/themes/amsterdam/global_styling/mixins/shadow';

package/i18ntokens.json

@@ -455,14 +455,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 151,
+        "line": 165,
         "column": 27,
-        "index": 5087
+        "index": 5469
       },
       "end": {
-        "line": 154,
+        "line": 168,
         "column": 3,
-        "index": 5157
+        "index": 5539
       }
     },
     "filepath": "src/components/collapsible_nav_beta/collapsible_nav_beta.tsx"

package/lib/components/collapsible_nav_beta/collapsible_nav_beta.js

@@ -61,6 +61,8 @@ var _EuiCollapsibleNavBeta = function _EuiCollapsibleNavBeta(_ref) {
     side = _ref$side === void 0 ? 'left' : _ref$side,
     _focusTrapProps = _ref.focusTrapProps,
     rest = _objectWithoutProperties(_ref, _excluded);
+  var _useEuiThemeCSSVariab = (0, _services.useEuiThemeCSSVariables)(),
+    setGlobalCSSVariables = _useEuiThemeCSSVariab.setGlobalCSSVariables;
   var euiTheme = (0, _services.useEuiTheme)();
   var headerHeight = (0, _header.euiHeaderVariables)(euiTheme).height;
 
@@ -119,9 +121,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/lib/components/popover/input_popover.js

@@ -7,16 +7,16 @@ Object.defineProperty(exports, "__esModule", {
 exports.EuiInputPopover = void 0;
 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
@@ -28,6 +28,11 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 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 _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+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; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
@@ -37,8 +42,10 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = 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,
@@ -51,80 +58,92 @@ var EuiInputPopover = function EuiInputPopover(_ref) {
     _inputRef = _ref.inputRef,
     _panelRef = _ref.panelRef,
     props = _objectWithoutProperties(_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 = _slicedToArray(_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 = _slicedToArray(_useState3, 2),
-    inputElWidth = _useState4[0],
-    setInputElWidth = _useState4[1];
-  var _useState5 = (0, _react.useState)(null),
-    _useState6 = _slicedToArray(_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, _extends({
     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, _extends({
+    ref: popoverClassRef,
+    closePopover: closePopover
+  }, props, {
+    panelProps: _objectSpread(_objectSpread({}, props.panelProps), {}, {
+      onKeyDown: onKeyDown
+    })
+  }), (0, _react2.jsx)(_focus_trap.EuiFocusTrap, _extends({
     clickOutsideDisables: true,
     disabled: disableFocusTrap
-  }, focusTrapProps), (0, _react2.jsx)("div", {
-    onKeyDown: onKeyDown
-  }, children)));
+  }, focusTrapProps), children));
 };
 exports.EuiInputPopover = EuiInputPopover;
 EuiInputPopover.propTypes = {

package/optimize/es/components/collapsible_nav_beta/collapsible_nav_beta.js

@@ -16,7 +16,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 import React, { useRef, useMemo, useState, useEffect, useCallback } from 'react';
 import classNames from 'classnames';
-import { useEuiTheme, useGeneratedHtmlId, throttle } from '../../services';
+import { useEuiTheme, useEuiThemeCSSVariables, useGeneratedHtmlId, throttle } from '../../services';
 import { EuiFlyout } from '../flyout';
 import { useEuiI18n } from '../i18n';
 import { euiHeaderVariables } from '../header/header.styles';
@@ -36,6 +36,8 @@ var _EuiCollapsibleNavBeta = function _EuiCollapsibleNavBeta(_ref) {
     side = _ref$side === void 0 ? 'left' : _ref$side,
     _focusTrapProps = _ref.focusTrapProps,
     rest = _objectWithoutProperties(_ref, _excluded);
+  var _useEuiThemeCSSVariab = useEuiThemeCSSVariables(),
+    setGlobalCSSVariables = _useEuiThemeCSSVariab.setGlobalCSSVariables;
   var euiTheme = useEuiTheme();
   var headerHeight = euiHeaderVariables(euiTheme).height;
 
@@ -94,9 +96,17 @@ var _EuiCollapsibleNavBeta = function _EuiCollapsibleNavBeta(_ref) {
   var width = 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
+  useEffect(function () {
+    setGlobalCSSVariables({
+      '--euiCollapsibleNavOffset': isOverlay ? '0' : width
+    });
+  }, [width, isOverlay, setGlobalCSSVariables]);
+
   /**
    * Prop setup
    */

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/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/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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elastic/eui",
   "description": "Elastic UI Component Library",
-  "version": "88.5.3",
+  "version": "88.5.4",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "lib",
   "module": "es",

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
    */

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 = {