@elastic/eui 12.3.1 → 12.4.0

package/lib/components/accordion/accordion.js

@@ -11,6 +11,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _common = require("../common");
+
 var _icon = require("../icon");
 
 var _flex = require("../flex");
@@ -55,7 +57,7 @@ var paddingSizeToClassNameMap = {
   l: 'euiAccordion__padding--l',
   xl: 'euiAccordion__padding--xl'
 };
-var PADDING_SIZES = Object.keys(paddingSizeToClassNameMap);
+var PADDING_SIZES = (0, _common.keysOf)(paddingSizeToClassNameMap);
 exports.PADDING_SIZES = PADDING_SIZES;
 
 var EuiAccordion =
@@ -63,12 +65,26 @@ var EuiAccordion =
 function (_Component) {
   _inherits(EuiAccordion, _Component);
 
-  function EuiAccordion(props) {
+  function EuiAccordion() {
+    var _getPrototypeOf2;
+
     var _this;
 
     _classCallCheck(this, EuiAccordion);
 
-    _this = _possibleConstructorReturn(this, _getPrototypeOf(EuiAccordion).call(this, props));
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(EuiAccordion)).call.apply(_getPrototypeOf2, [this].concat(args)));
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "childContent", null);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "childWrapper", null);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "state", {
+      isOpen: _this.props.initialIsOpen
+    });
 
     _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "setChildContentHeight", function () {
       requestAnimationFrame(function () {
@@ -77,14 +93,20 @@ function (_Component) {
       });
     });
 
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onToggle", function () {
+      _this.setState(function (prevState) {
+        return {
+          isOpen: !prevState.isOpen
+        };
+      }, function () {
+        _this.props.onToggle && _this.props.onToggle(_this.state.isOpen);
+      });
+    });
+
     _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "setChildContentRef", function (node) {
       _this.childContent = node;
     });
 
-    _this.state = {
-      isOpen: props.initialIsOpen
-    };
-    _this.onToggle = _this.onToggle.bind(_assertThisInitialized(_assertThisInitialized(_this)));
     return _this;
   }
 
