@splunk/react-ui 4.4.0 → 4.5.1

package/TabBar.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 126);
+/******/ 	return __webpack_require__(__webpack_require__.s = 125);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -109,13 +109,6 @@ module.exports = require("@splunk/ui-utils/id");
 /***/ }),
 
 /***/ 11:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/react-ui/Clickable");
-
-/***/ }),
-
-/***/ 12:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -142,7 +135,14 @@ function updateReactRef(ref, current) {
 
 /***/ }),
 
-/***/ 126:
+/***/ 12:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/react-ui/Clickable");
+
+/***/ }),
+
+/***/ 125:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -198,15 +198,15 @@ 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__(17);
+var Popover_ = __webpack_require__(16);
 var Popover_default = /*#__PURE__*/__webpack_require__.n(Popover_);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/ScreenReaderContent"
-var ScreenReaderContent_ = __webpack_require__(14);
+var ScreenReaderContent_ = __webpack_require__(15);
 var ScreenReaderContent_default = /*#__PURE__*/__webpack_require__.n(ScreenReaderContent_);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/Clickable"
-var Clickable_ = __webpack_require__(11);
+var Clickable_ = __webpack_require__(12);
 var Clickable_default = /*#__PURE__*/__webpack_require__.n(Clickable_);
 
 // CONCATENATED MODULE: ./src/TabBar/TabStyles.ts
@@ -248,7 +248,7 @@ var StyledClickable = external_styled_components_default()(Clickable_default.a).
   enterprise: 'normal',
   prisma: themes_["variables"].fontWeightSemiBold
 }), Object(themes_["pick"])({
-  prisma: Object(external_styled_components_["css"])(["&::after{display:block;content:attr(title);font-weight:", ";height:0;color:transparent;overflow:hidden;visibility:hidden;}"], themes_["variables"].fontWeightSemiBold)
+  prisma: Object(external_styled_components_["css"])(["&::after{display:block;content:attr(title);font-weight:", ";height:0;color:transparent;overflow:hidden;visibility:hidden;}"], themes_["variables"].fontWeightBold)
 }), Object(themes_["pick"])({
   prisma: Object(external_styled_components_["css"])(["color:", ";"], themes_["variables"].contentColorActive)
 }), themes_["variables"].focusShadowInset, Object(themes_["pick"])({
@@ -342,13 +342,22 @@ var StyledTooltipContent = external_styled_components_default.a.div.withConfig({
 })(["padding:8px;font-size:", ";"], themes_["variables"].fontSizeSmall);
 
 // EXTERNAL MODULE: ./src/utils/updateReactRef.ts
-var updateReactRef = __webpack_require__(12);
+var updateReactRef = __webpack_require__(11);
 
+// CONCATENATED MODULE: ./src/TabBar/TabBarContext.tsx
+
+var TabBarContext = /*#__PURE__*/Object(external_react_["createContext"])({});
+TabBarContext.displayName = 'TabBar';
+/* harmony default export */ var TabBar_TabBarContext = (TabBarContext);
 // 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); }
 
 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); }
 
