@splunk/react-ui 4.16.3 → 4.17.1

package/TabBar.js

@@ -101,7 +101,7 @@ module.exports = require("prop-types");
 
 /***/ }),
 
-/***/ 12:
+/***/ 11:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -128,21 +128,14 @@ function updateReactRef(ref, current) {
 
 /***/ }),
 
-/***/ 13:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/ui-utils/id");
-
-/***/ }),
-
-/***/ 14:
+/***/ 12:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/Clickable");
 
 /***/ }),
 
-/***/ 16:
+/***/ 14:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/ScreenReaderContent");
@@ -169,7 +162,7 @@ var external_prop_types_ = __webpack_require__(1);
 var external_prop_types_default = /*#__PURE__*/__webpack_require__.n(external_prop_types_);
 
 // EXTERNAL MODULE: external "@splunk/ui-utils/keyboard"
-var keyboard_ = __webpack_require__(9);
+var keyboard_ = __webpack_require__(7);
 
 // EXTERNAL MODULE: external "styled-components"
 var external_styled_components_ = __webpack_require__(3);
@@ -197,23 +190,23 @@ var Styled = external_styled_components_default.a.div.withConfig({
   },
   vertical: {
     enterprise: Object(external_styled_components_["css"])(["display:inline-block;&::before{border-right-width:1px;}"]),
-    prisma: Object(external_styled_components_["css"])(["&::before{border-bottom-width:1px;}"])
+    prisma: Object(external_styled_components_["css"])(["display:inline-block;&::before{border-right-width:1px;}"])
   }
 }));
 
 // EXTERNAL MODULE: external "@splunk/ui-utils/id"
-var id_ = __webpack_require__(13);
+var id_ = __webpack_require__(8);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/Popover"
-var Popover_ = __webpack_require__(23);
+var Popover_ = __webpack_require__(21);
 var Popover_default = /*#__PURE__*/__webpack_require__.n(Popover_);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/ScreenReaderContent"
-var ScreenReaderContent_ = __webpack_require__(16);
+var ScreenReaderContent_ = __webpack_require__(14);
 var ScreenReaderContent_default = /*#__PURE__*/__webpack_require__.n(ScreenReaderContent_);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/Clickable"
-var Clickable_ = __webpack_require__(14);
+var Clickable_ = __webpack_require__(12);
 var Clickable_default = /*#__PURE__*/__webpack_require__.n(Clickable_);
 
 // CONCATENATED MODULE: ./src/TabBar/TabStyles.ts
@@ -239,13 +232,9 @@ var StyledClickable = external_styled_components_default()(Clickable_default.a).
       var $icon = _ref.$icon;
       return $icon && Object(external_styled_components_["css"])(["text-align:center;"]);
     }),
