@splunk/react-ui 4.4.1 → 4.5.0

package/Select.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 153);
+/******/ 	return __webpack_require__(__webpack_require__.s = 164);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -115,7 +115,7 @@ module.exports = require("@splunk/react-ui/Menu");
 
 /***/ }),
 
-/***/ 153:
+/***/ 164:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -143,7 +143,7 @@ var external_lodash_ = __webpack_require__(4);
 var i18n_ = __webpack_require__(5);
 
 // EXTERNAL MODULE: ./src/Select/SelectBase.tsx + 1 modules
-var SelectBase = __webpack_require__(42);
+var SelectBase = __webpack_require__(41);
 
 // EXTERNAL MODULE: ./src/Select/OptionBase.tsx
 var OptionBase = __webpack_require__(28);
@@ -331,6 +331,7 @@ var Select_propTypes = {
   footerMessage: external_prop_types_default.a.node,
   inline: external_prop_types_default.a.bool,
   inputId: external_prop_types_default.a.string,
+  inputRef: external_prop_types_default.a.oneOfType([external_prop_types_default.a.func, external_prop_types_default.a.object]),
   isLoadingOptions: external_prop_types_default.a.bool,
   labelledBy: external_prop_types_default.a.string,
   labelText: external_prop_types_default.a.string,
@@ -456,7 +457,7 @@ Select_defineProperty(Select_Select, "Divider", SelectBase["a" /* Divider */]);
 
 /***/ }),
 
-/***/ 16:
+/***/ 17:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/Button");
@@ -477,17 +478,17 @@ 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");
 
 /***/ }),
 
@@ -681,6 +682,13 @@ module.exports = require("styled-components");
 
 /***/ }),
 
+/***/ 32:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/react-ui/ResultsMenu");
+
+/***/ }),
+
 /***/ 36:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
@@ -726,13 +734,6 @@ module.exports = require("@splunk/react-icons/Caret");
 
 /***/ }),
 
-/***/ 39:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/react-ui/ResultsMenu");
-
-/***/ }),
-
 /***/ 4:
 /***/ (function(module, exports) {
 
@@ -740,7 +741,7 @@ module.exports = require("lodash");
 
 /***/ }),
 
-/***/ 42:
+/***/ 41:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -764,7 +765,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);
@@ -787,11 +788,11 @@ var Link_default = /*#__PURE__*/__webpack_require__.n(Link_);
 var Menu_ = __webpack_require__(13);
 
 // 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_);
 
 // EXTERNAL MODULE: ./src/icons/CaretDown.tsx
@@ -805,7 +806,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/Button"
-var Button_ = __webpack_require__(16);
+var Button_ = __webpack_require__(17);
 var Button_default = /*#__PURE__*/__webpack_require__.n(Button_);
 
 // EXTERNAL MODULE: external "@splunk/themes"
