@elastic/eui 60.1.2 → 61.0.0

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();
+          }
         }
       }
     };
@@ -141,7 +150,6 @@ export var createKeyDownHandler = function createKeyDownHandler(_ref2) {
 
     var key = event.key,
         ctrlKey = event.ctrlKey;
-    console.log('???', event);
 
     if (key === keys.ARROW_DOWN) {
       event.preventDefault();

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/datagrid/utils/row_heights.js

@@ -13,7 +13,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
  */
 import { useEffect, useState, useMemo, useCallback, useContext } from 'react';
 import { isObject, isNumber } from '../../../services/predicate';
-import { useForceRender } from '../../../services';
+import { useForceRender, useLatest } from '../../../services';
 import { DataGridSortingContext } from './sorting'; // TODO: Once JS variables are available, use them here instead of hard-coded maps
 
 export var cellPaddingsMap = {
@@ -24,11 +24,14 @@ export var cellPaddingsMap = {
 export var AUTO_HEIGHT = 'auto';
 export var DEFAULT_ROW_HEIGHT = 34;
 export var RowHeightUtils = /*#__PURE__*/function () {
-  function RowHeightUtils() {
+  function RowHeightUtils(gridRef, rerenderGridBodyRef) {
     var _this = this;
 
     _classCallCheck(this, RowHeightUtils);
 
+    this.gridRef = gridRef;
+    this.rerenderGridBodyRef = rerenderGridBodyRef;
+
     _defineProperty(this, "styles", {
       paddingTop: 0,
       paddingBottom: 0
@@ -63,11 +66,7 @@ export var RowHeightUtils = /*#__PURE__*/function () {
 
     _defineProperty(this, "timerId", void 0);
 
-    _defineProperty(this, "grid", void 0);
-
     _defineProperty(this, "lastUpdatedRow", Infinity);
-
-    _defineProperty(this, "rerenderGridBody", function () {});
   }
 
   _createClass(RowHeightUtils, [{
@@ -165,6 +164,8 @@ export var RowHeightUtils = /*#__PURE__*/function () {
   }, {
     key: "setRowHeight",
     value: function setRowHeight(rowIndex, colId) {
+      var _this$rerenderGridBod, _this$rerenderGridBod2;
+
       var height = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : DEFAULT_ROW_HEIGHT;
       var visibleRowIndex = arguments.length > 3 ? arguments[3] : undefined;
       var rowHeights = this.heightsCache.get(rowIndex) || new Map();
@@ -179,7 +180,7 @@ export var RowHeightUtils = /*#__PURE__*/function () {
       this.resetRow(visibleRowIndex); // When an auto row height is updated, force a re-render
       // of the grid body to update the unconstrained height
 
-      this.rerenderGridBody();
+      (_this$rerenderGridBod = (_this$rerenderGridBod2 = this.rerenderGridBodyRef).current) === null || _this$rerenderGridBod === void 0 ? void 0 : _this$rerenderGridBod.call(_this$rerenderGridBod2);
     }
   }, {
     key: "pruneHiddenColumnHeights",
@@ -219,21 +220,11 @@ export var RowHeightUtils = /*#__PURE__*/function () {
   }, {
     key: "resetGrid",
     value: function resetGrid() {
-      var _this$grid;
+      var _this$gridRef$current;
 
-      (_this$grid = this.grid) === null || _this$grid === void 0 ? void 0 : _this$grid.resetAfterRowIndex(this.lastUpdatedRow);
+      (_this$gridRef$current = this.gridRef.current) === null || _this$gridRef$current === void 0 ? void 0 : _this$gridRef$current.resetAfterRowIndex(this.lastUpdatedRow);
       this.lastUpdatedRow = Infinity;
     }
-  }, {
-    key: "setGrid",
-    value: function setGrid(grid) {
-      this.grid = grid;
-    }
-  }, {
-    key: "setRerenderGridBody",
-    value: function setRerenderGridBody(rerenderGridBody) {
-      this.rerenderGridBody = rerenderGridBody;
-    }
   }]);
 
   return RowHeightUtils;
@@ -248,22 +239,25 @@ export var useRowHeightUtils = function useRowHeightUtils(_ref2) {
       gridStyles = _ref2.gridStyles,
       columns = _ref2.columns,
       rowHeightsOptions = _ref2.rowHeightsOptions;
-  var rowHeightUtils = useMemo(function () {
-    return new RowHeightUtils();
-  }, []); // Update rowHeightUtils with internal vars from outside dependencies
+  var forceRenderRef = useLatest(useForceRender());
 
-  var forceRender = useForceRender();
-  useEffect(function () {
-    if (gridRef) rowHeightUtils.setGrid(gridRef);
-    rowHeightUtils.setRerenderGridBody(forceRender);
-  }, [gridRef, forceRender, rowHeightUtils]); // Forces a rerender whenever the row heights change, as this can cause the
+  var _useState = useState(function () {
+    return new RowHeightUtils(gridRef, forceRenderRef);
+  }),
+      _useState2 = _slicedToArray(_useState, 1),
+      rowHeightUtils = _useState2[0]; // Forces a rerender whenever the row heights change, as this can cause the
   // grid to change height/have scrollbars. Without this, grid rerendering is stale
 
+
   useEffect(function () {
-    requestAnimationFrame(forceRender);
+    if (forceRenderRef.current == null) {
+      return;
+    }
+
+    requestAnimationFrame(forceRenderRef.current);
   }, [// Effects that should cause rerendering
   rowHeightsOptions === null || rowHeightsOptions === void 0 ? void 0 : rowHeightsOptions.defaultHeight, rowHeightsOptions === null || rowHeightsOptions === void 0 ? void 0 : rowHeightsOptions.rowHeights, // Dependencies
-  rowHeightUtils, forceRender]); // Re-cache styles whenever grid density changes
+  rowHeightUtils, forceRenderRef]); // Re-cache styles whenever grid density changes
 
   useEffect(function () {
     rowHeightUtils.cacheStyles({
@@ -285,10 +279,10 @@ export var useDefaultRowHeight = function useDefaultRowHeight(_ref3) {
   // and ignored by auto & static heights (unless the static height is < the min)
 
 
-  var _useState = useState(DEFAULT_ROW_HEIGHT),
-      _useState2 = _slicedToArray(_useState, 2),
-      minRowHeight = _useState2[0],
-      setRowHeight = _useState2[1]; // Default/fallback height for all rows
+  var _useState3 = useState(DEFAULT_ROW_HEIGHT),
+      _useState4 = _slicedToArray(_useState3, 2),
+      minRowHeight = _useState4[0],
+      setRowHeight = _useState4[1]; // Default/fallback height for all rows
 
 
   var defaultRowHeight = useMemo(function () {

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/keyboard.js

@@ -0,0 +1,34 @@
+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 EuiIconKeyboard = function EuiIconKeyboard(_ref) {
+  var title = _ref.title,
+      titleId = _ref.titleId,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return ___EmotionJSX("svg", _extends({
+    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 3h16v11H0V3zm15 10V4H1v9h14zM2 5h2v1H2V5zm2 7v-1H2v1h2zm10-1v1h-2v-1h2zm-3 1v-1H5v1h6zM5 5h1v1H5V5zM3 7H2v1h1V7zm3 0h1v1H6V7zM3 9H2v1h1V9zm3 0h1v1H6V9zm2-4H7v1h1V5zM4 7h1v1H4V7zm5 0H8v1h1V7zm1 0h1v1h-1V7zM5 9H4v1h1V9zm3 0h1v1H8V9zm3 0h-1v1h1V9zM9 5h1v1H9V5zm3 0h-1v1h1V5zm1 0h1v1h-1V5zm1 2h-2v3h2V7z"
+  }));
+};
+
+export var icon = EuiIconKeyboard;

package/optimize/es/components/icon/assets/{keyboard_shortcut.js → kubernetesNode.js}

@@ -13,22 +13,25 @@ var _excluded = ["title", "titleId"];
 import * as React from 'react';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 
-var EuiIconKeyboardShortcut = function EuiIconKeyboardShortcut(_ref) {
+var EuiIconKubernetesNode = function EuiIconKubernetesNode(_ref) {
   var title = _ref.title,
       titleId = _ref.titleId,
       props = _objectWithoutProperties(_ref, _excluded);
 
   return ___EmotionJSX("svg", _extends({
-    xmlns: "http://www.w3.org/2000/svg",
     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", {
-    d: "M15 9a1 1 0 01.993.883L16 10v5a1 1 0 01-.883.993L15 16H7a1 1 0 01-.993-.883L6 15v-5a1 1 0 01.883-.993L7 9h8zM2.5 10a.5.5 0 01.492.41L3 10.5V12h1.5a.5.5 0 01.09.992L4.5 13H3v1.5a.5.5 0 01-.992.09L2 14.5V13H.5a.5.5 0 01-.09-.992L.5 12H2v-1.5a.5.5 0 01.5-.5zM15 10H7v5h8v-5zm-1 3v1H8v-1h6zm1-13a1 1 0 011 1v5a1 1 0 01-1 1H1a1 1 0 01-1-1V1a1 1 0 011-1h14zm0 1H1v5h14V1zM8 4v1H2V4h6z"
+    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 = EuiIconKeyboardShortcut;
+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;