-    // prisma falls back to horizontal layout
-    prisma: Object(external_styled_components_["css"])(["padding:", ";margin-bottom:1px;"], Object(themes_["pick"])({
-      enterprise: '3px 20px',
-      prisma: {
-        comfortable: '0 20px',
-        compact: '0 16px'
-      }
+    prisma: Object(external_styled_components_["css"])(["width:100%;right:1px;padding:", ";"], Object(themes_["pick"])({
+      comfortable: '0 20px',
+      compact: '0 16px'
     }))
   }
 }), Object(themes_["pick"])({
@@ -264,7 +253,7 @@ var StyledClickable = external_styled_components_default()(Clickable_default.a).
 var StyledUnderline = external_styled_components_default.a.div.withConfig({
   displayName: "TabStyles__StyledUnderline",
   componentId: "sc-1ry8mzj-1"
-})(["position:absolute;", " ", ";[aria-selected='true'] > &{background-color:", ";", ";}", ":hover:not([disabled]) > &{", ";}"], Object(themes_["pick"])({
+})(["position:absolute;", " ", ";[aria-selected='true'] > &&{background-color:", ";", ";}", ":hover:not([disabled]) > &&{", ";}"], Object(themes_["pick"])({
   enterprise: Object(external_styled_components_["css"])(["background:", ";"], themes_["variables"].borderLightColor)
 }), Object(themes_["pickVariant"])('$layout', {
   horizontal: Object(external_styled_components_["css"])(["height:0;box-sizing:border-box;width:", ";", " transition:height 0.2s;"], Object(themes_["pick"])({
@@ -278,11 +267,7 @@ var StyledUnderline = external_styled_components_default.a.div.withConfig({
   })),
   vertical: {
     enterprise: Object(external_styled_components_["css"])(["width:0;height:calc(100% - 10px * 2);top:10px;right:-1px;transition:width 0.2s;"]),
-    // prisma falls back to horizontal layout
-    prisma: Object(external_styled_components_["css"])(["height:0;box-sizing:border-box;width:", ";transition:height 0.2s;"], Object(themes_["pick"])({
-      comfortable: Object(external_styled_components_["css"])(["calc(100% - 20px * 2)"]),
-      compact: Object(external_styled_components_["css"])(["calc(100% - 16px * 2)"])
-    }))
+    prisma: Object(external_styled_components_["css"])(["width:1px;height:calc(100% - 10px * 2);top:10px;right:-1px;transition:width 0.2s;box-sizing:border-box;"])
   }
 }), Object(themes_["pick"])({
   enterprise: themes_["variables"].accentColor,
@@ -297,8 +282,7 @@ var StyledUnderline = external_styled_components_default.a.div.withConfig({
   },
   vertical: {
     enterprise: Object(external_styled_components_["css"])(["width:3px;"]),
-    // prisma falls back to horizontal $layout
-    prisma: Object(external_styled_components_["css"])(["height:1px;"])
+    prisma: Object(external_styled_components_["css"])(["width:1px;"])
   }
 }), StyledClickable, Object(themes_["pickVariant"])('$layout', {
   horizontal: {
@@ -334,37 +318,43 @@ var StyledLabel = external_styled_components_default.a.div.withConfig({
 var StyledCount = external_styled_components_default.a.div.withConfig({
   displayName: "TabStyles__StyledCount",
   componentId: "sc-1ry8mzj-4"
-})(["", " display:inline-block;background:", ";border-radius:18px;color:", ";font-size:", ";line-height:10px;padding:4px 6px;margin-left:", ";", " &[disabled]{background:", ";color:", ";}"], themes_["mixins"].reset('inlne-block'), themes_["variables"].interactiveColorBackground, themes_["variables"].contentColorDefault, Object(themes_["pick"])({
+})(["", " display:inline-block;border-radius:18px;color:", ";font-size:", ";line-height:10px;padding:4px 6px;margin-left:", ";", " &[disabled]{background:", ";color:", ";}"], themes_["mixins"].reset('inlne-block'), themes_["variables"].contentColorDefault, Object(themes_["pick"])({
   enterprise: 'inherit',
   prisma: '10px'
 }), Object(themes_["pick"])({
   enterprise: '0',
   prisma: '8px'
 }), Object(themes_["pick"])({
-  enterprise: Object(external_styled_components_["css"])(["&::before{content:'(';}&::after{content:')';}"])
+  enterprise: Object(external_styled_components_["css"])(["&::before{content:'(';}&::after{content:')';}"]),
+  prisma: Object(external_styled_components_["css"])(["background:", ";"], themes_["variables"].neutral100)
 }), themes_["variables"].interactiveColorBackgroundDisabled, themes_["variables"].contentColorDisabled);
 var StyledTooltipContent = external_styled_components_default.a.div.withConfig({
   displayName: "TabStyles__StyledTooltipContent",
   componentId: "sc-1ry8mzj-5"
 })(["padding:8px;font-size:", ";"], themes_["variables"].fontSizeSmall);
 
-// EXTERNAL MODULE: ./src/utils/updateReactRef.ts
-var updateReactRef = __webpack_require__(12);
-
 // 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/utils/getCountValue.ts
+// A utility for max count
+var maxCountValue = function maxCountValue(count, maxCount) {
+  if (count > maxCount) {
+    return "".concat(maxCount, "+");
+  }
+
+  return count;
+};
+// EXTERNAL MODULE: ./src/utils/updateReactRef.ts
+var updateReactRef = __webpack_require__(11);
+
 // 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; }
@@ -399,6 +389,7 @@ 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,
@@ -409,6 +400,9 @@ var propTypes = {
   icon: external_prop_types_default.a.node,
   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 Maximum count number in tab label */
+  maxCount: external_prop_types_default.a.number,
   tabId: external_prop_types_default.a.string,
 
   /** @private. The internal key of the tab */
@@ -515,9 +509,10 @@ var Tab_Tab = /*#__PURE__*/function (_Component) {
           icon = _this$props3.icon,
           label = _this$props3.label,
           tabId = _this$props3.tabId,
+          maxCount = _this$props3.maxCount,
           to = _this$props3.to,
           tooltip = _this$props3.tooltip,
-          otherProps = _objectWithoutProperties(_this$props3, ["active", "ariaControls", "count", "disabled", "icon", "label", "tabId", "to", "tooltip"]);
+          otherProps = _objectWithoutProperties(_this$props3, ["active", "ariaControls", "count", "disabled", "icon", "label", "tabId", "maxCount", "to", "tooltip"]);
 
       var _this$state = this.state,
           anchor = _this$state.anchor,
@@ -528,9 +523,7 @@ var Tab_Tab = /*#__PURE__*/function (_Component) {
           iconSize = _this$context.iconSize,
           layout = _this$context.layout,
           widthContext = _this$context.width;
-
-      var style = _objectSpread({}, otherProps);
-
+      var style = otherProps.style;
       var disabledValue = disabledContext || disabled;
       var iconSizeValue = iconSize || 'inline';
       var layoutValue = layout || 'horizontal';
@@ -569,7 +562,7 @@ var Tab_Tab = /*#__PURE__*/function (_Component) {
       }, icon), label, (count === 0 || count) && /*#__PURE__*/external_react_default.a.createElement(StyledCount, {
         "data-test": "count",
         disabled: disabledValue
-      }, count)), /*#__PURE__*/external_react_default.a.createElement(StyledUnderline, {
+      }, 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, {
@@ -755,7 +748,7 @@ module.exports = require("react");
 
 /***/ }),
 
-/***/ 23:
+/***/ 21:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/Popover");
@@ -808,11 +801,18 @@ function getPrevListItem(refs, currentIndex, prevIndex) {
 
 /***/ }),
 
-/***/ 9:
+/***/ 7:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/ui-utils/keyboard");
 
+/***/ }),
+
+/***/ 8:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/ui-utils/id");
+
 /***/ })
 
 /******/ });

package/TabLayout.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 199);
+/******/ 	return __webpack_require__(__webpack_require__.s = 207);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -104,13 +104,6 @@ module.exports = require("prop-types");
 /***/ 10:
 /***/ (function(module, exports) {
 
-module.exports = require("lodash/keys");
-
-/***/ }),
-
-/***/ 11:
-/***/ (function(module, exports) {
-
 module.exports = require("lodash/has");
 
 /***/ }),
@@ -122,14 +115,14 @@ module.exports = require("@splunk/react-ui/TabBar");
 
 /***/ }),
 
-/***/ 13:
+/***/ 2:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/ui-utils/id");
+module.exports = require("react");
 
 /***/ }),
 
-/***/ 199:
+/***/ 207:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -149,11 +142,11 @@ 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__(11);
+var has_ = __webpack_require__(10);
 var has_default = /*#__PURE__*/__webpack_require__.n(has_);
 
 // EXTERNAL MODULE: external "lodash/keys"
-var keys_ = __webpack_require__(10);
+var keys_ = __webpack_require__(9);
 var keys_default = /*#__PURE__*/__webpack_require__.n(keys_);
 
 // EXTERNAL MODULE: external "lodash/omit"
@@ -161,7 +154,7 @@ var omit_ = __webpack_require__(5);
 var omit_default = /*#__PURE__*/__webpack_require__.n(omit_);
 
 // EXTERNAL MODULE: external "@splunk/ui-utils/id"
-var id_ = __webpack_require__(13);
+var id_ = __webpack_require__(8);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/TabBar"
 var TabBar_ = __webpack_require__(120);
@@ -184,12 +177,12 @@ var StyledPanel = external_styled_components_default.a.div.withConfig({
 var Styled = external_styled_components_default.a.div.withConfig({
   displayName: "TabLayoutStyles__Styled",
   componentId: "lf0quy-1"
-})(["text-align:center;margin-top:", ";&[data-flex='true']{", "}"], themes_["variables"].spacingLarge, Object(themes_["pick"])({
-  enterprise: Object(external_styled_components_["css"])(["display:flex;> ", "{width:100%;}> [role='tablist']{flex:0 0 auto;}"],
+})(["text-align:center;margin-top:", ";", ""], themes_["variables"].spacingLarge, function (_ref) {
+  var $layout = _ref.$layout;
+  return $layout === 'vertical' && Object(external_styled_components_["css"])(["display:flex;& > [role='tablist']{flex:0 0 auto;}& > ", "{width:100%;}"],
   /* sc-sel */
-  StyledPanel),
-  prisma: Object(external_styled_components_["css"])(["text-align:center;margin-top:", ";"], themes_["variables"].spacingLarge)
-}));
+  StyledPanel);
+});
 
 // CONCATENATED MODULE: ./src/TabLayout/Panel.tsx
 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); }
