@elastic/eui 88.5.2 → 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/combo_box/combo_box_input/combo_box_input.js

@@ -104,56 +104,51 @@ export var EuiComboBoxInput = /*#__PURE__*/function (_Component) {
         }
       }
     });
-    _defineProperty(_assertThisInitialized(_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;
   }
   _createClass(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 && _typeof(singleSelectionProp) === 'object' && singleSelectionProp.asPlainText || false;
       var pills = selectedOptions ? selectedOptions.map(function (option) {
@@ -258,7 +253,9 @@ export 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,
@@ -284,9 +281,9 @@ EuiComboBoxInput.propTypes = {
   isListOpen: PropTypes.bool.isRequired,
   noIcon: PropTypes.bool.isRequired,
   onBlur: PropTypes.any,
-  onChange: PropTypes.func,
+  onChange: PropTypes.func.isRequired,
   onClear: PropTypes.func,
-  onClick: PropTypes.func,
+  onClick: PropTypes.func.isRequired,
   onCloseListClick: PropTypes.func.isRequired,
   onFocus: PropTypes.any.isRequired,
   onOpenListClick: PropTypes.func.isRequired,

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/es/components/text_truncate/text_truncate.js

@@ -1,4 +1,4 @@
-var _excluded = ["width"],
+var _excluded = ["width", "onResize"],
   _excluded2 = ["width", "children", "text", "truncation", "truncationOffset", "truncationPosition", "ellipsis", "containerRef", "className"],
   _excluded3 = ["onResize"];
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
@@ -29,10 +29,13 @@ import { jsx as ___EmotionJSX } from "@emotion/react";
 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));
 };
 EuiTextTruncate.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';
@@ -11690,7 +11690,7 @@ declare module '@elastic/eui/src/components/combo_box/combo_box_input/combo_box_
 
 }
 declare module '@elastic/eui/src/components/combo_box/combo_box_input/combo_box_input' {
-	import React, { Component, ChangeEventHandler, FocusEventHandler, KeyboardEventHandler, RefCallback } from 'react';
+	import React, { Component, FocusEventHandler, KeyboardEventHandler, RefCallback } from 'react';
 	import { CommonProps } from '@elastic/eui/src/components/common';
 	import { htmlIdGenerator } from '@elastic/eui/src/services';
 	import { EuiFormControlLayoutProps } from '@elastic/eui/src/components/form/form_control_layout';
@@ -11706,9 +11706,9 @@ declare module '@elastic/eui/src/components/combo_box/combo_box_input/combo_box_
 	    isListOpen: boolean;
 	    noIcon: boolean;
 	    onBlur?: FocusEventHandler<HTMLInputElement>;
-	    onChange?: (searchValue: string) => void;
+	    onChange: (searchValue: string) => void;
 	    onClear?: () => void;
-	    onClick?: () => void;
+	    onClick: () => void;
 	    onCloseListClick: () => void;
 	    onFocus: FocusEventHandler<HTMLInputElement>;
 	    onOpenListClick: () => void;
@@ -11743,7 +11743,6 @@ declare module '@elastic/eui/src/components/combo_box/combo_box_input/combo_box_
 	    onBlur: FocusEventHandler<HTMLInputElement>;
 	    onKeyDown: KeyboardEventHandler<HTMLInputElement>;
 	    componentDidUpdate(prevProps: EuiComboBoxInputProps<T>): void;
-	    inputOnChange: ChangeEventHandler<HTMLInputElement>;
 	    render(): React.JSX.Element;
 	}
 	export {};

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