@splunk/react-ui 4.13.0 → 4.15.0

package/ControlGroup.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 139);
+/******/ 	return __webpack_require__(__webpack_require__.s = 191);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -101,14 +101,21 @@ module.exports = require("prop-types");
 
 /***/ }),
 
-/***/ 10:
+/***/ 13:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/ui-utils/id");
 
 /***/ }),
 
-/***/ 139:
+/***/ 16:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/react-ui/ScreenReaderContent");
+
+/***/ }),
+
+/***/ 191:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -127,25 +134,30 @@ var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_)
 var external_prop_types_ = __webpack_require__(1);
 var external_prop_types_default = /*#__PURE__*/__webpack_require__.n(external_prop_types_);
 
-// EXTERNAL MODULE: external "lodash"
-var external_lodash_ = __webpack_require__(4);
+// EXTERNAL MODULE: external "lodash/find"
+var find_ = __webpack_require__(57);
+var find_default = /*#__PURE__*/__webpack_require__.n(find_);
+
+// EXTERNAL MODULE: external "lodash/isFinite"
+var isFinite_ = __webpack_require__(21);
+var isFinite_default = /*#__PURE__*/__webpack_require__.n(isFinite_);
 
 // EXTERNAL MODULE: external "@splunk/themes"
 var themes_ = __webpack_require__(0);
 
 // EXTERNAL MODULE: external "@splunk/ui-utils/id"
-var id_ = __webpack_require__(10);
+var id_ = __webpack_require__(13);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/Box"
 var Box_ = __webpack_require__(8);
 var Box_default = /*#__PURE__*/__webpack_require__.n(Box_);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/ScreenReaderContent"
-var ScreenReaderContent_ = __webpack_require__(14);
+var ScreenReaderContent_ = __webpack_require__(16);
 var ScreenReaderContent_default = /*#__PURE__*/__webpack_require__.n(ScreenReaderContent_);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/Tooltip"
-var Tooltip_ = __webpack_require__(50);
+var Tooltip_ = __webpack_require__(67);
 var Tooltip_default = /*#__PURE__*/__webpack_require__.n(Tooltip_);
 
 // EXTERNAL MODULE: external "styled-components"
@@ -219,10 +231,27 @@ var StyledLabel = external_styled_components_default.a.label.withConfig({
 var StyledHelp = external_styled_components_default.a.div.withConfig({
   displayName: "ControlGroupStyles__StyledHelp",
   componentId: "wjnyif-5"
-})(["", ";font-size:", ";color:", ";margin-top:", ";[aria-invalid] > &{color:inherit;}"], themes_["mixins"].reset('block'), themes_["variables"].fontSizeSmall, themes_["variables"].contentColorMuted, Object(themes_["pick"])({
+})(["", ";font-size:", ";color:", ";margin-top:", ";", ""], themes_["mixins"].reset('block'), themes_["variables"].fontSizeSmall, themes_["variables"].contentColorMuted, Object(themes_["pick"])({
   enterprise: '2px',
   prisma: '4px'
-}));
+}), function (_ref3) {
+  var $error = _ref3.$error;
+  return $error && Object(external_styled_components_["css"])(["color:inherit;"]);
+});
+var StyledErrorText = external_styled_components_default.a.div.withConfig({
+  displayName: "ControlGroupStyles__StyledErrorText",
+  componentId: "wjnyif-6"
+})(["", ";font-size:", ";[aria-invalid] > &{color:inherit;}", ""], themes_["mixins"].reset('block'), themes_["variables"].fontSizeSmall, function (_ref4) {
+  var $help = _ref4.$help;
+  return !$help && Object(external_styled_components_["css"])(["margin-top:", ";"], Object(themes_["pick"])({
+    enterprise: '2px',
+    prisma: '4px'
+  }));
+});
+var StyledAsterisk = external_styled_components_default.a.span.withConfig({
+  displayName: "ControlGroupStyles__StyledAsterisk",
+  componentId: "wjnyif-7"
+})(["color:inherit;margin-right:2px;"]);
 
 // CONCATENATED MODULE: ./src/ControlGroup/ControlGroupContext.tsx
 
