@splunk/react-ui 4.5.3 → 4.6.0

package/Text.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 121);
+/******/ 	return __webpack_require__(__webpack_require__.s = 126);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -101,20 +101,13 @@ module.exports = require("prop-types");
 
 /***/ }),
 
-/***/ 103:
+/***/ 105:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/ControlGroup");
 
 /***/ }),
 
-/***/ 104:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/react-icons/Search");
-
-/***/ }),
-
 /***/ 11:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
@@ -142,7 +135,7 @@ function updateReactRef(ref, current) {
 
 /***/ }),
 
-/***/ 121:
+/***/ 126:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -178,58 +171,14 @@ var ScreenReaderContent_default = /*#__PURE__*/__webpack_require__.n(ScreenReade
 var themes_ = __webpack_require__(0);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/ControlGroup"
-var ControlGroup_ = __webpack_require__(103);
+var ControlGroup_ = __webpack_require__(105);
 
 // EXTERNAL MODULE: external "@splunk/ui-utils/i18n"
 var i18n_ = __webpack_require__(5);
 
-// EXTERNAL MODULE: external "@splunk/react-icons/Search"
-var Search_ = __webpack_require__(104);
-var Search_default = /*#__PURE__*/__webpack_require__.n(Search_);
-
-// EXTERNAL MODULE: ./src/icons/ThemedIcon.tsx
-var ThemedIcon = __webpack_require__(7);
-
-// EXTERNAL MODULE: ./src/icons/SVG.tsx
-var SVG = __webpack_require__(6);
-
-// CONCATENATED MODULE: ./src/icons/Search.tsx
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-
-
-
+// EXTERNAL MODULE: ./src/icons/Search.tsx
+var Search = __webpack_require__(43);
 
-
-function Prisma24(_ref) {
-  var otherProps = _extends({}, _ref);
-
-  return /*#__PURE__*/external_react_default.a.createElement(SVG["a" /* default */], _extends({
-    viewBox: "0 0 24 24"
-  }, otherProps), /*#__PURE__*/external_react_default.a.createElement("path", {
-    d: "M10.5,3.0015 C14.6421,3.0015 18,6.3593 18,10.5015 C18,12.2112 17.4279,13.7873 16.4647,15.0489 L20.7077,19.292 C21.0983,19.6825 21.0983,20.3156 20.7077,20.7062 C20.3172,21.0967 19.6841,21.0967 19.2935,20.7062 L15.0509,16.4635 C13.7888,17.4283 12.2113,18.0015 10.5,18.0015 C6.3579,18.0015 3,14.6436 3,10.5015 C3,6.3593 6.3579,3.0015 10.5,3.0015 Z M10.5,5.0015 C7.4624,5.0015 5,7.4639 5,10.5015 C5,13.539 7.4624,16.0015 10.5,16.0015 C13.5376,16.0015 16,13.539 16,10.5015 C16,7.4639 13.5376,5.0015 10.5,5.0015 Z",
-    fill: "currentColor"
-  }));
-}
-
-function Prisma16(_ref2) {
-  var otherProps = _extends({}, _ref2);
-
-  return /*#__PURE__*/external_react_default.a.createElement(SVG["a" /* default */], _extends({
-    viewBox: "0 0 16 16"
-  }, otherProps), /*#__PURE__*/external_react_default.a.createElement("path", {
-    d: "M6.85277,2.0015 C9.53288,2.0015 11.7055,4.1741 11.7055,6.8542 C11.7055,7.8463 11.4079,8.7688 10.897,9.5373 L10.9245,9.5098 L14.0018,12.5871 L12.5876,14.0014 L9.51025,10.924 L9.53587,10.8984 C8.76733,11.4093 7.84481,11.707 6.85277,11.707 C4.17266,11.707 2,9.5343 2,6.8542 C2,4.1741 4.17266,2.0015 6.85277,2.0015 Z M6.85277,4.0015 C5.27723,4.0015 4,5.2787 4,6.8542 C4,8.4298 5.27723,9.707 6.85277,9.707 C8.42831,9.707 9.70554,8.4298 9.70554,6.8542 C9.70554,5.2787 8.42831,4.0015 6.85277,4.0015 Z",
-    fill: "currentColor"
-  }));
-}
-
-function Search(props) {
-  return /*#__PURE__*/external_react_default.a.createElement(ThemedIcon["a" /* default */], _extends({
-    Enterprise: Search_default.a,
-    Prisma16: Prisma16,
-    Prisma24: Prisma24
-  }, props));
-}
 // EXTERNAL MODULE: ./src/icons/CrossMark.tsx
 var CrossMark = __webpack_require__(22);
 
@@ -316,7 +265,7 @@ var SVG_ = __webpack_require__(23);
 var SVG_default = /*#__PURE__*/__webpack_require__.n(SVG_);
 
 // CONCATENATED MODULE: ./src/Text/IconOutlinedHide.tsx
-function IconOutlinedHide_extends() { IconOutlinedHide_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 IconOutlinedHide_extends.apply(this, arguments); }
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 
 
@@ -329,7 +278,7 @@ function IconOutlinedHide(props) {
       density = _useSplunkTheme.density;
 
   if (family === 'enterprise') {
-    return /*#__PURE__*/external_react_default.a.createElement(SVG_default.a, IconOutlinedHide_extends({
+    return /*#__PURE__*/external_react_default.a.createElement(SVG_default.a, _extends({
       viewBox: "0 0 24 24",
       size: 1.2,
       screenReaderText: Object(i18n_["_"])('Hide password')
@@ -582,7 +531,10 @@ var StyledInput = external_styled_components_default.a.input.withConfig({
 }), themes_["variables"].contentColorMuted, function (_ref9) {
   var $error = _ref9.$error;
   return $error && Object(external_styled_components_["css"])(["&,&:hover{color:", ";}"], Object(themes_["pick"])({
-    enterprise: themes_["variables"].errorColor,
+    enterprise: {
+      light: themes_["variables"].errorColorD10,
+      dark: themes_["variables"].errorColorL20
+    },
     prisma: themes_["variables"].contentColorActive
   }));
 }, function (_ref10) {
@@ -824,6 +776,7 @@ var propTypes = {
   onFocus: external_prop_types_default.a.func,
   onKeyDown: external_prop_types_default.a.func,
   onSelect: external_prop_types_default.a.func,
+  onInputClick: external_prop_types_default.a.func,
   placeholder: external_prop_types_default.a.string,
   prepend: external_prop_types_default.a.bool,
   rowsMax: external_prop_types_default.a.number,
@@ -950,38 +903,41 @@ var Text_Text = /*#__PURE__*/function (_Component) {
       (_this$props$onSelect = (_this$props3 = _this.props).onSelect) === null || _this$props$onSelect === void 0 ? void 0 : _this$props$onSelect.call(_this$props3, e);
     });
 
+    _defineProperty(_assertThisInitialized(_this), "handleInputClick", function (e) {
+      var _this$props$onInputCl, _this$props4;
+
+      (_this$props$onInputCl = (_this$props4 = _this.props).onInputClick) === null || _this$props$onInputCl === void 0 ? void 0 : _this$props$onInputCl.call(_this$props4, e);
+    });
+
     _defineProperty(_assertThisInitialized(_this), "handleInputFocus", function (e) {
-      var _this$props$onFocus, _this$props4;
+      var _this$props$onFocus, _this$props5;
 
-      (_this$props$onFocus = (_this$props4 = _this.props).onFocus) === null || _this$props$onFocus === void 0 ? void 0 : _this$props$onFocus.call(_this$props4, e);
+      (_this$props$onFocus = (_this$props5 = _this.props).onFocus) === null || _this$props$onFocus === void 0 ? void 0 : _this$props$onFocus.call(_this$props5, e);
     });
 
     _defineProperty(_assertThisInitialized(_this), "handleInputBlur", function (e) {
-      var _this$props$onBlur, _this$props5;
+      var _this$props$onBlur, _this$props6;
 
-      (_this$props$onBlur = (_this$props5 = _this.props).onBlur) === null || _this$props$onBlur === void 0 ? void 0 : _this$props$onBlur.call(_this$props5, e);
+      (_this$props$onBlur = (_this$props6 = _this.props).onBlur) === null || _this$props$onBlur === void 0 ? void 0 : _this$props$onBlur.call(_this$props6, e);
     });
 
     _defineProperty(_assertThisInitialized(_this), "handleClear", function (e) {
-      // Only respond to left mouse button.
-      if (e.button === 0) {
-        var _this$props$onChange2, _this$props6;
-
-        e.preventDefault();
-        var value = '';
-        var name = _this.props.name;
-
-        if (!_this.isControlled()) {
-          _this.setState({
-            value: value
-          });
-        }
-
-        (_this$props$onChange2 = (_this$props6 = _this.props).onChange) === null || _this$props$onChange2 === void 0 ? void 0 : _this$props$onChange2.call(_this$props6, e, {
-          value: value,
-          name: name
+      var _this$props$onChange2, _this$props7;
+
+      e.preventDefault();
+      var value = '';
+      var name = _this.props.name;
+
+      if (!_this.isControlled()) {
+        _this.setState({
+          value: value
         });
       }
+
+      (_this$props$onChange2 = (_this$props7 = _this.props).onChange) === null || _this$props$onChange2 === void 0 ? void 0 : _this$props$onChange2.call(_this$props7, e, {
+        value: value,
+        name: name
+      });
     });
 
     _defineProperty(_assertThisInitialized(_this), "handleVisibilityToggle", function () {
@@ -1011,13 +967,13 @@ var Text_Text = /*#__PURE__*/function (_Component) {
     _defineProperty(_assertThisInitialized(_this), "renderEndAdornment", function () {
       var _controlGroupContext$;
 
-      var _this$props7 = _this.props,
-          appearance = _this$props7.appearance,
-          endAdornment = _this$props7.endAdornment,
-          passwordVisibilityToggle = _this$props7.passwordVisibilityToggle,
-          disabled = _this$props7.disabled,
-          canClear = _this$props7.canClear,
-          splunkTheme = _this$props7.splunkTheme;
+      var _this$props8 = _this.props,
+          appearance = _this$props8.appearance,
+          endAdornment = _this$props8.endAdornment,
+          passwordVisibilityToggle = _this$props8.passwordVisibilityToggle,
+          disabled = _this$props8.disabled,
+          canClear = _this$props8.canClear,
+          splunkTheme = _this$props8.splunkTheme;
       var isPrisma = splunkTheme.isPrisma;
       var adornmentProps = {
         ref: function ref(el) {
@@ -1059,7 +1015,7 @@ var Text_Text = /*#__PURE__*/function (_Component) {
           onClick: _this.handleClear
         }), /*#__PURE__*/external_react_default.a.createElement(StyledSearchIconWrapper, {
           $disabled: disabled
-        }, /*#__PURE__*/external_react_default.a.createElement(Search, {
+        }, /*#__PURE__*/external_react_default.a.createElement(Search["a" /* default */], {
           enterpriseSize: "16px",
           inline: false
         })));
@@ -1082,11 +1038,11 @@ var Text_Text = /*#__PURE__*/function (_Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "renderStartAdornment", function () {
-      var _this$props8 = _this.props,
-          appearance = _this$props8.appearance,
-          startAdornment = _this$props8.startAdornment,
-          splunkTheme = _this$props8.splunkTheme,
-          disabled = _this$props8.disabled;
+      var _this$props9 = _this.props,
+          appearance = _this$props9.appearance,
+          startAdornment = _this$props9.startAdornment,
+          splunkTheme = _this$props9.splunkTheme,
+          disabled = _this$props9.disabled;
       var isPrisma = splunkTheme.isPrisma;
       var adornmentProps = {
         ref: function ref(el) {
@@ -1103,7 +1059,7 @@ var Text_Text = /*#__PURE__*/function (_Component) {
       if (isPrisma && appearance === 'search') {
         return /*#__PURE__*/external_react_default.a.createElement(StyledAdornment, adornmentProps, /*#__PURE__*/external_react_default.a.createElement(StyledSearchIconWrapper, {
           $disabled: disabled
-        }, /*#__PURE__*/external_react_default.a.createElement(Search, {
+        }, /*#__PURE__*/external_react_default.a.createElement(Search["a" /* default */], {
           enterpriseSize: "16px",
           inline: false,
           screenReaderText: "Search"
@@ -1189,36 +1145,36 @@ var Text_Text = /*#__PURE__*/function (_Component) {
     value: function render() {
       var _this2 = this;
 
-      var _this$props9 = this.props,
-          append = _this$props9.append,
-          autoCapitalize = _this$props9.autoCapitalize,
-          autoComplete = _this$props9.autoComplete,
-          autoCorrect = _this$props9.autoCorrect,
-          autoFocus = _this$props9.autoFocus,
-          children = _this$props9.children,
-          className = _this$props9.className,
-          classNamePrivate = _this$props9.classNamePrivate,
-          disabled = _this$props9.disabled,
-          describedBy = _this$props9.describedBy,
-          elementRef = _this$props9.elementRef,
-          error = _this$props9.error,
-          inline = _this$props9.inline,
-          inputClassName = _this$props9.inputClassName,
-          inputId = _this$props9.inputId,
-          labelledBy = _this$props9.labelledBy,
-          multiline = _this$props9.multiline,
-          maxLength = _this$props9.maxLength,
-          name = _this$props9.name,
-          passwordVisibilityToggle = _this$props9.passwordVisibilityToggle,
-          placeholder = _this$props9.placeholder,
-          prepend = _this$props9.prepend,
-          spellCheck = _this$props9.spellCheck,
-          tabIndex = _this$props9.tabIndex,
-          title = _this$props9.title,
-          type = _this$props9.type,
-          useSyntheticPlaceholder = _this$props9.useSyntheticPlaceholder,
-          value = _this$props9.value,
-          otherProps = _objectWithoutProperties(_this$props9, ["append", "autoCapitalize", "autoComplete", "autoCorrect", "autoFocus", "children", "className", "classNamePrivate", "disabled", "describedBy", "elementRef", "error", "inline", "inputClassName", "inputId", "labelledBy", "multiline", "maxLength", "name", "passwordVisibilityToggle", "placeholder", "prepend", "spellCheck", "tabIndex", "title", "type", "useSyntheticPlaceholder", "value"]);
+      var _this$props10 = this.props,
+          append = _this$props10.append,
+          autoCapitalize = _this$props10.autoCapitalize,
+          autoComplete = _this$props10.autoComplete,
+          autoCorrect = _this$props10.autoCorrect,
+          autoFocus = _this$props10.autoFocus,
+          children = _this$props10.children,
+          className = _this$props10.className,
+          classNamePrivate = _this$props10.classNamePrivate,
+          disabled = _this$props10.disabled,
+          describedBy = _this$props10.describedBy,
+          elementRef = _this$props10.elementRef,
+          error = _this$props10.error,
+          inline = _this$props10.inline,
+          inputClassName = _this$props10.inputClassName,
+          inputId = _this$props10.inputId,
+          labelledBy = _this$props10.labelledBy,
+          multiline = _this$props10.multiline,
+          maxLength = _this$props10.maxLength,
+          name = _this$props10.name,
+          passwordVisibilityToggle = _this$props10.passwordVisibilityToggle,
+          placeholder = _this$props10.placeholder,
+          prepend = _this$props10.prepend,
+          spellCheck = _this$props10.spellCheck,
+          tabIndex = _this$props10.tabIndex,
+          title = _this$props10.title,
+          type = _this$props10.type,
+          useSyntheticPlaceholder = _this$props10.useSyntheticPlaceholder,
+          value = _this$props10.value,
+          otherProps = _objectWithoutProperties(_this$props10, ["append", "autoCapitalize", "autoComplete", "autoCorrect", "autoFocus", "children", "className", "classNamePrivate", "disabled", "describedBy", "elementRef", "error", "inline", "inputClassName", "inputId", "labelledBy", "multiline", "maxLength", "name", "passwordVisibilityToggle", "placeholder", "prepend", "spellCheck", "tabIndex", "title", "type", "useSyntheticPlaceholder", "value"]);
 
       var ariaProps = _objectSpread(_objectSpread({}, Object(external_lodash_["pickBy"])(otherProps, function (val, key) {
         return key === 'role' || key.indexOf('aria-') === 0;
@@ -1229,7 +1185,7 @@ var Text_Text = /*#__PURE__*/function (_Component) {
         'aria-multiline': multiline
       });
 
-      var boxProps = Object(external_lodash_["omit"])(otherProps, ['inputRef', 'onBlur', 'onChange', 'onFocus', 'onKeyDown', 'onSelect', 'rowsMax', 'rowsMin'].concat(_toConsumableArray(Object(external_lodash_["keys"])(ariaProps))));
+      var boxProps = Object(external_lodash_["omit"])(otherProps, ['inputRef', 'onBlur', 'onChange', 'onFocus', 'onKeyDown', 'onSelect', 'onInputClick', 'rowsMax', 'rowsMin'].concat(_toConsumableArray(Object(external_lodash_["keys"])(ariaProps))));
       var displayValue = this.isControlled() ? value : this.state.value;
       var displayProps = {
         className: Object(style_["toClassName"])(className, inputClassName),
@@ -1253,6 +1209,7 @@ var Text_Text = /*#__PURE__*/function (_Component) {
         onChange: this.handleInputChange,
         onKeyDown: this.handleInputKeyDown,
         onSelect: this.handleInputSelect,
+        onClick: this.handleInputClick,
         onFocus: this.handleInputFocus,
         onBlur: this.handleInputBlur,
         ref: this.handleInputMount,
@@ -1294,6 +1251,7 @@ var Text_Text = /*#__PURE__*/function (_Component) {
         as: "textarea",
         "aria-hidden": "true",
         onChange: external_lodash_["noop"],
+        onClick: this.handleInputClick,
         style: {
           width: '100%',
           position: 'absolute',
@@ -1325,7 +1283,9 @@ var Text_Text = /*#__PURE__*/function (_Component) {
         } : undefined
       }, ariaProps)) : /*#__PURE__*/external_react_default.a.createElement(StyledInput, Text_extends({
         as: multiline ? 'textarea' : undefined
-      }, inputProps)), !disabled && multiline && /*#__PURE__*/external_react_default.a.createElement(EventListener_default.a, {
+      }, inputProps, {
+        onClick: this.handleInputClick
+      })), !disabled && multiline && /*#__PURE__*/external_react_default.a.createElement(EventListener_default.a, {
         target: window,
         eventType: "resize",
         listener: this.handleResize
@@ -1479,6 +1439,63 @@ module.exports = require("lodash");
 
 /***/ }),
 
+/***/ 43:
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* 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__(48);
+/* 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);
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+
+
+
+
+
+function Prisma24(_ref) {
+  var otherProps = _extends({}, _ref);
+
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_SVG__WEBPACK_IMPORTED_MODULE_3__[/* default */ "a"], _extends({
+    viewBox: "0 0 24 24"
+  }, otherProps), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("path", {
+    d: "M10.5,3.0015 C14.6421,3.0015 18,6.3593 18,10.5015 C18,12.2112 17.4279,13.7873 16.4647,15.0489 L20.7077,19.292 C21.0983,19.6825 21.0983,20.3156 20.7077,20.7062 C20.3172,21.0967 19.6841,21.0967 19.2935,20.7062 L15.0509,16.4635 C13.7888,17.4283 12.2113,18.0015 10.5,18.0015 C6.3579,18.0015 3,14.6436 3,10.5015 C3,6.3593 6.3579,3.0015 10.5,3.0015 Z M10.5,5.0015 C7.4624,5.0015 5,7.4639 5,10.5015 C5,13.539 7.4624,16.0015 10.5,16.0015 C13.5376,16.0015 16,13.539 16,10.5015 C16,7.4639 13.5376,5.0015 10.5,5.0015 Z",
+    fill: "currentColor"
+  }));
+}
+
+function Prisma16(_ref2) {
+  var otherProps = _extends({}, _ref2);
+
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_SVG__WEBPACK_IMPORTED_MODULE_3__[/* default */ "a"], _extends({
+    viewBox: "0 0 16 16"
+  }, otherProps), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("path", {
+    d: "M6.85277,2.0015 C9.53288,2.0015 11.7055,4.1741 11.7055,6.8542 C11.7055,7.8463 11.4079,8.7688 10.897,9.5373 L10.9245,9.5098 L14.0018,12.5871 L12.5876,14.0014 L9.51025,10.924 L9.53587,10.8984 C8.76733,11.4093 7.84481,11.707 6.85277,11.707 C4.17266,11.707 2,9.5343 2,6.8542 C2,4.1741 4.17266,2.0015 6.85277,2.0015 Z M6.85277,4.0015 C5.27723,4.0015 4,5.2787 4,6.8542 C4,8.4298 5.27723,9.707 6.85277,9.707 C8.42831,9.707 9.70554,8.4298 9.70554,6.8542 C9.70554,5.2787 8.42831,4.0015 6.85277,4.0015 Z",
+    fill: "currentColor"
+  }));
+}
+
+function Search(props) {
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_ThemedIcon__WEBPACK_IMPORTED_MODULE_2__[/* default */ "a"], _extends({
+    Enterprise: _splunk_react_icons_Search__WEBPACK_IMPORTED_MODULE_1___default.a,
+    Prisma16: Prisma16,
+    Prisma24: Prisma24
+  }, props));
+}
+
+/***/ }),
+
+/***/ 48:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/react-icons/Search");
+
+/***/ }),
+
 /***/ 5:
 /***/ (function(module, exports) {
 

package/Tooltip.js

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

package/TransitionOpen.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 167);
+/******/ 	return __webpack_require__(__webpack_require__.s = 168);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -101,7 +101,7 @@ module.exports = require("prop-types");
 
 /***/ }),
 
-/***/ 167:
+/***/ 168:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -291,7 +291,8 @@ var TransitionOpen_TransitionOpen = /*#__PURE__*/function (_Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "internalRender", function (_ref) {
-      var value = _ref.value;
+      var value = _ref.value,
+          transform = _ref.transform;
       var _this$props2 = _this.props,
           animation = _this$props2.animation,
           className = _this$props2.className,
@@ -304,37 +305,19 @@ var TransitionOpen_TransitionOpen = /*#__PURE__*/function (_Component) {
           outerId = _this$props2.outerId,
           outerStyle = _this$props2.outerStyle;
       var animating = _this.state.animating;
-      var offset = value.to(function (v) {
-        return _this.state.value || 0 - v;
-      });
-      var transform;
       var dimension;
 
       if (animating) {
         switch (animation) {
           case 'slideFromTop':
-            transform = "translateY(-".concat(offset, "px)");
-            dimension = 'height';
-            break;
-
           case 'slideFromBottom':
+          case 'expandHeight':
           case 'none':
             dimension = 'height';
             break;
 
           case 'slideFromLeft':
-            transform = "translateX(".concat(-offset, "px)");
-            dimension = 'width';
-            break;
-
           case 'slideFromRight':
-            dimension = 'width';
-            break;
-
-          case 'expandHeight':
-            dimension = 'height';
-            break;
-
           case 'expandWidth':
             dimension = 'width';
             break;
@@ -365,6 +348,58 @@ var TransitionOpen_TransitionOpen = /*#__PURE__*/function (_Component) {
       }), children));
     });
 
+    _defineProperty(_assertThisInitialized(_this), "getSpringTransition", function () {
+      var _this$props3 = _this.props,
+          open = _this$props3.open,
+          animation = _this$props3.animation;
+      var value = _this.state.value;
+      var toValue = {
+        value: open ? value : 0
+      };
+      var fromValue = {
+        value: open ? 0 : value
+      };
+      var config = {
+        precision: 1
+      }; // Only use precision when not using transform, otherwise transform animation will break
+      // Expansion doesn't require a valid value; the subsequent render animates it.
+
+      if (animation === 'expandWidth' || animation === 'expandHeight' || animation === 'none') {
+        return {
+          to: toValue,
+          config: config
+        };
+      } // Slide transitions require a valid value, render without transition first.
+
+
+      if (!value) {
+        return null;
+      }
+
+      if (animation !== 'slideFromTop' && animation !== 'slideFromLeft') {
+        // Return the standard transition if not using a transform.
+        return {
+          to: toValue,
+          from: fromValue,
+          config: config
+        };
+      } // The top and left directions require an additional transform of their inner content to match the outer dimension animation.
+      // This is needed to achieve a clipping effect from the outer div, rather than the consumer providing their own.
+
+
+      var orientation = animation === 'slideFromTop' ? 'Y' : 'X';
+      var toTransform = "translate".concat(orientation, "(").concat(open ? 0 : -value, "px)");
+      var fromTransform = "translate".concat(orientation, "(").concat(open ? -value : 0, "px)");
+      return {
+        to: _objectSpread({
+          transform: toTransform
+        }, toValue),
+        from: _objectSpread({
+          transform: fromTransform
+        }, fromValue)
+      };
+    });
+
     _this.state = {
       animating: props.animateOnMount ? props.open : false,
       innerEl: null,
@@ -379,7 +414,7 @@ var TransitionOpen_TransitionOpen = /*#__PURE__*/function (_Component) {
     value: function componentDidUpdate() {
       var value = this.getValue(this.state.innerEl);
 
-      if (this.state.value !== value) {
+      if (this.state.value !== value && !this.state.animating) {
         this.setState({
           value: value
         }); // eslint-disable-line react/no-did-update-set-state
@@ -388,21 +423,11 @@ var TransitionOpen_TransitionOpen = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this$props3 = this.props,
-          open = _this$props3.open,
-          animation = _this$props3.animation;
-      var value = this.state.value;
-      var animateTo = open ? value : 0;
-      return /*#__PURE__*/external_react_default.a.createElement(Animation_["Spring"], {
-        to: {
-          value: animateTo || 0
-        },
+      var animation = this.props.animation;
+      return /*#__PURE__*/external_react_default.a.createElement(Animation_["Spring"], _extends({}, this.getSpringTransition(), {
         immediate: animation === 'none',
-        onRest: this.handleRest,
-        config: {
-          precision: 1
-        }
-      }, // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        onRest: this.handleRest
+      }), // eslint-disable-next-line @typescript-eslint/no-explicit-any
       this.internalRender);
     }
   }]);

package/WaitSpinner.js

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

package/cypress/plugins/index.ts

@@ -0,0 +1,15 @@
+/* eslint-env node */
+
+import { startDevServer } from '@cypress/webpack-dev-server';
+import webpackConfig from '../../webpack.test.config';
+
+/**
+ * @type {Cypress.PluginConfig}
+ */
+module.exports = (on, config) => {
+    if (config.testingType === 'component') {
+        on('dev-server:start', (options) => startDevServer({ options, webpackConfig }));
+    }
+
+    return config;
+};

package/cypress/support/commands.ts

@@ -0,0 +1 @@
+import '@testing-library/cypress/add-commands';

package/cypress/support/index.ts

@@ -0,0 +1,9 @@
+import { setGlobalConfig } from '@storybook/testing-react';
+import { configure } from '@testing-library/cypress';
+
+import './commands';
+import * as sbPreview from '../../.storybook/preview';
+
+configure({ testIdAttribute: 'data-test' });
+
+setGlobalConfig(sbPreview);

package/cypress.json

@@ -0,0 +1,12 @@
+{
+  "baseUrl": "http://localhost:8080",
+  "env": {},
+  "defaultCommandTimeout": 1000,
+  "fixturesFolder": false,
+  "video": false,
+  "videoUploadOnPasses": false,
+  "component": {
+    "componentFolder": "src",
+    "testFiles": "**/**/tests/*.spec.tsx"
+  }
+}