@@ -355,7 +348,9 @@ var TabLayout_TabLayout = /*#__PURE__*/function (_Component) {
     value: function render() {
       var _this2 = this;
 
-      var children = this.props.children;
+      var _this$props2 = this.props,
+          children = _this$props2.children,
+          layout = _this$props2.layout;
       var activePanelId = this.isControlled() ? this.props.activePanelId : this.state.activePanelId;
       var panel;
       var tabs = external_react_["Children"].toArray(children).filter(external_react_["isValidElement"]).map(function (child) {
@@ -386,10 +381,10 @@ var TabLayout_TabLayout = /*#__PURE__*/function (_Component) {
       if (false) {}
 
       return /*#__PURE__*/external_react_default.a.createElement(Styled, TabLayout_extends({
-        "data-flex": this.props.layout === 'vertical' || undefined,
         "data-test-active-panel-id": activePanelId,
         "data-test": "tab-layout",
-        ref: this.props.elementRef
+        ref: this.props.elementRef,
+        $layout: layout
       }, omit_default()(this.props, keys_default()(TabLayout.propTypes))), /*#__PURE__*/external_react_default.a.createElement(TabBar_default.a, {
         autoActivate: this.props.autoActivate,
         activeTabId: activePanelId,
@@ -419,24 +414,31 @@ _defineProperty(TabLayout_TabLayout, "Panel", TabLayout_Panel);
 
 /***/ }),
 
-/***/ 2:
+/***/ 3:
 /***/ (function(module, exports) {
 
-module.exports = require("react");
+module.exports = require("styled-components");
 
 /***/ }),
 
-/***/ 3:
+/***/ 5:
 /***/ (function(module, exports) {
 
-module.exports = require("styled-components");
+module.exports = require("lodash/omit");
 
 /***/ }),
 
-/***/ 5:
+/***/ 8:
 /***/ (function(module, exports) {
 
-module.exports = require("lodash/omit");
+module.exports = require("@splunk/ui-utils/id");
+
+/***/ }),
+
+/***/ 9:
+/***/ (function(module, exports) {
+
+module.exports = require("lodash/keys");
 
 /***/ })