@splunk/react-ui 4.18.0 → 4.19.0

package/File.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 172);
+/******/ 	return __webpack_require__(__webpack_require__.s = 173);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -108,14 +108,14 @@ module.exports = require("@splunk/react-ui/Clickable");
 
 /***/ }),
 
-/***/ 130:
+/***/ 131:
 /***/ (function(module, exports) {
 
 module.exports = require("lodash/toUpper");
 
 /***/ }),
 
-/***/ 131:
+/***/ 132:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/Progress");
@@ -129,7 +129,7 @@ module.exports = require("@splunk/react-ui/EventListener");
 
 /***/ }),
 
-/***/ 172:
+/***/ 173:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -157,7 +157,7 @@ var omit_ = __webpack_require__(5);
 var omit_default = /*#__PURE__*/__webpack_require__.n(omit_);
 
 // EXTERNAL MODULE: external "lodash/toUpper"
-var toUpper_ = __webpack_require__(130);
+var toUpper_ = __webpack_require__(131);
 var toUpper_default = /*#__PURE__*/__webpack_require__.n(toUpper_);
 
 // EXTERNAL MODULE: external "lodash/isString"
@@ -190,7 +190,7 @@ var Close_ = __webpack_require__(26);
 var Close_default = /*#__PURE__*/__webpack_require__.n(Close_);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/Progress"
-var Progress_ = __webpack_require__(131);
+var Progress_ = __webpack_require__(132);
 var Progress_default = /*#__PURE__*/__webpack_require__.n(Progress_);
 
 // EXTERNAL MODULE: external "@splunk/ui-utils/format"
@@ -278,7 +278,7 @@ var Clickable_ = __webpack_require__(12);
 var Clickable_default = /*#__PURE__*/__webpack_require__.n(Clickable_);
 
 // EXTERNAL MODULE: external "@splunk/themes/mixins"
-var mixins_ = __webpack_require__(80);
+var mixins_ = __webpack_require__(81);
 
 // CONCATENATED MODULE: ./src/File/ItemStyles.ts
 
@@ -1176,7 +1176,7 @@ module.exports = require("@splunk/ui-utils/id");
 
 /***/ }),
 
-/***/ 80:
+/***/ 81:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/themes/mixins");

package/FormRows.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 180);
+/******/ 	return __webpack_require__(__webpack_require__.s = 177);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -101,27 +101,61 @@ module.exports = require("prop-types");
 
 /***/ }),
 
-/***/ 106:
+/***/ 10:
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return updateReactRef; });
+/**
+ * Updates a React ref. Callback refs and object refs (from `createRef` and `useRef`) are supported.
+ *
+ * @param ref - The React callback or object ref. Can be `null` or `undefined`.
+ * @param current - The new value of the ref.
+ */
+function updateReactRef(ref, current) {
+  if (ref) {
+    if (typeof ref === 'function') {
+      ref(current);
+    } else {
+      // the public signature of this util uses React.Ref<T> to mirror the way React types refs.
+      // the intention here is to signal "we will take care of setting 'current', not you".
+      ref.current = current; // eslint-disable-line no-param-reassign
+    }
+  }
+}
+
+
+
+/***/ }),
+
+/***/ 107:
 /***/ (function(module, exports) {
 
-module.exports = require("react-sortable-hoc");
+module.exports = require("@dnd-kit/sortable");
 
 /***/ }),
 
-/***/ 132:
+/***/ 133:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-icons/Plus");
 
 /***/ }),
 
-/***/ 133:
+/***/ 134:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-icons/enterprise/Plus");
 
 /***/ }),
 
+/***/ 135:
+/***/ (function(module, exports) {
+
+module.exports = require("@dnd-kit/utilities");
+
+/***/ }),
+
 /***/ 14:
 /***/ (function(module, exports) {
 
@@ -136,7 +170,7 @@ module.exports = require("@splunk/react-ui/Button");
 
 /***/ }),
 
-/***/ 180:
+/***/ 177:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -173,11 +207,11 @@ FormRowsContext.displayName = 'FormRows';
 var themes_ = __webpack_require__(0);
 
 // EXTERNAL MODULE: external "@splunk/react-icons/Plus"
-var Plus_ = __webpack_require__(132);
+var Plus_ = __webpack_require__(133);
 var Plus_default = /*#__PURE__*/__webpack_require__.n(Plus_);
 
 // EXTERNAL MODULE: external "@splunk/react-icons/enterprise/Plus"
