@elliemae/ds-treeview 2.2.0-next.6 → 2.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-treeview",
-  "version": "2.2.0-next.6",
+  "version": "2.2.1",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Tree View",
   "module": "./esm/index.js",
@@ -19,6 +19,10 @@
       "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"
@@ -47,6 +51,10 @@
       "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"
@@ -159,14 +167,6 @@
       "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,22 +175,6 @@
       "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"
@@ -227,16 +211,16 @@
     "generateSubmodules": true
   },
   "dependencies": {
-    "@elliemae/ds-button": "2.2.0-next.6",
-    "@elliemae/ds-circular-progress-indicator": "2.2.0-next.6",
-    "@elliemae/ds-classnames": "2.2.0-next.6",
-    "@elliemae/ds-drag-and-drop": "2.2.0-next.6",
-    "@elliemae/ds-form": "2.2.0-next.6",
-    "@elliemae/ds-icons": "2.2.0-next.6",
-    "@elliemae/ds-props-helpers": "2.2.0-next.6",
-    "@elliemae/ds-shared": "2.2.0-next.6",
-    "@elliemae/ds-truncated-tooltip-text": "2.2.0-next.6",
-    "@elliemae/ds-utilities": "2.2.0-next.6",
+    "@elliemae/ds-button": "2.2.1",
+    "@elliemae/ds-circular-progress-indicator": "2.2.1",
+    "@elliemae/ds-classnames": "2.2.1",
+    "@elliemae/ds-form": "2.2.1",
+    "@elliemae/ds-icons": "2.2.1",
+    "@elliemae/ds-props-helpers": "2.2.1",
+    "@elliemae/ds-shared": "2.2.1",
+    "@elliemae/ds-truncated-tooltip-text": "2.2.1",
+    "@elliemae/ds-utilities": "2.2.1",
+    "@elliemae/react-sortable-hoc": "^1.0.0",
     "react-desc": "~4.1.3",
     "react-highlight-words": "~0.17.0",
     "react-virtual": "~2.3.2",

package/types/TreeView.d.ts

@@ -6,7 +6,7 @@ export declare namespace TreeView {
     var propTypes: React.WeakValidationMap<unknown>;
 }
 declare const TreeViewWithSchema: {
-    (props?: DSTreeviewT.Props | undefined): JSX.Element;
+    (props?: unknown): JSX.Element;
     propTypes: unknown;
     toTypescript: () => import("react-desc").TypescriptSchema;
 };

package/types/parts/TreeItem.d.ts

@@ -1,3 +1,4 @@
+/// <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>>;
@@ -5,13 +6,19 @@ export declare const TreeListItemAddonsWrapper: React.ComponentType<{}>;
 interface PropsT {
     item: DSTreeviewT.Item;
     itemIndex: number;
-    isDragOverlay?: boolean;
-    virtualItemRef?: React.RefObject<HTMLLIElement>;
+    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;
-declare const _default: (props: PropsT) => JSX.Element;
-export default _default;
+export declare const DragAndDropTreeItem: React.ComponentClass<PropsT & import("@elliemae/react-sortable-hoc").SortableElementProps, any>;
+export {};

package/types/parts/TreeList.d.ts

@@ -17,4 +17,8 @@ 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 +1,3 @@
+/// <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,19 +27,9 @@ export declare namespace DSTreeviewT {
         matchesSearchQuery?: boolean;
         nodeItemRef?: React.RefObject<HTMLLIElement>;
         model: TreeModel.Node<Item>['model'];
-        node: TreeModel.Node<Item> & {
-            parent?: TreeModel.Node<Item>;
-        };
+        node: 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;
@@ -60,7 +50,6 @@ 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;
@@ -73,7 +62,7 @@ export declare namespace DSTreeviewT {
             item: Item;
         }) => void;
         onVisibleItemsChange: (newVisibleItems: Item[]) => void;
-        onOrderChange: (newData: SimpleItem[], oldData: SimpleItem[], draggedItem: DndItem) => void;
+        onOrderChange: (newData: Item[], oldData: Item[], draggedItem: Item) => void;
         onSelectionChange: (selection: SelectionItems, item: Item, meta: {
             scrollToItem: ScrollToItemFunc;
             itemIndex: number;
@@ -135,9 +124,6 @@ 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,15 +19,22 @@ 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/dnd-helpers.d.ts

@@ -0,0 +1,39 @@
+import type { DSTreeviewT } from '../react-desc-prop-types';
+import type { DSTreeviewInternalsT } from '../sharedTypes';
+interface MetaInfoT {
+    isBefore: boolean;
+    isAfter: boolean;
+    draggedItem: DSTreeviewT.Item;
+    overItem: DSTreeviewT.Item;
+}
+interface KinshipT {
+    newParentNode: DSTreeviewT.Item['node'];
+    newNestedIndex: number;
+}
+export declare const keyCodes: {
+    lift: number[];
+    drop: number[];
+    cancel: number[];
+    up: number[];
+    down: number[];
+};
+export declare const sameParentAsHoverItemDrop: ({ isBefore, isAfter, draggedItem, overItem, movementDirection, }: MetaInfoT & {
+    movementDirection: DSTreeviewInternalsT.DnDMovementDirectionT;
+}) => {
+    newNestedIndex: number;
+    newParentNode: import("tree-model/types").Node<DSTreeviewT.Item>;
+};
+export declare const inferHoverItemKinshipDrop: ({ isBefore, isAfter, draggedItem, overItem, movementDirection, }: MetaInfoT & {
+    movementDirection: DSTreeviewInternalsT.DnDMovementDirectionT;
+}) => {
+    newNestedIndex: number;
+    newParentNode: import("tree-model/types").Node<DSTreeviewT.Item>;
+};
+export declare const isDropValid: ({ isBefore, isAfter, draggedItem, overItem, restrictDragAndDrop, }: MetaInfoT & {
+    restrictDragAndDrop: boolean;
+}) => boolean;
+export declare const inferKeyboardKinshipDrop: ({ items, newIndex, }: {
+    items: DSTreeviewT.Item[];
+    newIndex: number;
+}) => Partial<KinshipT>;
+export {};

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

@@ -1,6 +1,5 @@
 import type { DSTreeviewT } from '../react-desc-prop-types';
 import type { DSTreeviewInternalsT } from '../sharedTypes';
-import { SortableItemContextType } from '../hoc/SortableItemContext';
-export declare const useOnItemKeyDown: (item: DSTreeviewT.Item, draggableProps: SortableItemContextType['draggableProps']) => (e: React.KeyboardEvent<HTMLLIElement>) => void;
+export declare const useOnItemKeyDown: (item: DSTreeviewT.Item) => (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) | false;
+declare type GenericMergeableRef = null | undefined | React.MutableRefObject<unknown> | ((ref: HTMLElement) => void);
 export declare const setMultipleRefs: (...refs: GenericMergeableRef[]) => (ref: HTMLElement) => void;
 export {};

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

@@ -7,9 +7,7 @@ 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> & {
-    parent?: TreeModel.Node<DSTreeviewT.Item> | undefined;
-};
+export declare const getItemsParentNode: (items?: DSTreeviewT.Item[], skipSameParentCheck?: boolean) => TreeModel.Node<DSTreeviewT.Item>;
 export declare const getNodeMatchesSearchQuery: (node: DSTreeviewT.Item['node'], searchQuery?: string) => boolean;
 export declare const getChildrenMatchesSearchQuery: (parentNode: DSTreeviewT.Item['node'], searchQuery?: string) => boolean;
 /**
@@ -24,5 +22,4 @@ 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/useDnDHelpers.d.ts

@@ -0,0 +1,26 @@
+/// <reference types="node" />
+/// <reference types="mocha" />
+/// <reference types="webpack-env" />
+/// <reference types="styled-components" />
+import React from 'react';
+import type { DSTreeviewT } from '../react-desc-prop-types';
+import type { DSTreeviewInternalsT } from '../sharedTypes';
+export declare const useDnDHelpers: () => {
+    updateBeforeSortStart: (beforeStartArgs: {
+        index: number;
+        isKeySorting: boolean;
+    }) => Promise<unknown>;
+    onSortStart: () => void;
+    onSortEnd: ({ oldIndex, newIndex, isKeySorting }: {
+        oldIndex: number;
+        newIndex: number;
+        isKeySorting: boolean;
+    }) => void;
+    onMouseDragOverItem: ({ event, item, itemIndex, setIsDraggingOverThis, openFolderOnHoverTimeout, }: {
+        event: React.MouseEvent<HTMLLIElement>;
+        item: DSTreeviewT.Item;
+        itemIndex: number;
+        setIsDraggingOverThis: DSTreeviewInternalsT.StateSetter<boolean>;
+        openFolderOnHoverTimeout: React.MutableRefObject<NodeJS.Timeout | null>;
+    }) => void;
+};

package/types/utils/useTree.d.ts

@@ -5,7 +5,6 @@ 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: {};

package/cjs/hoc/DnDTreeContext.js

@@ -1,18 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var React = require('react');
-var SortableItemContext = require('./SortableItemContext.js');
-
-const DnDTreeContext = /*#__PURE__*/React.createContext({
-  depth: undefined,
-  activeIndex: undefined,
-  visibleItems: undefined,
-  dropIndicatorPosition: SortableItemContext.DropIndicatorPosition.None,
-  lastActiveId: undefined,
-  setLastActiveId: undefined,
-  isDropValid: false
-});
-
-exports.DnDTreeContext = DnDTreeContext;

package/cjs/hoc/SortableItemContext.js

@@ -1,21 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var React = require('react');
-
-exports.DropIndicatorPosition = void 0;
-
-(function (DropIndicatorPosition) {
-  DropIndicatorPosition[DropIndicatorPosition["None"] = 0] = "None";
-  DropIndicatorPosition[DropIndicatorPosition["Before"] = 1] = "Before";
-  DropIndicatorPosition[DropIndicatorPosition["After"] = 2] = "After";
-  DropIndicatorPosition[DropIndicatorPosition["Inside"] = 3] = "Inside";
-})(exports.DropIndicatorPosition || (exports.DropIndicatorPosition = {}));
-
-/** Context for cross component communication */
-const SortableItemContext = /*#__PURE__*/React.createContext({
-  draggableProps: false
-});
-
-exports.SortableItemContext = SortableItemContext;

package/cjs/hoc/WithConditionalDnDContext.js

@@ -1,138 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _jsx = require('@babel/runtime/helpers/jsx');
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-require('core-js/modules/web.dom-collections.iterator.js');
-require('core-js/modules/esnext.async-iterator.map.js');
-require('core-js/modules/esnext.iterator.map.js');
-require('core-js/modules/esnext.async-iterator.for-each.js');
-require('core-js/modules/esnext.iterator.constructor.js');
-require('core-js/modules/esnext.iterator.for-each.js');
-require('core-js/modules/esnext.async-iterator.find.js');
-require('core-js/modules/esnext.iterator.find.js');
-require('core-js/modules/esnext.async-iterator.filter.js');
-require('core-js/modules/esnext.iterator.filter.js');
-var React = require('react');
-var core = require('@dnd-kit/core');
-var sortable = require('@dnd-kit/sortable');
-var dsDragAndDrop = require('@elliemae/ds-drag-and-drop');
-var TreeViewContext = require('../TreeViewContext.js');
-var TreeItem = require('../parts/TreeItem.js');
-var DnDTreeContext = require('./DnDTreeContext.js');
-var jsxRuntime = require('react/jsx-runtime');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
-var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
-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__default["default"](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__default["default"].useState('');
-  const {
-    props: {
-      data,
-      onOrderChange,
-      getIsDropValid
-    },
-    flattenedItems,
-    visibleItems: flattenedVisibleTree,
-    withDragAndDrop
-  } = React.useContext(TreeViewContext["default"]);
-  const flattenedVisibleTreeForDnD = React.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 = React.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
-  } = dsDragAndDrop.useTreeDndkitConfig({
-    flattenedItems,
-    visibleItems: flattenedVisibleTreeForDnD,
-    isHorizontalDnD: false,
-    isExpandable: true,
-    onReorder,
-    getIsDropValid,
-    maxDragAndDropLevel: Infinity
-  });
-  if (lastActiveId !== activeId && activeId) setLastActiveId(activeId);
-  if (withDragAndDrop) return /*#__PURE__*/jsxRuntime.jsxs(core.DndContext, _objectSpread(_objectSpread({}, dndContextProps), {}, {
-    children: [/*#__PURE__*/jsxRuntime.jsx(sortable.SortableContext, _objectSpread(_objectSpread({}, sortableContextProps), {}, {
-      children: /*#__PURE__*/_jsx__default["default"](DnDTreeContext.DnDTreeContext.Provider, {
-        value: {
-          activeIndex,
-          depth,
-          visibleItems: visibleItems.map(item => item.original),
-          dropIndicatorPosition,
-          lastActiveId,
-          setLastActiveId,
-          isDropValid
-        }
-      }, void 0, /*#__PURE__*/jsxRuntime.jsx(Component, _objectSpread({}, props)))
-    })), /*#__PURE__*/_jsx__default["default"](core.DragOverlay, {
-      style: {
-        width: 'auto'
-      }
-    }, void 0, activeId ? /*#__PURE__*/_jsx__default["default"](TreeItem.TreeItem, {
-      itemIndex: activeIndex,
-      item: ensure(flattenedVisibleTree.find(item => item.id.toString() === activeId)),
-      isDragOverlay: true
-    }) : null)]
-  }));
-  return /*#__PURE__*/jsxRuntime.jsx(Component, _objectSpread({}, props));
-};
-
-exports.withConditionalDnDRowContext = withConditionalDnDRowContext;

package/cjs/hoc/WithDnDSortableItemContext.js

@@ -1,70 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-require('core-js/modules/esnext.async-iterator.filter.js');
-require('core-js/modules/esnext.iterator.constructor.js');
-require('core-js/modules/esnext.iterator.filter.js');
-require('core-js/modules/esnext.async-iterator.for-each.js');
-require('core-js/modules/esnext.iterator.for-each.js');
-var _jsx = require('@babel/runtime/helpers/jsx');
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-var React = require('react');
-var sortable = require('@dnd-kit/sortable');
-var SortableItemContext = require('./SortableItemContext.js');
-var TreeViewContext = require('../TreeViewContext.js');
-var DnDTreeContext = require('./DnDTreeContext.js');
-var jsxRuntime = require('react/jsx-runtime');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
-var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
-
-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__default["default"](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
-  } = React.useContext(TreeViewContext["default"]);
-  const {
-    dropIndicatorPosition,
-    lastActiveId,
-    setLastActiveId,
-    isDropValid
-  } = React.useContext(DnDTreeContext.DnDTreeContext);
-  const id = props.item.id.toString(); // onMount generate unique options, so everyting is only ran once
-
-  const draggableOptions = React.useMemo(() => ({
-    id
-  }), [id]);
-  const useSortableHelpers = sortable.useSortable(draggableOptions); // calculate all the "useSortable" values as per required
-
-  const draggableProps = React.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 = React.useMemo(() => ({
-    draggableProps
-  }), [draggableProps]); // we always add the context, if draggableProps===false we don't have the DnD enabled.
-
-  return /*#__PURE__*/_jsx__default["default"](SortableItemContext.SortableItemContext.Provider, {
-    value: ctx
-  }, void 0, /*#__PURE__*/jsxRuntime.jsx(Component, _objectSpread({}, props)));
-};
-
-exports.withDnDSortableItemContext = withDnDSortableItemContext;

package/cjs/parts/DnDHandle.js

@@ -1,46 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-require('core-js/modules/esnext.async-iterator.filter.js');
-require('core-js/modules/esnext.iterator.constructor.js');
-require('core-js/modules/esnext.iterator.filter.js');
-require('core-js/modules/esnext.async-iterator.for-each.js');
-require('core-js/modules/esnext.iterator.for-each.js');
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-var React = require('react');
-var dsIcons = require('@elliemae/ds-icons');
-var SortableItemContext = require('../hoc/SortableItemContext.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
-
-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__default["default"](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
-  } = React.useContext(SortableItemContext.SortableItemContext);
-  const isDragging = draggableProps && draggableProps.isDragging;
-  return /*#__PURE__*/React.createElement(dsIcons.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
-  }));
-};
-
-exports.DnDHandle = DnDHandle;