@@ -291,19 +320,21 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
 
 
+
  // props ControlGroup may access and/or override on children
 
 var propTypes = {
   children: external_prop_types_default.a.node,
   controlsLayout: external_prop_types_default.a.oneOf(['fill', 'fillJoin', 'none', 'stack']),
   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,
+  error: external_prop_types_default.a.oneOfType([external_prop_types_default.a.bool, external_prop_types_default.a.string]),
   help: external_prop_types_default.a.node,
   hideLabel: external_prop_types_default.a.bool,
   label: external_prop_types_default.a.string.isRequired,
   labelFor: external_prop_types_default.a.string,
   labelPosition: external_prop_types_default.a.oneOf(['left', 'top']),
   labelWidth: external_prop_types_default.a.oneOfType([external_prop_types_default.a.number, external_prop_types_default.a.string]),
+  required: external_prop_types_default.a.bool,
   size: external_prop_types_default.a.oneOf(['small', 'medium']),
 
   /** @private */
@@ -317,6 +348,7 @@ var defaultProps = {
   hideLabel: false,
   labelPosition: 'left',
   labelWidth: 120,
+  required: false,
   size: 'medium'
 };
 // Style cloned onto child elements when fill behavior set.
@@ -359,6 +391,8 @@ var ControlGroup_ControlGroup = /*#__PURE__*/function (_Component) {
 
     _this = _super.call(this, props);
 
+    _defineProperty(_assertThisInitialized(_this), "errorId", void 0);
+
     _defineProperty(_assertThisInitialized(_this), "helpId", void 0);
 
     _defineProperty(_assertThisInitialized(_this), "labelId", void 0);
@@ -407,7 +441,7 @@ var ControlGroup_ControlGroup = /*#__PURE__*/function (_Component) {
       var _components = _slicedToArray(components, 1),
           firstChild = _components[0];
 
-      var firstText = Object(external_lodash_["find"])(components, function (comp) {
+      var firstText = find_default()(components, function (comp) {
         return comp.type && comp.type.componentType === 'Text';
       });
 
@@ -429,11 +463,15 @@ var ControlGroup_ControlGroup = /*#__PURE__*/function (_Component) {
       return undefined;
     });
 
-    _this.labelId = Object(id_["createDOMID"])('label');
+    _this.errorId = Object(id_["createDOMID"])('error');
     _this.helpId = Object(id_["createDOMID"])('help');
+    _this.labelId = Object(id_["createDOMID"])('label');
     _this.contextValue = _this.createContextValue();
     _this.childIds = {};
     _this.stackLayoutChildStyle = {};
+
+    if (false) {}
+
     return _this;
   }
 
@@ -482,11 +520,12 @@ var ControlGroup_ControlGroup = /*#__PURE__*/function (_Component) {
           labelFor = _this$props.labelFor,
           labelPosition = _this$props.labelPosition,
           labelWidth = _this$props.labelWidth,
+          required = _this$props.required,
           size = _this$props.size,
           splunkTheme = _this$props.splunkTheme,
           tooltip = _this$props.tooltip,
           tooltipDefaultPlacement = _this$props.tooltipDefaultPlacement,
-          otherProps = _objectWithoutProperties(_this$props, ["children", "controlsLayout", "error", "help", "hideLabel", "label", "labelFor", "labelPosition", "labelWidth", "size", "splunkTheme", "tooltip", "tooltipDefaultPlacement"]);
+          otherProps = _objectWithoutProperties(_this$props, ["children", "controlsLayout", "error", "help", "hideLabel", "label", "labelFor", "labelPosition", "labelWidth", "required", "size", "splunkTheme", "tooltip", "tooltipDefaultPlacement"]);
 
       var isPrisma = splunkTheme.isPrisma,
           isCompact = splunkTheme.isCompact;
@@ -530,8 +569,16 @@ var ControlGroup_ControlGroup = /*#__PURE__*/function (_Component) {
 
         cloneProps.labelledBy = _this2.labelId;
 
-        if (_this2.props.help) {
+        if (_this2.props.help && typeof _this2.props.error === 'boolean') {
           cloneProps.describedBy = _this2.helpId;
+        } else if (_this2.props.help && typeof _this2.props.error === 'string') {
+          cloneProps.describedBy = "".concat(_this2.helpId, " ").concat(_this2.errorId);
+        } else if (!_this2.props.help && typeof _this2.props.error === 'string') {
+          cloneProps.describedBy = _this2.errorId;
+        }
+
+        if (_this2.props.required) {
+          cloneProps.required = true;
         } // TODO: SUI-3402 refactor so that parent component doesn't have to know what it's child components are
 
 
@@ -572,7 +619,7 @@ var ControlGroup_ControlGroup = /*#__PURE__*/function (_Component) {
       var labelWidthStyle = labelPosition === 'left' ? {
         width: labelWidth
       } : undefined;
-      var labelWidthString = Object(external_lodash_["isFinite"])(labelWidth) ? "".concat(labelWidth, "px") : labelWidth;
+      var labelWidthString = isFinite_default()(labelWidth) ? "".concat(labelWidth, "px") : labelWidth;
       var labelMargin = isPrisma ? '16px' : '20px';
       var contentMarginStyle = labelPosition === 'left' ? {
         marginLeft: "calc(".concat(labelWidthString, " + ").concat(labelMargin, ")")
@@ -588,14 +635,19 @@ var ControlGroup_ControlGroup = /*#__PURE__*/function (_Component) {
         id: this.labelId,
         htmlFor: labelFor || defaultLinkedId,
         $tooltip: !!tooltip
-      }, label, !isPrisma && !hideLabel && tooltip && /*#__PURE__*/external_react_default.a.createElement("span", null, "\xA0"), !hideLabel && tooltip && /*#__PURE__*/external_react_default.a.createElement(ScreenReaderContent_default.a, null, tooltip)), !hideLabel && tooltip && /*#__PURE__*/external_react_default.a.createElement(Tooltip_default.a, {
+      }, required && /*#__PURE__*/external_react_default.a.createElement(StyledAsterisk, {
+        "aria-hidden": "true"
+      }, "*"), label, !isPrisma && !hideLabel && tooltip && /*#__PURE__*/external_react_default.a.createElement("span", null, "\xA0"), !hideLabel && tooltip && /*#__PURE__*/external_react_default.a.createElement(ScreenReaderContent_default.a, null, tooltip)), !hideLabel && tooltip && /*#__PURE__*/external_react_default.a.createElement(Tooltip_default.a, {
+        closeWhen: "notOnClick",
         content: tooltip,
         defaultPlacement: tooltipDefaultPlacement,
         "aria-hidden": "true"
       }));
+      var isError = typeof error === 'string' || error === true;
+      var isErrorBoolean = typeof error === 'boolean';
       return /*#__PURE__*/external_react_default.a.createElement(StyledBox, _extends({
         "data-test": "control-group",
-        $error: error
+        $error: isError
       }, writableOtherProps), /*#__PURE__*/external_react_default.a.createElement(ControlGroup_ControlGroupContext.Provider, {
         value: this.getContextValue()
       }, hideLabel ? /*#__PURE__*/external_react_default.a.createElement(ScreenReaderContent_default.a, null, styledLabel) : styledLabel, /*#__PURE__*/external_react_default.a.createElement(StyledControlsComponent, {
@@ -605,8 +657,14 @@ var ControlGroup_ControlGroup = /*#__PURE__*/function (_Component) {
       }, childrenFormatted), help && /*#__PURE__*/external_react_default.a.createElement(StyledHelp, {
         "data-test": "help",
         id: this.helpId,
-        style: contentMarginStyle
-      }, help)));
+        style: contentMarginStyle,
+        $error: isError && isErrorBoolean
+      }, help), isError && !isErrorBoolean && /*#__PURE__*/external_react_default.a.createElement(StyledErrorText, {
+        "data-test": "error",
+        id: this.errorId,
+        style: contentMarginStyle,
+        $help: !!help
+      }, error)));
     }
   }]);
 
@@ -627,17 +685,17 @@ ControlGroupWithTheme.propTypes = ControlGroup_ControlGroup.propTypes;
 
 /***/ }),
 
-/***/ 14:
+/***/ 2:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/react-ui/ScreenReaderContent");
+module.exports = require("react");
 
 /***/ }),
 
-/***/ 2:
+/***/ 21:
 /***/ (function(module, exports) {
 
-module.exports = require("react");
+module.exports = require("lodash/isFinite");
 
 /***/ }),
 
@@ -648,14 +706,14 @@ module.exports = require("styled-components");
 
 /***/ }),
 
-/***/ 4:
+/***/ 57:
 /***/ (function(module, exports) {
 
-module.exports = require("lodash");
+module.exports = require("lodash/find");
 
 /***/ }),
 
-/***/ 50:
+/***/ 67:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/Tooltip");