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

package/esm/config/useTreeview.js

@@ -1,28 +1,34 @@
-import * as React from "react";
-import { useState, useRef, useEffect, useMemo, useCallback } from "react";
-import { useVirtual } from "react-virtual";
-import { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from "@elliemae/ds-props-helpers";
-import { v4 as uuidv4 } from "uuid";
-import { TreeViewPropTypes } from "../react-desc-prop-types";
-import { defaultRelativeMouseCoord, defaultProps } from "../TreeViewContext";
-import { TreeDndPlugin } from "../plugins/dnd";
-import { useTree } from "../utils/useTree";
-import { useNotifyExpandedChange, toggleItemExpand } from "../utils/group-expands-helpers";
-import { useInstanceRefActions } from "../utils/useInstanceRefActions";
-import { useGlobalToggleAllExpandShortcut } from "../utils/keyboard-helpers";
-const useTreeview = (props) => {
+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 { useRef, useState, useCallback, useMemo, useEffect } from 'react';
+import { useVirtual } from 'react-virtual';
+import { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';
+import { v4 } from 'uuid';
+import { TreeViewPropTypes } from '../react-desc-prop-types.js';
+import { defaultProps } from '../TreeViewContext.js';
+import { TreeDndPlugin } from '../plugins/dnd/TreeDndPlugin.js';
+import { useTree } from '../utils/useTree.js';
+import { toggleItemExpand, useNotifyExpandedChange } from '../utils/group-expands-helpers.js';
+import { useInstanceRefActions } from '../utils/useInstanceRefActions.js';
+import { useGlobalToggleAllExpandShortcut } from '../utils/keyboard-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 useTreeview = props => {
   const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
   useValidateTypescriptPropTypes(propsWithDefault, TreeViewPropTypes);
   const defaultActions = {
     actions: {
-      toggleExpandAll: () => {
-      },
-      scrollTo: () => {
-      },
-      setSelectedItemByVirtualIndex: () => {
-      },
-      setFocusedItemByVirtualIndex: () => {
-      }
+      toggleExpandAll: () => {},
+      scrollTo: () => {},
+      setSelectedItemByVirtualIndex: () => {},
+      setFocusedItemByVirtualIndex: () => {}
     }
   };
   const treeRef = useRef(defaultActions);
@@ -36,48 +42,44 @@ const useTreeview = (props) => {
     selection,
     onInstanceRefInitialized
   } = propsWithDefault;
-  const [isDragging, setIsDragging] = useState(false);
-  const [isKeyboardDragging, setIsKeyboardDragging] = useState(false);
-  const [relativeMouseCord, setRelativeMouseCord] = useState(defaultRelativeMouseCoord);
-  const [uniqueTreeViewUUID] = useState(uuidv4());
-  const [draggedItem, setDraggedItem] = useState(null);
+  const [uniqueTreeViewUUID] = useState(v4());
   const [hoverItem, setHoverItem] = useState(null);
   const [latestToggledItem, setLatestToggledItem] = useState(null);
   const [selectedItem, setSelectedItem] = useState(null);
   const [focusedItem, setFocusedItem] = useState(null);
-  const [selectedCheckboxes, setSelectedCheckboxes] = useState({
-    ...selection
-  });
+  const [selectedCheckboxes, setSelectedCheckboxes] = useState(_objectSpread({}, selection));
   const [expandedGroups, setExpandedGroups] = useState({});
-  const { visibleItems, tree, treeRoot, triggerTreeRerender, updateUserExpandedState } = useTree(data, propsWithDefault, {
+  const {
+    visibleItems,
+    flattenedItems,
+    tree,
+    treeRoot,
+    triggerTreeRerender,
+    updateUserExpandedState
+  } = useTree(data, propsWithDefault, {
     setExpandedGroups
   });
-  const virtualListRef = useRef();
+  const virtualListRef = useRef(); // estimateSize should not be really required given what was stated on
+  // https://github.com/tannerlinsley/react-virtual/issues/23
+
   const virtualListHelpers = useVirtual({
     size: visibleItems.length,
     parentRef: virtualListRef,
     overscan: 15
   });
-  const withDragAndDrop = !!(plugins?.includes(TreeDndPlugin) && onOrderChange);
+  const withDragAndDrop = !!(plugins !== null && plugins !== void 0 && plugins.includes(TreeDndPlugin) && onOrderChange);
   const withRadioChecks = isSingleSelect && !isMultiSelect;
   const withCheckboxChecks = !isSingleSelect && isMultiSelect;
   const handleExpandGroup = useCallback(toggleItemExpand, []);
   const ctx = useMemo(() => ({
     props: propsWithDefault,
-    setRelativeMouseCord,
-    relativeMouseCord,
     virtualListHelpers,
     virtualListRef,
     tree,
     treeRoot,
     visibleItems,
+    flattenedItems,
     triggerTreeRerender,
-    isDragging,
-    setIsDragging,
-    isKeyboardDragging,
-    setIsKeyboardDragging,
-    draggedItem,
-    setDraggedItem,
     withRadioChecks,
     withCheckboxChecks,
     withDragAndDrop,
@@ -96,41 +98,22 @@ const useTreeview = (props) => {
     setHoverItem,
     handleExpandGroup,
     updateUserExpandedState
-  }), [
-    draggedItem,
-    expandedGroups,
-    focusedItem,
-    handleExpandGroup,
-    hoverItem,
-    isDragging,
-    isKeyboardDragging,
-    latestToggledItem,
-    propsWithDefault,
-    relativeMouseCord,
-    selectedCheckboxes,
-    selectedItem,
-    tree,
-    treeRoot,
-    triggerTreeRerender,
-    uniqueTreeViewUUID,
-    virtualListHelpers,
-    visibleItems,
-    withCheckboxChecks,
-    withDragAndDrop,
-    withRadioChecks,
-    updateUserExpandedState
-  ]);
-  if (instanceRef)
-    instanceRef.current = treeRef.current;
+  }), [propsWithDefault, virtualListHelpers, tree, treeRoot, visibleItems, flattenedItems, triggerTreeRerender, withRadioChecks, withCheckboxChecks, withDragAndDrop, uniqueTreeViewUUID, selectedCheckboxes, selectedItem, expandedGroups, latestToggledItem, focusedItem, hoverItem, handleExpandGroup, updateUserExpandedState]); // this hooks can't use the context because the context provider doesn't wrap this
+  // as such we manually pass the second parameter as fit
+
+  if (instanceRef) instanceRef.current = treeRef.current;
   useInstanceRefActions(treeRef.current, ctx);
   useGlobalToggleAllExpandShortcut(treeRoot, triggerTreeRerender, setLatestToggledItem, updateUserExpandedState);
-  useNotifyExpandedChange(propsWithDefault, ctx);
+  useNotifyExpandedChange(propsWithDefault, ctx); // this is an horrible hack.
+  // this is required because there is no "on rendered" react-way to check if every children has finished rendering
+  // this should be working for now, in the future we may want to review this for a better solution
+
   useEffect(() => {
-    setTimeout(() => onInstanceRefInitialized(treeRef), 100);
+    setTimeout(() => onInstanceRefInitialized(treeRef), 100); // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  return useMemo(() => ({ ctx }), [ctx]);
-};
-export {
-  useTreeview
+  return useMemo(() => ({
+    ctx
+  }), [ctx]);
 };
-//# sourceMappingURL=useTreeview.js.map
+
+export { useTreeview };

package/esm/hoc/DnDTreeContext.js

@@ -0,0 +1,14 @@
+import { createContext } from 'react';
+import { DropIndicatorPosition } from './SortableItemContext.js';
+
+const DnDTreeContext = /*#__PURE__*/createContext({
+  depth: undefined,
+  activeIndex: undefined,
+  visibleItems: undefined,
+  dropIndicatorPosition: DropIndicatorPosition.None,
+  lastActiveId: undefined,
+  setLastActiveId: undefined,
+  isDropValid: false
+});
+
+export { DnDTreeContext };

package/esm/hoc/SortableItemContext.js

@@ -0,0 +1,17 @@
+import { createContext } from 'react';
+
+let DropIndicatorPosition;
+
+(function (DropIndicatorPosition) {
+  DropIndicatorPosition[DropIndicatorPosition["None"] = 0] = "None";
+  DropIndicatorPosition[DropIndicatorPosition["Before"] = 1] = "Before";
+  DropIndicatorPosition[DropIndicatorPosition["After"] = 2] = "After";
+  DropIndicatorPosition[DropIndicatorPosition["Inside"] = 3] = "Inside";
+})(DropIndicatorPosition || (DropIndicatorPosition = {}));
+
+/** Context for cross component communication */
+const SortableItemContext = /*#__PURE__*/createContext({
+  draggableProps: false
+});
+
+export { DropIndicatorPosition, SortableItemContext };

package/esm/hoc/WithConditionalDnDContext.js

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

package/esm/hoc/WithDnDSortableItemContext.js

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

package/esm/index.js

@@ -1,8 +1,9 @@
-import * as React from "react";
-export * from "./TreeView";
-export * from "./plugins";
-import { TreeViewSearchBar } from "./related-components/TreeViewSearchBar";
-export {
-  TreeViewSearchBar
-};
-//# sourceMappingURL=index.js.map
+export { TreeView, TreeViewWithSchema } from './TreeView.js';
+export { TreeDndPlugin } from './plugins/dnd/TreeDndPlugin.js';
+export { TreeRovingPlugin } from './plugins/roving/TreeRovingPlugin.js';
+export { SelectablePluginTree } from './plugins/selectable/SelectablePluginTree.js';
+export { TreeToolbarPlugin } from './plugins/toolbar/TreeToolbarPlugin.js';
+export { TreePluginList } from './plugins/tree/TreeDataPlugin.js';
+export { TreeVirtualizationPlugin } from './plugins/virtualization/TreeVirtualizationPlugin.js';
+export { SearchableTreePlugin } from './plugins/searchable/SearchableTreePlugin.js';
+export { TreeViewSearchBar } from './related-components/TreeViewSearchBar.js';

package/esm/parts/CheckboxSelectable.js

@@ -1,58 +1,71 @@
-import * as React from "react";
-import React2, { useContext, useCallback, useMemo } from "react";
-import { DSCheckbox } from "@elliemae/ds-form";
-import styled from "styled-components";
-import TreeViewContext from "../TreeViewContext";
-import { toggleCheckboxItem } from "../utils/selectable-helper";
-import { filterObject } from "../utils/object-helpers";
-const StyledCheckboxWrapper = styled.span`
-  padding-top: 3px;
-`;
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import { useContext, useCallback, useMemo } from 'react';
+import { DSCheckbox } from '@elliemae/ds-form';
+import styled from 'styled-components';
+import TreeViewContext from '../TreeViewContext.js';
+import { toggleCheckboxItem } from '../utils/selectable-helper.js';
+import { filterObject } from '../utils/object-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 StyledCheckboxWrapper = /*#__PURE__*/styled.span.withConfig({
+  componentId: "sc-1tyhs3t-0"
+})(["padding-top:3px;"]);
+
 function CheckboxSelectable(props) {
-  const { item, itemIndex } = props;
-  const { id } = item;
+  const {
+    item,
+    itemIndex
+  } = props;
+  const {
+    id
+  } = item;
   const ctx = useContext(TreeViewContext);
   const {
-    props: { onSelectionChange, isItemDisabled },
-    virtualListHelpers: { scrollToIndex },
+    props: {
+      onSelectionChange,
+      isItemDisabled
+    },
+    virtualListHelpers: {
+      scrollToIndex
+    },
     triggerTreeRerender,
     selectedCheckboxes,
     setSelectedCheckboxes
   } = ctx;
   const onCheckboxChange = useCallback(() => {
     const newSelections = toggleCheckboxItem(item);
-    const newSelectionHasmap = filterObject({ ...selectedCheckboxes, ...newSelections }, (value) => value !== false);
+    const newSelectionHasmap = filterObject(_objectSpread(_objectSpread({}, selectedCheckboxes), newSelections), value => value !== false);
     setSelectedCheckboxes(newSelectionHasmap);
     triggerTreeRerender();
     const indexAndScrollTo = {
       scrollToItem: () => {
-        if (typeof item.virtualIndex === "number")
-          scrollToIndex(item.virtualIndex);
+        if (typeof item.virtualIndex === 'number') scrollToIndex(item.virtualIndex);
       },
       itemIndex
     };
-    if (onSelectionChange)
-      onSelectionChange(newSelectionHasmap, item, indexAndScrollTo);
-  }, [
-    item,
-    triggerTreeRerender,
-    onSelectionChange,
-    itemIndex,
-    scrollToIndex,
-    selectedCheckboxes,
-    setSelectedCheckboxes
-  ]);
+    if (onSelectionChange) onSelectionChange(newSelectionHasmap, item, indexAndScrollTo);
+  }, [item, triggerTreeRerender, onSelectionChange, itemIndex, scrollToIndex, selectedCheckboxes, setSelectedCheckboxes]);
   const isChecked = useMemo(() => {
-    if (selectedCheckboxes[id] === "mixed") {
-      return "mixed";
+    if (selectedCheckboxes[id] === 'mixed') {
+      return 'mixed';
     }
+
     if (selectedCheckboxes[id] === true) {
       return true;
     }
+
     return false;
   }, [selectedCheckboxes, id]);
   const isDisabled = useMemo(() => isItemDisabled(item), [item, isItemDisabled]);
-  return /* @__PURE__ */ React2.createElement(StyledCheckboxWrapper, null, /* @__PURE__ */ React2.createElement(DSCheckbox, {
+  return /*#__PURE__*/_jsx(StyledCheckboxWrapper, {}, void 0, /*#__PURE__*/_jsx(DSCheckbox, {
     checked: isChecked,
     disabled: isDisabled,
     className: "em-ds-tree-item-checkbox",
@@ -61,8 +74,5 @@ function CheckboxSelectable(props) {
     tabIndex: "0"
   }));
 }
-var CheckboxSelectable_default = CheckboxSelectable;
-export {
-  CheckboxSelectable_default as default
-};
-//# sourceMappingURL=CheckboxSelectable.js.map
+
+export { CheckboxSelectable as default };

package/esm/parts/ChildrenCountDisplayer.js

@@ -1,18 +1,22 @@
-import * as React from "react";
-import React2 from "react";
-import { DSTreeViewPrefix, treeItemBlockName } from "../config/cssClassesConstants";
-const className = `${DSTreeViewPrefix}-${treeItemBlockName}-children-count-displayer`;
-const ChildrenCountDisplayer = (props) => {
-  const { item } = props;
-  const { isGroup, children } = item;
-  if (!isGroup)
-    return null;
-  return /* @__PURE__ */ React2.createElement("span", {
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
+import { DSTreeViewPrefix, treeItemBlockName } from '../config/cssClassesConstants.js';
+
+const className = "".concat(DSTreeViewPrefix, "-").concat(treeItemBlockName, "-children-count-displayer");
+const ChildrenCountDisplayer = props => {
+  const {
+    item
+  } = props;
+  const {
+    isGroup,
+    children
+  } = item;
+  if (!isGroup) return null; // return ` | ${children.length} Items`;
+
+  return /*#__PURE__*/_jsx("span", {
     "data-testid": "tree-item-children-count-displayer",
-    className
-  }, ` | ${children.length} Items`);
+    className: className
+  }, void 0, " | ".concat(children.length, " Items"));
 };
-export {
-  ChildrenCountDisplayer
-};
-//# sourceMappingURL=ChildrenCountDisplayer.js.map
+
+export { ChildrenCountDisplayer };

package/esm/parts/DnDHandle.js

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