@splunk/react-ui 4.1.0 → 4.4.1

package/Popover.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 133);
+/******/ 	return __webpack_require__(__webpack_require__.s = 120);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -128,7 +128,7 @@ function updateReactRef(ref, current) {
 
 /***/ }),
 
-/***/ 133:
+/***/ 120:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -137,6 +137,7 @@ __webpack_require__.r(__webpack_exports__);
 
 // EXPORTS
 __webpack_require__.d(__webpack_exports__, "default", function() { return /* reexport */ src_Popover_Popover; });
+__webpack_require__.d(__webpack_exports__, "PopoverContext", function() { return /* reexport */ PopoverContext; });
 
 // EXTERNAL MODULE: external "react"
 var external_react_ = __webpack_require__(2);
@@ -147,7 +148,7 @@ var external_prop_types_ = __webpack_require__(1);
 var external_prop_types_default = /*#__PURE__*/__webpack_require__.n(external_prop_types_);
 
 // EXTERNAL MODULE: external "react-dom"
-var external_react_dom_ = __webpack_require__(58);
+var external_react_dom_ = __webpack_require__(60);
 
 // EXTERNAL MODULE: external "react-event-listener"
 var external_react_event_listener_ = __webpack_require__(15);
@@ -160,18 +161,18 @@ var external_lodash_ = __webpack_require__(4);
 var themes_ = __webpack_require__(0);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/Animation"
-var Animation_ = __webpack_require__(27);
+var Animation_ = __webpack_require__(30);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/Layer"
-var Layer_ = __webpack_require__(47);
+var Layer_ = __webpack_require__(49);
 var Layer_default = /*#__PURE__*/__webpack_require__.n(Layer_);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/ScrollContainerContext"
-var ScrollContainerContext_ = __webpack_require__(33);
+var ScrollContainerContext_ = __webpack_require__(35);
 var ScrollContainerContext_default = /*#__PURE__*/__webpack_require__.n(ScrollContainerContext_);
 
 // EXTERNAL MODULE: external "@splunk/ui-utils/focus"
-var focus_ = __webpack_require__(26);
+var focus_ = __webpack_require__(24);
 
 // CONCATENATED MODULE: ./src/Popover/getPlacement.ts
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
@@ -439,8 +440,12 @@ function getPlacement(args) {
     }
   };
 }
-// EXTERNAL MODULE: external "react-spring/renderprops.cjs"
-var renderprops_cjs_ = __webpack_require__(38);
+// CONCATENATED MODULE: ./src/Popover/PopoverContext.tsx
+
+var PopoverContext = /*#__PURE__*/Object(external_react_["createContext"])({});
+
+// EXTERNAL MODULE: external "react-spring"
+var external_react_spring_ = __webpack_require__(18);
 
 // EXTERNAL MODULE: external "styled-components"
 var external_styled_components_ = __webpack_require__(3);
@@ -454,7 +459,7 @@ var PopoverStyles_arrowHeight = Object(themes_["pick"])({
   enterprise: '8px',
   prisma: 0
 });
