@elliemae/ds-treeview 2.2.0 → 2.2.2

package/esm/hoc/WithConditionalDnDContext.js

@@ -0,0 +1,128 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import 'core-js/modules/esnext.async-iterator.find.js';
+import 'core-js/modules/esnext.iterator.find.js';
+import React, { useContext, useMemo, useCallback } from 'react';
+import { DndContext, DragOverlay } from '@dnd-kit/core';
+import { SortableContext } from '@dnd-kit/sortable';
+import { useTreeDndkitConfig } from '@elliemae/ds-drag-and-drop';
+import TreeViewContext from '../TreeViewContext.js';
+import { TreeItem } from '../parts/TreeItem.js';
+import { DnDTreeContext } from './DnDTreeContext.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+const ensure = function (argument) {
+  let message = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'This should never happen';
+
+  if (argument === undefined || argument === null) {
+    throw new TypeError(message);
+  }
+
+  return argument;
+}; // only wraps in "DnDContext" and "DnDTreeContext" if any Drag and Drop functionality is requested
+
+
+const withConditionalDnDRowContext = Component => props => {
+  const [lastActiveId, setLastActiveId] = React.useState('');
+  const {
+    props: {
+      data,
+      onOrderChange,
+      getIsDropValid
+    },
+    flattenedItems,
+    visibleItems: flattenedVisibleTree,
+    withDragAndDrop
+  } = useContext(TreeViewContext);
+  const flattenedVisibleTreeForDnD = useMemo(() => flattenedVisibleTree.map((item, index) => {
+    var _item$treeDepth, _item$children$length, _item$children, _item$node$parent$mod, _item$node$parent, _item$node$parent$mod2, _item$node$parent$mod3;
+
+    return {
+      uid: item.id.toString(),
+      depth: ((_item$treeDepth = item.treeDepth) !== null && _item$treeDepth !== void 0 ? _item$treeDepth : 1) - 1,
+      realIndex: index,
+      childrenCount: (_item$children$length = (_item$children = item.children) === null || _item$children === void 0 ? void 0 : _item$children.length) !== null && _item$children$length !== void 0 ? _item$children$length : 0,
+      parentId: (_item$node$parent$mod = (_item$node$parent = item.node.parent) === null || _item$node$parent === void 0 ? void 0 : (_item$node$parent$mod2 = _item$node$parent.model) === null || _item$node$parent$mod2 === void 0 ? void 0 : (_item$node$parent$mod3 = _item$node$parent$mod2.id) === null || _item$node$parent$mod3 === void 0 ? void 0 : _item$node$parent$mod3.toString()) !== null && _item$node$parent$mod !== void 0 ? _item$node$parent$mod : null,
+      original: item
+    };
+  }), [flattenedVisibleTree]);
+  const onReorder = useCallback((tree, indexes) => {
+    // Pull the row's original data into an object
+    const nodes = {};
+    tree.forEach(item => {
+      const originalItem = item.original;
+      originalItem.children = [];
+      nodes[item.uid] = item.original;
+    });
+    const newUserTree = [];
+    tree.forEach(item => {
+      // If row has parent, insert it to it's subrows
+      // otherwise append it to the new user data
+      if (item.parentId !== null && item.parentId !== undefined && item.parentId !== '__ds_tree_root') {
+        var _parentNode$children;
+
+        const parentNode = nodes[item.parentId];
+        (_parentNode$children = parentNode.children) === null || _parentNode$children === void 0 ? void 0 : _parentNode$children.push(item.original);
+      } else if (item.uid !== '__ds_tree_root') newUserTree.push(item.original);
+    }); // Tell the user that the order has change, he can chose to commit it or not
+
+    onOrderChange(newUserTree, data, flattenedItems[indexes.fromIndex]);
+  }, [onOrderChange, data, flattenedItems]);
+  const {
+    dndContextProps,
+    sortableContextProps,
+    activeId,
+    activeIndex,
+    depth,
+    dropIndicatorPosition,
+    visibleItems,
+    isDropValid
+  } = useTreeDndkitConfig({
+    flattenedItems,
+    visibleItems: flattenedVisibleTreeForDnD,
+    isHorizontalDnD: false,
+    isExpandable: true,
+    onReorder,
+    getIsDropValid,
+    maxDragAndDropLevel: Infinity
+  });
+  if (lastActiveId !== activeId && activeId) setLastActiveId(activeId);
+  if (withDragAndDrop) return /*#__PURE__*/jsxs(DndContext, _objectSpread(_objectSpread({}, dndContextProps), {}, {
+    children: [/*#__PURE__*/jsx(SortableContext, _objectSpread(_objectSpread({}, sortableContextProps), {}, {
+      children: /*#__PURE__*/_jsx(DnDTreeContext.Provider, {
+        value: {
+          activeIndex,
+          depth,
+          visibleItems: visibleItems.map(item => item.original),
+          dropIndicatorPosition,
+          lastActiveId,
+          setLastActiveId,
+          isDropValid
+        }
+      }, void 0, /*#__PURE__*/jsx(Component, _objectSpread({}, props)))
+    })), /*#__PURE__*/_jsx(DragOverlay, {
+      style: {
+        width: 'auto'
+      }
+    }, void 0, activeId ? /*#__PURE__*/_jsx(TreeItem, {
+      itemIndex: activeIndex,
+      item: ensure(flattenedVisibleTree.find(item => item.id.toString() === activeId)),
+      isDragOverlay: true
+    }) : null)]
+  }));
+  return /*#__PURE__*/jsx(Component, _objectSpread({}, props));
+};
+
+export { withConditionalDnDRowContext };

