@splunk/react-ui 4.15.0 → 4.16.0

package/Progress.js

@@ -131,7 +131,7 @@ var isNumber_ = __webpack_require__(74);
 var isNumber_default = /*#__PURE__*/__webpack_require__.n(isNumber_);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/AnimationToggle"
-var AnimationToggle_ = __webpack_require__(47);
+var AnimationToggle_ = __webpack_require__(48);
 
 // EXTERNAL MODULE: external "styled-components"
 var external_styled_components_ = __webpack_require__(3);
@@ -327,7 +327,7 @@ module.exports = require("styled-components");
 
 /***/ }),
 
-/***/ 47:
+/***/ 48:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/AnimationToggle");

package/Scroll.js

@@ -190,7 +190,7 @@ var EventListener_ = __webpack_require__(17);
 var EventListener_default = /*#__PURE__*/__webpack_require__.n(EventListener_);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/ScrollContainerContext"
-var ScrollContainerContext_ = __webpack_require__(49);
+var ScrollContainerContext_ = __webpack_require__(50);
 
 // EXTERNAL MODULE: ./src/utils/updateReactRef.ts
 var updateReactRef = __webpack_require__(12);
@@ -600,17 +600,17 @@ module.exports = require("@splunk/react-ui/Animation");
 
 /***/ }),
 
-/***/ 49:
+/***/ 5:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/react-ui/ScrollContainerContext");
+module.exports = require("lodash/omit");
 
 /***/ }),
 
-/***/ 5:
+/***/ 50:
 /***/ (function(module, exports) {
 
-module.exports = require("lodash/omit");
+module.exports = require("@splunk/react-ui/ScrollContainerContext");
 
 /***/ })
 

package/Search.js

@@ -178,7 +178,7 @@ var external_prop_types_ = __webpack_require__(1);
 var external_prop_types_default = /*#__PURE__*/__webpack_require__.n(external_prop_types_);
 
 // EXTERNAL MODULE: external "lodash/extend"
-var extend_ = __webpack_require__(48);
+var extend_ = __webpack_require__(49);
 var extend_default = /*#__PURE__*/__webpack_require__.n(extend_);
 
 // EXTERNAL MODULE: external "lodash/has"
@@ -214,7 +214,7 @@ var Popover_ = __webpack_require__(23);
 var Popover_default = /*#__PURE__*/__webpack_require__.n(Popover_);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/ResultsMenu"
-var ResultsMenu_ = __webpack_require__(45);
+var ResultsMenu_ = __webpack_require__(46);
 var ResultsMenu_default = /*#__PURE__*/__webpack_require__.n(ResultsMenu_);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/Text"
@@ -804,14 +804,14 @@ module.exports = require("@splunk/ui-utils/i18n");
 
 /***/ }),
 
-/***/ 45:
+/***/ 46:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/ResultsMenu");
 
 /***/ }),
 
-/***/ 48:
+/***/ 49:
 /***/ (function(module, exports) {
 
 module.exports = require("lodash/extend");

package/Select.js

@@ -875,7 +875,7 @@ _defineProperty(Option, "defaultProps", defaultProps);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return Search; });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _splunk_react_icons_Search__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(54);
+/* harmony import */ var _splunk_react_icons_Search__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(56);
 /* harmony import */ var _splunk_react_icons_Search__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_splunk_react_icons_Search__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _ThemedIcon__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(7);
 /* harmony import */ var _SVG__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(6);
@@ -939,7 +939,7 @@ module.exports = require("@splunk/react-ui/Link");
 
 /***/ }),
 
-/***/ 45:
+/***/ 46:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/ResultsMenu");
@@ -953,14 +953,21 @@ module.exports = require("lodash/omit");
 
 /***/ }),
 
-/***/ 50:
+/***/ 51:
+/***/ (function(module, exports) {
+
+module.exports = require("lodash/find");
+
+/***/ }),
+
+/***/ 52:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return CaretDown; });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _splunk_react_icons_Caret__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(51);
+/* harmony import */ var _splunk_react_icons_Caret__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(53);
 /* harmony import */ var _splunk_react_icons_Caret__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_splunk_react_icons_Caret__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _ThemedIcon__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(7);
 /* harmony import */ var _SVG__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(6);
