@elastic/eui 91.0.0 → 91.2.0

package/src/components/datagrid/_data_grid_data_row.scss

@@ -3,15 +3,23 @@
 }
 
 @include euiDataGridRowCell {
-  @include euiFontSizeS;
-
-  padding: $euiDataGridCellPaddingM;
+  position: relative; // Needed for .euiDataGridRowCell__actions
   border-right: $euiDataGridVerticalBorder;
   border-bottom: $euiBorderThin;
-  overflow: hidden;
+
+  .euiDataGridRowCell__content {
+    @include euiFontSizeS;
+    padding: $euiDataGridCellPaddingM;
+    height: 100%;
+    overflow: hidden;
+
+    &--autoHeight {
+      height: auto;
+    }
+  }
 
   // Hack to allow focus trap to still stretch to full row height on defined heights
-  > * {
+  > [data-focus-lock-disabled] {
     height: 100%;
   }
 
@@ -23,39 +31,46 @@
     border-right-color: $euiBorderColor;
   }
 
-  &:focus {
-    position: relative;
+  --euiDataGridCellOutlineColor: #{$euiColorPrimary};
+
+  &:hover,
+  &:focus,
+  &.euiDataGridRowCell--open {
     @include euiDataGridCellFocus;
   }
 
-  // Only add the transition effect on hover, so that it is instantaneous on focus
-  // Long delays on hover to mitigate the accordion effect
-  &:hover {
-    .euiDataGridRowCell__actionButtonIcon {
-      animation-duration: $euiAnimSpeedExtraFast;
-      animation-name: euiDataGridCellActionsSlideIn;
-      animation-iteration-count: 1;
-      animation-delay: $euiAnimSpeedNormal;
-      animation-fill-mode: forwards;
+  // On hover
+  &:hover:not(:focus, :focus-within, .euiDataGridRowCell--open) {
+    // Color the actions and focus ring grayscale on hover
+    // (Actions look odd without the ring on grids without cell borders)
+    --euiDataGridCellOutlineColor: #{$euiColorDarkShade};
+
+    .euiDataGridRowCell__actions {
+      // Delay the actions showing on hover
+      // (Note: the focus ring show instantly on hover & the actions show instantly on focus)
+      animation-delay: $euiAnimSpeedSlow;
     }
   }
 
-  // On focus, directly show action buttons (without animation)
+  // On hover & focus, show cell action buttons
+  &:hover,
   &:focus,
-  // Prevent the animation from flickering after cell popover close when focus is restored the expansion button
   &:focus-within,
   // Always make the cell actions visible when the cell popover is open
-  &.euiDataGridRowCell--open {
-    .euiDataGridRowCell__actionButtonIcon {
-      animation: none;
-      margin-left: $euiDataGridCellPaddingM;
-      width: $euiSizeM;
+  &.euiDataGridRowCell--open,
+  // Prevents the animation from replaying when keyboard focus is moved from the popover back to the cell
+  &[data-keyboard-closing] {
+    .euiDataGridRowCell__actions {
+      animation-duration: $euiAnimSpeedExtraFast;
+      animation-name: euiDataGridCellActionsSlideIn;
+      animation-iteration-count: 1;
+      animation-fill-mode: forwards;
     }
   }
 
   // if a cell is not hovered nor focused nor open via popover, don't show buttons in general
-  &:not(:hover):not(:focus):not(.euiDataGridRowCell--open) {
-    .euiDataGridRowCell__actionButtonIcon {
+  &:not(:hover):not(:focus):not(.euiDataGridRowCell--open):not([data-keyboard-closing]) {
+    .euiDataGridRowCell__actions {
       display: none;
     }
   }
@@ -84,94 +99,123 @@
 .euiDataGridRowCell__popover {
   @include euiScrollBar;
   overflow: auto;
-  // stylelint-disable declaration-no-important
-  max-width: 400px !important;
-  max-height: 400px !important;
-  z-index: $euiZDataGridCellPopover !important;
-  // stylelint-enable declaration-no-important
+  z-index: $euiZDataGridCellPopover !important; // stylelint-disable-line declaration-no-important
   // Workaround for a Safari CSS bug when using both `overflow: auto` & `filter: drop-shadow`
   // (see https://github.com/elastic/eui/issues/6151)
   // Disables the default EuiPopover filter drop-shadow and uses box-shadow instead,
   // since we don't use the popover arrow in any case for cell popovers
   filter: none;
   @include euiBottomShadow; // TODO: Convert to euiShadowMedium() in Emotion
-}
 
-.euiDataGridRowCell__contentWrapper {
-  position: relative; // Needed for .euiDataGridRowCell__actions--overlay
-  height: 100%;
+  // For some reason, the normal popover opacity transition doesn't work for datagrid popovers
+  // so we'll force it via an animation. If we don't, cells constrained by the inline max-width
+  // style that we set will see a flash of unwanted content before repositioning
+  animation-duration: $euiAnimSpeedNormal;
+  animation-name: euiDataGridCellPopover;
 }
 
-.euiDataGridRowCell__defaultHeight {
+.euiDataGridRowCell--controlColumn .euiDataGridRowCell__content {
+  max-height: 100%;
+  height: auto;
   display: flex;
-  align-items: baseline;
-  max-width: 100%;
-
-  .euiDataGridRowCell__content {
-    flex-grow: 1;
-  }
+  align-items: center;
+}
 
-  .euiDataGridRowCell__actions {
-    flex-grow: 0;
-  }
+// Positioning for cell actions & the cell expansion popover
+.euiDataGridRowCell__actions,
+.euiDataGridRowCell__actions + [data-euiportal] > .euiPopover {
+  position: absolute;
+  bottom: 100%;
 
-  .euiDataGridRowCell--controlColumn & {
-    height: 100%;
-    align-items: center;
+  .euiDataGridRowCell--alignLeft & {
+    left: 0;
   }
-}
 
-.euiDataGridRowCell__numericalHeight {
-  // Without this rule, popover anchors content that overflows off the page
-  [data-euiportal],
-  .euiPopover {
-    height: 100%;
+  .euiDataGridRowCell--alignRight & {
+    right: 0;
   }
 }
 
-// Cell actions
 .euiDataGridRowCell__actions {
+  z-index: $euiZDataGridCellPopover - 2; // Sit below sticky column headers
+  margin-bottom: -$euiBorderWidthThin; // Vertical alignment
   display: flex;
+  gap: $euiSizeXS / 2;
+  padding-inline: $euiSizeXS / 2;
+  background-color: var(--euiDataGridCellOutlineColor);
+  color: $euiColorEmptyShade;
+  border: $euiBorderWidthThin solid var(--euiDataGridCellOutlineColor);
+  border-top-left-radius: $euiBorderRadius / 2;
+  border-top-right-radius: $euiBorderRadius / 2;
+  transform: scaleY(0);
+  transform-origin: bottom;
+
+  // The first row of cell actions need to be visible above the cell headers,
+  // but other cell actions that scroll past the sticky headers should not
+  .euiDataGridRowCell[data-gridcell-visible-row-index='0'] > & {
+    z-index: $euiZDataGridCellPopover - 1;
+  }
+
+  .euiDataGridRowCell--alignLeft & {
+    border-bottom-right-radius: $euiBorderRadius / 2;
+  }
 
-  &--overlay {
+  .euiDataGridRowCell--alignRight & {
+    border-bottom-left-radius: $euiBorderRadius / 2;
+  }
+
+  // Visual trickery - fill in the gap between the cell outline border-radius & the actions
+  &::after {
+    content: '';
     position: absolute;
-    right: 0;
-    top: 0;
-    padding: $euiDataGridCellPaddingM 0;
-    background-color: $euiColorEmptyShade;
+    top: 100%;
+    height: $euiBorderWidthThick;
+    width: $euiBorderWidthThick;
+    background-color: var(--euiDataGridCellOutlineColor);
+
+    .euiDataGridRowCell--alignLeft & {
+      left: -$euiBorderWidthThin;
+    }
+
+    .euiDataGridRowCell--alignRight & {
+      right: -$euiBorderWidthThin;
+    }
   }
 }
 
 .euiDataGridRowCell__actionButtonIcon {
-  height: $euiSizeM;
-  border-radius: $euiBorderRadius / 2;
-  width: 0;
-  overflow: hidden;
-  // Have to take out the generic transition so it is instaneous on focus
-  transition: none;
-  // Disable filled button box-shadows on legacy theme - they're unnecessary when this small in a datagrid
-  box-shadow: none !important; // stylelint-disable-line declaration-no-important
-  // Remove filled button borders on legacy theme - this way we don't need to animate the border
-  border: none;
+  height: $euiSize + $euiSizeXS;
+  width: $euiSize;
+  border-radius: 0;
+
+  /* Force all cell action buttons to match EUI colors */
+  &,
+  svg {
+    // stylelint-disable declaration-no-important
+    background-color: transparent !important;
+    color: currentColor !important;
+    fill: currentColor !important;
+    // stylelint-enable declaration-no-important
+  }
+
+  /* Manually increase the size of the expand cell icon - it's a bit small by default */
+  &.euiDataGridRowCell__expandCell .euiIcon {
+    width: 120%;
+    height: 100%;
+  }
 }
 
 // Row stripes
 @include euiDataGridStyles(stripes) {
   .euiDataGridRow--striped {
-    &,
-    .euiDataGridRowCell__actions--overlay {
-      background-color: $euiColorLightestShade;
-    }
+    background-color: $euiColorLightestShade;
   }
 }
 
 // Row highlights
 @include euiDataGridStyles(rowHoverHighlight) {
   .euiDataGridRow:hover {
-    &,
-    .euiDataGridRowCell__actions--overlay {
-      background-color: $euiColorHighlight;
-    }
+    background-color: $euiColorHighlight;
   }
 }
 
@@ -192,48 +236,43 @@
 // Font alternates
 @include euiDataGridStyles(fontSizeSmall) {
   @include euiDataGridRowCell {
-    @include euiFontSizeXS;
+    .euiDataGridRowCell__content {
+      @include euiFontSizeXS;
+    }
   }
 }
 
 @include euiDataGridStyles(fontSizeLarge) {
   @include euiDataGridRowCell {
-    @include euiFontSize;
+    .euiDataGridRowCell__content {
+      @include euiFontSize;
+    }
   }
 }
 
 // Padding alternates
 @include euiDataGridStyles(paddingSmall) {
   @include euiDataGridRowCell {
-    padding: $euiDataGridCellPaddingS;
+    .euiDataGridRowCell__content {
+      padding: $euiDataGridCellPaddingS;
+    }
   }
 }
 
 @include euiDataGridStyles(paddingLarge) {
   @include euiDataGridRowCell {
-    padding: $euiDataGridCellPaddingL;
-  }
-}
-
-// Compressed density grids - height tweaks
-@include euiDataGridStyles(fontSizeSmall, paddingSmall) {
-  .euiDataGridRowCell__actions--overlay {
-    padding: ($euiDataGridCellPaddingS / 2) 0;
-  }
-
-  .euiDataGridRowCell__defaultHeight .euiDataGridRowCell__actions {
-    transform: translateY(1px);
+    .euiDataGridRowCell__content {
+      padding: $euiDataGridCellPaddingL;
+    }
   }
 }
 
 @keyframes euiDataGridCellActionsSlideIn {
-  from {
-    margin-left: 0;
-    width: 0;
-  }
+  from { transform: scaleY(0); }
+  to { transform: scaleY(1); }
+}
 
-  to {
-    margin-left: $euiDataGridCellPaddingM;
-    width: $euiSizeM;
-  }
+@keyframes euiDataGridCellPopover {
+  from { opacity: 0; }
+  to { opacity: 1; }
 }

package/src/components/datagrid/_mixins.scss

@@ -64,8 +64,8 @@ $euiDataGridStyles: (
     position: absolute;
     top: 0;
     left: 0;
-    border: $euiBorderWidthThick solid $euiFocusRingColor;
-    border-radius: $euiBorderRadiusSmall;
+    border: $euiBorderWidthThick solid var(--euiDataGridCellOutlineColor, $euiFocusRingColor);
+    border-radius: $euiBorderRadius / 2;
     z-index: 2; // We want this to be on top of all the content
     pointer-events: none; // Because we put it with a higher z-index we don't want to make it clickable this way we allow selecting the content behind
   }

package/src/components/datagrid/body/header/_data_grid_header_row.scss

@@ -1,6 +1,6 @@
 .euiDataGridHeader {
   display: flex;
-  z-index: 3; // Needs to sit above the content and focused cells
+  z-index: $euiZDataGridCellPopover - 1; // Needs to sit above the content and focused cells
   background: $euiColorEmptyShade;
   position: sticky;
   top: 0;
@@ -17,14 +17,6 @@
   align-items: center;
   display: flex;
 
-  &.euiDataGridHeaderCell--numeric {
-    text-align: right;
-  }
-
-  &.euiDataGridHeaderCell--currency {
-    text-align: right;
-  }
-
   &:focus {
     @include euiDataGridCellFocus;
     border-top: none;
@@ -37,38 +29,54 @@
       border-top: none;
     }
 
-    .euiDataGridHeaderCell__sortingArrow {
-      margin-right: $euiSizeXS;
-    }
-
     .euiDataGridHeaderCell__button {
-      flex: 0 0 auto;
       position: relative;
-      align-items: center;
       display: flex;
+      align-items: center;
+      gap: $euiSizeXS;
       width: 100%;
       font-weight: $euiFontWeightBold;
       outline: none;
-
-      .euiDataGridHeaderCell__sortingArrow {
-        flex-grow: 0;
-      }
     }
 
     .euiDataGridHeaderCell__content {
       @include euiTextTruncate;
-      overflow: hidden;
-      white-space: nowrap;
-      text-align: left;
-      flex-grow: 1;
-      align-self: baseline;
+    }
+
+    .euiDataGridHeaderCell__sortingArrow {
+      flex: 0 0 auto; // Ensure icon doesn't shrink
     }
 
     .euiDataGridHeaderCell__icon {
-      flex-grow: 0;
-      flex-basis: auto;
-      width: auto;
-      padding-left: $euiSizeXS;
+      flex: 0 0 auto; // Ensure icon doesn't shrink
+      margin-left: auto; // Aligns the icon to the right
+      // Center the icon
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: $euiSize;
+      overflow: hidden;
+      width: 0;
+      opacity: 0;
+      transition: width $euiAnimSpeedFast ease-in, opacity $euiAnimSpeedSlow ease-in;
+    }
+
+    &:focus-within,
+    &:hover,
+    .euiPopover-isOpen {
+      .euiDataGridHeaderCell__icon {
+        width: $euiSize;
+        opacity: 1;
+      }
+    }
+  }
+
+  // Align numeric and currency schemas to the right
+  &.euiDataGridHeaderCell--numeric,
+  &.euiDataGridHeaderCell--currency {
+    .euiDataGridHeaderCell__content {
+      flex-grow: 1;
+      text-align: right;
     }
   }
 }

package/src/components/datagrid/controls/_data_grid_toolbar.scss

@@ -31,11 +31,6 @@
   }
 }
 
-.euiDataGrid__controlBtn--active,
-.euiDataGrid__controlBtn--active:focus {
-  font-weight: $euiFontWeightSemiBold;
-}
-
 @include euiDataGridStyles(bordersNone) {
   .euiDataGrid__controls {
     border: none;

package/src/components/form/form_row/_form_row.scss

@@ -18,7 +18,7 @@
 }
 
 .euiFormRow--hasEmptyLabelSpace {
-  margin-top: floor($euiFontSize * $euiBodyLineHeight) + $euiSizeXS; /* 2 */
+  margin-top: $euiSize + $euiSizeXS; /* 2 */
   // the following ensure that contents that aren't inherently the same height
   // as inputs will align to the vertical center
   min-height: $euiFormControlHeight;

package/src/components/table/_responsive.scss

@@ -99,6 +99,25 @@
         }
       }
 
+      // Custom actions
+      &:not(.euiTableRow-hasActions) .euiTableRowCell--hasActions:last-child {
+        width: 100%;
+
+        &::before {
+          content: '';
+          position: absolute;
+          left: 0;
+          right: 0;
+          height: $euiBorderWidthThin;
+          background-color: $euiTableActionsBorderColor;
+        }
+
+        .euiTableCellContent {
+          position: relative;
+          top: $euiSizeXS;
+        }
+      }
+
       &.euiTableRow-hasActions.euiTableRow-isExpandable {
         .euiTableRowCell--isExpander {
           top: auto;

package/src/components/table/_table.scss

@@ -206,20 +206,15 @@
       transition: opacity $euiAnimSpeedNormal $euiAnimSlightResistance, filter $euiAnimSpeedNormal $euiAnimSlightResistance;
     }
 
-    .expandedItemActions__completelyHide,
-    .expandedItemActions__completelyHide:disabled,
-    .expandedItemActions__completelyHide:disabled:hover,
-    .expandedItemActions__completelyHide:disabled:focus,
-    .euiTableRow:hover & .expandedItemActions__completelyHide:disabled {
+    .expandedItemActions__completelyHide {
       filter: grayscale(0%);
       opacity: 0;
     }
   }
 
-  &:hover .euiTableCellContent--showOnHover .euiTableCellContent__hoverItem:not(:disabled) {
-    &,
-    &:hover,
-    &:focus {
+  &:hover .euiTableCellContent--showOnHover,
+  .euiTableCellContent--showOnHover:focus-within {
+    .euiTableCellContent__hoverItem {
       opacity: 1;
       filter: grayscale(0%);
     }

package/test-env/components/accordion/accordion.a11y.js

@@ -32,9 +32,7 @@ describe('EuiAccordion', function () {
     it('has zero violations when expanded', function () {
       cy.mount((0, _react2.jsx)(_index.EuiAccordion, noArrowProps, (0, _react2.jsx)(_panel.EuiPanel, {
         color: "subdued"
-      }, "Any content inside of ", (0, _react2.jsx)("strong", null, "EuiAccordion"), " will appear here. We will include ", (0, _react2.jsx)("a", {
-        href: "#"
-      }, "a link"), " to confirm focus.")));
+      }, "Any content inside of ", (0, _react2.jsx)("strong", null, "EuiAccordion"), " will appear here.")));
       cy.get('button.euiAccordion__button').click();
       cy.checkAxe();
     });

package/test-env/components/auto_sizer/auto_sizer.js

@@ -1,12 +1,14 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.EuiAutoSizer = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -18,11 +20,16 @@ var _react2 = require("@emotion/react");
 var EuiAutoSizer = function EuiAutoSizer(_ref) {
   var children = _ref.children,
     defaultHeight = _ref.defaultHeight,
-    defaultWidth = _ref.defaultWidth;
+    defaultWidth = _ref.defaultWidth,
+    onResize = _ref.onResize;
   var childrenParams = {
     height: defaultHeight !== null && defaultHeight !== void 0 ? defaultHeight : 600,
     width: defaultWidth !== null && defaultWidth !== void 0 ? defaultWidth : 600
   };
+  (0, _react.useEffect)(function () {
+    onResize === null || onResize === void 0 ? void 0 : onResize(childrenParams);
+  }, [onResize, defaultHeight, defaultWidth]); // eslint-disable-line react-hooks/exhaustive-deps
+
   return (0, _react2.jsx)("div", {
     "data-eui": "EuiAutoSizer"
   }, children(childrenParams));

package/test-env/components/avatar/avatar.js

@@ -135,7 +135,7 @@ EuiAvatar.propTypes = {
   /**
        * Any EUI glyph, logo or custom icon to display instead of initials
        */
-  iconType: _propTypes.default.oneOfType([_propTypes.default.oneOf(["accessibility", "addDataApp", "advancedSettingsApp", "agentApp", "aggregate", "analyzeEvent", "annotation", "apmApp", "apmTrace", "appSearchApp", "apps", "arrowDown", "arrowLeft", "arrowRight", "arrowUp", "arrowStart", "arrowEnd", "article", "asterisk", "at", "auditbeatApp", "beaker", "bell", "bellSlash", "beta", "bolt", "boxesHorizontal", "boxesVertical", "branch", "branchUser", "broom", "brush", "bug", "bullseye", "calendar", "canvasApp", "casesApp", "check", "checkInCircleFilled", "cheer", "classificationJob", "clock", "cloudDrizzle", "cloudStormy", "cloudSunny", "cluster", "codeApp", "color", "compute", "console", "consoleApp", "container", "continuityAbove", "continuityAboveBelow", "continuityBelow", "continuityWithin", "controlsHorizontal", "controlsVertical", "copy", "copyClipboard", "createAdvancedJob", "createMultiMetricJob", "createPopulationJob", "createSingleMetricJob", "cross", "crossClusterReplicationApp", "crosshairs", "currency", "cut", "dashboardApp", "dataVisualizer", "database", "desktop", "devToolsApp", "discoverApp", "discuss", "document", "documentEdit", "documentation", "documents", "dot", "dotInCircle", "doubleArrowLeft", "doubleArrowRight", "download", "editorAlignCenter", "editorAlignLeft", "editorAlignRight", "editorBold", "editorChecklist", "editorCodeBlock", "editorComment", "editorDistributeHorizontal", "editorDistributeVertical", "editorHeading", "editorItalic", "editorItemAlignBottom", "editorItemAlignCenter", "editorItemAlignLeft", "editorItemAlignMiddle", "editorItemAlignRight", "editorItemAlignTop", "editorLink", "editorOrderedList", "editorPositionBottomLeft", "editorPositionBottomRight", "editorPositionTopLeft", "editorPositionTopRight", "editorRedo", "editorStrike", "editorTable", "editorUnderline", "editorUndo", "editorUnorderedList", "email", "empty", "emsApp", "eql", "eraser", "error", "exit", "expand", "expandMini", "exportAction", "eye", "eyeClosed", "faceHappy", "faceNeutral", "faceSad", "filebeatApp", "filter", "filterExclude", "filterIgnore", "filterInclude", "filterInCircle", "flag", "fleetApp", "fold", "folderCheck", "folderClosed", "folderExclamation", "folderOpen", "frameNext", "framePrevious", "fullScreen", "fullScreenExit", "function", "gear", "gisApp", "glasses", "globe", "grab", "grabHorizontal", "grabOmnidirectional", "gradient", "graphApp", "grid", "grokApp", "heart", "heartbeatApp", "heatmap", "help", "home", "iInCircle", "image", "importAction", "indexClose", "indexEdit", "indexFlush", "indexManagementApp", "indexMapping", "indexOpen", "indexPatternApp", "indexRollupApp", "indexRuntime", "indexSettings", "indexTemporary", "infinity", "inputOutput", "inspect", "invert", "ip", "key", "keyboard", "kqlField", "kqlFunction", "kqlOperand", "kqlSelector", "kqlValue", "kubernetesNode", "kubernetesPod", "launch", "layers", "lensApp", "lettering", "lineDashed", "lineDotted", "lineSolid", "link", "list", "listAdd", "lock", "lockOpen", "logoAWS", "logoAWSMono", "logoAerospike", "logoApache", "logoAppSearch", "logoAzure", "logoAzureMono", "logoBeats", "logoBusinessAnalytics", "logoCeph", "logoCloud", "logoCloudEnterprise", "logoCode", "logoCodesandbox", "logoCouchbase", "logoDocker", "logoDropwizard", "logoElastic", "logoElasticStack", "logoElasticsearch", "logoEnterpriseSearch", "logoEtcd", "logoGCP", "logoGCPMono", "logoGithub", "logoGmail", "logoGolang", "logoGoogleG", "logoHAproxy", "logoIBM", "logoIBMMono", "logoKafka", "logoKibana", "logoKubernetes", "logoLogging", "logoLogstash", "logoMaps", "logoMemcached", "logoMetrics", "logoMongodb", "logoMySQL", "logoNginx", "logoObservability", "logoOsquery", "logoPhp", "logoPostgres", "logoPrometheus", "logoRabbitmq", "logoRedis", "logoSecurity", "logoSiteSearch", "logoSketch", "logoSlack", "logoUptime", "logoVulnerabilityManagement", "logoWebhook", "logoWindows", "logoWorkplaceSearch", "logsApp", "logstashFilter", "logstashIf", "logstashInput", "logstashOutput", "logstashQueue", "machineLearningApp", "magnet", "magnifyWithExclamation", "magnifyWithMinus", "magnifyWithPlus", "managementApp", "mapMarker", "memory", "menu", "menuDown", "menuLeft", "menuRight", "menuUp", "merge", "metricbeatApp", "metricsApp", "minimize", "minus", "minusInCircle", "minusInCircleFilled", "mobile", "monitoringApp", "moon", "namespace", "nested", "node", "notebookApp", "number", "offline", "online", "outlierDetectionJob", "package", "packetbeatApp", "pageSelect", "pagesSelect", "palette", "paperClip", "partial", "pause", "payment", "pencil", "percent", "pin", "pinFilled", "pipelineApp", "pivot", "play", "playFilled", "plus", "plusInCircle", "plusInCircleFilled", "popout", "push", "questionInCircle", "quote", "recentlyViewedApp", "refresh", "regressionJob", "reporter", "reportingApp", "returnKey", "save", "savedObjectsApp", "scale", "search", "searchProfilerApp", "securityAnalyticsApp", "securityApp", "securitySignal", "securitySignalDetected", "securitySignalResolved", "sessionViewer", "shard", "share", "snowflake", "sortAscending", "sortDescending", "sortDown", "sortLeft", "sortRight", "sortUp", "sortable", "spaces", "spacesApp", "sparkles", "sqlApp", "starEmpty", "starEmptySpace", "starFilled", "starFilledSpace", "starMinusEmpty", "starMinusFilled", "starPlusEmpty", "starPlusFilled", "stats", "stop", "stopFilled", "stopSlash", "storage", "string", "submodule", "sun", "swatchInput", "symlink", "tableDensityCompact", "tableDensityExpanded", "tableDensityNormal", "tableOfContents", "tag", "tear", "temperature", "timeline", "timelineWithArrow", "timelionApp", "timeRefresh", "timeslider", "training", "transitionLeftIn", "transitionLeftOut", "transitionTopIn", "transitionTopOut", "trash", "unfold", "unlink", "upgradeAssistantApp", "uptimeApp", "user", "userAvatar", "users", "usersRolesApp", "vector", "videoPlayer", "visArea", "visAreaStacked", "visBarHorizontal", "visBarHorizontalStacked", "visBarVertical", "visBarVerticalStacked", "visGauge", "visGoal", "visLine", "visMapCoordinate", "visMapRegion", "visMetric", "visPie", "visTable", "visTagCloud", "visText", "visTimelion", "visVega", "visVisualBuilder", "visualizeApp", "vulnerabilityManagementApp", "warning", "alert", "watchesApp", "wordWrap", "wordWrapDisabled", "workplaceSearchApp", "wrench", "tokenAlias", "tokenAnnotation", "tokenArray", "tokenBinary", "tokenBoolean", "tokenClass", "tokenCompletionSuggester", "tokenConstant", "tokenDate", "tokenElement", "tokenEnum", "tokenEnumMember", "tokenEvent", "tokenException", "tokenField", "tokenFile", "tokenFlattened", "tokenFunction", "tokenGeo", "tokenHistogram", "tokenInterface", "tokenIP", "tokenJoin", "tokenKey", "tokenKeyword", "tokenMethod", "tokenMetricCounter", "tokenMetricGauge", "tokenModule", "tokenNamespace", "tokenNested", "tokenNull", "tokenNumber", "tokenObject", "tokenOperator", "tokenPackage", "tokenParameter", "tokenPercolator", "tokenProperty", "tokenRange", "tokenRankFeature", "tokenRankFeatures", "tokenRepo", "tokenSearchType", "tokenShape", "tokenString", "tokenStruct", "tokenSymbol", "tokenTag", "tokenText", "tokenTokenCount", "tokenVariable", "tokenVectorDense", "tokenDenseVector", "tokenVectorSparse"]).isRequired, _propTypes.default.string.isRequired, _propTypes.default.elementType.isRequired]),
+  iconType: _propTypes.default.oneOfType([_propTypes.default.oneOf(["accessibility", "addDataApp", "advancedSettingsApp", "agentApp", "aggregate", "analyzeEvent", "annotation", "apmApp", "apmTrace", "appSearchApp", "apps", "arrowDown", "arrowLeft", "arrowRight", "arrowUp", "arrowStart", "arrowEnd", "article", "asterisk", "at", "auditbeatApp", "beaker", "bell", "bellSlash", "beta", "bolt", "boxesHorizontal", "boxesVertical", "branch", "branchUser", "broom", "brush", "bug", "bullseye", "calendar", "canvasApp", "casesApp", "check", "checkInCircleFilled", "cheer", "classificationJob", "clock", "cloudDrizzle", "cloudStormy", "cloudSunny", "cluster", "codeApp", "color", "compute", "console", "consoleApp", "container", "continuityAbove", "continuityAboveBelow", "continuityBelow", "continuityWithin", "controlsHorizontal", "controlsVertical", "copy", "copyClipboard", "createAdvancedJob", "createMultiMetricJob", "createPopulationJob", "createSingleMetricJob", "cross", "crossClusterReplicationApp", "crosshairs", "currency", "cut", "dashboardApp", "dataVisualizer", "database", "desktop", "devToolsApp", "discoverApp", "discuss", "document", "documentEdit", "documentation", "documents", "dot", "dotInCircle", "doubleArrowLeft", "doubleArrowRight", "download", "editorAlignCenter", "editorAlignLeft", "editorAlignRight", "editorBold", "editorChecklist", "editorCodeBlock", "editorComment", "editorDistributeHorizontal", "editorDistributeVertical", "editorHeading", "editorItalic", "editorItemAlignBottom", "editorItemAlignCenter", "editorItemAlignLeft", "editorItemAlignMiddle", "editorItemAlignRight", "editorItemAlignTop", "editorLink", "editorOrderedList", "editorPositionBottomLeft", "editorPositionBottomRight", "editorPositionTopLeft", "editorPositionTopRight", "editorRedo", "editorStrike", "editorTable", "editorUnderline", "editorUndo", "editorUnorderedList", "email", "empty", "emsApp", "endpoint", "eql", "eraser", "error", "exit", "expand", "expandMini", "exportAction", "eye", "eyeClosed", "faceHappy", "faceNeutral", "faceSad", "filebeatApp", "filter", "filterExclude", "filterIgnore", "filterInclude", "filterInCircle", "flag", "fleetApp", "fold", "folderCheck", "folderClosed", "folderExclamation", "folderOpen", "frameNext", "framePrevious", "fullScreen", "fullScreenExit", "function", "gear", "gisApp", "glasses", "globe", "grab", "grabHorizontal", "grabOmnidirectional", "gradient", "graphApp", "grid", "grokApp", "heart", "heartbeatApp", "heatmap", "help", "home", "iInCircle", "image", "importAction", "indexClose", "indexEdit", "indexFlush", "indexManagementApp", "indexMapping", "indexOpen", "indexPatternApp", "indexRollupApp", "indexRuntime", "indexSettings", "indexTemporary", "infinity", "inputOutput", "inspect", "invert", "ip", "key", "keyboard", "kqlField", "kqlFunction", "kqlOperand", "kqlSelector", "kqlValue", "kubernetesNode", "kubernetesPod", "launch", "layers", "lensApp", "lettering", "lineDashed", "lineDotted", "lineSolid", "link", "list", "listAdd", "lock", "lockOpen", "logoAWS", "logoAWSMono", "logoAerospike", "logoApache", "logoAppSearch", "logoAzure", "logoAzureMono", "logoBeats", "logoBusinessAnalytics", "logoCeph", "logoCloud", "logoCloudEnterprise", "logoCode", "logoCodesandbox", "logoCouchbase", "logoDocker", "logoDropwizard", "logoElastic", "logoElasticStack", "logoElasticsearch", "logoEnterpriseSearch", "logoEtcd", "logoGCP", "logoGCPMono", "logoGithub", "logoGmail", "logoGolang", "logoGoogleG", "logoHAproxy", "logoIBM", "logoIBMMono", "logoKafka", "logoKibana", "logoKubernetes", "logoLogging", "logoLogstash", "logoMaps", "logoMemcached", "logoMetrics", "logoMongodb", "logoMySQL", "logoNginx", "logoObservability", "logoOsquery", "logoPhp", "logoPostgres", "logoPrometheus", "logoRabbitmq", "logoRedis", "logoSecurity", "logoSiteSearch", "logoSketch", "logoSlack", "logoUptime", "logoVulnerabilityManagement", "logoWebhook", "logoWindows", "logoWorkplaceSearch", "logsApp", "logstashFilter", "logstashIf", "logstashInput", "logstashOutput", "logstashQueue", "machineLearningApp", "magnet", "magnifyWithExclamation", "magnifyWithMinus", "magnifyWithPlus", "managementApp", "mapMarker", "memory", "menu", "menuDown", "menuLeft", "menuRight", "menuUp", "merge", "metricbeatApp", "metricsApp", "minimize", "minus", "minusInCircle", "minusInCircleFilled", "mobile", "monitoringApp", "moon", "namespace", "nested", "node", "notebookApp", "number", "offline", "online", "outlierDetectionJob", "package", "packetbeatApp", "pageSelect", "pagesSelect", "palette", "paperClip", "partial", "pause", "payment", "pencil", "percent", "pin", "pinFilled", "pipelineApp", "pivot", "play", "playFilled", "plus", "plusInCircle", "plusInCircleFilled", "popout", "push", "questionInCircle", "quote", "recentlyViewedApp", "refresh", "regressionJob", "reporter", "reportingApp", "returnKey", "save", "savedObjectsApp", "scale", "search", "searchProfilerApp", "securityAnalyticsApp", "securityApp", "securitySignal", "securitySignalDetected", "securitySignalResolved", "sessionViewer", "shard", "share", "snowflake", "sortAscending", "sortDescending", "sortDown", "sortLeft", "sortRight", "sortUp", "sortable", "spaces", "spacesApp", "sparkles", "sqlApp", "starEmpty", "starEmptySpace", "starFilled", "starFilledSpace", "starMinusEmpty", "starMinusFilled", "starPlusEmpty", "starPlusFilled", "stats", "stop", "stopFilled", "stopSlash", "storage", "string", "submodule", "sun", "swatchInput", "symlink", "tableDensityCompact", "tableDensityExpanded", "tableDensityNormal", "tableOfContents", "tag", "tear", "temperature", "timeline", "timelineWithArrow", "timelionApp", "timeRefresh", "timeslider", "training", "transitionLeftIn", "transitionLeftOut", "transitionTopIn", "transitionTopOut", "trash", "unfold", "unlink", "upgradeAssistantApp", "uptimeApp", "user", "userAvatar", "users", "usersRolesApp", "vector", "videoPlayer", "visArea", "visAreaStacked", "visBarHorizontal", "visBarHorizontalStacked", "visBarVertical", "visBarVerticalStacked", "visGauge", "visGoal", "visLine", "visMapCoordinate", "visMapRegion", "visMetric", "visPie", "visTable", "visTagCloud", "visText", "visTimelion", "visVega", "visVisualBuilder", "visualizeApp", "vulnerabilityManagementApp", "warning", "alert", "watchesApp", "wordWrap", "wordWrapDisabled", "workplaceSearchApp", "wrench", "tokenAlias", "tokenAnnotation", "tokenArray", "tokenBinary", "tokenBoolean", "tokenClass", "tokenCompletionSuggester", "tokenConstant", "tokenDate", "tokenElement", "tokenEnum", "tokenEnumMember", "tokenEvent", "tokenException", "tokenField", "tokenFile", "tokenFlattened", "tokenFunction", "tokenGeo", "tokenHistogram", "tokenInterface", "tokenIP", "tokenJoin", "tokenKey", "tokenKeyword", "tokenMethod", "tokenMetricCounter", "tokenMetricGauge", "tokenModule", "tokenNamespace", "tokenNested", "tokenNull", "tokenNumber", "tokenObject", "tokenOperator", "tokenPackage", "tokenParameter", "tokenPercolator", "tokenProperty", "tokenRange", "tokenRankFeature", "tokenRankFeatures", "tokenRepo", "tokenSearchType", "tokenShape", "tokenString", "tokenStruct", "tokenSymbol", "tokenTag", "tokenText", "tokenTokenCount", "tokenVariable", "tokenVectorDense", "tokenDenseVector", "tokenVectorSparse"]).isRequired, _propTypes.default.string.isRequired, _propTypes.default.elementType.isRequired]),
   /**
        * Manually change icon size
        */