@elastic/eui 60.1.1 → 60.3.0

package/optimize/es/components/datagrid/body/data_grid_body.js

@@ -52,7 +52,8 @@ export var Cell = function Cell(_ref) {
       schemaDetectors = data.schemaDetectors,
       rowHeightsOptions = data.rowHeightsOptions,
       rowHeightUtils = data.rowHeightUtils,
-      rowManager = data.rowManager;
+      rowManager = data.rowManager,
+      pagination = data.pagination;
   var popoverContext = useContext(DataGridCellPopoverContext);
 
   var _useContext = useContext(DataGridWrapperRowsContext),
@@ -91,7 +92,8 @@ export var Cell = function Cell(_ref) {
     rowHeightUtils: rowHeightUtils,
     setRowHeight: isFirstColumn ? setRowHeight : undefined,
     rowManager: rowManager,
-    popoverContext: popoverContext
+    popoverContext: popoverContext,
+    pagination: pagination
   };
 
   if (isLeadingControlColumn) {
@@ -385,13 +387,16 @@ export var EuiDataGridBody = function EuiDataGridBody(props) {
     }
   }, ___EmotionJSX(Grid, _extends({}, virtualizationOptions ? virtualizationOptions : {}, {
     ref: gridRef,
+    className: classNames('euiDataGrid__virtualized', virtualizationOptions === null || virtualizationOptions === void 0 ? void 0 : virtualizationOptions.className),
     onItemsRendered: function onItemsRendered(itemsRendered) {
+      var _virtualizationOption;
+
       gridItemsRendered.current = itemsRendered;
+      virtualizationOptions === null || virtualizationOptions === void 0 ? void 0 : (_virtualizationOption = virtualizationOptions.onItemsRendered) === null || _virtualizationOption === void 0 ? void 0 : _virtualizationOption.call(virtualizationOptions, itemsRendered);
     },
     innerElementType: InnerElement,
     outerRef: outerGridRef,
     innerRef: innerGridRef,
-    className: "euiDataGrid__virtualized",
     columnCount: visibleColCount,
     width: finalWidth,
     columnWidth: getColumnWidth,
@@ -412,7 +417,8 @@ export var EuiDataGridBody = function EuiDataGridBody(props) {
       interactiveCellId: interactiveCellId,
       rowHeightsOptions: rowHeightsOptions,
       rowHeightUtils: rowHeightUtils,
-      rowManager: rowManager
+      rowManager: rowManager,
+      pagination: pagination
     },
     rowCount: IS_JEST_ENVIRONMENT || headerRowHeight > 0 ? visibleRowCount : 0
   }), Cell), scrollBorderOverlay) : null;

package/optimize/es/components/datagrid/body/data_grid_cell.js

@@ -7,8 +7,8 @@ import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["renderCellValue", "column", "setCellContentsRef", "rowHeightsOptions", "rowIndex", "colIndex", "rowHeightUtils", "isDefinedHeight"],
-    _excluded2 = ["width", "popoverContext", "interactiveCellId", "columnType", "className", "column", "style", "rowHeightUtils", "rowHeightsOptions", "rowManager"],
+var _excluded = ["renderCellValue", "column", "setCellContentsRef", "rowHeightsOptions", "rowIndex", "colIndex", "ariaRowIndex", "rowHeightUtils", "isDefinedHeight"],
+    _excluded2 = ["width", "popoverContext", "interactiveCellId", "columnType", "className", "column", "style", "rowHeightUtils", "rowHeightsOptions", "rowManager", "pagination"],
     _excluded3 = ["isExpandable", "style", "className", "data-test-subj"];
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
@@ -33,7 +33,7 @@ import { tabbable } from 'tabbable';
 import { keys } from '../../../services';
 import { EuiScreenReaderOnly } from '../../accessibility';
 import { EuiFocusTrap } from '../../focus_trap';
-import { useEuiI18n } from '../../i18n';
+import { EuiI18n } from '../../i18n';
 import { hasResizeObserver } from '../../observer/resize_observer/resize_observer';
 import { DataGridFocusContext } from '../utils/focus';
 import { EuiDataGridCellActions, EuiDataGridCellPopoverActions } from './data_grid_cell_actions';
