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

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,55 +1,91 @@
-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, draggableProps) => {
   const ctx = useContext(TreeViewContext);
   const {
-    props: { onItemFocus },
+    props: {
+      onItemFocus
+    },
     triggerTreeRerender,
-    isDragging,
     visibleItems,
     setFocusedItem,
     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;
-    if (!isDragging) {
-      if (keyCode !== 9)
-        e.preventDefault();
-      if (keyCode === 13 || keyCode === 32)
+  const onItemKeyDown = useCallback(e => {
+    const {
+      keyCode
+    } = e;
+
+    if (!(draggableProps && draggableProps.active)) {
+      if (keyCode !== 9) e.preventDefault(); // allow tab/shift+tab
+
+      if ((keyCode === 13 || keyCode === 32) && e.target.tagName === 'LI') {
         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 +97,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 +117,7 @@ const useOnItemKeyDown = (item) => {
             focusItem(newFocusItem);
           }
         }
+
         if (keyCode === 35) {
           if (virtualIndex !== lastItemIndex) {
             const newFocusItem = visibleItems[lastItemIndex];
@@ -89,6 +129,7 @@ const useOnItemKeyDown = (item) => {
             }, 300);
           }
         }
+
         if (keyCode === 36) {
           if (virtualIndex !== 0) {
             const newFocusItem = visibleItems[0];
@@ -102,40 +143,27 @@ const useOnItemKeyDown = (item) => {
         }
       }
     }
-  }, [
-    isDragging,
-    setSelectedItem,
-    item,
-    isGroup,
-    isExpanded,
-    triggerTreeRerender,
-    scrollToIndex,
-    setLatestToggledItem,
-    visibleItems,
-    setFocusedItem,
-    onItemFocusCurry,
-    updateUserExpandedState
-  ]);
+  }, [draggableProps, setSelectedItem, item, isGroup, isExpanded, triggerTreeRerender, updateUserExpandedState, scrollToIndex, setLatestToggledItem, visibleItems, setFocusedItem, onItemFocusCurry]);
   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 };

package/esm/utils/selectable-helper.js

@@ -1,59 +1,70 @@
-import * as React from "react";
-import { walkParents, walkAllNodeChildren } from "./tree-helpers";
-const getGroupCheckState = (node) => {
+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 { walkAllNodeChildren, walkParents } from './tree-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 getGroupCheckState = node => {
   let childAllChecked = true;
   let anyChildChecked = false;
-  walkAllNodeChildren(node, (childNode) => {
+  walkAllNodeChildren(node, childNode => {
     const {
-      model: { isChecked }
+      model: {
+        isChecked
+      }
     } = childNode;
-    if (isChecked === "mixed" || isChecked === true)
-      anyChildChecked = true;
-    else
-      childAllChecked = false;
+    if (isChecked === 'mixed' || isChecked === true) anyChildChecked = true;else childAllChecked = false;
   });
-  if (childAllChecked)
-    return true;
-  if (anyChildChecked)
-    return "mixed";
+  if (childAllChecked) return true;
+  if (anyChildChecked) return 'mixed';
   return false;
 };
-const selectCheckboxItemModelParentsTillRoot = (modelToCheck, triggerTreeRerender = null) => {
+const selectCheckboxItemModelParentsTillRoot = function (modelToCheck) {
+  let triggerTreeRerender = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
   const newSelections = {};
-  const { nodePath } = modelToCheck;
-  walkParents(nodePath, (parentNode) => {
+  const {
+    nodePath
+  } = modelToCheck;
+  walkParents(nodePath, parentNode => {
     const nextState = getGroupCheckState(parentNode);
     parentNode.model.isChecked = nextState;
     newSelections[parentNode.model.id] = nextState;
   });
-  if (triggerTreeRerender)
-    triggerTreeRerender();
+  if (triggerTreeRerender) triggerTreeRerender();
   return newSelections;
 };
-const toggleCheckboxItem = (itemToSelect, triggerTreeRerender = null) => {
+const toggleCheckboxItem = function (itemToSelect) {
+  let triggerTreeRerender = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
   const {
     node: {
-      model: { id, isChecked, children = [] }
+      model: {
+        id,
+        isChecked,
+        children = []
+      }
     }
   } = itemToSelect;
-  const newSelections = {};
-  const nextState = isChecked === "mixed" ? true : !isChecked;
+  const newSelections = {}; // 'mixed' -> true -> false -> true [...->false -> true]
+
+  const nextState = isChecked === 'mixed' ? true : !isChecked;
   itemToSelect.node.model.isChecked = nextState;
   newSelections[id] = nextState;
+
   if (children.length > 0 && (nextState === true || nextState === false)) {
-    walkAllNodeChildren(itemToSelect.node, (childNode) => {
+    walkAllNodeChildren(itemToSelect.node, childNode => {
       childNode.model.isChecked = nextState;
       newSelections[childNode.model.id] = nextState;
     });
   }
+
   const parentsNewSelections = selectCheckboxItemModelParentsTillRoot(itemToSelect);
-  if (triggerTreeRerender)
-    triggerTreeRerender();
-  return { ...parentsNewSelections, ...newSelections };
-};
-export {
-  getGroupCheckState,
-  selectCheckboxItemModelParentsTillRoot,
-  toggleCheckboxItem
+  if (triggerTreeRerender) triggerTreeRerender();
+  return _objectSpread(_objectSpread({}, parentsNewSelections), newSelections);
 };
-//# sourceMappingURL=selectable-helper.js.map
+
+export { getGroupCheckState, selectCheckboxItemModelParentsTillRoot, toggleCheckboxItem };

package/esm/utils/string-helpers.js

@@ -1,6 +1,3 @@
-import * as React from "react";
-const standardizeSearchQueryString = (input) => input.trim().toLowerCase();
-export {
-  standardizeSearchQueryString
-};
-//# sourceMappingURL=string-helpers.js.map
+const standardizeSearchQueryString = input => input.trim().toLowerCase();
+
+export { standardizeSearchQueryString };