@elliemae/ds-treeview 2.3.0-alpha.9 → 2.3.0-next.3

package/esm/parts/TreeList.js

@@ -0,0 +1,127 @@
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
+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 { useContext } from 'react';
+import { aggregatedClasses } from '@elliemae/ds-classnames';
+import { DSCircularProgressIndicator } from '@elliemae/ds-circular-progress-indicator';
+import TreeViewContext from '../TreeViewContext.js';
+import { treeListBlockName, DSTreeViewPrefix } from '../config/cssClassesConstants.js';
+import TreeItem from './TreeItem.js';
+import { withConditionalDnDRowContext } from '../hoc/WithConditionalDnDContext.js';
+import { DnDTreeContext } from '../hoc/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 treeListNoItemsBn = "".concat(treeListBlockName, "-no-items");
+const TreeListNoItems = aggregatedClasses('div', {
+  'data-testid': treeListNoItemsBn
+})(treeListNoItemsBn); // React.ComponentProps<'ul'> uses LegacyRef typings that existed pre-hook era
+// we omit the LegacyRef typings in favor of hook-era typings
+
+const TreeListWrapper = aggregatedClasses('ul', {
+  'data-testid': treeListBlockName,
+  role: 'tree'
+})(treeListBlockName, null, _ref => {
+  let {
+    rowSize
+  } = _ref;
+  return {
+    ["rowsize-".concat(rowSize)]: rowSize
+  };
+});
+const compactRowClass = "".concat(DSTreeViewPrefix, "-tv-row-size-compact");
+const normaRowClass = "".concat(DSTreeViewPrefix, "-tv-row-size-normal");
+
+const TreeListComp = () => {
+  const ctx = useContext(TreeViewContext);
+  const {
+    virtualListRef,
+    virtualListHelpers,
+    visibleItems: flattenedVisibleItems,
+    props: {
+      width,
+      height,
+      rowSize,
+      noItemsPlaceholder,
+      isLoading
+    }
+  } = ctx;
+  const {
+    totalSize,
+    virtualItems
+  } = virtualListHelpers;
+  const className = "".concat(rowSize === 'compact' ? "".concat(compactRowClass) : "".concat(normaRowClass));
+  const {
+    visibleItems
+  } = useContext(DnDTreeContext);
+  return /*#__PURE__*/jsxs(TreeListWrapper, {
+    ref: virtualListRef,
+    className: className,
+    style: {
+      height: "".concat(typeof height === 'number' ? "".concat(height, "px") : height),
+      width: "".concat(typeof width === 'number' ? "".concat(width, "px") : width),
+      overflow: 'auto'
+    },
+    children: [isLoading ? /*#__PURE__*/_jsx("div", {
+      style: {
+        width: '100%',
+        height: '100%',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center'
+      }
+    }, void 0, /*#__PURE__*/_jsx(DSCircularProgressIndicator, {
+      size: "xl",
+      loading: isLoading,
+      showLabel: true,
+      waiting: false,
+      showTooltip: false
+    })) : null, !isLoading && virtualItems.length === 0 ? /*#__PURE__*/_jsx(TreeListNoItems, {}, void 0, noItemsPlaceholder) : null, !isLoading && virtualItems.length !== 0 ? /*#__PURE__*/_jsx("div", {
+      style: {
+        height: "".concat(totalSize, "px"),
+        width: '100%',
+        position: 'relative'
+      }
+    }, void 0, virtualItems.map(virtualItem => {
+      const {
+        index,
+        measureRef,
+        start
+      } = virtualItem;
+      const item = (visibleItems || flattenedVisibleItems)[index];
+      if (!item) return null;
+      item.virtualIndex = index;
+      const {
+        id
+      } = item;
+      const style = {
+        position: 'absolute',
+        top: "".concat(start, "px"),
+        left: 0,
+        width: '100%'
+      };
+      const listItemProps = {
+        key: "DS-TreeView-List-Item-".concat(id),
+        virtualItemRef: measureRef,
+        index,
+        // this is consumed by the DnD HOC
+        itemIndex: index,
+        item,
+        itemWrapperStyle: style
+      };
+      return /*#__PURE__*/jsx(TreeItem, _objectSpread({}, listItemProps));
+    })) : null]
+  });
+};
+
+const TreeList = withConditionalDnDRowContext(TreeListComp);
+
+export { TreeList, TreeListNoItems, TreeListWrapper, treeListNoItemsBn };