-var enterprise_Plus_ = __webpack_require__(133);
+var enterprise_Plus_ = __webpack_require__(134);
 var enterprise_Plus_default = /*#__PURE__*/__webpack_require__.n(enterprise_Plus_);
 
 // CONCATENATED MODULE: ./src/FormRows/icons/FormRowsPlusIcon.tsx
@@ -202,21 +236,14 @@ var FormRowsPlusIcon_FormRowsPlusIcon = function FormRowsPlusIcon() {
 };
 
 /* harmony default export */ var icons_FormRowsPlusIcon = (FormRowsPlusIcon_FormRowsPlusIcon);
-// EXTERNAL MODULE: external "react-sortable-hoc"
-var external_react_sortable_hoc_ = __webpack_require__(106);
-
 // EXTERNAL MODULE: external "lodash/omit"
 var omit_ = __webpack_require__(5);
 var omit_default = /*#__PURE__*/__webpack_require__.n(omit_);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/CloseButton"
-var CloseButton_ = __webpack_require__(89);
+var CloseButton_ = __webpack_require__(90);
 var CloseButton_default = /*#__PURE__*/__webpack_require__.n(CloseButton_);
 
-// EXTERNAL MODULE: external "@splunk/react-ui/ScreenReaderContent"
-var ScreenReaderContent_ = __webpack_require__(14);
-var ScreenReaderContent_default = /*#__PURE__*/__webpack_require__.n(ScreenReaderContent_);
-
 // EXTERNAL MODULE: external "styled-components"
 var external_styled_components_ = __webpack_require__(3);
 var external_styled_components_default = /*#__PURE__*/__webpack_require__.n(external_styled_components_);
@@ -311,15 +338,168 @@ var StyledDrag = external_styled_components_default.a.div.withConfig({
   prisma: Object(external_styled_components_["css"])(["height:20px;"])
 }));
 
-// 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); }
-
+// CONCATENATED MODULE: ./src/FormRows/RowInternal.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); }
 
 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; }
 