+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; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
@@ -382,31 +391,17 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
 
 
+
 var propTypes = {
   /** @private. Is the tab active. */
   active: external_prop_types_default.a.bool,
-
-  /** @private. Setting this prop to 'context' creates an appearance without an underline. */
-  appearance: external_prop_types_default.a.oneOf(['navigation', 'context']),
   ariaControls: external_prop_types_default.a.string,
   count: external_prop_types_default.a.number,
   disabled: external_prop_types_default.a.bool,
   elementRef: external_prop_types_default.a.oneOfType([external_prop_types_default.a.func, external_prop_types_default.a.object]),
   icon: external_prop_types_default.a.node,
-
-  /** @private. Size of icon. */
-  iconSize: external_prop_types_default.a.oneOf(['inline', 'small', 'large']),
   id: external_prop_types_default.a.string,
   label: external_prop_types_default.a.oneOfType([external_prop_types_default.a.string, external_prop_types_default.a.element]),
-
-  /** @private. The layout of tabs */
-  layout: external_prop_types_default.a.oneOf(['horizontal', 'vertical']),
-
-  /** @private. Callback function when activated */
-  onClick: external_prop_types_default.a.func,
-
-  /** @private. Callback function when focused */
-  onFocus: external_prop_types_default.a.func,
   tabId: external_prop_types_default.a.string,
 
   /** @private. The internal key of the tab */
@@ -415,10 +410,7 @@ var propTypes = {
   tooltip: external_prop_types_default.a.node
 };
 var defaultProps = {
-  active: false,
-  layout: 'horizontal',
-  iconSize: 'inline',
-  disabled: false
+  active: false
 };
 
 var Tab_Tab = /*#__PURE__*/function (_Component) {
@@ -459,10 +451,10 @@ 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,
-          to = _this$props.to; // preserve the previous behaviour from 2ad8e7eaf47 to avoid firing unnecessary onChange events
+          to = _this$props.to;
+      var onClick = _this.context.onClick; // 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) {
@@ -481,9 +473,9 @@ var Tab_Tab = /*#__PURE__*/function (_Component) {
       _this.handleTooltipOpen();
 
       var _this$props2 = _this.props,
-          onFocus = _this$props2.onFocus,
           tabId = _this$props2.tabId,
           tabKey = _this$props2.tabKey;
+      var onFocus = _this.context.onFocus;
       onFocus === null || onFocus === void 0 ? void 0 : onFocus(e, {
         tabId: tabId,
         tabKey: tabKey
@@ -510,32 +502,45 @@ var Tab_Tab = /*#__PURE__*/function (_Component) {
     value: function render() {
       var _this$props3 = this.props,
           active = _this$props3.active,
-          appearance = _this$props3.appearance,
           ariaControls = _this$props3.ariaControls,
           count = _this$props3.count,
           disabled = _this$props3.disabled,
           icon = _this$props3.icon,
-          iconSize = _this$props3.iconSize,
           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", "to", "tooltip"]);
+          otherProps = _objectWithoutProperties(_this$props3, ["active", "ariaControls", "count", "disabled", "icon", "label", "tabId", "to", "tooltip"]);
 
       var _this$state = this.state,
           anchor = _this$state.anchor,
           open = _this$state.open;
+      var _this$context = this.context,
+          appearance = _this$context.appearance,
+          disabledContext = _this$context.disabled,
+          iconSize = _this$context.iconSize,
+          layout = _this$context.layout,
+          widthContext = _this$context.width;
+
+      var style = _objectSpread({}, otherProps);
+
+      var disabledValue = disabledContext || disabled;
+      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: layout,
-        $icon: icon && iconSize !== 'inline' ? true : undefined,
-        disabled: disabled,
-        elementRef: this.handleMount
+        $layout: layoutValue,
+        $icon: icon && iconSizeValue !== 'inline' ? true : undefined,
+        disabled: disabledValue,
+        elementRef: this.handleMount,
+        style: styleValue
       }, otherProps, {
         onClick: this.handleClick,
         onFocus: this.handleFocus,
@@ -553,18 +558,18 @@ var Tab_Tab = /*#__PURE__*/function (_Component) {
         "data-test": "label",
         $withUnderline: appearance === 'navigation'
       }, icon && /*#__PURE__*/external_react_default.a.createElement(StyledIcon, {
-        $iconSize: iconSize
+        $iconSize: iconSizeValue
       }, icon), label, (count === 0 || count) && /*#__PURE__*/external_react_default.a.createElement(StyledCount, {
         "data-test": "count",
-        disabled: disabled
+        disabled: disabledValue
       }, count)), /*#__PURE__*/external_react_default.a.createElement(StyledUnderline, {
-        $layout: layout,
+        $layout: layoutValue,
         $withUnderline: appearance === 'navigation'
       }), !disabled && tooltip && /*#__PURE__*/external_react_default.a.createElement(Popover_default.a, {
         anchor: anchor,
         appearance: "inverted",
         closeReasons: [],
-        defaultPlacement: layout === 'vertical' ? 'right' : 'above',
+        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));
@@ -578,6 +583,8 @@ _defineProperty(Tab_Tab, "propTypes", propTypes);
 
 _defineProperty(Tab_Tab, "defaultProps", defaultProps);
 
+_defineProperty(Tab_Tab, "contextType", TabBar_TabBarContext);
+
 /* harmony default export */ var TabBar_Tab = (Tab_Tab);
 // CONCATENATED MODULE: ./src/TabBar/TabBar.tsx
 function TabBar_extends() { TabBar_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 TabBar_extends.apply(this, arguments); }
@@ -591,6 +598,7 @@ function TabBar_objectWithoutPropertiesLoose(source, excluded) { if (source == n
 
 
 
+
 var minTabWidth = 50;
 /** @public */
 
@@ -627,7 +635,7 @@ function TabBar(_ref) {
       otherProps = TabBar_objectWithoutProperties(_ref, ["activeTabId", "autoActivate", "appearance", "children", "disabled", "elementRef", "iconSize", "layout", "onChange", "tabWidth"]);
 
   // @docs-props-type TabBarPropsBase
-  var focusedTabKey = Object(external_react_["useRef"])(0);
+  var focusedTabIndex = Object(external_react_["useRef"])(0);
   var tabRefs = [];
   var nextTabKey = Object(external_react_["useMemo"])(function () {
     return layout === 'vertical' ? 'down' : 'right';
@@ -640,7 +648,7 @@ function TabBar(_ref) {
     var tabKey = data.tabKey;
 
     if (tabKey != null) {
-      focusedTabKey.current = tabKey;
+      focusedTabIndex.current = tabKey;
     }
 
     if (autoActivate) {
@@ -667,21 +675,65 @@ function TabBar(_ref) {
     tabRefs.push(ref);
     var childProps = {
       active: activeTabId === child.props.tabId,
-      appearance: appearance,
-      disabled: disabled || child.props.disabled,
-      iconSize: iconSize,
-      layout: layout,
-      onClick: tabOnClick,
-      onFocus: tabOnFocus,
-      ref: ref,
-      style: tabWidth && tabWidth > minTabWidth ? {
-        width: tabWidth
-      } : child.props.style,
-      tabKey: tabKeyCounter
+      tabKey: tabKeyCounter,
+      ref: ref
     };
     tabKeyCounter += 1;
     return /*#__PURE__*/Object(external_react_["cloneElement"])(child, childProps);
   });
+  var widthContext = tabWidth && tabWidth > minTabWidth ? tabWidth : null;
+
+  var handleOnKeyDown = function handleOnKeyDown(e) {
+    var key = Object(keyboard_["keycode"])(e.nativeEvent);
+    var tabToFocusRef;
+
+    function checkNextTab(nextTabIndex) {
+      for (var i = 0; i < tabRefs.length; i += 1) {
+        var _tabRefs$pointer$curr;
+
+        var pointer = (i + nextTabIndex) % tabRefs.length;
+
+        if (((_tabRefs$pointer$curr = tabRefs[pointer].current) === null || _tabRefs$pointer$curr === void 0 ? void 0 : _tabRefs$pointer$curr.props.disabled) !== true) {
+          return tabRefs[pointer];
+        }
+      }
+
+      return tabRefs[focusedTabIndex.current];
+    }
+
+    function checkPrevTab(prevTabIndex) {
+      for (var i = tabRefs.length; i > 0; i -= 1) {
+        var _tabRefs$pointer$curr2;
+
+        var pointer = (i + prevTabIndex) % tabRefs.length;
+
+        if (((_tabRefs$pointer$curr2 = tabRefs[pointer].current) === null || _tabRefs$pointer$curr2 === void 0 ? void 0 : _tabRefs$pointer$curr2.props.disabled) !== true) {
+          return tabRefs[pointer];
+        }
+      }
+
+      return tabRefs[focusedTabIndex.current];
+    }
+
+    if (key === nextTabKey) {
+      tabToFocusRef = checkNextTab(focusedTabIndex.current + 1);
+    } else if (key === previousTabKey) {
+      tabToFocusRef = checkPrevTab(focusedTabIndex.current - 1);
+    } else if (key === 'home') {
+      // eslint-disable-next-line prefer-destructuring
+      tabToFocusRef = checkNextTab(0);
+    } else if (key === 'end') {
+      tabToFocusRef = checkNextTab(tabRefs.length - 1);
+    }
+
+    if (tabToFocusRef != null) {
+      var _tabToFocusRef$curren;
+
+      (_tabToFocusRef$curren = tabToFocusRef.current) === null || _tabToFocusRef$curren === void 0 ? void 0 : _tabToFocusRef$curren.focus();
+      e.preventDefault();
+    }
+  };
+
   return /*#__PURE__*/external_react_default.a.createElement(Styled, TabBar_extends({
     "data-tab-layout": layout,
     "data-test-active-tab-id": activeTabId,
@@ -690,29 +742,18 @@ function TabBar(_ref) {
     ref: elementRef,
     $layout: layout,
     $withUnderline: appearance === 'navigation',
-    onKeyDown: function onKeyDown(e) {
-      var key = Object(keyboard_["keycode"])(e.nativeEvent);
-      var tabToFocusRef;
-
-      if (key === nextTabKey) {
-        tabToFocusRef = tabRefs[focusedTabKey.current + 1] || tabRefs[0];
-      } else if (key === previousTabKey) {
-        tabToFocusRef = tabRefs[focusedTabKey.current - 1] || tabRefs[tabRefs.length - 1];
-      } else if (key === 'home') {
-        // eslint-disable-next-line prefer-destructuring
-        tabToFocusRef = tabRefs[0];
-      } else if (key === 'end') {
-        tabToFocusRef = tabRefs[tabRefs.length - 1];
-      }
-
-      if (tabToFocusRef != null) {
-        var _tabToFocusRef$curren;
-
-        (_tabToFocusRef$curren = tabToFocusRef.current) === null || _tabToFocusRef$curren === void 0 ? void 0 : _tabToFocusRef$curren.focus();
-        e.preventDefault();
-      }
+    onKeyDown: handleOnKeyDown
+  }, otherProps), /*#__PURE__*/external_react_default.a.createElement(TabBar_TabBarContext.Provider, {
+    value: {
+      appearance: appearance,
+      disabled: disabled,
+      iconSize: iconSize,
+      layout: layout,
+      onClick: tabOnClick,
+      onFocus: tabOnFocus,
+      width: widthContext
     }
-  }, otherProps), clonedChildren);
+  }, clonedChildren));
 }
 
 TabBar.propTypes = TabBar_propTypes;
@@ -725,14 +766,14 @@ TabBar.Tab = TabBar_Tab;
 
 /***/ }),
 
-/***/ 14:
+/***/ 15:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/ScreenReaderContent");
 
 /***/ }),
 
-/***/ 17:
+/***/ 16:
 /***/ (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 = 137);
+/******/ 	return __webpack_require__(__webpack_require__.s = 141);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -108,7 +108,7 @@ module.exports = require("@splunk/ui-utils/id");
 
 /***/ }),
 
-/***/ 137:
+/***/ 141:
 /***/ (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__(71);
+var TabBar_ = __webpack_require__(73);
 var TabBar_default = /*#__PURE__*/__webpack_require__.n(TabBar_);
 
 // EXTERNAL MODULE: external "styled-components"
@@ -337,7 +337,6 @@ var TabLayout_TabLayout = /*#__PURE__*/function (_Component) {
         }
 
         return /*#__PURE__*/external_react_default.a.createElement(TabBar_default.a.Tab, {
-          appearance: _this2.props.appearance,
           icon: props.icon,
           key: props.panelId,
           label: props.label,
@@ -406,7 +405,7 @@ module.exports = require("lodash");
 
 /***/ }),
 
-/***/ 71:
+/***/ 73:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/TabBar");