package/esm/hoc/WithDnDSortableItemContext.js

@@ -0,0 +1,61 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import { useContext, useMemo } from 'react';
+import { useSortable } from '@dnd-kit/sortable';
+import { SortableItemContext } from './SortableItemContext.js';
+import TreeViewContext from '../TreeViewContext.js';
+import { DnDTreeContext } from './DnDTreeContext.js';
+import { jsx } from 'react/jsx-runtime';
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+const withDnDSortableItemContext = Component => props => {
+  const {
+    withDragAndDrop
+  } = useContext(TreeViewContext);
+  const {
+    dropIndicatorPosition,
+    lastActiveId,
+    setLastActiveId,
+    isDropValid
+  } = useContext(DnDTreeContext);
+  const id = props.item.id.toString(); // onMount generate unique options, so everyting is only ran once
+
+  const draggableOptions = useMemo(() => ({
+    id
+  }), [id]);
+  const useSortableHelpers = useSortable(draggableOptions); // calculate all the "useSortable" values as per required
+
+  const draggableProps = useMemo(() => {
+    if (!withDragAndDrop) return false;
+    const {
+      index,
+      overIndex
+    } = useSortableHelpers;
+    return _objectSpread(_objectSpread({}, useSortableHelpers), {}, {
+      shouldShowDropIndicatorPosition: overIndex === index,
+      dropIndicatorPosition,
+      lastActiveId,
+      setLastActiveId,
+      isDropValid
+    });
+  }, [withDragAndDrop, useSortableHelpers, dropIndicatorPosition, lastActiveId, setLastActiveId, isDropValid]); // we use a context so we can easly access information wherever without bubbling down
+  // this context is all Memoized so as long as component is not re-mounted,
+  // the context won't trigger un-required renders per-se...
+
+  const ctx = useMemo(() => ({
+    draggableProps
+  }), [draggableProps]); // we always add the context, if draggableProps===false we don't have the DnD enabled.
+
+  return /*#__PURE__*/_jsx(SortableItemContext.Provider, {
+    value: ctx
+  }, void 0, /*#__PURE__*/jsx(Component, _objectSpread({}, props)));
+};
+
+export { withDnDSortableItemContext };

