@splunk/react-ui 4.1.0 → 4.4.1

package/TabBar.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 122);
+/******/ 	return __webpack_require__(__webpack_require__.s = 123);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -142,7 +142,7 @@ function updateReactRef(ref, current) {
 
 /***/ }),
 
-/***/ 122:
+/***/ 123:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -198,7 +198,7 @@ var Styled = external_styled_components_default.a.div.withConfig({
 var id_ = __webpack_require__(10);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/Popover"
-var Popover_ = __webpack_require__(18);
+var Popover_ = __webpack_require__(17);
 var Popover_default = /*#__PURE__*/__webpack_require__.n(Popover_);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/ScreenReaderContent"
@@ -411,6 +411,7 @@ var propTypes = {
 
   /** @private. The internal key of the tab */
   tabKey: external_prop_types_default.a.number,
+  to: external_prop_types_default.a.string,
   tooltip: external_prop_types_default.a.node
 };
 var defaultProps = {
@@ -457,14 +458,23 @@ var Tab_Tab = /*#__PURE__*/function (_Component) {
 
     _defineProperty(_assertThisInitialized(_this), "handleClick", function (e) {
       var _this$props = _this.props,
+          active = _this$props.active,
           onClick = _this$props.onClick,
           tabId = _this$props.tabId,
-          tabKey = _this$props.tabKey;
-      onClick === null || onClick === void 0 ? void 0 : onClick(e, {
-        tabId: tabId,
-        tabKey: tabKey
-      });
-      e.preventDefault();
+          tabKey = _this$props.tabKey,
+          to = _this$props.to; // preserve the previous behaviour from 2ad8e7eaf47 to avoid firing unnecessary onChange events
+      // while preventing the "to" prop from incorrectly triggering <Clickable>'s providedOnClick on the active tab
+
+      if (!active) {
+        onClick === null || onClick === void 0 ? void 0 : onClick(e, {
+          tabId: tabId,
+          tabKey: tabKey
+        });
+      }
+
+      if (to == null || to != null && active) {
+        e.preventDefault();
+      }
     });
 
     _defineProperty(_assertThisInitialized(_this), "handleFocus", function (e) {
@@ -509,8 +519,9 @@ var Tab_Tab = /*#__PURE__*/function (_Component) {
           label = _this$props3.label,
           layout = _this$props3.layout,
           tabId = _this$props3.tabId,
+          to = _this$props3.to,
           tooltip = _this$props3.tooltip,
-          otherProps = _objectWithoutProperties(_this$props3, ["active", "appearance", "ariaControls", "count", "disabled", "icon", "iconSize", "label", "layout", "tabId", "tooltip"]);
+          otherProps = _objectWithoutProperties(_this$props3, ["active", "appearance", "ariaControls", "count", "disabled", "icon", "iconSize", "label", "layout", "tabId", "to", "tooltip"]);
 
       var _this$state = this.state,
           anchor = _this$state.anchor,
@@ -526,7 +537,7 @@ var Tab_Tab = /*#__PURE__*/function (_Component) {
         disabled: disabled,
         elementRef: this.handleMount
       }, otherProps, {
-        onClick: active ? undefined : this.handleClick,
+        onClick: this.handleClick,
         onFocus: this.handleFocus,
         onMouseEnter: this.handleTooltipOpen,
         onBlur: this.handleTooltipClose,
@@ -536,7 +547,8 @@ var Tab_Tab = /*#__PURE__*/function (_Component) {
         // prop is of type React.ReactNode, which means title
         // can end up showing as "[object Object]"
         ,
-        title: label
+        title: label,
+        to: to
       }), /*#__PURE__*/external_react_default.a.createElement(StyledLabel, {
         "data-test": "label",
         $withUnderline: appearance === 'navigation'
@@ -623,28 +635,36 @@ function TabBar(_ref) {
   var previousTabKey = Object(external_react_["useMemo"])(function () {
     return layout === 'vertical' ? 'up' : 'left';
   }, [layout]);
-  var tabKeyCounter = 0;
-  var clonedChildren = external_react_["Children"].toArray(children).filter(external_react_["isValidElement"]).map(function (child) {
-    var tabOnClick = function tabOnClick(e, data) {
+
+  var tabOnFocus = function tabOnFocus(e, data) {
+    var tabKey = data.tabKey;
+
+    if (tabKey != null) {
+      focusedTabKey.current = tabKey;
+    }
+
+    if (autoActivate) {
       onChange === null || onChange === void 0 ? void 0 : onChange(e, {
         selectedTabId: data.tabId
       });
-    };
-
-    var tabOnFocus = function tabOnFocus(e, data) {
-      var tabKey = data.tabKey;
+    }
+  };
 
-      if (tabKey != null) {
-        focusedTabKey.current = tabKey;
-      }
+  var tabOnClick = function tabOnClick(e, data) {
+    onChange === null || onChange === void 0 ? void 0 : onChange(e, {
+      selectedTabId: data.tabId
+    });
+  };
 
-      if (autoActivate) {
-        onChange === null || onChange === void 0 ? void 0 : onChange(e, {
-          selectedTabId: data.tabId
-        });
-      }
-    };
+  var tabKeyCounter = 0;
+  var clonedChildren = external_react_["Children"].toArray(children).filter(external_react_["isValidElement"]).map(function (child) {
+    // <TabBar> allows non-<Tab> children, pass them through without any modification
+    if (typeof child.type === 'string' || child.type.name !== TabBar_Tab.name) {
+      return child;
+    }
 
+    var ref = /*#__PURE__*/external_react_default.a.createRef();
+    tabRefs.push(ref);
     var childProps = {
       active: activeTabId === child.props.tabId,
       appearance: appearance,
@@ -653,19 +673,13 @@ function TabBar(_ref) {
       layout: layout,
       onClick: tabOnClick,
       onFocus: tabOnFocus,
+      ref: ref,
       style: tabWidth && tabWidth > minTabWidth ? {
         width: tabWidth
-      } : child.props.style
-    }; // <TabBar> allows non-<Tab> children, so this makes sure that the tabKey is only applied to actual tabs
-
-    if (typeof child.type !== 'string' && child.type.name === TabBar_Tab.name) {
-      var ref = /*#__PURE__*/external_react_default.a.createRef();
-      childProps.ref = ref;
-      tabRefs.push(ref);
-      childProps.tabKey = tabKeyCounter;
-      tabKeyCounter += 1;
-    }
-
+      } : child.props.style,
+      tabKey: tabKeyCounter
+    };
+    tabKeyCounter += 1;
     return /*#__PURE__*/Object(external_react_["cloneElement"])(child, childProps);
   });
   return /*#__PURE__*/external_react_default.a.createElement(Styled, TabBar_extends({
@@ -718,7 +732,7 @@ module.exports = require("@splunk/react-ui/ScreenReaderContent");
 
 /***/ }),
 
-/***/ 18:
+/***/ 17:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/Popover");

package/TabLayout.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 130);
+/******/ 	return __webpack_require__(__webpack_require__.s = 128);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -108,7 +108,7 @@ module.exports = require("@splunk/ui-utils/id");
 
 /***/ }),
 
-/***/ 130:
+/***/ 128:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -134,7 +134,7 @@ var external_lodash_ = __webpack_require__(4);
 var id_ = __webpack_require__(10);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/TabBar"
-var TabBar_ = __webpack_require__(69);
+var TabBar_ = __webpack_require__(71);
 var TabBar_default = /*#__PURE__*/__webpack_require__.n(TabBar_);
 
 // EXTERNAL MODULE: external "styled-components"
@@ -406,7 +406,7 @@ module.exports = require("lodash");
 
 /***/ }),
 
-/***/ 69:
+/***/ 71:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/TabBar");