@elastic/eui 86.0.0 → 87.1.0

package/optimize/es/components/basic_table/in_memory_table.js

@@ -9,10 +9,10 @@ import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _excluded = ["onChange"],
   _excluded2 = ["columns", "loading", "message", "error", "selection", "isSelectable", "hasActions", "compressed", "pagination", "sorting", "itemIdToExpandedRowMap", "itemId", "rowProps", "cellProps", "tableLayout", "items", "search", "onTableChange", "executeQueryOptions", "allowNeutralSort", "childrenBetween"];
-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 _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+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
@@ -23,11 +23,12 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 import React, { Component } from 'react';
 import { EuiBasicTable } from './basic_table';
-import { defaults as paginationBarDefaults } from './pagination_bar';
 import { isString } from '../../services/predicate';
 import { Comparators } from '../../services/sort';
 import { EuiSearchBar } from '../search_bar';
 import { EuiSpacer } from '../spacer';
+import { euiTablePaginationDefaults } from '../table/table_pagination';
+import { EuiComponentDefaultsContext } from '../provider/component_defaults';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 function isEuiSearchBarProps(x) {
   return typeof x !== 'boolean';
@@ -41,7 +42,7 @@ var getQueryFromSearch = function getQueryFromSearch(search, defaultQuery) {
   }
   return isString(query) ? EuiSearchBar.Query.parse(query) : query;
 };
