@splunk/react-ui 4.4.1 → 4.5.0

package/CollapsiblePanel.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 143);
+/******/ 	return __webpack_require__(__webpack_require__.s = 151);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -108,14 +108,14 @@ module.exports = require("@splunk/ui-utils/id");
 
 /***/ }),
 
-/***/ 11:
+/***/ 12:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/Clickable");
 
 /***/ }),
 
-/***/ 143:
+/***/ 151:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -143,7 +143,7 @@ var i18n_ = __webpack_require__(5);
 var id_ = __webpack_require__(10);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/TransitionOpen"
-var TransitionOpen_ = __webpack_require__(46);
+var TransitionOpen_ = __webpack_require__(47);
 var TransitionOpen_default = /*#__PURE__*/__webpack_require__.n(TransitionOpen_);
 
 // EXTERNAL MODULE: ./src/icons/ChevronRight.tsx
@@ -158,7 +158,7 @@ var Box_ = __webpack_require__(8);
 var Box_default = /*#__PURE__*/__webpack_require__.n(Box_);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/Clickable"
-var Clickable_ = __webpack_require__(11);
+var Clickable_ = __webpack_require__(12);
 var Clickable_default = /*#__PURE__*/__webpack_require__.n(Clickable_);
 
 // EXTERNAL MODULE: external "@splunk/themes"
@@ -641,7 +641,7 @@ module.exports = require("lodash");
 
 /***/ }),
 
-/***/ 46:
+/***/ 47:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/TransitionOpen");

package/Color.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 124);
+/******/ 	return __webpack_require__(__webpack_require__.s = 130);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -101,14 +101,14 @@ module.exports = require("prop-types");
 
 /***/ }),
 
-/***/ 11:
+/***/ 12:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/Clickable");
 
 /***/ }),
 
