@splunk/react-ui 4.4.1 → 4.5.0

package/FormRows.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 112);
+/******/ 	return __webpack_require__(__webpack_require__.s = 121);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -101,7 +101,7 @@ module.exports = require("prop-types");
 
 /***/ }),
 
-/***/ 112:
+/***/ 121:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -109,7 +109,7 @@ module.exports = require("prop-types");
 __webpack_require__.r(__webpack_exports__);
 
 // EXPORTS
-__webpack_require__.d(__webpack_exports__, "default", function() { return /* reexport */ FormRows_FormRows; });
+__webpack_require__.d(__webpack_exports__, "default", function() { return /* reexport */ src_FormRows_FormRows; });
 __webpack_require__.d(__webpack_exports__, "Row", function() { return /* reexport */ FormRows_Row; });
 
 // EXTERNAL MODULE: external "react"
@@ -127,7 +127,7 @@ var i18n_ = __webpack_require__(5);
 var keyboard_ = __webpack_require__(9);
 
 // EXTERNAL MODULE: external "@splunk/react-icons/Plus"
-var Plus_ = __webpack_require__(79);
+var Plus_ = __webpack_require__(82);
 var Plus_default = /*#__PURE__*/__webpack_require__.n(Plus_);
 
 // EXTERNAL MODULE: ./src/icons/ThemedIcon.tsx
@@ -174,17 +174,17 @@ function Plus(props) {
   }, props));
 }
 // EXTERNAL MODULE: external "react-sortable-hoc"
-var external_react_sortable_hoc_ = __webpack_require__(67);
+var external_react_sortable_hoc_ = __webpack_require__(69);
 
 // EXTERNAL MODULE: external "lodash"
 var external_lodash_ = __webpack_require__(4);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/CloseButton"
-var CloseButton_ = __webpack_require__(59);
+var CloseButton_ = __webpack_require__(62);
 var CloseButton_default = /*#__PURE__*/__webpack_require__.n(CloseButton_);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/ScreenReaderContent"
-var ScreenReaderContent_ = __webpack_require__(14);
+var ScreenReaderContent_ = __webpack_require__(15);
 var ScreenReaderContent_default = /*#__PURE__*/__webpack_require__.n(ScreenReaderContent_);
 
 // EXTERNAL MODULE: external "styled-components"
@@ -196,7 +196,7 @@ var Box_ = __webpack_require__(8);
 var Box_default = /*#__PURE__*/__webpack_require__.n(Box_);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/Button"
-var Button_ = __webpack_require__(16);
+var Button_ = __webpack_require__(17);
 var Button_default = /*#__PURE__*/__webpack_require__.n(Button_);
 
 // EXTERNAL MODULE: external "@splunk/themes"
