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

package/cjs/hoc/WithConditionalDnDContext.js

@@ -0,0 +1,138 @@
+'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

@@ -0,0 +1,70 @@
+'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/index.js

@@ -1,37 +1,26 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
-  }
-  return target;
-};
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
-var src_exports = {};
-__export(src_exports, {
-  TreeViewSearchBar: () => import_TreeViewSearchBar.TreeViewSearchBar
-});
-var React = __toESM(require("react"));
-__reExport(src_exports, require("./TreeView"));
-__reExport(src_exports, require("./plugins"));
-var import_TreeViewSearchBar = require("./related-components/TreeViewSearchBar");
-module.exports = __toCommonJS(src_exports);
-//# sourceMappingURL=index.js.map
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var TreeView = require('./TreeView.js');
+var TreeDndPlugin = require('./plugins/dnd/TreeDndPlugin.js');
+var TreeRovingPlugin = require('./plugins/roving/TreeRovingPlugin.js');
+var SelectablePluginTree = require('./plugins/selectable/SelectablePluginTree.js');
+var TreeToolbarPlugin = require('./plugins/toolbar/TreeToolbarPlugin.js');
+var TreeDataPlugin = require('./plugins/tree/TreeDataPlugin.js');
+var TreeVirtualizationPlugin = require('./plugins/virtualization/TreeVirtualizationPlugin.js');
+var SearchableTreePlugin = require('./plugins/searchable/SearchableTreePlugin.js');
+var TreeViewSearchBar = require('./related-components/TreeViewSearchBar.js');
+
+
+
+exports.TreeView = TreeView.TreeView;
+exports.TreeViewWithSchema = TreeView.TreeViewWithSchema;
+exports.TreeDndPlugin = TreeDndPlugin.TreeDndPlugin;
+exports.TreeRovingPlugin = TreeRovingPlugin.TreeRovingPlugin;
+exports.SelectablePluginTree = SelectablePluginTree.SelectablePluginTree;
+exports.TreeToolbarPlugin = TreeToolbarPlugin.TreeToolbarPlugin;
+exports.TreePluginList = TreeDataPlugin.TreePluginList;
+exports.TreeVirtualizationPlugin = TreeVirtualizationPlugin.TreeVirtualizationPlugin;
+exports.SearchableTreePlugin = SearchableTreePlugin.SearchableTreePlugin;
+exports.TreeViewSearchBar = TreeViewSearchBar.TreeViewSearchBar;

package/cjs/parts/CheckboxSelectable.js

