@elliemae/ds-treeview 1.57.1-rc.0 → 2.0.0-alpha.11

package/esm/deprecated/plugins/dnd/TreeDndPlugin.js

@@ -1,48 +1,36 @@
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
-import _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray';
+import 'core-js/modules/web.dom-collections.iterator.js';
 import { useState, useCallback, useMemo } from 'react';
-import { isEqual } from '@elliemae/ds-utilities';
+import { isEqual } from '@elliemae/ds-utilities/utils';
 import createInstancePlugin from '@elliemae/ds-shared/createDataInstance/createInstancePlugin';
 import DraggableItem from './renderers/DraggableItem.js';
 import DroppableList from './renderers/DroppableList.js';
 import { getTreePosition, changePositionSameArray, changePositionBetweenDifferentArrays } from './utils.js';
-import '@babel/runtime/helpers/esm/extends';
-import '@babel/runtime/helpers/esm/toConsumableArray';
-import '@babel/runtime/helpers/esm/objectWithoutProperties';
-import 'react-beautiful-dnd';
-import '@elliemae/ds-icons';
-import '@elliemae/ds-shared/FocusGroup/FocusGroupContext';
-import '../tree/utils.js';
-import 'lodash/get';
 
 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; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-var TreeDndPlugin = createInstancePlugin('tree-dnd', {
-  state: function state(instance) {
-    var originalData = instance.originalData,
-        _instance$props = instance.props,
-        _instance$props$child = _instance$props.childrenKey,
-        childrenKey = _instance$props$child === void 0 ? 'children' : _instance$props$child,
-        _instance$props$onOrd = _instance$props.onOrderChange,
-        onOrderChange = _instance$props$onOrd === void 0 ? function () {
-      return null;
-    } : _instance$props$onOrd; // eslint-disable-next-line react-hooks/rules-of-hooks
-
-    var _useState = useState(null),
-        _useState2 = _slicedToArray(_useState, 2),
-        draggedRecord = _useState2[0],
-        setDraggedRecord = _useState2[1]; // eslint-disable-next-line react-hooks/rules-of-hooks
+const TreeDndPlugin = createInstancePlugin('tree-dnd', {
+  state(instance) {
+    const {
+      originalData,
+      props: {
+        childrenKey = 'children',
+        onOrderChange = () => null
+      }
+    } = instance; // eslint-disable-next-line react-hooks/rules-of-hooks
 
+    const [draggedRecord, setDraggedRecord] = useState(null); // eslint-disable-next-line react-hooks/rules-of-hooks
 
-    var changeRecordsPosition = useCallback(function (_ref) {
-      var sourceRecord = _ref.sourceRecord,
-          targetRecord = _ref.targetRecord,
-          combineWith = _ref.combineWith,
-          down = _ref.down;
-      var nextTreeData;
-      var sourceTreePosition = getTreePosition(sourceRecord.path);
-      var targetTreePosition = {};
+    const changeRecordsPosition = useCallback(({
+      sourceRecord,
+      targetRecord,
+      combineWith,
+      down
+    }) => {
+      let nextTreeData;
+      const sourceTreePosition = getTreePosition(sourceRecord.path);
+      let targetTreePosition = {};
 
       if (combineWith) {
         targetTreePosition = {
@@ -58,25 +46,25 @@ var TreeDndPlugin = createInstancePlugin('tree-dnd', {
       // if we combine elements, we change a different array (the children of the target)
 
 
-      var changingSameArray = !combineWith && isEqual(sourceTreePosition.parentPath, targetTreePosition.parentPath);
+      const changingSameArray = !combineWith && isEqual(sourceTreePosition.parentPath, targetTreePosition.parentPath);
 
       if (changingSameArray) {
         nextTreeData = changePositionSameArray({
-          sourceRecord: sourceRecord,
-          targetRecord: targetRecord,
-          sourceTreePosition: sourceTreePosition,
-          targetTreePosition: targetTreePosition,
+          sourceRecord,
+          targetRecord,
+          sourceTreePosition,
+          targetTreePosition,
           data: originalData
         });
       } else {
         nextTreeData = changePositionBetweenDifferentArrays({
-          sourceRecord: sourceRecord,
+          sourceRecord,
           targetRecord: combineWith || targetRecord,
-          combineWith: combineWith,
-          sourceTreePosition: sourceTreePosition,
-          targetTreePosition: targetTreePosition,
+          combineWith,
+          sourceTreePosition,
+          targetTreePosition,
           data: originalData,
-          down: down
+          down
         });
       }
 
@@ -91,29 +79,26 @@ var TreeDndPlugin = createInstancePlugin('tree-dnd', {
     }, [originalData, childrenKey]);
     return {
       state: {
-        draggedRecord: draggedRecord
+        draggedRecord
       },
       actions: {
-        setDraggedRecord: setDraggedRecord,
-        changeRecordsPosition: changeRecordsPosition
+        setDraggedRecord,
+        changeRecordsPosition
       }
     };
   },
-  renderers: function renderers(_renderers, instance) {
+
+  renderers(renderers, instance) {
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    var item = useMemo(function () {
-      return DraggableItem(_renderers);
-    }, []); // eslint-disable-next-line react-hooks/rules-of-hooks
+    const item = useMemo(() => DraggableItem(renderers), []); // eslint-disable-next-line react-hooks/rules-of-hooks
 
-    var list = useMemo(function () {
-      return DroppableList(_renderers, instance);
-    }, []);
-    return _objectSpread(_objectSpread({}, _renderers), {}, {
-      item: item,
-      list: list
+    const list = useMemo(() => DroppableList(renderers, instance), []);
+    return _objectSpread(_objectSpread({}, renderers), {}, {
+      item,
+      list
     });
   }
+
 });
 
 export { TreeDndPlugin };
-//# sourceMappingURL=TreeDndPlugin.js.map

package/esm/deprecated/plugins/dnd/index.js

@@ -1,18 +1 @@
 export { TreeDndPlugin } from './TreeDndPlugin.js';
-import '@babel/runtime/helpers/esm/defineProperty';
-import '@babel/runtime/helpers/esm/slicedToArray';
-import 'react';
-import '@elliemae/ds-utilities';
-import '@elliemae/ds-shared/createDataInstance/createInstancePlugin';
-import './renderers/DraggableItem.js';
-import '@babel/runtime/helpers/esm/extends';
-import '@babel/runtime/helpers/esm/toConsumableArray';
-import '@babel/runtime/helpers/esm/objectWithoutProperties';
-import 'react-beautiful-dnd';
-import '@elliemae/ds-icons';
-import './utils.js';
-import './renderers/DroppableList.js';
-import '@elliemae/ds-shared/FocusGroup/FocusGroupContext';
-import '../tree/utils.js';
-import 'lodash/get';
-//# sourceMappingURL=index.js.map

package/esm/deprecated/plugins/dnd/renderers/DraggableItem.js

@@ -1,52 +1,54 @@
-import _extends from '@babel/runtime/helpers/esm/extends';
-import _toConsumableArray from '@babel/runtime/helpers/esm/toConsumableArray';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
-import React from 'react';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'react';
 import { Draggable } from 'react-beautiful-dnd';
-import { GripperVertical } from '@elliemae/ds-icons';
+import GripperVertical from '@elliemae/ds-icons/GripperVertical';
 import { getDraggableProps } from '../utils.js';
-import '@babel/runtime/helpers/esm/defineProperty';
-import '@elliemae/ds-utilities';
-
-var _excluded = ["key"];
-
-var DraggableItem = function DraggableItem(renderers // , instance
-) {
-  return function (props) {
-    var _record$parentNode, _record$parentNode$da, _record$data;
-
-    var record = props.record,
-        index = props.index,
-        isItemFocused = props.isItemFocused;
-    var ItemComponent = renderers.item;
-    var isDragDisabled = (record === null || record === void 0 ? void 0 : (_record$parentNode = record.parentNode) === null || _record$parentNode === void 0 ? void 0 : (_record$parentNode$da = _record$parentNode.data) === null || _record$parentNode$da === void 0 ? void 0 : _record$parentNode$da.disableDragChildren) || (record === null || record === void 0 ? void 0 : (_record$data = record.data) === null || _record$data === void 0 ? void 0 : _record$data.disableDrag) || false; // const { draggedRecord } = instance.getInstance().state;
-    // const isDragging = record.id === draggedRecord?.id;
-
-    return /*#__PURE__*/React.createElement(Draggable, {
-      isDragDisabled: isDragDisabled,
-      key: "".concat(record.id, "-draggable"),
-      draggableId: String(record.id),
-      index: index
-    }, function (provided, snapshot) {
-      var _getDraggableProps = getDraggableProps(props, provided, snapshot),
-          key = _getDraggableProps.key,
+import { jsx } from 'react/jsx-runtime';
+
+const _excluded = ["key"];
+
+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; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+const DraggableItem = (renderers // , instance
+) => props => {
+  var _record$parentNode, _record$parentNode$da, _record$data;
+
+  const {
+    record,
+    index,
+    isItemFocused
+  } = props;
+  const ItemComponent = renderers.item;
+  const isDragDisabled = (record === null || record === void 0 ? void 0 : (_record$parentNode = record.parentNode) === null || _record$parentNode === void 0 ? void 0 : (_record$parentNode$da = _record$parentNode.data) === null || _record$parentNode$da === void 0 ? void 0 : _record$parentNode$da.disableDragChildren) || (record === null || record === void 0 ? void 0 : (_record$data = record.data) === null || _record$data === void 0 ? void 0 : _record$data.disableDrag) || false; // const { draggedRecord } = instance.getInstance().state;
+  // const isDragging = record.id === draggedRecord?.id;
+
+  return /*#__PURE__*/_jsx(Draggable, {
+    isDragDisabled: isDragDisabled,
+    draggableId: String(record.id),
+    index: index
+  }, "".concat(record.id, "-draggable"), (provided, snapshot) => {
+    const _getDraggableProps = getDraggableProps(props, provided, snapshot),
+          {
+      key
+    } = _getDraggableProps,
           draggableProps = _objectWithoutProperties(_getDraggableProps, _excluded);
 
-      return /*#__PURE__*/React.createElement(ItemComponent, _extends({
-        key: key
-      }, draggableProps, {
-        // isDragging={isDragging}
-        leftAddons: [/*#__PURE__*/React.createElement(GripperVertical, _extends({
-          "data-testid": "drag-handle",
-          key: "".concat(record.id, "-drag-handle")
-        }, provided.dragHandleProps, {
-          className: "drag-handle",
-          tabIndex: isItemFocused ? 0 : -1
-        }))].concat(_toConsumableArray(props.leftAddons || []))
-      }), props.children);
-    });
-  };
+    return /*#__PURE__*/jsx(ItemComponent, _objectSpread(_objectSpread({}, draggableProps), {}, {
+      // isDragging={isDragging}
+      leftAddons: [/*#__PURE__*/jsx(GripperVertical, _objectSpread(_objectSpread({
+        "data-testid": "drag-handle"
+      }, provided.dragHandleProps), {}, {
+        className: "drag-handle",
+        tabIndex: isItemFocused ? 0 : -1
+      }), "".concat(record.id, "-drag-handle")), ...(props.leftAddons || [])],
+      children: props.children
+    }), key);
+  });
 };
 
 export { DraggableItem as default };
-//# sourceMappingURL=DraggableItem.js.map

package/esm/deprecated/plugins/dnd/renderers/DroppableList.js

@@ -1,159 +1,166 @@
-import _extends from '@babel/runtime/helpers/esm/extends';
-import _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
-import React, { useContext, useState, useRef, useCallback } from 'react';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import { useContext, useState, useRef, useCallback, createElement } from 'react';
 import { DragDropContext, Droppable } from 'react-beautiful-dnd';
-import { cx, mergeRefs } from '@elliemae/ds-utilities';
-import { GripperVertical } from '@elliemae/ds-icons';
+import { cx } from '@elliemae/ds-utilities/utils';
+import GripperVertical from '@elliemae/ds-icons/GripperVertical';
+import { mergeRefs } from '@elliemae/ds-utilities/system';
 import FocusGroupContext from '@elliemae/ds-shared/FocusGroup/FocusGroupContext';
 import { findItemById, findItemOnDocument } from '../../tree/utils.js';
 import { getDraggableProps } from '../utils.js';
-import 'lodash/get';
-import '@babel/runtime/helpers/esm/toConsumableArray';
-import '@babel/runtime/helpers/esm/defineProperty';
-
-var _excluded = ["records"];
-
-var DroppableList = function DroppableList(renderers, instance) {
-  return function (_ref) {
-    var records = _ref.records,
-        rest = _objectWithoutProperties(_ref, _excluded);
-
-    var _instance$getInstance = instance.getInstance(),
-        _instance$getInstance2 = _instance$getInstance.props,
-        _instance$getInstance3 = _instance$getInstance2.expandTimerDelay,
-        expandTimerDelay = _instance$getInstance3 === void 0 ? 1000 : _instance$getInstance3,
-        restrictDragAndDrop = _instance$getInstance2.restrictDragAndDrop,
-        _instance$getInstance4 = _instance$getInstance.actions,
-        setDraggedRecord = _instance$getInstance4.setDraggedRecord,
-        changeRecordsPosition = _instance$getInstance4.changeRecordsPosition,
-        toggleExpand = _instance$getInstance4.toggleExpand,
-        draggedRecord = _instance$getInstance.state.draggedRecord,
-        itemRenderer = _instance$getInstance.itemRenderer;
-
-    var focusContext = useContext(FocusGroupContext);
-
-    var _useState = useState(false),
-        _useState2 = _slicedToArray(_useState, 2),
-        focusedItemWasDragged = _useState2[0],
-        setFocusedItemWasDragged = _useState2[1];
-
-    var preDragFocusedNode = useRef();
-    var expandTimerRef = useRef();
-    var draggedRecordShouldExpand = useRef(false);
-    var currTargetRef = useRef({});
-    var onDragUpdate = useCallback(function (data) {
-      var destination = data.destination,
-          combine = data.combine;
-      clearTimeout(expandTimerRef.current);
-
-      if (combine) {
-        var draggableId = combine.draggableId;
-        var targetRecord = findItemById(records, draggableId);
-
-        if (targetRecord && targetRecord.isGroup && !targetRecord.expanded) {
-          expandTimerRef.current = setTimeout(function () {
-            return toggleExpand(targetRecord);
-          }, expandTimerDelay);
-        }
+import { jsx } from 'react/jsx-runtime';
+
+const _excluded = ["records"];
+
+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; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+const DroppableList = (renderers, instance) => _ref => {
+  let {
+    records
+  } = _ref,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  const {
+    props: {
+      expandTimerDelay = 1000,
+      restrictDragAndDrop
+    },
+    actions: {
+      setDraggedRecord,
+      changeRecordsPosition,
+      toggleExpand
+    },
+    state: {
+      draggedRecord
+    },
+    itemRenderer
+  } = instance.getInstance();
+  const focusContext = useContext(FocusGroupContext);
+  const [focusedItemWasDragged, setFocusedItemWasDragged] = useState(false);
+  const preDragFocusedNode = useRef();
+  const expandTimerRef = useRef();
+  const draggedRecordShouldExpand = useRef(false);
+  const currTargetRef = useRef({});
+  const onDragUpdate = useCallback(data => {
+    const {
+      destination,
+      combine
+    } = data;
+    clearTimeout(expandTimerRef.current);
+
+    if (combine) {
+      const {
+        draggableId
+      } = combine;
+      const targetRecord = findItemById(records, draggableId);
+
+      if (targetRecord && targetRecord.isGroup && !targetRecord.expanded) {
+        expandTimerRef.current = setTimeout(() => toggleExpand(targetRecord), expandTimerDelay);
       }
-
-      currTargetRef.current = destination || currTargetRef.current;
-    }, [records]);
-    var onDragStart = useCallback(function (_ref2) {
-      var source = _ref2.source;
-      preDragFocusedNode.current = document.activeElement; // when we move the currently focused item, preDragFocusedNode is the body of the doc
-
-      setFocusedItemWasDragged(preDragFocusedNode.current.tagName === 'BODY');
-      var draggingRecord = records[source.index];
-
-      if (draggingRecord.expanded) {
-        draggedRecordShouldExpand.current = true;
-        toggleExpand(draggingRecord);
-      }
-
-      setDraggedRecord(draggingRecord);
-    }, [records]);
-    var onDragEnd = useCallback( // eslint-disable-next-line complexity
-    // eslint-disable-next-line max-statements
-    function (_ref3) {
-      var _sourceRecord$parentN, _targetRecord$parentN;
-
-      var destination = _ref3.destination,
-          source = _ref3.source,
-          combine = _ref3.combine;
-      clearTimeout(expandTimerRef.current);
-      var sourceIndex = source.index;
-      var destinationIndex = destination && destination.index;
-      if (sourceIndex === destinationIndex) return;
-      var sourceRecord = records[sourceIndex];
-      var targetRecord = destination && records[destinationIndex];
-      var combineWith = combine && findItemById(records, combine.draggableId);
-      var down = sourceIndex < destinationIndex;
-      if (restrictDragAndDrop && (sourceRecord === null || sourceRecord === void 0 ? void 0 : (_sourceRecord$parentN = sourceRecord.parentNode) === null || _sourceRecord$parentN === void 0 ? void 0 : _sourceRecord$parentN.id) !== (targetRecord === null || targetRecord === void 0 ? void 0 : (_targetRecord$parentN = targetRecord.parentNode) === null || _targetRecord$parentN === void 0 ? void 0 : _targetRecord$parentN.id)) return; // TODO check if we can change the records Immutable, this makes the DOM inconsistent on first renderers
-
-      changeRecordsPosition({
-        sourceRecord: sourceRecord,
-        targetRecord: targetRecord,
-        combineWith: combineWith,
-        down: down
-      });
-
-      if (draggedRecordShouldExpand.current) {
-        draggedRecordShouldExpand.current = false;
-        toggleExpand(sourceRecord);
-      }
-
-      if (focusContext) {
-        // TODO if we fix the mutable/immutable records handling this work-around should not be required anymore
-        setTimeout(function () {
-          var postDragFocusedNode = focusedItemWasDragged ? findItemOnDocument(sourceRecord.id) : findItemOnDocument(preDragFocusedNode.current.dataset.id);
-          focusContext.focusItemByNode(postDragFocusedNode);
-        }, 0);
-      }
-
-      currTargetRef.current = null;
-      setDraggedRecord(null);
-    }, [records, focusedItemWasDragged]);
-    var ItemComponent = renderers.item,
-        ListComponent = renderers.list;
-    var renderClone = useCallback(function (provided, snapshot, rubric) {
-      var targetRecord = currTargetRef.current && records[currTargetRef.current.index] || {};
-      var record = records[rubric.source.index];
-      return /*#__PURE__*/React.createElement(ItemComponent, _extends({}, provided.draggableProps, {
-        key: rubric.source.index,
-        record: record
-      }, getDraggableProps({
-        className: 'item-cloned'
-      }, provided, snapshot)), /*#__PURE__*/React.createElement(GripperVertical, _extends({}, provided.dragHandleProps, {
-        className: "drag-handle"
-      })), itemRenderer({
-        record: record,
-        nestingLevel: targetRecord.nestingLevel
-      }));
-    }, [currTargetRef, records, itemRenderer]);
-    return /*#__PURE__*/React.createElement(DragDropContext, {
-      onDragEnd: onDragEnd,
-      onDragStart: onDragStart,
-      onDragUpdate: onDragUpdate
-    }, /*#__PURE__*/React.createElement(Droppable, {
-      droppableId: "droppableId",
-      isCombineEnabled: true,
-      mode: "virtual",
-      renderClone: renderClone
-    }, function (droppableProvided, snapshot) {
-      // Add an extra item to our list to make space for a dragging item
-      // work in a virtual list
-      var itemCount = snapshot.isUsingPlaceholder ? records.length + 1 : records.length;
-      return /*#__PURE__*/React.createElement(ListComponent, _extends({}, rest, {
-        className: cx(rest.className, draggedRecord && 'dragging'),
-        innerRef: mergeRefs(droppableProvided.innerRef, rest.innerRef, rest.ref),
-        itemCount: itemCount,
-        records: records
-      }));
+    }
+
+    currTargetRef.current = destination || currTargetRef.current;
+  }, [records]);
+  const onDragStart = useCallback(({
+    source
+  }) => {
+    preDragFocusedNode.current = document.activeElement; // when we move the currently focused item, preDragFocusedNode is the body of the doc
+
+    setFocusedItemWasDragged(preDragFocusedNode.current.tagName === 'BODY');
+    const draggingRecord = records[source.index];
+
+    if (draggingRecord.expanded) {
+      draggedRecordShouldExpand.current = true;
+      toggleExpand(draggingRecord);
+    }
+
+    setDraggedRecord(draggingRecord);
+  }, [records]);
+  const onDragEnd = useCallback( // eslint-disable-next-line complexity
+  // eslint-disable-next-line max-statements
+  ({
+    destination,
+    source,
+    combine
+  }) => {
+    var _sourceRecord$parentN, _targetRecord$parentN;
+
+    clearTimeout(expandTimerRef.current);
+    const sourceIndex = source.index;
+    const destinationIndex = destination && destination.index;
+    if (sourceIndex === destinationIndex) return;
+    const sourceRecord = records[sourceIndex];
+    const targetRecord = destination && records[destinationIndex];
+    const combineWith = combine && findItemById(records, combine.draggableId);
+    const down = sourceIndex < destinationIndex;
+    if (restrictDragAndDrop && (sourceRecord === null || sourceRecord === void 0 ? void 0 : (_sourceRecord$parentN = sourceRecord.parentNode) === null || _sourceRecord$parentN === void 0 ? void 0 : _sourceRecord$parentN.id) !== (targetRecord === null || targetRecord === void 0 ? void 0 : (_targetRecord$parentN = targetRecord.parentNode) === null || _targetRecord$parentN === void 0 ? void 0 : _targetRecord$parentN.id)) return; // TODO check if we can change the records Immutable, this makes the DOM inconsistent on first renderers
+
+    changeRecordsPosition({
+      sourceRecord,
+      targetRecord,
+      combineWith,
+      down
+    });
+
+    if (draggedRecordShouldExpand.current) {
+      draggedRecordShouldExpand.current = false;
+      toggleExpand(sourceRecord);
+    }
+
+    if (focusContext) {
+      // TODO if we fix the mutable/immutable records handling this work-around should not be required anymore
+      setTimeout(() => {
+        const postDragFocusedNode = focusedItemWasDragged ? findItemOnDocument(sourceRecord.id) : findItemOnDocument(preDragFocusedNode.current.dataset.id);
+        focusContext.focusItemByNode(postDragFocusedNode);
+      }, 0);
+    }
+
+    currTargetRef.current = null;
+    setDraggedRecord(null);
+  }, [records, focusedItemWasDragged]);
+  const {
+    item: ItemComponent,
+    list: ListComponent
+  } = renderers;
+  const renderClone = useCallback((provided, snapshot, rubric) => {
+    const targetRecord = currTargetRef.current && records[currTargetRef.current.index] || {};
+    const record = records[rubric.source.index];
+    return /*#__PURE__*/createElement(ItemComponent, _objectSpread(_objectSpread({}, provided.draggableProps), {}, {
+      key: rubric.source.index,
+      record: record
+    }, getDraggableProps({
+      className: 'item-cloned'
+    }, provided, snapshot)), /*#__PURE__*/jsx(GripperVertical, _objectSpread(_objectSpread({}, provided.dragHandleProps), {}, {
+      className: "drag-handle"
+    })), itemRenderer({
+      record,
+      nestingLevel: targetRecord.nestingLevel
+    }));
+  }, [currTargetRef, records, itemRenderer]);
+  return /*#__PURE__*/_jsx(DragDropContext, {
+    onDragEnd: onDragEnd,
+    onDragStart: onDragStart,
+    onDragUpdate: onDragUpdate
+  }, void 0, /*#__PURE__*/_jsx(Droppable, {
+    droppableId: "droppableId",
+    isCombineEnabled: true,
+    mode: "virtual",
+    renderClone: renderClone
+  }, void 0, (droppableProvided, snapshot) => {
+    // Add an extra item to our list to make space for a dragging item
+    // work in a virtual list
+    const itemCount = snapshot.isUsingPlaceholder ? records.length + 1 : records.length;
+    return /*#__PURE__*/jsx(ListComponent, _objectSpread(_objectSpread({}, rest), {}, {
+      className: cx(rest.className, draggedRecord && 'dragging'),
+      innerRef: mergeRefs(droppableProvided.innerRef, rest.innerRef, rest.ref),
+      itemCount: itemCount,
+      records: records
     }));
-  };
+  }));
 };
 
 export { DroppableList as default };
-//# sourceMappingURL=DroppableList.js.map