@splunk/react-ui 4.17.0 → 4.18.0

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 = 187);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -101,7 +101,7 @@ module.exports = require("prop-types");
 
 /***/ }),
 
-/***/ 185:
+/***/ 187:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";

package/Resize.js

@@ -135,7 +135,7 @@ module.exports = require("@splunk/react-ui/ScreenReaderContent");
 
 /***/ }),
 
-/***/ 15:
+/***/ 16:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/EventListener");
@@ -176,7 +176,7 @@ var omit_ = __webpack_require__(5);
 var omit_default = /*#__PURE__*/__webpack_require__.n(omit_);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/EventListener"
-var EventListener_ = __webpack_require__(15);
+var EventListener_ = __webpack_require__(16);
 var EventListener_default = /*#__PURE__*/__webpack_require__.n(EventListener_);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/ScreenReaderContent"

package/Scroll.js

@@ -128,7 +128,7 @@ function updateReactRef(ref, current) {
 
 /***/ }),
 
-/***/ 15:
+/***/ 16:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/EventListener");
@@ -193,7 +193,7 @@ var omit_default = /*#__PURE__*/__webpack_require__.n(omit_);
 var external_react_spring_ = __webpack_require__(24);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/EventListener"
-var EventListener_ = __webpack_require__(15);
+var EventListener_ = __webpack_require__(16);
 var EventListener_default = /*#__PURE__*/__webpack_require__.n(EventListener_);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/ScrollContainerContext"

package/Select.js

@@ -108,14 +108,14 @@ module.exports = require("lodash/has");
 
 /***/ }),
 
-/***/ 103:
+/***/ 102:
 /***/ (function(module, exports) {
 
 module.exports = require("lodash/forEachRight");
 
 /***/ }),
 
-/***/ 104:
+/***/ 103:
 /***/ (function(module, exports) {
 
 module.exports = require("lodash/uniq");
@@ -129,7 +129,7 @@ module.exports = require("@splunk/react-ui/Menu");
 
 /***/ }),
 
-/***/ 16:
+/***/ 15:
 /***/ (function(module, exports) {
 
 module.exports = require("lodash/includes");
@@ -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"
@@ -1015,7 +1015,7 @@ var find_ = __webpack_require__(52);
 var find_default = /*#__PURE__*/__webpack_require__.n(find_);
 
 // EXTERNAL MODULE: external "lodash/forEachRight"
-var forEachRight_ = __webpack_require__(103);
+var forEachRight_ = __webpack_require__(102);
 var forEachRight_default = /*#__PURE__*/__webpack_require__.n(forEachRight_);
 
 // EXTERNAL MODULE: external "lodash/has"
@@ -1023,7 +1023,7 @@ var has_ = __webpack_require__(10);
 var has_default = /*#__PURE__*/__webpack_require__.n(has_);
 
 // EXTERNAL MODULE: external "lodash/includes"
-var includes_ = __webpack_require__(16);
+var includes_ = __webpack_require__(15);
 var includes_default = /*#__PURE__*/__webpack_require__.n(includes_);
 
 // EXTERNAL MODULE: external "lodash/isUndefined"
@@ -1043,7 +1043,7 @@ var pick_ = __webpack_require__(41);
 var pick_default = /*#__PURE__*/__webpack_require__.n(pick_);
 
 // EXTERNAL MODULE: external "lodash/uniq"
-var uniq_ = __webpack_require__(104);
+var uniq_ = __webpack_require__(103);
 var uniq_default = /*#__PURE__*/__webpack_require__.n(uniq_);
 
 // EXTERNAL MODULE: external "lodash/without"
@@ -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/SidePanel.js

@@ -101,7 +101,7 @@ module.exports = require("prop-types");
 
 /***/ }),
 
-/***/ 102:
+/***/ 101:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/ModalLayer");
@@ -142,7 +142,7 @@ var omit_ = __webpack_require__(5);
 var omit_default = /*#__PURE__*/__webpack_require__.n(omit_);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/ModalLayer"
-var ModalLayer_ = __webpack_require__(102);
+var ModalLayer_ = __webpack_require__(101);
 var ModalLayer_default = /*#__PURE__*/__webpack_require__.n(ModalLayer_);
 
 // EXTERNAL MODULE: external "styled-components"

package/Slider.js

@@ -108,17 +108,17 @@ module.exports = require("lodash/has");
 
 /***/ }),
 