@@ -295,12 +295,36 @@ var FormRowsContext = /*#__PURE__*/Object(external_react_["createContext"])({
 FormRowsContext.displayName = 'FormRows';
 /* harmony default export */ var FormRows_FormRowsContext = (FormRowsContext);
 // CONCATENATED MODULE: ./src/FormRows/Row.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); }
+
 function Row_extends() { Row_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 Row_extends.apply(this, arguments); }
 
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 
 
 
@@ -321,54 +345,87 @@ var propTypes = {
   value: external_prop_types_default.a.node
 };
 
-function Row(_ref) {
-  var children = _ref.children,
-      elementRef = _ref.elementRef,
-      onRequestRemove = _ref.onRequestRemove,
-      rowIndex = _ref.rowIndex,
-      otherProps = _objectWithoutProperties(_ref, ["children", "elementRef", "onRequestRemove", "rowIndex"]);
-
-  // @docs-props-type RowPropsBase
-  var _useContext = Object(external_react_["useContext"])(FormRowsContext),
-      onKeyDownContext = _useContext.onKeyDown,
-      disabledDeleteButtonContext = _useContext.disabledDeleteButton,
-      sortableContext = _useContext.sortable;
-
-  var handleKeyDown = function handleKeyDown(e) {
-    onKeyDownContext === null || onKeyDownContext === void 0 ? void 0 : onKeyDownContext(e, {
-      index: rowIndex !== null && rowIndex !== void 0 ? rowIndex : 0
+var Row_Row = /*#__PURE__*/function (_Component) {
+  _inherits(Row, _Component);
+
+  var _super = _createSuper(Row);
+
+  function Row() {
+    var _this;
+
+    _classCallCheck(this, Row);
+
+    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));
+
+    _defineProperty(_assertThisInitialized(_this), "handleKeyDown", function (e) {
+      var _this$context$onKeyDo, _this$context, _this$props$rowIndex;
+
+      (_this$context$onKeyDo = (_this$context = _this.context).onKeyDown) === null || _this$context$onKeyDo === void 0 ? void 0 : _this$context$onKeyDo.call(_this$context, e, {
+        index: (_this$props$rowIndex = _this.props.rowIndex) !== null && _this$props$rowIndex !== void 0 ? _this$props$rowIndex : 0
+      });
     });
-  };
 
-  var handleRequestRemove = function handleRequestRemove(e) {
-    onRequestRemove === null || onRequestRemove === void 0 ? void 0 : onRequestRemove(e, {
-      index: rowIndex !== null && rowIndex !== void 0 ? rowIndex : 0
+    _defineProperty(_assertThisInitialized(_this), "handleRequestRemove", function (e) {
+      var _this$props$onRequest, _this$props, _this$props$rowIndex2;
+
+      (_this$props$onRequest = (_this$props = _this.props).onRequestRemove) === null || _this$props$onRequest === void 0 ? void 0 : _this$props$onRequest.call(_this$props, e, {
+        index: (_this$props$rowIndex2 = _this.props.rowIndex) !== null && _this$props$rowIndex2 !== void 0 ? _this$props$rowIndex2 : 0
+      });
     });
-  };
 
-  var DragHandle = Object(external_react_sortable_hoc_["SortableHandle"])(function () {
-    return /*#__PURE__*/external_react_default.a.createElement(StyledDrag, {
-      "data-test": "drag-handle"
-    }, /*#__PURE__*/external_react_default.a.createElement(ScreenReaderContent_default.a, null, Object(i18n_["_"])('Press arrow up or arrow down to re-order items')));
-  });
-  return /*#__PURE__*/external_react_default.a.createElement(Styled // eslint-disable-line jsx-a11y/no-static-element-interactions
-  , Row_extends({
-    $sortable: sortableContext,
-    "data-test": "row",
-    ref: elementRef,
-    onKeyDown: handleKeyDown // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-    ,
-    tabIndex: sortableContext ? 0 : undefined
-  }, Object(external_lodash_["omit"])(otherProps, ['onKeyDown', 'onRequestRemove', 'rowIndex'])), sortableContext && /*#__PURE__*/external_react_default.a.createElement(DragHandle, null), children, /*#__PURE__*/external_react_default.a.createElement(StyledButton, null, /*#__PURE__*/external_react_default.a.createElement(CloseButton_default.a, {
-    disabled: disabledDeleteButtonContext,
-    "data-test": "remove",
-    onClick: handleRequestRemove,
-    screenReaderText: Object(i18n_["_"])('Remove Row')
-  })));
-}
+    return _this;
+  }
 
-Row.propTypes = propTypes;
-var SortableRow = Object(external_react_sortable_hoc_["SortableElement"])(Row);
+  _createClass(Row, [{
+    key: "render",
+    value: function render() {
+      var _this$props2 = this.props,
+          children = _this$props2.children,
+          elementRef = _this$props2.elementRef,
+          otherProps = _objectWithoutProperties(_this$props2, ["children", "elementRef"]);
+
+      var _this$context2 = this.context,
+          disabledDeleteButtonContext = _this$context2.disabledDeleteButton,
+          hasOnRequestAddContext = _this$context2.hasOnRequestAdd,
+          sortableContext = _this$context2.sortable;
+      var onRequestRemoveExists = this.props.onRequestRemove !== undefined;
+
+      if (false) {}
+
+      var DragHandle = Object(external_react_sortable_hoc_["SortableHandle"])(function () {
+        return /*#__PURE__*/external_react_default.a.createElement(StyledDrag, {
+          "data-test": "drag-handle"
+        }, /*#__PURE__*/external_react_default.a.createElement(ScreenReaderContent_default.a, null, Object(i18n_["_"])('Press arrow up or arrow down to re-order items')));
+      });
+      return /*#__PURE__*/external_react_default.a.createElement(Styled // eslint-disable-line jsx-a11y/no-static-element-interactions
+      , Row_extends({
+        $sortable: sortableContext,
+        "data-test": "row",
+        ref: elementRef,
+        onKeyDown: this.handleKeyDown // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+        ,
+        tabIndex: sortableContext ? 0 : undefined
+      }, Object(external_lodash_["omit"])(otherProps, ['onKeyDown', 'onRequestRemove', 'rowIndex'])), sortableContext && /*#__PURE__*/external_react_default.a.createElement(DragHandle, null), children, onRequestRemoveExists && /*#__PURE__*/external_react_default.a.createElement(StyledButton, null, /*#__PURE__*/external_react_default.a.createElement(CloseButton_default.a, {
+        disabled: disabledDeleteButtonContext,
+        "data-test": "remove",
+        onClick: this.handleRequestRemove,
+        screenReaderText: Object(i18n_["_"])('Remove Row')
+      })));
+    }
+  }]);
+
+  return Row;
+}(external_react_["Component"]);
+
+_defineProperty(Row_Row, "propTypes", propTypes);
+
+_defineProperty(Row_Row, "contextType", FormRows_FormRowsContext);
+
+var SortableRow = Object(external_react_sortable_hoc_["SortableElement"])(Row_Row);
 SortableRow.propTypes = propTypes;
 /* harmony default export */ var FormRows_Row = (SortableRow);
 // CONCATENATED MODULE: ./src/FormRows/SortableList.tsx
@@ -381,12 +438,36 @@ var SortableList = Object(external_react_sortable_hoc_["SortableContainer"])(fun
 });
 /* harmony default export */ var FormRows_SortableList = (SortableList);
 // CONCATENATED MODULE: ./src/FormRows/FormRows.tsx
+function FormRows_typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { FormRows_typeof = function _typeof(obj) { return typeof obj; }; } else { FormRows_typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return FormRows_typeof(obj); }
+
 function FormRows_extends() { FormRows_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 FormRows_extends.apply(this, arguments); }
 
 function FormRows_objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = FormRows_objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 
 function FormRows_objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
+function FormRows_classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function FormRows_defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function FormRows_createClass(Constructor, protoProps, staticProps) { if (protoProps) FormRows_defineProperties(Constructor.prototype, protoProps); if (staticProps) FormRows_defineProperties(Constructor, staticProps); return Constructor; }
+
+function FormRows_inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) FormRows_setPrototypeOf(subClass, superClass); }
+
+function FormRows_setPrototypeOf(o, p) { FormRows_setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return FormRows_setPrototypeOf(o, p); }
+
+function FormRows_createSuper(Derived) { var hasNativeReflectConstruct = FormRows_isNativeReflectConstruct(); return function _createSuperInternal() { var Super = FormRows_getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = FormRows_getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return FormRows_possibleConstructorReturn(this, result); }; }
+
+function FormRows_possibleConstructorReturn(self, call) { if (call && (FormRows_typeof(call) === "object" || typeof call === "function")) { return call; } return FormRows_assertThisInitialized(self); }
+
+function FormRows_assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function FormRows_isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+
+function FormRows_getPrototypeOf(o) { FormRows_getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return FormRows_getPrototypeOf(o); }
+
+function FormRows_defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 
 
 
@@ -414,172 +495,211 @@ var defaultProps = {
   header: null
 };
 
-function FormRows(props) {
-  // @docs-props-type FormRowsPropsBase
-  var addLabel = props.addLabel,
-      children = props.children,
-      disabled = props.disabled,
-      header = props.header,
-      menu = props.menu,
-      onRequestAdd = props.onRequestAdd,
-      onRequestMove = props.onRequestMove,
-      otherProps = FormRows_objectWithoutProperties(props, ["addLabel", "children", "disabled", "header", "menu", "onRequestAdd", "onRequestMove"]);
-
-  var handleKeyDown = function handleKeyDown(e, _ref) {
-    var index = _ref.index;
-
-    if (e.currentTarget !== e.target) {
-      return;
+var FormRows_FormRows = /*#__PURE__*/function (_Component) {
+  FormRows_inherits(FormRows, _Component);
+
+  var _super = FormRows_createSuper(FormRows);
+
+  function FormRows() {
+    var _this;
+
+    FormRows_classCallCheck(this, FormRows);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
     }
 
-    if (Object(keyboard_["keycode"])(e.nativeEvent) === 'up') {
-      e.preventDefault();
+    _this = _super.call.apply(_super, [this].concat(args));
 
-      if (index > 0) {
-        onRequestMove === null || onRequestMove === void 0 ? void 0 : onRequestMove({
-          fromIndex: index,
-          toIndex: index - 1
-        });
+    FormRows_defineProperty(FormRows_assertThisInitialized(_this), "handleKeyDown", function (e, _ref) {
+      var index = _ref.index;
+
+      if (e.currentTarget !== e.target) {
+        return;
       }
-    } else if (Object(keyboard_["keycode"])(e.nativeEvent) === 'down') {
-      e.preventDefault();
 
-      if (index < external_react_default.a.Children.toArray(children).length - 1) {
-        onRequestMove === null || onRequestMove === void 0 ? void 0 : onRequestMove({
-          fromIndex: index,
-          toIndex: index + 1
-        });
+      if (Object(keyboard_["keycode"])(e.nativeEvent) === 'up') {
+        e.preventDefault();
+
+        if (index > 0) {
+          var _this$props$onRequest, _this$props;
+
+          (_this$props$onRequest = (_this$props = _this.props).onRequestMove) === null || _this$props$onRequest === void 0 ? void 0 : _this$props$onRequest.call(_this$props, {
+            fromIndex: index,
+            toIndex: index - 1
+          });
+        }
+      } else if (Object(keyboard_["keycode"])(e.nativeEvent) === 'down') {
+        e.preventDefault();
+
+        if (index < external_react_default.a.Children.toArray(_this.props.children).length - 1) {
+          var _this$props$onRequest2, _this$props2;
+
+          (_this$props$onRequest2 = (_this$props2 = _this.props).onRequestMove) === null || _this$props$onRequest2 === void 0 ? void 0 : _this$props$onRequest2.call(_this$props2, {
+            fromIndex: index,
+            toIndex: index + 1
+          });
+        }
       }
-    }
-  };
-
-  var handleSortEnd = function handleSortEnd(_ref2) {
-    var oldIndex = _ref2.oldIndex,
-        newIndex = _ref2.newIndex;
-    onRequestMove === null || onRequestMove === void 0 ? void 0 : onRequestMove({
-      fromIndex: oldIndex,
-      toIndex: newIndex
     });
-  };
 
-  var sortable = onRequestMove !== undefined && !disabled;
-  var StyledHeaderComp = sortable ? StyledHeader : 'div';
-  var clonedChildren = external_react_["Children"].toArray(children).filter(external_react_["isValidElement"]).map(function (item) {
-    return /*#__PURE__*/Object(external_react_["cloneElement"])(item, {
-      rowIndex: item.props.index
+    FormRows_defineProperty(FormRows_assertThisInitialized(_this), "handleSortEnd", function (_ref2) {
+      var _this$props$onRequest3, _this$props3;
+
+      var oldIndex = _ref2.oldIndex,
+          newIndex = _ref2.newIndex;
+      (_this$props$onRequest3 = (_this$props3 = _this.props).onRequestMove) === null || _this$props$onRequest3 === void 0 ? void 0 : _this$props$onRequest3.call(_this$props3, {
+        fromIndex: oldIndex,
+        toIndex: newIndex
+      });
     });
-  });
-  return /*#__PURE__*/external_react_default.a.createElement(StyledBox, FormRows_extends({
-    "data-test": "form-rows"
-  }, otherProps), header && /*#__PURE__*/external_react_default.a.createElement(StyledHeaderComp, null, header), /*#__PURE__*/external_react_default.a.createElement(FormRows_SortableList, {
-    helperClass: "sorting",
-    onSortEnd: handleSortEnd,
-    useDragHandle: true
-  }, /*#__PURE__*/external_react_default.a.createElement(FormRows_FormRowsContext.Provider, {
-    value: {
-      disabledDeleteButton: disabled,
-      onKeyDown: handleKeyDown,
-      sortable: sortable
+
+    return _this;
+  }
+
+  FormRows_createClass(FormRows, [{
+    key: "render",
+    value: function render() {
+      var _this$props4 = this.props,
+          addLabel = _this$props4.addLabel,
+          children = _this$props4.children,
+          disabled = _this$props4.disabled,
+          header = _this$props4.header,
+          menu = _this$props4.menu,
+          onRequestAdd = _this$props4.onRequestAdd,
+          onRequestMove = _this$props4.onRequestMove,
+          otherProps = FormRows_objectWithoutProperties(_this$props4, ["addLabel", "children", "disabled", "header", "menu", "onRequestAdd", "onRequestMove"]);
+
+      var sortable = onRequestMove !== undefined && !disabled;
+      var StyledHeaderComp = sortable ? StyledHeader : 'div';
+      var hasOnRequestAdd = onRequestAdd !== undefined;
+      var clonedChildren = external_react_["Children"].toArray(children).filter(external_react_["isValidElement"]).map(function (item) {
+        return /*#__PURE__*/Object(external_react_["cloneElement"])(item, {
+          rowIndex: item.props.index
+        });
+      });
+      return /*#__PURE__*/external_react_default.a.createElement(StyledBox, FormRows_extends({
+        "data-test": "form-rows"
+      }, otherProps), header && /*#__PURE__*/external_react_default.a.createElement(StyledHeaderComp, null, header), /*#__PURE__*/external_react_default.a.createElement(FormRows_SortableList, {
+        helperClass: "sorting",
+        onSortEnd: this.handleSortEnd,
+        useDragHandle: true
+      }, /*#__PURE__*/external_react_default.a.createElement(FormRows_FormRowsContext.Provider, {
+        value: {
+          disabledDeleteButton: disabled,
+          onKeyDown: this.handleKeyDown,
+          hasOnRequestAdd: hasOnRequestAdd,
+          sortable: sortable
+        }
+      }, clonedChildren)), menu || hasOnRequestAdd && /*#__PURE__*/external_react_default.a.createElement(StyledAddRowButton, {
+        disabled: disabled,
+        appearance: "pill",
+        "data-test": "add-row",
+        icon: /*#__PURE__*/external_react_default.a.createElement(Plus, null),
+        label: addLabel,
+        onClick: onRequestAdd,
+        $sortable: sortable
+      }));
     }
-  }, clonedChildren)), menu || /*#__PURE__*/external_react_default.a.createElement(StyledAddRowButton, {
-    disabled: disabled,
-    appearance: "pill",
-    "data-test": "add-row",
-    icon: /*#__PURE__*/external_react_default.a.createElement(Plus, null),
-    label: addLabel,
-    onClick: onRequestAdd,
-    $sortable: sortable
-  }));
-}
-/**
- * Static function for adding a row.
- *
- * Example Use:
- *
- *      onRequestAdd() => {
- *          this.setState(state => ({
- *              items: FormRows.addRow(
- *                  <FormRows.Row
- *                      index={state.items.length}
- *                      key={createDOMID()}
- *                      onRequestRemove={this.handleRequestRemove}
- *                  >
- *                      <Text />
- *                  </FormRows.Row>,
- *                  state.items
- *              ),
- *          }));
- *      };
- *
- * @param element Row element to add.
- * @param items Array of current FormRows to add to.
- * @return New array of FormRows with new Row added.
- */
-
-
-FormRows.addRow = function (element, items) {
-  return items.concat(element);
-};
-/**
- * Static function for moving a row.
- *
- * Example Use:
- *
- *      onRequestMove({ fromIndex, toIndex }) => {
- *          this.setState(state => ({
- *              items: FormRows.moveRow(fromIndex, toIndex, state.items),
- *          }));
- *      };
- *
- * @param fromIndex Current index of row to move.
- * @param toIndex New index to move row to.
- * @param items Array of current FormRows.
- * @return New array of FormRows arranged in new order.
- */
-
-
-FormRows.moveRow = function (fromIndex, toIndex, items) {
-  var tempArray = items.filter(function (val, idx) {
-    return idx !== fromIndex;
-  });
-  tempArray.splice(toIndex, 0, items[fromIndex]);
-  return tempArray.map(function (item, index) {
-    return /*#__PURE__*/Object(external_react_["cloneElement"])(item, {
-      index: index
-    });
-  });
-};
-/**
- * Static function for removing a row.
- *
- * Example Use:
- *
- *      onRequestRemove(e, { index }) => {
- *          this.setState(state => ({
- *              items: FormRows.removeRow(index, state.items),
- *          }));
- *      };
- *
- * @param index Index of Row to delete.
- * @param items Array of current FormRows.
- * @return New array of FormRows with Row of given index deleted.
- */
-
-
-FormRows.removeRow = function (index, items) {
-  return items.filter(function (val, idx) {
-    return idx !== index;
-  }).map(function (item, idx) {
-    return /*#__PURE__*/Object(external_react_["cloneElement"])(item, {
-      index: idx
-    });
-  });
-};
+  }], [{
+    key: "addRow",
+
+    /**
+     * Static function for adding a row.
+     *
+     * Example Use:
+     *
+     *      onRequestAdd() => {
+     *          this.setState(state => ({
+     *              items: FormRows.addRow(
+     *                  <FormRows.Row
+     *                      index={state.items.length}
+     *                      key={createDOMID()}
+     *                      onRequestRemove={this.handleRequestRemove}
+     *                  >
+     *                      <Text />
+     *                  </FormRows.Row>,
+     *                  state.items
+     *              ),
+     *          }));
+     *      };
+     *
+     * @param element Row element to add.
+     * @param items Array of current FormRows to add to.
+     * @return New array of FormRows with new Row added.
+     */
+    value: function addRow(element, items) {
+      return items.concat(element);
+    }
+    /**
+     * Static function for moving a row.
+     *
+     * Example Use:
+     *
+     *      onRequestMove({ fromIndex, toIndex }) => {
+     *          this.setState(state => ({
+     *              items: FormRows.moveRow(fromIndex, toIndex, state.items),
+     *          }));
+     *      };
+     *
+     * @param fromIndex Current index of row to move.
+     * @param toIndex New index to move row to.
+     * @param items Array of current FormRows.
+     * @return New array of FormRows arranged in new order.
+     */
+
+  }, {
+    key: "moveRow",
+    value: function moveRow(fromIndex, toIndex, items) {
+      var tempArray = items.filter(function (val, idx) {
+        return idx !== fromIndex;
+      });
+      tempArray.splice(toIndex, 0, items[fromIndex]);
+      return tempArray.map(function (item, index) {
+        return /*#__PURE__*/Object(external_react_["cloneElement"])(item, {
+          index: index
+        });
+      });
+    }
+    /**
+     * Static function for removing a row.
+     *
+     * Example Use:
+     *
+     *      onRequestRemove(e, { index }) => {
+     *          this.setState(state => ({
+     *              items: FormRows.removeRow(index, state.items),
+     *          }));
+     *      };
+     *
+     * @param index Index of Row to delete.
+     * @param items Array of current FormRows.
+     * @return New array of FormRows with Row of given index deleted.
+     */
+
+  }, {
+    key: "removeRow",
+    value: function removeRow(index, items) {
+      return items.filter(function (val, idx) {
+        return idx !== index;
+      }).map(function (item, idx) {
+        return /*#__PURE__*/Object(external_react_["cloneElement"])(item, {
+          index: idx
+        });
+      });
+    }
+  }]);
+
+  return FormRows;
+}(external_react_["Component"]);
+
+FormRows_defineProperty(FormRows_FormRows, "propTypes", FormRows_propTypes);
+
+FormRows_defineProperty(FormRows_FormRows, "defaultProps", defaultProps);
+
+FormRows_defineProperty(FormRows_FormRows, "Row", FormRows_Row);
 
-FormRows.propTypes = FormRows_propTypes;
-FormRows.defaultProps = defaultProps;
-FormRows.Row = FormRows_Row;
-/* harmony default export */ var FormRows_FormRows = (FormRows);
+/* harmony default export */ var src_FormRows_FormRows = (FormRows_FormRows);
 
 // CONCATENATED MODULE: ./src/FormRows/index.ts
 
@@ -587,14 +707,14 @@ FormRows.Row = FormRows_Row;
 
 /***/ }),
 
-/***/ 14:
+/***/ 15:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/ScreenReaderContent");
 
 /***/ }),
 
-/***/ 16:
+/***/ 17:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/Button");
@@ -629,13 +749,6 @@ module.exports = require("@splunk/ui-utils/i18n");
 
 /***/ }),
 
-/***/ 59:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/react-ui/CloseButton");
-
-/***/ }),
-
 /***/ 6:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
@@ -661,7 +774,14 @@ function SVG(props) {
 
 /***/ }),
 
-/***/ 67:
+/***/ 62:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/react-ui/CloseButton");
+
+/***/ }),
+
+/***/ 69:
 /***/ (function(module, exports) {
 
 module.exports = require("react-sortable-hoc");
@@ -786,17 +906,17 @@ Icon.defaultProps = defaultProps;
 
 /***/ }),
 
-/***/ 79:
+/***/ 8:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/react-icons/Plus");
+module.exports = require("@splunk/react-ui/Box");
 
 /***/ }),
 
-/***/ 8:
+/***/ 82:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/react-ui/Box");
+module.exports = require("@splunk/react-icons/Plus");
 
 /***/ }),