@splunk/react-ui 4.15.0 → 4.16.0

package/Animation.js

@@ -102,7 +102,7 @@ __webpack_require__.d(__webpack_exports__, "Transition", function() { return /*
 var external_react_spring_ = __webpack_require__(26);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/AnimationToggle"
-var AnimationToggle_ = __webpack_require__(47);
+var AnimationToggle_ = __webpack_require__(48);
 
 // CONCATENATED MODULE: ./src/Animation/Animation.tsx
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
@@ -158,7 +158,7 @@ module.exports = require("react-spring");
 
 /***/ }),
 
-/***/ 47:
+/***/ 48:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/AnimationToggle");

package/Button.js

@@ -133,7 +133,7 @@ var Dropdown_ = __webpack_require__(24);
 var style_ = __webpack_require__(40);
 
 // EXTERNAL MODULE: ./src/icons/CaretDown.tsx
-var CaretDown = __webpack_require__(50);
+var CaretDown = __webpack_require__(52);
 
 // EXTERNAL MODULE: external "@splunk/react-icons/External"
 var External_ = __webpack_require__(60);
@@ -249,21 +249,25 @@ var StyledContentWrapper = external_styled_components_default.a.span.withConfig(
   displayName: "ButtonStyles__StyledContentWrapper",
   componentId: "eqxqs2-2"
 })(["display:flex;flex-direction:row;justify-content:center;align-items:center;max-width:100%;padding:", ";"], Object(themes_["pick"])({
-  enterprise: Object(themes_["pickVariant"])('$error', {
-    "true": '1px',
-    "false": Object(themes_["pickVariant"])('$appearance', {
+  enterprise: function enterprise(_ref7) {
+    var $error = _ref7.$error;
+
+    if ($error) {
+      return '1px';
+    }
+
+    return Object(themes_["pickVariant"])('$appearance', {
       "default": '0',
       secondary: '0',
-      destructive: '0',
-      // === default
+      destructive: '1px',
       primary: '1px',
       pill: '0',
       toggle: '0',
       // === default
       flat: '0' // === default
 
-    })
-  }),
+    });
+  },
   prisma: Object(themes_["pickVariant"])('$appearance', {
     "default": 0,
     secondary: '1px 0',
@@ -281,8 +285,8 @@ var StyledLabel = external_styled_components_default.a.span.withConfig({
 })(["text-overflow:ellipsis;overflow:hidden;flex:0 1 auto;&:not(:last-child){padding-right:", ";}", ""], Object(themes_["pick"])({
   enterprise: '3px',
   prisma: '10px'
-}), function (_ref7) {
-  var $isMenu = _ref7.$isMenu;
+}), function (_ref8) {
+  var $isMenu = _ref8.$isMenu;
   return $isMenu && Object(external_styled_components_["css"])(["flex:1 1 auto;text-align:left;"]);
 });
 var StyledCaretWrapper = external_styled_components_default.a.span.withConfig({
@@ -376,16 +380,13 @@ var Button_Button = /*#__PURE__*/function (_Component) {
 
   var _super = _createSuper(Button);
 
-  function Button() {
+  // @docs-props-type ButtonPropsBase
+  function Button(props) {
     var _this;
 
     _classCallCheck(this, Button);
 
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _super.call.apply(_super, [this].concat(args));
+    _this = _super.call(this, props);
 
     _defineProperty(_assertThisInitialized(_this), "component", null);
 
@@ -408,6 +409,8 @@ var Button_Button = /*#__PURE__*/function (_Component) {
       _this.component = c;
     });
 
+    if (false) {}
+
     return _this;
   }
 
@@ -466,8 +469,7 @@ var Button_Button = /*#__PURE__*/function (_Component) {
         $inline: inline,
         $hasPrismaIcon: hasPrismaIcon,
         $isIconOnly: isIconOnly,
-        $isMenu: isMenu,
-        status: error ? 'error' : 'normal' // @ts-expect-error - this is problematic for two reasons:
+        $isMenu: isMenu // @ts-expect-error - this is problematic for two reasons:
         // * value is only a valid attribute on button (not on a)
         // * this component's value prop is of type any, which can result
         //   in "[object Object]" attribute values
@@ -558,14 +560,14 @@ module.exports = require("@splunk/ui-utils/style");
 
 /***/ }),
 
-/***/ 50:
+/***/ 52:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return CaretDown; });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _splunk_react_icons_Caret__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(51);
+/* harmony import */ var _splunk_react_icons_Caret__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(53);
 /* harmony import */ var _splunk_react_icons_Caret__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_splunk_react_icons_Caret__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _ThemedIcon__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(7);
 /* harmony import */ var _SVG__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(6);
@@ -596,7 +598,7 @@ function CaretDown(props) {
 
 /***/ }),
 
-/***/ 51:
+/***/ 53:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-icons/Caret");

package/ButtonSimple.js

@@ -307,15 +307,15 @@ var enterprisePrimary = Object(external_styled_components_["css"])(["", ";font-w
   var $selected = _ref9.$selected;
   return $selected && Object(external_styled_components_["css"])(["box-shadow:", ";background-color:", ";"], primarySelectedShadow, themes_["variables"].brandColorD20);
 });
-var enterpriseError = Object(external_styled_components_["css"])(["", ";font-weight:", ";", " &:not([disabled]){background-color:", ";color:", ";box-shadow:", ";transition:background-image 0.2s,border 0.2s,box-shadow 0.2s,text-decoration 0.2s;", " ", " &:hover{background-color:", ";}&:active{background-color:", ";transition:none;}&:focus{box-shadow:", ",", ";&:active{background-color:", ";transition:none;}}}&[disabled]{color:", ";background-color:", ";cursor:not-allowed;", "}"], enterpriseStyles_common, themes_["variables"].fontWeightSemiBold, enterpriseStyles_appendPrepend, themes_["variables"].errorColor, themes_["variables"].white, primaryShadow, function (_ref10) {
+var enterpriseError = Object(external_styled_components_["css"])(["", ";font-weight:", ";", " &:not([disabled]){background-color:", ";color:", ";box-shadow:", ";transition:background-image 0.2s,border 0.2s,box-shadow 0.2s,text-decoration 0.2s;", " ", " &:hover{background-color:", ";}&:active{background-color:", ";transition:none;}&:focus{box-shadow:", ",", ";&:active{background-color:", ";transition:none;}}}&[disabled]{color:", ";background-color:", ";cursor:not-allowed;", "}"], enterpriseStyles_common, themes_["variables"].fontWeightSemiBold, enterpriseStyles_appendPrepend, themes_["variables"].errorColorD10, themes_["variables"].white, primaryShadow, function (_ref10) {
   var $selected = _ref10.$selected;
-  return $selected && Object(external_styled_components_["css"])(["box-shadow:", ";background-color:", ";"], primarySelectedShadow, themes_["variables"].errorColorD20);
+  return $selected && Object(external_styled_components_["css"])(["box-shadow:", ";background-color:", ";"], primarySelectedShadow, themes_["variables"].errorColorD30);
 }, function (_ref11) {
   var $prepend = _ref11.$prepend;
-  return $prepend && Object(external_styled_components_["css"])(["border-left:1px solid ", ";"], themes_["variables"].errorColorD20);
-}, themes_["variables"].errorColorD20, themes_["variables"].errorColorD30, primaryShadow, themes_["variables"].focusShadow, themes_["variables"].errorColorD30, themes_["variables"].errorColorL30, themes_["variables"].errorColorL10, function (_ref12) {
+  return $prepend && Object(external_styled_components_["css"])(["border-left:1px solid ", ";"], themes_["variables"].errorColorD30);
+}, themes_["variables"].errorColorD30, themes_["variables"].errorColorD40, primaryShadow, themes_["variables"].focusShadow, themes_["variables"].errorColorD40, themes_["variables"].errorColorL10, themes_["variables"].errorColorD10, function (_ref12) {
   var $selected = _ref12.$selected;
-  return $selected && Object(external_styled_components_["css"])(["box-shadow:", ";background-color:", ";"], primarySelectedShadow, themes_["variables"].errorColorD20);
+  return $selected && Object(external_styled_components_["css"])(["box-shadow:", ";background-color:", ";"], primarySelectedShadow, themes_["variables"].errorColorD40);
 });
 var enterprisePill = Object(external_styled_components_["css"])(["", ";color:", ";border:1px solid transparent;&:not([disabled]){transition:background-color 0.2s,border 0.2s,box-shadow 0.2s,text-decoration 0.2s;", " &:hover{color:", ";background-color:", ";border-color:", ";}", " &:focus{color:", ";box-shadow:", ";}&:active,&[aria-expanded='true']{background-color:", ";transition:none;}}&[disabled]{color:", ";cursor:not-allowed;", "}"], enterpriseStyles_common, Object(themes_["pick"])({
   light: themes_["variables"].gray45,
@@ -357,6 +357,7 @@ var StyledClickable = external_styled_components_default()(Clickable_default.a).
   enterpriseSecondary: enterpriseDefault,
   enterprisePrimary: enterprisePrimary,
   enterpriseError: enterpriseError,
+  enterpriseDestructive: enterpriseError,
   enterprisePill: enterprisePill,
   prismaDefault: prismaTransparent,
   prismaDestructive: prismaFilled,
@@ -410,23 +411,50 @@ var propTypes = {
   children: external_prop_types_default.a.node,
   disabled: external_prop_types_default.a.bool,
   elementRef: external_prop_types_default.a.oneOfType([external_prop_types_default.a.func, external_prop_types_default.a.object]),
+  error: external_prop_types_default.a.bool,
   inline: external_prop_types_default.a.bool,
   openInNewContext: external_prop_types_default.a.bool,
   prepend: external_prop_types_default.a.bool,
   selected: external_prop_types_default.a.bool,
   splunkTheme: external_prop_types_default.a.object,
-  status: external_prop_types_default.a.oneOf(['normal', 'error']),
   to: external_prop_types_default.a.string
 };
 var defaultProps = {
   appearance: 'default',
   append: false,
   disabled: false,
+  error: false,
   inline: true,
   openInNewContext: false,
   prepend: false,
-  selected: false,
-  status: 'normal'
+  selected: false
+};
+
+var mapVariant = function mapVariant(appearance, family) {
+  var enterprise = {
+    "default": 'enterpriseDefault',
+    destructive: 'enterpriseError',
+    primary: 'enterprisePrimary',
+    secondary: 'enterpriseSecondary',
+    pill: 'enterprisePill',
+    toggle: 'enterpriseDefault',
+    flat: 'enterpriseDefault'
+  };
+  var prisma = {
+    "default": 'prismaDefault',
+    destructive: 'prismaDestructive',
+    primary: 'prismaPrimary',
+    secondary: 'prismaSecondary',
+    pill: 'prismaSecondary',
+    toggle: 'prismaToggle',
+    flat: 'prismaFlat'
+  };
+
+  if (family === 'enterprise') {
+    return enterprise[appearance];
+  }
+
+  return prisma[appearance];
 };
 
 var ButtonSimple_ButtonSimple = /*#__PURE__*/function (_Component) {
@@ -466,57 +494,33 @@ var ButtonSimple_ButtonSimple = /*#__PURE__*/function (_Component) {
       (_this$component = this.component) === null || _this$component === void 0 ? void 0 : _this$component.focus();
     }
   }, {
-    key: "mapVariant",
-    value: function mapVariant() {
+    key: "render",
+    value: function render() {
       var _this$props = this.props,
-          splunkTheme = _this$props.splunkTheme,
           appearance = _this$props.appearance,
-          status = _this$props.status;
-      var enterprise = {
-        "default": 'enterpriseDefault',
-        destructive: 'enterpriseDefault',
-        primary: 'enterprisePrimary',
-        secondary: 'enterpriseSecondary',
-        pill: 'enterprisePill',
-        toggle: 'enterpriseDefault',
-        flat: 'enterpriseDefault'
-      };
-      var prisma = {
-        "default": 'prismaDefault',
-        destructive: 'prismaDestructive',
-        primary: 'prismaPrimary',
-        secondary: 'prismaSecondary',
-        pill: 'prismaSecondary',
-        toggle: 'prismaToggle',
-        flat: 'prismaFlat'
-      };
-
-      if (splunkTheme.family === 'enterprise') {
-        return status === 'error' ? 'enterpriseError' : enterprise[appearance];
-      }
+          append = _this$props.append,
+          children = _this$props.children,
+          error = _this$props.error,
+          prepend = _this$props.prepend,
+          selected = _this$props.selected,
+          splunkTheme = _this$props.splunkTheme,
+          otherProps = _objectWithoutProperties(_this$props, ["appearance", "append", "children", "error", "prepend", "selected", "splunkTheme"]);
 
-      return prisma[appearance];
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props2 = this.props,
-          append = _this$props2.append,
-          children = _this$props2.children,
-          prepend = _this$props2.prepend,
-          selected = _this$props2.selected,
-          status = _this$props2.status,
-          otherProps = _objectWithoutProperties(_this$props2, ["append", "children", "prepend", "selected", "status"]);
+      var variant = appearance;
+
+      if (splunkTheme.isEnterprise) {
+        variant = error ? 'destructive' : appearance;
+      }
 
       return /*#__PURE__*/external_react_default.a.createElement(StyledClickable, _extends({
-        "aria-invalid": status === 'error' || undefined,
+        "aria-invalid": error,
         "data-test": "button-simple",
         ref: this.handleMount,
-        $variant: this.mapVariant(),
-        $error: status === 'error',
+        $variant: mapVariant(variant, splunkTheme.family),
         $append: append,
         $prepend: prepend,
-        $selected: selected
+        $selected: selected,
+        $error: error
       }, otherProps), children, selected && /*#__PURE__*/external_react_default.a.createElement(ScreenReaderContent_default.a, null, Object(i18n_["_"])('Selected')));
     }
   }]);

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 Change Log
 ============
+4.16.0 - January 10, 2023
+----------
+New Features:
+* Added `data-test` selectors to `File` (SUI-5205).
+* Added `primaryColumnIndex` prop to `Table` and `rowScreenReaderText` prop to `Table.Row` to improve screen reader usability of selectable rows (SUI-5044).
+* `Button` supports `appearance="destructive"` in Enterprise themes (SUI-5082).
+* `TabLayout` supports `count` prop (SUI-5080).
+* `Typography`'s `color` prop now supports `inherit` option.
+
+Bug Fixes:
+* `Select`, `Button`, `RadioBar`, `ButtonGroup` error state background color has been updated in enterprise themes to improve contrast (SUI-5082).
+
+Deprecations: 
+* `Button`'s `error` prop has been deprecated and will be removed in a future major version. Use `appearance="destructive"` instead (SUI-5082).
+
 
 4.15.0 - December 6, 2022
 ----------
@@ -9,7 +24,7 @@ New Features:
   * This property supports `true`, `false`, and `"controlled"` as values, similar to `Select`.
   * If this is set, the `controlledFilter` prop is ignored because `filter="controlled"` has identical functionality.
 
-Bug Fixes:
+Bug Fixes: 
 * Added missing type definition files for `TextArea` and `Divider` (SUI-5154).
 * Fixes missing `data-test="fixed-head"` test hook in `Table` (SUI-5157).
 * Added SSR support for `Select`
@@ -26,6 +41,7 @@ Bug Fixes:
   * This allows for a grace period when the user can leave and return to the `Tooltip`.
   * This is similar to the old disappear behavior, but without the issue where a mostly-invisible tooltip accepts mouse interaction.
   * `onRequestOpen` and `onRequestClose` callbacks will no longer trigger when the mouse moves between the `Tooltip` `anchor` and `Popover`.
+* `Date` now shows the correct cursor type along the outer edge of the input when disabled.
 
 4.14.0 - November 1, 2022
 ----------

package/Card.js

@@ -267,7 +267,7 @@ var Dropdown_ = __webpack_require__(24);
 var Dropdown_default = /*#__PURE__*/__webpack_require__.n(Dropdown_);
 
 // EXTERNAL MODULE: external "@splunk/themes/useSplunkTheme"
-var useSplunkTheme_ = __webpack_require__(52);
+var useSplunkTheme_ = __webpack_require__(54);
 var useSplunkTheme_default = /*#__PURE__*/__webpack_require__.n(useSplunkTheme_);
 
 // EXTERNAL MODULE: ./src/icons/MoreVertical.tsx
@@ -694,7 +694,7 @@ module.exports = require("@splunk/ui-utils/i18n");
 
 /***/ }),
 
-/***/ 52:
+/***/ 54:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/themes/useSplunkTheme");

package/Chip.js

@@ -130,7 +130,7 @@ var external_react_ = __webpack_require__(2);
 var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_);
 
 // EXTERNAL MODULE: external "@splunk/ui-utils/color"
-var color_ = __webpack_require__(46);
+var color_ = __webpack_require__(47);
 
 // EXTERNAL MODULE: external "@splunk/ui-utils/i18n"
 var i18n_ = __webpack_require__(4);
@@ -623,7 +623,7 @@ module.exports = require("@splunk/ui-utils/i18n");
 
 /***/ }),
 
-/***/ 46:
+/***/ 47:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/ui-utils/color");

package/Color.js

@@ -221,7 +221,7 @@ var SplunkThemeProvider_default = /*#__PURE__*/__webpack_require__.n(SplunkTheme
 var i18n_ = __webpack_require__(4);
 
 // EXTERNAL MODULE: external "@splunk/ui-utils/color"
-var color_ = __webpack_require__(46);
+var color_ = __webpack_require__(47);
 
 // EXTERNAL MODULE: external "@splunk/ui-utils/keyboard"
 var keyboard_ = __webpack_require__(9);
@@ -1244,7 +1244,7 @@ module.exports = require("@splunk/ui-utils/i18n");
 
 /***/ }),
 
-/***/ 46:
+/***/ 47:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/ui-utils/color");

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__(52);
+var useSplunkTheme_ = __webpack_require__(54);
 var useSplunkTheme_default = /*#__PURE__*/__webpack_require__.n(useSplunkTheme_);
 
 // EXTERNAL MODULE: external "lodash/defaults"
@@ -436,7 +436,7 @@ module.exports = require("styled-components");
 
 /***/ }),
 