-/***/ 15:
+/***/ 153:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/react-ui/EventListener");
+module.exports = require("decimal.js-light");
 
 /***/ }),
 
-/***/ 153:
+/***/ 16:
 /***/ (function(module, exports) {
 
-module.exports = require("decimal.js-light");
+module.exports = require("@splunk/react-ui/EventListener");
 
 /***/ }),
 
@@ -177,7 +177,7 @@ var keyboard_ = __webpack_require__(7);
 var themes_ = __webpack_require__(0);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/EventListener"
-var EventListener_ = __webpack_require__(15);
+var EventListener_ = __webpack_require__(16);
 var EventListener_default = /*#__PURE__*/__webpack_require__.n(EventListener_);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/Popover"
@@ -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 = 188);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -101,7 +101,7 @@ module.exports = require("prop-types");
 
 /***/ }),
 
-/***/ 186:
+/***/ 188:
 /***/ (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/Switch.js

@@ -152,7 +152,7 @@ var ScreenReaderContent_default = /*#__PURE__*/__webpack_require__.n(ScreenReade
 var id_ = __webpack_require__(8);
 
 // EXTERNAL MODULE: external "@splunk/react-icons/enterprise/Check"
-var Check_ = __webpack_require__(95);
+var Check_ = __webpack_require__(94);
 var Check_default = /*#__PURE__*/__webpack_require__.n(Check_);
 
 // EXTERNAL MODULE: external "@splunk/themes"
@@ -759,7 +759,7 @@ module.exports = require("@splunk/ui-utils/id");
 
 /***/ }),
 
-/***/ 95:
+/***/ 94:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-icons/enterprise/Check");

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 = 183);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -142,7 +142,7 @@ module.exports = require("@splunk/react-ui/ScreenReaderContent");
 
 /***/ }),
 
-/***/ 187:
+/***/ 183:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -194,9 +194,6 @@ var Styled = external_styled_components_default.a.div.withConfig({
   }
 }));
 
-// EXTERNAL MODULE: external "@splunk/ui-utils/id"
-var id_ = __webpack_require__(8);
-
 // EXTERNAL MODULE: external "@splunk/react-ui/Popover"
 var Popover_ = __webpack_require__(21);
 var Popover_default = /*#__PURE__*/__webpack_require__.n(Popover_);
@@ -205,6 +202,9 @@ var Popover_default = /*#__PURE__*/__webpack_require__.n(Popover_);
 var ScreenReaderContent_ = __webpack_require__(14);
 var ScreenReaderContent_default = /*#__PURE__*/__webpack_require__.n(ScreenReaderContent_);
 
+// EXTERNAL MODULE: external "@splunk/ui-utils/id"
+var id_ = __webpack_require__(8);
+
 // EXTERNAL MODULE: external "@splunk/react-ui/Clickable"
 var Clickable_ = __webpack_require__(12);
 var Clickable_default = /*#__PURE__*/__webpack_require__.n(Clickable_);
