@elliemae/ds-treeview 2.2.0 → 2.3.0-alpha.3

package/esm/utils/useInstanceRefActions.js

@@ -1,16 +1,10 @@
-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;
+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) => {
   const {
-    props: {
-      onItemFocus
-    },
+    props: { onItemFocus },
     virtualListHelpers,
     treeRoot,
     visibleItems,
@@ -20,12 +14,8 @@ const useInstanceRefActions = (_ref, 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) {
@@ -34,36 +24,30 @@ const useInstanceRefActions = (_ref, 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(function (indx) {
-    let opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
-      align: 'start'
-    };
-    if (scrollToIndex) scrollToIndex(indx, opts);
+  actions.scrollTo = useCallback((indx, opts = { 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(function (index) {
-    let opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
-      align: 'start',
-      withScroll: false
-    };
+  actions.setFocusedItemByVirtualIndex = useCallback((index, opts = { 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(() => {
@@ -79,5 +63,7 @@ const useInstanceRefActions = (_ref, ctx) => {
   }, [visibleItems, scrollToIndex, setFocusedItem, onItemFocus]);
   return actions;
 };
-
-export { useInstanceRefActions };
+export {
+  useInstanceRefActions
+};
+//# sourceMappingURL=useInstanceRefActions.js.map

package/esm/utils/useInstanceRefActions.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/utils/useInstanceRefActions.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useEffect, useMemo, useState, useRef, useCallback } from 'react';\nimport { focusItem } from './tree-helpers';\nimport { toggleExpandAllHelper } from './group-expands-helpers';\nimport type { DSTreeviewT } from '../react-desc-prop-types';\nimport type { DSTreeviewInternalsT } from '../sharedTypes';\n\ninterface PromisesRefT {\n  expandResolve?: null | ((value: DSTreeviewT.Item[] | PromiseLike<DSTreeviewT.Item[]>) => void);\n  scrollTo?: null | ((value: DSTreeviewT.Item[] | PromiseLike<DSTreeviewT.Item[]>) => void);\n}\n\nexport const useInstanceRefActions = ({ actions }: DSTreeviewT.InstanceRef, ctx: DSTreeviewInternalsT.CTX) => {\n  const {\n    props: { onItemFocus },\n    virtualListHelpers,\n    treeRoot,\n    visibleItems,\n    triggerTreeRerender,\n    updateUserExpandedState,\n    setSelectedItem,\n    setFocusedItem,\n    setLatestToggledItem,\n  } = ctx;\n  const { current: promises } = useRef<PromisesRefT>({});\n  const { scrollToIndex } = useMemo(() => virtualListHelpers, [virtualListHelpers]);\n  const [expandPromise, setPromise] = useState<Promise<DSTreeviewT.Item[]> | undefined | null>();\n\n  useEffect(() => {\n    if (expandPromise && promises.expandResolve) {\n      promises.expandResolve(visibleItems);\n      promises.expandResolve = null;\n      setPromise(null);\n    }\n  }, [visibleItems, expandPromise, promises]);\n\n  actions.toggleExpandAll = useCallback(\n    (isExpand) => {\n      const p = new Promise<DSTreeviewT.Item[]>((resolve) => {\n        promises.expandResolve = resolve;\n        if (treeRoot)\n          toggleExpandAllHelper(isExpand, treeRoot, triggerTreeRerender, setLatestToggledItem, updateUserExpandedState);\n      });\n      setPromise(p);\n      return p;\n    },\n    [promises, treeRoot, triggerTreeRerender, setLatestToggledItem, updateUserExpandedState],\n  );\n  actions.scrollTo = useCallback(\n    (indx, opts = { align: 'start' }) => {\n      if (scrollToIndex) scrollToIndex(indx, opts);\n    },\n    [scrollToIndex],\n  );\n\n  actions.setSelectedItemByVirtualIndex = useCallback(\n    (index) => {\n      const itemByIndex = visibleItems[index];\n      setSelectedItem(itemByIndex);\n    },\n    [visibleItems, setSelectedItem],\n  );\n\n  actions.setFocusedItemByVirtualIndex = useCallback(\n    (index, opts = { align: 'start', withScroll: false }) => {\n      const itemByIndex = visibleItems[index];\n      const onItemFocusParams = {\n        itemIndex: itemByIndex.virtualIndex as number,\n        scrollToItem: () => scrollToIndex(index, opts),\n        item: itemByIndex,\n      };\n\n      if (opts.withScroll && scrollToIndex) {\n        scrollToIndex(index, opts);\n        setTimeout(() => {\n          setFocusedItem(itemByIndex);\n          focusItem(itemByIndex);\n          onItemFocus(onItemFocusParams);\n        }, 300);\n      } else {\n        setFocusedItem(itemByIndex);\n        focusItem(itemByIndex);\n        onItemFocus(onItemFocusParams);\n      }\n    },\n    [visibleItems, scrollToIndex, setFocusedItem, onItemFocus],\n  );\n\n  return actions;\n};\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AASO,MAAM,wBAAwB,CAAC,EAAE,WAAoC,QAAkC;AAC5G,QAAM;AAAA,IACJ,OAAO,EAAE;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE;AACJ,QAAM,EAAE,SAAS,aAAa,OAAqB;AACnD,QAAM,EAAE,kBAAkB,QAAQ,MAAM,oBAAoB,CAAC;AAC7D,QAAM,CAAC,eAAe,cAAc;AAEpC,YAAU,MAAM;AACd,QAAI,iBAAiB,SAAS,eAAe;AAC3C,eAAS,cAAc;AACvB,eAAS,gBAAgB;AACzB,iBAAW;AAAA;AAAA,KAEZ,CAAC,cAAc,eAAe;AAEjC,UAAQ,kBAAkB,YACxB,CAAC,aAAa;AACZ,UAAM,IAAI,IAAI,QAA4B,CAAC,YAAY;AACrD,eAAS,gBAAgB;AACzB,UAAI;AACF,8BAAsB,UAAU,UAAU,qBAAqB,sBAAsB;AAAA;AAEzF,eAAW;AACX,WAAO;AAAA,KAET,CAAC,UAAU,UAAU,qBAAqB,sBAAsB;AAElE,UAAQ,WAAW,YACjB,CAAC,MAAM,OAAO,EAAE,OAAO,cAAc;AACnC,QAAI;AAAe,oBAAc,MAAM;AAAA,KAEzC,CAAC;AAGH,UAAQ,gCAAgC,YACtC,CAAC,UAAU;AACT,UAAM,cAAc,aAAa;AACjC,oBAAgB;AAAA,KAElB,CAAC,cAAc;AAGjB,UAAQ,+BAA+B,YACrC,CAAC,OAAO,OAAO,EAAE,OAAO,SAAS,YAAY,YAAY;AACvD,UAAM,cAAc,aAAa;AACjC,UAAM,oBAAoB;AAAA,MACxB,WAAW,YAAY;AAAA,MACvB,cAAc,MAAM,cAAc,OAAO;AAAA,MACzC,MAAM;AAAA;AAGR,QAAI,KAAK,cAAc,eAAe;AACpC,oBAAc,OAAO;AACrB,iBAAW,MAAM;AACf,uBAAe;AACf,kBAAU;AACV,oBAAY;AAAA,SACX;AAAA,WACE;AACL,qBAAe;AACf,gBAAU;AACV,kBAAY;AAAA;AAAA,KAGhB,CAAC,cAAc,eAAe,gBAAgB;AAGhD,SAAO;AAAA;",
+  "names": []
+}

package/esm/utils/useTree.js

@@ -1,91 +1,69 @@
-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 } 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; }
+import * as React from "react";
+import { useState, useCallback, useMemo, useEffect } from "react";
+import TreeModel from "tree-model";
+import { cloneDeep } from "lodash";
+import { walkVisibles, enrichNodeModelInPlace, flattenTreeForDnD } from "./tree-helpers";
+import { updateExpandedState } from "./group-expands-helpers";
 const useTree = (data, props, states) => {
-  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 { setExpandedGroups } = states;
+  const unfrozenData = useMemo(() => cloneDeep(data), [data]);
   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]); // expose a way to rerender the tree
-  //   used for expand functionality
-
+  }, [unfrozenData]);
   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]); // 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
-
+  }, [treeRoot, onExpandChange]);
   useEffect(() => {
     const parsedVisibleItems = [];
     const newExpandedHashMap = {};
-    treeRoot.walk(node => {
-      const shouldContinueWalking = true; // tree-model ask we return true if we want to continue walking
-
+    const shouldContinueWalking = true;
+    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(_objectSpread(_objectSpread({}, node.model), {}, {
-        node
-      }));
+    walkVisibles(treeRoot, (node) => {
+      parsedVisibleItems.push({ ...node.model, node });
     }, true, highlightOnlyQuery);
     setVisibleItems(parsedVisibleItems);
     onVisibleItemsChange(parsedVisibleItems);
-    setExpandedGroups(newExpandedHashMap); // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [treeRoot, rerenderItems, searchQuery, highlightOnlyQuery, selection, expanded, setExpandedGroups // onVisibleItemsChange // evaluate potential performance hit?
+    setExpandedGroups(newExpandedHashMap);
+  }, [
+    treeRoot,
+    rerenderItems,
+    searchQuery,
+    highlightOnlyQuery,
+    selection,
+    expanded,
+    setExpandedGroups
   ]);
+  const flattenedItems = useMemo(() => flattenTreeForDnD(data), [data]);
   return {
     visibleItems,
+    flattenedItems,
     tree,
     treeRoot,
     rerenderItems,
@@ -93,5 +71,7 @@ const useTree = (data, props, states) => {
     updateUserExpandedState
   };
 };
-
-export { useTree };
+export {
+  useTree
+};
+//# sourceMappingURL=useTree.js.map

package/esm/utils/useTree.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/utils/useTree.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useState, useCallback, useMemo, useEffect } from 'react';\nimport TreeModel from 'tree-model';\nimport { cloneDeep } from 'lodash';\n\nimport { walkVisibles, enrichNodeModelInPlace, flattenTreeForDnD } from './tree-helpers';\nimport type { DSTreeviewT } from '../react-desc-prop-types';\nimport type { DSTreeviewInternalsT } from '../sharedTypes';\nimport { updateExpandedState } from './group-expands-helpers';\n\nexport const useTree = (\n  data: DSTreeviewT.SimpleItem[],\n  props: DSTreeviewT.Props,\n  states: {\n    setExpandedGroups: DSTreeviewInternalsT.StateSetter<DSTreeviewT.ExpandedItems>;\n  },\n) => {\n  const { setExpandedGroups } = states;\n  const unfrozenData = useMemo(() => cloneDeep(data), [data]);\n\n  // convert data into a TreeModel with extra isExpanded prop\n  // root element type is an exception, children model is based on what the dev passed on\n  // since root is an excepcion we must typecast\n  const tree = useMemo(() => new TreeModel(), []);\n  const [treeData, setTreeData] = useState({\n    id: '__ds_tree_root',\n    name: '__root',\n    isExpanded: true,\n    children: unfrozenData,\n  } as unknown as DSTreeviewT.Item);\n\n  useEffect(() => {\n    setTreeData({\n      id: '__ds_tree_root',\n      name: '__root',\n      isExpanded: true,\n      children: unfrozenData,\n    } as unknown as DSTreeviewT.Item);\n  }, [unfrozenData]);\n\n  // expose a way to rerender the tree\n  //   used for expand functionality\n  const [rerenderItems, setRerenderItems] = useState({});\n  const triggerTreeRerender = useCallback(() => {\n    setRerenderItems({});\n  }, []);\n\n  // when re-rendering we re-parse the list\n  const [treeRoot, setTreeRoot] = useState(tree.parse(treeData));\n  useEffect(() => {\n    setTreeRoot(tree.parse(treeData));\n  }, [treeData, rerenderItems, tree]);\n\n  const [visibleItems, setVisibleItems] = useState<DSTreeviewT.Item[]>([]);\n\n  const { searchQuery, highlightOnlyQuery, onVisibleItemsChange, selection, expanded, onExpandChange } = props;\n\n  const updateUserExpandedState = useCallback(() => {\n    updateExpandedState(treeRoot, onExpandChange);\n  }, [treeRoot, onExpandChange]);\n  // we add missing properties to the received Items\n  //   not the best of the patterns, but it works\n  //   this is where we convert \"SimpleItems\" to \"Items\"\n  //   this was done to avoid breaking changes back in v1\n  useEffect(() => {\n    const parsedVisibleItems: DSTreeviewT.Item[] = [];\n    const newExpandedHashMap: DSTreeviewT.ExpandedItems = {};\n    const shouldContinueWalking = true; // tree-model ask we return true if we want to continue walking\n    treeRoot.walk((node) => {\n      enrichNodeModelInPlace(node, searchQuery, selection, expanded);\n      if (node.model.id && node.model.isGroup && node.model.isExpanded) newExpandedHashMap[node.model.id] = true;\n      return shouldContinueWalking;\n    });\n\n    walkVisibles(\n      treeRoot,\n      (node) => {\n        parsedVisibleItems.push({ ...node.model, node });\n      },\n      true,\n      highlightOnlyQuery,\n    );\n    setVisibleItems(parsedVisibleItems);\n    onVisibleItemsChange(parsedVisibleItems);\n\n    setExpandedGroups(newExpandedHashMap);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [\n    treeRoot,\n    rerenderItems,\n    searchQuery,\n    highlightOnlyQuery,\n    selection,\n    expanded,\n    setExpandedGroups,\n    // onVisibleItemsChange // evaluate potential performance hit?\n  ]);\n\n  const flattenedItems = useMemo(() => flattenTreeForDnD(data), [data]);\n\n  return {\n    visibleItems,\n    flattenedItems,\n    tree,\n    treeRoot,\n    rerenderItems,\n    triggerTreeRerender,\n    updateUserExpandedState,\n  };\n};\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AAEA;AAGA;AAEO,MAAM,UAAU,CACrB,MACA,OACA,WAGG;AACH,QAAM,EAAE,sBAAsB;AAC9B,QAAM,eAAe,QAAQ,MAAM,UAAU,OAAO,CAAC;AAKrD,QAAM,OAAO,QAAQ,MAAM,IAAI,aAAa;AAC5C,QAAM,CAAC,UAAU,eAAe,SAAS;AAAA,IACvC,IAAI;AAAA,IACJ,MAAM;AAAA,IACN,YAAY;AAAA,IACZ,UAAU;AAAA;AAGZ,YAAU,MAAM;AACd,gBAAY;AAAA,MACV,IAAI;AAAA,MACJ,MAAM;AAAA,MACN,YAAY;AAAA,MACZ,UAAU;AAAA;AAAA,KAEX,CAAC;AAIJ,QAAM,CAAC,eAAe,oBAAoB,SAAS;AACnD,QAAM,sBAAsB,YAAY,MAAM;AAC5C,qBAAiB;AAAA,KAChB;AAGH,QAAM,CAAC,UAAU,eAAe,SAAS,KAAK,MAAM;AACpD,YAAU,MAAM;AACd,gBAAY,KAAK,MAAM;AAAA,KACtB,CAAC,UAAU,eAAe;AAE7B,QAAM,CAAC,cAAc,mBAAmB,SAA6B;AAErE,QAAM,EAAE,aAAa,oBAAoB,sBAAsB,WAAW,UAAU,mBAAmB;AAEvG,QAAM,0BAA0B,YAAY,MAAM;AAChD,wBAAoB,UAAU;AAAA,KAC7B,CAAC,UAAU;AAKd,YAAU,MAAM;AACd,UAAM,qBAAyC;AAC/C,UAAM,qBAAgD;AACtD,UAAM,wBAAwB;AAC9B,aAAS,KAAK,CAAC,SAAS;AACtB,6BAAuB,MAAM,aAAa,WAAW;AACrD,UAAI,KAAK,MAAM,MAAM,KAAK,MAAM,WAAW,KAAK,MAAM;AAAY,2BAAmB,KAAK,MAAM,MAAM;AACtG,aAAO;AAAA;AAGT,iBACE,UACA,CAAC,SAAS;AACR,yBAAmB,KAAK,KAAK,KAAK,OAAO;AAAA,OAE3C,MACA;AAEF,oBAAgB;AAChB,yBAAqB;AAErB,sBAAkB;AAAA,KAEjB;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAIF,QAAM,iBAAiB,QAAQ,MAAM,kBAAkB,OAAO,CAAC;AAE/D,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA;",
+  "names": []
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-treeview",
-  "version": "2.2.0",
+  "version": "2.3.0-alpha.3",
   "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,15 +227,15 @@
     "generateSubmodules": true
   },
   "dependencies": {
-    "@elliemae/ds-button": "2.2.0",
-    "@elliemae/ds-circular-progress-indicator": "2.2.0",
-    "@elliemae/ds-classnames": "2.2.0",
-    "@elliemae/ds-form": "2.2.0",
-    "@elliemae/ds-icons": "2.2.0",
-    "@elliemae/ds-props-helpers": "2.2.0",
-    "@elliemae/ds-shared": "2.2.0",
-    "@elliemae/ds-truncated-tooltip-text": "2.2.0",
-    "@elliemae/ds-utilities": "2.2.0",
+    "@elliemae/ds-button": "2.3.0-alpha.3",
+    "@elliemae/ds-circular-progress-indicator": "2.3.0-alpha.3",
+    "@elliemae/ds-classnames": "2.3.0-alpha.3",
+    "@elliemae/ds-form": "2.3.0-alpha.3",
+    "@elliemae/ds-icons": "2.3.0-alpha.3",
+    "@elliemae/ds-props-helpers": "2.3.0-alpha.3",
+    "@elliemae/ds-shared": "2.3.0-alpha.3",
+    "@elliemae/ds-truncated-tooltip-text": "2.3.0-alpha.3",
+    "@elliemae/ds-utilities": "2.3.0-alpha.3",
     "@elliemae/react-sortable-hoc": "^1.0.0",
     "react-desc": "~4.1.3",
     "react-highlight-words": "~0.17.0",

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 {};

package/types/parts/DnDHandle.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { DSTreeviewT } from '../react-desc-prop-types';
+export declare const DnDHandle: ({ id, isDragOverlay }: {
+    id: DSTreeviewT.StringOrNum;
+    isDragOverlay: boolean;
+}) => JSX.Element;

package/types/parts/DropIndicator.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { DropIndicatorPosition } from '../hoc/SortableItemContext';
+interface DropIndicatorProps {
+    vertical?: boolean;
+    dropIndicatorPosition: DropIndicatorPosition | false;
+    isLast?: boolean;
+    isDropValid?: boolean;
+}
+declare const DropIndicator: React.ComponentType<DropIndicatorProps>;
+export default DropIndicator;

package/types/parts/TreeItem.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="node" />
 import React from 'react';
 import type { DSTreeviewT } from '../react-desc-prop-types';
 export declare const TreeListItem: React.ComponentType<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>>;
@@ -6,19 +5,13 @@ export declare const TreeListItemAddonsWrapper: React.ComponentType<{}>;
 interface PropsT {
     item: DSTreeviewT.Item;
     itemIndex: number;
-    virtualItemRef: React.RefObject<HTMLLIElement>;
+    isDragOverlay?: boolean;
+    virtualItemRef?: React.RefObject<HTMLLIElement>;
     itemWrapperStyle?: {
         [key: string]: unknown;
     };
     spaceForNestingLevel?: number;
-    onMouseDragOverItem?: (opts: {
-        event: React.MouseEvent<HTMLLIElement>;
-        item: DSTreeviewT.Item;
-        itemIndex: number;
-        setIsDraggingOverThis: React.Dispatch<React.SetStateAction<boolean>>;
-        openFolderOnHoverTimeout: React.MutableRefObject<NodeJS.Timeout | null>;
-    }) => void;
 }
 export declare const TreeItem: (props: PropsT) => JSX.Element;
-export declare const DragAndDropTreeItem: React.ComponentClass<PropsT & import("@elliemae/react-sortable-hoc").SortableElementProps, any>;
-export {};
+declare const _default: (props: PropsT) => JSX.Element;
+export default _default;

package/types/parts/TreeList.d.ts

@@ -17,8 +17,4 @@ interface PropsT {
     }) => void;
 }
 export declare const TreeList: (props: PropsT) => JSX.Element;
-export declare const DragAndDropTreeList: React.ComponentClass<PropsT & {
-    disableAnimation?: boolean | undefined;
-    getContainer: (element: React.ReactElement<unknown>) => HTMLElement | Promise<HTMLElement>;
-} & import("@elliemae/react-sortable-hoc").SortableContainerProps, any>;
 export {};

package/types/plugins/dnd/TreeDndPlugin.d.ts

@@ -1,3 +1 @@
-/// <reference types="react" />
-export declare const TreeDnD: () => JSX.Element;
 export declare const TreeDndPlugin = "tree-dnd";

package/types/react-desc-prop-types.d.ts

@@ -13,7 +13,7 @@ export declare namespace DSTreeviewT {
     interface SimpleItem {
         [key: string]: unknown;
         name: string;
-        children: SimpleItem[];
+        children?: SimpleItem[];
         id: StringOrNum;
     }
     interface Item extends SimpleItem {
@@ -27,9 +27,19 @@ export declare namespace DSTreeviewT {
         matchesSearchQuery?: boolean;
         nodeItemRef?: React.RefObject<HTMLLIElement>;
         model: TreeModel.Node<Item>['model'];
-        node: TreeModel.Node<Item>;
+        node: TreeModel.Node<Item> & {
+            parent?: TreeModel.Node<Item>;
+        };
         nodePath: TreeModel.Node<Item>[];
     }
+    interface DndItem {
+        uid: string;
+        depth: number;
+        realIndex: number;
+        childrenCount: number;
+        parentId: string | null;
+        original: SimpleItem;
+    }
     interface Actions {
         toggleExpandAll: (isExpand: boolean) => Promise<DSTreeviewT.Item[]>;
         scrollTo: DSTreeviewT.ScrollToFunc;
@@ -50,6 +60,7 @@ export declare namespace DSTreeviewT {
         fluid: boolean;
         isMultiSelect: boolean;
         isSingleSelect: boolean;
+        getIsDropValid: (active: DndItem, over: DndItem, dropIndicatorPosition: 'none' | 'before' | 'after' | 'inside') => boolean;
         restrictDragAndDrop: boolean;
         showChildrenAmount: boolean;
         sortable: boolean;
@@ -62,7 +73,7 @@ export declare namespace DSTreeviewT {
             item: Item;
         }) => void;
         onVisibleItemsChange: (newVisibleItems: Item[]) => void;
-        onOrderChange: (newData: Item[], oldData: Item[], draggedItem: Item) => void;
+        onOrderChange: (newData: SimpleItem[], oldData: SimpleItem[], draggedItem: DndItem) => void;
         onSelectionChange: (selection: SelectionItems, item: Item, meta: {
             scrollToItem: ScrollToItemFunc;
             itemIndex: number;
@@ -124,6 +135,9 @@ export declare const TreeViewPropTypes: {
     isLoading: {
         deprecated: import("react-desc").PropTypesDescValidator;
     };
+    getIsDropValid: {
+        deprecated: import("react-desc").PropTypesDescValidator;
+    };
     restrictDragAndDrop: {
         deprecated: import("react-desc").PropTypesDescValidator;
     };

package/types/sharedTypes.d.ts

@@ -19,22 +19,15 @@ export declare namespace DSTreeviewInternalsT {
     interface CTX {
         props: DSTreeviewT.Props;
         visibleItems: DSTreeviewT.Item[];
+        flattenedItems: DSTreeviewT.DndItem[];
         withRadioChecks: boolean;
         withCheckboxChecks: boolean;
         withDragAndDrop: boolean;
-        relativeMouseCord: MouseCoord;
-        setRelativeMouseCord: StateSetter<MouseCoord>;
         triggerTreeRerender: () => void;
         tree?: TreeModel;
         treeRoot?: TreeModel.Node<DSTreeviewT.Item>;
         virtualListHelpers: ReturnType<typeof useVirtual>;
         virtualListRef?: React.MutableRefObject<HTMLUListElement | undefined>;
-        isDragging: boolean;
-        setIsDragging: StateSetter<boolean>;
-        isKeyboardDragging: boolean;
-        setIsKeyboardDragging: StateSetter<boolean>;
-        draggedItem: DSTreeviewT.Item | null;
-        setDraggedItem: StateSetter<DSTreeviewT.Item | null>;
         uniqueTreeViewUUID: string;
         selectedItem: DSTreeviewT.Item | null;
         setSelectedItem: StateSetter<DSTreeviewT.Item | null>;

package/types/utils/keyboard-helpers.d.ts

@@ -1,5 +1,6 @@
 import type { DSTreeviewT } from '../react-desc-prop-types';
 import type { DSTreeviewInternalsT } from '../sharedTypes';
-export declare const useOnItemKeyDown: (item: DSTreeviewT.Item) => (e: React.KeyboardEvent<HTMLLIElement>) => void;
+import { SortableItemContextType } from '../hoc/SortableItemContext';
+export declare const useOnItemKeyDown: (item: DSTreeviewT.Item, draggableProps: SortableItemContextType['draggableProps']) => (e: React.KeyboardEvent<HTMLLIElement>) => void;
 export declare const useGlobalKeyboardListener: (func: (e: KeyboardEvent) => void) => void;
 export declare const useGlobalToggleAllExpandShortcut: (treeRoot: DSTreeviewT.Item['node'], triggerTreeRerender: () => void, setLatestToggledItem: DSTreeviewInternalsT.CTX['setLatestToggledItem'], updateUserExpandedState: DSTreeviewInternalsT.CTX['updateUserExpandedState']) => void;

package/types/utils/refs-helpers.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
-declare type GenericMergeableRef = null | undefined | React.MutableRefObject<unknown> | ((ref: HTMLElement) => void);
+declare type GenericMergeableRef = null | undefined | React.MutableRefObject<unknown> | ((ref: HTMLElement) => void) | false;
 export declare const setMultipleRefs: (...refs: GenericMergeableRef[]) => (ref: HTMLElement) => void;
 export {};

package/types/utils/tree-helpers.d.ts

@@ -7,7 +7,9 @@ export declare const walkAllNodeChildren: (node: DSTreeviewT.Item['node'], callb
 export declare const getNodeById: (treeRoot: DSTreeviewT.Item['node'], id: DSTreeviewT.StringOrNum) => TreeModel.Node<DSTreeviewT.Item>;
 export declare const cloneNode: (tree: TreeModel, node: DSTreeviewT.Item) => TreeModel.Node<DSTreeviewT.Item>;
 export declare const itemsShareSameParent: (items?: DSTreeviewT.Item[]) => boolean;
-export declare const getItemsParentNode: (items?: DSTreeviewT.Item[], skipSameParentCheck?: boolean) => TreeModel.Node<DSTreeviewT.Item>;
+export declare const getItemsParentNode: (items?: DSTreeviewT.Item[], skipSameParentCheck?: boolean) => TreeModel.Node<DSTreeviewT.Item> & {
+    parent?: TreeModel.Node<DSTreeviewT.Item> | undefined;
+};
 export declare const getNodeMatchesSearchQuery: (node: DSTreeviewT.Item['node'], searchQuery?: string) => boolean;
 export declare const getChildrenMatchesSearchQuery: (parentNode: DSTreeviewT.Item['node'], searchQuery?: string) => boolean;
 /**
@@ -22,4 +24,5 @@ export declare const getChildrenMatchesSearchQuery: (parentNode: DSTreeviewT.Ite
  */
 export declare const enrichNodeModelInPlace: (node: TreeModel.Node<DSTreeviewT.SimpleItem>, searchQuery?: string, selection?: DSTreeviewT.SelectionItems | null, expanded?: DSTreeviewT.ExpandedItems | null) => void;
 export declare const focusItem: (item: DSTreeviewT.Item | null) => void;
+export declare const flattenTreeForDnD: (data: DSTreeviewT.SimpleItem[], shouldDescend?: (datum: DSTreeviewT.SimpleItem) => boolean) => DSTreeviewT.DndItem[];
 export {};

package/types/utils/useTree.d.ts

@@ -5,6 +5,7 @@ export declare const useTree: (data: DSTreeviewT.SimpleItem[], props: DSTreeview
     setExpandedGroups: DSTreeviewInternalsT.StateSetter<DSTreeviewT.ExpandedItems>;
 }) => {
     visibleItems: DSTreeviewT.Item[];
+    flattenedItems: DSTreeviewT.DndItem[];
     tree: TreeModel;
     treeRoot: TreeModel.Node<DSTreeviewT.Item>;
     rerenderItems: {};