@splunk/react-ui 4.17.0 → 4.17.1

package/Button.js

@@ -141,7 +141,7 @@ var external_styled_components_ = __webpack_require__(3);
 var external_styled_components_default = /*#__PURE__*/__webpack_require__.n(external_styled_components_);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/ButtonSimple"
-var ButtonSimple_ = __webpack_require__(61);
+var ButtonSimple_ = __webpack_require__(62);
 var ButtonSimple_default = /*#__PURE__*/__webpack_require__.n(ButtonSimple_);
 
 // EXTERNAL MODULE: external "@splunk/themes"
@@ -169,7 +169,7 @@ var StyledIcon = external_styled_components_default.a.span.withConfig({
 var StyledButtonSimple = external_styled_components_default()(ButtonSimple_default.a).withConfig({
   displayName: "ButtonStyles__StyledButtonSimple",
   componentId: "eqxqs2-1"
-})(["text-align:center;vertical-align:middle;text-decoration:none;white-space:nowrap;flex-grow:1;min-width:0;max-width:100%;line-height:", ";min-height:", ";padding:", ";", " ", " &[data-inline]{display:inline-block;vertical-align:middle;", " [data-inline] + &{margin-bottom:0;", "}}"], themes_["variables"].lineHeight, themes_["variables"].inputHeight, Object(themes_["pick"])({
+})(["text-align:center;vertical-align:middle;text-decoration:none;white-space:nowrap;flex-grow:1;min-width:0;max-width:100%;line-height:", ";min-height:", ";padding:", ";", " ", " &[data-inline]{display:inline-block;vertical-align:middle;", "}[data-inline] + &&[data-inline]{margin-bottom:0;", "}"], themes_["variables"].lineHeight, themes_["variables"].inputHeight, Object(themes_["pick"])({
   enterprise: {
     comfortable: '5px 14px',
     compact: '2px 14px'
@@ -307,7 +307,7 @@ var ArrowSquareTopRightInset_ = __webpack_require__(122);
 var ArrowSquareTopRightInset_default = /*#__PURE__*/__webpack_require__.n(ArrowSquareTopRightInset_);
 
 // EXTERNAL MODULE: external "@splunk/react-icons/enterprise/External"
-var External_ = __webpack_require__(62);
+var External_ = __webpack_require__(63);
 var External_default = /*#__PURE__*/__webpack_require__.n(External_);
 
 // EXTERNAL MODULE: external "@splunk/ui-utils/i18n"
@@ -602,14 +602,14 @@ module.exports = require("@splunk/react-icons/enterprise/Caret");
 
 /***/ }),
 
-/***/ 61:
+/***/ 62:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/ButtonSimple");
 
 /***/ }),
 
-/***/ 62:
+/***/ 63:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-icons/enterprise/External");

package/CHANGELOG.md

@@ -1,18 +1,35 @@
 Change Log
 ============
 
+4.17.1 - June 6, 2023
+----------
+
+Bug Fixes:
+* `Multiselect` should respect `aria-label` and `labelledBy` props (SUI-5510).
+* Fixed incorrect `aria-*` and `role` attributes in `Select` (SUI-5515).
+* `Multiselect` and `ComboBox` now indicates an option is a new value (SUI-5541).
+* `Message` now has reduced spacing between icon and text (SUI-5448).
+* Fixed incorrect `role=status` and required aria attribute in `Multiselect` (SUI-5517).
+* `Select` now has correct focus behavior when it has a filter, above placement, and an empty value (SUI-5525).
+* Fixes an issue where the "close" buttons in `SideNav`, `FormRows`, `Modal`, and `SidePanel` were missing accessible names in version 4.17.0 (SUI-5566).
+
+API Changes:
+* Added support for the latest `styled-components@5` (SUI-5467).
+
+Deprecations:
+* `TextArea`'s `canClear` prop has been deprecated. If the "clear" action is required, we recommend implementing it via an adjacent "clear" button. (SUI-5306).
+
 4.17.0 - May 10, 2023
 ----------
 New Features:
-* `Code` will no longer throw an error with an invalid `language` prop, and will fall back to `javascript` instead. The fallback language can changed with the new `languageFallback` prop (SUI-5425).
-* `TabBar` and `TabLayout` support `layout="vertical"` in Prisma themes (SUI-2777).
-* Adopt `react-icons@4.0.0-beta.2` (SUI-5342).
+* Updated `@splunk/react-icons` dependency to v4:
   * Components with icons in Prisma themes previously used private icons.
   * These icons have been replaced with the icons from `react-icons`.
   * Note: this may cause slight visual changes to align the components with the design system.
+* `Code` will no longer throw an error with an invalid `language` prop, and will fall back to `javascript` instead. The fallback language can changed with the new `languageFallback` prop (SUI-5425).
+* `TabBar` and `TabLayout` support `layout="vertical"` in Prisma themes (SUI-2777).
 * New `DualListbox` component for listbox multi-selection (SUI-4251).
-* Added `level`s 5 and 6 to `Heading` - `level={5}` maps to `h5` and `level={6}` maps to `h6`.
-* Updated to ``@splunk/react-icons` dependency to `@splunk/react-icons@4`.
+* Added `level`s 5 and 6 to `Heading`; `level={5}` maps to `h5` and `level={6}` maps to `h6`.
 * `Typography` supports a new `variant` prop for styling (SUI-5286).
 * Added `inline` prop to `SplitButton` (SUI-5388).
 * `SplitButton` supports `appearance="destructive"` in Enterprise themes (SUI-5395).
@@ -27,7 +44,7 @@ Bug Fixes:
 * Updated warning type `MessageBar`'s text color to improve contrast ratio (SUI-5310).
 * Updated `TabBar`'s count background color to improve contrast ratio across different backgrounds (SUI-5274).
 * `Tab` no longer throws error for custom data-test props (SUI-5373).
-* Fixed slight vertical misalignment of Message icon with text.
+* Fixed slight vertical misalignment of `Message`'s icon with text.
 * `Menu` no longer unnecessarily recomputes the `onFocus` handler of `Item` (SUI-5369).
 
 Type Changes:

package/Calendar.js

@@ -323,6 +323,7 @@ function Day(_ref) {
     "data-test-day": day,
     "data-test": "day-of-month",
     "data-active-day": active,
+    "data-is-today": today,
     onClick: handleClick,
     onKeyDown: handleKeyDown,
     $today: today,
@@ -651,7 +652,7 @@ var ChevronRight_ = __webpack_require__(43);
 var ChevronRight_default = /*#__PURE__*/__webpack_require__.n(ChevronRight_);
 
 // EXTERNAL MODULE: external "@splunk/react-icons/enterprise/ChevronLeft"
-var enterprise_ChevronLeft_ = __webpack_require__(63);
+var enterprise_ChevronLeft_ = __webpack_require__(64);
 var enterprise_ChevronLeft_default = /*#__PURE__*/__webpack_require__.n(enterprise_ChevronLeft_);
 
 // EXTERNAL MODULE: external "@splunk/react-icons/enterprise/ChevronRight"
@@ -1068,7 +1069,8 @@ var Calendar_Calendar = /*#__PURE__*/function (_Component) {
         inline: true,
         "aria-labelledby": labelledBy,
         "aria-describedby": describedBy,
-        "aria-required": required
+        "aria-required": required,
+        "data-test": "calendar"
       }, omit_default()(this.props, keys_default()(Calendar.propTypes)), {
         elementRef: this.handleCalendarMount
       }), /*#__PURE__*/external_react_default.a.createElement(Calendar_MonthHeader, {
@@ -1169,7 +1171,7 @@ module.exports = require("@splunk/react-ui/Box");
 
 /***/ }),
 
-/***/ 63:
+/***/ 64:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-icons/enterprise/ChevronLeft");

package/CloseButton.js

@@ -145,7 +145,7 @@ var external_styled_components_ = __webpack_require__(3);
 var external_styled_components_default = /*#__PURE__*/__webpack_require__.n(external_styled_components_);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/ButtonSimple"
-var ButtonSimple_ = __webpack_require__(61);
+var ButtonSimple_ = __webpack_require__(62);
 var ButtonSimple_default = /*#__PURE__*/__webpack_require__.n(ButtonSimple_);
 
 // CONCATENATED MODULE: ./src/CloseButton/CloseButtonStyles.ts
@@ -191,14 +191,14 @@ function CloseButton(_ref) {
   var prismaSize = isCompact ? '20px' : '24px';
   return /*#__PURE__*/external_react_default.a.createElement(StyledButtonSimple, _extends({
     appearance: "pill",
-    disabled: disabled
+    disabled: disabled,
+    "aria-label": screenReaderText
   }, otherProps), isEnterprise ? /*#__PURE__*/external_react_default.a.createElement(Close_default.a, {
     "data-test": "cross",
     inline: false,
-    screenReaderText: screenReaderText,
+    screenReaderText: null,
     size: "13px"
   }) : /*#__PURE__*/external_react_default.a.createElement(Cross_default.a, {
-    "aria-label": screenReaderText,
     "data-test": "cross",
     height: prismaSize,
     width: prismaSize
@@ -240,7 +240,7 @@ module.exports = require("@splunk/ui-utils/i18n");
 
 /***/ }),
 
-/***/ 61:
+/***/ 62:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/ButtonSimple");

package/Code.js

@@ -2323,7 +2323,7 @@ var external_prop_types_ = __webpack_require__(1);
 var external_prop_types_default = /*#__PURE__*/__webpack_require__.n(external_prop_types_);
 
 // EXTERNAL MODULE: external "lodash/castArray"
-var castArray_ = __webpack_require__(64);
+var castArray_ = __webpack_require__(65);
 var castArray_default = /*#__PURE__*/__webpack_require__.n(castArray_);
 
 // EXTERNAL MODULE: external "lodash/flatten"
@@ -2567,6 +2567,7 @@ function Code(_ref) {
 
       var content = typeof part.content === 'string' ? part.content : render(part.content);
       return /*#__PURE__*/external_react_default.a.createElement(StyledToken, {
+        "data-part-type": part.type,
         partType: part.type,
         key: idx.toString()
       }, content);
@@ -2597,7 +2598,7 @@ module.exports = require("styled-components");
 
 /***/ }),
 
-/***/ 64:
+/***/ 65:
 /***/ (function(module, exports) {
 
 module.exports = require("lodash/castArray");

package/Color.js

@@ -171,7 +171,7 @@ var external_prop_types_ = __webpack_require__(1);
 var external_prop_types_default = /*#__PURE__*/__webpack_require__.n(external_prop_types_);
 
 // EXTERNAL MODULE: external "lodash/debounce"
-var debounce_ = __webpack_require__(65);
+var debounce_ = __webpack_require__(66);
 var debounce_default = /*#__PURE__*/__webpack_require__.n(debounce_);
 
 // EXTERNAL MODULE: external "lodash/has"
@@ -207,7 +207,7 @@ var memoize_ = __webpack_require__(125);
 var memoize_default = /*#__PURE__*/__webpack_require__.n(memoize_);
 
 // EXTERNAL MODULE: external "tinycolor2"
-var external_tinycolor2_ = __webpack_require__(66);
+var external_tinycolor2_ = __webpack_require__(67);
 var external_tinycolor2_default = /*#__PURE__*/__webpack_require__.n(external_tinycolor2_);
 
 // EXTERNAL MODULE: external "@splunk/react-icons/ChevronDown"
@@ -1244,14 +1244,14 @@ module.exports = require("lodash/omit");
 
 /***/ }),
 
-/***/ 65:
+/***/ 66:
 /***/ (function(module, exports) {
 
 module.exports = require("lodash/debounce");
 
 /***/ }),
 
-/***/ 66:
+/***/ 67:
 /***/ (function(module, exports) {
 
 module.exports = require("tinycolor2");

package/ColumnLayout.js

@@ -129,7 +129,7 @@ var external_prop_types_ = __webpack_require__(1);
 var external_prop_types_default = /*#__PURE__*/__webpack_require__.n(external_prop_types_);
 
 // EXTERNAL MODULE: external "@splunk/themes/useSplunkTheme"
-var useSplunkTheme_ = __webpack_require__(67);
+var useSplunkTheme_ = __webpack_require__(68);
 var useSplunkTheme_default = /*#__PURE__*/__webpack_require__.n(useSplunkTheme_);
 
 // EXTERNAL MODULE: external "lodash/defaults"
@@ -436,7 +436,7 @@ module.exports = require("styled-components");
 
 /***/ }),
 
-/***/ 67:
+/***/ 68:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/themes/useSplunkTheme");

package/ComboBox.js

@@ -703,6 +703,8 @@ var ComboBox_ComboBox = /*#__PURE__*/function (_Component) {
 
       if (!hasExactMatch && value) {
         initialOptions.unshift( /*#__PURE__*/external_react_default.a.createElement(ComboBox_Option, {
+          description: Object(i18n_["_"])('(New value)'),
+          descriptionPosition: "right",
           key: "currentValueOption",
           value: value,
           "data-test-current-value-option": value

package/Concertina.js

@@ -176,7 +176,7 @@ var external_prop_types_ = __webpack_require__(1);
 var external_prop_types_default = /*#__PURE__*/__webpack_require__.n(external_prop_types_);
 
 // EXTERNAL MODULE: external "lodash/debounce"
-var debounce_ = __webpack_require__(65);
+var debounce_ = __webpack_require__(66);
 var debounce_default = /*#__PURE__*/__webpack_require__.n(debounce_);
 
 // EXTERNAL MODULE: external "lodash/take"
@@ -218,8 +218,8 @@ var StyledClickable = external_styled_components_default()(Clickable_default.a).
   displayName: "HeadingStyles__StyledClickable",
   componentId: "sc-1h92oaj-0"
 })(["display:block;width:100%;cursor:pointer;position:relative;padding:6px ", ";line-height:", ";border-radius:0;color:", ";", " &:focus:not([disabled]){box-shadow:", ";}", ""], themes_["variables"].spacing, themes_["variables"].lineHeight, themes_["variables"].textColor, Object(themes_["pickVariant"])('$inner', {
-  "true": Object(external_styled_components_["css"])(["*:not(:first-child) > &{border-top:2px solid ", ";}*:not(:last-child) > &{border-bottom:2px solid ", ";}"], themes_["variables"].backgroundColor, themes_["variables"].backgroundColor),
-  "false": Object(external_styled_components_["css"])(["& + &{border-top:2px solid ", ";}"], themes_["variables"].backgroundColor)
+  "true": Object(external_styled_components_["css"])(["*:not(:first-child) > &&{border-top:2px solid ", ";}*:not(:last-child) > &&{border-bottom:2px solid ", ";}"], themes_["variables"].backgroundColor, themes_["variables"].backgroundColor),
+  "false": Object(external_styled_components_["css"])(["& + &&{border-top:2px solid ", ";}"], themes_["variables"].backgroundColor)
 }), themes_["variables"].focusShadowInset, Object(themes_["pickVariant"])('$status', {
   normal: Object(external_styled_components_["css"])(["background-color:", ";&:hover:not([disabled]){background-color:", ";}"], Object(themes_["pick"])({
     dark: themes_["variables"].gray45,
@@ -951,7 +951,7 @@ module.exports = require("@splunk/react-ui/Box");
 
 /***/ }),
 
-/***/ 65:
+/***/ 66:
 /***/ (function(module, exports) {
 
 module.exports = require("lodash/debounce");

package/Dropdown.js

@@ -180,7 +180,7 @@ var includes_default = /*#__PURE__*/__webpack_require__.n(includes_);
 var isEmpty_ = __webpack_require__(88);
 
 // EXTERNAL MODULE: external "lodash/isFunction"
-var isFunction_ = __webpack_require__(68);
+var isFunction_ = __webpack_require__(69);
 var isFunction_default = /*#__PURE__*/__webpack_require__.n(isFunction_);
 
 // EXTERNAL MODULE: external "lodash/keys"
@@ -466,7 +466,7 @@ var Dropdown_Dropdown = /*#__PURE__*/function (_Component) {
       return /*#__PURE__*/Object(external_react_["cloneElement"])(this.props.toggle, (_cloneElement = {
         onClick: this.handleToggleClick,
         onKeyDown: this.handleToggleKeyDownOpen
-      }, _defineProperty(_cloneElement, this.props.toggle.type[legacyRefMode] ? 'elementRef' : 'ref', this.handleToggleMount), _defineProperty(_cloneElement, 'aria-controls', this.isOpen() ? this.popoverId : undefined), _defineProperty(_cloneElement, 'aria-haspopup', true), _defineProperty(_cloneElement, 'aria-expanded', this.isOpen()), _defineProperty(_cloneElement, 'data-test', this.props.toggle.props['data-test'] || 'dropdown'), _defineProperty(_cloneElement, 'data-test-popover-id', this.popoverId), _defineProperty(_cloneElement, "id", this.props.inputId || this.props.toggle.props.id || this.toggleId), _cloneElement));
+      }, _defineProperty(_cloneElement, this.props.toggle.type[legacyRefMode] ? 'elementRef' : 'ref', this.handleToggleMount), _defineProperty(_cloneElement, 'aria-controls', this.isOpen() ? this.popoverId : undefined), _defineProperty(_cloneElement, 'aria-haspopup', this.props.toggle.props['aria-haspopup'] || true), _defineProperty(_cloneElement, 'aria-expanded', this.isOpen()), _defineProperty(_cloneElement, 'data-test', this.props.toggle.props['data-test'] || 'dropdown'), _defineProperty(_cloneElement, 'data-test-popover-id', this.popoverId), _defineProperty(_cloneElement, "id", this.props.inputId || this.props.toggle.props.id || this.toggleId), _cloneElement));
     }
   }, {
     key: "render",
@@ -537,7 +537,7 @@ module.exports = require("lodash/omit");
 
 /***/ }),
 
-/***/ 68:
+/***/ 69:
 /***/ (function(module, exports) {
 
 module.exports = require("lodash/isFunction");

package/DualListbox.js

@@ -141,7 +141,7 @@ var i18n_ = __webpack_require__(4);
 var keyboard_ = __webpack_require__(7);
 
 // EXTERNAL MODULE: external "@splunk/react-icons/enterprise/ChevronLeft"
-var ChevronLeft_ = __webpack_require__(63);
+var ChevronLeft_ = __webpack_require__(64);
 var ChevronLeft_default = /*#__PURE__*/__webpack_require__.n(ChevronLeft_);
 
 // EXTERNAL MODULE: external "@splunk/react-icons/enterprise/ChevronRight"
@@ -1727,7 +1727,7 @@ module.exports = require("@splunk/react-ui/Box");
 
 /***/ }),
 
-/***/ 63:
+/***/ 64:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-icons/enterprise/ChevronLeft");

package/File.js

@@ -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 "lodash/debounce"
-var debounce_ = __webpack_require__(65);
+var debounce_ = __webpack_require__(66);
 var debounce_default = /*#__PURE__*/__webpack_require__.n(debounce_);
 
 // EXTERNAL MODULE: external "lodash/omit"
@@ -1162,7 +1162,7 @@ module.exports = require("@splunk/react-ui/Box");
 
 /***/ }),
 
-/***/ 65:
+/***/ 66:
 /***/ (function(module, exports) {
 
 module.exports = require("lodash/debounce");

package/Link.js

@@ -145,7 +145,7 @@ var ArrowSquareTopRight_ = __webpack_require__(94);
 var ArrowSquareTopRight_default = /*#__PURE__*/__webpack_require__.n(ArrowSquareTopRight_);
 
 // EXTERNAL MODULE: external "@splunk/react-icons/enterprise/External"
-var External_ = __webpack_require__(62);
+var External_ = __webpack_require__(63);
 var External_default = /*#__PURE__*/__webpack_require__.n(External_);
 
 // EXTERNAL MODULE: external "@splunk/themes"
@@ -348,7 +348,7 @@ module.exports = require("@splunk/ui-utils/i18n");
 
 /***/ }),
 
-/***/ 62:
+/***/ 63:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-icons/enterprise/External");

package/Menu.js

@@ -258,7 +258,7 @@ var Heading_ = __webpack_require__(76);
 var Heading_default = /*#__PURE__*/__webpack_require__.n(Heading_);
 
 // EXTERNAL MODULE: external "@splunk/themes/useSplunkTheme"
-var useSplunkTheme_ = __webpack_require__(67);
+var useSplunkTheme_ = __webpack_require__(68);
 var useSplunkTheme_default = /*#__PURE__*/__webpack_require__.n(useSplunkTheme_);
 
 // CONCATENATED MODULE: ./src/Menu/HeadingStyles.ts
@@ -563,7 +563,7 @@ var ArrowSquareTopRight_ = __webpack_require__(94);
 var ArrowSquareTopRight_default = /*#__PURE__*/__webpack_require__.n(ArrowSquareTopRight_);
 
 // EXTERNAL MODULE: external "@splunk/react-icons/enterprise/External"
-var External_ = __webpack_require__(62);
+var External_ = __webpack_require__(63);
 var External_default = /*#__PURE__*/__webpack_require__.n(External_);
 
 // EXTERNAL MODULE: external "@splunk/ui-utils/i18n"
@@ -1245,14 +1245,14 @@ module.exports = require("@splunk/react-ui/Switch");
 
 /***/ }),
 
-/***/ 62:
+/***/ 63:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-icons/enterprise/External");
 
 /***/ }),
 
-/***/ 67:
+/***/ 68:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/themes/useSplunkTheme");

package/Message.js

@@ -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/CheckCircle"
-var CheckCircle_ = __webpack_require__(69);
+var CheckCircle_ = __webpack_require__(70);
 var CheckCircle_default = /*#__PURE__*/__webpack_require__.n(CheckCircle_);
 
 // EXTERNAL MODULE: external "@splunk/react-icons/Cross"
@@ -161,7 +161,7 @@ var Close_ = __webpack_require__(26);
 var Close_default = /*#__PURE__*/__webpack_require__.n(Close_);
 
 // EXTERNAL MODULE: external "@splunk/react-icons/ExclamationCircle"
-var ExclamationCircle_ = __webpack_require__(70);
+var ExclamationCircle_ = __webpack_require__(71);
 var ExclamationCircle_default = /*#__PURE__*/__webpack_require__.n(ExclamationCircle_);
 
 // EXTERNAL MODULE: external "@splunk/react-icons/InformationCircle"
@@ -352,11 +352,11 @@ var StyledBox = external_styled_components_default()(Box_default.a).withConfig({
   enterprise: '5px'
 }), themes_["variables"].spacingSmall, Object(themes_["pickVariant"])('$hasRemoveIcon', {
   "true": {
-    prisma: '10px 40px 10px 36px',
+    prisma: '10px 40px 10px 28px',
     enterprise: '10px 40px 10px 40px'
   },
   "false": {
-    prisma: '10px 8px 10px 36px',
+    prisma: '10px 8px 10px 28px',
     enterprise: '10px 10px 10px 40px'
   }
 }), function (_ref3) {
@@ -589,14 +589,14 @@ module.exports = require("@splunk/react-ui/Box");
 
 /***/ }),
 
-/***/ 69:
+/***/ 70:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-icons/CheckCircle");
 
 /***/ }),
 
-/***/ 70:
+/***/ 71:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-icons/ExclamationCircle");

package/MessageBar.js

@@ -177,11 +177,11 @@ var external_styled_components_ = __webpack_require__(3);
 var external_styled_components_default = /*#__PURE__*/__webpack_require__.n(external_styled_components_);
 
 // EXTERNAL MODULE: external "@splunk/react-icons/CheckCircle"
-var CheckCircle_ = __webpack_require__(69);
+var CheckCircle_ = __webpack_require__(70);
 var CheckCircle_default = /*#__PURE__*/__webpack_require__.n(CheckCircle_);
 
 // EXTERNAL MODULE: external "@splunk/react-icons/ExclamationCircle"
-var ExclamationCircle_ = __webpack_require__(70);
+var ExclamationCircle_ = __webpack_require__(71);
 var ExclamationCircle_default = /*#__PURE__*/__webpack_require__.n(ExclamationCircle_);
 
 // EXTERNAL MODULE: external "@splunk/react-icons/InformationCircle"
@@ -521,14 +521,14 @@ module.exports = require("@splunk/react-ui/Box");
 
 /***/ }),
 
-/***/ 69:
+/***/ 70:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-icons/CheckCircle");
 
 /***/ }),
 
-/***/ 70:
+/***/ 71:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-icons/ExclamationCircle");

package/Multiselect.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 = 183);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -267,7 +267,7 @@ function getWindow() {
 
 /***/ }),
 
-/***/ 182:
+/***/ 183:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -644,7 +644,7 @@ var pick_ = __webpack_require__(41);
 var pick_default = /*#__PURE__*/__webpack_require__.n(pick_);
 
 // EXTERNAL MODULE: external "lodash/pickBy"
-var pickBy_ = __webpack_require__(71);
+var pickBy_ = __webpack_require__(61);
 var pickBy_default = /*#__PURE__*/__webpack_require__.n(pickBy_);
 
 // EXTERNAL MODULE: external "lodash/without"
@@ -1326,6 +1326,10 @@ var Normal_Normal = /*#__PURE__*/function (_Component) {
         'aria-invalid': error || undefined
       });
 
+      var subsetAriaProps = _objectSpread({}, pickBy_default()(otherProps, function (val, key) {
+        return key === 'aria-label' || key === 'aria-describedby';
+      }));
+
       var currentValues = (_this$getCurrentValue4 = this.getCurrentValues()) !== null && _this$getCurrentValue4 !== void 0 ? _this$getCurrentValue4 : [];
       var selectedItems = currentValues.slice(0);
       var foundExactMatch = currentValues.indexOf(this.state.filterKeyword) >= 0; // Map Options to selected values
@@ -1395,7 +1399,9 @@ var Normal_Normal = /*#__PURE__*/function (_Component) {
 
       if (allowNewValues && !foundExactMatch && this.state.filterKeyword) {
         this.children.unshift( /*#__PURE__*/external_react_default.a.createElement(Multiselect_Option, {
-          label: "".concat(this.state.filterKeyword, " (new value)"),
+          label: "".concat(this.state.filterKeyword),
+          description: Object(i18n_["_"])('(New value)'),
+          descriptionPosition: "right",
           value: this.state.filterKeyword,
           key: "newValue",
           onClick: this.handleMenuOptionClick
@@ -1432,7 +1438,7 @@ var Normal_Normal = /*#__PURE__*/function (_Component) {
       }
 
       var inputWidth = "".concat(this.state.filterKeyword.length * 0.8, "em");
-      return [/*#__PURE__*/external_react_default.a.createElement(StyledBox, Normal_extends({
+      return /*#__PURE__*/external_react_default.a.createElement(external_react_default.a.Fragment, null, /*#__PURE__*/external_react_default.a.createElement(StyledBox, Normal_extends({
         key: "control",
         "data-test-values": JSON.stringify(currentValues),
         inline: inline,
@@ -1446,15 +1452,16 @@ var Normal_Normal = /*#__PURE__*/function (_Component) {
         flex: true,
         elementRef: this.handleMount,
         role: "listbox",
-        "aria-disabled": disabled || undefined
-      }), /*#__PURE__*/external_react_default.a.createElement(ScreenReaderContent_default.a, {
-        role: "status",
-        "aria-live": "polite"
-      }, this.state.loadingMoreMessage), this.renderButtons(selectedItems), !disabled && /*#__PURE__*/external_react_default.a.createElement(StyledInputWrapper, {
+        "aria-disabled": disabled || undefined,
+        "aria-labelledby": labelledBy,
+        "aria-invalid": error,
+        "aria-multiselectable": "true"
+      }, subsetAriaProps), this.renderButtons(selectedItems), !disabled && /*#__PURE__*/external_react_default.a.createElement(StyledInputWrapper, {
         role: "combobox",
         "aria-owns": this.state.open ? this.popoverId : undefined,
         "aria-haspopup": true,
-        "aria-expanded": this.state.open
+        "aria-expanded": this.state.open,
+        "aria-controls": this.state.open ? this.popoverId : undefined
       }, /*#__PURE__*/external_react_default.a.createElement(StyledInput, Normal_extends({
         "data-test": "textbox",
         id: inputId,
@@ -1475,8 +1482,7 @@ var Normal_Normal = /*#__PURE__*/function (_Component) {
         },
         placeholder: currentValues.length ? '' : placeholder,
         required: required,
-        "aria-activedescendant": this.state.open && this.availableOptionCount > 0 ? this.activeItemId : undefined,
-        "aria-controls": this.state.open ? this.popoverId : undefined
+        "aria-activedescendant": this.state.open && this.availableOptionCount > 0 ? this.activeItemId : undefined
       }, ariaProps))), !disabled && /*#__PURE__*/external_react_default.a.createElement(Popover_default.a, {
         open: this.state.open && !!this.state.el,
         autoCloseWhenOffScreen: true,
@@ -1486,11 +1492,14 @@ var Normal_Normal = /*#__PURE__*/function (_Component) {
         defaultPlacement: defaultPlacement,
         repositionMode: repositionMode,
         id: this.popoverId
-      }, this.renderMenu)), useClickawayOverlay && this.state.open ? /*#__PURE__*/external_react_default.a.createElement(StyledOverlay, {
+      }, this.renderMenu)), /*#__PURE__*/external_react_default.a.createElement(ScreenReaderContent_default.a, {
+        role: "status",
+        "aria-live": "polite"
+      }, this.state.loadingMoreMessage), useClickawayOverlay && this.state.open ? /*#__PURE__*/external_react_default.a.createElement(StyledOverlay, {
         key: "overlay",
         $popoveropen: this.state.open,
         "data-test": "overlay"
-      }) : null];
+      }) : null);
     }
   }]);
 
@@ -2130,7 +2139,7 @@ var external_prop_types_ = __webpack_require__(1);
 var external_prop_types_default = /*#__PURE__*/__webpack_require__.n(external_prop_types_);
 
 // EXTERNAL MODULE: external "lodash/castArray"
-var castArray_ = __webpack_require__(64);
+var castArray_ = __webpack_require__(65);
 var castArray_default = /*#__PURE__*/__webpack_require__.n(castArray_);
 
 // EXTERNAL MODULE: external "lodash/find"
@@ -2947,7 +2956,7 @@ var SelectBase_SelectBase = /*#__PURE__*/function (_Component) {
         'aria-describedby': describedBy,
         'aria-label': "".concat(labelText ? "".concat(labelText, ", ") : '').concat(ariaLabel),
         'aria-labelledby': labelText ? undefined : labelledBy,
-        'aria-multiselectable': multiple,
+        'aria-multiselectable': multiple || undefined,
         'aria-required': required,
         'data-select-appearance': appearance,
         'data-test': multiple ? 'multiselect' : 'select',
@@ -2983,7 +2992,8 @@ var SelectBase_SelectBase = /*#__PURE__*/function (_Component) {
         icon: icon,
         inline: inline,
         isMenu: true,
-        role: "listbox" // @ts-expect-error - accept inconsistency with Button
+        "aria-haspopup": "listbox",
+        "aria-owns": _this.menuId // @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, {
@@ -3389,7 +3399,6 @@ var SelectBase_SelectBase = /*#__PURE__*/function (_Component) {
         "aria-expanded": "true",
         "aria-label": Object(i18n_["_"])('Filter'),
         "aria-activedescendant": this.activeItemId,
-        "aria-controls": this.menuId,
         inputRef: inputRef,
         inputId: inputId,
         canClear: true,
@@ -3431,8 +3440,9 @@ var SelectBase_SelectBase = /*#__PURE__*/function (_Component) {
           minWidth: anchorWidth !== null && anchorWidth !== void 0 ? anchorWidth : undefined,
           maxWidth: Math.max(anchorWidth !== null && anchorWidth !== void 0 ? anchorWidth : 0, 300)
         };
+        var tabIndex = currentValues.length > 0 && !isAnyValueSelected && !_this2.hasFilter() ? 0 : undefined;
         return /*#__PURE__*/external_react_default.a.createElement(ResultsMenu_default.a, _extends({
-          "aria-multiselectable": multiple,
+          "aria-multiselectable": multiple || undefined,
           childrenStart: _this2.renderControls({
             placement: placement,
             hasChildren: !!finalChildren.length
@@ -3446,7 +3456,7 @@ var SelectBase_SelectBase = /*#__PURE__*/function (_Component) {
           id: _this2.menuId
         }, pick_default()(_this2.props, 'noOptionsMessage', 'footerMessage', 'animateLoading', 'loadingMessage', 'onScroll'), {
           style: _objectSpread(_objectSpread({}, internalMenuStyle), _this2.props.menuStyle),
-          tabIndex: currentValues.length > 0 && !isAnyValueSelected ? 0 : undefined
+          tabIndex: tabIndex
         }), finalChildren);
       };
 
@@ -3490,24 +3500,24 @@ _defineProperty(SelectBase_SelectBase, "invalidLinkAppearanceProps", ['append',
 
 /***/ }),
 
-/***/ 64:
+/***/ 61:
 /***/ (function(module, exports) {
 
-module.exports = require("lodash/castArray");
+module.exports = require("lodash/pickBy");
 
 /***/ }),
 
-/***/ 7:
+/***/ 65:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/ui-utils/keyboard");
+module.exports = require("lodash/castArray");
 
 /***/ }),
 
-/***/ 71:
+/***/ 7:
 /***/ (function(module, exports) {
 
-module.exports = require("lodash/pickBy");
+module.exports = require("@splunk/ui-utils/keyboard");
 
 /***/ }),
 

package/Paginator.js

@@ -186,7 +186,7 @@ var omit_ = __webpack_require__(5);
 var omit_default = /*#__PURE__*/__webpack_require__.n(omit_);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/ButtonSimple"
-var ButtonSimple_ = __webpack_require__(61);
+var ButtonSimple_ = __webpack_require__(62);
 var ButtonSimple_default = /*#__PURE__*/__webpack_require__.n(ButtonSimple_);
 
 // CONCATENATED MODULE: ./src/Paginator/ButtonStyles.ts
@@ -319,7 +319,7 @@ _defineProperty(Button_PaginatorButton, "defaultProps", defaultProps);
 
 /* harmony default export */ var Button = (Button_PaginatorButton);
 // EXTERNAL MODULE: external "@splunk/react-icons/enterprise/ChevronLeft"
-var ChevronLeft_ = __webpack_require__(63);
+var ChevronLeft_ = __webpack_require__(64);
 var ChevronLeft_default = /*#__PURE__*/__webpack_require__.n(ChevronLeft_);
 
 // EXTERNAL MODULE: external "@splunk/react-icons/ChevronLeft"
@@ -591,14 +591,14 @@ module.exports = require("@splunk/react-ui/Box");
 
 /***/ }),
 
-/***/ 61:
+/***/ 62:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/ButtonSimple");
 
 /***/ }),
 
-/***/ 63:
+/***/ 64:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-icons/enterprise/ChevronLeft");

package/Popover.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 183);
+/******/ 	return __webpack_require__(__webpack_require__.s = 184);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -246,7 +246,7 @@ function getWindow() {
 
 /***/ }),
 
-/***/ 183:
+/***/ 184:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -297,7 +297,7 @@ var isFinite_ = __webpack_require__(19);
 var isFinite_default = /*#__PURE__*/__webpack_require__.n(isFinite_);
 
 // EXTERNAL MODULE: external "lodash/isFunction"
-var isFunction_ = __webpack_require__(68);
+var isFunction_ = __webpack_require__(69);
 var isFunction_default = /*#__PURE__*/__webpack_require__.n(isFunction_);
 
 // EXTERNAL MODULE: external "lodash/keys"
@@ -1634,7 +1634,7 @@ module.exports = require("lodash/defer");
 
 /***/ }),
 
-/***/ 68:
+/***/ 69:
 /***/ (function(module, exports) {
 
 module.exports = require("lodash/isFunction");

package/Progress.js

@@ -138,7 +138,7 @@ var external_styled_components_ = __webpack_require__(3);
 var external_styled_components_default = /*#__PURE__*/__webpack_require__.n(external_styled_components_);
 
 // EXTERNAL MODULE: external "tinycolor2"
-var external_tinycolor2_ = __webpack_require__(66);
+var external_tinycolor2_ = __webpack_require__(67);
 var external_tinycolor2_default = /*#__PURE__*/__webpack_require__.n(external_tinycolor2_);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/Tooltip"
@@ -348,7 +348,7 @@ module.exports = require("@splunk/react-ui/Box");
 
 /***/ }),
 
-/***/ 66:
+/***/ 67:
 /***/ (function(module, exports) {
 
 module.exports = require("tinycolor2");

package/RadioBar.js

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

package/RadioList.js

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

package/Select.js

@@ -1007,7 +1007,7 @@ var external_prop_types_ = __webpack_require__(1);
 var external_prop_types_default = /*#__PURE__*/__webpack_require__.n(external_prop_types_);
 
 // EXTERNAL MODULE: external "lodash/castArray"
-var castArray_ = __webpack_require__(64);
+var castArray_ = __webpack_require__(65);
 var castArray_default = /*#__PURE__*/__webpack_require__.n(castArray_);
 
 // EXTERNAL MODULE: external "lodash/find"
@@ -1824,7 +1824,7 @@ var SelectBase_SelectBase = /*#__PURE__*/function (_Component) {
         'aria-describedby': describedBy,
         'aria-label': "".concat(labelText ? "".concat(labelText, ", ") : '').concat(ariaLabel),
         'aria-labelledby': labelText ? undefined : labelledBy,
-        'aria-multiselectable': multiple,
+        'aria-multiselectable': multiple || undefined,
         'aria-required': required,
         'data-select-appearance': appearance,
         'data-test': multiple ? 'multiselect' : 'select',
@@ -1860,7 +1860,8 @@ var SelectBase_SelectBase = /*#__PURE__*/function (_Component) {
         icon: icon,
         inline: inline,
         isMenu: true,
-        role: "listbox" // @ts-expect-error - accept inconsistency with Button
+        "aria-haspopup": "listbox",
+        "aria-owns": _this.menuId // @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, {
@@ -2266,7 +2267,6 @@ var SelectBase_SelectBase = /*#__PURE__*/function (_Component) {
         "aria-expanded": "true",
         "aria-label": Object(i18n_["_"])('Filter'),
         "aria-activedescendant": this.activeItemId,
-        "aria-controls": this.menuId,
         inputRef: inputRef,
         inputId: inputId,
         canClear: true,
@@ -2308,8 +2308,9 @@ var SelectBase_SelectBase = /*#__PURE__*/function (_Component) {
           minWidth: anchorWidth !== null && anchorWidth !== void 0 ? anchorWidth : undefined,
           maxWidth: Math.max(anchorWidth !== null && anchorWidth !== void 0 ? anchorWidth : 0, 300)
         };
+        var tabIndex = currentValues.length > 0 && !isAnyValueSelected && !_this2.hasFilter() ? 0 : undefined;
         return /*#__PURE__*/external_react_default.a.createElement(ResultsMenu_default.a, _extends({
-          "aria-multiselectable": multiple,
+          "aria-multiselectable": multiple || undefined,
           childrenStart: _this2.renderControls({
             placement: placement,
             hasChildren: !!finalChildren.length
@@ -2323,7 +2324,7 @@ var SelectBase_SelectBase = /*#__PURE__*/function (_Component) {
           id: _this2.menuId
         }, pick_default()(_this2.props, 'noOptionsMessage', 'footerMessage', 'animateLoading', 'loadingMessage', 'onScroll'), {
           style: _objectSpread(_objectSpread({}, internalMenuStyle), _this2.props.menuStyle),
-          tabIndex: currentValues.length > 0 && !isAnyValueSelected ? 0 : undefined
+          tabIndex: tabIndex
         }), finalChildren);
       };
 
@@ -2367,7 +2368,7 @@ _defineProperty(SelectBase_SelectBase, "invalidLinkAppearanceProps", ['append',
 
 /***/ }),
 
-/***/ 64:
+/***/ 65:
 /***/ (function(module, exports) {
 
 module.exports = require("lodash/castArray");

package/Slider.js

@@ -189,7 +189,7 @@ var external_styled_components_ = __webpack_require__(3);
 var external_styled_components_default = /*#__PURE__*/__webpack_require__.n(external_styled_components_);
 
 // EXTERNAL MODULE: external "tinycolor2"
-var external_tinycolor2_ = __webpack_require__(66);
+var external_tinycolor2_ = __webpack_require__(67);
 var external_tinycolor2_default = /*#__PURE__*/__webpack_require__.n(external_tinycolor2_);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/Box"
@@ -819,7 +819,7 @@ module.exports = require("@splunk/react-ui/Box");
 
 /***/ }),
 
-/***/ 66:
+/***/ 67:
 /***/ (function(module, exports) {
 
 module.exports = require("tinycolor2");

package/StepBar.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 186);
+/******/ 	return __webpack_require__(__webpack_require__.s = 187);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -101,7 +101,7 @@ module.exports = require("prop-types");
 
 /***/ }),
 
-/***/ 186:
+/***/ 187:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -124,7 +124,7 @@ var external_prop_types_default = /*#__PURE__*/__webpack_require__.n(external_pr
 var id_ = __webpack_require__(8);
 
 // EXTERNAL MODULE: external "@splunk/themes/useSplunkTheme"
-var useSplunkTheme_ = __webpack_require__(67);
+var useSplunkTheme_ = __webpack_require__(68);
 var useSplunkTheme_default = /*#__PURE__*/__webpack_require__.n(useSplunkTheme_);
 
 // EXTERNAL MODULE: external "styled-components"
@@ -132,11 +132,11 @@ var external_styled_components_ = __webpack_require__(3);
 var external_styled_components_default = /*#__PURE__*/__webpack_require__.n(external_styled_components_);
 
 // EXTERNAL MODULE: external "@splunk/react-icons/CheckCircle"
-var CheckCircle_ = __webpack_require__(69);
+var CheckCircle_ = __webpack_require__(70);
 var CheckCircle_default = /*#__PURE__*/__webpack_require__.n(CheckCircle_);
 
 // EXTERNAL MODULE: external "@splunk/react-icons/ExclamationCircle"
-var ExclamationCircle_ = __webpack_require__(70);
+var ExclamationCircle_ = __webpack_require__(71);
 var ExclamationCircle_default = /*#__PURE__*/__webpack_require__.n(ExclamationCircle_);
 
 // EXTERNAL MODULE: external "@splunk/themes"
@@ -437,21 +437,21 @@ module.exports = require("styled-components");
 
 /***/ }),
 
-/***/ 67:
+/***/ 68:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/themes/useSplunkTheme");
 
 /***/ }),
 
-/***/ 69:
+/***/ 70:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-icons/CheckCircle");
 
 /***/ }),
 
-/***/ 70:
+/***/ 71:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-icons/ExclamationCircle");

package/TabBar.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 = 182);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -142,7 +142,7 @@ module.exports = require("@splunk/react-ui/ScreenReaderContent");
 
 /***/ }),
 
-/***/ 187:
+/***/ 182:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -253,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"])({
@@ -333,14 +333,23 @@ var StyledTooltipContent = external_styled_components_default.a.div.withConfig({
   componentId: "sc-1ry8mzj-5"
 })(["padding:8px;font-size:", ";"], themes_["variables"].fontSizeSmall);
 
-// EXTERNAL MODULE: ./src/utils/updateReactRef.ts
-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/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); }
 
@@ -380,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,
@@ -390,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 */
@@ -496,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,
@@ -548,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, {

package/Table.js

@@ -467,13 +467,13 @@ module.exports = require("lodash/without");
 /* 65 */,
 /* 66 */,
 /* 67 */,
-/* 68 */
+/* 68 */,
+/* 69 */
 /***/ (function(module, exports) {
 
 module.exports = require("lodash/isFunction");
 
 /***/ }),
-/* 69 */,
 /* 70 */,
 /* 71 */,
 /* 72 */,
@@ -3738,7 +3738,7 @@ var isFinite_ = __webpack_require__(19);
 var isFinite_default = /*#__PURE__*/__webpack_require__.n(isFinite_);
 
 // EXTERNAL MODULE: external "lodash/isFunction"
-var isFunction_ = __webpack_require__(68);
+var isFunction_ = __webpack_require__(69);
 var isFunction_default = /*#__PURE__*/__webpack_require__.n(isFunction_);
 
 // EXTERNAL MODULE: external "@splunk/ui-utils/id"

package/Text.js

@@ -194,7 +194,7 @@ var omit_ = __webpack_require__(5);
 var omit_default = /*#__PURE__*/__webpack_require__.n(omit_);
 
 // EXTERNAL MODULE: external "lodash/pickBy"
-var pickBy_ = __webpack_require__(71);
+var pickBy_ = __webpack_require__(61);
 var pickBy_default = /*#__PURE__*/__webpack_require__.n(pickBy_);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/ControlGroup"
@@ -1354,7 +1354,7 @@ module.exports = require("@splunk/react-ui/Box");
 
 /***/ }),
 
-/***/ 71:
+/***/ 61:
 /***/ (function(module, exports) {
 
 module.exports = require("lodash/pickBy");

package/TextArea.js

@@ -209,7 +209,7 @@ var omit_ = __webpack_require__(5);
 var omit_default = /*#__PURE__*/__webpack_require__.n(omit_);
 
 // EXTERNAL MODULE: external "lodash/pickBy"
-var pickBy_ = __webpack_require__(71);
+var pickBy_ = __webpack_require__(61);
 var pickBy_default = /*#__PURE__*/__webpack_require__.n(pickBy_);
 
 // EXTERNAL MODULE: external "lodash/throttle"
@@ -1018,6 +1018,8 @@ var TextArea_TextArea = /*#__PURE__*/function (_Component) {
 
     if (false) {}
 
+    if (false) {}
+
     TextArea.validateRows(props);
     _this.handleResize = throttle_default()(_this.handleResize, 100);
     return _this;
@@ -1310,7 +1312,7 @@ module.exports = require("@splunk/react-ui/Box");
 
 /***/ }),
 
-/***/ 71:
+/***/ 61:
 /***/ (function(module, exports) {
 
 module.exports = require("lodash/pickBy");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splunk/react-ui",
-  "version": "4.17.0",
+  "version": "4.17.1",
   "description": "Library of React components that implement the Splunk design language",
   "license": "Apache-2.0",
   "author": "Splunk Inc.",
@@ -35,11 +35,11 @@
   "peerDependencies": {
     "react": "^16.8",
     "react-dom": "^16.8",
-    "styled-components": "5.1.1"
+    "styled-components": "^5.3.10"
   },
   "dependencies": {
-    "@splunk/react-icons": "^4.0.0",
-    "@splunk/themes": "^0.16.0",
+    "@splunk/react-icons": "^4.0.1",
+    "@splunk/themes": "^0.16.1",
     "@splunk/ui-utils": "^1.6.0",
     "@types/commonmark": "^0.27.0",
     "@types/lodash": "^4.14.156",
@@ -138,7 +138,7 @@
     "react-dom": "^16.12.0",
     "react-test-renderer": "^16.13.1",
     "sinon": "^2.1.0",
-    "styled-components": "5.1.1",
+    "styled-components": "^5.3.10",
     "stylelint": "^13.0.0",
     "ts-loader": "^6.2.1",
     "typescript": "^4.0.5",

package/stubs-splunkui.d.ts

@@ -78,30 +78,6 @@ declare module '@splunk/ui-utils/userAgent' {
     function isIE11(): boolean;
 }
 
-declare module '@splunk/wdio-functional-test-runner/testUtils' {
-    function isEdge(): boolean;
-    function isFirefox(): boolean;
-    function isIE(): boolean;
-    function isSafari(): boolean;
-
-    function clickAndDragElement(options: {
-        selector: string | Function;
-        locationOffsetX?: number;
-        locationOffsetY?: number;
-        x?: number;
-        y?: number;
-        immediateRelease?: boolean;
-    }): (() => {}) | undefined;
-
-    function focusOnSelector(selector: string): void;
-    function resetFocus(): void;
-    function setTextValue(
-        selector: string | Function,
-        value: string,
-        options?: { click?: boolean }
-    );
-}
-
 declare module '@splunk/react-docs/DocExample' {
     function getDependencyVersions(
         packageJSON: Record<string, unknown>,

package/types/src/Multiselect/Normal.d.ts

@@ -176,6 +176,6 @@ declare class Normal extends Component<NormalProps, NormalState> {
     private removeValue;
     private renderButtons;
     private renderMenu;
-    render(): (JSX.Element | null)[];
+    render(): JSX.Element;
 }
 export default Normal;

package/types/src/TabBar/Tab.d.ts

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
-import { ClassComponentProps } from '../utils/types';
 import TabBarContext from './TabBarContext';
+import { ClassComponentProps } from '../utils/types';
 declare type TabClickHandler = (event: React.MouseEvent<HTMLButtonElement>, data: {
     tabId?: string;
     tabKey?: number;
@@ -34,6 +34,8 @@ interface TabPropsBase {
     id?: string;
     /** The text shown in the button. */
     label?: React.ReactNode;
+    /** @private Maximum count number in tab label */
+    maxCount?: number;
     ref?: React.Ref<Tab>;
     /** A unique `id` for this tab and used by the `TabBar` to keep track of the open tab. */
     tabId?: string;

package/types/src/TextArea/TextArea.d.ts

@@ -8,7 +8,12 @@ declare type TextAreaChangeHandler = (event: React.ChangeEvent<HTMLTextAreaEleme
     value: string;
 }) => void;
 interface TextAreaPropsBase {
-    /** Setting the appearance to search will create a rounded input. */
+    /**
+     * @deprecated The `search` appearance has been marked for deprecation and will be removed in a future major version.
+     *
+     * Setting the appearance to search will create a rounded input.
+     * @private.
+     */
     appearance?: 'default' | 'search';
     /** Append removes rounded borders and the border from the right side. */
     append?: boolean;
@@ -28,9 +33,11 @@ interface TextAreaPropsBase {
     autoCorrect?: string;
     /** Specify that the input should request focus when mounted. */
     autoFocus?: boolean;
-    /** Include an "X" button to clear the value.
-     * If the `appearance` prop is set to `search` or if `passwordVisibilityToggle` is true,
-     * this prop is ignored. */
+    /**
+     * @deprecated This prop has been marked for deprecation and will be removed in a future major version.
+     *
+     * Include an "X" button to clear the value.
+     * */
     canClear?: boolean;
     children?: React.ReactNode;
     /** @private. */

package/types/src/TextArea/docs/examples/ClearContent.d.ts

@@ -0,0 +1,2 @@
+declare const ClearContent: () => JSX.Element;
+export default ClearContent;