-var Styled = external_styled_components_default()(renderprops_cjs_["animated"].div).withConfig({
+var Styled = external_styled_components_default()(external_react_spring_["animated"].div).withConfig({
   displayName: "PopoverStyles__Styled",
   componentId: "sc-1nahsvw-0"
 })(["position:fixed;z-index:", ";left:-300%;top:-300%;"], themes_["variables"].zindexPopover);
@@ -577,7 +582,8 @@ function Popover_defineProperty(obj, key, value) { if (key in obj) { Object.defi
 
 
 
-var possibleCloseReasons = ['clickAway', 'escapeKey', 'offScreen'];
+
+var possibleCloseReasons = ['clickAway', 'escapeKey', 'offScreen', 'tabKey'];
 var propTypes = {
   align: external_prop_types_default.a.oneOf(['center', 'edge', 'theme']),
   anchor: external_prop_types_default.a.object,
@@ -757,6 +763,8 @@ var Popover_Popover = /*#__PURE__*/function (_Component) {
         var isPrisma = splunkTheme.family === 'prisma'; // If these conditions are not met, we cannot set the popover.
 
         if (!open || !_this.outerContainerEl || !anchor || !state.anchorEl || !_this.windowSizeMeasurementEl) {
+          if (false) {}
+
           return null;
         }
 
@@ -854,7 +862,22 @@ var Popover_Popover = /*#__PURE__*/function (_Component) {
 
     Popover_defineProperty(_assertThisInitialized(_this), "handleTab", function (e) {
       if (_this.innerContainerEl) {
-        Object(focus_["handleTab"])(_this.innerContainerEl, e);
+        if (_this.props.retainFocus) {
+          Object(focus_["handleTab"])(_this.innerContainerEl, e);
+        } else if (Object(focus_["isTabKey"])(e)) {
+          var tabbableElements = Object(focus_["getSortedTabbableElements"])(_this.innerContainerEl);
+
+          if (tabbableElements.length > 0) {
+            var finalTabbale = e.shiftKey ? tabbableElements[0] : tabbableElements[tabbableElements.length - 1];
+
+            if (finalTabbale === e.target) {
+              _this.handleRequestClose({
+                event: e,
+                reason: 'tabKey'
+              });
+            }
+          }
+        }
       }
     });
 
@@ -877,6 +900,7 @@ var Popover_Popover = /*#__PURE__*/function (_Component) {
           children = _this$props2.children,
           id = _this$props2.id,
           open = _this$props2.open,
+          retainFocus = _this$props2.retainFocus,
           splunkTheme = _this$props2.splunkTheme;
       var _this$state = _this.state,
           anchorPos = _this$state.anchorPos,
@@ -915,7 +939,6 @@ var Popover_Popover = /*#__PURE__*/function (_Component) {
       /* eslint-disable jsx-a11y/no-static-element-interactions */
 
       return /*#__PURE__*/external_react_default.a.createElement(Animation_["Spring"], {
-        "native": true,
         from: {
           opacity: animation ? 0 : 1
         },
@@ -925,12 +948,9 @@ var Popover_Popover = /*#__PURE__*/function (_Component) {
           friction: 40
         },
         onRest: _this.handleAnimationEnd
-      }, function (_ref4) {
-        var opacity = _ref4.opacity;
+      }, function (interpolatedStyles) {
         return /*#__PURE__*/external_react_default.a.createElement(Styled, {
-          style: Popover_objectSpread(Popover_objectSpread({}, outerContainerStyle), {}, {
-            opacity: opacity
-          }),
+          style: Popover_objectSpread(Popover_objectSpread({}, outerContainerStyle), interpolatedStyles),
           ref: function ref(c) {
             _this.outerContainerEl = c;
           }
@@ -940,9 +960,13 @@ var Popover_Popover = /*#__PURE__*/function (_Component) {
           ref: _this.handleInnerContainerMount,
           tabIndex: -1,
           id: id,
-          onKeyDown: _this.props.retainFocus ? _this.handleTab : undefined // TODO: remove anchor once prop type generation is fixed
+          onKeyDown: _this.handleTab // TODO: remove anchor once prop type generation is fixed
 
-        }, Object(external_lodash_["omit"])(_this.props, ['anchor'].concat(_toConsumableArray(Object(external_lodash_["keys"])(Popover.propTypes))))), appearance === 'none' && children, appearance !== 'none' && !isPrisma && /*#__PURE__*/external_react_default.a.createElement(StyledArrow, {
+        }, Object(external_lodash_["omit"])(_this.props, ['anchor'].concat(_toConsumableArray(Object(external_lodash_["keys"])(Popover.propTypes))))), /*#__PURE__*/external_react_default.a.createElement(PopoverContext.Provider, {
+          value: {
+            retainFocus: retainFocus
+          }
+        }, appearance === 'none' && children, appearance !== 'none' && !isPrisma && /*#__PURE__*/external_react_default.a.createElement(StyledArrow, {
           $appearance: displayAppearance,
           ref: function ref(arrow) {
             _this.arrow = arrow;
@@ -950,7 +974,7 @@ var Popover_Popover = /*#__PURE__*/function (_Component) {
           style: arrowStyle
         }), appearance !== 'none' && /*#__PURE__*/external_react_default.a.createElement(StyledContent, {
           $appearance: displayAppearance
-        }, Object(external_lodash_["isFunction"])(children) ? children(childData) : children)), /*#__PURE__*/external_react_default.a.createElement(StyledLowerRightCorner, {
+        }, Object(external_lodash_["isFunction"])(children) ? children(childData) : children))), /*#__PURE__*/external_react_default.a.createElement(StyledLowerRightCorner, {
           ref: function ref(el) {
             _this.windowSizeMeasurementEl = el;
           }
@@ -989,9 +1013,11 @@ var Popover_Popover = /*#__PURE__*/function (_Component) {
       }
 
       if (this.props.open || this.state.animating) {
-        this.setPlacement();
+        this.setPlacement(); // make sure that the popover both was not open before and is actually open now
+        // this prevents bugs like #4 in SUI-2054 where popover contents re-rendering due to animation
+        // causes the popover contents to receive focus even though the popover closing
 
-        if (!prevProps.open && this.props.takeFocus) {
+        if (!prevProps.open && this.props.open && this.props.takeFocus) {
           Object(focus_["takeFocus"])(this.innerContainerEl);
         }
       }
@@ -1089,6 +1115,7 @@ PopoverWithTheme.propTypes = Popover_Popover.propTypes;
 
 
 
+
 /***/ }),
 
 /***/ 15:
@@ -1098,24 +1125,24 @@ module.exports = require("react-event-listener");
 
 /***/ }),
 
-/***/ 2:
+/***/ 18:
 /***/ (function(module, exports) {
 
-module.exports = require("react");
+module.exports = require("react-spring");
 
 /***/ }),
 
-/***/ 26:
+/***/ 2:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/ui-utils/focus");
+module.exports = require("react");
 
 /***/ }),
 
-/***/ 27:
+/***/ 24:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/react-ui/Animation");
+module.exports = require("@splunk/ui-utils/focus");
 
 /***/ }),
 
@@ -1126,17 +1153,17 @@ module.exports = require("styled-components");
 
 /***/ }),
 
-/***/ 33:
+/***/ 30:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/react-ui/ScrollContainerContext");
+module.exports = require("@splunk/react-ui/Animation");
 
 /***/ }),
 
-/***/ 38:
+/***/ 35:
 /***/ (function(module, exports) {
 
-module.exports = require("react-spring/renderprops.cjs");
+module.exports = require("@splunk/react-ui/ScrollContainerContext");
 
 /***/ }),
 
@@ -1147,14 +1174,14 @@ module.exports = require("lodash");
 
 /***/ }),
 
-/***/ 47:
+/***/ 49:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/Layer");
 
 /***/ }),
 