-/***/ 52:
+/***/ 54:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/themes/useSplunkTheme");

package/ComboBox.js

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

package/ControlGroup.js

@@ -135,7 +135,7 @@ var external_prop_types_ = __webpack_require__(1);
 var external_prop_types_default = /*#__PURE__*/__webpack_require__.n(external_prop_types_);
 
 // EXTERNAL MODULE: external "lodash/find"
-var find_ = __webpack_require__(57);
+var find_ = __webpack_require__(51);
 var find_default = /*#__PURE__*/__webpack_require__.n(find_);
 
 // EXTERNAL MODULE: external "lodash/isFinite"
@@ -706,7 +706,7 @@ module.exports = require("styled-components");
 
 /***/ }),
 
-/***/ 57:
+/***/ 51:
 /***/ (function(module, exports) {
 
 module.exports = require("lodash/find");

package/Date.js

@@ -212,7 +212,10 @@ var Text_default = /*#__PURE__*/__webpack_require__.n(Text_);
 var StyledText = external_styled_components_default()(Text_default.a).withConfig({
   displayName: "DateStyles__StyledText",
   componentId: "kacgdc-0"
-})(["cursor:text;&[data-inline]{flex-basis:", ";width:", ";}"], Object(themes_["pick"])({
+})(["cursor:", ";&[data-inline]{flex-basis:", ";width:", ";}"], Object(themes_["pickVariant"])('$disabled', {
+  "false": 'text',
+  "true": 'not-allowed'
+}), Object(themes_["pick"])({
   enterprise: '105px',
   prisma: '150px'
 }), Object(themes_["pick"])({
@@ -579,6 +582,7 @@ var _Date = /*#__PURE__*/function (_Component) {
     key: "render",
     value: function render() {
       var _this$props5 = this.props,
+          disabled = _this$props5.disabled,
           highlightToday = _this$props5.highlightToday,
           inputOnly = _this$props5.inputOnly,
           locale = _this$props5.locale,
@@ -587,7 +591,7 @@ var _Date = /*#__PURE__*/function (_Component) {
       var currentValue = this.getValue();
       var startAdornment = isPrisma && !inputOnly && /*#__PURE__*/external_react_default.a.createElement(IconContainer, {
         "aria-hidden": true,
-        $disabled: this.props.disabled
+        $disabled: disabled
       }, /*#__PURE__*/external_react_default.a.createElement(CalendarIcon, null));
       var children;
       var ariaProps = {};
@@ -595,12 +599,12 @@ var _Date = /*#__PURE__*/function (_Component) {
       if (!inputOnly) {
         ariaProps.role = 'combobox';
         ariaProps['aria-controls'] = this.state.calendarOpen ? this.popoverId : undefined;
-        ariaProps['aria-expanded'] = this.props.disabled ? false : this.state.calendarOpen;
+        ariaProps['aria-expanded'] = disabled ? false : this.state.calendarOpen;
         ariaProps['aria-haspopup'] = true;
         children = /*#__PURE__*/external_react_default.a.createElement(Popover_default.a, {
           anchor: this.state.anchor,
           id: this.popoverId,
-          open: this.props.disabled ? false : this.state.calendarOpen,
+          open: disabled ? false : this.state.calendarOpen,
           onRequestClose: this.handleRequestClose
         }, /*#__PURE__*/external_react_default.a.createElement(Calendar_default.a, {
           ref: this.handleCalendarMount,
@@ -626,7 +630,8 @@ var _Date = /*#__PURE__*/function (_Component) {
         onFocus: this.handleFocus,
         onKeyDown: this.handleKeyDown,
         value: this.getTextInputValue(),
-        startAdornment: startAdornment
+        startAdornment: startAdornment,
+        $disabled: disabled
       }, ariaProps, omit_default()(this.props, 'className', 'defaultValue', 'elementRef', 'inputOnly', 'multiline', 'locale', 'onChange', 'onClick', 'onFocus', 'onKeyDown', 'onSelect', 'spellCheck', 'value')), children);
     }
   }]);

package/File.js

@@ -182,7 +182,7 @@ var isUndefined_ = __webpack_require__(41);
 var isUndefined_default = /*#__PURE__*/__webpack_require__.n(isUndefined_);
 
 // EXTERNAL MODULE: external "@splunk/ui-utils/format"
-var format_ = __webpack_require__(58);
+var format_ = __webpack_require__(45);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/Progress"
 var Progress_ = __webpack_require__(129);
@@ -975,9 +975,15 @@ var File_File = /*#__PURE__*/function (_Component) {
       var supportsMessage = null;
 
       if (this.props.supportsMessage) {
-        supportsMessage = /*#__PURE__*/external_react_default.a.createElement(StyledSubtitle, null, this.props.supportsMessage);
+        supportsMessage = /*#__PURE__*/external_react_default.a.createElement(StyledSubtitle, {
+          "data-test": "file-supports"
+        }, this.props.supportsMessage);
       } else if (isPrisma && !disabled) {
-        supportsMessage = accept ? /*#__PURE__*/external_react_default.a.createElement(StyledSubtitle, null, Object(i18n_["_"])("Supports ".concat(fileTypes))) : /*#__PURE__*/external_react_default.a.createElement(StyledSubtitle, null, Object(i18n_["_"])('Supports all file types'));
+        supportsMessage = accept ? /*#__PURE__*/external_react_default.a.createElement(StyledSubtitle, {
+          "data-test": "file-supports"
+        }, Object(i18n_["_"])("Supports ".concat(fileTypes))) : /*#__PURE__*/external_react_default.a.createElement(StyledSubtitle, {
+          "data-test": "file-supports"
+        }, Object(i18n_["_"])('Supports all file types'));
       }
 
       return /*#__PURE__*/external_react_default.a.createElement(StyledDropTargetBox, File_extends({
@@ -996,8 +1002,11 @@ var File_File = /*#__PURE__*/function (_Component) {
       }, !disabled && !isPrisma && /*#__PURE__*/external_react_default.a.createElement(StyledIcon, {
         $dragOver: dragOver,
         $error: error
-      }), ' ', /*#__PURE__*/external_react_default.a.createElement("span", null, !dragOverWindow && !disabled && Object(i18n_["_"])('Drop your file here or'), dragOverNotDisabled && Object(i18n_["_"])('Drop your file anywhere or'), ' ', fileCount === 0 && disabled && Object(i18n_["_"])('No Files Selected'), /*#__PURE__*/external_react_default.a.createElement(StyledLink, {
+      }), ' ', /*#__PURE__*/external_react_default.a.createElement("span", {
+        "data-test": "file-label"
+      }, !dragOverWindow && !disabled && Object(i18n_["_"])('Drop your file here or'), dragOverNotDisabled && Object(i18n_["_"])('Drop your file anywhere or'), ' ', fileCount === 0 && disabled && Object(i18n_["_"])('No Files Selected'), /*#__PURE__*/external_react_default.a.createElement(StyledLink, {
         htmlFor: this.inputId,
+        "data-test": "file-link",
         "data-focused": this.state.focusedInput || null
       }, /*#__PURE__*/external_react_default.a.createElement(StyledInput, {
         accept: accept,
@@ -1161,17 +1170,17 @@ module.exports = require("lodash/isUndefined");
 
 /***/ }),
 
-/***/ 5:
+/***/ 45:
 /***/ (function(module, exports) {
 
-module.exports = require("lodash/omit");
+module.exports = require("@splunk/ui-utils/format");
 
 /***/ }),
 
-/***/ 58:
+/***/ 5:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/ui-utils/format");
+module.exports = require("lodash/omit");
 
 /***/ }),
 

package/Image.js

@@ -167,7 +167,7 @@ var toLower_ = __webpack_require__(36);
 var toLower_default = /*#__PURE__*/__webpack_require__.n(toLower_);
 
 // EXTERNAL MODULE: external "@splunk/ui-utils/format"
-var format_ = __webpack_require__(58);
+var format_ = __webpack_require__(45);
 
 // EXTERNAL MODULE: external "@splunk/ui-utils/i18n"
 var i18n_ = __webpack_require__(4);
@@ -557,17 +557,17 @@ module.exports = require("@splunk/ui-utils/i18n");
 
 /***/ }),
 
-/***/ 5:
+/***/ 45:
 /***/ (function(module, exports) {
 
-module.exports = require("lodash/omit");
+module.exports = require("@splunk/ui-utils/format");
 
 /***/ }),
 
-/***/ 58:
+/***/ 5:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/ui-utils/format");
+module.exports = require("lodash/omit");
 
 /***/ }),
 

package/MIGRATION.md

@@ -0,0 +1,21 @@
+# Migration
+
+This document lists migration guidance for new features and breaking changes.
+
+## 4.12.0
+
+### Multiline `Text` to `TextArea`
+
+**Change:**
+`Text`'s `multiline` and related props have been deprecated. A new `TextArea` component has been added.
+
+**Context:**
+`Text` supported two modes -- single or multiline. Each modes had exclusive props: e.g. `maxRows` was only valid with the `multiline` prop.
+This could be confusing and lead to unexpected or unsupported API combinations. Additionally, code in `Text` would only operate in one mode at a time.
+
+By separating these modes, we have made it simpler and clearer to decide which component and props to use.
+`Text` should be used for inline text input. `TextArea` should be used for long-form text input.
+This aligns the components with the HTML spec and the Splunk Design System.
+
+**Migration steps:**
+- Replace instances of `Text` that use the `multiline` prop with the new `TextArea` component.