@@ -971,6 +972,8 @@ var propTypes = {
   placeholder: external_prop_types_default.a.string,
   prefixLabel: external_prop_types_default.a.string,
   prepend: external_prop_types_default.a.bool,
+  repositionMode: external_prop_types_default.a.oneOf(['none', 'flip']),
+  showSelectedValuesFirst: external_prop_types_default.a.oneOf(['nextOpen', 'immediately', 'never']),
   suffixLabel: external_prop_types_default.a.string,
   tabConfirmsNewValue: external_prop_types_default.a.bool,
   values: external_prop_types_default.a.array
@@ -990,6 +993,7 @@ var defaultProps = {
   noOptionsMessage: Object(i18n_["_"])('No matches'),
   placeholder: Object(i18n_["_"])('Select...'),
   prepend: false,
+  repositionMode: 'flip',
   tabConfirmsNewValue: false
 };
 
@@ -1035,6 +1039,8 @@ var SelectBase_SelectBase = /*#__PURE__*/function (_Component) {
 
     _defineProperty(_assertThisInitialized(_this), "menuId", void 0);
 
+    _defineProperty(_assertThisInitialized(_this), "previousActiveIndex", null);
+
     _defineProperty(_assertThisInitialized(_this), "selectedOptionCount", void 0);
 
     _defineProperty(_assertThisInitialized(_this), "handleSelectAll", function (e) {
@@ -1185,15 +1191,18 @@ var SelectBase_SelectBase = /*#__PURE__*/function (_Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "handleRequestOpen", function (e) {
-      var _this$getCurrentValue3, _this$props$onFilterC2, _this$props7;
+      var newState = {
+        open: true,
+        topValues: _this.getTopValues()
+      }; // SUI-3234: preserve existing behavior difference between <Select> and <Multiselect.Compact>
 
-      var multiple = _this.props.multiple;
+      if (_this.props.multiple) {
+        newState.filterKeyword = '';
+      }
 
-      _this.setState({
-        open: true,
-        // in non-multiple mode, don't move values to the top of the list
-        topValues: multiple ? (_this$getCurrentValue3 = _this.getCurrentValues()) !== null && _this$getCurrentValue3 !== void 0 ? _this$getCurrentValue3 : [] : []
-      }, function () {
+      var oldFilterKeyword = _this.state.filterKeyword;
+
+      _this.setState(newState, function () {
         var _this$props$onOpen, _this$props6;
 
         (_this$props$onOpen = (_this$props6 = _this.props).onOpen) === null || _this$props$onOpen === void 0 ? void 0 : _this$props$onOpen.call(_this$props6);
@@ -1207,10 +1216,14 @@ var SelectBase_SelectBase = /*#__PURE__*/function (_Component) {
             activeIndex: (_this$firstSelectedOp = _this.firstSelectedOptionIndex) !== null && _this$firstSelectedOp !== void 0 ? _this$firstSelectedOp : 0
           });
         }
-      });
 
-      (_this$props$onFilterC2 = (_this$props7 = _this.props).onFilterChange) === null || _this$props$onFilterC2 === void 0 ? void 0 : _this$props$onFilterC2.call(_this$props7, e, {
-        keyword: ''
+        if (oldFilterKeyword !== _this.state.filterKeyword) {
+          var _this$props$onFilterC2, _this$props7;
+
+          (_this$props$onFilterC2 = (_this$props7 = _this.props).onFilterChange) === null || _this$props$onFilterC2 === void 0 ? void 0 : _this$props$onFilterC2.call(_this$props7, e, {
+            keyword: _this.state.filterKeyword
+          });
+        }
       });
     });
 
@@ -1221,6 +1234,7 @@ var SelectBase_SelectBase = /*#__PURE__*/function (_Component) {
       }, function () {
         var _this$props$onClose, _this$props8;
 
+        _this.previousActiveIndex = null;
         (_this$props$onClose = (_this$props8 = _this.props).onClose) === null || _this$props$onClose === void 0 ? void 0 : _this$props$onClose.call(_this$props8);
       });
     });
@@ -1234,7 +1248,9 @@ var SelectBase_SelectBase = /*#__PURE__*/function (_Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "handleActiveOptionMount", function (c) {
-      c === null || c === void 0 ? void 0 : c.scrollIntoViewIfNeeded();
+      if (_this.previousActiveIndex !== _this.state.activeIndex) {
+        c === null || c === void 0 ? void 0 : c.scrollIntoViewIfNeeded();
+      }
     });
 
     _defineProperty(_assertThisInitialized(_this), "handleSelectedItemMount", function (c) {
@@ -1245,11 +1261,12 @@ var SelectBase_SelectBase = /*#__PURE__*/function (_Component) {
       var _this$state = _this.state,
           filterKeyword = _this$state.filterKeyword,
           textHasFocus = _this$state.textHasFocus,
-          topValues = _this$state.topValues;
+          topValuesState = _this$state.topValues;
       var _this$props10 = _this.props,
           allowNewValues = _this$props10.allowNewValues,
           filter = _this$props10.filter,
-          multiple = _this$props10.multiple;
+          multiple = _this$props10.multiple,
+          showSelectedValuesFirst = _this$props10.showSelectedValuesFirst;
 
       var currentValues = _this.getCurrentValues();
 
@@ -1262,6 +1279,7 @@ var SelectBase_SelectBase = /*#__PURE__*/function (_Component) {
       var hasDivider = false; // used to avoid overwriting the selected item ref in multiple mode
 
       var foundSelected;
+      var topValues = showSelectedValuesFirst === 'immediately' ? _this.getTopValues() : topValuesState;
       var children = external_react_["Children"].toArray(_this.props.children).reduce(function (acc, item, i) {
         // ignore Headings and Dividers
         if (!isOption(item)) {
@@ -1468,12 +1486,13 @@ var SelectBase_SelectBase = /*#__PURE__*/function (_Component) {
 
   _createClass(SelectBase, [{
     key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps) {
+    value: function componentDidUpdate(prevProps, prevState) {
       if (false) {}
 
       if (false) {}
 
       SelectBase.validateAppearance(this.props);
+      this.previousActiveIndex = prevState.activeIndex;
     }
   }, {
     key: "getCurrentValues",
@@ -1481,6 +1500,14 @@ var SelectBase_SelectBase = /*#__PURE__*/function (_Component) {
       var values = this.isControlled() ? this.props.values : this.state.values;
       return this.props.multiple || values == null ? values : values.slice(0, 1);
     }
+  }, {
+    key: "getTopValues",
+    value: function getTopValues() {
+      var _this$getCurrentValue3;
+
+      // in non-multiple mode, don't move values to the top of the list
+      return this.props.multiple && this.props.showSelectedValuesFirst !== 'never' ? (_this$getCurrentValue3 = this.getCurrentValues()) !== null && _this$getCurrentValue3 !== void 0 ? _this$getCurrentValue3 : [] : [];
+    }
   }, {
     key: "isControlled",
     value: function isControlled() {
@@ -1627,6 +1654,7 @@ var SelectBase_SelectBase = /*#__PURE__*/function (_Component) {
           multiple = _this$props14.multiple,
           placeholder = _this$props14.placeholder,
           prefixLabel = _this$props14.prefixLabel,
+          repositionMode = _this$props14.repositionMode,
           suffixLabel = _this$props14.suffixLabel;
       var icon;
       var label;
@@ -1766,7 +1794,7 @@ var SelectBase_SelectBase = /*#__PURE__*/function (_Component) {
         onRequestOpen: this.handleRequestOpen,
         onRequestClose: this.handleRequestClose,
         open: this.state.open,
-        repositionMode: "flip",
+        repositionMode: repositionMode,
         defaultPlacement: filterEnabled ? defaultPlacement : undefined,
         canCoverAnchor: window.innerHeight < 500,
         ref: function ref(c) {

package/SidePanel.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 154);
+/******/ 	return __webpack_require__(__webpack_require__.s = 165);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -101,7 +101,7 @@ module.exports = require("prop-types");
 
 /***/ }),
 
-/***/ 154:
+/***/ 165:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -123,7 +123,7 @@ var external_prop_types_default = /*#__PURE__*/__webpack_require__.n(external_pr
 var external_lodash_ = __webpack_require__(4);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/ModalLayer"
-var ModalLayer_ = __webpack_require__(65);
+var ModalLayer_ = __webpack_require__(68);
 var ModalLayer_default = /*#__PURE__*/__webpack_require__.n(ModalLayer_);
 
 // EXTERNAL MODULE: external "styled-components"
@@ -131,7 +131,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/TransitionOpen"
-var TransitionOpen_ = __webpack_require__(46);
+var TransitionOpen_ = __webpack_require__(47);
 var TransitionOpen_default = /*#__PURE__*/__webpack_require__.n(TransitionOpen_);
 
 // EXTERNAL MODULE: external "@splunk/themes"
@@ -365,14 +365,14 @@ module.exports = require("lodash");
 
 /***/ }),
 
-/***/ 46:
+/***/ 47:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/TransitionOpen");
 
 /***/ }),
 
-/***/ 65:
+/***/ 68:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/ModalLayer");

package/Slider.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 156);
+/******/ 	return __webpack_require__(__webpack_require__.s = 166);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -101,14 +101,21 @@ module.exports = require("prop-types");
 
 /***/ }),
 
-/***/ 15:
+/***/ 14:
 /***/ (function(module, exports) {
 
-module.exports = require("react-event-listener");
+module.exports = require("@splunk/react-ui/EventListener");
 
 /***/ }),
 
-/***/ 156:
+/***/ 16:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/react-ui/Popover");
+
+/***/ }),
+
+/***/ 166:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -126,12 +133,8 @@ var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_)
 var external_prop_types_ = __webpack_require__(1);
 var external_prop_types_default = /*#__PURE__*/__webpack_require__.n(external_prop_types_);
 
-// EXTERNAL MODULE: external "react-event-listener"
-var external_react_event_listener_ = __webpack_require__(15);
-var external_react_event_listener_default = /*#__PURE__*/__webpack_require__.n(external_react_event_listener_);
-
 // EXTERNAL MODULE: external "decimal.js-light"
-var external_decimal_js_light_ = __webpack_require__(94);
+var external_decimal_js_light_ = __webpack_require__(98);
 var external_decimal_js_light_default = /*#__PURE__*/__webpack_require__.n(external_decimal_js_light_);
 
 // EXTERNAL MODULE: external "lodash"
@@ -143,8 +146,12 @@ var keyboard_ = __webpack_require__(9);
 // EXTERNAL MODULE: external "@splunk/themes"
 var themes_ = __webpack_require__(0);
 
+// EXTERNAL MODULE: external "@splunk/react-ui/EventListener"
+var EventListener_ = __webpack_require__(14);
+var EventListener_default = /*#__PURE__*/__webpack_require__.n(EventListener_);
+
 // 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 "styled-components"
@@ -152,7 +159,7 @@ var external_styled_components_ = __webpack_require__(3);
 var external_styled_components_default = /*#__PURE__*/__webpack_require__.n(external_styled_components_);
 
 // EXTERNAL MODULE: external "tinycolor2"
-var external_tinycolor2_ = __webpack_require__(66);
+var external_tinycolor2_ = __webpack_require__(44);
 var external_tinycolor2_default = /*#__PURE__*/__webpack_require__.n(external_tinycolor2_);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/Box"
@@ -678,11 +685,15 @@ var Slider_Slider = /*#__PURE__*/function (_Component) {
         elementRef: elementRef,
         flex: true,
         inline: inline
-      }, boxProps), selected && /*#__PURE__*/external_react_default.a.createElement(external_react_event_listener_default.a, {
-        onMouseUp: this.handleMouseUp,
-        onMouseMove: this.handleMouseMove,
-        target: "window"
-      }), minLabel !== null && /*#__PURE__*/external_react_default.a.createElement(StyledMinLabelBox, {
+      }, boxProps), selected && /*#__PURE__*/external_react_default.a.createElement(external_react_default.a.Fragment, null, /*#__PURE__*/external_react_default.a.createElement(EventListener_default.a, {
+        target: window,
+        eventType: "mouseup",
+        listener: this.handleMouseUp
+      }), /*#__PURE__*/external_react_default.a.createElement(EventListener_default.a, {
+        target: window,
+        eventType: "mousemove",
+        listener: this.handleMouseMove
+      })), minLabel !== null && /*#__PURE__*/external_react_default.a.createElement(StyledMinLabelBox, {
         "data-test": "min-label",
         $disabled: disabled
       }, minLabel || min), /*#__PURE__*/external_react_default.a.createElement(StyledInput, {
@@ -742,13 +753,6 @@ SliderWithTheme.propTypes = Slider_Slider.propTypes;
 
 
 
-/***/ }),
-
-/***/ 17:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/react-ui/Popover");
-
 /***/ }),
 
 /***/ 2:
@@ -772,7 +776,7 @@ module.exports = require("lodash");
 
 /***/ }),
 