-/***/ 58:
+/***/ 60:
 /***/ (function(module, exports) {
 
 module.exports = require("react-dom");

package/Progress.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 = 149);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -101,14 +101,7 @@ module.exports = require("prop-types");
 
 /***/ }),
 
-/***/ 14:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/react-ui/ScreenReaderContent");
-
-/***/ }),
-
-/***/ 153:
+/***/ 149:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -130,22 +123,18 @@ var external_prop_types_default = /*#__PURE__*/__webpack_require__.n(external_pr
 var external_lodash_ = __webpack_require__(4);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/AnimationToggle"
-var AnimationToggle_ = __webpack_require__(31);
-
-// EXTERNAL MODULE: external "@splunk/react-ui/ScreenReaderContent"
-var ScreenReaderContent_ = __webpack_require__(14);
-var ScreenReaderContent_default = /*#__PURE__*/__webpack_require__.n(ScreenReaderContent_);
+var AnimationToggle_ = __webpack_require__(34);
 
 // 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 "tinycolor2"
-var external_tinycolor2_ = __webpack_require__(64);
+var external_tinycolor2_ = __webpack_require__(66);
 var external_tinycolor2_default = /*#__PURE__*/__webpack_require__.n(external_tinycolor2_);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/Tooltip"
-var Tooltip_ = __webpack_require__(43);
+var Tooltip_ = __webpack_require__(45);
 var Tooltip_default = /*#__PURE__*/__webpack_require__.n(Tooltip_);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/Box"
@@ -262,7 +251,6 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 
 
-
 var propTypes = {
   elementRef: external_prop_types_default.a.oneOfType([external_prop_types_default.a.func, external_prop_types_default.a.object]),
   percentage: external_prop_types_default.a.number,
@@ -314,7 +302,7 @@ function Progress(_ref) {
   }, /*#__PURE__*/external_react_default.a.createElement(StyledPuck, {
     $animated: animated,
     $type: type
-  }), /*#__PURE__*/external_react_default.a.createElement(ScreenReaderContent_default.a, null, content)));
+  })));
 }
 
 Progress.propTypes = propTypes;