@@ -47,16 +47,13 @@ var EuiDataGridCellContent = /*#__PURE__*/memo(function (_ref) {
       rowHeightsOptions = _ref.rowHeightsOptions,
       rowIndex = _ref.rowIndex,
       colIndex = _ref.colIndex,
+      ariaRowIndex = _ref.ariaRowIndex,
       rowHeightUtils = _ref.rowHeightUtils,
       isDefinedHeight = _ref.isDefinedHeight,
       rest = _objectWithoutProperties(_ref, _excluded);
 
   // React is more permissible than the TS types indicate
   var CellElement = renderCellValue;
-  var positionText = useEuiI18n('euiDataGridCell.position', 'Row: {row}; Column: {col}', {
-    row: rowIndex + 1,
-    col: colIndex + 1
-  });
   return ___EmotionJSX(React.Fragment, null, ___EmotionJSX("div", {
     ref: setCellContentsRef,
     "data-datagrid-cellcontent": true,
@@ -68,7 +65,15 @@ var EuiDataGridCellContent = /*#__PURE__*/memo(function (_ref) {
     rowIndex: rowIndex,
     colIndex: colIndex,
     schema: (column === null || column === void 0 ? void 0 : column.schema) || rest.columnType
-  }, rest))), ___EmotionJSX(EuiScreenReaderOnly, null, ___EmotionJSX("p", null, positionText)));
+  }, rest))), ___EmotionJSX(EuiScreenReaderOnly, null, ___EmotionJSX("p", null, '- ', ___EmotionJSX(EuiI18n, {
+    token: "euiDataGridCell.position",
+    default: "{columnId}, column {col}, row {row}",
+    values: {
+      columnId: (column === null || column === void 0 ? void 0 : column.displayAsText) || rest.columnId,
+      col: colIndex + 1,
+      row: ariaRowIndex
+    }
+  }))));
 });
 export var EuiDataGridCell = /*#__PURE__*/function (_Component) {
   _inherits(EuiDataGridCell, _Component);
@@ -473,6 +478,7 @@ export var EuiDataGridCell = /*#__PURE__*/function (_Component) {
           rowHeightUtils = _this$props8.rowHeightUtils,
           rowHeightsOptions = _this$props8.rowHeightsOptions,
           rowManager = _this$props8.rowManager,
+          pagination = _this$props8.pagination,
           rest = _objectWithoutProperties(_this$props8, _excluded2);
 
       var rowIndex = rest.rowIndex,
@@ -482,6 +488,7 @@ export var EuiDataGridCell = /*#__PURE__*/function (_Component) {
       var popoverIsOpen = this.isPopoverOpen();
       var showCellActions = this.state.isFocused || this.state.isEntered || this.state.enableInteractions || popoverIsOpen;
       var cellClasses = classNames('euiDataGridRowCell', (_classNames = {}, _defineProperty(_classNames, "euiDataGridRowCell--".concat(columnType), columnType), _defineProperty(_classNames, 'euiDataGridRowCell--open', popoverIsOpen), _classNames), className);
+      var ariaRowIndex = pagination ? visibleRowIndex + 1 + pagination.pageSize * pagination.pageIndex : visibleRowIndex + 1;
 
       var _this$state$cellProps2 = this.state.cellProps,
           _ = _this$state$cellProps2.isExpandable,
@@ -590,7 +597,8 @@ export var EuiDataGridCell = /*#__PURE__*/function (_Component) {
         setCellContentsRef: this.setCellContentsRef,
         rowHeightsOptions: rowHeightsOptions,
         rowHeightUtils: rowHeightUtils,
-        isDefinedHeight: isDefinedHeight
+        isDefinedHeight: isDefinedHeight,
+        ariaRowIndex: ariaRowIndex
       });
 
       var anchorClass = 'euiDataGridRowCell__expandFlex';
@@ -637,6 +645,7 @@ export var EuiDataGridCell = /*#__PURE__*/function (_Component) {
 
       var content = ___EmotionJSX("div", _extends({
         role: "gridcell",
+        "aria-rowindex": ariaRowIndex,
         tabIndex: this.state.isFocused && !this.state.disableCellTabIndex ? 0 : -1,
         ref: this.cellRef
       }, cellProps, {

package/optimize/es/components/datagrid/body/header/data_grid_header_cell.js

@@ -10,10 +10,12 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
  * Side Public License, v 1.
  */
 import classnames from 'classnames';
-import React, { useContext, useState } from 'react';
+import React, { useContext, useState, useRef, useCallback } from 'react';
+import { tabbable } from 'tabbable';
+import { keys } from '../../../../services';
 import { useGeneratedHtmlId } from '../../../../services/accessibility';
 import { EuiScreenReaderOnly } from '../../../accessibility';
-import { useEuiI18n } from '../../../i18n';
+import { useEuiI18n, EuiI18n } from '../../../i18n';
 import { EuiIcon } from '../../../icon';
 import { EuiListGroup } from '../../../list_group';
 import { EuiPopover } from '../../../popover';
@@ -88,6 +90,7 @@ export var EuiDataGridHeaderCell = function EuiDataGridHeaderCell(_ref) {
       isPopoverOpen = _useState2[0],
       setIsPopoverOpen = _useState2[1];
 
+  var popoverArrowNavigationProps = usePopoverArrowNavigation();
   var columnActions = getColumnActions({
     column: column,
     columns: columns,
@@ -123,9 +126,11 @@ export var EuiDataGridHeaderCell = function EuiDataGridHeaderCell(_ref) {
   }) : null, sortString && ___EmotionJSX(EuiScreenReaderOnly, null, ___EmotionJSX("div", {
     id: screenReaderId
   }, sortString)), !showColumnActions ? ___EmotionJSX(React.Fragment, null, sortingArrow, ___EmotionJSX("div", {
-    className: "euiDataGridHeaderCell__content"
-  }, display || displayAsText || id)) : ___EmotionJSX(EuiPopover, {
-    anchorClassName: "euiDataGridHeaderCell__anchor",
+    className: "euiDataGridHeaderCell__content",
+    title: displayAsText || id
+  }, display || displayAsText || id)) : ___EmotionJSX(EuiPopover, _extends({
+    className: "eui-fullWidth",
+    anchorClassName: "eui-fullWidth",
     panelPaddingSize: "none",
     offset: 7,
     button: ___EmotionJSX("button", {
@@ -137,7 +142,8 @@ export var EuiDataGridHeaderCell = function EuiDataGridHeaderCell(_ref) {
         });
       }
     }, sortingArrow, ___EmotionJSX("div", {
-      className: "euiDataGridHeaderCell__content"
+      className: "euiDataGridHeaderCell__content",
+      title: displayAsText || id
     }, display || displayAsText || id), ___EmotionJSX(EuiIcon, {
       className: "euiDataGridHeaderCell__icon",
       type: "arrowDown",
@@ -150,9 +156,69 @@ export var EuiDataGridHeaderCell = function EuiDataGridHeaderCell(_ref) {
     closePopover: function closePopover() {
       return setIsPopoverOpen(false);
     }
-  }, ___EmotionJSX("div", null, ___EmotionJSX(EuiListGroup, {
+  }, popoverArrowNavigationProps), ___EmotionJSX(EuiListGroup, {
     listItems: columnActions,
     gutterSize: "none",
     "data-test-subj": "dataGridHeaderCellActionGroup-".concat(id)
-  }))));
+  })));
+};
+/**
+ * Add keyboard arrow navigation to the cell actions popover
+ * to match the UX of the rest of EuiDataGrid
+ */
+
+export var usePopoverArrowNavigation = function usePopoverArrowNavigation() {
+  var popoverPanelRef = useRef(null);
+  var actionsRef = useRef(undefined);
+  var panelRef = useCallback(function (ref) {
+    popoverPanelRef.current = ref;
+    actionsRef.current = ref ? tabbable(ref) : undefined;
+  }, []);
+  var onKeyDown = useCallback(function (e) {
+    var _actionsRef$current;
+
+    if (e.key !== keys.ARROW_DOWN && e.key !== keys.ARROW_UP) return;
+    if (!((_actionsRef$current = actionsRef.current) !== null && _actionsRef$current !== void 0 && _actionsRef$current.length)) return;
+    e.preventDefault();
+    var initialState = document.activeElement === popoverPanelRef.current;
+    var currentIndex = !initialState ? actionsRef.current.findIndex(function (el) {
+      return document.activeElement === el;
+    }) : -1;
+    var lastIndex = actionsRef.current.length - 1;
+    var indexToFocus;
+
+    if (initialState) {
+      if (e.key === keys.ARROW_DOWN) {
+        indexToFocus = 0;
+      } else if (e.key === keys.ARROW_UP) {
+        indexToFocus = lastIndex;
+      }
+    } else {
+      if (e.key === keys.ARROW_DOWN) {
+        indexToFocus = currentIndex + 1;
+
+        if (indexToFocus > lastIndex) {
+          indexToFocus = 0;
+        }
+      } else if (e.key === keys.ARROW_UP) {
+        indexToFocus = currentIndex - 1;
+
+        if (indexToFocus < 0) {
+          indexToFocus = lastIndex;
+        }
+      }
+    }
+
+    actionsRef.current[indexToFocus].focus();
+  }, []);
+  return {
+    panelRef: panelRef,
+    panelProps: {
+      onKeyDown: onKeyDown
+    },
+    popoverScreenReaderText: ___EmotionJSX(EuiI18n, {
+      token: "euiDataGridHeaderCell.actionsPopoverScreenReaderText",
+      default: "To navigate through the list of column actions, press the Tab or Up and Down arrow keys."
+    })
+  };
 };

package/optimize/es/components/datagrid/data_grid.js

@@ -233,6 +233,7 @@ export var EuiDataGrid = /*#__PURE__*/forwardRef(function (props, ref) {
 
   useImperativeGridRef({
     ref: ref,
+    gridRef: gridRef,
     setIsFullScreen: setIsFullScreen,
     focusContext: focusContext,
     cellPopoverContext: cellPopoverContext,
@@ -336,6 +337,7 @@ export var EuiDataGrid = /*#__PURE__*/forwardRef(function (props, ref) {
     "data-test-subj": "euiDataGridBody",
     className: "euiDataGrid__content",
     role: "grid",
+    "aria-rowcount": rowCount,
     id: gridId
   }, wrappingDivFocusProps, gridAriaProps), ___EmotionJSX(EuiDataGridBody, {
     columns: orderedVisibleColumns,

package/optimize/es/components/datagrid/utils/focus.js

@@ -46,11 +46,17 @@ export var useFocus = function useFocus(_ref) {
       focusedCell = _useState4[0],
       _setFocusedCell = _useState4[1];
 
-  var setFocusedCell = useCallback(function (focusedCell) {
-    _setFocusedCell(focusedCell);
+  var setFocusedCell = useCallback(function (nextFocusedCell) {
+    // If the x/y coordinates remained the same, don't update. This keeps the focusedCell
+    // reference stable, and allows it to be used in places that need reference equality.
+    if (nextFocusedCell[0] === (focusedCell === null || focusedCell === void 0 ? void 0 : focusedCell[0]) && nextFocusedCell[1] === (focusedCell === null || focusedCell === void 0 ? void 0 : focusedCell[1])) {
+      return;
+    }
+
+    _setFocusedCell(nextFocusedCell);
 
     setIsFocusedCellInView(true); // scrolling.ts ensures focused cells are fully in view
-  }, []);
+  }, [focusedCell]);
   var previousCell = useRef(undefined);
   useEffect(function () {
     if (previousCell.current) {
@@ -82,13 +88,16 @@ export var useFocus = function useFocus(_ref) {
       tabIndex: -1
     } : {
       tabIndex: 0,
-      onFocus: function onFocus(e) {
-        // if e.target (the source element of the `focus event`
-        // matches e.currentTarget (always the div with this onFocus listener)
-        // then the user has focused directly on the data grid wrapper (almost definitely by tabbing)
-        // so shift focus to the first visible and interactive cell within the grid
-        if (e.target === e.currentTarget) {
-          focusFirstVisibleInteractiveCell();
+      onKeyUp: function onKeyUp(e) {
+        // Ensure we only manually focus into the grid via keyboard tab -
+        // mouse users can accidentally trigger focus by clicking on scrollbars
+        if (e.key === keys.TAB) {
+          // if e.target (the source element of the `focus event`) matches
+          // e.currentTarget (always the div with this onKeyUp listener)
+          // then the user has focused directly on the data grid wrapper
+          if (e.target === e.currentTarget) {
+            focusFirstVisibleInteractiveCell();
+          }
         }
       }
     };

package/optimize/es/components/datagrid/utils/ref.js

@@ -8,6 +8,7 @@
 import { useImperativeHandle, useCallback } from 'react';
 export var useImperativeGridRef = function useImperativeGridRef(_ref) {
   var ref = _ref.ref,
+      gridRef = _ref.gridRef,
       setIsFullScreen = _ref.setIsFullScreen,
       focusContext = _ref.focusContext,
       cellPopoverContext = _ref.cellPopoverContext,
@@ -62,16 +63,36 @@ export var useImperativeGridRef = function useImperativeGridRef(_ref) {
       rowIndex: visibleRowIndex,
       colIndex: colIndex
     });
-  }, [_openCellPopover, checkCellExists, findVisibleRowIndex]); // Set the ref APIs
+  }, [_openCellPopover, checkCellExists, findVisibleRowIndex]);
+  var scrollTo = useCallback(function () {
+    var _gridRef$current;
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    return (_gridRef$current = gridRef.current) === null || _gridRef$current === void 0 ? void 0 : _gridRef$current.scrollTo.apply(_gridRef$current, args);
+  }, [gridRef]);
+  var scrollToItem = useCallback(function () {
+    var _gridRef$current2;
+
+    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+      args[_key2] = arguments[_key2];
+    }
+
+    return (_gridRef$current2 = gridRef.current) === null || _gridRef$current2 === void 0 ? void 0 : _gridRef$current2.scrollToItem.apply(_gridRef$current2, args);
+  }, [gridRef]); // Set the ref APIs
 
   useImperativeHandle(ref, function () {
     return {
       setIsFullScreen: setIsFullScreen,
       setFocusedCell: setFocusedCell,
       openCellPopover: openCellPopover,
-      closeCellPopover: closeCellPopover
+      closeCellPopover: closeCellPopover,
+      scrollTo: scrollTo,
+      scrollToItem: scrollToItem
     };
-  }, [setIsFullScreen, setFocusedCell, openCellPopover, closeCellPopover]);
+  }, [setIsFullScreen, setFocusedCell, openCellPopover, closeCellPopover, scrollTo, scrollToItem]);
 };
 /**
  * Throw a digestible error if the consumer attempts to focus into an invalid

package/optimize/es/components/icon/assets/cluster.js

@@ -0,0 +1,37 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["title", "titleId"];
+
+/*
+ * 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.
+ */
+// THIS IS A GENERATED FILE. DO NOT MODIFY MANUALLY. @see scripts/compile-icons.js
+import * as React from 'react';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+
+var EuiIconCluster = function EuiIconCluster(_ref) {
+  var title = _ref.title,
+      titleId = _ref.titleId,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return ___EmotionJSX("svg", _extends({
+    width: 16,
+    height: 16,
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-labelledby": titleId
+  }, props), title ? ___EmotionJSX("title", {
+    id: titleId
+  }, title) : null, ___EmotionJSX("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M4.5 7a2.5 2.5 0 100-5 2.5 2.5 0 000 5zm0-6a3.5 3.5 0 013.465 3h3.12a1.5 1.5 0 110 1h-3.12a3.482 3.482 0 01-.662 1.596l2.1 2.1A3.5 3.5 0 118.036 12h-3.12a1.5 1.5 0 110-.999h3.12a3.482 3.482 0 01.662-1.596l-2.1-2.1A3.5 3.5 0 114.5 1zM12 4.5a.5.5 0 101 0 .5.5 0 00-1 0zm-.5 9.5a2.5 2.5 0 110-5 2.5 2.5 0 010 5zM4 11.5a.5.5 0 11-1 0 .5.5 0 011 0z"
+  }));
+};
+
+export var icon = EuiIconCluster;

package/optimize/es/components/icon/assets/container.js

@@ -0,0 +1,35 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["title", "titleId"];
+
+/*
+ * 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.
+ */
+// THIS IS A GENERATED FILE. DO NOT MODIFY MANUALLY. @see scripts/compile-icons.js
+import * as React from 'react';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+
+var EuiIconContainer = function EuiIconContainer(_ref) {
+  var title = _ref.title,
+      titleId = _ref.titleId,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return ___EmotionJSX("svg", _extends({
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 16 16",
+    "aria-labelledby": titleId
+  }, props), title ? ___EmotionJSX("title", {
+    id: titleId
+  }, title) : null, ___EmotionJSX("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M0 2.5A.5.5 0 01.5 2h15a.5.5 0 010 1H15v10h.5a.5.5 0 010 1H.5a.5.5 0 010-1H1V3H.5a.5.5 0 01-.5-.5zM2 3h12v10H2V3zm3 2a.5.5 0 00-.5.5v5a.5.5 0 001 0v-5A.5.5 0 005 5zm5.5.5a.5.5 0 011 0v5a.5.5 0 01-1 0v-5zM8 5a.5.5 0 00-.5.5v5a.5.5 0 001 0v-5A.5.5 0 008 5z"
+  }));
+};
+
+export var icon = EuiIconContainer;

package/optimize/es/components/icon/assets/kubernetesNode.js

@@ -0,0 +1,37 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["title", "titleId"];
+
+/*
+ * 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.
+ */
+// THIS IS A GENERATED FILE. DO NOT MODIFY MANUALLY. @see scripts/compile-icons.js
+import * as React from 'react';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+
+var EuiIconKubernetesNode = function EuiIconKubernetesNode(_ref) {
+  var title = _ref.title,
+      titleId = _ref.titleId,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return ___EmotionJSX("svg", _extends({
+    width: 16,
+    height: 16,
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-labelledby": titleId
+  }, props), title ? ___EmotionJSX("title", {
+    id: titleId
+  }, title) : null, ___EmotionJSX("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M14 11.42V4.58L8 1.152 2 4.58v6.84l6 3.428 6-3.428zM8 16l7-4V4L8 0 1 4v8l7 4zM8 4.607l3 1.714V9.68l-3 1.714-3-1.714V6.32l3-1.714zm4 1.134v4.518l-4 2.286-4-2.286V5.741l4-2.286 4 2.286z"
+  }));
+};
+
+export var icon = EuiIconKubernetesNode;

package/optimize/es/components/icon/assets/kubernetesPod.js

@@ -0,0 +1,37 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["title", "titleId"];
+
+/*
+ * 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.
+ */
+// THIS IS A GENERATED FILE. DO NOT MODIFY MANUALLY. @see scripts/compile-icons.js
+import * as React from 'react';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+
+var EuiIconKubernetesPod = function EuiIconKubernetesPod(_ref) {
+  var title = _ref.title,
+      titleId = _ref.titleId,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return ___EmotionJSX("svg", _extends({
+    width: 16,
+    height: 16,
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-labelledby": titleId
+  }, props), title ? ___EmotionJSX("title", {
+    id: titleId
+  }, title) : null, ___EmotionJSX("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M14 5.151v6.269l-5.5 3.142V8.29L14 5.151zm-.508-.861L8 1.152 2.508 4.29 8 7.424l5.492-3.134zM2 5.151l5.5 3.14v6.272L2 11.42V5.15zM15 12l-7 4-7-4V4l7-4 7 4v8z"
+  }));
+};
+
+export var icon = EuiIconKubernetesPod;

package/optimize/es/components/icon/assets/namespace.js

@@ -0,0 +1,37 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["title", "titleId"];
+
+/*
+ * 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.
+ */
+// THIS IS A GENERATED FILE. DO NOT MODIFY MANUALLY. @see scripts/compile-icons.js
+import * as React from 'react';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+
+var EuiIconNamespace = function EuiIconNamespace(_ref) {
+  var title = _ref.title,
+      titleId = _ref.titleId,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return ___EmotionJSX("svg", _extends({
+    width: 16,
+    height: 16,
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-labelledby": titleId
+  }, props), title ? ___EmotionJSX("title", {
+    id: titleId
+  }, title) : null, ___EmotionJSX("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M1 1h14v14H1V1zm13 12v1H2V2h12v11zM6 6h4v4H6V6zm-1 5V5h6v6H5z"
+  }));
+};
+
+export var icon = EuiIconNamespace;

package/optimize/es/components/icon/icon_map.js

@@ -49,11 +49,13 @@ export var typeToPathMap = {
   cloudDrizzle: 'cloudDrizzle',
   cloudStormy: 'cloudStormy',
   cloudSunny: 'cloudSunny',
+  cluster: 'cluster',
   codeApp: 'app_code',
   color: 'color',
   compute: 'compute',
   console: 'console',
   consoleApp: 'app_console',
+  container: 'container',
   continuityAbove: 'continuityAbove',
   continuityAboveBelow: 'continuityAboveBelow',
   continuityBelow: 'continuityBelow',
@@ -180,6 +182,8 @@ export var typeToPathMap = {
   kqlOperand: 'kql_operand',
   kqlSelector: 'kql_selector',
   kqlValue: 'kql_value',
+  kubernetesNode: 'kubernetesNode',
+  kubernetesPod: 'kubernetesPod',
   layers: 'layers',
   lensApp: 'app_lens',
   lettering: 'lettering',
@@ -277,6 +281,7 @@ export var typeToPathMap = {
   mobile: 'mobile',
   monitoringApp: 'app_monitoring',
   moon: 'moon',
+  namespace: 'namespace',
   nested: 'nested',
   node: 'node',
   notebookApp: 'app_notebook',

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

@@ -10,7 +10,7 @@ import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _typeof from "@babel/runtime/helpers/typeof";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-var _excluded = ["anchorClassName", "anchorPosition", "button", "buttonRef", "insert", "isOpen", "ownFocus", "children", "className", "closePopover", "panelClassName", "panelPaddingSize", "panelProps", "panelRef", "panelStyle", "popoverRef", "hasArrow", "arrowChildren", "repositionOnScroll", "zIndex", "initialFocus", "attachToAnchor", "display", "onTrapDeactivation", "buffer", "aria-label", "aria-labelledby", "container", "focusTrapProps", "tabIndex"];
+var _excluded = ["anchorClassName", "anchorPosition", "button", "buttonRef", "insert", "isOpen", "ownFocus", "children", "className", "closePopover", "panelClassName", "panelPaddingSize", "panelProps", "panelRef", "panelStyle", "popoverScreenReaderText", "popoverRef", "hasArrow", "arrowChildren", "repositionOnScroll", "zIndex", "initialFocus", "attachToAnchor", "display", "offset", "onTrapDeactivation", "buffer", "aria-label", "aria-labelledby", "container", "focusTrapProps", "tabIndex"];
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
@@ -496,6 +496,7 @@ export var EuiPopover = /*#__PURE__*/function (_Component) {
           panelProps = _this$props.panelProps,
           panelRef = _this$props.panelRef,
           panelStyle = _this$props.panelStyle,
+          popoverScreenReaderText = _this$props.popoverScreenReaderText,
           popoverRef = _this$props.popoverRef,
           hasArrow = _this$props.hasArrow,
           arrowChildren = _this$props.arrowChildren,
@@ -504,6 +505,7 @@ export var EuiPopover = /*#__PURE__*/function (_Component) {
           initialFocus = _this$props.initialFocus,
           attachToAnchor = _this$props.attachToAnchor,
           display = _this$props.display,
+          offset = _this$props.offset,
           onTrapDeactivation = _this$props.onTrapDeactivation,
           buffer = _this$props.buffer,
           ariaLabel = _this$props['aria-label'],
@@ -549,14 +551,14 @@ export var EuiPopover = /*#__PURE__*/function (_Component) {
 
         var focusTrapScreenReaderText;
 
-        if (ownFocus) {
+        if (ownFocus || popoverScreenReaderText) {
           ariaDescribedby = this.descriptionId;
           focusTrapScreenReaderText = ___EmotionJSX(EuiScreenReaderOnly, null, ___EmotionJSX("p", {
             id: this.descriptionId
-          }, ___EmotionJSX(EuiI18n, {
+          }, ownFocus && ___EmotionJSX(EuiI18n, {
             token: "euiPopover.screenReaderAnnouncement",
             default: "You are in a dialog. To close this dialog, hit escape."
-          })));
+          }), popoverScreenReaderText));
         }
 
         var arrowClassNames = classNames('euiPopover__panelArrow', "euiPopover__panelArrow--".concat(this.state.arrowPosition));

package/optimize/es/components/selectable/selectable.js

@@ -152,6 +152,8 @@ export var EuiSelectable = /*#__PURE__*/function (_Component) {
           event.stopPropagation();
 
           if (_this.state.activeOptionIndex != null && optionsList) {
+            event.persist(); // NOTE: This is needed for React v16 backwards compatibility
+
             optionsList.onAddOrRemoveOption(_this.state.visibleOptions[_this.state.activeOptionIndex], event);
           }
 

package/optimize/es/components/selectable/selectable_list/selectable_list.js

@@ -154,6 +154,8 @@ export var EuiSelectableList = /*#__PURE__*/function (_Component) {
           setActiveOptionIndex(index);
         },
         onClick: function onClick(event) {
+          event.persist(); // NOTE: This is needed for React v16 backwards compatibility
+
           _this.onAddOrRemoveOption(option, event);
         },
         ref: ref ? ref.bind(null, index) : undefined,