@@ -991,34 +998,27 @@ function CaretDown(props) {
 
 /***/ }),
 
-/***/ 51:
+/***/ 53:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-icons/Caret");
 
 /***/ }),
 
-/***/ 54:
+/***/ 56:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-icons/Search");
 
 /***/ }),
 
-/***/ 56:
+/***/ 58:
 /***/ (function(module, exports) {
 
 module.exports = require("lodash/without");
 
 /***/ }),
 
-/***/ 57:
-/***/ (function(module, exports) {
-
-module.exports = require("lodash/find");
-
-/***/ }),
-
 /***/ 59:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
@@ -1044,7 +1044,7 @@ var castArray_ = __webpack_require__(62);
 var castArray_default = /*#__PURE__*/__webpack_require__.n(castArray_);
 
 // EXTERNAL MODULE: external "lodash/find"
-var find_ = __webpack_require__(57);
+var find_ = __webpack_require__(51);
 var find_default = /*#__PURE__*/__webpack_require__.n(find_);
 
 // EXTERNAL MODULE: external "lodash/forEachRight"
@@ -1080,7 +1080,7 @@ var uniq_ = __webpack_require__(105);
 var uniq_default = /*#__PURE__*/__webpack_require__.n(uniq_);
 
 // EXTERNAL MODULE: external "lodash/without"
-var without_ = __webpack_require__(56);
+var without_ = __webpack_require__(58);
 var without_default = /*#__PURE__*/__webpack_require__.n(without_);
 
 // EXTERNAL MODULE: external "@splunk/ui-utils/filter"
@@ -1107,7 +1107,7 @@ var Link_default = /*#__PURE__*/__webpack_require__.n(Link_);
 var Menu_ = __webpack_require__(15);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/ResultsMenu"
-var ResultsMenu_ = __webpack_require__(45);
+var ResultsMenu_ = __webpack_require__(46);
 var ResultsMenu_default = /*#__PURE__*/__webpack_require__.n(ResultsMenu_);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/Text"
@@ -1115,7 +1115,7 @@ var Text_ = __webpack_require__(30);
 var Text_default = /*#__PURE__*/__webpack_require__.n(Text_);
 
 // EXTERNAL MODULE: ./src/icons/CaretDown.tsx
-var CaretDown = __webpack_require__(50);
+var CaretDown = __webpack_require__(52);
 
 // EXTERNAL MODULE: ./src/icons/Search.tsx
 var Search = __webpack_require__(39);
@@ -1754,19 +1754,145 @@ var SelectBase_SelectBase = /*#__PURE__*/function (_Component) {
       }
     });
 