@@ -1,89 +1,79 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
-  }
-  return target;
-};
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
-var CheckboxSelectable_exports = {};
-__export(CheckboxSelectable_exports, {
-  default: () => CheckboxSelectable_default
-});
-var React = __toESM(require("react"));
-var import_react = __toESM(require("react"));
-var import_ds_form = require("@elliemae/ds-form");
-var import_styled_components = __toESM(require("styled-components"));
-var import_TreeViewContext = __toESM(require("../TreeViewContext"));
-var import_selectable_helper = require("../utils/selectable-helper");
-var import_object_helpers = require("../utils/object-helpers");
-const StyledCheckboxWrapper = import_styled_components.default.span`
-  padding-top: 3px;
-`;
+'use strict';
+
+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 dsForm = require('@elliemae/ds-form');
+var styled = require('styled-components');
+var TreeViewContext = require('../TreeViewContext.js');
+var selectableHelper = require('../utils/selectable-helper.js');
+var objectHelpers = require('../utils/object-helpers.js');
+
+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 styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+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 StyledCheckboxWrapper = /*#__PURE__*/styled__default["default"].span.withConfig({
+  componentId: "sc-1tyhs3t-0"
+})(["padding-top:3px;"]);
+
 function CheckboxSelectable(props) {
-  const { item, itemIndex } = props;
-  const { id } = item;
-  const ctx = (0, import_react.useContext)(import_TreeViewContext.default);
   const {
-    props: { onSelectionChange, isItemDisabled },
-    virtualListHelpers: { scrollToIndex },
+    item,
+    itemIndex
+  } = props;
+  const {
+    id
+  } = item;
+  const ctx = React.useContext(TreeViewContext["default"]);
+  const {
+    props: {
+      onSelectionChange,
+      isItemDisabled
+    },
+    virtualListHelpers: {
+      scrollToIndex
+    },
     triggerTreeRerender,
     selectedCheckboxes,
     setSelectedCheckboxes
   } = ctx;
-  const onCheckboxChange = (0, import_react.useCallback)(() => {
-    const newSelections = (0, import_selectable_helper.toggleCheckboxItem)(item);
-    const newSelectionHasmap = (0, import_object_helpers.filterObject)({ ...selectedCheckboxes, ...newSelections }, (value) => value !== false);
+  const onCheckboxChange = React.useCallback(() => {
+    const newSelections = selectableHelper.toggleCheckboxItem(item);
+    const newSelectionHasmap = objectHelpers.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
-  ]);
-  const isChecked = (0, import_react.useMemo)(() => {
-    if (selectedCheckboxes[id] === "mixed") {
-      return "mixed";
+    if (onSelectionChange) onSelectionChange(newSelectionHasmap, item, indexAndScrollTo);
+  }, [item, triggerTreeRerender, onSelectionChange, itemIndex, scrollToIndex, selectedCheckboxes, setSelectedCheckboxes]);
+  const isChecked = React.useMemo(() => {
+    if (selectedCheckboxes[id] === 'mixed') {
+      return 'mixed';
     }
+
     if (selectedCheckboxes[id] === true) {
       return true;
     }
+
     return false;
   }, [selectedCheckboxes, id]);
-  const isDisabled = (0, import_react.useMemo)(() => isItemDisabled(item), [item, isItemDisabled]);
-  return /* @__PURE__ */ import_react.default.createElement(StyledCheckboxWrapper, null, /* @__PURE__ */ import_react.default.createElement(import_ds_form.DSCheckbox, {
+  const isDisabled = React.useMemo(() => isItemDisabled(item), [item, isItemDisabled]);
+  return /*#__PURE__*/_jsx__default["default"](StyledCheckboxWrapper, {}, void 0, /*#__PURE__*/_jsx__default["default"](dsForm.DSCheckbox, {
     checked: isChecked,
     disabled: isDisabled,
     className: "em-ds-tree-item-checkbox",
@@ -92,6 +82,5 @@ function CheckboxSelectable(props) {
     tabIndex: "0"
   }));
 }
-var CheckboxSelectable_default = CheckboxSelectable;
-module.exports = __toCommonJS(CheckboxSelectable_exports);
-//# sourceMappingURL=CheckboxSelectable.js.map
+
+module.exports = CheckboxSelectable;

package/cjs/parts/ChildrenCountDisplayer.js

@@ -1,47 +1,30 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
-  }
-  return target;
-};
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
-var ChildrenCountDisplayer_exports = {};
-__export(ChildrenCountDisplayer_exports, {
-  ChildrenCountDisplayer: () => ChildrenCountDisplayer
-});
-var React = __toESM(require("react"));
-var import_react = __toESM(require("react"));
-var import_cssClassesConstants = require("../config/cssClassesConstants");
-const className = `${import_cssClassesConstants.DSTreeViewPrefix}-${import_cssClassesConstants.treeItemBlockName}-children-count-displayer`;
-const ChildrenCountDisplayer = (props) => {
-  const { item } = props;
-  const { isGroup, children } = item;
-  if (!isGroup)
-    return null;
-  return /* @__PURE__ */ import_react.default.createElement("span", {
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('react');
+var cssClassesConstants = require('../config/cssClassesConstants.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+
+const className = "".concat(cssClassesConstants.DSTreeViewPrefix, "-").concat(cssClassesConstants.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__default["default"]("span", {
     "data-testid": "tree-item-children-count-displayer",
-    className
-  }, ` | ${children.length} Items`);
+    className: className
+  }, void 0, " | ".concat(children.length, " Items"));
 };
-module.exports = __toCommonJS(ChildrenCountDisplayer_exports);
-//# sourceMappingURL=ChildrenCountDisplayer.js.map
+
+exports.ChildrenCountDisplayer = ChildrenCountDisplayer;

package/cjs/parts/DnDHandle.js

@@ -0,0 +1,46 @@
+'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;

package/cjs/parts/DropIndicator.js

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