@elliemae/ds-treeview 2.2.0-alpha.5 → 2.2.0-beta.0

package/esm/utils/dnd-helpers.js

@@ -1,5 +1,6 @@
-import * as React from "react";
-import { getItemsParentNode, itemsShareSameParent } from "./tree-helpers";
+import { getItemsParentNode, itemsShareSameParent } from './tree-helpers.js';
+
+/* eslint-disable max-lines */
 const keyCodes = {
   lift: [32, 13],
   drop: [32, 13],
@@ -7,49 +8,58 @@ const keyCodes = {
   up: [38, 37],
   down: [40, 39]
 };
-const sameParentAsHoverItemDrop = ({
-  isBefore,
-  isAfter,
-  draggedItem,
-  overItem,
-  movementDirection
-}) => {
+const sameParentAsHoverItemDrop = _ref => {
+  let {
+    isBefore,
+    isAfter,
+    draggedItem,
+    overItem,
+    movementDirection
+  } = _ref;
   const hoveredItemNodeNestedIndex = overItem.node.getIndex();
   let newParentNode = getItemsParentNode([overItem], true);
-  const { treeDepth: draggedItemTreeDepth } = draggedItem;
-  const { treeDepth: overItemTreeDepth } = overItem;
-  const directionOffset = draggedItemTreeDepth <= overItemTreeDepth && movementDirection === "topToBottom" ? -1 : 0;
+  const {
+    treeDepth: draggedItemTreeDepth
+  } = draggedItem;
+  const {
+    treeDepth: overItemTreeDepth
+  } = overItem;
+  const directionOffset = // we don't apply the offset for direction
+  //  if moving from less nested to more nested
+  //  or moving bottom to top
+  // the offset is required when moving elemnts down in their nest level
+  draggedItemTreeDepth <= overItemTreeDepth && movementDirection === 'topToBottom' ? -1 : 0;
   let newNestedIndex;
-  if (isBefore)
-    newNestedIndex = hoveredItemNodeNestedIndex + directionOffset;
-  else if (isAfter)
-    newNestedIndex = hoveredItemNodeNestedIndex + 1 + directionOffset;
-  else {
-    newNestedIndex = overItem.children.length;
+  if (isBefore) newNestedIndex = hoveredItemNodeNestedIndex + directionOffset;else if (isAfter) newNestedIndex = hoveredItemNodeNestedIndex + 1 + directionOffset;else {
+    newNestedIndex = overItem.children.length; // append as last child of the group
+
     newParentNode = overItem.node;
   }
-  if (newNestedIndex < 0)
-    newNestedIndex = 0;
+  if (newNestedIndex < 0) newNestedIndex = 0;
   return {
     newNestedIndex,
     newParentNode
   };
 };
-const inferHoverItemKinshipDrop = ({
-  isBefore,
-  isAfter,
-  draggedItem,
-  overItem,
-  movementDirection
-}) => {
+const inferHoverItemKinshipDrop = _ref2 => {
+  let {
+    isBefore,
+    isAfter,
+    draggedItem,
+    overItem,
+    movementDirection
+  } = _ref2;
   const hoverItemModel = overItem.node.model;
   const isGroupAndIsExpanded = hoverItemModel.isExpanded && hoverItemModel.children.length > 0;
+
   if (isAfter && isGroupAndIsExpanded) {
     return {
       newNestedIndex: 0,
+      // append after the group, so basically as first child
       newParentNode: overItem.node
     };
   }
+
   if (isBefore || isAfter && !isGroupAndIsExpanded) {
     return sameParentAsHoverItemDrop({
       isBefore,
@@ -58,46 +68,56 @@ const inferHoverItemKinshipDrop = ({
       overItem,
       movementDirection
     });
-  }
+  } // drop inside
+
+
   return {
     newNestedIndex: overItem.children.length,
+    // append as last child of the group
     newParentNode: overItem.node
   };
 };
-const isDropValid = ({
-  isBefore,
-  isAfter,
-  draggedItem,
-  overItem,
-  restrictDragAndDrop
-}) => {
-  const { id: movedId } = draggedItem;
-  const { id: hoverId } = overItem;
+const isDropValid = _ref3 => {
+  let {
+    isBefore,
+    isAfter,
+    draggedItem,
+    overItem,
+    restrictDragAndDrop
+  } = _ref3;
+  const {
+    id: movedId
+  } = draggedItem;
+  const {
+    id: hoverId
+  } = overItem;
   const isInside = !isBefore && !isAfter;
-  if (movedId === hoverId)
-    return false;
+  if (movedId === hoverId) return false;
+
   if (isInside && !overItem.isGroup) {
-    return false;
+    return false; // we can't drop inside an item that isn't a group
   }
+
   if (restrictDragAndDrop) {
-    if (isInside)
-      return false;
+    if (isInside) return false; // in this mode we can't drop inside another element
+
     const sameParent = itemsShareSameParent([draggedItem, overItem]);
-    if (overItem.node.model.isExpanded && isAfter)
-      return false;
-    if (!sameParent)
-      return false;
+    if (overItem.node.model.isExpanded && isAfter) return false;
+    if (!sameParent) return false;
   }
+
   return true;
 };
-const inferKeyboardKinshipDrop = ({
-  items,
-  newIndex
-}) => {
+const inferKeyboardKinshipDrop = _ref4 => {
+  let {
+    items,
+    newIndex
+  } = _ref4;
   const kinship = {};
   const itemBefore = items[newIndex];
   const itemBeforeModel = itemBefore.node.model;
   const isGroupAndIsExpanded = itemBeforeModel.isExpanded && itemBeforeModel.children.length > 0;
+
   if (isGroupAndIsExpanded) {
     kinship.newParentNode = itemBefore.node;
     kinship.newNestedIndex = 0;
@@ -105,13 +125,8 @@ const inferKeyboardKinshipDrop = ({
     kinship.newParentNode = getItemsParentNode([itemBefore], true);
     kinship.newNestedIndex = itemBefore.node.getIndex();
   }
+
   return kinship;
 };
-export {
-  inferHoverItemKinshipDrop,
-  inferKeyboardKinshipDrop,
-  isDropValid,
-  keyCodes,
-  sameParentAsHoverItemDrop
-};
-//# sourceMappingURL=dnd-helpers.js.map
+
+export { inferHoverItemKinshipDrop, inferKeyboardKinshipDrop, isDropValid, keyCodes, sameParentAsHoverItemDrop };

package/esm/utils/group-expands-helpers.js

@@ -1,109 +1,99 @@
-import * as React from "react";
-import { useCallback, useEffect } from "react";
+import { useCallback, useEffect } from 'react';
+
+/* eslint-disable max-params */
 const updateExpandedState = (treeRoot, onExpandChange) => {
   const shouldContinueWalking = true;
-  const newExpandedHashMap = { __ds_tree_root: true };
-  treeRoot.walk((node) => {
+  const newExpandedHashMap = {
+    __ds_tree_root: true
+  };
+  treeRoot.walk(node => {
     if (!node.isRoot() && node.model.isGroup && node.model.isExpanded) {
       newExpandedHashMap[node.model.id] = true;
     }
+
     return shouldContinueWalking;
   });
-  if (onExpandChange)
-    onExpandChange(newExpandedHashMap, null);
+  if (onExpandChange) onExpandChange(newExpandedHashMap, null);
 };
-const toggleItemExpand = (itemToToggle, triggerTreeRerender, updateUserExpandedState, scrollTo = () => {
-}) => {
+const toggleItemExpand = function (itemToToggle, triggerTreeRerender, updateUserExpandedState) {
+  let scrollTo = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : () => {};
   const {
     node: {
-      model: { isExpanded }
+      model: {
+        isExpanded
+      }
     },
     virtualIndex
   } = itemToToggle;
+
   if (itemToToggle.node.model.isGroup) {
     itemToToggle.node.model.isExpanded = !isExpanded;
     triggerTreeRerender();
     updateUserExpandedState();
     setTimeout(() => {
-      if (typeof virtualIndex === "number")
-        scrollTo(virtualIndex, { align: "start" });
+      if (typeof virtualIndex === 'number') scrollTo(virtualIndex, {
+        align: 'start'
+      });
     });
   }
 };
-const expandItemModel = (modelToExpand) => {
-  if (modelToExpand.isGroup)
-    modelToExpand.isExpanded = true;
+const expandItemModel = modelToExpand => {
+  if (modelToExpand.isGroup) modelToExpand.isExpanded = true;
 };
-const collapseItemModel = (modelToCollapse) => {
-  if (modelToCollapse.isGroup)
-    modelToCollapse.isExpanded = false;
+const collapseItemModel = modelToCollapse => {
+  if (modelToCollapse.isGroup) modelToCollapse.isExpanded = false;
 };
 const expandAll = (treeRoot, triggerTreeRerender) => {
   const shouldContinueWalking = true;
-  treeRoot.walk((node) => {
-    if (!node.isRoot())
-      expandItemModel(node.model);
+  treeRoot.walk(node => {
+    if (!node.isRoot()) expandItemModel(node.model);
     return shouldContinueWalking;
   });
   triggerTreeRerender();
 };
 const collapseAll = (treeRoot, triggerTreeRerender) => {
-  const shouldContinueWalking = true;
-  treeRoot.walk((node) => {
-    if (!node.isRoot())
-      collapseItemModel(node.model);
+  const shouldContinueWalking = true; // tree-model ask we return true if we want to continue walking
+
+  treeRoot.walk(node => {
+    if (!node.isRoot()) collapseItemModel(node.model);
     return shouldContinueWalking;
   });
   triggerTreeRerender();
 };
-const getToggleExpandShouldExpand = (treeRoot) => {
+const getToggleExpandShouldExpand = treeRoot => {
   let shouldExpand = false;
-  const shouldContinueWalking = true;
-  treeRoot.walk((node) => {
+  const shouldContinueWalking = true; // tree-model ask we return true if we want to continue walking
+
+  treeRoot.walk(node => {
     if (!node.isRoot()) {
       if (!node.model.isExpanded && node.model.isGroup) {
-        shouldExpand = true;
+        shouldExpand = true; // eslint-disable-next-line no-useless-return
+
         return shouldContinueWalking;
       }
     }
+
     return shouldContinueWalking;
   });
   return shouldExpand;
 };
 const toggleExpandAllHelper = (isExpand, treeRoot, triggerTreeRerender, setLatestToggledItem, updateUserExpandedState) => {
-  if (isExpand === true)
-    expandAll(treeRoot, triggerTreeRerender);
-  else if (isExpand === false)
-    collapseAll(treeRoot, triggerTreeRerender);
-  else {
+  if (isExpand === true) expandAll(treeRoot, triggerTreeRerender);else if (isExpand === false) collapseAll(treeRoot, triggerTreeRerender);else {
     const shouldExpand = getToggleExpandShouldExpand(treeRoot);
-    if (shouldExpand === true)
-      expandAll(treeRoot, triggerTreeRerender);
-    else
-      collapseAll(treeRoot, triggerTreeRerender);
+    if (shouldExpand === true) expandAll(treeRoot, triggerTreeRerender);else collapseAll(treeRoot, triggerTreeRerender);
   }
   setLatestToggledItem(null);
   updateUserExpandedState();
 };
-const useNotifyExpandedChange = (propsWithDefaults, {
-  latestToggledItem,
-  expandedGroups
-}) => {
-  const notifyExpandedChange = useCallback((expandedGroupHashmap) => propsWithDefaults?.onExpandChange(expandedGroupHashmap || {}, latestToggledItem), [propsWithDefaults, latestToggledItem]);
+const useNotifyExpandedChange = (propsWithDefaults, _ref) => {
+  let {
+    latestToggledItem,
+    expandedGroups
+  } = _ref;
+  const notifyExpandedChange = useCallback(expandedGroupHashmap => propsWithDefaults === null || propsWithDefaults === void 0 ? void 0 : propsWithDefaults.onExpandChange(expandedGroupHashmap || {}, latestToggledItem), [propsWithDefaults, latestToggledItem]);
   useEffect(() => {
-    if (!propsWithDefaults.expanded)
-      notifyExpandedChange(expandedGroups);
+    if (!propsWithDefaults.expanded) notifyExpandedChange(expandedGroups);
   }, [expandedGroups, notifyExpandedChange, propsWithDefaults.expanded]);
 };
-export {
-  collapseAll,
-  collapseItemModel,
-  expandAll,
-  expandItemModel,
-  getToggleExpandShouldExpand,
-  toggleExpandAllHelper,
-  toggleItemExpand,
-  updateExpandedState,
-  useNotifyExpandedChange
-};
-//# sourceMappingURL=group-expands-helpers.js.map
+
+export { collapseAll, collapseItemModel, expandAll, expandItemModel, getToggleExpandShouldExpand, toggleExpandAllHelper, toggleItemExpand, updateExpandedState, useNotifyExpandedChange };

package/esm/utils/keyboard-helpers.js

@@ -1,12 +1,26 @@
-import * as React from "react";
-import { useCallback, useContext, useEffect } from "react";
-import TreeViewContext from "../TreeViewContext";
-import { focusItem } from "./tree-helpers";
-import { toggleExpandAllHelper, toggleItemExpand } from "./group-expands-helpers";
-const useOnItemKeyDown = (item) => {
+import { useContext, useCallback, useEffect } from 'react';
+import TreeViewContext from '../TreeViewContext.js';
+import { focusItem } from './tree-helpers.js';
+import { toggleItemExpand, toggleExpandAllHelper } from './group-expands-helpers.js';
+
+/* eslint-disable max-params */
+// 9 tab
+// 13 enter
+// 32 space
+// 37 left arrow
+// 38 up arrow
+// 39 right arrow
+// 40 down arrow
+// 35 end
+// 36 home
+// 56 number 8
+// 106 (NumPad) *
+const useOnItemKeyDown = item => {
   const ctx = useContext(TreeViewContext);
   const {
-    props: { onItemFocus },
+    props: {
+      onItemFocus
+    },
     triggerTreeRerender,
     isDragging,
     visibleItems,
@@ -14,42 +28,63 @@ const useOnItemKeyDown = (item) => {
     setSelectedItem,
     setLatestToggledItem,
     updateUserExpandedState,
-    virtualListHelpers: { scrollToIndex }
+    virtualListHelpers: {
+      scrollToIndex
+    }
   } = ctx;
-  const { isGroup, isExpanded } = item;
-  const onItemFocusCurry = useCallback((newFocusItem) => onItemFocus({
+  const {
+    isGroup,
+    isExpanded
+  } = item;
+  const onItemFocusCurry = useCallback(newFocusItem => onItemFocus({
     itemIndex: newFocusItem.virtualIndex,
-    scrollToItem: (opts = { align: "start" }) => scrollToIndex(newFocusItem.virtualIndex, opts),
+    scrollToItem: function () {
+      let opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
+        align: 'start'
+      };
+      return scrollToIndex(newFocusItem.virtualIndex, opts);
+    },
     item: newFocusItem
   }), [onItemFocus, scrollToIndex]);
-  const onItemKeyDown = useCallback((e) => {
-    const { keyCode } = e;
+  const onItemKeyDown = useCallback(e => {
+    const {
+      keyCode
+    } = e;
+
     if (!isDragging) {
-      if (keyCode !== 9)
-        e.preventDefault();
-      if (keyCode === 13 || keyCode === 32)
-        setSelectedItem(item);
+      if (keyCode !== 9) e.preventDefault(); // allow tab/shift+tab
+
+      if (keyCode === 13 || keyCode === 32) setSelectedItem(item);
+
       if (keyCode === 37) {
         if (isGroup && isExpanded) {
           toggleItemExpand(item, triggerTreeRerender, updateUserExpandedState, scrollToIndex);
           setLatestToggledItem(item);
         }
       }
+
       if (keyCode === 39) {
         if (isGroup && !isExpanded) {
           toggleItemExpand(item, triggerTreeRerender, updateUserExpandedState, scrollToIndex);
           setLatestToggledItem(item);
         }
       }
-      const { virtualIndex } = item;
-      if (typeof virtualIndex === "number") {
+
+      const {
+        virtualIndex
+      } = item;
+
+      if (typeof virtualIndex === 'number') {
         const lastItemIndex = visibleItems.length - 1;
+
         if (keyCode === 38) {
           const isLoopedFocus = virtualIndex === 0;
           const newFocusIndex = isLoopedFocus ? lastItemIndex : virtualIndex - 1;
           const newFocusItem = visibleItems[newFocusIndex];
           scrollToIndex(newFocusIndex);
+
           if (isLoopedFocus) {
+            // when looping the list from start to end we need to wait a bit before focusing
             setTimeout(() => {
               setFocusedItem(newFocusItem);
               focusItem(newFocusItem);
@@ -61,12 +96,15 @@ const useOnItemKeyDown = (item) => {
             focusItem(newFocusItem);
           }
         }
+
         if (keyCode === 40) {
           const isLoopedFocus = virtualIndex === lastItemIndex;
           const newFocusIndex = isLoopedFocus ? 0 : virtualIndex + 1;
           const newFocusItem = visibleItems[newFocusIndex];
           scrollToIndex(newFocusIndex);
+
           if (isLoopedFocus) {
+            // when looping the list from start to end we need to wait a bit before focusing
             setTimeout(() => {
               setFocusedItem(newFocusItem);
               onItemFocusCurry(newFocusItem);
@@ -78,6 +116,7 @@ const useOnItemKeyDown = (item) => {
             focusItem(newFocusItem);
           }
         }
+
         if (keyCode === 35) {
           if (virtualIndex !== lastItemIndex) {
             const newFocusItem = visibleItems[lastItemIndex];
@@ -89,6 +128,7 @@ const useOnItemKeyDown = (item) => {
             }, 300);
           }
         }
+
         if (keyCode === 36) {
           if (virtualIndex !== 0) {
             const newFocusItem = visibleItems[0];
@@ -102,40 +142,27 @@ const useOnItemKeyDown = (item) => {
         }
       }
     }
-  }, [
-    isDragging,
-    setSelectedItem,
-    item,
-    isGroup,
-    isExpanded,
-    triggerTreeRerender,
-    scrollToIndex,
-    setLatestToggledItem,
-    visibleItems,
-    setFocusedItem,
-    onItemFocusCurry,
-    updateUserExpandedState
-  ]);
+  }, [isDragging, setSelectedItem, item, isGroup, isExpanded, triggerTreeRerender, scrollToIndex, setLatestToggledItem, visibleItems, setFocusedItem, onItemFocusCurry, updateUserExpandedState]);
   return onItemKeyDown;
 };
-const useGlobalKeyboardListener = (func) => {
+const useGlobalKeyboardListener = func => {
   useEffect(() => {
-    document.addEventListener("keydown", func);
-    return () => document.removeEventListener("keydown", func);
+    document.addEventListener('keydown', func);
+    return () => document.removeEventListener('keydown', func);
   }, [func]);
 };
 const useGlobalToggleAllExpandShortcut = (treeRoot, triggerTreeRerender, setLatestToggledItem, updateUserExpandedState) => {
-  const memoizedToggleAllKeyboardShortcut = useCallback((e) => {
-    const { shiftKey, keyCode } = e;
+  const memoizedToggleAllKeyboardShortcut = useCallback(e => {
+    const {
+      shiftKey,
+      keyCode
+    } = e;
+
     if (shiftKey && keyCode === 56) {
-      toggleExpandAllHelper("toggle", treeRoot, triggerTreeRerender, setLatestToggledItem, updateUserExpandedState);
+      toggleExpandAllHelper('toggle', treeRoot, triggerTreeRerender, setLatestToggledItem, updateUserExpandedState);
     }
   }, [setLatestToggledItem, treeRoot, triggerTreeRerender, updateUserExpandedState]);
   return useGlobalKeyboardListener(memoizedToggleAllKeyboardShortcut);
 };
-export {
-  useGlobalKeyboardListener,
-  useGlobalToggleAllExpandShortcut,
-  useOnItemKeyDown
-};
-//# sourceMappingURL=keyboard-helpers.js.map
+
+export { useGlobalKeyboardListener, useGlobalToggleAllExpandShortcut, useOnItemKeyDown };

package/esm/utils/object-helpers.js

@@ -1,47 +1,64 @@
-import * as React from "react";
+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.reduce.js';
+import 'core-js/modules/esnext.iterator.reduce.js';
+
+/* eslint-disable no-sequences */
+
+/* eslint-disable no-return-assign */
+
+/* eslint-disable no-restricted-syntax */
+
+/* eslint-disable guard-for-in */
 function isObjectADate(o) {
-  return o?.constructor?.name === "Date";
+  var _o$constructor;
+
+  return (o === null || o === void 0 ? void 0 : (_o$constructor = o.constructor) === null || _o$constructor === void 0 ? void 0 : _o$constructor.name) === 'Date';
 }
+
 function isObjectAnArray(o) {
   return Array.isArray(o);
 }
+
 function isObjectAString(o) {
-  return typeof o === "object";
+  return typeof o === 'object';
 }
-const unfreeze = (o) => {
+
+const unfreeze = o => {
   let oo;
+
   if (o === null) {
     oo = null;
-  } else if (o === void 0) {
-    oo = void 0;
+  } else if (o === undefined) {
+    oo = undefined;
   } else if (isObjectADate(o)) {
     oo = new Date(o);
   } else if (isObjectAnArray(o)) {
     oo = [];
-    o.forEach((v) => {
+    o.forEach(v => {
       oo.push(v);
     });
   } else if (isObjectAString(o)) {
     oo = String(o);
   } else if (isObjectAString(o)) {
     oo = {};
+
     for (const property in o) {
       oo[property] = o[property];
     }
   } else {
     oo = o;
   }
+
   return oo;
 };
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 function filterObject(obj, predicate) {
   return Object.keys(obj).reduce((res, key) => {
-    if (predicate(obj[key]))
-      res[key] = obj[key];
+    if (predicate(obj[key])) res[key] = obj[key];
     return res;
   }, {});
 }
-export {
-  filterObject,
-  unfreeze
-};
-//# sourceMappingURL=object-helpers.js.map
+
+export { filterObject, unfreeze };

package/esm/utils/refs-helpers.js

@@ -1,15 +1,21 @@
-import * as React from "react";
-const setMultipleRefs = (...refs) => {
+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';
+
+// allow multiple refs to be set to point to the same DOM element
+const setMultipleRefs = function () {
+  for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
+    refs[_key] = arguments[_key];
+  }
+
   const filteredRefs = refs.filter(Boolean);
-  if (!filteredRefs.length)
-    return () => {
-    };
-  if (filteredRefs.length === 0)
-    return () => {
-    };
-  return (newRef) => {
-    filteredRefs.forEach((refToBeUpdated) => {
-      if (typeof refToBeUpdated === "function") {
+  if (!filteredRefs.length) return () => {};
+  if (filteredRefs.length === 0) return () => {};
+  return newRef => {
+    filteredRefs.forEach(refToBeUpdated => {
+      if (typeof refToBeUpdated === 'function') {
         refToBeUpdated(newRef);
       } else if (refToBeUpdated) {
         refToBeUpdated.current = newRef;
@@ -17,7 +23,5 @@ const setMultipleRefs = (...refs) => {
     });
   };
 };
-export {
-  setMultipleRefs
-};
-//# sourceMappingURL=refs-helpers.js.map
+
+export { setMultipleRefs };