@splunk/react-ui 4.17.1 → 4.19.0

package/Slider.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 232);
+/******/ 	return __webpack_require__(__webpack_require__.s = 233);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -101,24 +101,24 @@ module.exports = require("prop-types");
 
 /***/ }),
 
-/***/ 10:
+/***/ 11:
 /***/ (function(module, exports) {
 
 module.exports = require("lodash/has");
 
 /***/ }),
 
-/***/ 15:
+/***/ 154:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/react-ui/EventListener");
+module.exports = require("decimal.js-light");
 
 /***/ }),
 
-/***/ 153:
+/***/ 16:
 /***/ (function(module, exports) {
 
-module.exports = require("decimal.js-light");
+module.exports = require("@splunk/react-ui/EventListener");
 
 /***/ }),
 
@@ -136,7 +136,7 @@ module.exports = require("@splunk/react-ui/Popover");
 
 /***/ }),
 
-/***/ 232:
+/***/ 233:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -155,11 +155,11 @@ var external_prop_types_ = __webpack_require__(1);
 var external_prop_types_default = /*#__PURE__*/__webpack_require__.n(external_prop_types_);
 
 // EXTERNAL MODULE: external "decimal.js-light"
-var external_decimal_js_light_ = __webpack_require__(153);
+var external_decimal_js_light_ = __webpack_require__(154);
 var external_decimal_js_light_default = /*#__PURE__*/__webpack_require__.n(external_decimal_js_light_);
 
 // EXTERNAL MODULE: external "lodash/has"
-var has_ = __webpack_require__(10);
+var has_ = __webpack_require__(11);
 var has_default = /*#__PURE__*/__webpack_require__.n(has_);
 
 // EXTERNAL MODULE: external "lodash/keys"
@@ -177,7 +177,7 @@ var keyboard_ = __webpack_require__(7);
 var themes_ = __webpack_require__(0);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/EventListener"
-var EventListener_ = __webpack_require__(15);
+var EventListener_ = __webpack_require__(16);
 var EventListener_default = /*#__PURE__*/__webpack_require__.n(EventListener_);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/Popover"

package/SlidingPanels.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 204);
+/******/ 	return __webpack_require__(__webpack_require__.s = 205);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -101,7 +101,7 @@ module.exports = require("prop-types");
 
 /***/ }),
 
-/***/ 11:
+/***/ 10:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -128,14 +128,14 @@ function updateReactRef(ref, current) {
 
 /***/ }),
 
-/***/ 154:
+/***/ 155:
 /***/ (function(module, exports) {
 
 module.exports = require("lodash/filter");
 
 /***/ }),
 
-/***/ 155:
+/***/ 156:
 /***/ (function(module, exports) {
 
 module.exports = require("lodash/values");
@@ -149,7 +149,7 @@ module.exports = require("react");
 
 /***/ }),
 
-/***/ 204:
+/***/ 205:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -169,7 +169,7 @@ var external_prop_types_ = __webpack_require__(1);
 var external_prop_types_default = /*#__PURE__*/__webpack_require__.n(external_prop_types_);
 
 // EXTERNAL MODULE: external "lodash/filter"
-var filter_ = __webpack_require__(154);
+var filter_ = __webpack_require__(155);
 var filter_default = /*#__PURE__*/__webpack_require__.n(filter_);
 
 // EXTERNAL MODULE: external "lodash/keys"
@@ -181,7 +181,7 @@ var omit_ = __webpack_require__(5);
 var omit_default = /*#__PURE__*/__webpack_require__.n(omit_);
 
 // EXTERNAL MODULE: external "lodash/values"
-var values_ = __webpack_require__(155);
+var values_ = __webpack_require__(156);
 var values_default = /*#__PURE__*/__webpack_require__.n(values_);
 
 // EXTERNAL MODULE: external "react-spring"
@@ -216,7 +216,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__(11);
+var updateReactRef = __webpack_require__(10);
 
 // 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/SplitButton.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 205);
+/******/ 	return __webpack_require__(__webpack_require__.s = 206);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -108,7 +108,7 @@ module.exports = require("@splunk/react-ui/Menu");
 
 /***/ }),
 
-/***/ 156:
+/***/ 157:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-icons/enterprise/ChevronDown");
@@ -129,7 +129,7 @@ module.exports = require("react");
 
 /***/ }),
 
-/***/ 205:
+/***/ 206:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -149,7 +149,7 @@ var external_prop_types_ = __webpack_require__(1);
 var external_prop_types_default = /*#__PURE__*/__webpack_require__.n(external_prop_types_);
 
 // EXTERNAL MODULE: external "@splunk/react-icons/enterprise/ChevronDown"
-var ChevronDown_ = __webpack_require__(156);
+var ChevronDown_ = __webpack_require__(157);
 var ChevronDown_default = /*#__PURE__*/__webpack_require__.n(ChevronDown_);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/Dropdown"

package/StaticContent.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 233);
+/******/ 	return __webpack_require__(__webpack_require__.s = 234);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -108,7 +108,7 @@ module.exports = require("react");
 
 /***/ }),
 