@@ -338,7 +326,7 @@ module.exports = require("styled-components");
 
 /***/ }),
 
-/***/ 31:
+/***/ 34:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/AnimationToggle");
@@ -352,14 +340,14 @@ module.exports = require("lodash");
 
 /***/ }),
 
-/***/ 43:
+/***/ 45:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/Tooltip");
 
 /***/ }),
 
-/***/ 64:
+/***/ 66:
 /***/ (function(module, exports) {
 
 module.exports = require("tinycolor2");

package/RadioBar.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 121);
+/******/ 	return __webpack_require__(__webpack_require__.s = 126);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -108,7 +108,7 @@ module.exports = require("@splunk/react-ui/Clickable");
 
 /***/ }),
 
-/***/ 121:
+/***/ 126:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -134,11 +134,11 @@ var external_lodash_ = __webpack_require__(4);
 var themes_ = __webpack_require__(0);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/ButtonGroup"
-var ButtonGroup_ = __webpack_require__(89);
+var ButtonGroup_ = __webpack_require__(91);
 var ButtonGroup_default = /*#__PURE__*/__webpack_require__.n(ButtonGroup_);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/Button"
-var Button_ = __webpack_require__(17);
+var Button_ = __webpack_require__(16);
 var Button_default = /*#__PURE__*/__webpack_require__.n(Button_);
 
 // EXTERNAL MODULE: external "styled-components"
@@ -491,7 +491,7 @@ RadioBarWithThemeOption.Option = RadioBar_Option;
 
 /***/ }),
 
-/***/ 17:
+/***/ 16:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/Button");
@@ -526,7 +526,7 @@ module.exports = require("@splunk/react-ui/Box");
 
 /***/ }),
 
-/***/ 89:
+/***/ 91:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/ButtonGroup");

package/RadioList.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 115);
+/******/ 	return __webpack_require__(__webpack_require__.s = 119);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -108,7 +108,7 @@ module.exports = require("@splunk/ui-utils/id");
 
 /***/ }),
 
-/***/ 115:
+/***/ 119:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";

package/ResultsMenu.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 158);
+/******/ 	return __webpack_require__(__webpack_require__.s = 145);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -135,7 +135,7 @@ module.exports = require("@splunk/react-ui/Menu");
 
 /***/ }),
 
-/***/ 158:
+/***/ 145:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -160,7 +160,7 @@ var external_lodash_ = __webpack_require__(4);
 var i18n_ = __webpack_require__(5);
 
 // EXTERNAL MODULE: external "@splunk/ui-utils/userAgent"
-var userAgent_ = __webpack_require__(90);
+var userAgent_ = __webpack_require__(92);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/Menu"
 var Menu_ = __webpack_require__(13);
@@ -171,7 +171,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/WaitSpinner"
-var WaitSpinner_ = __webpack_require__(91);
+var WaitSpinner_ = __webpack_require__(93);
 var WaitSpinner_default = /*#__PURE__*/__webpack_require__.n(WaitSpinner_);
 
 // EXTERNAL MODULE: external "@splunk/themes"