+
+
+
+
+
+
+
+/** @public */
+
+var propTypes = {
+  children: external_prop_types_default.a.node,
+  index: external_prop_types_default.a.number,
+  onRequestRemove: external_prop_types_default.a.func,
+  renderDragHandle: external_prop_types_default.a.func,
+  style: external_prop_types_default.a.object,
+  value: external_prop_types_default.a.node
+};
+var RowInternal = /*#__PURE__*/external_react_default.a.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+      index = _ref.index,
+      onRequestRemove = _ref.onRequestRemove,
+      renderDragHandle = _ref.renderDragHandle,
+      otherProps = _objectWithoutProperties(_ref, ["children", "index", "onRequestRemove", "renderDragHandle"]);
+
+  var _useContext = Object(external_react_["useContext"])(FormRows_FormRowsContext),
+      disabledDeleteButtonContext = _useContext.disabledDeleteButton,
+      hasOnRequestAddContext = _useContext.hasOnRequestAdd,
+      onKeyDownContext = _useContext.onKeyDown,
+      sortableContext = _useContext.sortable;
+
+  var handleKeyDown = Object(external_react_["useCallback"])(function (e) {
+    // TODO: this callback doesn't work correctly if index isn't provided SUI-5639
+    onKeyDownContext === null || onKeyDownContext === void 0 ? void 0 : onKeyDownContext(e, {
+      index: index !== null && index !== void 0 ? index : 0
+    });
+  }, [onKeyDownContext, index]);
+  var handleRequestRemove = Object(external_react_["useCallback"])(function (e) {
+    // TODO: this callback doesn't work correctly if index isn't provided SUI-5639
+    onRequestRemove === null || onRequestRemove === void 0 ? void 0 : onRequestRemove(e, {
+      index: index !== null && index !== void 0 ? index : 0
+    });
+  }, [onRequestRemove, index]);
+  var onRequestRemoveExists = onRequestRemove !== undefined;
+
+  if (false) {}
+
+  if (false) {}
+
+  if (false) {}
+
+  return /*#__PURE__*/external_react_default.a.createElement(Styled, _extends({
+    $sortable: sortableContext,
+    "data-test": "row",
+    ref: ref,
+    onKeyDown: handleKeyDown
+  }, omit_default()(otherProps, ['onKeyDown', 'onRequestRemove'])), renderDragHandle && renderDragHandle(), 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: handleRequestRemove,
+    screenReaderText: Object(i18n_["_"])('Remove Row')
+  })));
+});
+RowInternal.propTypes = propTypes;
+/* harmony default export */ var FormRows_RowInternal = (RowInternal);
+// EXTERNAL MODULE: external "@dnd-kit/sortable"
+var sortable_ = __webpack_require__(107);
+
+// EXTERNAL MODULE: external "@dnd-kit/utilities"
+var utilities_ = __webpack_require__(135);
+
+// EXTERNAL MODULE: external "@splunk/react-ui/ScreenReaderContent"
+var ScreenReaderContent_ = __webpack_require__(14);
+var ScreenReaderContent_default = /*#__PURE__*/__webpack_require__.n(ScreenReaderContent_);
+
+// EXTERNAL MODULE: ./src/utils/updateReactRef.ts
+var updateReactRef = __webpack_require__(10);
+
+// CONCATENATED MODULE: ./src/FormRows/SortableRow.tsx
+function SortableRow_objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = SortableRow_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 SortableRow_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 SortableRow_extends() { SortableRow_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 SortableRow_extends.apply(this, arguments); }
+
+
+
+
+
+
+
+
+
+
+var SortableRow_propTypes = {
+  children: external_prop_types_default.a.node,
+  index: external_prop_types_default.a.number,
+  onRequestRemove: external_prop_types_default.a.func,
+  value: external_prop_types_default.a.node
+};
+var DragHandle = /*#__PURE__*/external_react_default.a.forwardRef(function (props, ref) {
+  return /*#__PURE__*/external_react_default.a.createElement(StyledDrag, SortableRow_extends({
+    "data-test": "drag-handle",
+    ref: ref
+  }, props), /*#__PURE__*/external_react_default.a.createElement(ScreenReaderContent_default.a, null, Object(i18n_["_"])('Press arrow up or arrow down to re-order items')));
+});
+var SortableRow_Row = /*#__PURE__*/external_react_default.a.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+      index = _ref.index,
+      otherProps = SortableRow_objectWithoutProperties(_ref, ["children", "index"]);
+
+  // @docs-props-type RowPropsBase
+  var _useSortable = Object(sortable_["useSortable"])({
+    // @dnd-kit requires "id" to be greater than 0 https://github.com/clauderic/dnd-kit/issues/1150
+    // TODO: FormRows drag functionality doesn't work without an index, but it's not a required prop SUI-5639
+    id: (index || 0) + 1
+  }),
+      attributes = _useSortable.attributes,
+      listeners = _useSortable.listeners,
+      setActivatorNodeRef = _useSortable.setActivatorNodeRef,
+      setNodeRef = _useSortable.setNodeRef,
+      transform = _useSortable.transform,
+      transition = _useSortable.transition;
+
+  var style = {
+    transform: utilities_["CSS"].Transform.toString(transform),
+    transition: transition
+  };
+
+  var handleRef = function handleRef(el) {
+    setNodeRef(el);
+    Object(updateReactRef["a" /* updateReactRef */])(ref, el);
+  };
+
+  return /*#__PURE__*/external_react_default.a.createElement(FormRows_RowInternal, SortableRow_extends({
+    index: index,
+    ref: handleRef,
+    renderDragHandle: function renderDragHandle() {
+      return /*#__PURE__*/external_react_default.a.createElement(DragHandle, SortableRow_extends({
+        ref: setActivatorNodeRef
+      }, listeners));
+    },
+    style: style
+  }, otherProps, attributes), children);
+});
+SortableRow_Row.propTypes = SortableRow_propTypes;
+/* harmony default export */ var SortableRow = (SortableRow_Row);
+// 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 Row_objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = Row_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 Row_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); } }
@@ -348,17 +528,11 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
 
 
-
-
-
-var propTypes = {
+var Row_propTypes = {
   children: external_prop_types_default.a.node,
   elementRef: external_prop_types_default.a.oneOfType([external_prop_types_default.a.func, external_prop_types_default.a.object]),
   index: external_prop_types_default.a.number,
   onRequestRemove: external_prop_types_default.a.func,
-
-  /** @private */
-  rowIndex: external_prop_types_default.a.number,
   value: external_prop_types_default.a.node
 };
 
@@ -368,92 +542,79 @@ var Row_Row = /*#__PURE__*/function (_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
-      });
-    });
-
-    _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
-      });
-    });
-
-    return _this;
+    return _super.apply(this, arguments);
   }
 
   _createClass(Row, [{
     key: "render",
+    // @docs-props-type RowPropsBase
     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
-      , _extends({
-        $sortable: sortableContext,
-        "data-test": "row",
-        ref: elementRef,
-        onKeyDown: this.handleKeyDown // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-        ,
-        tabIndex: sortableContext ? 0 : undefined
-      }, omit_default()(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')
-      })));
+      var _this$props = this.props,
+          children = _this$props.children,
+          elementRef = _this$props.elementRef,
+          otherProps = Row_objectWithoutProperties(_this$props, ["children", "elementRef"]);
+
+      var sortableContext = this.context.sortable;
+      var rowProps = omit_default()(otherProps, ['onKeyDown']);
+      var RowComponent = sortableContext ? SortableRow : FormRows_RowInternal;
+      return /*#__PURE__*/external_react_default.a.createElement(RowComponent, Row_extends({
+        ref: elementRef
+      }, rowProps), children);
     }
   }]);
 
   return Row;
 }(external_react_["Component"]);
 
