@splunk/react-ui 4.17.0 → 4.18.0

package/Color.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 192);
+/******/ 	return __webpack_require__(__webpack_require__.s = 176);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -108,6 +108,13 @@ module.exports = require("lodash/has");
 
 /***/ }),
 
+/***/ 105:
+/***/ (function(module, exports) {
+
+module.exports = require("lodash/slice");
+
+/***/ }),
+
 /***/ 115:
 /***/ (function(module, exports) {
 
@@ -143,14 +150,14 @@ module.exports = require("@splunk/react-ui/ScreenReaderContent");
 
 /***/ }),
 
-/***/ 16:
+/***/ 15:
 /***/ (function(module, exports) {
 
 module.exports = require("lodash/includes");
 
 /***/ }),
 
-/***/ 192:
+/***/ 176:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -171,7 +178,7 @@ var external_prop_types_ = __webpack_require__(1);
 var external_prop_types_default = /*#__PURE__*/__webpack_require__.n(external_prop_types_);
 
 // EXTERNAL MODULE: external "lodash/debounce"
-var debounce_ = __webpack_require__(65);
+var debounce_ = __webpack_require__(66);
 var debounce_default = /*#__PURE__*/__webpack_require__.n(debounce_);
 
 // EXTERNAL MODULE: external "lodash/has"
@@ -179,7 +186,7 @@ var has_ = __webpack_require__(10);
 var has_default = /*#__PURE__*/__webpack_require__.n(has_);
 
 // EXTERNAL MODULE: external "lodash/includes"
-var includes_ = __webpack_require__(16);
+var includes_ = __webpack_require__(15);
 var includes_default = /*#__PURE__*/__webpack_require__.n(includes_);
 
 // EXTERNAL MODULE: external "lodash/keys"
@@ -191,7 +198,7 @@ var omit_ = __webpack_require__(5);
 var omit_default = /*#__PURE__*/__webpack_require__.n(omit_);
 
 // EXTERNAL MODULE: external "lodash/slice"
-var slice_ = __webpack_require__(80);
+var slice_ = __webpack_require__(105);
 var slice_default = /*#__PURE__*/__webpack_require__.n(slice_);
 
 // EXTERNAL MODULE: external "lodash/startsWith"
@@ -207,13 +214,9 @@ var memoize_ = __webpack_require__(125);
 var memoize_default = /*#__PURE__*/__webpack_require__.n(memoize_);
 
 // EXTERNAL MODULE: external "tinycolor2"
-var external_tinycolor2_ = __webpack_require__(66);
+var external_tinycolor2_ = __webpack_require__(67);
 var external_tinycolor2_default = /*#__PURE__*/__webpack_require__.n(external_tinycolor2_);
 
-// EXTERNAL MODULE: external "@splunk/react-icons/ChevronDown"
-var ChevronDown_ = __webpack_require__(126);
-var ChevronDown_default = /*#__PURE__*/__webpack_require__.n(ChevronDown_);
-
 // EXTERNAL MODULE: external "@splunk/react-ui/Dropdown"
 var Dropdown_ = __webpack_require__(22);
 var Dropdown_default = /*#__PURE__*/__webpack_require__.n(Dropdown_);
@@ -234,10 +237,6 @@ var keyboard_ = __webpack_require__(7);
 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__(12);
-var Clickable_default = /*#__PURE__*/__webpack_require__.n(Clickable_);
-
 // EXTERNAL MODULE: external "@splunk/react-ui/Text"
 var Text_ = __webpack_require__(30);
 var Text_default = /*#__PURE__*/__webpack_require__.n(Text_);
@@ -247,9 +246,13 @@ var ScreenReaderContent_ = __webpack_require__(14);
 var ScreenReaderContent_default = /*#__PURE__*/__webpack_require__.n(ScreenReaderContent_);
 
 // EXTERNAL MODULE: external "@splunk/react-icons/Checkmark"
-var Checkmark_ = __webpack_require__(86);
+var Checkmark_ = __webpack_require__(75);
 var Checkmark_default = /*#__PURE__*/__webpack_require__.n(Checkmark_);
 
+// EXTERNAL MODULE: external "@splunk/react-ui/Clickable"
+var Clickable_ = __webpack_require__(12);
+var Clickable_default = /*#__PURE__*/__webpack_require__.n(Clickable_);
+
 // CONCATENATED MODULE: ./src/Color/SwatchStyles.ts
 
 