package/esm/plugins/dnd/TreeDndPlugin.js

@@ -0,0 +1,3 @@
+const TreeDndPlugin = 'tree-dnd';
+
+export { TreeDndPlugin };

package/esm/plugins/dnd/index.js

@@ -0,0 +1 @@
+export { TreeDndPlugin } from './TreeDndPlugin.js';

package/esm/plugins/index.js

@@ -0,0 +1,7 @@
+export { TreeDndPlugin } from './dnd/TreeDndPlugin.js';
+export { TreeRovingPlugin } from './roving/TreeRovingPlugin.js';
+export { SelectablePluginTree } from './selectable/SelectablePluginTree.js';
+export { TreeToolbarPlugin } from './toolbar/TreeToolbarPlugin.js';
+export { TreePluginList } from './tree/TreeDataPlugin.js';
+export { TreeVirtualizationPlugin } from './virtualization/TreeVirtualizationPlugin.js';
+export { SearchableTreePlugin } from './searchable/SearchableTreePlugin.js';

package/esm/plugins/roving/TreeRovingPlugin.js

@@ -0,0 +1,3 @@
+const TreeRovingPlugin = 'tree-roving';
+
+export { TreeRovingPlugin };

package/esm/plugins/roving/index.js

@@ -0,0 +1 @@
+export { TreeRovingPlugin } from './TreeRovingPlugin.js';

package/esm/plugins/searchable/SearchableTreePlugin.js

@@ -0,0 +1,3 @@
+const SearchableTreePlugin = 'tree-searchable';
+
+export { SearchableTreePlugin };

package/esm/plugins/searchable/index.js

@@ -0,0 +1 @@
+export { SearchableTreePlugin } from './SearchableTreePlugin.js';

package/esm/plugins/selectable/SelectablePluginTree.js

@@ -0,0 +1,3 @@
+const SelectablePluginTree = 'tree-selectable';
+
+export { SelectablePluginTree };

package/esm/plugins/selectable/index.js

@@ -0,0 +1 @@
+export { SelectablePluginTree } from './SelectablePluginTree.js';

package/esm/plugins/toolbar/TreeToolbarPlugin.js

@@ -0,0 +1,3 @@
+const TreeToolbarPlugin = 'tree-toolbar';
+
+export { TreeToolbarPlugin };

package/esm/plugins/toolbar/index.js

@@ -0,0 +1 @@
+export { TreeToolbarPlugin } from './TreeToolbarPlugin.js';

package/esm/plugins/tree/TreeDataPlugin.js

@@ -0,0 +1,3 @@
+const TreePluginList = 'tree-data';
+
+export { TreePluginList };

package/esm/plugins/tree/index.js

@@ -0,0 +1 @@
+export { TreePluginList } from './TreeDataPlugin.js';

package/esm/plugins/virtualization/TreeVirtualizationPlugin.js

@@ -0,0 +1,3 @@
+const TreeVirtualizationPlugin = 'tree-virtualization';
+
+export { TreeVirtualizationPlugin };

package/esm/plugins/virtualization/index.js

@@ -0,0 +1 @@
+export { TreeVirtualizationPlugin } from './TreeVirtualizationPlugin.js';

package/esm/react-desc-prop-types.js