+    _defineProperty(_assertThisInitialized(_this), "createToggle", function () {
+      var _this$getCurrentValue4;
+
+      var _this$props11 = _this.props,
+          toggle = _this$props11.toggle,
+          appearance = _this$props11.appearance,
+          children = _this$props11.children,
+          describedBy = _this$props11.describedBy,
+          disabled = _this$props11.disabled,
+          elementRef = _this$props11.elementRef,
+          error = _this$props11.error,
+          inline = _this$props11.inline,
+          labelledBy = _this$props11.labelledBy,
+          labelText = _this$props11.labelText,
+          multiple = _this$props11.multiple,
+          placeholder = _this$props11.placeholder,
+          prefixLabel = _this$props11.prefixLabel,
+          required = _this$props11.required,
+          suffixLabel = _this$props11.suffixLabel;
+      var icon;
+      var label; // Generate buttonLabels
+
+      var currentValues = (_this$getCurrentValue4 = _this.getCurrentValues()) !== null && _this$getCurrentValue4 !== void 0 ? _this$getCurrentValue4 : [];
+      var childrenArray = external_react_["Children"].toArray(children);
+      var valuesLabel = currentValues.reduce(function (acc, value, index, orig) {
+        var matchedItem = find_default()(childrenArray, function (item) {
+          return isOption(item) && item.props.value === value;
+        });
+
+        if (matchedItem) {
+          acc.push(matchedItem.props.children || matchedItem.props.label); // if not in multiple mode, add the icon
+
+          if (!multiple && currentValues.length === 1) {
+            icon = matchedItem.props.icon;
+          }
+        } else if (multiple) {
+          // only add values that don't match an option in "multiple" mode to preserve old behaviour
+          acc.push(value);
+        }
+
+        if (index < orig.length - 1) {
+          acc.push(Object(i18n_["_"])(', '));
+        }
+
+        return acc;
+      }, []);
+      label = valuesLabel; // only apply prefix / suffix if the label is not empty
+
+      if (label.length > 0) {
+        label = _this.wrapLabel({
+          prefixLabel: prefixLabel,
+          label: label,
+          suffixLabel: suffixLabel
+        });
+      } // single <Select> behaviour is to show the placeholder if all parts of the the label
+      // are empty strings so we replicate this behaviour here
+
+
+      if (label.length === 0 || !multiple && label.every(function (labelNode) {
+        return labelNode === '';
+      })) {
+        label = [placeholder];
+      }
+
+      var ariaLabel = label; // If there's more than one item selected, read out the selected total
+      // rather than reading out each selected item
+
+      if (label.length > 1) {
+        ariaLabel = _this.wrapLabel({
+          prefixLabel: prefixLabel,
+          label: ["".concat(currentValues.length, " items selected")],
+          suffixLabel: suffixLabel
+        });
+      }
+
+      var commonProps = _objectSpread({
+        'aria-describedby': describedBy,
+        'aria-label': "".concat(labelText ? "".concat(labelText, ", ") : '').concat(ariaLabel),
+        'aria-labelledby': labelText ? undefined : labelledBy,
+        'aria-multiselectable': multiple,
+        'aria-required': required,
+        'data-select-appearance': appearance,
+        'data-test': multiple ? 'multiselect' : 'select',
+        disabled: disabled,
+        elementRef: elementRef,
+        error: error
+      }, omit_default()(_this.props, keys_default()(SelectBase.propTypes)));
+
+      if (multiple) {
+        commonProps['data-test-values'] = JSON.stringify(currentValues);
+      } else {
+        var _currentValues = _slicedToArray(currentValues, 1),
+            dataTestValue = _currentValues[0];
+
+        commonProps['data-test-value'] = dataTestValue;
+      }
+
+      if (toggle) {
+        return /*#__PURE__*/Object(external_react_["cloneElement"])(toggle, commonProps);
+      }
+
+      if (appearance === 'link') {
+        return /*#__PURE__*/external_react_default.a.createElement(Link_default.a, _extends({}, commonProps, {
+          "data-select-appearance": "link"
+        }), !!icon && /*#__PURE__*/external_react_default.a.createElement(StyledLinkIcon, null, icon), label || placeholder, /*#__PURE__*/external_react_default.a.createElement(StyledLinkCaret, null, /*#__PURE__*/external_react_default.a.createElement(CaretDown["a" /* default */], {
+          enterpriseSize: 0.5,
+          prismaSize: "small"
+        })));
+      }
+
+      return /*#__PURE__*/external_react_default.a.createElement(StyledButton, _extends({}, commonProps, {
+        $multiple: multiple,
+        appearance: appearance,
+        label: label,
+        error: error,
+        icon: icon,
+        inline: inline,
+        isMenu: true,
+        role: "listbox" // @ts-expect-error - accept inconsistency with Button
+        ,
+        onClick: _this.props.onClick
+      }, pick_default()(_this.props, SelectBase.invalidLinkAppearanceProps)), !!currentValues.length && multiple && /*#__PURE__*/external_react_default.a.createElement(StyledCount, {
+        "data-role": "count"
+      }, "(", currentValues.length, ")"));
+    });
+
     _defineProperty(_assertThisInitialized(_this), "createChildren", function () {
       var _this$state = _this.state,
           filterKeyword = _this$state.filterKeyword,
           textHasFocus = _this$state.textHasFocus,
           topValuesState = _this$state.topValues;
-      var _this$props11 = _this.props,
-          allowKeyMatching = _this$props11.allowKeyMatching,
-          allowNewValues = _this$props11.allowNewValues,
-          filter = _this$props11.filter,
-          multiple = _this$props11.multiple,
-          showSelectedValuesFirst = _this$props11.showSelectedValuesFirst,
-          isLoadingOptions = _this$props11.isLoadingOptions,
-          onScrollBottom = _this$props11.onScrollBottom;
+      var _this$props12 = _this.props,
+          allowKeyMatching = _this$props12.allowKeyMatching,
+          allowNewValues = _this$props12.allowNewValues,
+          filter = _this$props12.filter,
+          multiple = _this$props12.multiple,
+          showSelectedValuesFirst = _this$props12.showSelectedValuesFirst,
+          isLoadingOptions = _this$props12.isLoadingOptions,
+          onScrollBottom = _this$props12.onScrollBottom;
 
       var currentValues = _this.getCurrentValues();
 
@@ -2029,10 +2155,10 @@ var SelectBase_SelectBase = /*#__PURE__*/function (_Component) {
   }, {
     key: "getTopValues",
     value: function getTopValues() {
-      var _this$getCurrentValue4;
+      var _this$getCurrentValue5;
 
       // in non-multiple mode, don't move values to the top of the list
-      return this.props.multiple && this.props.showSelectedValuesFirst !== 'never' ? (_this$getCurrentValue4 = this.getCurrentValues()) !== null && _this$getCurrentValue4 !== void 0 ? _this$getCurrentValue4 : [] : [];
+      return this.props.multiple && this.props.showSelectedValuesFirst !== 'never' ? (_this$getCurrentValue5 = this.getCurrentValues()) !== null && _this$getCurrentValue5 !== void 0 ? _this$getCurrentValue5 : [] : [];
     }
   }, {
     key: "isControlled",
@@ -2047,13 +2173,13 @@ var SelectBase_SelectBase = /*#__PURE__*/function (_Component) {
   }, {
     key: "toggleValue",
     value: function toggleValue(e, value) {
-      var _this$getCurrentValue5, _this$props$onChange3, _this$props13;
+      var _this$getCurrentValue6, _this$props$onChange3, _this$props14;
 
-      var values = (_this$getCurrentValue5 = this.getCurrentValues()) !== null && _this$getCurrentValue5 !== void 0 ? _this$getCurrentValue5 : [];
+      var values = (_this$getCurrentValue6 = this.getCurrentValues()) !== null && _this$getCurrentValue6 !== void 0 ? _this$getCurrentValue6 : [];
       var currentIndex = values.indexOf(value);
-      var _this$props12 = this.props,
-          name = _this$props12.name,
-          multiple = _this$props12.multiple;
+      var _this$props13 = this.props,
+          name = _this$props13.name,
+          multiple = _this$props13.multiple;
       var newValues;
 
       if (multiple) {
@@ -2091,7 +2217,7 @@ var SelectBase_SelectBase = /*#__PURE__*/function (_Component) {
         this.focus();
       }
 
-      (_this$props$onChange3 = (_this$props13 = this.props).onChange) === null || _this$props$onChange3 === void 0 ? void 0 : _this$props$onChange3.call(_this$props13, e, {
+      (_this$props$onChange3 = (_this$props14 = this.props).onChange) === null || _this$props$onChange3 === void 0 ? void 0 : _this$props$onChange3.call(_this$props14, e, {
         values: newValues,
         name: name
       });
@@ -2113,10 +2239,10 @@ var SelectBase_SelectBase = /*#__PURE__*/function (_Component) {
       var hasChildren = _ref4.hasChildren,
           placement = _ref4.placement;
       var filterKeyword = this.state.filterKeyword;
-      var _this$props14 = this.props,
-          inputId = _this$props14.inputId,
-          inputRef = _this$props14.inputRef,
-          multiple = _this$props14.multiple; // only visually disable these as opposed to fully disabling to avoid losing keyboard focus - see SUI-2731
+      var _this$props15 = this.props,
+          inputId = _this$props15.inputId,
+          inputRef = _this$props15.inputRef,
+          multiple = _this$props15.multiple; // only visually disable these as opposed to fully disabling to avoid losing keyboard focus - see SUI-2731
 
       var selectControls = /*#__PURE__*/external_react_default.a.createElement(StyledToggleAllControls, {
         $placement: placement,
@@ -2168,133 +2294,26 @@ var SelectBase_SelectBase = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this$getCurrentValue6,
+      var _this$getCurrentValue7,
           _this2 = this;
 
-      var _this$props15 = this.props,
-          appearance = _this$props15.appearance,
-          children = _this$props15.children,
-          defaultPlacement = _this$props15.defaultPlacement,
-          describedBy = _this$props15.describedBy,
-          disabled = _this$props15.disabled,
-          elementRef = _this$props15.elementRef,
-          error = _this$props15.error,
-          inline = _this$props15.inline,
-          inputId = _this$props15.inputId,
-          labelledBy = _this$props15.labelledBy,
-          labelText = _this$props15.labelText,
-          multiple = _this$props15.multiple,
-          required = _this$props15.required,
-          placeholder = _this$props15.placeholder,
-          prefixLabel = _this$props15.prefixLabel,
-          repositionMode = _this$props15.repositionMode,
-          suffixLabel = _this$props15.suffixLabel;
-      var icon;
-      var label;
+      var _this$props16 = this.props,
+          children = _this$props16.children,
+          defaultPlacement = _this$props16.defaultPlacement,
+          inputId = _this$props16.inputId,
+          multiple = _this$props16.multiple,
+          repositionMode = _this$props16.repositionMode;
       var filterEnabled = this.hasFilter();
-      var isAnyValueSelected = false; // Generate buttonLabels
-
+      var currentValues = (_this$getCurrentValue7 = this.getCurrentValues()) !== null && _this$getCurrentValue7 !== void 0 ? _this$getCurrentValue7 : [];
       var childrenArray = external_react_["Children"].toArray(children);
-      var currentValues = (_this$getCurrentValue6 = this.getCurrentValues()) !== null && _this$getCurrentValue6 !== void 0 ? _this$getCurrentValue6 : [];
-      var valuesLabel = currentValues.reduce(function (acc, value, index, orig) {
+      var isAnyValueSelected = currentValues.some(function (value) {
         var matchedItem = find_default()(childrenArray, function (item) {
           return isOption(item) && item.props.value === value;
         });
-
-        if (matchedItem) {
-          acc.push(matchedItem.props.children || matchedItem.props.label);
-
-          if (!matchedItem.props.disabled) {
-            isAnyValueSelected = true;
-          } // if not in multiple mode, add the icon
-
-
-          if (!multiple && currentValues.length === 1) {
-            icon = matchedItem.props.icon;
-          }
-        } else if (multiple) {
-          // only add values that don't match an option in "multiple" mode to preserve old behaviour
-          acc.push(value);
-        }
-
-        if (index < orig.length - 1) {
-          acc.push(Object(i18n_["_"])(', '));
-        }
-
-        return acc;
-      }, []);
-      label = valuesLabel; // only apply prefix / suffix if the label is not empty
-
-      if (label.length > 0) {
-        label = this.wrapLabel({
-          prefixLabel: prefixLabel,
-          label: label,
-          suffixLabel: suffixLabel
-        });
-      } // single <Select> behaviour is to show the placeholder if all parts of the the label
-      // are empty strings so we replicate this behaviour here
-
-
-      if (label.length === 0 || !multiple && label.every(function (labelNode) {
-        return labelNode === '';
-      })) {
-        label = [placeholder];
-      }
-
-      var ariaLabel = label; // If there's more than one item selected, read out the selected total
-      // rather than reading out each selected item
-
-      if (label.length > 1) {
-        ariaLabel = this.wrapLabel({
-          prefixLabel: prefixLabel,
-          label: ["".concat(currentValues.length, " items selected")],
-          suffixLabel: suffixLabel
-        });
-      }
-
+        return matchedItem && !matchedItem.props.disabled;
+      });
       var finalChildren = this.createChildren();
-
-      var commonProps = _objectSpread({
-        'aria-describedby': describedBy,
-        'aria-label': "".concat(labelText ? "".concat(labelText, ", ") : '').concat(ariaLabel),
-        'aria-labelledby': labelText ? undefined : labelledBy,
-        'aria-multiselectable': multiple,
-        'aria-required': required,
-        'data-select-appearance': appearance,
-        'data-test': multiple ? 'multiselect' : 'select',
-        disabled: disabled,
-        elementRef: elementRef,
-        error: error
-      }, omit_default()(this.props, keys_default()(SelectBase.propTypes)));
-
-      if (multiple) {
-        commonProps['data-test-values'] = JSON.stringify(currentValues);
-      } else {
-        var _currentValues = _slicedToArray(currentValues, 1),
-            dataTestValue = _currentValues[0];
-
-        commonProps['data-test-value'] = dataTestValue;
-      }
-
-      var toggle = appearance === 'link' ? /*#__PURE__*/external_react_default.a.createElement(Link_default.a, _extends({}, commonProps, {
-        "data-select-appearance": "link"
-      }), !!icon && /*#__PURE__*/external_react_default.a.createElement(StyledLinkIcon, null, icon), label || placeholder, /*#__PURE__*/external_react_default.a.createElement(StyledLinkCaret, null, /*#__PURE__*/external_react_default.a.createElement(CaretDown["a" /* default */], {
-        enterpriseSize: 0.5,
-        prismaSize: "small"
-      }))) : /*#__PURE__*/external_react_default.a.createElement(StyledButton, _extends({}, commonProps, {
-        $multiple: multiple,
-        appearance: appearance,
-        label: label,
-        error: error,
-        icon: icon,
-        inline: inline,
-        isMenu: true,
-        role: "listbox" // @ts-expect-error - accept inconsistency with Button
-        ,
-        onClick: this.props.onClick
-      }, pick_default()(this.props, SelectBase.invalidLinkAppearanceProps)), !!currentValues.length && multiple && /*#__PURE__*/external_react_default.a.createElement(StyledCount, {
-        "data-role": "count"
-      }, "(", currentValues.length, ")"));
+      var toggle = this.createToggle();
 
       var createMenu = function createMenu(_ref5) {
         var anchorWidth = _ref5.anchorWidth,

package/StepBar.js

@@ -131,7 +131,7 @@ var external_prop_types_default = /*#__PURE__*/__webpack_require__.n(external_pr
 var id_ = __webpack_require__(13);
 
 // EXTERNAL MODULE: external "@splunk/themes/useSplunkTheme"
-var useSplunkTheme_ = __webpack_require__(52);
+var useSplunkTheme_ = __webpack_require__(54);
 var useSplunkTheme_default = /*#__PURE__*/__webpack_require__.n(useSplunkTheme_);
 
 // EXTERNAL MODULE: external "styled-components"
@@ -504,7 +504,7 @@ module.exports = require("styled-components");
 
 /***/ }),
 
-/***/ 52:
+/***/ 54:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/themes/useSplunkTheme");

package/Switch.js

@@ -141,7 +141,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-ui/AnimationToggle"
-var AnimationToggle_ = __webpack_require__(47);
+var AnimationToggle_ = __webpack_require__(48);
 var AnimationToggle_default = /*#__PURE__*/__webpack_require__.n(AnimationToggle_);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/ScreenReaderContent"
@@ -745,7 +745,7 @@ module.exports = require("styled-components");
 
 /***/ }),
 
-/***/ 47:
+/***/ 48:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/AnimationToggle");

package/TabBar.js

@@ -594,7 +594,7 @@ _defineProperty(Tab_Tab, "contextType", TabBar_TabBarContext);
 
 /* harmony default export */ var TabBar_Tab = (Tab_Tab);
 // EXTERNAL MODULE: ./src/utils/navigateList.ts
-var navigateList = __webpack_require__(55);
+var navigateList = __webpack_require__(57);
 
 // 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); }
@@ -769,7 +769,7 @@ module.exports = require("styled-components");
 
 /***/ }),
 
-/***/ 55:
+/***/ 57:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";

package/TabLayout.js

@@ -204,6 +204,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 var propTypes = {
   children: external_prop_types_default.a.node,
+  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,
@@ -272,6 +273,7 @@ var TabLayout_propTypes = {
   activePanelId: external_prop_types_default.a.string,
   appearance: external_prop_types_default.a.oneOf(['navigation', 'context']),
   children: external_prop_types_default.a.node,
+  count: external_prop_types_default.a.number,
   defaultActivePanelId: external_prop_types_default.a.string,
   elementRef: external_prop_types_default.a.oneOfType([external_prop_types_default.a.func, external_prop_types_default.a.object]),
   iconSize: external_prop_types_default.a.oneOf(['inline', 'small', 'large']),
@@ -369,6 +371,7 @@ var TabLayout_TabLayout = /*#__PURE__*/function (_Component) {
         }
 
         return /*#__PURE__*/external_react_default.a.createElement(TabBar_default.a.Tab, {
+          count: props.count,
           icon: props.icon,
           key: props.panelId,
           label: props.label,