-_defineProperty(Row_Row, "propTypes", propTypes);
+_defineProperty(Row_Row, "propTypes", Row_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);
+/* harmony default export */ var FormRows_Row = (Row_Row);
+// EXTERNAL MODULE: external "@dnd-kit/core"
+var core_ = __webpack_require__(73);
+
 // CONCATENATED MODULE: ./src/FormRows/SortableList.tsx
 
 
 
-var SortableList = Object(external_react_sortable_hoc_["SortableContainer"])(function (_ref) {
-  var children = _ref.children;
-  return /*#__PURE__*/external_react_default.a.createElement(StyledRows, null, children);
-});
-/* harmony default export */ var FormRows_SortableList = (SortableList);
+
+var SortableList_SortableList = function SortableList(_ref) {
+  var children = _ref.children,
+      onSortEnd = _ref.onSortEnd;
+  var sensors = Object(core_["useSensors"])(Object(core_["useSensor"])(core_["PointerSensor"]), Object(core_["useSensor"])(core_["MouseSensor"]));
+  var validChildren = external_react_["Children"].toArray(children).filter(external_react_["isValidElement"]);
+  var items = validChildren.map(function (child) {
+    return (child.props.index || 0) + 1;
+  });
+
+  function handleDragEnd(event) {
+    var active = event.active,
+        over = event.over;
+
+    if (over && active.id !== over.id) {
+      var oldIndex = items.indexOf(active.id);
+      var newIndex = items.indexOf(over.id);
+      onSortEnd({
+        oldIndex: oldIndex,
+        newIndex: newIndex
+      });
+    }
+  }
+
+  return /*#__PURE__*/external_react_default.a.createElement(core_["DndContext"], {
+    sensors: sensors,
+    collisionDetection: core_["closestCenter"],
+    onDragEnd: handleDragEnd
+  }, /*#__PURE__*/external_react_default.a.createElement(sortable_["SortableContext"], {
+    items: items,
+    strategy: sortable_["verticalListSortingStrategy"]
+  }, validChildren));
+};
+
+/* harmony default export */ var FormRows_SortableList = (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); }
 
@@ -588,25 +749,18 @@ var FormRows_FormRows = /*#__PURE__*/function (_Component) {
       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, {
+      }, otherProps), /*#__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, {
+      }, header && /*#__PURE__*/external_react_default.a.createElement(StyledHeaderComp, null, header), /*#__PURE__*/external_react_default.a.createElement(StyledRows, null, /*#__PURE__*/external_react_default.a.createElement(FormRows_SortableList, {
+        onSortEnd: this.handleSortEnd
+      }, children)), menu || hasOnRequestAdd && /*#__PURE__*/external_react_default.a.createElement(StyledAddRowButton, {
         disabled: disabled,
         appearance: "pill",
         "data-test": "add-row",
@@ -614,7 +768,7 @@ var FormRows_FormRows = /*#__PURE__*/function (_Component) {
         label: addLabel,
         onClick: onRequestAdd,
         $sortable: sortable
-      }));
+      })));
     }
   }], [{
     key: "addRow",
@@ -764,7 +918,14 @@ module.exports = require("@splunk/ui-utils/keyboard");
 
 /***/ }),
 
-/***/ 89:
+/***/ 73:
+/***/ (function(module, exports) {
+
+module.exports = require("@dnd-kit/core");
+
+/***/ }),
+
+/***/ 90:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/CloseButton");