@@ -0,0 +1,52 @@
+import { PropTypes } from 'react-desc';
+
+/* eslint-disable max-lines */
+const TreeViewPropTypes = {
+  data: PropTypes.arrayOf(PropTypes.shape({
+    children: PropTypes.arrayOf(PropTypes.object),
+    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    isGroup: PropTypes.oneOfType([PropTypes.oneOf([undefined, null]), PropTypes.bool]),
+    name: PropTypes.string,
+    node: PropTypes.object
+  })).description('data to populate tree view').isRequired,
+  plugins: PropTypes.arrayOf(PropTypes.string).description('list of enabled plugins').defaultValue([]),
+  selection: PropTypes.object.description('pre selected items').defaultValue({}),
+  expanded: PropTypes.object.description('control what items are expanded').defaultValue(undefined),
+  instanceRef: PropTypes.shape({
+    current: PropTypes.oneOfType([PropTypes.oneOf([null, undefined]), PropTypes.shape({
+      actions: PropTypes.shape({
+        toggleExpandAll: PropTypes.func,
+        scrollTo: PropTypes.func
+      }).description('').isRequired
+    })])
+  }).description('instance ref'),
+  isItemDisabled: PropTypes.func.description('Function that receives an item, and returns whether that item should be disabled').defaultValue('() => false'),
+  disableIcons: PropTypes.bool.description('disable icons').defaultValue(false),
+  fluid: PropTypes.bool.description('whether is fluid or not').defaultValue(false),
+  isMultiSelect: PropTypes.bool.description('whether the tree view is multi select or not').defaultValue(false),
+  isSingleSelect: PropTypes.bool.description('wheter the tree view is single select or not').defaultValue(false),
+  isLoading: PropTypes.bool.description('wheter the tree should show the loading state or not').defaultValue(false),
+  getIsDropValid: PropTypes.func.description("Function that returns true if the drop is valid and false if it's not").defaultValue('() => true'),
+  restrictDragAndDrop: PropTypes.bool.description('whether to restrict DnD functionality or not').defaultValue(false),
+  showChildrenAmount: PropTypes.bool.description('whether to show the amount of children or not').defaultValue(false),
+  sortable: PropTypes.bool.description('whether the sortable functionality is active or not').defaultValue(false),
+  onItemClick: PropTypes.func.description('function executed when clicking on an item').defaultValue('() => {}'),
+  onItemFocus: PropTypes.func.description('function executed when focusing on an item').defaultValue('() => {}'),
+  onVisibleItemsChange: PropTypes.func.description('function executed when the visible items change').defaultValue('() => {}'),
+  onOrderChange: PropTypes.func.description('function executed when the items order changes').defaultValue('() => {}'),
+  onSelectionChange: PropTypes.func.description('function executed when the selection changes').defaultValue('() => {}'),
+  onExpandChange: PropTypes.func.description('function executed when expanding an item').defaultValue('() => {}'),
+  onInstanceRefInitialized: PropTypes.func.description('function executed when instanceRef has terminated instanciation').defaultValue('() => {}'),
+  rowSize: PropTypes.oneOf(['normal', 'compact']).description('size of the row').defaultValue('normal'),
+  labelOverflow: PropTypes.oneOf(['wrap', 'wrap-all', 'truncate']).description('label truncation preference').defaultValue('wrap'),
+  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description('components width').defaultValue('100%'),
+  height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description('components height').defaultValue('100%'),
+  groupIcon: PropTypes.node.description('icon for groups'),
+  itemIcon: PropTypes.node.description('icon for items'),
+  searchQuery: PropTypes.string.description('search query value'),
+  noItemsPlaceholder: PropTypes.string.description('message to be shown when there are no items in the treeview to be displayed').defaultValue('No items found'),
+  name: PropTypes.string.description('property key to identifier for items labels').defaultValue('name'),
+  highlightOnlyQuery: PropTypes.bool.description('whether to highlight results or not').defaultValue(false)
+};
+
+export { TreeViewPropTypes };

package/esm/related-components/TreeViewSearchBar.js

@@ -0,0 +1,40 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
+import { DSNavSearchBox } from '@elliemae/ds-form';
+
+function TreeViewSearchBar(props) {
+  const {
+    handleChange,
+    onNext,
+    onPrevious,
+    onClear,
+    currentResultIndex,
+    totalResults,
+    value
+  } = props;
+  return /*#__PURE__*/_jsx(DSNavSearchBox, {
+    onChange: v => {
+      handleChange({
+        target: {
+          value: v
+        }
+      });
+    },
+    onNext: onNext,
+    onPrevious: onPrevious,
+    onClear: onClear,
+    currentResultIndex: currentResultIndex,
+    totalResults: totalResults,
+    value: value
+  });
+} // TreeViewSearchBar.propTypes = {
+//   value: PropTypes.string.isRequired,
+//   handleChange: PropTypes.func.isRequired,
+//   onNext: PropTypes.func.isRequired,
+//   onPrevious: PropTypes.func.isRequired,
+//   onClear: PropTypes.func.isRequired,
+//   currentResultIndex: PropTypes.number.isRequired,
+//   totalResults: PropTypes.number.isRequired,
+// };
+
+export { TreeViewSearchBar };