-/***/ 233:
+/***/ 234:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";

package/StepBar.js

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

package/Switch.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 206);
+/******/ 	return __webpack_require__(__webpack_require__.s = 207);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -122,7 +122,7 @@ module.exports = require("react");
 
 /***/ }),
 
-/***/ 206:
+/***/ 207:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";

package/TabBar.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 182);
+/******/ 	return __webpack_require__(__webpack_require__.s = 184);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -101,7 +101,7 @@ module.exports = require("prop-types");
 
 /***/ }),
 
-/***/ 11:
+/***/ 10:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -142,7 +142,7 @@ module.exports = require("@splunk/react-ui/ScreenReaderContent");
 
 /***/ }),
 
-/***/ 182:
+/***/ 184:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -194,9 +194,6 @@ var Styled = external_styled_components_default.a.div.withConfig({
   }
 }));
 
-// EXTERNAL MODULE: external "@splunk/ui-utils/id"
-var id_ = __webpack_require__(8);
-
 // EXTERNAL MODULE: external "@splunk/react-ui/Popover"
 var Popover_ = __webpack_require__(21);
 var Popover_default = /*#__PURE__*/__webpack_require__.n(Popover_);
@@ -205,6 +202,9 @@ var Popover_default = /*#__PURE__*/__webpack_require__.n(Popover_);
 var ScreenReaderContent_ = __webpack_require__(14);
 var ScreenReaderContent_default = /*#__PURE__*/__webpack_require__.n(ScreenReaderContent_);
 
+// EXTERNAL MODULE: external "@splunk/ui-utils/id"
+var id_ = __webpack_require__(8);
+
 // EXTERNAL MODULE: external "@splunk/react-ui/Clickable"
 var Clickable_ = __webpack_require__(12);
 var Clickable_default = /*#__PURE__*/__webpack_require__.n(Clickable_);
@@ -348,7 +348,7 @@ var maxCountValue = function maxCountValue(count, maxCount) {
   return count;
 };
 // EXTERNAL MODULE: ./src/utils/updateReactRef.ts
-var updateReactRef = __webpack_require__(11);
+var updateReactRef = __webpack_require__(10);
 
 // CONCATENATED MODULE: ./src/TabBar/Tab.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); }