package/esm/index.js

@@ -1,5 +1,5 @@
 export { TreeView, TreeViewWithSchema } from './TreeView.js';
-export { TreeDnD, TreeDndPlugin } from './plugins/dnd/TreeDndPlugin.js';
+export { TreeDndPlugin } from './plugins/dnd/TreeDndPlugin.js';
 export { TreeRovingPlugin } from './plugins/roving/TreeRovingPlugin.js';
 export { SelectablePluginTree } from './plugins/selectable/SelectablePluginTree.js';
 export { TreeToolbarPlugin } from './plugins/toolbar/TreeToolbarPlugin.js';

package/esm/parts/DnDHandle.js

@@ -0,0 +1,38 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import { useContext, createElement } from 'react';
+import { GripperVertical } from '@elliemae/ds-icons';
+import { SortableItemContext } from '../hoc/SortableItemContext.js';
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+const DnDHandle = _ref => {
+  let {
+    id,
+    isDragOverlay
+  } = _ref;
+  const {
+    draggableProps
+  } = useContext(SortableItemContext);
+  const isDragging = draggableProps && draggableProps.isDragging;
+  return /*#__PURE__*/createElement(GripperVertical, _objectSpread(_objectSpread({
+    role: "button"
+  }, draggableProps && _objectSpread(_objectSpread({}, draggableProps.listeners), draggableProps.attributes)), {}, {
+    "data-testid": "drag-handle",
+    "data-isactive": draggableProps && !!draggableProps.active,
+    "data-isdragoverlay": isDragOverlay,
+    id: "".concat(id, "-drag-handle"),
+    key: "".concat(id, "-drag-handle"),
+    className: "drag-handle ".concat(isDragging ? '' : 'focuseable'),
+    color: ['brand-primary', '800'],
+    size: "s",
+    tabIndex: 0
+  }));
+};
+
+export { DnDHandle };

package/esm/parts/DropIndicator.js

@@ -0,0 +1,68 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
+import styled from 'styled-components';
+import { DropIndicatorPosition } from '../hoc/SortableItemContext.js';
+import { jsxs, Fragment } from 'react/jsx-runtime';
+
+const getPositionStyles = _ref => {
+  let {
+    dropIndicatorPosition
+  } = _ref;
+  return "\n      top: ".concat(dropIndicatorPosition === DropIndicatorPosition.Before ? '0' : 'unset', ";\n      bottom: ").concat(dropIndicatorPosition === DropIndicatorPosition.After ? '0' : 'unset', ";\n      left: -2px;\n    ");
+};
+
+const getCircleStyles = _ref2 => {
+  let {
+    dropIndicatorPosition
+  } = _ref2;
+  return {
+    position: 'absolute',
+    zIndex: 20,
+    top: dropIndicatorPosition === DropIndicatorPosition.After ? 'unset' : '-2px',
+    bottom: dropIndicatorPosition === DropIndicatorPosition.Before ? 'unset' : '-2px',
+    left: '0px',
+    opacity: 1
+  };
+};
+
+const StyledIndicator = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-1812zh0-0"
+})(["position:absolute;", " box-sizing:border-box;width:", ";height:", ";background-color:", ";z-index:20;"], getPositionStyles, props => props.vertical ? '2px' : '100%', props => props.vertical ? '100%' : '2px', _ref3 => {
+  let {
+    isDropValid,
+    theme
+  } = _ref3;
+  return isDropValid ? theme.colors.brand[600] : theme.colors.danger[900];
+});
+
+const CircleIndicator = (style, isDropValid) => /*#__PURE__*/_jsx("svg", {
+  height: "6",
+  width: "6",
+  style: style
+}, void 0, /*#__PURE__*/_jsx("circle", {
+  cx: "3",
+  cy: "3",
+  r: "3",
+  strokeWidth: "0",
+  fill: isDropValid ? '#1E79C2' : '#C64252'
+}));
+
+const DropIndicator = _ref4 => {
+  let {
+    dropIndicatorPosition,
+    isLast,
+    isDropValid
+  } = _ref4;
+  if (![DropIndicatorPosition.After, DropIndicatorPosition.Before].includes(dropIndicatorPosition)) return null;
+  const safeDropIndicatorPosition = isLast ? DropIndicatorPosition.Before : dropIndicatorPosition;
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [CircleIndicator(getCircleStyles({
+      dropIndicatorPosition: safeDropIndicatorPosition
+    }), isDropValid), /*#__PURE__*/_jsx(StyledIndicator, {
+      dropIndicatorPosition: safeDropIndicatorPosition,
+      isDropValid: isDropValid
+    })]
+  });
+};
+
+export { DropIndicator as default };