@@ -393,14 +396,53 @@ Swatch.propTypes = propTypes;
 
 
 
-
 var StyledColor = external_styled_components_default.a.div.withConfig({
   displayName: "ColorStyles__StyledColor",
   componentId: "jxrost-0"
 })(["", ";flex-direction:row;"], themes_["mixins"].reset('flex'));
-var StyledPalette = external_styled_components_default.a.div.withConfig({
-  displayName: "ColorStyles__StyledPalette",
+var StyledInput = external_styled_components_default.a.div.withConfig({
+  displayName: "ColorStyles__StyledInput",
   componentId: "jxrost-1"
+})(["", ";"], Object(themes_["pick"])({
+  enterprise: Object(external_styled_components_["css"])(["display:flex;width:100%;"]),
+  prisma: Object(external_styled_components_["css"])(["position:relative;", ""], function (_ref) {
+    var $inDropdown = _ref.$inDropdown;
+    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-2"
+})(["", ""], function (_ref2) {
+  var $inDropdown = _ref2.$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-3"
+})(["", ""], Object(themes_["pick"])({
+  prisma: {
+    comfortable: Object(external_styled_components_["css"])(["width:40px;height:40px;"]),
+    compact: Object(external_styled_components_["css"])(["width:32px;height:32px;"])
+  },
+  enterprise: {
+    comfortable: Object(external_styled_components_["css"])(["width:32px;height:32px;"]),
+    compact: Object(external_styled_components_["css"])(["width:28px;height:28px;"])
+  }
+}));
+
+// EXTERNAL MODULE: external "@splunk/react-icons/ChevronDown"
+var ChevronDown_ = __webpack_require__(126);
+var ChevronDown_default = /*#__PURE__*/__webpack_require__.n(ChevronDown_);
+
+// CONCATENATED MODULE: ./src/Color/PaletteStyles.ts
+
+
+
+
+var StyledPalette = external_styled_components_default.a.div.withConfig({
+  displayName: "PaletteStyles__StyledPalette",
+  componentId: "qgv9v9-0"
 })(["width:", ";padding:", ";", ""], Object(themes_["pick"])({
   enterprise: '180px',
   prisma: '224px'
@@ -411,8 +453,8 @@ var StyledPalette = external_styled_components_default.a.div.withConfig({
   prisma: Object(external_styled_components_["css"])(["display:flex;flex-direction:column;border-radius:2px;"])
 }));
 var StyledSwatches = external_styled_components_default.a.ul.withConfig({
-  displayName: "ColorStyles__StyledSwatches",
-  componentId: "jxrost-2"
+  displayName: "PaletteStyles__StyledSwatches",
+  componentId: "qgv9v9-1"
 })(["", ";margin-bottom:", ";margin-right:", ";", ""], themes_["mixins"].reset('block'), Object(themes_["pick"])({
   enterprise: '6px'
 }), Object(themes_["pick"])({
@@ -421,8 +463,8 @@ var StyledSwatches = external_styled_components_default.a.ul.withConfig({
   prisma: Object(external_styled_components_["css"])(["position:relative;"])
 }));
 var StyledSwatch = external_styled_components_default.a.li.withConfig({
-  displayName: "ColorStyles__StyledSwatch",
-  componentId: "jxrost-3"
+  displayName: "PaletteStyles__StyledSwatch",
+  componentId: "qgv9v9-2"
 })(["", ";margin-right:", ";margin-bottom:", ";", ""], themes_["mixins"].reset('inline-block'), Object(themes_["pick"])({
   enterprise: themes_["variables"].spacingQuarter,
   prisma: '4px'
@@ -433,55 +475,126 @@ var StyledSwatch = external_styled_components_default.a.li.withConfig({
   prisma: Object(external_styled_components_["css"])(["vertical-align:top;&:nth-child(8n){margin-right:0;}"])
 }));
 var StyledToolBarPrisma = external_styled_components_default.a.div.withConfig({
-  displayName: "ColorStyles__StyledToolBarPrisma",
-  componentId: "jxrost-4"
-})(["position:relative;display:flex;align-items:center;padding:0;margin-top:12px;"]);
+  displayName: "PaletteStyles__StyledToolBarPrisma",
+  componentId: "qgv9v9-3"
+})(["position:relative;display:flex;align-items:center;padding:0;margin-top:12px;gap:4px;"]);
 var StyledExpandButton = external_styled_components_default()(Clickable_default.a).withConfig({
-  displayName: "ColorStyles__StyledExpandButton",
-  componentId: "jxrost-5"
+  displayName: "PaletteStyles__StyledExpandButton",
+  componentId: "qgv9v9-4"
 })(["position:absolute;bottom:4px;right:4px;padding:2px 4px;border-radius:2px;&:focus{box-shadow:", ";}", ""], themes_["variables"].focusShadow, function (_ref) {
   var $expanded = _ref.$expanded;
   return $expanded && Object(external_styled_components_["css"])(["transform:rotate(180deg);"]);
 });
 var StyledSystemColorPickerWrapper = external_styled_components_default.a.div.withConfig({
-  displayName: "ColorStyles__StyledSystemColorPickerWrapper",
-  componentId: "jxrost-6"
+  displayName: "PaletteStyles__StyledSystemColorPickerWrapper",
+  componentId: "qgv9v9-5"
 })(["position:relative;"]);
 var StyledSystemColorPicker = external_styled_components_default.a.input.withConfig({
-  displayName: "ColorStyles__StyledSystemColorPicker",
-  componentId: "jxrost-7"
+  displayName: "PaletteStyles__StyledSystemColorPicker",
+  componentId: "qgv9v9-6"
 })(["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;", ""], function (_ref2) {
-    var $inDropdown = _ref2.$inDropdown;
-    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-10"
-})(["", ""], Object(themes_["pick"])({
-  prisma: {
-    comfortable: Object(external_styled_components_["css"])(["width:40px;height:40px;"]),
-    compact: Object(external_styled_components_["css"])(["width:32px;height:32px;"])
-  },
-  enterprise: {
-    comfortable: Object(external_styled_components_["css"])(["width:32px;height:32px;"]),
-    compact: Object(external_styled_components_["css"])(["width:28px;height:28px;"])
+var PaletteStyles_StyledCheck = external_styled_components_default()(Checkmark_default.a).withConfig({
+  displayName: "PaletteStyles__StyledCheck",
+  componentId: "qgv9v9-7"
+})(["box-sizing:border-box;color:#d3d3d3;height:100%;width:100%;position:absolute;top:0;left:0;pointer-events:none;"]);
+
+// CONCATENATED MODULE: ./src/Color/Palette.tsx
+
+
+
+
+
+
+
+
+
+
+function Palette(_ref) {
+  var expanded = _ref.expanded,
+      palette = _ref.palette,
+      value = _ref.value,
+      swatchToFocusRef = _ref.swatchToFocusRef,
+      onSwatchClick = _ref.onSwatchClick,
+      expandButtonRef = _ref.expandButtonRef,
+      onPaletteExpand = _ref.onPaletteExpand,
+      onSystemColorPickerChange = _ref.onSystemColorPickerChange,
+      renderInput = _ref.renderInput;
+
+  var _useSplunkTheme = Object(themes_["useSplunkTheme"])(),
+      isPrisma = _useSplunkTheme.isPrisma,
+      isLight = _useSplunkTheme.isLight;
+
+  var isValueInPalette = includes_default()(palette.map(function (c) {
+    return c && toLower_default()(c);
+  }), value);
+  var swatches = palette.map(function (swatchValue, index) {
+    var formattedValue = swatchValue === null ? null : toLower_default()(swatchValue);
+    var selected = formattedValue === value;
+    var shouldFocus = !isValueInPalette && index === 0 || isValueInPalette && selected;
+    return /*#__PURE__*/external_react_default.a.createElement(StyledSwatch, {
+      key: formattedValue || 'null'
+    }, /*#__PURE__*/external_react_default.a.createElement(Color_Swatch, {
+      value: formattedValue,
+      ref: shouldFocus ? swatchToFocusRef : null,
+      onClick: onSwatchClick,
+      noBorder: isPrisma,
+      showSelected: isPrisma && selected
+    }));
+  });
+
+  if (isPrisma) {
+    var isCustomColor = !isValueInPalette && value !== '#ffffff' && value !== '#000000' && value !== null && value !== '';
+    var swatchEnd = swatches.length === 8 ? 7 : 15;
+    var swatchesDefaultDisplay = slice_default()(swatches, 0, swatchEnd);
+    var swatchesExpandDisplay = slice_default()(swatches, swatchEnd);
+    return /*#__PURE__*/external_react_default.a.createElement(StyledPalette, null, /*#__PURE__*/external_react_default.a.createElement("div", {
+      style: {
+        position: 'relative'
+      }
+    }, /*#__PURE__*/external_react_default.a.createElement(StyledSwatches, null, swatchesDefaultDisplay, expanded && swatchesExpandDisplay), expanded && /*#__PURE__*/external_react_default.a.createElement(StyledToolBarPrisma, {
+      "data-test": "tool-bar"
+    }, /*#__PURE__*/external_react_default.a.createElement(themes_["SplunkThemeProvider"], {
+      density: "compact"
+    }, renderInput && renderInput()), /*#__PURE__*/external_react_default.a.createElement(Color_Swatch, {
+      value: null,
+      ref: value === null ? swatchToFocusRef : null,
+      onClick: onSwatchClick,
+      noBorder: !isLight,
+      showSelected: value === null
+    }), /*#__PURE__*/external_react_default.a.createElement(Color_Swatch, {
+      value: "#ffffff",
+      ref: value === '#ffffff' ? swatchToFocusRef : null,
+      onClick: onSwatchClick,
+      noBorder: !isLight,
+      showSelected: value === '#ffffff'
+    }), /*#__PURE__*/external_react_default.a.createElement(Color_Swatch, {
+      value: "#000000",
+      ref: value === '#000000' ? swatchToFocusRef : null,
+      onClick: onSwatchClick,
+      noBorder: true,
+      showSelected: value === '#000000'
+    }), /*#__PURE__*/external_react_default.a.createElement(StyledSystemColorPickerWrapper, null, /*#__PURE__*/external_react_default.a.createElement(StyledSystemColorPicker, {
+      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: value === null ? '' : value,
+      onChange: onSystemColorPickerChange,
+      ref: isCustomColor ? swatchToFocusRef : null
+    }), isCustomColor && /*#__PURE__*/external_react_default.a.createElement(PaletteStyles_StyledCheck, {
+      "aria-label": Object(i18n_["_"])('Selected'),
+      role: "presentation"
+    }))), /*#__PURE__*/external_react_default.a.createElement(StyledExpandButton, {
+      ref: expandButtonRef,
+      $expanded: expanded,
+      onClick: onPaletteExpand,
+      "data-test": "expand-button"
+    }, /*#__PURE__*/external_react_default.a.createElement(ChevronDown_default.a, null))));
   }
-}));
 
+  return /*#__PURE__*/external_react_default.a.createElement(StyledPalette, null, /*#__PURE__*/external_react_default.a.createElement(StyledSwatches, null, swatches), renderInput && renderInput());
+}
+
+/* harmony default export */ var Color_Palette = (Palette);
 // CONCATENATED MODULE: ./src/Color/Color.tsx
 function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
@@ -543,7 +656,6 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
 
 
-
 
 
 // The default palette in Prisma theme.
@@ -1005,108 +1117,35 @@ var Color_Color = /*#__PURE__*/function (_Component) {
       var _this2 = this;
 
       var _this$props5 = this.props,
-          palette = _this$props5.palette,
-          splunkTheme = _this$props5.splunkTheme;
-      var isPrisma = splunkTheme.isPrisma,
-          isLight = splunkTheme.isLight;
-      var currentValue = this.getValue();
-      var currentPalette = isPrisma && this.state.expanded ? palette : slice_default()(palette, 0, 15);
-      var colorInPalette = includes_default()(currentPalette.map(function (c) {
-        return c && toLower_default()(c);
-      }), currentValue);
-      var swatches = palette.map(function (value, index) {
-        var formattedValue = value === null ? null : toLower_default()(value);
-        var selected = formattedValue === currentValue;
-        var shouldFocus = !colorInPalette && index === 0 || colorInPalette && selected;
-        return /*#__PURE__*/external_react_default.a.createElement(StyledSwatch, {
-          key: formattedValue || 'null'
-        }, /*#__PURE__*/external_react_default.a.createElement(Color_Swatch, {
-          value: formattedValue,
-          ref: shouldFocus ? _this2.focusSwatch : null,
-          onClick: _this2.handleSwatchClick,
-          noBorder: isPrisma,
-          showSelected: isPrisma && selected
-        }));
-      });
-
-      if (isPrisma) {
-        var isCustomColor = !colorInPalette && currentValue !== '#ffffff' && currentValue !== '#000000' && currentValue !== null && currentValue !== '';
-        var swatchesDefaultDisplay = slice_default()(swatches, 0, 15);
-        var swatchesExpandDisplay = slice_default()(swatches, 15);
-
-        if (swatches.length === 8) {
-          swatchesDefaultDisplay = slice_default()(swatches, 0, 7);
-          swatchesExpandDisplay = slice_default()(swatches, 7);
+          splunkTheme = _this$props5.splunkTheme,
+          palette = _this$props5.palette;
+      var expanded = this.state.expanded;
+      var isPrisma = splunkTheme.isPrisma;
+      return /*#__PURE__*/external_react_default.a.createElement(Color_Palette, {
+        palette: palette,
+        value: this.getValue(),
+        swatchToFocusRef: this.focusSwatch,
+        renderInput: function renderInput() {
+          return isPrisma ? _this2.renderInput({
+            textAppend: false,
+            textPrepend: false,
+            textInline: true,
+            inDropdown: true
+          }) : _this2.renderInput({
+            textAppend: true,
+            textPrepend: true,
+            textInline: true,
+            inDropdown: false
+          });
+        },
+        expandButtonRef: this.focusExpandButton,
+        onSwatchClick: this.handleSwatchClick,
+        expanded: expanded,
+        onPaletteExpand: this.handlePaletteExpand,
+        onSystemColorPickerChange: function onSystemColorPickerChange(e) {
+          return _this2.handleSystemColorPickerChange(e.target.value);
         }
-
-        return /*#__PURE__*/external_react_default.a.createElement("div", {
-          style: {
-            position: 'relative'
-          }
-        }, /*#__PURE__*/external_react_default.a.createElement(StyledSwatches, null, swatchesDefaultDisplay, this.state.expanded && swatchesExpandDisplay), this.state.expanded && /*#__PURE__*/external_react_default.a.createElement(StyledToolBarPrisma, {
-          "data-test": "tool-bar"
-        }, /*#__PURE__*/external_react_default.a.createElement(themes_["SplunkThemeProvider"], {
-          density: "compact"
-        }, this.renderInput({
-          textAppend: false,
-          textPrepend: false,
-          textInline: true,
-          inDropdown: true
-        })), /*#__PURE__*/external_react_default.a.createElement(Color_Swatch, {
-          style: {
-            marginRight: 4,
-            marginLeft: 4
-          },
-          value: null,
-          ref: currentValue === null ? this.focusSwatch : null,
-          onClick: this.handleSwatchClick,
-          noBorder: !isLight,
-          showSelected: currentValue === null
-        }), /*#__PURE__*/external_react_default.a.createElement(Color_Swatch, {
-          style: {
-            marginRight: 4
-          },
-          value: "#ffffff",
-          ref: currentValue === '#ffffff' ? this.focusSwatch : null,
-          onClick: this.handleSwatchClick,
-          noBorder: !isLight,
-          showSelected: currentValue === '#ffffff'
-        }), /*#__PURE__*/external_react_default.a.createElement(Color_Swatch, {
-          style: {
-            marginRight: 4
-          },
-          value: "#000000",
-          ref: currentValue === '#000000' ? this.focusSwatch : null,
-          onClick: this.handleSwatchClick,
-          noBorder: true,
-          showSelected: currentValue === '#000000'
-        }), /*#__PURE__*/external_react_default.a.createElement(StyledSystemColorPickerWrapper, null, /*#__PURE__*/external_react_default.a.createElement(StyledSystemColorPicker, {
-          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);
-          },
-          ref: isCustomColor ? this.focusSwatch : null
-        }), isCustomColor && /*#__PURE__*/external_react_default.a.createElement(StyledCheck, {
-          "aria-label": Object(i18n_["_"])('Selected'),
-          role: "presentation",
-          style: {
-            position: 'absolute',
-            top: '0',
-            left: '0',
-            pointerEvents: 'none'
-          }
-        }))), /*#__PURE__*/external_react_default.a.createElement(StyledExpandButton, {
-          ref: this.focusExpandButton,
-          $expanded: this.state.expanded,
-          onClick: this.handlePaletteExpand,
-          "data-test": "expand-button"
-        }, /*#__PURE__*/external_react_default.a.createElement(ChevronDown_default.a, null)));
-      }
-
-      return /*#__PURE__*/external_react_default.a.createElement(StyledSwatches, null, swatches);
+      });
     }
   }, {
     key: "render",
@@ -1156,12 +1195,7 @@ var Color_Color = /*#__PURE__*/function (_Component) {
         takeFocus: false // Disable the default focus behavior in Dropdown.
         ,
         toggle: toggle
-      }, /*#__PURE__*/external_react_default.a.createElement(StyledPalette, null, this.renderPalette(), !isPrisma && this.renderInput({
-        textAppend: true,
-        textPrepend: true,
-        textInline: true,
-        inDropdown: false
-      }))), isPrisma && !hideInput && this.renderInput({
+      }, this.renderPalette()), isPrisma && !hideInput && this.renderInput({
         textAppend: false,
         textPrepend: true,
         textInline: true,
@@ -1244,14 +1278,14 @@ module.exports = require("lodash/omit");
 
 /***/ }),
 
-/***/ 65:
+/***/ 66:
 /***/ (function(module, exports) {
 
 module.exports = require("lodash/debounce");
 
 /***/ }),
 
-/***/ 66:
+/***/ 67:
 /***/ (function(module, exports) {
 
 module.exports = require("tinycolor2");
@@ -1265,14 +1299,7 @@ module.exports = require("@splunk/ui-utils/keyboard");
 
 /***/ }),
 
-/***/ 80:
-/***/ (function(module, exports) {
-
-module.exports = require("lodash/slice");
-
-/***/ }),
-
-/***/ 86:
+/***/ 75:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-icons/Checkmark");

package/ColumnLayout.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 176);
+/******/ 	return __webpack_require__(__webpack_require__.s = 177);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -101,14 +101,14 @@ module.exports = require("prop-types");
 
 /***/ }),
 
-/***/ 108:
+/***/ 109:
 /***/ (function(module, exports) {
 
 module.exports = require("lodash/defaults");
 
 /***/ }),
 
-/***/ 176:
+/***/ 177:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -129,11 +129,11 @@ var external_prop_types_ = __webpack_require__(1);
 var external_prop_types_default = /*#__PURE__*/__webpack_require__.n(external_prop_types_);
 
 // EXTERNAL MODULE: external "@splunk/themes/useSplunkTheme"
-var useSplunkTheme_ = __webpack_require__(67);
+var useSplunkTheme_ = __webpack_require__(68);
 var useSplunkTheme_default = /*#__PURE__*/__webpack_require__.n(useSplunkTheme_);
 
 // EXTERNAL MODULE: external "lodash/defaults"
-var defaults_ = __webpack_require__(108);
+var defaults_ = __webpack_require__(109);
 var defaults_default = /*#__PURE__*/__webpack_require__.n(defaults_);
 
 // EXTERNAL MODULE: external "styled-components"
@@ -152,7 +152,7 @@ var Styled = external_styled_components_default.a.div.withConfig({
 })(["", ";"], themes_["mixins"].reset('block'));
 
 // EXTERNAL MODULE: ./src/utils/types.ts
-var types = __webpack_require__(75);
+var types = __webpack_require__(76);
 
 // 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); }
@@ -436,14 +436,14 @@ module.exports = require("styled-components");
 
 /***/ }),
 
-/***/ 67:
+/***/ 68:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/themes/useSplunkTheme");
 
 /***/ }),
 
-/***/ 75:
+/***/ 76:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";

package/ComboBox.js

@@ -703,6 +703,8 @@ var ComboBox_ComboBox = /*#__PURE__*/function (_Component) {
 
       if (!hasExactMatch && value) {
         initialOptions.unshift( /*#__PURE__*/external_react_default.a.createElement(ComboBox_Option, {
+          description: Object(i18n_["_"])('(New value)'),
+          descriptionPosition: "right",
           key: "currentValueOption",
           value: value,
           "data-test-current-value-option": value