-var getInitialPagination = function getInitialPagination(pagination) {
+var getInitialPagination = function getInitialPagination(pagination, consumerDefaults) {
   var _ref2, _pagination$pageIndex, _ref3, _pagination$pageSize;
   if (!pagination) {
     return {
@@ -49,14 +50,16 @@ var getInitialPagination = function getInitialPagination(pagination) {
       pageSize: undefined
     };
   }
+  var defaults = _objectSpread(_objectSpread({}, euiTablePaginationDefaults), consumerDefaults);
   var _ref = pagination,
     _ref$pageSizeOptions = _ref.pageSizeOptions,
-    pageSizeOptions = _ref$pageSizeOptions === void 0 ? paginationBarDefaults.pageSizeOptions : _ref$pageSizeOptions,
-    showPerPageOptions = _ref.showPerPageOptions;
-  var defaultPageSize = pageSizeOptions ? pageSizeOptions[0] : paginationBarDefaults.pageSizeOptions[0];
+    pageSizeOptions = _ref$pageSizeOptions === void 0 ? defaults.itemsPerPageOptions : _ref$pageSizeOptions,
+    _ref$showPerPageOptio = _ref.showPerPageOptions,
+    showPerPageOptions = _ref$showPerPageOptio === void 0 ? defaults.showPerPageOptions : _ref$showPerPageOptio;
+  var defaultPageSize = pageSizeOptions !== null && pageSizeOptions !== void 0 && pageSizeOptions.includes(defaults.itemsPerPage) ? defaults.itemsPerPage : pageSizeOptions[0];
   var initialPageIndex = pagination === true ? 0 : (_ref2 = (_pagination$pageIndex = pagination.pageIndex) !== null && _pagination$pageIndex !== void 0 ? _pagination$pageIndex : pagination.initialPageIndex) !== null && _ref2 !== void 0 ? _ref2 : 0;
   var initialPageSize = pagination === true ? defaultPageSize : (_ref3 = (_pagination$pageSize = pagination.pageSize) !== null && _pagination$pageSize !== void 0 ? _pagination$pageSize : pagination.initialPageSize) !== null && _ref3 !== void 0 ? _ref3 : defaultPageSize;
-  if (showPerPageOptions && initialPageSize != null && (!pageSizeOptions || !pageSizeOptions.includes(initialPageSize))) {
+  if (showPerPageOptions && initialPageSize != null && !(pageSizeOptions !== null && pageSizeOptions !== void 0 && pageSizeOptions.includes(initialPageSize))) {
     throw new Error("EuiInMemoryTable received initialPageSize ".concat(initialPageSize, ", which wasn't provided within pageSizeOptions."));
   }
   return {
@@ -109,7 +112,7 @@ function getInitialSorting(columns, sorting) {
 export var EuiInMemoryTable = /*#__PURE__*/function (_Component) {
   _inherits(EuiInMemoryTable, _Component);
   var _super = _createSuper(EuiInMemoryTable);
-  function EuiInMemoryTable(props) {
+  function EuiInMemoryTable(props, context) {
     var _this;
     _classCallCheck(this, EuiInMemoryTable);
     _this = _super.call(this, props);
@@ -212,7 +215,7 @@ export var EuiInMemoryTable = /*#__PURE__*/function (_Component) {
       _pagination = props.pagination,
       sorting = props.sorting,
       allowNeutralSort = props.allowNeutralSort;
-    var _getInitialPagination = getInitialPagination(_pagination),
+    var _getInitialPagination = getInitialPagination(_pagination, context.EuiTablePagination),
       _pageIndex = _getInitialPagination.pageIndex,
       _pageSize = _getInitialPagination.pageSize,
       pageSizeOptions = _getInitialPagination.pageSizeOptions,
@@ -487,6 +490,7 @@ export var EuiInMemoryTable = /*#__PURE__*/function (_Component) {
   }]);
   return EuiInMemoryTable;
 }(Component);
+_defineProperty(EuiInMemoryTable, "contextType", EuiComponentDefaultsContext);
 _defineProperty(EuiInMemoryTable, "defaultProps", {
   responsive: true,
   tableLayout: 'fixed'

package/optimize/es/components/basic_table/pagination_bar.js

@@ -8,30 +8,35 @@
 
 import React, { useEffect } from 'react';
 import { EuiSpacer } from '../spacer';
-import { EuiTablePagination } from '../table';
+import { EuiTablePagination, useEuiTablePaginationDefaults } from '../table/table_pagination';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-export var defaults = {
-  pageSizeOptions: [10, 25, 50]
-};
 export var PaginationBar = function PaginationBar(_ref) {
   var pagination = _ref.pagination,
     onPageSizeChange = _ref.onPageSizeChange,
     onPageChange = _ref.onPageChange,
     ariaControls = _ref['aria-controls'],
     ariaLabel = _ref['aria-label'];
-  var pageSizeOptions = pagination.pageSizeOptions ? pagination.pageSizeOptions : defaults.pageSizeOptions;
-  var pageCount = pagination.pageSize ? Math.ceil(pagination.totalItemCount / pagination.pageSize) : 1;
+  var defaults = useEuiTablePaginationDefaults();
+  var pageIndex = pagination.pageIndex,
+    totalItemCount = pagination.totalItemCount,
+    _pagination$pageSize = pagination.pageSize,
+    pageSize = _pagination$pageSize === void 0 ? defaults.itemsPerPage : _pagination$pageSize,
+    _pagination$pageSizeO = pagination.pageSizeOptions,
+    pageSizeOptions = _pagination$pageSizeO === void 0 ? defaults.itemsPerPageOptions : _pagination$pageSizeO,
+    _pagination$showPerPa = pagination.showPerPageOptions,
+    showPerPageOptions = _pagination$showPerPa === void 0 ? defaults.showPerPageOptions : _pagination$showPerPa;
+  var pageCount = pageSize ? Math.ceil(totalItemCount / pageSize) : 1;
   useEffect(function () {
-    if (pageCount < pagination.pageIndex + 1) {
+    if (pageCount < pageIndex + 1) {
       onPageChange === null || onPageChange === void 0 ? void 0 : onPageChange(pageCount - 1);
     }
-  }, [pageCount, onPageChange, pagination]);
+  }, [pageCount, onPageChange, pageIndex]);
   return ___EmotionJSX("div", null, ___EmotionJSX(EuiSpacer, {
     size: "m"
   }), ___EmotionJSX(EuiTablePagination, {
-    activePage: pagination.pageIndex,
-    showPerPageOptions: pagination.showPerPageOptions,
-    itemsPerPage: pagination.pageSize,
+    activePage: pageIndex,
+    showPerPageOptions: showPerPageOptions,
+    itemsPerPage: pageSize,
     itemsPerPageOptions: pageSizeOptions,
     pageCount: pageCount,
     onChangeItemsPerPage: onPageSizeChange,

package/optimize/es/components/breadcrumbs/breadcrumb.js

@@ -2,7 +2,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children", "className", "type", "truncate"],
-  _excluded2 = ["text", "truncate", "type", "href", "rel", "onClick", "className", "color", "isFirstBreadcrumb", "isLastBreadcrumb", "isOnlyBreadcrumb", "highlightLastBreadcrumb", "truncateLastBreadcrumb"];
+  _excluded2 = ["text", "truncate", "type", "href", "rel", "onClick", "popoverContent", "popoverProps", "className", "color", "isFirstBreadcrumb", "isLastBreadcrumb", "isOnlyBreadcrumb", "highlightLastBreadcrumb", "truncateLastBreadcrumb"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -47,6 +47,8 @@ export var EuiBreadcrumbContent = function EuiBreadcrumbContent(_ref2) {
     href = _ref2.href,
     rel = _ref2.rel,
     onClick = _ref2.onClick,
+    popoverContent = _ref2.popoverContent,
+    popoverProps = _ref2.popoverProps,
     className = _ref2.className,
     color = _ref2.color,
     isFirstBreadcrumb = _ref2.isFirstBreadcrumb,
@@ -68,65 +70,80 @@ export var EuiBreadcrumbContent = function EuiBreadcrumbContent(_ref2) {
       cssStyles.push(styles.applicationStyles.lastChild);
     }
   }
+  var isInteractiveBreadcrumb = href || onClick;
+  var linkColor = color || (highlightLastBreadcrumb ? 'text' : 'subdued');
+  var plainTextColor = highlightLastBreadcrumb ? 'default' : 'subdued'; // Does not inherit `color` prop
   var ariaCurrent = highlightLastBreadcrumb ? 'page' : undefined;
+  var isPopoverBreadcrumb = !!popoverContent;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isPopoverOpen = _useState2[0],
+    setIsPopoverOpen = _useState2[1];
+  var popoverAriaLabel = useEuiI18n('euiBreadcrumb.popoverAriaLabel', 'Clicking this button will toggle a popover dialog.');
   return ___EmotionJSX(EuiInnerText, null, function (ref, innerText) {
     var title = innerText === '' ? undefined : innerText;
-    return !href && !onClick ? ___EmotionJSX(EuiTextColor, {
-      color: highlightLastBreadcrumb ? 'default' : 'subdued',
-      cloneElement: true
-    }, ___EmotionJSX("span", _extends({
+    var sharedProps = {
       ref: ref,
       title: title,
-      "aria-current": ariaCurrent,
+      'aria-current': ariaCurrent,
       className: classes,
       css: cssStyles
-    }, rest), text)) : ___EmotionJSX(EuiLink, _extends({
-      ref: ref,
-      title: title,
-      "aria-current": ariaCurrent,
-      className: classes,
-      css: cssStyles,
-      color: color || (highlightLastBreadcrumb ? 'text' : 'subdued'),
-      onClick: onClick,
-      href: href,
-      rel: rel
-    }, rest), text);
+    };
+    if (isPopoverBreadcrumb) {
+      return ___EmotionJSX(EuiPopover, _extends({}, popoverProps, {
+        isOpen: isPopoverOpen,
+        closePopover: function closePopover() {
+          return setIsPopoverOpen(false);
+        },
+        button: ___EmotionJSX(EuiLink, _extends({}, sharedProps, {
+          color: linkColor
+          // Avoid passing href and onClick - should only toggle the popover
+          ,
+          onClick: function onClick() {
+            return setIsPopoverOpen(function (isOpen) {
+              return !isOpen;
+            });
+          }
+        }, rest), text, ' ', ___EmotionJSX(EuiIcon, {
+          type: "arrowDown",
+          size: "s",
+          "aria-label": " - ".concat(popoverAriaLabel)
+        }))
+      }), popoverContent);
+    } else if (isInteractiveBreadcrumb) {
+      return ___EmotionJSX(EuiLink, _extends({}, sharedProps, {
+        color: linkColor,
+        onClick: onClick,
+        href: href,
+        rel: rel
+      }, rest), text);
+    } else {
+      return ___EmotionJSX(EuiTextColor, {
+        color: plainTextColor,
+        cloneElement: true
+      }, ___EmotionJSX("span", _extends({}, sharedProps, rest), text));
+    }
   });
 };
 export var EuiBreadcrumbCollapsed = function EuiBreadcrumbCollapsed(_ref3) {
   var children = _ref3.children,
     isFirstBreadcrumb = _ref3.isFirstBreadcrumb,
     type = _ref3.type;
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    isPopoverOpen = _useState2[0],
-    setIsPopoverOpen = _useState2[1];
   var euiTheme = useEuiTheme();
   var styles = euiBreadcrumbStyles(euiTheme);
   var cssStyles = [styles.isCollapsed];
   var ariaLabel = useEuiI18n('euiBreadcrumb.collapsedBadge.ariaLabel', 'See collapsed breadcrumbs');
-  var ellipsisButton = ___EmotionJSX(EuiBreadcrumbContent, {
-    "aria-label": ariaLabel,
+  return ___EmotionJSX(EuiBreadcrumb, {
+    css: cssStyles,
+    type: type
+  }, ___EmotionJSX(EuiBreadcrumbContent, {
+    popoverContent: children,
+    text: ___EmotionJSX("span", {
+      "aria-label": ariaLabel
+    }, "\u2026"),
     title: ariaLabel,
-    onClick: function onClick() {
-      return setIsPopoverOpen(!isPopoverOpen);
-    },
     truncate: false,
-    text: ___EmotionJSX(React.Fragment, null, "\u2026 ", ___EmotionJSX(EuiIcon, {
-      type: "arrowDown",
-      size: "s"
-    })),
     isFirstBreadcrumb: isFirstBreadcrumb,
     type: type
-  });
-  return ___EmotionJSX(EuiBreadcrumb, {
-    css: cssStyles,
-    type: type
-  }, ___EmotionJSX(EuiPopover, {
-    button: ellipsisButton,
-    isOpen: isPopoverOpen,
-    closePopover: function closePopover() {
-      return setIsPopoverOpen(false);
-    }
-  }, children));
+  }));
 };

package/optimize/es/components/code/code_block_virtualized.js

@@ -44,26 +44,34 @@ export var EuiCodeBlockVirtualized = function EuiCodeBlockVirtualized(_ref) {
       }, codeProps));
     });
   }, [codeProps]);
-  return ___EmotionJSX(EuiAutoSizer, {
-    disableHeight: typeof overflowHeight === 'number'
+  var virtualizationProps = {
+    itemData: data,
+    itemSize: rowHeight,
+    itemCount: data.length,
+    outerElementType: VirtualizedOuterElement,
+    innerElementType: VirtualizedInnerElement
+  };
+  return typeof overflowHeight === 'number' ? ___EmotionJSX(EuiAutoSizer, {
+    disableHeight: true
   }, function (_ref4) {
-    var height = _ref4.height,
-      width = _ref4.width;
-    return ___EmotionJSX(FixedSizeList, {
-      height: height !== null && height !== void 0 ? height : overflowHeight,
-      width: width,
-      itemData: data,
-      itemSize: rowHeight,
-      itemCount: data.length,
-      outerElementType: VirtualizedOuterElement,
-      innerElementType: VirtualizedInnerElement
-    }, ListRow);
+    var width = _ref4.width;
+    return ___EmotionJSX(FixedSizeList, _extends({
+      height: overflowHeight,
+      width: width
+    }, virtualizationProps), ListRow);
+  }) : ___EmotionJSX(EuiAutoSizer, null, function (_ref5) {
+    var height = _ref5.height,
+      width = _ref5.width;
+    return ___EmotionJSX(FixedSizeList, _extends({
+      height: height,
+      width: width
+    }, virtualizationProps), ListRow);
   });
 };
-var ListRow = function ListRow(_ref5) {
-  var data = _ref5.data,
-    index = _ref5.index,
-    style = _ref5.style;
+var ListRow = function ListRow(_ref6) {
+  var data = _ref6.data,
+    index = _ref6.index,
+    style = _ref6.style;
   var row = data[index];
   row.properties.style = logicalStyles(style);
   return nodeToHtml(row, index, data, 0);

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

@@ -1,4 +1,11 @@
 import _extends from "@babel/runtime/helpers/extends";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["id", "children", "className", "style", "initialIsCollapsed", "width", "side", "focusTrapProps"];
+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
@@ -7,20 +14,155 @@ import _extends from "@babel/runtime/helpers/extends";
  * Side Public License, v 1.
  */
 
-import React from 'react';
-import { useEuiTheme } from '../../services';
-import { EuiCollapsibleNav } from '../collapsible_nav/collapsible_nav';
+import React, { useRef, useMemo, useState, useEffect, useCallback } from 'react';
+import classNames from 'classnames';
+import { useEuiTheme, useGeneratedHtmlId, throttle } from '../../services';
+import { mathWithUnits, logicalStyle } from '../../global_styling';
+import { EuiFlyout } from '../flyout';
+import { useEuiI18n } from '../i18n';
+import { euiHeaderVariables } from '../header/header.styles';
+import { EuiCollapsibleNavContext } from './context';
+import { EuiCollapsibleNavButton } from './collapsible_nav_button';
 import { euiCollapsibleNavBetaStyles } from './collapsible_nav_beta.styles';
-
-/**
- * TODO: Actual component in a follow-up PR
- */
 import { jsx as ___EmotionJSX } from "@emotion/react";
-export var EuiCollapsibleNavBeta = function EuiCollapsibleNavBeta(props) {
+export var EuiCollapsibleNavBeta = function EuiCollapsibleNavBeta(_ref) {
+  var id = _ref.id,
+    children = _ref.children,
+    className = _ref.className,
+    style = _ref.style,
+    _ref$initialIsCollaps = _ref.initialIsCollapsed,
+    initialIsCollapsed = _ref$initialIsCollaps === void 0 ? false : _ref$initialIsCollaps,
+    _ref$width = _ref.width,
+    _width = _ref$width === void 0 ? 248 : _ref$width,
+    _ref$side = _ref.side,
+    side = _ref$side === void 0 ? 'left' : _ref$side,
+    _focusTrapProps = _ref.focusTrapProps,
+    rest = _objectWithoutProperties(_ref, _excluded);
   var euiTheme = useEuiTheme();
+  var headerHeight = euiHeaderVariables(euiTheme).height;
+
+  /**
+   * Collapsed state
+   */
+  var _useState = useState(initialIsCollapsed),
+    _useState2 = _slicedToArray(_useState, 2),
+    isCollapsed = _useState2[0],
+    setIsCollapsed = _useState2[1];
+  var toggleCollapsed = useCallback(function () {
+    return setIsCollapsed(function (isCollapsed) {
+      return !isCollapsed;
+    });
+  }, []);
+  var onClose = useCallback(function () {
+    return setIsCollapsed(true);
+  }, []);
+
+  /**
+   * Responsive behavior
+   * By default on large enough screens, the nav is always a push flyout,
+   * but on smaller/mobile screens, the nav overlays the page instead
+   */
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isOverlay = _useState4[0],
+    setIsOverlay = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isOverlayFullWidth = _useState6[0],
+    setIsOverlayFullWidth = _useState6[1];
+  var flyoutType = isOverlay ? 'overlay' : 'push';
+  var isPush = !isOverlay;
+
+  // Set up a window resize listener that determines breakpoint behavior
+  useEffect(function () {
+    var getBreakpoints = function getBreakpoints() {
+      setIsOverlay(window.innerWidth < _width * 3);
+      setIsOverlayFullWidth(window.innerWidth < _width * 1.5);
+    };
+    getBreakpoints();
+    var onWindowResize = throttle(getBreakpoints, 50);
+    window.addEventListener('resize', onWindowResize);
+    return function () {
+      return window.removeEventListener('resize', onWindowResize);
+    };
+  }, [_width]);
+
+  // If the nav was previously uncollapsed and shrinks down to the
+  // overlay flyout, default to its hidden/collapsed state
+  useEffect(function () {
+    if (isOverlay) setIsCollapsed(true);
+  }, [isOverlay]);
+  var width = useMemo(function () {
+    if (isOverlayFullWidth) return '100%';
+    if (isPush && isCollapsed) return headerHeight;
+    return _width;
+  }, [_width, isOverlayFullWidth, isPush, isCollapsed, headerHeight]);
+
+  /**
+   * Header affordance
+   */
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    fixedHeadersCount = _useState8[0],
+    setFixedHeadersCount = _useState8[1];
+  useEffect(function () {
+    setFixedHeadersCount(document.querySelectorAll('.euiHeader[data-fixed-header]').length);
+  }, []);
+  var stylesWithHeaderOffset = useMemo(function () {
+    if (!fixedHeadersCount) return style;
+    var headersOffset = mathWithUnits(headerHeight, function (x) {
+      return x * fixedHeadersCount;
+    });
+    return _objectSpread(_objectSpread(_objectSpread({}, style), logicalStyle('top', headersOffset)), logicalStyle('height', "calc(100% - ".concat(headersOffset, ")")));
+  }, [fixedHeadersCount, style, headerHeight]);
+
+  /**
+   * Prop setup
+   */
+  var flyoutID = useGeneratedHtmlId({
+    conditionalId: id,
+    suffix: 'euiCollapsibleNav'
+  });
+  var defaultAriaLabel = useEuiI18n('euiCollapsibleNavBeta.ariaLabel', 'Site menu');
+  var buttonRef = useRef(null);
+  var focusTrapProps = useMemo(function () {
+    return _objectSpread(_objectSpread({}, _focusTrapProps), {}, {
+      shards: [buttonRef].concat(_toConsumableArray((_focusTrapProps === null || _focusTrapProps === void 0 ? void 0 : _focusTrapProps.shards) || []))
+    });
+  }, [_focusTrapProps]);
+  var classes = classNames('euiCollapsibleNav', 'euiCollapsibleNavBeta', className);
   var styles = euiCollapsibleNavBetaStyles(euiTheme);
-  return ___EmotionJSX(EuiCollapsibleNav, _extends({
-    css: styles.euiCollapsibleNavBeta,
-    size: 248
-  }, props));
+  var cssStyles = [styles.euiCollapsibleNavBeta, styles[side], isPush && styles.isPush, isPush && isCollapsed && styles.isPushCollapsed, isOverlayFullWidth && styles.isOverlayFullWidth];
+
+  // Wait for any fixed headers to be queried before rendering (prevents position jumping)
+  var flyout = fixedHeadersCount !== false && ___EmotionJSX(EuiFlyout, _extends({
+    "aria-label": defaultAriaLabel
+  }, rest, {
+    // EuiCollapsibleNav is significantly less permissive than EuiFlyout
+    id: flyoutID,
+    css: cssStyles,
+    className: classes,
+    style: stylesWithHeaderOffset,
+    size: width,
+    side: side,
+    focusTrapProps: focusTrapProps,
+    as: "nav",
+    type: flyoutType,
+    paddingSize: "none",
+    pushMinBreakpoint: "xs",
+    onClose: onClose,
+    hideCloseButton: true
+  }), children);
+  var hideFlyout = isOverlay && isCollapsed;
+  return ___EmotionJSX(EuiCollapsibleNavContext.Provider, {
+    value: {
+      isPush: isPush,
+      isCollapsed: isCollapsed,
+      side: side
+    }
+  }, ___EmotionJSX(EuiCollapsibleNavButton, {
+    ref: buttonRef,
+    onClick: toggleCollapsed,
+    "aria-controls": flyoutID
+  }), !hideFlyout && flyout);
 };

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

@@ -1,3 +1,4 @@
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -7,10 +8,24 @@
  */
 
 import { css } from '@emotion/react';
-import { logicalCSS } from '../../global_styling';
+import { logicalCSS, euiYScroll } from '../../global_styling';
+import { euiShadowFlat } from '../../themes';
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "1adm1dw-isPushCollapsed",
+  styles: "&,.euiFlyoutBody__overflow{scrollbar-width:none;&::-webkit-scrollbar{display:none;}};label:isPushCollapsed;"
+} : {
+  name: "1adm1dw-isPushCollapsed",
+  styles: "&,.euiFlyoutBody__overflow{scrollbar-width:none;&::-webkit-scrollbar{display:none;}};label:isPushCollapsed;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
 export var euiCollapsibleNavBetaStyles = function euiCollapsibleNavBetaStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
-    euiCollapsibleNavBeta: /*#__PURE__*/css(logicalCSS('border-top', euiTheme.border.thin), " ", logicalCSS('border-right', euiTheme.border.thin), " .euiFlyoutFooter{background-color:", euiTheme.colors.emptyShade, ";", logicalCSS('border-top', euiTheme.border.thin), ";};label:euiCollapsibleNavBeta;")
+    euiCollapsibleNavBeta: /*#__PURE__*/css(logicalCSS('padding-bottom', euiTheme.size.xs), euiYScroll(euiThemeContext), ".euiFlyoutBody{", logicalCSS('min-height', '50%'), ";}.euiFlyoutFooter{background-color:", euiTheme.colors.emptyShade, ";", logicalCSS('border-top', euiTheme.border.thin), ";};label:euiCollapsibleNavBeta;"),
+    left: /*#__PURE__*/css(logicalCSS('border-right', euiTheme.border.thin), ";;label:left;"),
+    right: /*#__PURE__*/css(logicalCSS('border-left', euiTheme.border.thin), ";;label:right;"),
+    isPush: /*#__PURE__*/css(euiShadowFlat(euiThemeContext), ";;label:isPush;"),
+    isPushCollapsed: _ref,
+    isOverlayFullWidth: /*#__PURE__*/css("&.euiFlyout{", logicalCSS('max-width', '100% !important'), ";};label:isOverlayFullWidth;")
   };
 };

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

@@ -0,0 +1,62 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["className", "css"];
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React, { forwardRef, useContext } from 'react';
+import { useEuiTheme } from '../../../services';
+import { EuiButtonIcon } from '../../button';
+import { useEuiI18n } from '../../i18n';
+import { EuiCollapsibleNavContext } from '../context';
+import { euiCollapsibleNavButtonWrapperStyles } from './collapsible_nav_button.styles';
+import classNames from 'classnames';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export var EuiCollapsibleNavButton = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    css = _ref.css,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _useContext = useContext(EuiCollapsibleNavContext),
+    side = _useContext.side,
+    isPush = _useContext.isPush,
+    isCollapsed = _useContext.isCollapsed;
+  var euiTheme = useEuiTheme();
+  var styles = euiCollapsibleNavButtonWrapperStyles(euiTheme);
+  var cssStyles = [styles.euiCollapsibleNavButtonWrapper, styles[side]];
+  var buttonStyles = [styles.euiCollapsibleNavButton, css];
+  var classes = classNames('euiCollapsibleNavButton', className);
+  var iconType;
+  if (isPush) {
+    if (side === 'left') {
+      iconType = isCollapsed ? 'menuRight' : 'menuLeft';
+    } else {
+      iconType = isCollapsed ? 'menuLeft' : 'menuRight';
+    }
+  } else {
+    iconType = isCollapsed ? 'menu' : 'cross';
+  }
+  var toggleOpenLabel = useEuiI18n('euiCollapsibleNavButton.ariaLabelOpen', 'Toggle navigation open');
+  var toggleCloselLabel = useEuiI18n('euiCollapsibleNavButton.ariaLabelClose', 'Toggle navigation closed');
+  var ariaLabel = isCollapsed ? toggleOpenLabel : toggleCloselLabel;
+  return ___EmotionJSX("div", {
+    className: "euiCollapsibleNavButtonWrapper",
+    css: cssStyles,
+    ref: ref
+  }, ___EmotionJSX(EuiButtonIcon, _extends({
+    "data-test-subj": "euiCollapsibleNavButton",
+    className: classes,
+    css: buttonStyles,
+    size: "s",
+    color: "text",
+    iconType: iconType,
+    "aria-label": ariaLabel,
+    "aria-pressed": !isCollapsed,
+    "aria-expanded": !isCollapsed
+  }, rest)));
+});
+EuiCollapsibleNavButton.displayName = 'EuiCollapsibleNavButton';

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

@@ -0,0 +1,32 @@
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css } from '@emotion/react';
+import { logicalCSS, logicalSizeCSS } from '../../../global_styling';
+import { euiHeaderVariables } from '../../header/header.styles';
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "msjxar-euiCollapsibleNavButton",
+  styles: "&.euiButtonIcon:hover{transform:none;};label:euiCollapsibleNavButton;"
+} : {
+  name: "msjxar-euiCollapsibleNavButton",
+  styles: "&.euiButtonIcon:hover{transform:none;};label:euiCollapsibleNavButton;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+export var euiCollapsibleNavButtonWrapperStyles = function euiCollapsibleNavButtonWrapperStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var _euiHeaderVariables = euiHeaderVariables(euiThemeContext),
+    height = _euiHeaderVariables.height,
+    padding = _euiHeaderVariables.padding;
+  return {
+    euiCollapsibleNavButtonWrapper: /*#__PURE__*/css("display:flex;align-items:center;justify-content:center;", logicalSizeCSS(height), ";;label:euiCollapsibleNavButtonWrapper;"),
+    euiCollapsibleNavButton: _ref,
+    left: /*#__PURE__*/css(logicalCSS('border-right', euiTheme.border.thin), " ", logicalCSS('margin-left', "-".concat(padding)), " ", logicalCSS('margin-right', padding), ";;label:left;"),
+    right: /*#__PURE__*/css(logicalCSS('border-left', euiTheme.border.thin), " ", logicalCSS('margin-right', "-".concat(padding)), " ", logicalCSS('margin-left', padding), ";;label:right;")
+  };
+};

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

@@ -0,0 +1,9 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export { EuiCollapsibleNavButton } from './collapsible_nav_button';