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

package/esm/parts/TreeItem.js

@@ -1,123 +1,133 @@
-import * as React from "react";
-import React2, { useContext, useState, useMemo, useRef, useCallback } from "react";
-import { SortableElement, SortableHandle } from "@elliemae/react-sortable-hoc";
-import { aggregatedClasses } from "@elliemae/ds-classnames";
-import { GripperVertical } from "@elliemae/ds-icons";
-import RadioSelectable from "./RadioSelectable";
-import CheckboxSelectable from "./CheckboxSelectable";
-import TreeViewContext from "../TreeViewContext";
-import { setMultipleRefs } from "../utils/refs-helpers";
-import { useOnItemKeyDown } from "../utils/keyboard-helpers";
-import { NestingSpace } from "./NestingSpace";
-import { Icon } from "./Icon";
-import { ExpandCaret } from "./ExpandCaret";
-import { TreeItemText } from "./TreeItemText";
-import { DSTreeViewPrefix, treeItemBlockName } from "../config/cssClassesConstants";
-const TreeListItem = aggregatedClasses("li", {
-  "data-testid": treeItemBlockName,
-  role: "treeitem"
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import { useContext, useMemo, useCallback } from 'react';
+import { aggregatedClasses } from '@elliemae/ds-classnames';
+import RadioSelectable from './RadioSelectable.js';
+import CheckboxSelectable from './CheckboxSelectable.js';
+import TreeViewContext from '../TreeViewContext.js';
+import { setMultipleRefs } from '../utils/refs-helpers.js';
+import { useOnItemKeyDown } from '../utils/keyboard-helpers.js';
+import { NestingSpace } from './NestingSpace.js';
+import { Icon } from './Icon.js';
+import { ExpandCaret } from './ExpandCaret.js';
+import { TreeItemText } from './TreeItemText.js';
+import { treeItemBlockName, DSTreeViewPrefix } from '../config/cssClassesConstants.js';
+import { DnDHandle } from './DnDHandle.js';
+import { withDnDSortableItemContext } from '../hoc/WithDnDSortableItemContext.js';
+import { SortableItemContext, DropIndicatorPosition } from '../hoc/SortableItemContext.js';
+import DropIndicator from './DropIndicator.js';
+import { jsxs } 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 TreeListItem = aggregatedClasses('li', {
+  'data-testid': treeItemBlockName,
+  role: 'treeitem' // temp fix untill we move to styled components
+
 })(treeItemBlockName);
-const TreeListItemAddonsWrapper = aggregatedClasses("div")(treeItemBlockName, "addons");
-const DnDHandle = SortableHandle(({ id }) => /* @__PURE__ */ React2.createElement(GripperVertical, {
-  "data-testid": "drag-handle",
-  key: `${id}-drag-handle`,
-  className: "drag-handle",
-  size: "s",
-  onMouseDown: (e) => {
-    if (e) {
-      e.preventDefault();
-    }
-  },
-  tabIndex: "0"
-}));
-const TreeItem = (props) => {
+const TreeListItemAddonsWrapper = aggregatedClasses('div')(treeItemBlockName, 'addons' // temp fix untill we move to styled components
+);
+const TreeItem = props => {
   const {
     item,
     itemIndex,
     itemWrapperStyle = {},
     virtualItemRef,
     spaceForNestingLevel = 1.5,
-    onMouseDragOverItem
+    isDragOverlay = false
   } = props;
-  const { id, node } = item;
-  const { nodeItemRef } = node.model;
-  const openFolderOnHoverTimeout = useRef(null);
-  const [isDraggingOverThis, setIsDraggingOverThis] = useState(false);
-  const onItemKeyDown = useOnItemKeyDown(item);
+  const {
+    id,
+    node
+  } = item;
+  const {
+    nodeItemRef
+  } = node.model;
+  const {
+    draggableProps
+  } = useContext(SortableItemContext);
+  const onItemKeyDown = useOnItemKeyDown(item, draggableProps);
   const ctx = useContext(TreeViewContext);
   const {
-    props: { disableIcons, rightAddons, onItemClick, onItemFocus, rowSize, labelOverflow },
-    relativeMouseCord,
+    props: {
+      disableIcons,
+      rightAddons,
+      onItemClick,
+      onItemFocus,
+      rowSize,
+      labelOverflow
+    },
     withRadioChecks,
     withCheckboxChecks,
     withDragAndDrop,
     selectedItem,
     selectedCheckboxes,
     hoverItem,
-    isDragging,
-    virtualListHelpers: { scrollToIndex },
+    virtualListHelpers: {
+      scrollToIndex
+    },
     setHoverItem,
     setSelectedItem,
     setFocusedItem
-  } = ctx;
-  const setItemRefs = (ref) => {
-    setMultipleRefs(virtualItemRef, nodeItemRef)(ref);
+  } = ctx; // Sortable Items needs to update
+  //   - the virtual list ref (for react-virtual requirement)
+  //   - nodeItemRef which is a prop avaiable in the TreeModel nodes
+  //   - the drag and drop node reference
+
+  const setItemRefs = ref => {
+    setMultipleRefs(virtualItemRef, !isDragOverlay && nodeItemRef, !isDragOverlay && draggableProps && draggableProps.setNodeRef)(ref);
   };
+
+  const dropIndicatorPosition = draggableProps && draggableProps.shouldShowDropIndicatorPosition && draggableProps.dropIndicatorPosition;
+  const isDropIndicatorPositionInside = dropIndicatorPosition === DropIndicatorPosition.Inside;
+  const isDragging = draggableProps && draggableProps.isDragging;
+  const isDropValid = draggableProps && draggableProps.isDropValid;
   const dropPreviewClassName = useMemo(() => {
-    if (!withDragAndDrop || !relativeMouseCord || !isDraggingOverThis)
-      return "";
-    const { isBefore, isAfter, isValid } = relativeMouseCord;
-    let className = `${DSTreeViewPrefix}-${treeItemBlockName}${isValid ? "--valid" : "--invalid"}`;
-    if (isBefore)
-      className += "-drop-before";
-    else if (isAfter)
-      className += "-drop-after";
-    else
-      className += "-drop-in";
-    return className;
-  }, [withDragAndDrop, relativeMouseCord, isDraggingOverThis]);
-  const selectedClassName = useMemo(() => selectedItem?.id === item.id ? "selected" : "", [item.id, selectedItem?.id]);
-  const hoverClassName = useMemo(() => hoverItem?.id !== item.id || withDragAndDrop && isDragging ? "" : "hover", [hoverItem?.id, item.id, withDragAndDrop, isDragging]);
+    if (isDropIndicatorPositionInside) {
+      const className = "".concat(DSTreeViewPrefix, "-").concat(treeItemBlockName).concat(isDropValid ? '--valid' : '--invalid', "-drop-in");
+      return className;
+    }
+
+    return '';
+  }, [isDropIndicatorPositionInside, isDropValid]);
+  const dragOverlayClassName = useMemo(() => isDragOverlay ? 'drag-overlay' : '', [isDragOverlay]);
+  const selectedClassName = useMemo(() => (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.id) === item.id && !isDragOverlay ? 'selected' : '', [isDragOverlay, item.id, selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.id]);
+  const hoverClassName = useMemo(() => !isDragOverlay && ((hoverItem === null || hoverItem === void 0 ? void 0 : hoverItem.id) === item.id || isDragging) ? 'hover' : '', [isDragOverlay, hoverItem === null || hoverItem === void 0 ? void 0 : hoverItem.id, item.id, isDragging]);
   const fixedHeightClassname = useMemo(() => {
-    if (labelOverflow === "truncate") {
-      if (rowSize === "compact")
-        return `${DSTreeViewPrefix}-${treeItemBlockName}--fixed-height-compact`;
-      return `${DSTreeViewPrefix}-${treeItemBlockName}--fixed-height`;
+    if (labelOverflow === 'truncate') {
+      if (rowSize === 'compact') return "".concat(DSTreeViewPrefix, "-").concat(treeItemBlockName, "--fixed-height-compact");
+      return "".concat(DSTreeViewPrefix, "-").concat(treeItemBlockName, "--fixed-height");
     }
-    return "";
+
+    return '';
   }, [labelOverflow, rowSize]);
-  const finalClassName = useMemo(() => `${dropPreviewClassName} ${fixedHeightClassname} ${selectedClassName} ${hoverClassName}`, [dropPreviewClassName, selectedClassName, hoverClassName, fixedHeightClassname]);
-  const handleItemClick = useCallback((e) => {
+  const finalClassName = useMemo(() => "".concat(dropPreviewClassName, " ").concat(fixedHeightClassname, " ").concat(selectedClassName, " ").concat(hoverClassName, " ").concat(dragOverlayClassName), [dropPreviewClassName, selectedClassName, hoverClassName, fixedHeightClassname, dragOverlayClassName]);
+  const handleItemClick = useCallback(e => {
     onItemClick(item, e);
     setFocusedItem(item);
     setSelectedItem(item);
-    const itemVirtualIndex = typeof item.virtualIndex === "number" ? item.virtualIndex : -1;
+    const itemVirtualIndex = typeof item.virtualIndex === 'number' ? item.virtualIndex : -1;
     onItemFocus({
       itemIndex: itemVirtualIndex,
-      scrollToItem: (opts = { align: "start" }) => scrollToIndex(itemVirtualIndex, opts),
+      scrollToItem: function () {
+        let opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
+          align: 'start'
+        };
+        return scrollToIndex(itemVirtualIndex, opts);
+      },
       item
     });
   }, [item, scrollToIndex, onItemClick, onItemFocus, setSelectedItem, setFocusedItem]);
-  return /* @__PURE__ */ React2.createElement(TreeListItem, {
+  return /*#__PURE__*/jsxs(TreeListItem, {
     tabIndex: 0,
-    onMouseMove: (event) => {
-      if (withDragAndDrop && onMouseDragOverItem) {
-        onMouseDragOverItem({
-          event,
-          item,
-          itemIndex,
-          setIsDraggingOverThis,
-          openFolderOnHoverTimeout
-        });
-      }
-    },
     onMouseLeave: () => {
-      if (withDragAndDrop) {
-        setIsDraggingOverThis(false);
-        if (openFolderOnHoverTimeout?.current)
-          clearTimeout(openFolderOnHoverTimeout.current);
-      }
-      if (hoverItem?.id === item.id) {
+      if ((hoverItem === null || hoverItem === void 0 ? void 0 : hoverItem.id) === item.id) {
         setHoverItem(null);
       }
     },
@@ -125,38 +135,39 @@ const TreeItem = (props) => {
       setHoverItem(item);
     },
     onClick: handleItemClick,
+    onBlur: () => setFocusedItem(null),
     ref: setItemRefs,
-    style: { ...itemWrapperStyle },
+    style: _objectSpread({}, itemWrapperStyle),
     className: finalClassName,
     "aria-expanded": !!item.isExpanded,
     "aria-selected": !!selectedCheckboxes[item.id],
     "data-id": item.id,
     "data-index": item.virtualIndex,
-    onKeyDown: onItemKeyDown
-  }, /* @__PURE__ */ React2.createElement(TreeListItemAddonsWrapper, null, withDragAndDrop ? /* @__PURE__ */ React2.createElement(DnDHandle, {
-    id
-  }) : null, withRadioChecks ? /* @__PURE__ */ React2.createElement(RadioSelectable, {
-    item,
-    itemIndex
-  }) : null, withCheckboxChecks ? /* @__PURE__ */ React2.createElement(CheckboxSelectable, {
-    item,
-    itemIndex
-  }) : null, /* @__PURE__ */ React2.createElement(NestingSpace, {
-    item,
-    spaceForNestingLevel
-  }), /* @__PURE__ */ React2.createElement(ExpandCaret, {
-    item
-  }), !disableIcons ? /* @__PURE__ */ React2.createElement(Icon, {
-    item
-  }) : null), /* @__PURE__ */ React2.createElement(TreeItemText, {
-    item
-  }), rightAddons && /* @__PURE__ */ React2.createElement(TreeListItemAddonsWrapper, null, typeof rightAddons === "function" ? rightAddons(item) : rightAddons));
-};
-const DragAndDropTreeItem = SortableElement(TreeItem);
-export {
-  DragAndDropTreeItem,
-  TreeItem,
-  TreeListItem,
-  TreeListItemAddonsWrapper
+    onKeyDown: onItemKeyDown,
+    children: [/*#__PURE__*/_jsx(TreeListItemAddonsWrapper, {}, void 0, withDragAndDrop ? /*#__PURE__*/_jsx(DnDHandle, {
+      id: id,
+      isDragOverlay: isDragOverlay
+    }) : null, withRadioChecks && !isDragOverlay ? /*#__PURE__*/_jsx(RadioSelectable, {
+      item: item,
+      itemIndex: itemIndex
+    }) : null, withCheckboxChecks && !isDragOverlay ? /*#__PURE__*/_jsx(CheckboxSelectable, {
+      item: item,
+      itemIndex: itemIndex
+    }) : null, !isDragOverlay && /*#__PURE__*/_jsx(NestingSpace, {
+      item: item,
+      spaceForNestingLevel: spaceForNestingLevel
+    }), !isDragOverlay && /*#__PURE__*/_jsx(ExpandCaret, {
+      item: item
+    }), !disableIcons ? /*#__PURE__*/_jsx(Icon, {
+      item: item
+    }) : null), /*#__PURE__*/_jsx(TreeItemText, {
+      item: item
+    }), rightAddons && /*#__PURE__*/_jsx(TreeListItemAddonsWrapper, {}, void 0, typeof rightAddons === 'function' ? rightAddons(item) : rightAddons), /*#__PURE__*/_jsx(DropIndicator, {
+      dropIndicatorPosition: dropIndicatorPosition,
+      isDropValid: isDropValid
+    })]
+  });
 };
-//# sourceMappingURL=TreeItem.js.map
+var TreeItem$1 = withDnDSortableItemContext(TreeItem);
+
+export { TreeItem, TreeListItem, TreeListItemAddonsWrapper, TreeItem$1 as default };

package/esm/parts/TreeItemText.js

@@ -1,72 +1,99 @@
-import * as React from "react";
-import React2, { useMemo, useContext } from "react";
-import Highlighter from "react-highlight-words";
-import { SimpleTruncatedTooltipText } from "@elliemae/ds-truncated-tooltip-text";
-import { aggregatedClasses } from "@elliemae/ds-classnames";
-import { ChildrenCountDisplayer } from "./ChildrenCountDisplayer";
-import { DSTreeViewPrefix, treeItemBlockName } from "../config/cssClassesConstants";
-import TreeViewContext from "../TreeViewContext";
-const ItemContent = aggregatedClasses("div")(`${treeItemBlockName}-content`);
-const ItemValue = aggregatedClasses("span")(treeItemBlockName, "value");
-const classNameModifierWrapAll = `${DSTreeViewPrefix}-${treeItemBlockName}__value--wrap-all`;
-const classNameModifierTruncate = `${DSTreeViewPrefix}-${treeItemBlockName}__value--truncate`;
-const CustomHighlight = ({ children }) => /* @__PURE__ */ React2.createElement("mark", {
-  className: "tree-text-highlight",
-  "data-testid": "tree-text-highlight"
-}, children);
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import { useContext, useMemo } from 'react';
+import Highlighter from 'react-highlight-words';
+import { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';
+import { aggregatedClasses } from '@elliemae/ds-classnames';
+import { ChildrenCountDisplayer } from './ChildrenCountDisplayer.js';
+import { treeItemBlockName, DSTreeViewPrefix } from '../config/cssClassesConstants.js';
+import TreeViewContext from '../TreeViewContext.js';
+import { jsxs, Fragment } from 'react/jsx-runtime';
+
+const ItemContent = aggregatedClasses('div')("".concat(treeItemBlockName, "-content"));
+const ItemValue = aggregatedClasses('span')(treeItemBlockName, 'value'); // const wrapperClassName = `${DSTreeViewPrefix}-${treeItemBlockName}-content`;
+
+const classNameModifierWrapAll = "".concat(DSTreeViewPrefix, "-").concat(treeItemBlockName, "__value--wrap-all");
+const classNameModifierTruncate = "".concat(DSTreeViewPrefix, "-").concat(treeItemBlockName, "__value--truncate"); // eslint-disable-next-line react/prop-types
+
+const CustomHighlight = _ref => {
+  let {
+    children
+  } = _ref;
+  return /*#__PURE__*/_jsx("mark", {
+    className: "tree-text-highlight",
+    "data-testid": "tree-text-highlight"
+  }, void 0, children);
+};
+
 function TreeItemText(props) {
-  const { item } = props;
+  var _ChildrenCountDisplay, _ChildrenCountDisplay2, _ChildrenCountDisplay3, _ChildrenCountDisplay4;
+
+  const {
+    item
+  } = props;
   const ctx = useContext(TreeViewContext);
   const {
-    props: { searchQuery, showChildrenAmount, labelOverflow, nameKey }
+    props: {
+      searchQuery,
+      showChildrenAmount,
+      labelOverflow,
+      nameKey
+    }
   } = ctx;
   const Text = useMemo(() => {
     const itemLabelText = item[nameKey];
+
     if (searchQuery) {
-      if (labelOverflow === "truncate") {
-        return /* @__PURE__ */ React2.createElement(SimpleTruncatedTooltipText, {
-          value: /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(Highlighter, {
-            autoEscape: true,
-            highlightTag: CustomHighlight,
-            searchWords: [searchQuery],
-            textToHighlight: itemLabelText
-          }), showChildrenAmount ? /* @__PURE__ */ React2.createElement(ChildrenCountDisplayer, {
-            item
-          }) : null)
+      if (labelOverflow === 'truncate') {
+        return /*#__PURE__*/_jsx(SimpleTruncatedTooltipText, {
+          value: /*#__PURE__*/jsxs(Fragment, {
+            children: [/*#__PURE__*/_jsx(Highlighter, {
+              autoEscape: true,
+              highlightTag: CustomHighlight,
+              searchWords: [searchQuery],
+              textToHighlight: itemLabelText
+            }), showChildrenAmount ? _ChildrenCountDisplay || (_ChildrenCountDisplay = /*#__PURE__*/_jsx(ChildrenCountDisplayer, {
+              item: item
+            })) : null]
+          })
         });
       }
-      return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(Highlighter, {
-        autoEscape: true,
-        highlightTag: CustomHighlight,
-        searchWords: [searchQuery],
-        textToHighlight: itemLabelText
-      }), showChildrenAmount ? /* @__PURE__ */ React2.createElement(ChildrenCountDisplayer, {
-        item
-      }) : null);
+
+      return /*#__PURE__*/jsxs(Fragment, {
+        children: [/*#__PURE__*/_jsx(Highlighter, {
+          autoEscape: true,
+          highlightTag: CustomHighlight,
+          searchWords: [searchQuery],
+          textToHighlight: itemLabelText
+        }), showChildrenAmount ? _ChildrenCountDisplay2 || (_ChildrenCountDisplay2 = /*#__PURE__*/_jsx(ChildrenCountDisplayer, {
+          item: item
+        })) : null]
+      });
     }
-    if (labelOverflow === "truncate") {
-      return /* @__PURE__ */ React2.createElement(SimpleTruncatedTooltipText, {
-        value: /* @__PURE__ */ React2.createElement(React2.Fragment, null, itemLabelText, showChildrenAmount ? /* @__PURE__ */ React2.createElement(ChildrenCountDisplayer, {
-          item
-        }) : null)
+
+    if (labelOverflow === 'truncate') {
+      return /*#__PURE__*/_jsx(SimpleTruncatedTooltipText, {
+        value: /*#__PURE__*/jsxs(Fragment, {
+          children: [itemLabelText, showChildrenAmount ? _ChildrenCountDisplay3 || (_ChildrenCountDisplay3 = /*#__PURE__*/_jsx(ChildrenCountDisplayer, {
+            item: item
+          })) : null]
+        })
       });
     }
-    return /* @__PURE__ */ React2.createElement(React2.Fragment, null, itemLabelText, showChildrenAmount ? /* @__PURE__ */ React2.createElement(ChildrenCountDisplayer, {
-      item
-    }) : null);
+
+    return /*#__PURE__*/jsxs(Fragment, {
+      children: [itemLabelText, showChildrenAmount ? _ChildrenCountDisplay4 || (_ChildrenCountDisplay4 = /*#__PURE__*/_jsx(ChildrenCountDisplayer, {
+        item: item
+      })) : null]
+    });
   }, [item, searchQuery, nameKey, showChildrenAmount, labelOverflow]);
-  let className = "";
-  if (labelOverflow === "wrap-all")
-    className += `${classNameModifierWrapAll} `;
-  if (labelOverflow === "truncate")
-    className += `${classNameModifierTruncate} `;
-  return /* @__PURE__ */ React2.createElement(ItemContent, {
-    "data-testid": `${treeItemBlockName}-content`
-  }, /* @__PURE__ */ React2.createElement(ItemValue, {
-    className
-  }, Text));
+  let className = '';
+  if (labelOverflow === 'wrap-all') className += "".concat(classNameModifierWrapAll, " ");
+  if (labelOverflow === 'truncate') className += "".concat(classNameModifierTruncate, " ");
+  return /*#__PURE__*/_jsx(ItemContent, {
+    "data-testid": "".concat(treeItemBlockName, "-content")
+  }, void 0, /*#__PURE__*/_jsx(ItemValue, {
+    className: className
+  }, void 0, Text));
 }
-export {
-  TreeItemText
-};
-//# sourceMappingURL=TreeItemText.js.map
+
+export { TreeItemText };