-/***/ 124:
+/***/ 130:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -132,7 +132,7 @@ var external_prop_types_default = /*#__PURE__*/__webpack_require__.n(external_pr
 var external_lodash_ = __webpack_require__(4);
 
 // EXTERNAL MODULE: external "@splunk/themes/SplunkThemeProvider"
-var SplunkThemeProvider_ = __webpack_require__(74);
+var SplunkThemeProvider_ = __webpack_require__(76);
 var SplunkThemeProvider_default = /*#__PURE__*/__webpack_require__.n(SplunkThemeProvider_);
 
 // EXTERNAL MODULE: external "@splunk/ui-utils/i18n"
@@ -148,29 +148,33 @@ var keyboard_ = __webpack_require__(9);
 var Dropdown_ = __webpack_require__(19);
 var Dropdown_default = /*#__PURE__*/__webpack_require__.n(Dropdown_);
 
-// EXTERNAL MODULE: external "@splunk/react-ui/Text"
-var Text_ = __webpack_require__(26);
-var Text_default = /*#__PURE__*/__webpack_require__.n(Text_);
-
 // EXTERNAL MODULE: external "@splunk/themes"
 var themes_ = __webpack_require__(0);
 
+// EXTERNAL MODULE: external "tinycolor2"
+var external_tinycolor2_ = __webpack_require__(44);
+var external_tinycolor2_default = /*#__PURE__*/__webpack_require__.n(external_tinycolor2_);
+
 // EXTERNAL MODULE: ./src/icons/Check.tsx
-var Check = __webpack_require__(47);
+var Check = __webpack_require__(48);
 
 // EXTERNAL MODULE: ./src/icons/ChevronDown.tsx
-var ChevronDown = __webpack_require__(56);
+var ChevronDown = __webpack_require__(59);
 
 // EXTERNAL MODULE: external "styled-components"
 var external_styled_components_ = __webpack_require__(3);
 var external_styled_components_default = /*#__PURE__*/__webpack_require__.n(external_styled_components_);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/Clickable"
-var Clickable_ = __webpack_require__(11);
+var Clickable_ = __webpack_require__(12);
 var Clickable_default = /*#__PURE__*/__webpack_require__.n(Clickable_);
 
+// EXTERNAL MODULE: external "@splunk/react-ui/Text"
+var Text_ = __webpack_require__(21);
+var Text_default = /*#__PURE__*/__webpack_require__.n(Text_);
+
 // EXTERNAL MODULE: external "@splunk/react-ui/ScreenReaderContent"
-var ScreenReaderContent_ = __webpack_require__(14);
+var ScreenReaderContent_ = __webpack_require__(15);
 var ScreenReaderContent_default = /*#__PURE__*/__webpack_require__.n(ScreenReaderContent_);
 
 // CONCATENATED MODULE: ./src/Color/SwatchStyles.ts
@@ -189,7 +193,10 @@ var StyledClickable = external_styled_components_default()(Clickable_default.a).
   displayName: "SwatchStyles__StyledClickable",
   componentId: "sc-1wxunhq-0"
 })(["display:block;flex:0 0 auto;border:", ";", ";", ";", ";", " &:focus{border-color:", ";box-shadow:", ";}", " ", " ", " &[disabled]{background-image:linear-gradient(rgba(255,255,255,0.8),rgba(255,255,255,0.8));}", " ", "    "], Object(themes_["pick"])({
-  enterprise: themes_["variables"].border,
+  enterprise: {
+    light: Object(external_styled_components_["css"])(["1px solid ", ""], themes_["variables"].gray60),
+    dark: themes_["variables"].border
+  },
   prisma: Object(external_styled_components_["css"])(["1px solid ", ""], themes_["variables"].interactiveColorBorder)
 }), Object(themes_["pick"])({
   prisma: Object(external_styled_components_["css"])(["border-radius:2px;"])
@@ -312,6 +319,7 @@ Swatch.propTypes = propTypes;
 
 
 
+
 var StyledColor = external_styled_components_default.a.div.withConfig({
   displayName: "ColorStyles__StyledColor",
   componentId: "jxrost-0"
@@ -368,20 +376,27 @@ var StyledSystemColorPickerWrapper = external_styled_components_default.a.div.wi
 var StyledSystemColorPicker = external_styled_components_default.a.input.withConfig({
   displayName: "ColorStyles__StyledSystemColorPicker",
   componentId: "jxrost-7"
-})(["box-sizing:border-box;height:24px;width:24px;border:none;border-radius:2px;outline:none;appearance:none;-webkit-appearance:none;padding:12px;margin:0;background:conic-gradient( #ef3434,#ef9a34,#deef34,#78ef34,#34ef56,#34efbc,#34bcef,#3456ef,#7834ef,#de34ef,#ef349a,#ef3434 );background-repeat:no-repeat;background-position:-6px -6px;background-size:36px 36px;cursor:pointer;&::-webkit-color-swatch{border:none;border-radius:2px;}&::-moz-color-swatch{opacity:0;}&:focus{box-shadow:", ";}"], themes_["variables"].focusShadow);
+})(["box-sizing:border-box;height:24px;width:24px;border:none;border-radius:2px;outline:none;appearance:none;padding:12px;margin:0;background:conic-gradient( #ef3434,#ef9a34,#deef34,#78ef34,#34ef56,#34efbc,#34bcef,#3456ef,#7834ef,#de34ef,#ef349a,#ef3434 );background-repeat:no-repeat;background-position:-6px -6px;background-size:36px 36px;cursor:pointer;&::-webkit-color-swatch{border:none;border-radius:2px;}&::-moz-color-swatch{opacity:0;}&:focus{box-shadow:", ";}"], themes_["variables"].focusShadow);
 var StyledInput = external_styled_components_default.a.div.withConfig({
   displayName: "ColorStyles__StyledInput",
   componentId: "jxrost-8"
 })(["", ";"], Object(themes_["pick"])({
   enterprise: Object(external_styled_components_["css"])(["display:flex;width:100%;"]),
-  prisma: Object(external_styled_components_["css"])(["position:relative;width:", ";"], function (_ref2) {
+  prisma: Object(external_styled_components_["css"])(["position:relative;", ""], function (_ref2) {
     var $inDropdown = _ref2.$inDropdown;
-    return $inDropdown ? '80px' : Object(external_styled_components_["css"])(["calc(100% - 2px)"]);
+    return $inDropdown ? Object(external_styled_components_["css"])(["width:80px;"]) : Object(external_styled_components_["css"])(["flex:0 1 auto;min-width:0;"]);
   })
 }));
+var StyledInputText = external_styled_components_default()(Text_default.a).withConfig({
+  displayName: "ColorStyles__StyledInputText",
+  componentId: "jxrost-9"
+})(["", ""], function (_ref3) {
+  var $inDropdown = _ref3.$inDropdown;
+  return $inDropdown && Object(external_styled_components_["css"])(["font-size:12px;"]);
+});
 var StyledToggleSwatch = external_styled_components_default()(Color_Swatch).withConfig({
   displayName: "ColorStyles__StyledToggleSwatch",
-  componentId: "jxrost-9"
+  componentId: "jxrost-10"
 })(["", ""], Object(themes_["pick"])({
   prisma: {
     comfortable: Object(external_styled_components_["css"])(["width:40px;height:40px;"]),
@@ -451,7 +466,23 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
 
 // The default palette in Prisma theme.
-var defaultPalette = ['#F29BAC', '#FDAF93', '#FCCF87', '#A9F5E7', '#9AE6F7', '#9FADF7', '#C093F9', '#F5BBFA', '#E85B79', '#FB865C', '#FFC34E', '#7EEFDA', '#6CD0F0', '#6484F6', '#A870EF', '#F494E5', '#C6335F', '#E9643A', '#ECAE11', '#45D4BA', '#4EB2D2', '#4665D6', '#8747DA', '#E062E3', '#912344', '#D44C20', '#C0891E', '#26AA92', '#2F8AA7', '#2E49AA', '#602CA1', '#BA4ABD']; // The tool palette in Prisma theme.
+var defaultPalette = ['#912344', '#D44C20', '#C0891E', '#26AA92', '#2F8AA7', '#2E49AA', '#602CA1', '#BA4ABD'];
+var generatePalette = Object(external_lodash_["memoize"])(function (initialPalette) {
+  var palette = [];
+
+  for (var i = 1; i <= initialPalette.length * 4; i += 1) {
+    var baseColor = initialPalette[(i - 1) % initialPalette.length];
+
+    if (i > initialPalette.length * 3) {
+      palette.push(baseColor);
+    } else {
+      var lightenBy = 40 - 10 * (i / initialPalette.length);
+      palette.push(external_tinycolor2_default()(baseColor).lighten(lightenBy).toString());
+    }
+  }
+
+  return palette;
+}); // The tool palette in Prisma theme.
 
 var toolPalette = ['#ffffff', '#000000', null];
 var Color_propTypes = {
@@ -477,7 +508,7 @@ var defaultProps = {
   disabled: false,
   error: false,
   hideInput: false,
-  palette: defaultPalette,
+  palette: generatePalette(defaultPalette),
   prepend: false
 };
 
@@ -620,17 +651,22 @@ var Color_Color = /*#__PURE__*/function (_Component) {
           displayValue: displayValue
         });
       } // If the user types in the hexadecimal number without # in front,
-      // we are able to add # automatically.
+      // we add # automatically.
 
 
       if (displayValue !== 'N/A' && Object(external_lodash_["toLower"])(displayValue) !== 'transparent' && !Object(external_lodash_["startsWith"])(displayValue, '#')) {
         displayValue = "#".concat(displayValue);
 
         if (reason === 'escapeKey') {
-          // @ts-expect-error - displayValue can actually be null here, but that's a bug
-          _this.setState({
-            displayValue: value
-          });
+          if (value == null) {
+            _this.setState({
+              displayValue: 'N/A'
+            });
+          } else {
+            _this.setState({
+              displayValue: value
+            });
+          }
         } else {
           _this.setState({
             displayValue: displayValue
@@ -653,7 +689,7 @@ var Color_Color = /*#__PURE__*/function (_Component) {
       var _this$props2 = _this.props,
           splunkTheme = _this$props2.splunkTheme,
           palette = _this$props2.palette;
-      var isPrisma = splunkTheme.family === 'prisma';
+      var isPrisma = splunkTheme.isPrisma;
 
       var value = _this.getValue();
 
@@ -716,7 +752,7 @@ var Color_Color = /*#__PURE__*/function (_Component) {
     _this.focusExpandButton = /*#__PURE__*/external_react_default.a.createRef();
     _this.controlledExternally = Object(external_lodash_["has"])(props, 'value'); // value can be hexadecimal color, 'transparent' or null
 
-    var _value = Object(color_["expandShortHandHex"])(props.defaultValue) || Object(color_["expandShortHandHex"])(props.value);
+    var _value = _this.controlledExternally ? Object(color_["expandShortHandHex"])(props.value) : Object(color_["expandShortHandHex"])(props.defaultValue);
 
     if (_value !== null) {
       _value = Object(external_lodash_["toLower"])(_value);
@@ -747,7 +783,7 @@ var Color_Color = /*#__PURE__*/function (_Component) {
   }, {
     key: "showNull",
     value: function showNull() {
-      var isPrisma = this.props.splunkTheme.family === 'prisma';
+      var isPrisma = this.props.splunkTheme.isPrisma;
       return Color.hasNull(this.props.palette) || isPrisma;
     }
     /**
@@ -779,7 +815,7 @@ var Color_Color = /*#__PURE__*/function (_Component) {
     key: "submitValue",
     value: function submitValue(displayValue) {
       var splunkTheme = this.props.splunkTheme;
-      var isPrisma = (splunkTheme === null || splunkTheme === void 0 ? void 0 : splunkTheme.family) === 'prisma';
+      var isPrisma = splunkTheme.isPrisma;
 
       if (displayValue && (Color_isValidHEX(displayValue) || Color.hasTransparent(this.props.palette) && displayValue === 'transparent' || (Color.hasNull(this.props.palette) || isPrisma) && displayValue === 'N/A')) {
         var formattedDisplayValue = Object(color_["expandShortHandHex"])(displayValue);
@@ -832,7 +868,7 @@ var Color_Color = /*#__PURE__*/function (_Component) {
           inDropdown = _ref4.inDropdown;
       var splunkTheme = this.props.splunkTheme;
       var displayValue = this.state.displayValue;
-      var isPrisma = (splunkTheme === null || splunkTheme === void 0 ? void 0 : splunkTheme.family) === 'prisma';
+      var isPrisma = splunkTheme.isPrisma;
       var showTransparent = Color.hasTransparent(this.props.palette) && Object(external_lodash_["toLower"])(displayValue) === 'transparent';
       var showNullSwatch = this.showNull() && Object(external_lodash_["toLower"])(displayValue) === 'n/a';
       var inputSwatchValue = displayValue;
@@ -845,7 +881,8 @@ var Color_Color = /*#__PURE__*/function (_Component) {
       inputSwatchValue = showNullSwatch ? null : inputSwatchValue;
       return /*#__PURE__*/external_react_default.a.createElement(StyledInput, {
         $inDropdown: inDropdown
-      }, /*#__PURE__*/external_react_default.a.createElement(Text_default.a, {
+      }, /*#__PURE__*/external_react_default.a.createElement(StyledInputText, {
+        $inDropdown: inDropdown,
         append: textAppend,
         autoCapitalize: "off",
         autoComplete: "off",
@@ -856,15 +893,16 @@ var Color_Color = /*#__PURE__*/function (_Component) {
         inline: textInline,
         onKeyDown: this.handleTextKeyDown,
         onChange: this.handleTextChange,
-        value: displayValue,
-        style: inDropdown ? {
-          fontSize: 12
-        } : {}
+        value: displayValue
       }), !isPrisma && /*#__PURE__*/external_react_default.a.createElement(Color_Swatch, {
         "data-test": "textbox-swatch",
         onClick: this.handleButtonClick,
         value: inputSwatchValue,
-        tabIndex: -1
+        tabIndex: -1,
+        style: {
+          marginLeft: '1px'
+        } // Used to cancel out the `margin-right: -1px` of Text append style
+
       }));
     }
   }, {
@@ -875,8 +913,8 @@ var Color_Color = /*#__PURE__*/function (_Component) {
       var _this$props5 = this.props,
           palette = _this$props5.palette,
           splunkTheme = _this$props5.splunkTheme;
-      var isPrisma = (splunkTheme === null || splunkTheme === void 0 ? void 0 : splunkTheme.family) === 'prisma';
-      var isLightTheme = (splunkTheme === null || splunkTheme === void 0 ? void 0 : splunkTheme.colorScheme) === 'light';
+      var isPrisma = splunkTheme.isPrisma,
+          isLight = splunkTheme.isLight;
       var currentValue = this.getValue();
       var currentPalette = isPrisma && this.state.expanded ? palette : Object(external_lodash_["slice"])(palette, 0, 15);
       var colorInPalette = Object(external_lodash_["includes"])(currentPalette.map(function (c) {
@@ -928,7 +966,7 @@ var Color_Color = /*#__PURE__*/function (_Component) {
           value: null,
           ref: currentValue === null ? this.focusSwatch : null,
           onClick: this.handleSwatchClick,
-          noBorder: !isLightTheme,
+          noBorder: !isLight,
           showSelected: currentValue === null
         }), /*#__PURE__*/external_react_default.a.createElement(Color_Swatch, {
           style: {
@@ -937,7 +975,7 @@ var Color_Color = /*#__PURE__*/function (_Component) {
           value: "#ffffff",
           ref: currentValue === '#ffffff' ? this.focusSwatch : null,
           onClick: this.handleSwatchClick,
-          noBorder: !isLightTheme,
+          noBorder: !isLight,
           showSelected: currentValue === '#ffffff'
         }), /*#__PURE__*/external_react_default.a.createElement(Color_Swatch, {
           style: {
@@ -949,8 +987,10 @@ var Color_Color = /*#__PURE__*/function (_Component) {
           noBorder: true,
           showSelected: currentValue === '#000000'
         }), /*#__PURE__*/external_react_default.a.createElement(StyledSystemColorPickerWrapper, null, /*#__PURE__*/external_react_default.a.createElement(StyledSystemColorPicker, {
-          type: "color",
-          value: currentValue === null ? undefined : currentValue,
+          type: "color" // TODO: SUI-2806 Remove the warning with Prisma null example
+          // Warning only exists in Chrome: https://chromium.googlesource.com/chromium/src/+/011c27ced479c76cffd5093ce107082e4da657f3/third_party/blink/renderer/core/html/forms/color_input_type.cc#190
+          ,
+          value: currentValue === null ? '' : currentValue,
           onChange: function onChange(e) {
             return _this2.handleSystemColorPickerChange(e.target.value);
           },
@@ -997,7 +1037,7 @@ var Color_Color = /*#__PURE__*/function (_Component) {
           splunkTheme = _this$props6.splunkTheme,
           otherProps = Color_objectWithoutProperties(_this$props6, ["append", "disabled", "describedBy", "elementRef", "error", "hideInput", "labelledBy", "name", "prepend", "splunkTheme"]);
 
-      var isPrisma = (splunkTheme === null || splunkTheme === void 0 ? void 0 : splunkTheme.family) === 'prisma';
+      var isPrisma = splunkTheme.isPrisma;
       var value = this.getValue();
       var displayValue = this.state.displayValue;
       var toggle = /*#__PURE__*/external_react_default.a.createElement(StyledToggleSwatch, Color_extends({
@@ -1059,7 +1099,7 @@ ColorWithTheme.propTypes = Color_Color.propTypes;
 
 /***/ }),
 
-/***/ 14:
+/***/ 15:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/ScreenReaderContent");
@@ -1080,7 +1120,7 @@ module.exports = require("react");
 
 /***/ }),
 
-/***/ 26:
+/***/ 21:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/Text");
@@ -1111,18 +1151,25 @@ module.exports = require("lodash");
 /***/ 44:
 /***/ (function(module, exports) {
 
+module.exports = require("tinycolor2");
+
+/***/ }),
+
+/***/ 45:
+/***/ (function(module, exports) {
+
 module.exports = require("@splunk/react-icons/Check");
 
 /***/ }),
 
-/***/ 47:
+/***/ 48:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return Check; });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _splunk_react_icons_Check__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(44);
+/* harmony import */ var _splunk_react_icons_Check__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(45);
 /* harmony import */ var _splunk_react_icons_Check__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_splunk_react_icons_Check__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _ThemedIcon__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(7);
 /* harmony import */ var _SVG__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(6);
@@ -1172,14 +1219,14 @@ module.exports = require("@splunk/ui-utils/i18n");
 
 /***/ }),
 
-/***/ 56:
+/***/ 59:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return ChevronDown; });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _splunk_react_icons_ChevronDown__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(57);
+/* harmony import */ var _splunk_react_icons_ChevronDown__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(60);
 /* harmony import */ var _splunk_react_icons_ChevronDown__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_splunk_react_icons_ChevronDown__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _ThemedIcon__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(7);
 /* harmony import */ var _SVG__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(6);
@@ -1222,13 +1269,6 @@ function ChevronDown(props) {
 
 /***/ }),
 
-/***/ 57:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/react-icons/ChevronDown");
-
-/***/ }),
-
 /***/ 6:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
@@ -1254,6 +1294,13 @@ function SVG(props) {
 
 /***/ }),
 
+/***/ 60:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/react-icons/ChevronDown");
+
+/***/ }),
+
 /***/ 7:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
@@ -1372,7 +1419,7 @@ Icon.defaultProps = defaultProps;
 
 /***/ }),
 
-/***/ 74:
+/***/ 76:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/themes/SplunkThemeProvider");

package/ColumnLayout.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 113);
+/******/ 	return __webpack_require__(__webpack_require__.s = 118);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -101,7 +101,7 @@ module.exports = require("prop-types");
 
 /***/ }),
 
-/***/ 113:
+/***/ 118:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -144,7 +144,7 @@ var Styled = external_styled_components_default.a.div.withConfig({
 })(["", ";"], themes_["mixins"].reset('block'));
 
 // EXTERNAL MODULE: ./src/utils/types.ts
-var types = __webpack_require__(48);
+var types = __webpack_require__(49);
 
 // CONCATENATED MODULE: ./src/ColumnLayout/Column.tsx
 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); }
@@ -442,7 +442,7 @@ module.exports = require("lodash");
 
 /***/ }),
 
-/***/ 48:
+/***/ 49:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";

package/ComboBox.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 151);
+/******/ 	return __webpack_require__(__webpack_require__.s = 152);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -101,7 +101,7 @@ module.exports = require("@splunk/ui-utils/id");
 
 /***/ }),
 
-/***/ 12:
+/***/ 11:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -135,7 +135,7 @@ module.exports = require("@splunk/react-ui/Menu");
 
 /***/ }),
 
-/***/ 151:
+/***/ 152:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -160,7 +160,7 @@ var external_prop_types_default = /*#__PURE__*/__webpack_require__.n(external_pr
 var external_lodash_ = __webpack_require__(4);
 
 // EXTERNAL MODULE: external "@splunk/ui-utils/filter"
-var filter_ = __webpack_require__(23);
+var filter_ = __webpack_require__(24);
 
 // EXTERNAL MODULE: external "@splunk/ui-utils/id"
 var id_ = __webpack_require__(10);
@@ -175,15 +175,15 @@ var keyboard_ = __webpack_require__(9);
 var Menu_ = __webpack_require__(13);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/Popover"
-var Popover_ = __webpack_require__(17);
+var Popover_ = __webpack_require__(16);
 var Popover_default = /*#__PURE__*/__webpack_require__.n(Popover_);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/ResultsMenu"
-var ResultsMenu_ = __webpack_require__(39);
+var ResultsMenu_ = __webpack_require__(32);
 var ResultsMenu_default = /*#__PURE__*/__webpack_require__.n(ResultsMenu_);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/Text"
-var Text_ = __webpack_require__(26);
+var Text_ = __webpack_require__(21);
 var Text_default = /*#__PURE__*/__webpack_require__.n(Text_);
 
 // CONCATENATED MODULE: ./src/ComboBox/Option.tsx
@@ -326,7 +326,7 @@ _defineProperty(Option_Option, "defaultProps", defaultProps);
 
 /* harmony default export */ var ComboBox_Option = (Option_Option);
 // EXTERNAL MODULE: ./src/utils/updateReactRef.ts
-var updateReactRef = __webpack_require__(12);
+var updateReactRef = __webpack_require__(11);
 
 // CONCATENATED MODULE: ./src/ComboBox/ComboBox.tsx
 function ComboBox_typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { ComboBox_typeof = function _typeof(obj) { return typeof obj; }; } else { ComboBox_typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return ComboBox_typeof(obj); }
@@ -461,6 +461,8 @@ var ComboBox_ComboBox = /*#__PURE__*/function (_Component) {
 
     ComboBox_defineProperty(ComboBox_assertThisInitialized(_this), "popoverId", void 0);
 
+    ComboBox_defineProperty(ComboBox_assertThisInitialized(_this), "previousActiveIndex", null);
+
     ComboBox_defineProperty(ComboBox_assertThisInitialized(_this), "textInput", null);
 
     ComboBox_defineProperty(ComboBox_assertThisInitialized(_this), "handleInputMount", function (el) {
@@ -474,8 +476,8 @@ var ComboBox_ComboBox = /*#__PURE__*/function (_Component) {
     });
 
     ComboBox_defineProperty(ComboBox_assertThisInitialized(_this), "handleActiveOptionMount", function (c) {
-      if (c) {
-        c.scrollIntoViewIfNeeded();
+      if (_this.previousActiveIndex !== _this.state.activeIndex) {
+        c === null || c === void 0 ? void 0 : c.scrollIntoViewIfNeeded();
       }
     });
 
@@ -736,8 +738,10 @@ var ComboBox_ComboBox = /*#__PURE__*/function (_Component) {
 
   ComboBox_createClass(ComboBox, [{
     key: "componentDidUpdate",
-    value: function componentDidUpdate() {
+    value: function componentDidUpdate(prevProps, prevState) {
       if (false) {}
+
+      this.previousActiveIndex = prevState.activeIndex;
     }
   }, {
     key: "getValue",
@@ -784,6 +788,7 @@ var ComboBox_ComboBox = /*#__PURE__*/function (_Component) {
       }, function () {
         var _this3$props$onClose, _this3$props;
 
+        _this3.previousActiveIndex = null;
         (_this3$props$onClose = (_this3$props = _this3.props).onClose) === null || _this3$props$onClose === void 0 ? void 0 : _this3$props$onClose.call(_this3$props);
       });
     }
@@ -870,7 +875,7 @@ ComboBox_defineProperty(ComboBox_ComboBox, "Heading", Menu_["Heading"]);
 
 /***/ }),
 
-/***/ 17:
+/***/ 16:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/Popover");
@@ -884,21 +889,21 @@ module.exports = require("react");
 
 /***/ }),
 
-/***/ 23:
+/***/ 21:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/ui-utils/filter");
+module.exports = require("@splunk/react-ui/Text");
 
 /***/ }),
 
-/***/ 26:
+/***/ 24:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/react-ui/Text");
+module.exports = require("@splunk/ui-utils/filter");
 
 /***/ }),
 
-/***/ 39:
+/***/ 32:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/ResultsMenu");