package/esm/parts/TreeItem.js

@@ -1,15 +1,12 @@
-import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
-import _jsx from '@babel/runtime/helpers/esm/jsx';
-import 'core-js/modules/web.dom-collections.iterator.js';
 import 'core-js/modules/esnext.async-iterator.filter.js';
 import 'core-js/modules/esnext.iterator.constructor.js';
 import 'core-js/modules/esnext.iterator.filter.js';
 import 'core-js/modules/esnext.async-iterator.for-each.js';
 import 'core-js/modules/esnext.iterator.for-each.js';
-import { useRef, useState, useContext, useMemo, useCallback } from 'react';
-import { SortableHandle, SortableElement } from '@elliemae/react-sortable-hoc';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import { useContext, useMemo, useCallback } from 'react';
 import { aggregatedClasses } from '@elliemae/ds-classnames';
-import { GripperVertical } from '@elliemae/ds-icons';
 import RadioSelectable from './RadioSelectable.js';
 import CheckboxSelectable from './CheckboxSelectable.js';
 import TreeViewContext from '../TreeViewContext.js';
@@ -20,6 +17,10 @@ import { Icon } from './Icon.js';
 import { ExpandCaret } from './ExpandCaret.js';
 import { TreeItemText } from './TreeItemText.js';
 import { treeItemBlockName, DSTreeViewPrefix } from '../config/cssClassesConstants.js';
+import { DnDHandle } from './DnDHandle.js';
+import { withDnDSortableItemContext } from '../hoc/WithDnDSortableItemContext.js';
+import { SortableItemContext, DropIndicatorPosition } from '../hoc/SortableItemContext.js';
+import DropIndicator from './DropIndicator.js';
 import { jsxs } from 'react/jsx-runtime';
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -32,23 +33,6 @@ const TreeListItem = aggregatedClasses('li', {
 })(treeItemBlockName);
 const TreeListItemAddonsWrapper = aggregatedClasses('div')(treeItemBlockName, 'addons' // temp fix untill we move to styled components
 );