@@ -272,6 +272,9 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 var propTypes = {
   animateLoading: external_prop_types_default.a.bool,
   children: external_prop_types_default.a.node,
+
+  /** @private */
+  controlledExternally: external_prop_types_default.a.bool,
   childrenStart: external_prop_types_default.a.node,
   elementRef: external_prop_types_default.a.oneOfType([external_prop_types_default.a.func, external_prop_types_default.a.object]),
   footerMessage: external_prop_types_default.a.node,
@@ -440,6 +443,7 @@ var ResultsMenu_ResultsMenu = /*#__PURE__*/function (_Component) {
       var _this$props2 = this.props,
           animateLoading = _this$props2.animateLoading,
           children = _this$props2.children,
+          controlledExternally = _this$props2.controlledExternally,
           childrenStart = _this$props2.childrenStart,
           isLoading = _this$props2.isLoading,
           loadingMessage = _this$props2.loadingMessage,
@@ -462,17 +466,21 @@ var ResultsMenu_ResultsMenu = /*#__PURE__*/function (_Component) {
         onWheel: onScrollBottom ? this.handleWheelMenu : undefined,
         onMouseEnter: onScrollBottom ? this.handleMouseEnter : undefined,
         onMouseLeave: onScrollBottom ? this.handleMouseLeave : undefined
-      }, otherProps), placement !== 'above' && childrenStart, placement === 'above' && this.renderFooterMessage(), /*#__PURE__*/external_react_default.a.createElement(Menu_default.a, {
+      }, otherProps), placement !== 'above' && childrenStart, placement === 'above' && this.renderFooterMessage(), /*#__PURE__*/external_react_default.a.createElement(Menu_["MenuContext"].Provider, {
+        value: {
+          role: 'listbox'
+        }
+      }, /*#__PURE__*/external_react_default.a.createElement(Menu_default.a, {
         key: "menu",
         style: {
           overflow: 'auto',
           maxHeight: this.state.menuMaxHeight || 'calc(100vh - 20px)',
           flexDirection: 'column'
         },
+        controlledExternally: controlledExternally,
         elementRef: this.handleMenuMount,
         onScroll: onScrollBottom ? this.handleScroll : undefined,
-        stopScrollPropagation: true,
-        role: "listbox"
+        stopScrollPropagation: true
       }, !hasResults && noOptionsMessage && !isLoading && /*#__PURE__*/external_react_default.a.createElement(Menu_default.a.Item, {
         "data-test": "no-results-message",
         disabled: true
@@ -483,7 +491,7 @@ var ResultsMenu_ResultsMenu = /*#__PURE__*/function (_Component) {
         style: {
           height: this.state.scrollBottomTriggered ? this.state.numberOfItemsLoaded * this.itemMinHeight || 0 : 0
         }
-      }), isLoading && /*#__PURE__*/external_react_default.a.createElement(StyledLoading, null, animateLoading && /*#__PURE__*/external_react_default.a.createElement(StyledWait, null), /*#__PURE__*/external_react_default.a.createElement(StyledLoadingMessage, null, loadingMessage))), placement !== 'above' && this.renderFooterMessage(), placement === 'above' && childrenStart);
+      }), isLoading && /*#__PURE__*/external_react_default.a.createElement(StyledLoading, null, animateLoading && /*#__PURE__*/external_react_default.a.createElement(StyledWait, null), /*#__PURE__*/external_react_default.a.createElement(StyledLoadingMessage, null, loadingMessage)))), placement !== 'above' && this.renderFooterMessage(), placement === 'above' && childrenStart);
     }
   }]);
 
@@ -529,14 +537,14 @@ module.exports = require("@splunk/ui-utils/i18n");
 
 /***/ }),
 
-/***/ 90:
+/***/ 92:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/ui-utils/userAgent");
 
 /***/ }),
 
-/***/ 91:
+/***/ 93:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/WaitSpinner");

package/ScreenReaderContent.js

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