package/esm/sharedTypes.js

@@ -0,0 +1 @@
+

package/{dist/esm → esm}/utils/array-helpers.js

@@ -1,6 +1,9 @@
-import * as React from "react";
+import 'core-js/modules/web.dom-collections.iterator.js';
+
+// https://github.com/sindresorhus/array-move/blob/master/index.js
 const arrayMoveMutate = (array, from, to) => {
   const startIndex = from < 0 ? array.length + from : from;
+
   if (startIndex >= 0 && startIndex < array.length) {
     const endIndex = to < 0 ? array.length + to : to;
     const [item] = array.splice(from, 1);
@@ -12,8 +15,5 @@ const arrayMove = (array, from, to) => {
   arrayMoveMutate(newArray, from, to);
   return newArray;
 };
-export {
-  arrayMove,
-  arrayMoveMutate
-};
-//# sourceMappingURL=array-helpers.js.map
+
+export { arrayMove, arrayMoveMutate };

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

@@ -0,0 +1,99 @@
+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 => {
+    if (!node.isRoot() && node.model.isGroup && node.model.isExpanded) {
+      newExpandedHashMap[node.model.id] = true;
+    }
+
+    return shouldContinueWalking;
+  });
+  if (onExpandChange) onExpandChange(newExpandedHashMap, null);
+};
+const toggleItemExpand = function (itemToToggle, triggerTreeRerender, updateUserExpandedState) {
+  let scrollTo = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : () => {};
+  const {
+    node: {
+      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'
+      });
+    });
+  }
+};
+const expandItemModel = modelToExpand => {
+  if (modelToExpand.isGroup) modelToExpand.isExpanded = true;
+};
+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);
+    return shouldContinueWalking;
+  });
+  triggerTreeRerender();
+};
+const collapseAll = (treeRoot, triggerTreeRerender) => {
+  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 => {
+  let shouldExpand = false;
+  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; // 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 {
+    const shouldExpand = getToggleExpandShouldExpand(treeRoot);
+    if (shouldExpand === true) expandAll(treeRoot, triggerTreeRerender);else collapseAll(treeRoot, triggerTreeRerender);
+  }
+  setLatestToggledItem(null);
+  updateUserExpandedState();
+};
+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);
+  }, [expandedGroups, notifyExpandedChange, propsWithDefaults.expanded]);
+};
+
+export { collapseAll, collapseItemModel, expandAll, expandItemModel, getToggleExpandShouldExpand, toggleExpandAllHelper, toggleItemExpand, updateExpandedState, useNotifyExpandedChange };

package/{dist/esm → 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";
+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,
     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;
+  const onItemKeyDown = useCallback(e => {
+    const {
+      keyCode
+    } = e;
+
     if (!(draggableProps && draggableProps.active)) {
-      if (keyCode !== 9)
-        e.preventDefault();
-      if ((keyCode === 13 || keyCode === 32) && e.target.tagName === "LI") {
+      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, draggableProps) => {
             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, draggableProps) => {
             focusItem(newFocusItem);
           }
         }
+
         if (keyCode === 35) {
           if (virtualIndex !== lastItemIndex) {
             const newFocusItem = visibleItems[lastItemIndex];
@@ -89,6 +129,7 @@ const useOnItemKeyDown = (item, draggableProps) => {
             }, 300);
           }
         }
+
         if (keyCode === 36) {
           if (virtualIndex !== 0) {
             const newFocusItem = visibleItems[0];
@@ -102,40 +143,27 @@ const useOnItemKeyDown = (item, draggableProps) => {
         }
       }
     }
-  }, [
-    draggableProps,
-    setSelectedItem,
-    item,
-    isGroup,
-    isExpanded,
-    triggerTreeRerender,
-    updateUserExpandedState,
-    scrollToIndex,
-    setLatestToggledItem,
-    visibleItems,
-    setFocusedItem,
-    onItemFocusCurry
-  ]);
+  }, [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 };