@@ -429,6 +429,8 @@ var Tab_Tab = /*#__PURE__*/function (_Component) {
 
     _defineProperty(_assertThisInitialized(_this), "popoverId", void 0);
 
+    _defineProperty(_assertThisInitialized(_this), "ariaId", void 0);
+
     _defineProperty(_assertThisInitialized(_this), "handleMount", function (el) {
       _this.setState({
         anchor: el
@@ -484,6 +486,7 @@ var Tab_Tab = /*#__PURE__*/function (_Component) {
     });
 
     _this.popoverId = Object(id_["createDOMID"])('popover');
+    _this.ariaId = Object(id_["createDOMID"])('aria-id');
     _this.state = {
       open: false,
       anchor: null
@@ -524,55 +527,69 @@ var Tab_Tab = /*#__PURE__*/function (_Component) {
           layout = _this$context.layout,
           widthContext = _this$context.width;
       var style = otherProps.style;
-      var disabledValue = disabledContext || disabled;
+      var disabledValue = disabledContext || disabled || false;
       var iconSizeValue = iconSize || 'inline';
       var layoutValue = layout || 'horizontal';
       var styleValue = widthContext ? {
         width: widthContext
       } : style;
-      return /*#__PURE__*/external_react_default.a.createElement(StyledClickable, _extends({
-        "aria-controls": ariaControls,
-        "aria-selected": active,
-        "data-test": "tab",
-        "data-test-tab-id": tabId,
-        "data-test-popover-id": tooltip ? this.popoverId : undefined,
-        $layout: layoutValue,
-        $icon: icon && iconSizeValue !== 'inline' ? true : undefined,
-        disabled: disabledValue,
-        elementRef: this.handleMount,
-        style: styleValue
-      }, otherProps, {
-        onClick: this.handleClick,
-        onFocus: this.handleFocus,
-        onMouseEnter: this.handleTooltipOpen,
-        onBlur: this.handleTooltipClose,
-        onMouseLeave: this.handleTooltipClose,
-        role: "tab",
-        tabIndex: active ? undefined : -1 // @ts-expect-error - this is problematic, since the label
-        // prop is of type React.ReactNode, which means title
-        // can end up showing as "[object Object]"
-        ,
-        title: label,
-        to: to
-      }), /*#__PURE__*/external_react_default.a.createElement(StyledLabel, {
-        "data-test": "label",
-        $withUnderline: appearance === 'navigation'
-      }, icon && /*#__PURE__*/external_react_default.a.createElement(StyledIcon, {
-        $iconSize: iconSizeValue
-      }, icon), label, (count === 0 || count) && /*#__PURE__*/external_react_default.a.createElement(StyledCount, {
-        "data-test": "count",
-        disabled: disabledValue
-      }, maxCount ? maxCountValue(count, maxCount) : count)), /*#__PURE__*/external_react_default.a.createElement(StyledUnderline, {
-        $layout: layoutValue,
-        $withUnderline: appearance === 'navigation'
-      }), !disabled && tooltip && /*#__PURE__*/external_react_default.a.createElement(Popover_default.a, {
-        anchor: anchor,
-        appearance: "inverted",
-        closeReasons: [],
-        defaultPlacement: layoutValue === 'vertical' ? 'right' : 'above',
-        id: this.popoverId,
-        open: !!anchor && open
-      }, /*#__PURE__*/external_react_default.a.createElement(StyledTooltipContent, null, tooltip)), tooltip && /*#__PURE__*/external_react_default.a.createElement(ScreenReaderContent_default.a, null, tooltip));
+      return (
+        /*#__PURE__*/
+        // TODO: Fix the ts error: https://splunk.atlassian.net/browse/SUI-5569
+        // eslint-disable-next-line
+        // @ts-ignore-next-line
+        external_react_default.a.createElement(StyledClickable, _extends({
+          "aria-controls": ariaControls,
+          "aria-selected": active,
+          "aria-labelledby": this.ariaId,
+          "data-test": "tab",
+          "data-test-tab-id": tabId,
+          "data-test-popover-id": tooltip ? this.popoverId : undefined,
+          $layout: layoutValue,
+          $icon: icon && iconSizeValue !== 'inline' ? true : undefined,
+          disabled: disabledValue,
+          elementRef: this.handleMount,
+          style: styleValue
+        }, otherProps, {
+          onClick: this.handleClick,
+          onFocus: this.handleFocus,
+          onMouseEnter: this.handleTooltipOpen,
+          onBlur: this.handleTooltipClose,
+          onMouseLeave: this.handleTooltipClose,
+          role: "tab",
+          tabIndex: active ? undefined : -1,
+          to: to
+        }), /*#__PURE__*/external_react_default.a.createElement(StyledLabel, {
+          "data-test": "label",
+          $withUnderline: appearance === 'navigation'
+        }, icon && /*#__PURE__*/external_react_default.a.createElement(StyledIcon, {
+          $iconSize: iconSizeValue
+        }, icon), label, (count === 0 || count) && /*#__PURE__*/external_react_default.a.createElement(StyledCount, {
+          "data-test": "count",
+          disabled: disabledValue
+        }, maxCount ? maxCountValue(count, maxCount) : count)), /*#__PURE__*/external_react_default.a.createElement(StyledUnderline, {
+          $layout: layoutValue,
+          $withUnderline: appearance === 'navigation'
+        }), !disabled && tooltip && /*#__PURE__*/external_react_default.a.createElement(Popover_default.a, {
+          role: "tooltip",
+          anchor: anchor // override Popover's default animation to make it faster
+          // this keeps the overall amount of time the Tooltip is on-screen the same
+          // even with the increased default closeDelay to address SUI-5116
+          ,
+          animationConfig: {
+            tension: 400
+          },
+          appearance: "inverted",
+          closeReasons: ['offScreen', 'escapeKey'],
+          defaultPlacement: layoutValue === 'vertical' ? 'right' : 'above',
+          id: this.popoverId,
+          open: !!anchor && open,
+          align: "center"
+        }, /*#__PURE__*/external_react_default.a.createElement(StyledTooltipContent, null, tooltip)), tooltip && /*#__PURE__*/external_react_default.a.createElement(ScreenReaderContent_default.a, {
+          "aria-hidden": "true",
+          id: this.ariaId
+        }, tooltip))
+      );
     }
   }]);
 

package/TabLayout.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 207);
+/******/ 	return __webpack_require__(__webpack_require__.s = 208);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -101,14 +101,14 @@ module.exports = require("prop-types");
 
 /***/ }),
 
-/***/ 10:
+/***/ 11:
 /***/ (function(module, exports) {
 
 module.exports = require("lodash/has");
 
 /***/ }),
 
-/***/ 120:
+/***/ 121:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/TabBar");
@@ -122,7 +122,7 @@ module.exports = require("react");
 
 /***/ }),
 
-/***/ 207:
+/***/ 208:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -142,7 +142,7 @@ var external_prop_types_ = __webpack_require__(1);
 var external_prop_types_default = /*#__PURE__*/__webpack_require__.n(external_prop_types_);
 
 // EXTERNAL MODULE: external "lodash/has"
-var has_ = __webpack_require__(10);
+var has_ = __webpack_require__(11);
 var has_default = /*#__PURE__*/__webpack_require__.n(has_);
 
 // EXTERNAL MODULE: external "lodash/keys"
@@ -157,7 +157,7 @@ var omit_default = /*#__PURE__*/__webpack_require__.n(omit_);
 var id_ = __webpack_require__(8);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/TabBar"
-var TabBar_ = __webpack_require__(120);
+var TabBar_ = __webpack_require__(121);
 var TabBar_default = /*#__PURE__*/__webpack_require__.n(TabBar_);
 
 // EXTERNAL MODULE: external "styled-components"