@@ -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 */
@@ -416,6 +429,8 @@ var Tab_Tab = /*#__PURE__*/function (_Component) {
 
     _defineProperty(_assertThisInitialized(_this), "popoverId", void 0);
 
+    _defineProperty(_assertThisInitialized(_this), "ariaId", void 0);
+
     _defineProperty(_assertThisInitialized(_this), "handleMount", function (el) {
       _this.setState({
         anchor: el
@@ -471,6 +486,7 @@ var Tab_Tab = /*#__PURE__*/function (_Component) {
     });
 
     _this.popoverId = Object(id_["createDOMID"])('popover');
+    _this.ariaId = Object(id_["createDOMID"])('aria-id');
     _this.state = {
       open: false,
       anchor: null
@@ -496,9 +512,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,
@@ -510,55 +527,69 @@ var Tab_Tab = /*#__PURE__*/function (_Component) {
           layout = _this$context.layout,
           widthContext = _this$context.width;
       var style = otherProps.style;
-      var disabledValue = disabledContext || disabled;
+      var disabledValue = disabledContext || disabled || false;
       var iconSizeValue = iconSize || 'inline';
       var layoutValue = layout || 'horizontal';
       var styleValue = widthContext ? {
         width: widthContext
       } : style;
-      return /*#__PURE__*/external_react_default.a.createElement(StyledClickable, _extends({
-        "aria-controls": ariaControls,
-        "aria-selected": active,
-        "data-test": "tab",
-        "data-test-tab-id": tabId,
-        "data-test-popover-id": tooltip ? this.popoverId : undefined,
-        $layout: layoutValue,
-        $icon: icon && iconSizeValue !== 'inline' ? true : undefined,
-        disabled: disabledValue,
-        elementRef: this.handleMount,
-        style: styleValue
-      }, otherProps, {
-        onClick: this.handleClick,
-        onFocus: this.handleFocus,
-        onMouseEnter: this.handleTooltipOpen,
-        onBlur: this.handleTooltipClose,
-        onMouseLeave: this.handleTooltipClose,
-        role: "tab",
-        tabIndex: active ? undefined : -1 // @ts-expect-error - this is problematic, since the label
-        // prop is of type React.ReactNode, which means title
-        // can end up showing as "[object Object]"
-        ,
-        title: label,
-        to: to
-      }), /*#__PURE__*/external_react_default.a.createElement(StyledLabel, {
-        "data-test": "label",
-        $withUnderline: appearance === 'navigation'
-      }, icon && /*#__PURE__*/external_react_default.a.createElement(StyledIcon, {
-        $iconSize: iconSizeValue
-      }, 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, {
-        $layout: layoutValue,
-        $withUnderline: appearance === 'navigation'
-      }), !disabled && tooltip && /*#__PURE__*/external_react_default.a.createElement(Popover_default.a, {
-        anchor: anchor,
-        appearance: "inverted",
-        closeReasons: [],
-        defaultPlacement: layoutValue === 'vertical' ? 'right' : 'above',
-        id: this.popoverId,
-        open: !!anchor && open
-      }, /*#__PURE__*/external_react_default.a.createElement(StyledTooltipContent, null, tooltip)), tooltip && /*#__PURE__*/external_react_default.a.createElement(ScreenReaderContent_default.a, null, tooltip));
+      return (
+        /*#__PURE__*/
+        // TODO: Fix the ts error: https://splunk.atlassian.net/browse/SUI-5569
+        // eslint-disable-next-line
+        // @ts-ignore-next-line
+        external_react_default.a.createElement(StyledClickable, _extends({
+          "aria-controls": ariaControls,
+          "aria-selected": active,
+          "aria-labelledby": this.ariaId,
+          "data-test": "tab",
+          "data-test-tab-id": tabId,
+          "data-test-popover-id": tooltip ? this.popoverId : undefined,
+          $layout: layoutValue,
+          $icon: icon && iconSizeValue !== 'inline' ? true : undefined,
+          disabled: disabledValue,
+          elementRef: this.handleMount,
+          style: styleValue
+        }, otherProps, {
+          onClick: this.handleClick,
+          onFocus: this.handleFocus,
+          onMouseEnter: this.handleTooltipOpen,
+          onBlur: this.handleTooltipClose,
+          onMouseLeave: this.handleTooltipClose,
+          role: "tab",
+          tabIndex: active ? undefined : -1,
+          to: to
+        }), /*#__PURE__*/external_react_default.a.createElement(StyledLabel, {
+          "data-test": "label",
+          $withUnderline: appearance === 'navigation'
+        }, icon && /*#__PURE__*/external_react_default.a.createElement(StyledIcon, {
+          $iconSize: iconSizeValue
+        }, icon), label, (count === 0 || count) && /*#__PURE__*/external_react_default.a.createElement(StyledCount, {
+          "data-test": "count",
+          disabled: disabledValue
+        }, 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, {
+          role: "tooltip",
+          anchor: anchor // override Popover's default animation to make it faster
+          // this keeps the overall amount of time the Tooltip is on-screen the same
+          // even with the increased default closeDelay to address SUI-5116
+          ,
+          animationConfig: {
+            tension: 400
+          },
+          appearance: "inverted",
+          closeReasons: ['offScreen', 'escapeKey'],
+          defaultPlacement: layoutValue === 'vertical' ? 'right' : 'above',
+          id: this.popoverId,
+          open: !!anchor && open,
+          align: "center"
+        }, /*#__PURE__*/external_react_default.a.createElement(StyledTooltipContent, null, tooltip)), tooltip && /*#__PURE__*/external_react_default.a.createElement(ScreenReaderContent_default.a, {
+          "aria-hidden": "true",
+          id: this.ariaId
+        }, tooltip))
+      );
     }
   }]);