-/***/ 66:
+/***/ 44:
 /***/ (function(module, exports) {
 
 module.exports = require("tinycolor2");
@@ -793,7 +797,7 @@ module.exports = require("@splunk/ui-utils/keyboard");
 
 /***/ }),
 
-/***/ 94:
+/***/ 98:
 /***/ (function(module, exports) {
 
 module.exports = require("decimal.js-light");

package/SlidingPanels.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 137);
+/******/ 	return __webpack_require__(__webpack_require__.s = 140);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -101,7 +101,7 @@ module.exports = require("prop-types");
 
 /***/ }),
 
-/***/ 12:
+/***/ 11:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -128,7 +128,7 @@ function updateReactRef(ref, current) {
 
 /***/ }),
 
-/***/ 137:
+/***/ 140:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -182,7 +182,7 @@ var Styled = external_styled_components_default()(external_react_spring_["animat
 })(["", ";", ";"], themes_["mixins"].reset('block'), themes_["mixins"].clearfix());
 
 // EXTERNAL MODULE: ./src/utils/updateReactRef.ts
-var updateReactRef = __webpack_require__(12);
+var updateReactRef = __webpack_require__(11);
 
 // CONCATENATED MODULE: ./src/SlidingPanels/Panel.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); }

package/StaticContent.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 163);
+/******/ 	return __webpack_require__(__webpack_require__.s = 167);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -101,7 +101,7 @@ module.exports = require("prop-types");
 
 /***/ }),
 
-/***/ 163:
+/***/ 167:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";