@@ -98,23 +120,10 @@ function (_Component) {
     value: function componentDidUpdate() {
       this.setChildContentHeight();
     }
-  }, {
-    key: "onToggle",
-    value: function onToggle() {
-      var _this2 = this;
-
-      this.setState(function (prevState) {
-        return {
-          isOpen: !prevState.isOpen
-        };
-      }, function () {
-        _this2.props.onToggle && _this2.props.onToggle(_this2.state.isOpen);
-      });
-    }
   }, {
     key: "render",
     value: function render() {
-      var _this3 = this;
+      var _this2 = this;
 
       var _this$props = this.props,
           children = _this$props.children,
@@ -171,7 +180,7 @@ function (_Component) {
       }, buttonContent)))), optionalAction), _react.default.createElement("div", {
         className: "euiAccordion__childWrapper",
         ref: function ref(node) {
-          _this3.childWrapper = node;
+          _this2.childWrapper = node;
         },
         id: id
       }, _react.default.createElement(_mutation_observer.EuiMutationObserver, {
@@ -183,7 +192,7 @@ function (_Component) {
       }, function (mutationRef) {
         return _react.default.createElement("div", {
           ref: function ref(_ref) {
-            _this3.setChildContentRef(_ref);
+            _this2.setChildContentRef(_ref);
 
             mutationRef(_ref);
           }
@@ -198,51 +207,52 @@ function (_Component) {
 }(_react.Component);
 
 exports.EuiAccordion = EuiAccordion;
+
+_defineProperty(EuiAccordion, "defaultProps", {
+  initialIsOpen: false,
+  paddingSize: 'none'
+});
+
 EuiAccordion.propTypes = {
-  /**
-   * The content of the exposed accordion.
-   */
-  children: _propTypes.default.node,
+  className: _propTypes.default.string,
+  "aria-label": _propTypes.default.string,
+  "data-test-subj": _propTypes.default.string,
   id: _propTypes.default.string.isRequired,
 
   /**
-   * Class that will apply to the entire accordion.
-   */
-  className: _propTypes.default.string,
+       * Class that will apply to the trigger for the accordion.
+       */
+  buttonClassName: _propTypes.default.string,
 
   /**
-   * Class that will apply to the trigger for the accordion.
-   */
+       * Class that will apply to the trigger content for the accordion.
+       */
   buttonContentClassName: _propTypes.default.string,
 
   /**
-   * The content of the clickable trigger
-   */
+       * The content of the clickable trigger
+       */
   buttonContent: _propTypes.default.node,
 
   /**
-   * Will appear right aligned against the button. Useful for separate actions like deletions.
-   */
+       * Will appear right aligned against the button. Useful for separate actions like deletions.
+       */
   extraAction: _propTypes.default.node,
 
   /**
-   * The accordion will start in the open state.
-   */
-  initialIsOpen: _propTypes.default.bool,
+       * The accordion will start in the open state.
+       */
+  initialIsOpen: _propTypes.default.bool.isRequired,
 
   /**
-   * The padding around the exposed accordion content.
-   */
-  paddingSize: _propTypes.default.oneOf(PADDING_SIZES),
+       * Optional callback method called on open and close with a single `isOpen` parameter
+       */
+  onToggle: _propTypes.default.func,
 
   /**
-   * Optional callback method called on open and close with a single `isOpen` parameter
-   */
-  onToggle: _propTypes.default.func
-};
-EuiAccordion.defaultProps = {
-  initialIsOpen: false,
-  paddingSize: 'none'
+       * The padding around the exposed accordion content.
+       */
+  paddingSize: _propTypes.default.oneOf(["none", "xs", "s", "m", "l", "xl"]).isRequired
 };
 EuiAccordion.__docgenInfo = {
   "description": "",
@@ -311,12 +321,26 @@ EuiAccordion.__docgenInfo = {
       "required": false,
       "description": "The padding around the exposed accordion content."
     },
-    "children": {
+    "className": {
       "type": {
-        "name": "node"
+        "name": "string"
       },
       "required": false,
-      "description": "The content of the exposed accordion."
+      "description": ""
+    },
+    "aria-label": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": ""
+    },
+    "data-test-subj": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": ""
     },
     "id": {
       "type": {
@@ -325,19 +349,19 @@ EuiAccordion.__docgenInfo = {
       "required": true,
       "description": ""
     },
-    "className": {
+    "buttonClassName": {
       "type": {
         "name": "string"
       },
       "required": false,
-      "description": "Class that will apply to the entire accordion."
+      "description": "Class that will apply to the trigger for the accordion."
     },
     "buttonContentClassName": {
       "type": {
         "name": "string"
       },
       "required": false,
-      "description": "Class that will apply to the trigger for the accordion."
+      "description": "Class that will apply to the trigger content for the accordion."
     },
     "buttonContent": {
       "type": {

package/lib/components/accordion/accordion.test.js

@@ -0,0 +1,96 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _enzyme = require("enzyme");
+
+var _required_props = require("../../test/required_props");
+
+var _accordion = require("./accordion");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+var id = 0;
+
+var getId = function getId() {
+  return "".concat(id++);
+};
+
+describe('EuiAccordion', function () {
+  test('is rendered', function () {
+    var component = (0, _enzyme.render)(_react.default.createElement(_accordion.EuiAccordion, _extends({
+      id: getId()
+    }, _required_props.requiredProps)));
+    expect(component).toMatchSnapshot();
+  });
+  describe('props', function () {
+    describe('buttonContentClassName', function () {
+      it('is rendered', function () {
+        var component = (0, _enzyme.render)(_react.default.createElement(_accordion.EuiAccordion, {
+          id: getId(),
+          buttonContentClassName: "button content class name"
+        }));
+        expect(component).toMatchSnapshot();
+      });
+    });
+    describe('buttonContent', function () {
+      it('is rendered', function () {
+        var component = (0, _enzyme.render)(_react.default.createElement(_accordion.EuiAccordion, {
+          id: getId(),
+          buttonContent: _react.default.createElement("div", null, "Button content")
+        }));
+        expect(component).toMatchSnapshot();
+      });
+    });
+    describe('extraAction', function () {
+      it('is rendered', function () {
+        var component = (0, _enzyme.render)(_react.default.createElement(_accordion.EuiAccordion, {
+          id: getId(),
+          extraAction: _react.default.createElement("button", null, "Extra action")
+        }));
+        expect(component).toMatchSnapshot();
+      });
+    });
+    describe('initialIsOpen', function () {
+      it('is rendered', function () {
+        var component = (0, _enzyme.render)(_react.default.createElement(_accordion.EuiAccordion, {
+          id: getId(),
+          initialIsOpen: true
+        }, _react.default.createElement("p", null, "You can see me.")));
+        expect(component).toMatchSnapshot();
+      });
+    });
+  });
+  describe('behavior', function () {
+    it('opens when clicked once', function () {
+      var component = (0, _enzyme.mount)(_react.default.createElement(_accordion.EuiAccordion, {
+        id: getId()
+      }));
+      component.find('button').simulate('click');
+      expect(component).toMatchSnapshot();
+    });
+    it('closes when clicked twice', function () {
+      var component = (0, _enzyme.mount)(_react.default.createElement(_accordion.EuiAccordion, {
+        id: getId()
+      }));
+      component.find('button').simulate('click');
+      component.find('button').simulate('click');
+      expect(component).toMatchSnapshot();
+    });
+    it('accepts and calls an optional callback on open and close', function () {
+      var onToggleHandler = jest.fn();
+      var component = (0, _enzyme.mount)(_react.default.createElement(_accordion.EuiAccordion, {
+        id: getId(),
+        onToggle: onToggleHandler
+      }));
+      component.find('button').simulate('click');
+      expect(onToggleHandler).toBeCalled();
+      expect(onToggleHandler).toBeCalledWith(true);
+      component.find('button').simulate('click');
+      expect(onToggleHandler).toBeCalled();
+      expect(onToggleHandler).toBeCalledWith(false);
+    });
+  });
+});

package/lib/components/badge/badge.js

@@ -158,7 +158,7 @@ EuiBadge.propTypes = {
   /**
      * Accepts any string from our icon library
      */
-  iconType: _propTypes.default.oneOfType([_propTypes.default.oneOf(["addDataApp", "advancedSettingsApp", "alert", "apmApp", "apmTrace", "apps", "arrowDown", "arrowLeft", "arrowRight", "arrowUp", "asterisk", "auditbeatApp", "beaker", "bell", "bolt", "boxesHorizontal", "boxesVertical", "branch", "broom", "brush", "bug", "bullseye", "calendar", "canvasApp", "codeApp", "check", "checkInCircleFilled", "clock", "compute", "console", "consoleApp", "controlsHorizontal", "controlsVertical", "copy", "copyClipboard", "createAdvancedJob", "createMultiMetricJob", "createPopulationJob", "createSingleMetricJob", "cross", "crossClusterReplicationApp", "crosshairs", "crossInACircleFilled", "cut", "dashboardApp", "database", "dataVisualizer", "devToolsApp", "discoverApp", "document", "dot", "editorAlignCenter", "editorAlignLeft", "editorAlignRight", "editorBold", "editorCodeBlock", "editorComment", "editorDistributeHorizontal", "editorDistributeVertical", "editorHeading", "editorItalic", "editorItemAlignLeft", "editorItemAlignBottom", "editorItemAlignCenter", "editorItemAlignMiddle", "editorItemAlignRight", "editorItemAlignTop", "editorLink", "editorOrderedList", "editorPositionBottomLeft", "editorPositionBottomRight", "editorPositionTopLeft", "editorPositionTopRight", "editorRedo", "editorStrike", "editorTable", "editorUnderline", "editorUndo", "editorUnorderedList", "email", "empty", "emsApp", "exit", "expand", "exportAction", "eye", "eyeClosed", "faceHappy", "faceNeutral", "faceSad", "filebeatApp", "filter", "flag", "folderClosed", "folderOpen", "fullScreen", "gear", "gisApp", "glasses", "globe", "grab", "grabHorizontal", "graphApp", "grid", "grokApp", "heart", "heartbeatApp", "heatmap", "help", "iInCircle", "importAction", "indexClose", "indexEdit", "indexFlush", "indexManagementApp", "indexMapping", "indexOpen", "indexPatternApp", "indexRollupApp", "indexSettings", "infraApp", "inputOutput", "inspect", "invert", "kqlField", "kqlFunction", "kqlOperand", "kqlSelector", "kqlValue", "link", "list", "listAdd", "lock", "lockOpen", "loggingApp", "logoAerospike", "logoApache", "logoAPM", "logoAppSearch", "logoAWS", "logoAWSMono", "logoAzure", "logoAzureMono", "logoBeats", "logoBusinessAnalytics", "logoCeph", "logoCloud", "logoCloudEnterprise", "logoCode", "logoCodesandbox", "logoCouchbase", "logoDocker", "logoDropwizard", "logoElastic", "logoElasticsearch", "logoElasticStack", "logoEnterpriseSearch", "logoEtcd", "logoGCP", "logoGCPMono", "logoGithub", "logoGmail", "logoGolang", "logoHAproxy", "logoIBM", "logoIBMMono", "logoKafka", "logoKibana", "logoKubernetes", "logoLogging", "logoLogstash", "logoMaps", "logoMemcached", "logoMetrics", "logoMongodb", "logoMySQL", "logoNginx", "logoOsquery", "logoPhp", "logoPostgres", "logoPrometheus", "logoRabbitmq", "logoRedis", "logoSecurity", "logoSiteSearch", "logoSketch", "logoSlack", "logoUptime", "logoWebhook", "logoWindows", "logstashFilter", "logstashIf", "logstashInput", "logstashOutput", "logstashQueue", "machineLearningApp", "magnet", "magnifyWithMinus", "magnifyWithPlus", "managementApp", "mapMarker", "memory", "menuLeft", "menuRight", "merge", "metricbeatApp", "minusInCircle", "minusInCircleFilled", "monitoringApp", "moon", "node", "notebookApp", "number", "offline", "online", "packetbeatApp", "pause", "pencil", "pin", "pinFilled", "pipelineApp", "play", "plusInCircle", "plusInCircleFilled", "popout", "questionInCircle", "refresh", "reportingApp", "save", "savedObjectsApp", "scale", "search", "searchProfilerApp", "securityAnalyticsApp", "securityApp", "shard", "share", "snowflake", "sortable", "sortDown", "sortLeft", "sortRight", "sortUp", "spacesApp", "sqlApp", "starEmpty", "starEmptySpace", "starFilled", "starFilledSpace", "starMinusEmpty", "starMinusFilled", "starPlusEmpty", "starPlusFilled", "stats", "stop", "stopFilled", "stopSlash", "storage", "string", "submodule", "swatchInput", "symlink", "tableOfContents", "tag", "tear", "temperature", "timelionApp", "trash", "upgradeAssistantApp", "uptimeApp", "user", "usersRolesApp", "vector", "visArea", "visBarHorizontal", "visBarVertical", "visControls", "visGauge", "visGoal", "visHeatmap", "visLine", "visMapCoordinate", "visMapRegion", "visMetric", "visPie", "visTable", "visTagCloud", "visText", "visTimelion", "visualizeApp", "visVega", "visVisualBuilder", "watchesApp", "wrench", "tokenClass", "tokenProperty", "tokenEnum", "tokenVariable", "tokenMethod", "tokenAnnotation", "tokenException", "tokenInterface", "tokenParameter", "tokenField", "tokenElement", "tokenFunction", "tokenBoolean", "tokenString", "tokenArray", "tokenNumber", "tokenConstant", "tokenObject", "tokenEvent", "tokenKey", "tokenNull", "tokenStruct", "tokenPackage", "tokenOperator", "tokenEnumMember", "tokenRepo", "tokenSymbol", "tokenFile", "tokenModule", "tokenNamespace"]).isRequired, _propTypes.default.string.isRequired, _propTypes.default.element.isRequired]),
+  iconType: _propTypes.default.oneOfType([_propTypes.default.oneOf(["addDataApp", "advancedSettingsApp", "alert", "apmApp", "apmTrace", "apps", "arrowDown", "arrowLeft", "arrowRight", "arrowUp", "asterisk", "auditbeatApp", "beaker", "bell", "bolt", "boxesHorizontal", "boxesVertical", "branch", "broom", "brush", "bug", "bullseye", "calendar", "canvasApp", "codeApp", "check", "checkInCircleFilled", "clock", "cloudDrizzle", "cloudStormy", "cloudSunny", "compute", "console", "consoleApp", "controlsHorizontal", "controlsVertical", "copy", "copyClipboard", "createAdvancedJob", "createMultiMetricJob", "createPopulationJob", "createSingleMetricJob", "cross", "crossClusterReplicationApp", "crosshairs", "crossInACircleFilled", "cut", "dashboardApp", "database", "dataVisualizer", "devToolsApp", "discoverApp", "document", "documentEdit", "documents", "dot", "editorAlignCenter", "editorAlignLeft", "editorAlignRight", "editorBold", "editorCodeBlock", "editorComment", "editorDistributeHorizontal", "editorDistributeVertical", "editorHeading", "editorItalic", "editorItemAlignLeft", "editorItemAlignBottom", "editorItemAlignCenter", "editorItemAlignMiddle", "editorItemAlignRight", "editorItemAlignTop", "editorLink", "editorOrderedList", "editorPositionBottomLeft", "editorPositionBottomRight", "editorPositionTopLeft", "editorPositionTopRight", "editorRedo", "editorStrike", "editorTable", "editorUnderline", "editorUndo", "editorUnorderedList", "email", "empty", "emsApp", "exit", "expand", "exportAction", "eye", "eyeClosed", "faceHappy", "faceNeutral", "faceSad", "filebeatApp", "filter", "flag", "folderClosed", "folderOpen", "fullScreen", "gear", "gisApp", "glasses", "globe", "grab", "grabHorizontal", "graphApp", "grid", "grokApp", "heart", "heartbeatApp", "heatmap", "help", "iInCircle", "importAction", "indexClose", "indexEdit", "indexFlush", "indexManagementApp", "indexMapping", "indexOpen", "indexPatternApp", "indexRollupApp", "indexSettings", "infraApp", "inputOutput", "inspect", "invert", "kqlField", "kqlFunction", "kqlOperand", "kqlSelector", "kqlValue", "link", "list", "listAdd", "lock", "lockOpen", "loggingApp", "logoAerospike", "logoApache", "logoAPM", "logoAppSearch", "logoAWS", "logoAWSMono", "logoAzure", "logoAzureMono", "logoBeats", "logoBusinessAnalytics", "logoCeph", "logoCloud", "logoCloudEnterprise", "logoCode", "logoCodesandbox", "logoCouchbase", "logoDocker", "logoDropwizard", "logoElastic", "logoElasticsearch", "logoElasticStack", "logoEnterpriseSearch", "logoEtcd", "logoGCP", "logoGCPMono", "logoGithub", "logoGmail", "logoGolang", "logoHAproxy", "logoIBM", "logoIBMMono", "logoKafka", "logoKibana", "logoKubernetes", "logoLogging", "logoLogstash", "logoMaps", "logoMemcached", "logoMetrics", "logoMongodb", "logoMySQL", "logoNginx", "logoOsquery", "logoPhp", "logoPostgres", "logoPrometheus", "logoRabbitmq", "logoRedis", "logoSecurity", "logoSiteSearch", "logoSketch", "logoSlack", "logoUptime", "logoWebhook", "logoWindows", "logstashFilter", "logstashIf", "logstashInput", "logstashOutput", "logstashQueue", "machineLearningApp", "magnet", "magnifyWithMinus", "magnifyWithPlus", "managementApp", "mapMarker", "memory", "menuLeft", "menuRight", "merge", "metricbeatApp", "minusInCircle", "minusInCircleFilled", "monitoringApp", "moon", "node", "notebookApp", "number", "offline", "online", "packetbeatApp", "pause", "pencil", "pin", "pinFilled", "pipelineApp", "play", "plusInCircle", "plusInCircleFilled", "popout", "questionInCircle", "refresh", "reportingApp", "save", "savedObjectsApp", "scale", "search", "searchProfilerApp", "securityAnalyticsApp", "securityApp", "shard", "share", "snowflake", "sortable", "sortDown", "sortLeft", "sortRight", "sortUp", "spacesApp", "sqlApp", "starEmpty", "starEmptySpace", "starFilled", "starFilledSpace", "starMinusEmpty", "starMinusFilled", "starPlusEmpty", "starPlusFilled", "stats", "stop", "stopFilled", "stopSlash", "storage", "string", "submodule", "swatchInput", "symlink", "tableOfContents", "tag", "tear", "temperature", "timelionApp", "training", "trash", "upgradeAssistantApp", "uptimeApp", "user", "usersRolesApp", "vector", "videoPlayer", "visArea", "visBarHorizontal", "visBarVertical", "visControls", "visGauge", "visGoal", "visHeatmap", "visLine", "visMapCoordinate", "visMapRegion", "visMetric", "visPie", "visTable", "visTagCloud", "visText", "visTimelion", "visualizeApp", "visVega", "visVisualBuilder", "watchesApp", "wrench", "tokenClass", "tokenProperty", "tokenEnum", "tokenVariable", "tokenMethod", "tokenAnnotation", "tokenException", "tokenInterface", "tokenParameter", "tokenField", "tokenElement", "tokenFunction", "tokenBoolean", "tokenString", "tokenArray", "tokenNumber", "tokenConstant", "tokenObject", "tokenEvent", "tokenKey", "tokenNull", "tokenStruct", "tokenPackage", "tokenOperator", "tokenEnumMember", "tokenRepo", "tokenSymbol", "tokenFile", "tokenModule", "tokenNamespace"]).isRequired, _propTypes.default.string.isRequired, _propTypes.default.element.isRequired]),
 
   /**
      * The side of the badge the icon should sit
@@ -366,6 +366,15 @@ EuiBadge.__docgenInfo = {
           }, {
             "value": "\"clock\"",
             "computed": false
+          }, {
+            "value": "\"cloudDrizzle\"",
+            "computed": false
+          }, {
+            "value": "\"cloudStormy\"",
+            "computed": false
+          }, {
+            "value": "\"cloudSunny\"",
+            "computed": false
           }, {
             "value": "\"compute\"",
             "computed": false
@@ -432,6 +441,12 @@ EuiBadge.__docgenInfo = {
           }, {
             "value": "\"document\"",
             "computed": false
+          }, {
+            "value": "\"documentEdit\"",
+            "computed": false
+          }, {
+            "value": "\"documents\"",
+            "computed": false
           }, {
             "value": "\"dot\"",
             "computed": false
@@ -1083,6 +1098,9 @@ EuiBadge.__docgenInfo = {
           }, {
             "value": "\"timelionApp\"",
             "computed": false
+          }, {
+            "value": "\"training\"",
+            "computed": false
           }, {
             "value": "\"trash\"",
             "computed": false
@@ -1101,6 +1119,9 @@ EuiBadge.__docgenInfo = {
           }, {
             "value": "\"vector\"",
             "computed": false
+          }, {
+            "value": "\"videoPlayer\"",
+            "computed": false
           }, {
             "value": "\"visArea\"",
             "computed": false

package/lib/components/badge/beta_badge/beta_badge.js

@@ -80,7 +80,7 @@ EuiBetaBadge.propTypes = {
   /**
      * Supply an icon type if the badge should just be an icon
      */
-  iconType: _propTypes.default.oneOfType([_propTypes.default.oneOf(["addDataApp", "advancedSettingsApp", "alert", "apmApp", "apmTrace", "apps", "arrowDown", "arrowLeft", "arrowRight", "arrowUp", "asterisk", "auditbeatApp", "beaker", "bell", "bolt", "boxesHorizontal", "boxesVertical", "branch", "broom", "brush", "bug", "bullseye", "calendar", "canvasApp", "codeApp", "check", "checkInCircleFilled", "clock", "compute", "console", "consoleApp", "controlsHorizontal", "controlsVertical", "copy", "copyClipboard", "createAdvancedJob", "createMultiMetricJob", "createPopulationJob", "createSingleMetricJob", "cross", "crossClusterReplicationApp", "crosshairs", "crossInACircleFilled", "cut", "dashboardApp", "database", "dataVisualizer", "devToolsApp", "discoverApp", "document", "dot", "editorAlignCenter", "editorAlignLeft", "editorAlignRight", "editorBold", "editorCodeBlock", "editorComment", "editorDistributeHorizontal", "editorDistributeVertical", "editorHeading", "editorItalic", "editorItemAlignLeft", "editorItemAlignBottom", "editorItemAlignCenter", "editorItemAlignMiddle", "editorItemAlignRight", "editorItemAlignTop", "editorLink", "editorOrderedList", "editorPositionBottomLeft", "editorPositionBottomRight", "editorPositionTopLeft", "editorPositionTopRight", "editorRedo", "editorStrike", "editorTable", "editorUnderline", "editorUndo", "editorUnorderedList", "email", "empty", "emsApp", "exit", "expand", "exportAction", "eye", "eyeClosed", "faceHappy", "faceNeutral", "faceSad", "filebeatApp", "filter", "flag", "folderClosed", "folderOpen", "fullScreen", "gear", "gisApp", "glasses", "globe", "grab", "grabHorizontal", "graphApp", "grid", "grokApp", "heart", "heartbeatApp", "heatmap", "help", "iInCircle", "importAction", "indexClose", "indexEdit", "indexFlush", "indexManagementApp", "indexMapping", "indexOpen", "indexPatternApp", "indexRollupApp", "indexSettings", "infraApp", "inputOutput", "inspect", "invert", "kqlField", "kqlFunction", "kqlOperand", "kqlSelector", "kqlValue", "link", "list", "listAdd", "lock", "lockOpen", "loggingApp", "logoAerospike", "logoApache", "logoAPM", "logoAppSearch", "logoAWS", "logoAWSMono", "logoAzure", "logoAzureMono", "logoBeats", "logoBusinessAnalytics", "logoCeph", "logoCloud", "logoCloudEnterprise", "logoCode", "logoCodesandbox", "logoCouchbase", "logoDocker", "logoDropwizard", "logoElastic", "logoElasticsearch", "logoElasticStack", "logoEnterpriseSearch", "logoEtcd", "logoGCP", "logoGCPMono", "logoGithub", "logoGmail", "logoGolang", "logoHAproxy", "logoIBM", "logoIBMMono", "logoKafka", "logoKibana", "logoKubernetes", "logoLogging", "logoLogstash", "logoMaps", "logoMemcached", "logoMetrics", "logoMongodb", "logoMySQL", "logoNginx", "logoOsquery", "logoPhp", "logoPostgres", "logoPrometheus", "logoRabbitmq", "logoRedis", "logoSecurity", "logoSiteSearch", "logoSketch", "logoSlack", "logoUptime", "logoWebhook", "logoWindows", "logstashFilter", "logstashIf", "logstashInput", "logstashOutput", "logstashQueue", "machineLearningApp", "magnet", "magnifyWithMinus", "magnifyWithPlus", "managementApp", "mapMarker", "memory", "menuLeft", "menuRight", "merge", "metricbeatApp", "minusInCircle", "minusInCircleFilled", "monitoringApp", "moon", "node", "notebookApp", "number", "offline", "online", "packetbeatApp", "pause", "pencil", "pin", "pinFilled", "pipelineApp", "play", "plusInCircle", "plusInCircleFilled", "popout", "questionInCircle", "refresh", "reportingApp", "save", "savedObjectsApp", "scale", "search", "searchProfilerApp", "securityAnalyticsApp", "securityApp", "shard", "share", "snowflake", "sortable", "sortDown", "sortLeft", "sortRight", "sortUp", "spacesApp", "sqlApp", "starEmpty", "starEmptySpace", "starFilled", "starFilledSpace", "starMinusEmpty", "starMinusFilled", "starPlusEmpty", "starPlusFilled", "stats", "stop", "stopFilled", "stopSlash", "storage", "string", "submodule", "swatchInput", "symlink", "tableOfContents", "tag", "tear", "temperature", "timelionApp", "trash", "upgradeAssistantApp", "uptimeApp", "user", "usersRolesApp", "vector", "visArea", "visBarHorizontal", "visBarVertical", "visControls", "visGauge", "visGoal", "visHeatmap", "visLine", "visMapCoordinate", "visMapRegion", "visMetric", "visPie", "visTable", "visTagCloud", "visText", "visTimelion", "visualizeApp", "visVega", "visVisualBuilder", "watchesApp", "wrench", "tokenClass", "tokenProperty", "tokenEnum", "tokenVariable", "tokenMethod", "tokenAnnotation", "tokenException", "tokenInterface", "tokenParameter", "tokenField", "tokenElement", "tokenFunction", "tokenBoolean", "tokenString", "tokenArray", "tokenNumber", "tokenConstant", "tokenObject", "tokenEvent", "tokenKey", "tokenNull", "tokenStruct", "tokenPackage", "tokenOperator", "tokenEnumMember", "tokenRepo", "tokenSymbol", "tokenFile", "tokenModule", "tokenNamespace"]).isRequired, _propTypes.default.string.isRequired, _propTypes.default.element.isRequired]),
+  iconType: _propTypes.default.oneOfType([_propTypes.default.oneOf(["addDataApp", "advancedSettingsApp", "alert", "apmApp", "apmTrace", "apps", "arrowDown", "arrowLeft", "arrowRight", "arrowUp", "asterisk", "auditbeatApp", "beaker", "bell", "bolt", "boxesHorizontal", "boxesVertical", "branch", "broom", "brush", "bug", "bullseye", "calendar", "canvasApp", "codeApp", "check", "checkInCircleFilled", "clock", "cloudDrizzle", "cloudStormy", "cloudSunny", "compute", "console", "consoleApp", "controlsHorizontal", "controlsVertical", "copy", "copyClipboard", "createAdvancedJob", "createMultiMetricJob", "createPopulationJob", "createSingleMetricJob", "cross", "crossClusterReplicationApp", "crosshairs", "crossInACircleFilled", "cut", "dashboardApp", "database", "dataVisualizer", "devToolsApp", "discoverApp", "document", "documentEdit", "documents", "dot", "editorAlignCenter", "editorAlignLeft", "editorAlignRight", "editorBold", "editorCodeBlock", "editorComment", "editorDistributeHorizontal", "editorDistributeVertical", "editorHeading", "editorItalic", "editorItemAlignLeft", "editorItemAlignBottom", "editorItemAlignCenter", "editorItemAlignMiddle", "editorItemAlignRight", "editorItemAlignTop", "editorLink", "editorOrderedList", "editorPositionBottomLeft", "editorPositionBottomRight", "editorPositionTopLeft", "editorPositionTopRight", "editorRedo", "editorStrike", "editorTable", "editorUnderline", "editorUndo", "editorUnorderedList", "email", "empty", "emsApp", "exit", "expand", "exportAction", "eye", "eyeClosed", "faceHappy", "faceNeutral", "faceSad", "filebeatApp", "filter", "flag", "folderClosed", "folderOpen", "fullScreen", "gear", "gisApp", "glasses", "globe", "grab", "grabHorizontal", "graphApp", "grid", "grokApp", "heart", "heartbeatApp", "heatmap", "help", "iInCircle", "importAction", "indexClose", "indexEdit", "indexFlush", "indexManagementApp", "indexMapping", "indexOpen", "indexPatternApp", "indexRollupApp", "indexSettings", "infraApp", "inputOutput", "inspect", "invert", "kqlField", "kqlFunction", "kqlOperand", "kqlSelector", "kqlValue", "link", "list", "listAdd", "lock", "lockOpen", "loggingApp", "logoAerospike", "logoApache", "logoAPM", "logoAppSearch", "logoAWS", "logoAWSMono", "logoAzure", "logoAzureMono", "logoBeats", "logoBusinessAnalytics", "logoCeph", "logoCloud", "logoCloudEnterprise", "logoCode", "logoCodesandbox", "logoCouchbase", "logoDocker", "logoDropwizard", "logoElastic", "logoElasticsearch", "logoElasticStack", "logoEnterpriseSearch", "logoEtcd", "logoGCP", "logoGCPMono", "logoGithub", "logoGmail", "logoGolang", "logoHAproxy", "logoIBM", "logoIBMMono", "logoKafka", "logoKibana", "logoKubernetes", "logoLogging", "logoLogstash", "logoMaps", "logoMemcached", "logoMetrics", "logoMongodb", "logoMySQL", "logoNginx", "logoOsquery", "logoPhp", "logoPostgres", "logoPrometheus", "logoRabbitmq", "logoRedis", "logoSecurity", "logoSiteSearch", "logoSketch", "logoSlack", "logoUptime", "logoWebhook", "logoWindows", "logstashFilter", "logstashIf", "logstashInput", "logstashOutput", "logstashQueue", "machineLearningApp", "magnet", "magnifyWithMinus", "magnifyWithPlus", "managementApp", "mapMarker", "memory", "menuLeft", "menuRight", "merge", "metricbeatApp", "minusInCircle", "minusInCircleFilled", "monitoringApp", "moon", "node", "notebookApp", "number", "offline", "online", "packetbeatApp", "pause", "pencil", "pin", "pinFilled", "pipelineApp", "play", "plusInCircle", "plusInCircleFilled", "popout", "questionInCircle", "refresh", "reportingApp", "save", "savedObjectsApp", "scale", "search", "searchProfilerApp", "securityAnalyticsApp", "securityApp", "shard", "share", "snowflake", "sortable", "sortDown", "sortLeft", "sortRight", "sortUp", "spacesApp", "sqlApp", "starEmpty", "starEmptySpace", "starFilled", "starFilledSpace", "starMinusEmpty", "starMinusFilled", "starPlusEmpty", "starPlusFilled", "stats", "stop", "stopFilled", "stopSlash", "storage", "string", "submodule", "swatchInput", "symlink", "tableOfContents", "tag", "tear", "temperature", "timelionApp", "training", "trash", "upgradeAssistantApp", "uptimeApp", "user", "usersRolesApp", "vector", "videoPlayer", "visArea", "visBarHorizontal", "visBarVertical", "visControls", "visGauge", "visGoal", "visHeatmap", "visLine", "visMapCoordinate", "visMapRegion", "visMetric", "visPie", "visTable", "visTagCloud", "visText", "visTimelion", "visualizeApp", "visVega", "visVisualBuilder", "watchesApp", "wrench", "tokenClass", "tokenProperty", "tokenEnum", "tokenVariable", "tokenMethod", "tokenAnnotation", "tokenException", "tokenInterface", "tokenParameter", "tokenField", "tokenElement", "tokenFunction", "tokenBoolean", "tokenString", "tokenArray", "tokenNumber", "tokenConstant", "tokenObject", "tokenEvent", "tokenKey", "tokenNull", "tokenStruct", "tokenPackage", "tokenOperator", "tokenEnumMember", "tokenRepo", "tokenSymbol", "tokenFile", "tokenModule", "tokenNamespace"]).isRequired, _propTypes.default.string.isRequired, _propTypes.default.element.isRequired]),
 
   /**
      * One word label like "Beta" or "Lab"
@@ -246,6 +246,15 @@ EuiBetaBadge.__docgenInfo = {
           }, {
             "value": "\"clock\"",
             "computed": false
+          }, {
+            "value": "\"cloudDrizzle\"",
+            "computed": false
+          }, {
+            "value": "\"cloudStormy\"",
+            "computed": false
+          }, {
+            "value": "\"cloudSunny\"",
+            "computed": false
           }, {
             "value": "\"compute\"",
             "computed": false
@@ -312,6 +321,12 @@ EuiBetaBadge.__docgenInfo = {
           }, {
             "value": "\"document\"",
             "computed": false
+          }, {
+            "value": "\"documentEdit\"",
+            "computed": false
+          }, {
+            "value": "\"documents\"",
+            "computed": false
           }, {
             "value": "\"dot\"",
             "computed": false
@@ -963,6 +978,9 @@ EuiBetaBadge.__docgenInfo = {
           }, {
             "value": "\"timelionApp\"",
             "computed": false
+          }, {
+            "value": "\"training\"",
+            "computed": false
           }, {
             "value": "\"trash\"",
             "computed": false
@@ -981,6 +999,9 @@ EuiBetaBadge.__docgenInfo = {
           }, {
             "value": "\"vector\"",
             "computed": false
+          }, {
+            "value": "\"videoPlayer\"",
+            "computed": false
           }, {
             "value": "\"visArea\"",
             "computed": false

package/lib/components/combo_box/combo_box.js

@@ -705,7 +705,8 @@ function (_Component) {
           rowHeight: rowHeight,
           "data-test-subj": optionsListDataTestSubj,
           fullWidth: fullWidth,
-          rootId: this.rootId
+          rootId: this.rootId,
+          onCloseList: this.closeList
         }));
       }
 

package/lib/components/combo_box/combo_box_options_list/combo_box_options_list.js

@@ -93,6 +93,14 @@ function (_Component) {
       });
     });
 
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "closeListOnScroll", function (e) {
+      // close the list when a scroll event happens, but not if the scroll happened in the options list
+      // this mirrors Firefox's approach of auto-closing `select` elements onscroll
+      if (_this.list && _this.list.contains(e.target) === false) {
+        _this.props.onCloseList();
+      }
+    });
+
     _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "listRef", function (node) {
       _this.props.listRef(node);
 
@@ -105,13 +113,25 @@ function (_Component) {
   _createClass(EuiComboBoxOptionsList, [{
     key: "componentDidMount",
     value: function componentDidMount() {
+      var _this2 = this;
+
       // Wait a frame, otherwise moving focus from one combo box to another will result in the class
       // being removed from the body.
       requestAnimationFrame(function () {
         document.body.classList.add('euiBody-hasPortalContent');
       });
       this.updatePosition();
-      window.addEventListener('resize', this.updatePosition);
+      window.addEventListener('resize', this.updatePosition); // Firefox will trigger a scroll event in many common situations when the options list div is appended
+      // to the DOM; in testing it was always within 100ms, but setting a timeout here for 500ms to be safe
+
+      setTimeout(function () {
+        window.addEventListener('scroll', _this2.closeListOnScroll, {
+          passive: true,
+          // for better performance as we won't call preventDefault
+          capture: true // scroll events don't bubble, they must be captured instead
+
+        });
+      }, 500);
     }
   }, {
     key: "componentDidUpdate",
@@ -129,11 +149,15 @@ function (_Component) {
     value: function componentWillUnmount() {
       document.body.classList.remove('euiBody-hasPortalContent');
       window.removeEventListener('resize', this.updatePosition);
+      window.removeEventListener('scroll', this.closeListOnScroll, {
+        passive: true,
+        capture: true
+      });
     }
   }, {
     key: "render",
     value: function render() {
-      var _this2 = this;
+      var _this3 = this;
 
       var _this$props = this.props,
           options = _this$props.options,
@@ -159,7 +183,8 @@ function (_Component) {
           dataTestSubj = _this$props['data-test-subj'],
           activeOptionIndex = _this$props.activeOptionIndex,
           rootId = _this$props.rootId,
-          rest = _objectWithoutProperties(_this$props, ["options", "isLoading", "selectedOptions", "onCreateOption", "searchValue", "matchingOptions", "optionRef", "onOptionClick", "onOptionEnterKey", "areAllOptionsSelected", "getSelectedOptionForSearchValue", "position", "renderOption", "listRef", "updatePosition", "width", "scrollToIndex", "onScroll", "rowHeight", "fullWidth", "data-test-subj", "activeOptionIndex", "rootId"]);
+          onCloseList = _this$props.onCloseList,
+          rest = _objectWithoutProperties(_this$props, ["options", "isLoading", "selectedOptions", "onCreateOption", "searchValue", "matchingOptions", "optionRef", "onOptionClick", "onOptionEnterKey", "areAllOptionsSelected", "getSelectedOptionForSearchValue", "position", "renderOption", "listRef", "updatePosition", "width", "scrollToIndex", "onScroll", "rowHeight", "fullWidth", "data-test-subj", "activeOptionIndex", "rootId", "onCloseList"]);
 
       var emptyStateContent;
 
@@ -262,7 +287,7 @@ function (_Component) {
               return onOptionClick(option);
             } // onEnterKey={onOptionEnterKey}
             ,
-            ref: optionRef.bind(_this2, index),
+            ref: optionRef.bind(_this3, index),
             isFocused: activeOptionIndex === index,
             id: rootId("_option-".concat(index)),
             title: label,
@@ -315,7 +340,8 @@ _defineProperty(EuiComboBoxOptionsList, "propTypes", {
   rowHeight: _propTypes.default.number,
   fullWidth: _propTypes.default.bool,
   activeOptionIndex: _propTypes.default.number,
-  rootId: _propTypes.default.func.isRequired
+  rootId: _propTypes.default.func.isRequired,
+  onCloseList: _propTypes.default.func.isRequired
 });
 
 _defineProperty(EuiComboBoxOptionsList, "defaultProps", {
@@ -332,6 +358,15 @@ EuiComboBoxOptionsList.__docgenInfo = {
     "modifiers": [],
     "params": [],
     "returns": null
+  }, {
+    "name": "closeListOnScroll",
+    "docblock": null,
+    "modifiers": [],
+    "params": [{
+      "name": "e",
+      "type": null
+    }],
+    "returns": null
   }, {
     "name": "listRef",
     "docblock": null,
@@ -515,6 +550,13 @@ EuiComboBoxOptionsList.__docgenInfo = {
       },
       "required": true,
       "description": ""
+    },
+    "onCloseList": {
+      "type": {
+        "name": "func"
+      },
+      "required": true,
+      "description": ""
     }
   }
 };