@elliemae/ds-treeview 2.2.0-alpha.2 → 2.2.0-next.1

package/esm/utils/tree-helpers.js

@@ -1,135 +1,205 @@
-import * as React from "react";
-import { createRef } from "react";
-import { standardizeSearchQueryString } from "./string-helpers";
-const walkVisibles = (node, callback, skipRoot = true, highlightOnlyQuery = false) => {
-  const { children, model } = node;
-  const { name, isExpanded, childrenMatchesSearchQuery, matchesSearchQuery } = model;
-  const shouldSkipBecauseIsRoot = skipRoot && name === "__root";
+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/web.dom-collections.iterator.js';
+import 'core-js/modules/esnext.async-iterator.find.js';
+import 'core-js/modules/esnext.iterator.find.js';
+import 'core-js/modules/esnext.async-iterator.every.js';
+import 'core-js/modules/esnext.iterator.every.js';
+import { createRef } from 'react';
+import { standardizeSearchQueryString } from './string-helpers.js';
+
+const walkVisibles = function (node, callback) {
+  let skipRoot = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+  let highlightOnlyQuery = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+  const {
+    children,
+    model
+  } = node;
+  const {
+    name,
+    isExpanded,
+    childrenMatchesSearchQuery,
+    matchesSearchQuery
+  } = model;
+  const shouldSkipBecauseIsRoot = skipRoot && name === '__root';
   const queryRestrictionsPassed = !!(highlightOnlyQuery || childrenMatchesSearchQuery || matchesSearchQuery);
-  if (!shouldSkipBecauseIsRoot && queryRestrictionsPassed)
-    callback(node);
+  if (!shouldSkipBecauseIsRoot && queryRestrictionsPassed) callback(node);
   const shouldWalkChildren = !!(children.length > 0 && isExpanded && queryRestrictionsPassed);
+
   if (shouldWalkChildren) {
-    children.forEach((childNode) => {
+    children.forEach(childNode => {
       walkVisibles(childNode, callback, skipRoot, highlightOnlyQuery);
     });
   }
 };
-const walkParents = (nodePath, callback, skipRoot = true) => {
+const walkParents = function (nodePath, callback) {
+  let skipRoot = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
   const parents = [...nodePath].reverse();
-  parents.shift();
-  if (skipRoot)
-    parents.pop();
+  parents.shift(); // remove current node from the parents array
+
+  if (skipRoot) parents.pop(); // remove the root from the parents if skipping root
+
   parents.forEach(callback);
 };
-const walkAllNodeChildren = (node, callback, isFirst = true) => {
-  const { children = [] } = node;
+const walkAllNodeChildren = function (node, callback) {
+  let isFirst = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+  const {
+    children = []
+  } = node;
   const shouldWalkChildren = children.length;
-  if (!isFirst)
-    callback(node);
+  if (!isFirst) callback(node);
+
   if (shouldWalkChildren) {
-    children.forEach((childNode) => {
+    children.forEach(childNode => {
       walkAllNodeChildren(childNode, callback, false);
     });
   }
 };
 const getNodeById = (treeRoot, id) => {
-  const nodes = treeRoot.all((node) => node.model.id === id);
+  const nodes = treeRoot.all(node => node.model.id === id);
   return nodes[0];
 };
 const cloneNode = (tree, node) => tree.parse(node.model);
-const itemsShareSameParent = (items = []) => {
-  if (items.length === 0)
-    throw new Error("Received empty items for comparison");
-  if (items.length === 1)
-    return true;
-  const firstExistingItem = items.find((item) => !!item);
-  if (!firstExistingItem)
-    throw new Error("Received no items, can't retrieve parent");
-  const firstExistingItemPath = firstExistingItem.node.getPath();
+const itemsShareSameParent = function () {
+  let items = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  if (items.length === 0) throw new Error('Received empty items for comparison');
+  if (items.length === 1) return true; // when moving in first position we receive [undefined,...{items}]
+  // when moving in last position we receive [...{items}, undefined]
+
+  const firstExistingItem = items.find(item => !!item);
+  if (!firstExistingItem) throw new Error("Received no items, can't retrieve parent");
+  const firstExistingItemPath = firstExistingItem.node.getPath(); // path is like [rootParent, ...[parentsNodes], currentNode]
+  // length -1 is the current-node
+  // length -2 is the parent-node
+  // root node is not printed and is always present so minimum path length is 2 (root + currentNode)
+
   const directParentNode = firstExistingItemPath[firstExistingItemPath.length - 2];
-  return items.every((item) => {
-    if (!item)
-      return true;
+  return items.every(item => {
+    // undefined nodes count as having the same parent
+    if (!item) return true;
     const itemPath = item.node.getPath();
     const itemDirectParent = itemPath[itemPath.length - 2];
     return directParentNode === itemDirectParent;
   });
 };
-const getItemsParentNode = (items = [], skipSameParentCheck = false) => {
-  if (items.length === 0)
-    throw new Error("Received empty items, can't retrieve parent");
-  if (!skipSameParentCheck) {
-    if (!itemsShareSameParent(items))
-      throw new Error("Received items don't share the same parent, can't retrieve parent");
-  }
-  const firstExistingItem = items.find((item) => !!item);
-  if (!firstExistingItem)
-    throw new Error("Received no items, can't retrieve parent");
-  const firstExistingItemPath = firstExistingItem.node.getPath();
+const getItemsParentNode = function () {
+  let items = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  let skipSameParentCheck = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  if (items.length === 0) throw new Error("Received empty items, can't retrieve parent"); // in case we already know the items compared shares the same parent
+
+  if (!skipSameParentCheck) if (!itemsShareSameParent(items)) // if we don't know (default, we don't) check if they share the parent
+    throw new Error("Received items don't share the same parent, can't retrieve parent"); // when moving in first position we receive [undefined,...{items}]
+  // when moving in last position we receive [...{items}, undefined]
+
+  const firstExistingItem = items.find(item => !!item);
+  if (!firstExistingItem) throw new Error("Received no items, can't retrieve parent");
+  const firstExistingItemPath = firstExistingItem.node.getPath(); // path is like [rootParent, ...[parentsNodes], currentNode]
+  // length -1 is the current-node
+  // length -2 is the parent-node
+  // root node is not printed and is always present so minimum path length is 2 (root + currentNode)
+
   const directParentNode = firstExistingItemPath[firstExistingItemPath.length - 2];
   return directParentNode;
 };
-const getNodeMatchesSearchQuery = (node, searchQuery = "") => {
+const getNodeMatchesSearchQuery = function (node) {
+  let searchQuery = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
   const standardizedName = standardizeSearchQueryString(node.model.name);
   const standardizedSearchQuery = standardizeSearchQueryString(searchQuery);
   return standardizedName.includes(standardizedSearchQuery);
 };
-const getChildrenMatchesSearchQuery = (parentNode, searchQuery = "") => {
+const getChildrenMatchesSearchQuery = function (parentNode) {
+  let searchQuery = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
   let anyChildMatch = false;
-  walkAllNodeChildren(parentNode, (node) => {
-    if (getNodeMatchesSearchQuery(node, searchQuery))
-      anyChildMatch = true;
+  walkAllNodeChildren(parentNode, node => {
+    if (getNodeMatchesSearchQuery(node, searchQuery)) anyChildMatch = true;
   });
   return anyChildMatch;
 };
-const enrichNodeModelInPlace = (node, searchQuery = "", selection = null, expanded = null) => {
+/**
+ * Mutate in place a node from tree-model normalizing object properties like "isGroup" even if user didn't specify it explicitly,
+ * after execution the node will have "nodePath" "treeDepth" "nodeItemRef" "isGroup" "isExpanded"
+ * (optionally, based on the provided arguments) "matchesSearchQuery" "childrenMatchesSearchQuery" "isChecked"
+ *
+ * @param {Object} node - node (based on 'tree-model' lib) that you wish to mutate with extra props
+ * @param {string} [searchQuery=''] - optional string used to parse "matchesSearchQuery"/"childrenMatchesSearchQuery" properties
+ * @param {Object} [selection=null] - optional selection hashmap used to parse "isChecked" properties
+ * @param {Object} [expanded=null] - optional expanded hashmap used to parse "isExpanded" properties
+ */
+
+const enrichNodeModelInPlace = function (node) {
+  var _node$model$children$, _node$model, _node$model$children;
+
+  let searchQuery = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+  let selection = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+  let expanded = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
   const path = node.getPath();
   const depth = path.length - 1;
   node.model.nodePath = path;
   node.model.treeDepth = depth;
+
   if (!node.model.nodeItemRef) {
-    node.model.nodeItemRef = createRef();
-  }
-  if (typeof node.model.isGroup !== "boolean" && node.model?.children?.length > 0) {
+    node.model.nodeItemRef = /*#__PURE__*/createRef();
+  } // if a node has children but was not marked as isGroup, force-mark as group
+  // this is useful to avoid having to always check both the flag and the children.length...
+
+
+  if (typeof node.model.isGroup !== 'boolean' && ((_node$model$children$ = (_node$model = node.model) === null || _node$model === void 0 ? void 0 : (_node$model$children = _node$model.children) === null || _node$model$children === void 0 ? void 0 : _node$model$children.length) !== null && _node$model$children$ !== void 0 ? _node$model$children$ : 0) > 0) {
     node.model.isGroup = true;
   }
-  if (node.model.isGroup && node.model.id !== "__ds_tree_root") {
-    if (expanded)
-      node.model.isExpanded = !!expanded[node.model.id];
-    else if (typeof node.model.isExpanded !== "boolean") {
+
+  if (node.model.isGroup && node.model.id !== '__ds_tree_root') {
+    if (expanded) node.model.isExpanded = !!expanded[node.model.id];else if (typeof node.model.isExpanded !== 'boolean') {
       node.model.isExpanded = false;
     }
   }
+
   node.model.matchesSearchQuery = true;
   node.model.childrenMatchesSearchQuery = false;
   const partiallyEnrichedNode = node;
+
   if (searchQuery) {
     partiallyEnrichedNode.model.matchesSearchQuery = getNodeMatchesSearchQuery(partiallyEnrichedNode, searchQuery);
+
     if (partiallyEnrichedNode.model.isGroup === true) {
       partiallyEnrichedNode.model.childrenMatchesSearchQuery = getChildrenMatchesSearchQuery(partiallyEnrichedNode, searchQuery);
-      if (partiallyEnrichedNode.model.childrenMatchesSearchQuery)
-        partiallyEnrichedNode.model.isExpanded = true;
+      if (partiallyEnrichedNode.model.childrenMatchesSearchQuery) partiallyEnrichedNode.model.isExpanded = true;
     }
   }
+
   if (selection && selection[partiallyEnrichedNode.model.id]) {
     partiallyEnrichedNode.model.isChecked = selection[partiallyEnrichedNode.model.id];
   }
 };
-const focusItem = (item) => {
-  item?.nodeItemRef?.current?.focus();
+const focusItem = item => {
+  var _item$nodeItemRef, _item$nodeItemRef$cur;
+
+  item === null || item === void 0 ? void 0 : (_item$nodeItemRef = item.nodeItemRef) === null || _item$nodeItemRef === void 0 ? void 0 : (_item$nodeItemRef$cur = _item$nodeItemRef.current) === null || _item$nodeItemRef$cur === void 0 ? void 0 : _item$nodeItemRef$cur.focus();
 };
-export {
-  cloneNode,
-  enrichNodeModelInPlace,
-  focusItem,
-  getChildrenMatchesSearchQuery,
-  getItemsParentNode,
-  getNodeById,
-  getNodeMatchesSearchQuery,
-  itemsShareSameParent,
-  walkAllNodeChildren,
-  walkParents,
-  walkVisibles
+const flattenTreeForDnD = function (data) {
+  let shouldDescend = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : () => true;
+  const flattenedTree = [];
+  let index = 0;
+
+  const doit = function (node) {
+    var _node$children$length, _node$children, _node$children2;
+
+    let depth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+    let parentId = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+    flattenedTree.push({
+      uid: node.id.toString(),
+      depth,
+      realIndex: index,
+      childrenCount: (_node$children$length = (_node$children = node.children) === null || _node$children === void 0 ? void 0 : _node$children.length) !== null && _node$children$length !== void 0 ? _node$children$length : 0,
+      parentId: parentId !== null ? parentId.toString() : null,
+      original: node
+    });
+    index += 1;
+    if (shouldDescend(node)) (_node$children2 = node.children) === null || _node$children2 === void 0 ? void 0 : _node$children2.forEach(child => doit(child, depth + 1, node.id.toString()));
+  };
+
+  data.forEach(datum => doit(datum));
+  return flattenedTree;
 };
-//# sourceMappingURL=tree-helpers.js.map
+
+export { cloneNode, enrichNodeModelInPlace, flattenTreeForDnD, focusItem, getChildrenMatchesSearchQuery, getItemsParentNode, getNodeById, getNodeMatchesSearchQuery, itemsShareSameParent, walkAllNodeChildren, walkParents, walkVisibles };

package/esm/utils/useInstanceRefActions.js

@@ -1,10 +1,16 @@
-import * as React from "react";
-import { useEffect, useMemo, useState, useRef, useCallback } from "react";
-import { focusItem } from "./tree-helpers";
-import { toggleExpandAllHelper } from "./group-expands-helpers";
-const useInstanceRefActions = ({ actions }, ctx) => {
+import 'core-js/modules/web.dom-collections.iterator.js';
+import { useRef, useMemo, useState, useEffect, useCallback } from 'react';
+import { focusItem } from './tree-helpers.js';
+import { toggleExpandAllHelper } from './group-expands-helpers.js';
+
+const useInstanceRefActions = (_ref, ctx) => {
+  let {
+    actions
+  } = _ref;
   const {
-    props: { onItemFocus },
+    props: {
+      onItemFocus
+    },
     virtualListHelpers,
     treeRoot,
     visibleItems,
@@ -14,8 +20,12 @@ const useInstanceRefActions = ({ actions }, ctx) => {
     setFocusedItem,
     setLatestToggledItem
   } = ctx;
-  const { current: promises } = useRef({});
-  const { scrollToIndex } = useMemo(() => virtualListHelpers, [virtualListHelpers]);
+  const {
+    current: promises
+  } = useRef({});
+  const {
+    scrollToIndex
+  } = useMemo(() => virtualListHelpers, [virtualListHelpers]);
   const [expandPromise, setPromise] = useState();
   useEffect(() => {
     if (expandPromise && promises.expandResolve) {
@@ -24,30 +34,36 @@ const useInstanceRefActions = ({ actions }, ctx) => {
       setPromise(null);
     }
   }, [visibleItems, expandPromise, promises]);
-  actions.toggleExpandAll = useCallback((isExpand) => {
-    const p = new Promise((resolve) => {
+  actions.toggleExpandAll = useCallback(isExpand => {
+    const p = new Promise(resolve => {
       promises.expandResolve = resolve;
-      if (treeRoot)
-        toggleExpandAllHelper(isExpand, treeRoot, triggerTreeRerender, setLatestToggledItem, updateUserExpandedState);
+      if (treeRoot) toggleExpandAllHelper(isExpand, treeRoot, triggerTreeRerender, setLatestToggledItem, updateUserExpandedState);
     });
     setPromise(p);
     return p;
   }, [promises, treeRoot, triggerTreeRerender, setLatestToggledItem, updateUserExpandedState]);
-  actions.scrollTo = useCallback((indx, opts = { align: "start" }) => {
-    if (scrollToIndex)
-      scrollToIndex(indx, opts);
+  actions.scrollTo = useCallback(function (indx) {
+    let opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
+      align: 'start'
+    };
+    if (scrollToIndex) scrollToIndex(indx, opts);
   }, [scrollToIndex]);
-  actions.setSelectedItemByVirtualIndex = useCallback((index) => {
+  actions.setSelectedItemByVirtualIndex = useCallback(index => {
     const itemByIndex = visibleItems[index];
     setSelectedItem(itemByIndex);
   }, [visibleItems, setSelectedItem]);
-  actions.setFocusedItemByVirtualIndex = useCallback((index, opts = { align: "start", withScroll: false }) => {
+  actions.setFocusedItemByVirtualIndex = useCallback(function (index) {
+    let opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
+      align: 'start',
+      withScroll: false
+    };
     const itemByIndex = visibleItems[index];
     const onItemFocusParams = {
       itemIndex: itemByIndex.virtualIndex,
       scrollToItem: () => scrollToIndex(index, opts),
       item: itemByIndex
     };
+
     if (opts.withScroll && scrollToIndex) {
       scrollToIndex(index, opts);
       setTimeout(() => {
@@ -63,7 +79,5 @@ const useInstanceRefActions = ({ actions }, ctx) => {
   }, [visibleItems, scrollToIndex, setFocusedItem, onItemFocus]);
   return actions;
 };
-export {
-  useInstanceRefActions
-};
-//# sourceMappingURL=useInstanceRefActions.js.map
+
+export { useInstanceRefActions };

package/esm/utils/useTree.js

@@ -1,67 +1,93 @@
-import * as React from "react";
-import { useState, useCallback, useMemo, useEffect } from "react";
-import TreeModel from "tree-model";
-import { cloneDeep } from "lodash";
-import { walkVisibles, enrichNodeModelInPlace } from "./tree-helpers";
-import { updateExpandedState } from "./group-expands-helpers";
+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 'core-js/modules/web.dom-collections.iterator.js';
+import { useMemo, useState, useEffect, useCallback } from 'react';
+import TreeModel from 'tree-model';
+import { cloneDeep } from 'lodash';
+import { enrichNodeModelInPlace, walkVisibles, flattenTreeForDnD } from './tree-helpers.js';
+import { updateExpandedState } from './group-expands-helpers.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 useTree = (data, props, states) => {
-  const { setExpandedGroups } = states;
-  const unfrozenData = useMemo(() => cloneDeep(data), [data]);
+  const {
+    setExpandedGroups
+  } = states;
+  const unfrozenData = useMemo(() => cloneDeep(data), [data]); // convert data into a TreeModel with extra isExpanded prop
+  // root element type is an exception, children model is based on what the dev passed on
+  // since root is an excepcion we must typecast
+
   const tree = useMemo(() => new TreeModel(), []);
   const [treeData, setTreeData] = useState({
-    id: "__ds_tree_root",
-    name: "__root",
+    id: '__ds_tree_root',
+    name: '__root',
     isExpanded: true,
     children: unfrozenData
   });
   useEffect(() => {
     setTreeData({
-      id: "__ds_tree_root",
-      name: "__root",
+      id: '__ds_tree_root',
+      name: '__root',
       isExpanded: true,
       children: unfrozenData
     });
-  }, [unfrozenData]);
+  }, [unfrozenData]); // expose a way to rerender the tree
+  //   used for expand functionality
+
   const [rerenderItems, setRerenderItems] = useState({});
   const triggerTreeRerender = useCallback(() => {
     setRerenderItems({});
-  }, []);
+  }, []); // when re-rendering we re-parse the list
+
   const [treeRoot, setTreeRoot] = useState(tree.parse(treeData));
   useEffect(() => {
     setTreeRoot(tree.parse(treeData));
   }, [treeData, rerenderItems, tree]);
   const [visibleItems, setVisibleItems] = useState([]);
-  const { searchQuery, highlightOnlyQuery, onVisibleItemsChange, selection, expanded, onExpandChange } = props;
+  const {
+    searchQuery,
+    highlightOnlyQuery,
+    onVisibleItemsChange,
+    selection,
+    expanded,
+    onExpandChange
+  } = props;
   const updateUserExpandedState = useCallback(() => {
     updateExpandedState(treeRoot, onExpandChange);
-  }, [treeRoot, onExpandChange]);
+  }, [treeRoot, onExpandChange]); // we add missing properties to the received Items
+  //   not the best of the patterns, but it works
+  //   this is where we convert "SimpleItems" to "Items"
+  //   this was done to avoid breaking changes back in v1
+
   useEffect(() => {
     const parsedVisibleItems = [];
     const newExpandedHashMap = {};
-    treeRoot.walk((node) => {
-      const shouldContinueWalking = true;
+    const shouldContinueWalking = true; // tree-model ask we return true if we want to continue walking
+
+    treeRoot.walk(node => {
       enrichNodeModelInPlace(node, searchQuery, selection, expanded);
-      if (node.model.id && node.model.isGroup && node.model.isExpanded)
-        newExpandedHashMap[node.model.id] = true;
+      if (node.model.id && node.model.isGroup && node.model.isExpanded) newExpandedHashMap[node.model.id] = true;
       return shouldContinueWalking;
     });
-    walkVisibles(treeRoot, (node) => {
-      parsedVisibleItems.push({ ...node.model, node });
+    walkVisibles(treeRoot, node => {
+      parsedVisibleItems.push(_objectSpread(_objectSpread({}, node.model), {}, {
+        node
+      }));
     }, true, highlightOnlyQuery);
     setVisibleItems(parsedVisibleItems);
     onVisibleItemsChange(parsedVisibleItems);
-    setExpandedGroups(newExpandedHashMap);
-  }, [
-    treeRoot,
-    rerenderItems,
-    searchQuery,
-    highlightOnlyQuery,
-    selection,
-    expanded,
-    setExpandedGroups
+    setExpandedGroups(newExpandedHashMap); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [treeRoot, rerenderItems, searchQuery, highlightOnlyQuery, selection, expanded, setExpandedGroups // onVisibleItemsChange // evaluate potential performance hit?
   ]);
+  const flattenedItems = useMemo(() => flattenTreeForDnD(data), [data]);
   return {
     visibleItems,
+    flattenedItems,
     tree,
     treeRoot,
     rerenderItems,
@@ -69,7 +95,5 @@ const useTree = (data, props, states) => {
     updateUserExpandedState
   };
 };
-export {
-  useTree
-};
-//# sourceMappingURL=useTree.js.map
+
+export { useTree };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-treeview",
-  "version": "2.2.0-alpha.2",
+  "version": "2.2.0-next.1",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Tree View",
   "module": "./esm/index.js",
@@ -19,10 +19,6 @@
       "import": "./esm/utils/useInstanceRefActions.js",
       "require": "./cjs/utils/useInstanceRefActions.js"
     },
-    "./utils/useDnDHelpers": {
-      "import": "./esm/utils/useDnDHelpers.js",
-      "require": "./cjs/utils/useDnDHelpers.js"
-    },
     "./utils/tree-helpers": {
       "import": "./esm/utils/tree-helpers.js",
       "require": "./cjs/utils/tree-helpers.js"
@@ -51,10 +47,6 @@
       "import": "./esm/utils/group-expands-helpers.js",
       "require": "./cjs/utils/group-expands-helpers.js"
     },
-    "./utils/dnd-helpers": {
-      "import": "./esm/utils/dnd-helpers.js",
-      "require": "./cjs/utils/dnd-helpers.js"
-    },
     "./utils/array-helpers": {
       "import": "./esm/utils/array-helpers.js",
       "require": "./cjs/utils/array-helpers.js"
@@ -167,6 +159,14 @@
       "import": "./esm/parts/ExpandCaret.js",
       "require": "./cjs/parts/ExpandCaret.js"
     },
+    "./parts/DropIndicator": {
+      "import": "./esm/parts/DropIndicator.js",
+      "require": "./cjs/parts/DropIndicator.js"
+    },
+    "./parts/DnDHandle": {
+      "import": "./esm/parts/DnDHandle.js",
+      "require": "./cjs/parts/DnDHandle.js"
+    },
     "./parts/ChildrenCountDisplayer": {
       "import": "./esm/parts/ChildrenCountDisplayer.js",
       "require": "./cjs/parts/ChildrenCountDisplayer.js"
@@ -175,6 +175,22 @@
       "import": "./esm/parts/CheckboxSelectable.js",
       "require": "./cjs/parts/CheckboxSelectable.js"
     },
+    "./hoc/WithDnDSortableItemContext": {
+      "import": "./esm/hoc/WithDnDSortableItemContext.js",
+      "require": "./cjs/hoc/WithDnDSortableItemContext.js"
+    },
+    "./hoc/WithConditionalDnDContext": {
+      "import": "./esm/hoc/WithConditionalDnDContext.js",
+      "require": "./cjs/hoc/WithConditionalDnDContext.js"
+    },
+    "./hoc/SortableItemContext": {
+      "import": "./esm/hoc/SortableItemContext.js",
+      "require": "./cjs/hoc/SortableItemContext.js"
+    },
+    "./hoc/DnDTreeContext": {
+      "import": "./esm/hoc/DnDTreeContext.js",
+      "require": "./cjs/hoc/DnDTreeContext.js"
+    },
     "./config/useTreeview": {
       "import": "./esm/config/useTreeview.js",
       "require": "./cjs/config/useTreeview.js"
@@ -211,16 +227,16 @@
     "generateSubmodules": true
   },
   "dependencies": {
-    "@elliemae/ds-button": "2.2.0-alpha.2",
-    "@elliemae/ds-circular-progress-indicator": "2.2.0-alpha.2",
-    "@elliemae/ds-classnames": "2.2.0-alpha.2",
-    "@elliemae/ds-form": "2.2.0-alpha.2",
-    "@elliemae/ds-icons": "2.2.0-alpha.2",
-    "@elliemae/ds-props-helpers": "2.2.0-alpha.2",
-    "@elliemae/ds-shared": "2.2.0-alpha.2",
-    "@elliemae/ds-truncated-tooltip-text": "2.2.0-alpha.2",
-    "@elliemae/ds-utilities": "2.2.0-alpha.2",
-    "@elliemae/react-sortable-hoc": "^1.0.0",
+    "@elliemae/ds-button": "2.2.0-next.1",
+    "@elliemae/ds-circular-progress-indicator": "2.2.0-next.1",
+    "@elliemae/ds-classnames": "2.2.0-next.1",
+    "@elliemae/ds-drag-and-drop": "2.2.0-next.1",
+    "@elliemae/ds-form": "2.2.0-next.1",
+    "@elliemae/ds-icons": "2.2.0-next.1",
+    "@elliemae/ds-props-helpers": "2.2.0-next.1",
+    "@elliemae/ds-shared": "2.2.0-next.1",
+    "@elliemae/ds-truncated-tooltip-text": "2.2.0-next.1",
+    "@elliemae/ds-utilities": "2.2.0-next.1",
     "react-desc": "~4.1.3",
     "react-highlight-words": "~0.17.0",
     "react-virtual": "~2.3.2",

package/types/hoc/DnDTreeContext.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { DSTreeviewT } from '../react-desc-prop-types';
+import { DropIndicatorPosition } from './SortableItemContext';
+declare type DnDTreeContextType = {
+    depth: number | undefined;
+    activeIndex: number | undefined;
+    visibleItems: DSTreeviewT.Item[] | undefined;
+    dropIndicatorPosition: DropIndicatorPosition;
+    lastActiveId: string | undefined;
+    setLastActiveId: React.Dispatch<React.SetStateAction<string>> | undefined;
+    isDropValid: boolean;
+};
+export declare const DnDTreeContext: import("react").Context<DnDTreeContextType>;
+export {};

package/types/hoc/SortableItemContext.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import { useSortable } from '@dnd-kit/sortable';
+export declare enum DropIndicatorPosition {
+    None = 0,
+    Before = 1,
+    After = 2,
+    Inside = 3
+}
+export declare type SortableItemContextType = {
+    draggableProps: false | (ReturnType<typeof useSortable> & {
+        dropIndicatorPosition: DropIndicatorPosition;
+        shouldShowDropIndicatorPosition: boolean;
+        lastActiveId?: string;
+        setLastActiveId?: React.Dispatch<React.SetStateAction<string>>;
+        isDropValid: boolean;
+    });
+};
+/** Context for cross component communication */
+export declare const SortableItemContext: import("react").Context<SortableItemContextType>;

package/types/hoc/WithConditionalDnDContext.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+declare type FunctionalHOC = <T = unknown>(Component: React.ComponentType<T>, ...other: unknown[]) => (props: T) => JSX.Element;
+export declare const withConditionalDnDRowContext: FunctionalHOC;
+export {};

package/types/hoc/WithDnDSortableItemContext.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+declare type FunctionalHOC = <T = unknown>(Component: React.ComponentType<T>, ...other: unknown[]) => (props: T) => JSX.Element;
+export declare const withDnDSortableItemContext: FunctionalHOC;
+export {};