-const DnDHandle = SortableHandle(_ref => {
-  let {
-    id
-  } = _ref;
-  return /*#__PURE__*/_jsx(GripperVertical, {
-    "data-testid": "drag-handle",
-    className: "drag-handle",
-    size: "s",
-    onMouseDown: e => {
-      // prevent focusing the drag-handle to avoid borders
-      if (e) {
-        e.preventDefault();
-      }
-    },
-    tabIndex: "0"
-  }, "".concat(id, "-drag-handle"));
-});
 const TreeItem = props => {
   const {
     item,
@@ -56,7 +40,7 @@ const TreeItem = props => {
     itemWrapperStyle = {},
     virtualItemRef,
     spaceForNestingLevel = 1.5,
-    onMouseDragOverItem
+    isDragOverlay = false
   } = props;
   const {
     id,
@@ -65,9 +49,10 @@ const TreeItem = props => {
   const {
     nodeItemRef
   } = node.model;
-  const openFolderOnHoverTimeout = useRef(null);
-  const [isDraggingOverThis, setIsDraggingOverThis] = useState(false);
-  const onItemKeyDown = useOnItemKeyDown(item);
+  const {
+    draggableProps
+  } = useContext(SortableItemContext);
+  const onItemKeyDown = useOnItemKeyDown(item, draggableProps);
   const ctx = useContext(TreeViewContext);
   const {
     props: {
@@ -78,14 +63,12 @@ const TreeItem = props => {
       rowSize,
       labelOverflow
     },
-    relativeMouseCord,
     withRadioChecks,
     withCheckboxChecks,
     withDragAndDrop,
     selectedItem,
     selectedCheckboxes,
     hoverItem,
-    isDragging,
     virtualListHelpers: {
       scrollToIndex
     },
@@ -95,24 +78,27 @@ const TreeItem = props => {
   } = ctx; // Sortable Items needs to update
   //   - the virtual list ref (for react-virtual requirement)
   //   - nodeItemRef which is a prop avaiable in the TreeModel nodes
+  //   - the drag and drop node reference
 
   const setItemRefs = ref => {
-    setMultipleRefs(virtualItemRef, nodeItemRef)(ref);
+    setMultipleRefs(virtualItemRef, !isDragOverlay && nodeItemRef, !isDragOverlay && draggableProps && draggableProps.setNodeRef)(ref);
   };
 
+  const dropIndicatorPosition = draggableProps && draggableProps.shouldShowDropIndicatorPosition && draggableProps.dropIndicatorPosition;
+  const isDropIndicatorPositionInside = dropIndicatorPosition === DropIndicatorPosition.Inside;
+  const isDragging = draggableProps && draggableProps.isDragging;
+  const isDropValid = draggableProps && draggableProps.isDropValid;
   const dropPreviewClassName = useMemo(() => {
-    if (!withDragAndDrop || !relativeMouseCord || !isDraggingOverThis) return '';
-    const {
-      isBefore,
-      isAfter,
-      isValid
-    } = relativeMouseCord;
-    let className = "".concat(DSTreeViewPrefix, "-").concat(treeItemBlockName).concat(isValid ? '--valid' : '--invalid');
-    if (isBefore) className += '-drop-before';else if (isAfter) className += '-drop-after';else className += '-drop-in';
-    return className;
-  }, [withDragAndDrop, relativeMouseCord, isDraggingOverThis]);
-  const selectedClassName = useMemo(() => (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.id) === item.id ? 'selected' : '', [item.id, selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.id]);
-  const hoverClassName = useMemo(() => (hoverItem === null || hoverItem === void 0 ? void 0 : hoverItem.id) !== item.id || withDragAndDrop && isDragging ? '' : 'hover', [hoverItem === null || hoverItem === void 0 ? void 0 : hoverItem.id, item.id, withDragAndDrop, isDragging]);
+    if (isDropIndicatorPositionInside) {
+      const className = "".concat(DSTreeViewPrefix, "-").concat(treeItemBlockName).concat(isDropValid ? '--valid' : '--invalid', "-drop-in");
+      return className;
+    }
+
+    return '';
+  }, [isDropIndicatorPositionInside, isDropValid]);
+  const dragOverlayClassName = useMemo(() => isDragOverlay ? 'drag-overlay' : '', [isDragOverlay]);
+  const selectedClassName = useMemo(() => (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.id) === item.id && !isDragOverlay ? 'selected' : '', [isDragOverlay, item.id, selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.id]);
+  const hoverClassName = useMemo(() => !isDragOverlay && ((hoverItem === null || hoverItem === void 0 ? void 0 : hoverItem.id) === item.id || isDragging) ? 'hover' : '', [isDragOverlay, hoverItem === null || hoverItem === void 0 ? void 0 : hoverItem.id, item.id, isDragging]);
   const fixedHeightClassname = useMemo(() => {
     if (labelOverflow === 'truncate') {
       if (rowSize === 'compact') return "".concat(DSTreeViewPrefix, "-").concat(treeItemBlockName, "--fixed-height-compact");
@@ -121,7 +107,7 @@ const TreeItem = props => {
 
     return '';
   }, [labelOverflow, rowSize]);
-  const finalClassName = useMemo(() => "".concat(dropPreviewClassName, " ").concat(fixedHeightClassname, " ").concat(selectedClassName, " ").concat(hoverClassName), [dropPreviewClassName, selectedClassName, hoverClassName, fixedHeightClassname]);
+  const finalClassName = useMemo(() => "".concat(dropPreviewClassName, " ").concat(fixedHeightClassname, " ").concat(selectedClassName, " ").concat(hoverClassName, " ").concat(dragOverlayClassName), [dropPreviewClassName, selectedClassName, hoverClassName, fixedHeightClassname, dragOverlayClassName]);
   const handleItemClick = useCallback(e => {
     onItemClick(item, e);
     setFocusedItem(item);
@@ -140,23 +126,7 @@ const TreeItem = props => {
   }, [item, scrollToIndex, onItemClick, onItemFocus, setSelectedItem, setFocusedItem]);
   return /*#__PURE__*/jsxs(TreeListItem, {
     tabIndex: 0,
-    onMouseMove: event => {
-      if (withDragAndDrop && onMouseDragOverItem) {
-        onMouseDragOverItem({
-          event,
-          item,
-          itemIndex,
-          setIsDraggingOverThis,
-          openFolderOnHoverTimeout
-        });
-      }
-    },
     onMouseLeave: () => {
-      if (withDragAndDrop) {
-        setIsDraggingOverThis(false);
-        if (openFolderOnHoverTimeout !== null && openFolderOnHoverTimeout !== void 0 && openFolderOnHoverTimeout.current) clearTimeout(openFolderOnHoverTimeout.current);
-      }
-
       if ((hoverItem === null || hoverItem === void 0 ? void 0 : hoverItem.id) === item.id) {
         setHoverItem(null);
       }
@@ -165,6 +135,7 @@ const TreeItem = props => {
       setHoverItem(item);
     },
     onClick: handleItemClick,
+    onBlur: () => setFocusedItem(null),
     ref: setItemRefs,
     style: _objectSpread({}, itemWrapperStyle),
     className: finalClassName,
@@ -174,25 +145,29 @@ const TreeItem = props => {
     "data-index": item.virtualIndex,
     onKeyDown: onItemKeyDown,
     children: [/*#__PURE__*/_jsx(TreeListItemAddonsWrapper, {}, void 0, withDragAndDrop ? /*#__PURE__*/_jsx(DnDHandle, {
-      id: id
-    }) : null, withRadioChecks ? /*#__PURE__*/_jsx(RadioSelectable, {
+      id: id,
+      isDragOverlay: isDragOverlay
+    }) : null, withRadioChecks && !isDragOverlay ? /*#__PURE__*/_jsx(RadioSelectable, {
       item: item,
       itemIndex: itemIndex
-    }) : null, withCheckboxChecks ? /*#__PURE__*/_jsx(CheckboxSelectable, {
+    }) : null, withCheckboxChecks && !isDragOverlay ? /*#__PURE__*/_jsx(CheckboxSelectable, {
       item: item,
       itemIndex: itemIndex
-    }) : null, /*#__PURE__*/_jsx(NestingSpace, {
+    }) : null, !isDragOverlay && /*#__PURE__*/_jsx(NestingSpace, {
       item: item,
       spaceForNestingLevel: spaceForNestingLevel
-    }), /*#__PURE__*/_jsx(ExpandCaret, {
+    }), !isDragOverlay && /*#__PURE__*/_jsx(ExpandCaret, {
       item: item
     }), !disableIcons ? /*#__PURE__*/_jsx(Icon, {
       item: item
     }) : null), /*#__PURE__*/_jsx(TreeItemText, {
       item: item
-    }), rightAddons && /*#__PURE__*/_jsx(TreeListItemAddonsWrapper, {}, void 0, typeof rightAddons === 'function' ? rightAddons(item) : rightAddons)]
+    }), rightAddons && /*#__PURE__*/_jsx(TreeListItemAddonsWrapper, {}, void 0, typeof rightAddons === 'function' ? rightAddons(item) : rightAddons), /*#__PURE__*/_jsx(DropIndicator, {
+      dropIndicatorPosition: dropIndicatorPosition,
+      isDropValid: isDropValid
+    })]
   });
 };
-const DragAndDropTreeItem = SortableElement(TreeItem);
+var TreeItem$1 = withDnDSortableItemContext(TreeItem);
 
-export { DragAndDropTreeItem, TreeItem, TreeListItem, TreeListItemAddonsWrapper };
+export { TreeItem, TreeListItem, TreeListItemAddonsWrapper, TreeItem$1 as default };

package/esm/parts/TreeList.js

@@ -8,12 +8,13 @@ import 'core-js/modules/esnext.iterator.filter.js';
 import 'core-js/modules/esnext.async-iterator.for-each.js';
 import 'core-js/modules/esnext.iterator.for-each.js';
 import { useContext } from 'react';
-import { SortableContainer } from '@elliemae/react-sortable-hoc';
 import { aggregatedClasses } from '@elliemae/ds-classnames';
 import { DSCircularProgressIndicator } from '@elliemae/ds-circular-progress-indicator';
 import TreeViewContext from '../TreeViewContext.js';
 import { treeListBlockName, DSTreeViewPrefix } from '../config/cssClassesConstants.js';
-import { DragAndDropTreeItem, TreeItem } from './TreeItem.js';
+import TreeItem from './TreeItem.js';
+import { withConditionalDnDRowContext } from '../hoc/WithConditionalDnDContext.js';
+import { DnDTreeContext } from '../hoc/DnDTreeContext.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -38,16 +39,13 @@ const TreeListWrapper = aggregatedClasses('ul', {
 });
 const compactRowClass = "".concat(DSTreeViewPrefix, "-tv-row-size-compact");
 const normaRowClass = "".concat(DSTreeViewPrefix, "-tv-row-size-normal");
-const TreeList = props => {
-  const {
-    onMouseDragOverItem
-  } = props;
+
+const TreeListComp = () => {
   const ctx = useContext(TreeViewContext);
   const {
     virtualListRef,
     virtualListHelpers,
-    visibleItems,
-    withDragAndDrop,
+    visibleItems: flattenedVisibleItems,
     props: {
       width,
       height,
@@ -61,6 +59,9 @@ const TreeList = props => {
     virtualItems
   } = virtualListHelpers;
   const className = "".concat(rowSize === 'compact' ? "".concat(compactRowClass) : "".concat(normaRowClass));
+  const {
+    visibleItems
+  } = useContext(DnDTreeContext);
   return /*#__PURE__*/jsxs(TreeListWrapper, {
     ref: virtualListRef,
     className: className,
@@ -95,17 +96,17 @@ const TreeList = props => {
         measureRef,
         start
       } = virtualItem;
-      const item = visibleItems[index];
+      const item = (visibleItems || flattenedVisibleItems)[index];
+      if (!item) return null;
       item.virtualIndex = index;
       const {
         id
       } = item;
       const style = {
         position: 'absolute',
-        top: 0,
+        top: "".concat(start, "px"),
         left: 0,
-        width: '100%',
-        transform: "translateY(".concat(start, "px)")
+        width: '100%'
       };
       const listItemProps = {
         key: "DS-TreeView-List-Item-".concat(id),
@@ -116,13 +117,11 @@ const TreeList = props => {
         item,
         itemWrapperStyle: style
       };
-      if (withDragAndDrop) return /*#__PURE__*/jsx(DragAndDropTreeItem, _objectSpread(_objectSpread({}, listItemProps), {}, {
-        onMouseDragOverItem: onMouseDragOverItem
-      }));
       return /*#__PURE__*/jsx(TreeItem, _objectSpread({}, listItemProps));
     })) : null]
   });
 };
-const DragAndDropTreeList = SortableContainer(TreeList);
 
-export { DragAndDropTreeList, TreeList, TreeListNoItems, TreeListWrapper, treeListNoItemsBn };
+const TreeList = withConditionalDnDRowContext(TreeListComp);
+
+export { TreeList, TreeListNoItems, TreeListWrapper, treeListNoItemsBn };

package/esm/plugins/dnd/TreeDndPlugin.js

@@ -1,35 +1,3 @@
-import _jsx from '@babel/runtime/helpers/esm/jsx';
-import { useContext } from 'react';
-import { DragAndDropTreeList } from '../../parts/TreeList.js';
-import { useDnDHelpers } from '../../utils/useDnDHelpers.js';
-import { keyCodes } from '../../utils/dnd-helpers.js';
-import TreeViewContext from '../../TreeViewContext.js';
-
-const TreeDnD = () => {
-  const {
-    updateBeforeSortStart,
-    onSortStart,
-    onMouseDragOverItem,
-    onSortEnd
-  } = useDnDHelpers();
-  const ctx = useContext(TreeViewContext);
-  const {
-    virtualListRef
-  } = ctx;
-  return /*#__PURE__*/_jsx(DragAndDropTreeList, {
-    useDragHandle: true,
-    transitionDuration: 0,
-    keyboardSortingTransitionDuration: 0,
-    hideSortableGhost: false,
-    disableAnimation: true,
-    updateBeforeSortStart: updateBeforeSortStart,
-    onSortStart: onSortStart,
-    onMouseDragOverItem: onMouseDragOverItem,
-    onSortEnd: onSortEnd,
-    getContainer: () => virtualListRef === null || virtualListRef === void 0 ? void 0 : virtualListRef.current,
-    keyCodes: keyCodes
-  });
-};
 const TreeDndPlugin = 'tree-dnd';
 
-export { TreeDnD, TreeDndPlugin };
+export { TreeDndPlugin };

package/esm/plugins/dnd/index.js

@@ -1 +1 @@
-export { TreeDnD, TreeDndPlugin } from './TreeDndPlugin.js';
+export { TreeDndPlugin } from './TreeDndPlugin.js';

package/esm/plugins/index.js

@@ -1,4 +1,4 @@
-export { TreeDnD, TreeDndPlugin } from './dnd/TreeDndPlugin.js';
+export { TreeDndPlugin } from './dnd/TreeDndPlugin.js';
 export { TreeRovingPlugin } from './roving/TreeRovingPlugin.js';
 export { SelectablePluginTree } from './selectable/SelectablePluginTree.js';
 export { TreeToolbarPlugin } from './toolbar/TreeToolbarPlugin.js';

package/esm/react-desc-prop-types.js

@@ -26,6 +26,7 @@ const TreeViewPropTypes = {
   isMultiSelect: PropTypes.bool.description('whether the tree view is multi select or not').defaultValue(false),
   isSingleSelect: PropTypes.bool.description('wheter the tree view is single select or not').defaultValue(false),
   isLoading: PropTypes.bool.description('wheter the tree should show the loading state or not').defaultValue(false),
+  getIsDropValid: PropTypes.func.description("Function that returns true if the drop is valid and false if it's not").defaultValue('() => true'),
   restrictDragAndDrop: PropTypes.bool.description('whether to restrict DnD functionality or not').defaultValue(false),
   showChildrenAmount: PropTypes.bool.description('whether to show the amount of children or not').defaultValue(false),
   sortable: PropTypes.bool.description('whether the sortable functionality is active or not').defaultValue(false),