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

package/cjs/parts/NestingSpace.js

@@ -1,47 +1,55 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _jsx = require('@babel/runtime/helpers/jsx');
-require('react');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
-
+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 NestingSpace_exports = {};
+__export(NestingSpace_exports, {
+  NestingSpace: () => NestingSpace
+});
+var React = __toESM(require("react"));
+var import_react = __toESM(require("react"));
 const getItemNestingLeftPadding = (level, opts) => {
-  const {
-    spaceForNestingLevel = 1.5
-  } = opts;
+  const { spaceForNestingLevel = 1.5 } = opts;
   const groupLeftPadding = spaceForNestingLevel * (level - 1);
-  const finalLeftPadding = groupLeftPadding + spaceForNestingLevel - 0.1; // root level left-padding would be negative and would not be applied
-  // if "root-level" nesting, then defaults to 0 left-padding.
-
-  return finalLeftPadding > 0 ? "".concat(finalLeftPadding, "em") : '0';
+  const finalLeftPadding = groupLeftPadding + spaceForNestingLevel - 0.1;
+  return finalLeftPadding > 0 ? `${finalLeftPadding}em` : "0";
 };
-
-const NestingSpace = props => {
-  const {
-    item,
-    spaceForNestingLevel
-  } = props;
-  const {
-    treeDepth
-  } = item;
-
+const NestingSpace = (props) => {
+  const { item, spaceForNestingLevel } = props;
+  const { treeDepth } = item;
   if (treeDepth) {
     const itemNestingLeftPadding = getItemNestingLeftPadding(treeDepth - 1, {
       spaceForNestingLevel
     });
-    return /*#__PURE__*/_jsx__default["default"]("div", {
+    return /* @__PURE__ */ import_react.default.createElement("div", {
       "data-testid": "tree-item-nested-space",
-      style: {
-        width: itemNestingLeftPadding
-      }
+      style: { width: itemNestingLeftPadding }
     });
   }
-
   return null;
 };
-
-exports.NestingSpace = NestingSpace;
+module.exports = __toCommonJS(NestingSpace_exports);
+//# sourceMappingURL=NestingSpace.js.map

package/cjs/parts/NestingSpace.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/parts/NestingSpace.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import React from 'react';\nimport type { DSTreeviewT } from '../react-desc-prop-types';\n\nconst getItemNestingLeftPadding = (level: number, opts: { spaceForNestingLevel: number }) => {\n  const { spaceForNestingLevel = 1.5 } = opts;\n  const groupLeftPadding = spaceForNestingLevel * (level - 1);\n  const finalLeftPadding = groupLeftPadding + spaceForNestingLevel - 0.1;\n  // root level left-padding would be negative and would not be applied\n  // if \"root-level\" nesting, then defaults to 0 left-padding.\n  return finalLeftPadding > 0 ? `${finalLeftPadding}em` : '0';\n};\n\ntype NestingSpacePropsType = {\n  item: DSTreeviewT.Item;\n  spaceForNestingLevel: number;\n};\n\nexport const NestingSpace = (props: NestingSpacePropsType): JSX.Element | null => {\n  const { item, spaceForNestingLevel } = props;\n  const { treeDepth } = item;\n  if (treeDepth) {\n    const itemNestingLeftPadding = getItemNestingLeftPadding(treeDepth - 1, {\n      spaceForNestingLevel,\n    });\n\n    return <div data-testid=\"tree-item-nested-space\" style={{ width: itemNestingLeftPadding }} />;\n  }\n  return null;\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAGlB,MAAM,4BAA4B,CAAC,OAAe,SAA2C;AAC3F,QAAM,EAAE,uBAAuB,QAAQ;AACvC,QAAM,mBAAmB,uBAAwB,SAAQ;AACzD,QAAM,mBAAmB,mBAAmB,uBAAuB;AAGnE,SAAO,mBAAmB,IAAI,GAAG,uBAAuB;AAAA;AAQnD,MAAM,eAAe,CAAC,UAAqD;AAChF,QAAM,EAAE,MAAM,yBAAyB;AACvC,QAAM,EAAE,cAAc;AACtB,MAAI,WAAW;AACb,UAAM,yBAAyB,0BAA0B,YAAY,GAAG;AAAA,MACtE;AAAA;AAGF,WAAO,mDAAC,OAAD;AAAA,MAAK,eAAY;AAAA,MAAyB,OAAO,EAAE,OAAO;AAAA;AAAA;AAEnE,SAAO;AAAA;",
+  "names": []
+}

package/cjs/parts/RadioSelectable.js

@@ -1,51 +1,65 @@
-'use strict';
-
-var _jsx = require('@babel/runtime/helpers/jsx');
-var React = require('react');
-var dsForm = require('@elliemae/ds-form');
-var TreeViewContext = require('../TreeViewContext.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
-
+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 RadioSelectable_exports = {};
+__export(RadioSelectable_exports, {
+  default: () => RadioSelectable_default
+});
+var React = __toESM(require("react"));
+var import_react = __toESM(require("react"));
+var import_ds_form = require("@elliemae/ds-form");
+var import_TreeViewContext = __toESM(require("../TreeViewContext"));
 function RadioSelectable(props) {
+  const { item, itemIndex } = props;
+  const ctx = (0, import_react.useContext)(import_TreeViewContext.default);
   const {
-    item,
-    itemIndex
-  } = props;
-  const ctx = React.useContext(TreeViewContext["default"]);
-  const {
-    props: {
-      onSelectionChange,
-      isItemDisabled
-    },
-    virtualListHelpers: {
-      scrollToIndex
-    },
+    props: { onSelectionChange, isItemDisabled },
+    virtualListHelpers: { scrollToIndex },
     uniqueTreeViewUUID,
     selectedCheckboxes,
     setSelectedCheckboxes
   } = ctx;
-  const {
-    id
-  } = item;
-  const onRadioChange = React.useCallback(() => {
-    const newSelectionHasmap = {
-      [id]: true
-    };
+  const { id } = item;
+  const onRadioChange = (0, import_react.useCallback)(() => {
+    const newSelectionHasmap = { [id]: true };
     setSelectedCheckboxes(newSelectionHasmap);
     const indexAndScrollTo = {
       scrollToItem: () => {
-        if (item.virtualIndex) scrollToIndex(item.virtualIndex);
+        if (item.virtualIndex)
+          scrollToIndex(item.virtualIndex);
       },
       itemIndex
     };
-    if (onSelectionChange) onSelectionChange(newSelectionHasmap, item, indexAndScrollTo);
+    if (onSelectionChange)
+      onSelectionChange(newSelectionHasmap, item, indexAndScrollTo);
   }, [id, setSelectedCheckboxes, itemIndex, onSelectionChange, item, scrollToIndex]);
-  const radioName = React.useMemo(() => "radios-".concat(uniqueTreeViewUUID), [uniqueTreeViewUUID]);
-  const isDisabled = React.useMemo(() => isItemDisabled(item), [item, isItemDisabled]);
-  return /*#__PURE__*/_jsx__default["default"](dsForm.DSRadio, {
+  const radioName = (0, import_react.useMemo)(() => `radios-${uniqueTreeViewUUID}`, [uniqueTreeViewUUID]);
+  const isDisabled = (0, import_react.useMemo)(() => isItemDisabled(item), [item, isItemDisabled]);
+  return /* @__PURE__ */ import_react.default.createElement(import_ds_form.DSRadio, {
     checked: selectedCheckboxes[id] === true,
     name: radioName,
     disabled: isDisabled,
@@ -55,5 +69,6 @@ function RadioSelectable(props) {
     tabIndex: 0
   });
 }
-
-module.exports = RadioSelectable;
+var RadioSelectable_default = RadioSelectable;
+module.exports = __toCommonJS(RadioSelectable_exports);
+//# sourceMappingURL=RadioSelectable.js.map

package/cjs/parts/RadioSelectable.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/parts/RadioSelectable.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import React, { useContext, useCallback, useMemo } from 'react';\nimport { DSRadio } from '@elliemae/ds-form';\nimport TreeViewContext from '../TreeViewContext';\nimport type { DSTreeviewT } from '../react-desc-prop-types';\ninterface PropsT {\n  item: DSTreeviewT.Item;\n  itemIndex: number;\n}\nfunction RadioSelectable(props: PropsT) {\n  const { item, itemIndex } = props;\n\n  const ctx = useContext(TreeViewContext);\n  const {\n    props: { onSelectionChange, isItemDisabled },\n    virtualListHelpers: { scrollToIndex },\n    uniqueTreeViewUUID,\n    selectedCheckboxes,\n    setSelectedCheckboxes,\n  } = ctx;\n\n  const { id } = item;\n\n  const onRadioChange = useCallback(() => {\n    const newSelectionHasmap = { [id]: true };\n    setSelectedCheckboxes(newSelectionHasmap);\n    const indexAndScrollTo = {\n      scrollToItem: () => {\n        if (item.virtualIndex) scrollToIndex(item.virtualIndex);\n      },\n      itemIndex,\n    };\n    if (onSelectionChange) onSelectionChange(newSelectionHasmap, item, indexAndScrollTo);\n  }, [id, setSelectedCheckboxes, itemIndex, onSelectionChange, item, scrollToIndex]);\n\n  const radioName = useMemo(() => `radios-${uniqueTreeViewUUID}`, [uniqueTreeViewUUID]);\n\n  const isDisabled = useMemo(() => isItemDisabled(item), [item, isItemDisabled]);\n\n  return (\n    <DSRadio\n      checked={selectedCheckboxes[id] === true}\n      name={radioName}\n      disabled={isDisabled}\n      className=\"em-ds-tree-item-radio\"\n      data-testid=\"tree-item-radio\"\n      onChange={onRadioChange}\n      tabIndex={0}\n    />\n  );\n}\n\nexport default RadioSelectable;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAwD;AACxD,qBAAwB;AACxB,6BAA4B;AAM5B,yBAAyB,OAAe;AACtC,QAAM,EAAE,MAAM,cAAc;AAE5B,QAAM,MAAM,6BAAW;AACvB,QAAM;AAAA,IACJ,OAAO,EAAE,mBAAmB;AAAA,IAC5B,oBAAoB,EAAE;AAAA,IACtB;AAAA,IACA;AAAA,IACA;AAAA,MACE;AAEJ,QAAM,EAAE,OAAO;AAEf,QAAM,gBAAgB,8BAAY,MAAM;AACtC,UAAM,qBAAqB,GAAG,KAAK;AACnC,0BAAsB;AACtB,UAAM,mBAAmB;AAAA,MACvB,cAAc,MAAM;AAClB,YAAI,KAAK;AAAc,wBAAc,KAAK;AAAA;AAAA,MAE5C;AAAA;AAEF,QAAI;AAAmB,wBAAkB,oBAAoB,MAAM;AAAA,KAClE,CAAC,IAAI,uBAAuB,WAAW,mBAAmB,MAAM;AAEnE,QAAM,YAAY,0BAAQ,MAAM,UAAU,sBAAsB,CAAC;AAEjE,QAAM,aAAa,0BAAQ,MAAM,eAAe,OAAO,CAAC,MAAM;AAE9D,SACE,mDAAC,wBAAD;AAAA,IACE,SAAS,mBAAmB,QAAQ;AAAA,IACpC,MAAM;AAAA,IACN,UAAU;AAAA,IACV,WAAU;AAAA,IACV,eAAY;AAAA,IACZ,UAAU;AAAA,IACV,UAAU;AAAA;AAAA;AAKhB,IAAO,0BAAQ;",
+  "names": []
+}

package/cjs/parts/TreeItem.js

@@ -1,142 +1,157 @@
-'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 dsClassnames = require('@elliemae/ds-classnames');
-var RadioSelectable = require('./RadioSelectable.js');
-var CheckboxSelectable = require('./CheckboxSelectable.js');
-var TreeViewContext = require('../TreeViewContext.js');
-var refsHelpers = require('../utils/refs-helpers.js');
-var keyboardHelpers = require('../utils/keyboard-helpers.js');
-var NestingSpace = require('./NestingSpace.js');
-var Icon = require('./Icon.js');
-var ExpandCaret = require('./ExpandCaret.js');
-var TreeItemText = require('./TreeItemText.js');
-var cssClassesConstants = require('../config/cssClassesConstants.js');
-var DnDHandle = require('./DnDHandle.js');
-var WithDnDSortableItemContext = require('../hoc/WithDnDSortableItemContext.js');
-var SortableItemContext = require('../hoc/SortableItemContext.js');
-var DropIndicator = require('./DropIndicator.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 TreeListItem = dsClassnames.aggregatedClasses('li', {
-  'data-testid': cssClassesConstants.treeItemBlockName,
-  role: 'treeitem' // temp fix untill we move to styled components
-
-})(cssClassesConstants.treeItemBlockName);
-const TreeListItemAddonsWrapper = dsClassnames.aggregatedClasses('div')(cssClassesConstants.treeItemBlockName, 'addons' // temp fix untill we move to styled components
-);
-const TreeItem = props => {
+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 TreeItem_exports = {};
+__export(TreeItem_exports, {
+  DragAndDropTreeItem: () => DragAndDropTreeItem,
+  TreeItem: () => TreeItem,
+  TreeListItem: () => TreeListItem,
+  TreeListItemAddonsWrapper: () => TreeListItemAddonsWrapper
+});
+var React = __toESM(require("react"));
+var import_react = __toESM(require("react"));
+var import_react_sortable_hoc = require("@elliemae/react-sortable-hoc");
+var import_ds_classnames = require("@elliemae/ds-classnames");
+var import_ds_icons = require("@elliemae/ds-icons");
+var import_RadioSelectable = __toESM(require("./RadioSelectable"));
+var import_CheckboxSelectable = __toESM(require("./CheckboxSelectable"));
+var import_TreeViewContext = __toESM(require("../TreeViewContext"));
+var import_refs_helpers = require("../utils/refs-helpers");
+var import_keyboard_helpers = require("../utils/keyboard-helpers");
+var import_NestingSpace = require("./NestingSpace");
+var import_Icon = require("./Icon");
+var import_ExpandCaret = require("./ExpandCaret");
+var import_TreeItemText = require("./TreeItemText");
+var import_cssClassesConstants = require("../config/cssClassesConstants");
+const TreeListItem = (0, import_ds_classnames.aggregatedClasses)("li", {
+  "data-testid": import_cssClassesConstants.treeItemBlockName,
+  role: "treeitem"
+})(import_cssClassesConstants.treeItemBlockName);
+const TreeListItemAddonsWrapper = (0, import_ds_classnames.aggregatedClasses)("div")(import_cssClassesConstants.treeItemBlockName, "addons");
+const DnDHandle = (0, import_react_sortable_hoc.SortableHandle)(({ id }) => /* @__PURE__ */ import_react.default.createElement(import_ds_icons.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 {
     item,
     itemIndex,
     itemWrapperStyle = {},
     virtualItemRef,
     spaceForNestingLevel = 1.5,
-    isDragOverlay = false
+    onMouseDragOverItem
   } = props;
+  const { id, node } = item;
+  const { nodeItemRef } = node.model;
+  const openFolderOnHoverTimeout = (0, import_react.useRef)(null);
+  const [isDraggingOverThis, setIsDraggingOverThis] = (0, import_react.useState)(false);
+  const onItemKeyDown = (0, import_keyboard_helpers.useOnItemKeyDown)(item);
+  const ctx = (0, import_react.useContext)(import_TreeViewContext.default);
   const {
-    id,
-    node
-  } = item;
-  const {
-    nodeItemRef
-  } = node.model;
-  const {
-    draggableProps
-  } = React.useContext(SortableItemContext.SortableItemContext);
-  const onItemKeyDown = keyboardHelpers.useOnItemKeyDown(item, draggableProps);
-  const ctx = React.useContext(TreeViewContext["default"]);
-  const {
-    props: {
-      disableIcons,
-      rightAddons,
-      onItemClick,
-      onItemFocus,
-      rowSize,
-      labelOverflow
-    },
+    props: { disableIcons, rightAddons, onItemClick, onItemFocus, rowSize, labelOverflow },
+    relativeMouseCord,
     withRadioChecks,
     withCheckboxChecks,
     withDragAndDrop,
     selectedItem,
     selectedCheckboxes,
     hoverItem,
-    virtualListHelpers: {
-      scrollToIndex
-    },
+    isDragging,
+    virtualListHelpers: { scrollToIndex },
     setHoverItem,
     setSelectedItem,
     setFocusedItem
-  } = 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 => {
-    refsHelpers.setMultipleRefs(virtualItemRef, !isDragOverlay && nodeItemRef, !isDragOverlay && draggableProps && draggableProps.setNodeRef)(ref);
+  } = ctx;
+  const setItemRefs = (ref) => {
+    (0, import_refs_helpers.setMultipleRefs)(virtualItemRef, nodeItemRef)(ref);
   };
-
-  const dropIndicatorPosition = draggableProps && draggableProps.shouldShowDropIndicatorPosition && draggableProps.dropIndicatorPosition;
-  const isDropIndicatorPositionInside = dropIndicatorPosition === SortableItemContext.DropIndicatorPosition.Inside;
-  const isDragging = draggableProps && draggableProps.isDragging;
-  const isDropValid = draggableProps && draggableProps.isDropValid;
-  const dropPreviewClassName = React.useMemo(() => {
-    if (isDropIndicatorPositionInside) {
-      const className = "".concat(cssClassesConstants.DSTreeViewPrefix, "-").concat(cssClassesConstants.treeItemBlockName).concat(isDropValid ? '--valid' : '--invalid', "-drop-in");
-      return className;
-    }
-
-    return '';
-  }, [isDropIndicatorPositionInside, isDropValid]);
-  const dragOverlayClassName = React.useMemo(() => isDragOverlay ? 'drag-overlay' : '', [isDragOverlay]);
-  const selectedClassName = React.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 = React.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 = React.useMemo(() => {
-    if (labelOverflow === 'truncate') {
-      if (rowSize === 'compact') return "".concat(cssClassesConstants.DSTreeViewPrefix, "-").concat(cssClassesConstants.treeItemBlockName, "--fixed-height-compact");
-      return "".concat(cssClassesConstants.DSTreeViewPrefix, "-").concat(cssClassesConstants.treeItemBlockName, "--fixed-height");
+  const dropPreviewClassName = (0, import_react.useMemo)(() => {
+    if (!withDragAndDrop || !relativeMouseCord || !isDraggingOverThis)
+      return "";
+    const { isBefore, isAfter, isValid } = relativeMouseCord;
+    let className = `${import_cssClassesConstants.DSTreeViewPrefix}-${import_cssClassesConstants.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 = (0, import_react.useMemo)(() => selectedItem?.id === item.id ? "selected" : "", [item.id, selectedItem?.id]);
+  const hoverClassName = (0, import_react.useMemo)(() => hoverItem?.id !== item.id || withDragAndDrop && isDragging ? "" : "hover", [hoverItem?.id, item.id, withDragAndDrop, isDragging]);
+  const fixedHeightClassname = (0, import_react.useMemo)(() => {
+    if (labelOverflow === "truncate") {
+      if (rowSize === "compact")
+        return `${import_cssClassesConstants.DSTreeViewPrefix}-${import_cssClassesConstants.treeItemBlockName}--fixed-height-compact`;
+      return `${import_cssClassesConstants.DSTreeViewPrefix}-${import_cssClassesConstants.treeItemBlockName}--fixed-height`;
     }
-
-    return '';
+    return "";
   }, [labelOverflow, rowSize]);
-  const finalClassName = React.useMemo(() => "".concat(dropPreviewClassName, " ").concat(fixedHeightClassname, " ").concat(selectedClassName, " ").concat(hoverClassName, " ").concat(dragOverlayClassName), [dropPreviewClassName, selectedClassName, hoverClassName, fixedHeightClassname, dragOverlayClassName]);
-  const handleItemClick = React.useCallback(e => {
+  const finalClassName = (0, import_react.useMemo)(() => `${dropPreviewClassName} ${fixedHeightClassname} ${selectedClassName} ${hoverClassName}`, [dropPreviewClassName, selectedClassName, hoverClassName, fixedHeightClassname]);
+  const handleItemClick = (0, import_react.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: function () {
-        let opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
-          align: 'start'
-        };
-        return scrollToIndex(itemVirtualIndex, opts);
-      },
+      scrollToItem: (opts = { align: "start" }) => scrollToIndex(itemVirtualIndex, opts),
       item
     });
   }, [item, scrollToIndex, onItemClick, onItemFocus, setSelectedItem, setFocusedItem]);
-  return /*#__PURE__*/jsxRuntime.jsxs(TreeListItem, {
+  return /* @__PURE__ */ import_react.default.createElement(TreeListItem, {
     tabIndex: 0,
+    onMouseMove: (event) => {
+      if (withDragAndDrop && onMouseDragOverItem) {
+        onMouseDragOverItem({
+          event,
+          item,
+          itemIndex,
+          setIsDraggingOverThis,
+          openFolderOnHoverTimeout
+        });
+      }
+    },
     onMouseLeave: () => {
-      if ((hoverItem === null || hoverItem === void 0 ? void 0 : hoverItem.id) === item.id) {
+      if (withDragAndDrop) {
+        setIsDraggingOverThis(false);
+        if (openFolderOnHoverTimeout?.current)
+          clearTimeout(openFolderOnHoverTimeout.current);
+      }
+      if (hoverItem?.id === item.id) {
         setHoverItem(null);
       }
     },
@@ -144,42 +159,33 @@ const TreeItem = props => {
       setHoverItem(item);
     },
     onClick: handleItemClick,
-    onBlur: () => setFocusedItem(null),
     ref: setItemRefs,
-    style: _objectSpread({}, itemWrapperStyle),
+    style: { ...itemWrapperStyle },
     className: finalClassName,
     "aria-expanded": !!item.isExpanded,
     "aria-selected": !!selectedCheckboxes[item.id],
     "data-id": item.id,
     "data-index": item.virtualIndex,
-    onKeyDown: onItemKeyDown,
-    children: [/*#__PURE__*/_jsx__default["default"](TreeListItemAddonsWrapper, {}, void 0, withDragAndDrop ? /*#__PURE__*/_jsx__default["default"](DnDHandle.DnDHandle, {
-      id: id,
-      isDragOverlay: isDragOverlay
-    }) : null, withRadioChecks && !isDragOverlay ? /*#__PURE__*/_jsx__default["default"](RadioSelectable, {
-      item: item,
-      itemIndex: itemIndex
-    }) : null, withCheckboxChecks && !isDragOverlay ? /*#__PURE__*/_jsx__default["default"](CheckboxSelectable, {
-      item: item,
-      itemIndex: itemIndex
-    }) : null, !isDragOverlay && /*#__PURE__*/_jsx__default["default"](NestingSpace.NestingSpace, {
-      item: item,
-      spaceForNestingLevel: spaceForNestingLevel
-    }), !isDragOverlay && /*#__PURE__*/_jsx__default["default"](ExpandCaret.ExpandCaret, {
-      item: item
-    }), !disableIcons ? /*#__PURE__*/_jsx__default["default"](Icon.Icon, {
-      item: item
-    }) : null), /*#__PURE__*/_jsx__default["default"](TreeItemText.TreeItemText, {
-      item: item
-    }), rightAddons && /*#__PURE__*/_jsx__default["default"](TreeListItemAddonsWrapper, {}, void 0, typeof rightAddons === 'function' ? rightAddons(item) : rightAddons), /*#__PURE__*/_jsx__default["default"](DropIndicator, {
-      dropIndicatorPosition: dropIndicatorPosition,
-      isDropValid: isDropValid
-    })]
-  });
+    onKeyDown: onItemKeyDown
+  }, /* @__PURE__ */ import_react.default.createElement(TreeListItemAddonsWrapper, null, withDragAndDrop ? /* @__PURE__ */ import_react.default.createElement(DnDHandle, {
+    id
+  }) : null, withRadioChecks ? /* @__PURE__ */ import_react.default.createElement(import_RadioSelectable.default, {
+    item,
+    itemIndex
+  }) : null, withCheckboxChecks ? /* @__PURE__ */ import_react.default.createElement(import_CheckboxSelectable.default, {
+    item,
+    itemIndex
+  }) : null, /* @__PURE__ */ import_react.default.createElement(import_NestingSpace.NestingSpace, {
+    item,
+    spaceForNestingLevel
+  }), /* @__PURE__ */ import_react.default.createElement(import_ExpandCaret.ExpandCaret, {
+    item
+  }), !disableIcons ? /* @__PURE__ */ import_react.default.createElement(import_Icon.Icon, {
+    item
+  }) : null), /* @__PURE__ */ import_react.default.createElement(import_TreeItemText.TreeItemText, {
+    item
+  }), rightAddons && /* @__PURE__ */ import_react.default.createElement(TreeListItemAddonsWrapper, null, typeof rightAddons === "function" ? rightAddons(item) : rightAddons));
 };
-var TreeItem$1 = WithDnDSortableItemContext.withDnDSortableItemContext(TreeItem);
-
-exports.TreeItem = TreeItem;
-exports.TreeListItem = TreeListItem;
-exports.TreeListItemAddonsWrapper = TreeListItemAddonsWrapper;
-exports["default"] = TreeItem$1;
+const DragAndDropTreeItem = (0, import_react_sortable_hoc.SortableElement)(TreeItem);
+module.exports = __toCommonJS(TreeItem_exports);
+//# sourceMappingURL=TreeItem.js.map

package/cjs/parts/TreeItem.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/parts/TreeItem.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* eslint-disable max-lines */\nimport React, { useContext, useState, useMemo, useRef, useCallback } from 'react';\nimport { SortableElement, SortableHandle } from '@elliemae/react-sortable-hoc';\n\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { GripperVertical } from '@elliemae/ds-icons';\n\nimport RadioSelectable from './RadioSelectable';\nimport CheckboxSelectable from './CheckboxSelectable';\nimport TreeViewContext from '../TreeViewContext';\nimport { setMultipleRefs } from '../utils/refs-helpers';\nimport { useOnItemKeyDown } from '../utils/keyboard-helpers';\nimport { NestingSpace } from './NestingSpace';\nimport { Icon } from './Icon';\nimport { ExpandCaret } from './ExpandCaret';\nimport { TreeItemText } from './TreeItemText';\nimport { DSTreeViewPrefix, treeItemBlockName } from '../config/cssClassesConstants';\nimport type { DSTreeviewT } from '../react-desc-prop-types';\n\nexport const TreeListItem = aggregatedClasses('li', {\n  'data-testid': treeItemBlockName,\n  role: 'treeitem',\n  // temp fix untill we move to styled components\n})(treeItemBlockName) as unknown as React.ComponentType<React.ComponentProps<'li'>>;\n\nexport const TreeListItemAddonsWrapper = aggregatedClasses('div')(\n  treeItemBlockName,\n  'addons',\n  // temp fix untill we move to styled components\n) as unknown as React.ComponentType;\n\nconst DnDHandle = SortableHandle(({ id }: { id: DSTreeviewT.StringOrNum }) => (\n  <GripperVertical\n    data-testid=\"drag-handle\"\n    key={`${id}-drag-handle`}\n    className=\"drag-handle\"\n    size=\"s\"\n    onMouseDown={(e: React.MouseEvent) => {\n      // prevent focusing the drag-handle to avoid borders\n      if (e) {\n        e.preventDefault();\n      }\n    }}\n    tabIndex=\"0\"\n  />\n));\ninterface PropsT {\n  item: DSTreeviewT.Item;\n  itemIndex: number;\n  virtualItemRef: React.RefObject<HTMLLIElement>;\n  itemWrapperStyle?: { [key: string]: unknown };\n  spaceForNestingLevel?: number;\n  onMouseDragOverItem?: (opts: {\n    event: React.MouseEvent<HTMLLIElement>;\n    item: DSTreeviewT.Item;\n    itemIndex: number;\n    setIsDraggingOverThis: React.Dispatch<React.SetStateAction<boolean>>;\n    openFolderOnHoverTimeout: React.MutableRefObject<NodeJS.Timeout | null>;\n  }) => void;\n}\nexport const TreeItem = (props: PropsT): JSX.Element => {\n  const {\n    item,\n    itemIndex,\n    itemWrapperStyle = {},\n    virtualItemRef,\n    spaceForNestingLevel = 1.5,\n    onMouseDragOverItem,\n  } = props;\n  const { id, node } = item;\n  const { nodeItemRef } = node.model;\n  const openFolderOnHoverTimeout = useRef<NodeJS.Timeout | null>(null);\n\n  const [isDraggingOverThis, setIsDraggingOverThis] = useState(false);\n  const onItemKeyDown = useOnItemKeyDown(item);\n\n  const ctx = useContext(TreeViewContext);\n  const {\n    props: { disableIcons, rightAddons, onItemClick, onItemFocus, rowSize, labelOverflow },\n    relativeMouseCord,\n    withRadioChecks,\n    withCheckboxChecks,\n    withDragAndDrop,\n    selectedItem,\n    selectedCheckboxes,\n    hoverItem,\n    isDragging,\n    virtualListHelpers: { scrollToIndex },\n    setHoverItem,\n    setSelectedItem,\n    setFocusedItem,\n  } = ctx;\n\n  // Sortable Items needs to update\n  //   - the virtual list ref (for react-virtual requirement)\n  //   - nodeItemRef which is a prop avaiable in the TreeModel nodes\n  const setItemRefs: React.LegacyRef<HTMLLIElement> | undefined = (ref: HTMLLIElement) => {\n    setMultipleRefs(virtualItemRef, nodeItemRef)(ref);\n  };\n\n  const dropPreviewClassName = useMemo(() => {\n    if (!withDragAndDrop || !relativeMouseCord || !isDraggingOverThis) return '';\n    const { isBefore, isAfter, isValid } = relativeMouseCord;\n    let className = `${DSTreeViewPrefix}-${treeItemBlockName}${isValid ? '--valid' : '--invalid'}`;\n\n    if (isBefore) className += '-drop-before';\n    else if (isAfter) className += '-drop-after';\n    else className += '-drop-in';\n    return className;\n  }, [withDragAndDrop, relativeMouseCord, isDraggingOverThis]);\n\n  const selectedClassName = useMemo(\n    () => (selectedItem?.id === item.id ? 'selected' : ''),\n    [item.id, selectedItem?.id],\n  );\n  const hoverClassName = useMemo(\n    () => (hoverItem?.id !== item.id || (withDragAndDrop && isDragging) ? '' : 'hover'),\n    [hoverItem?.id, item.id, withDragAndDrop, isDragging],\n  );\n  const fixedHeightClassname = useMemo(() => {\n    if (labelOverflow === 'truncate') {\n      if (rowSize === 'compact') return `${DSTreeViewPrefix}-${treeItemBlockName}--fixed-height-compact`;\n      return `${DSTreeViewPrefix}-${treeItemBlockName}--fixed-height`;\n    }\n    return '';\n  }, [labelOverflow, rowSize]);\n\n  const finalClassName = useMemo(\n    () => `${dropPreviewClassName} ${fixedHeightClassname} ${selectedClassName} ${hoverClassName}`,\n    [dropPreviewClassName, selectedClassName, hoverClassName, fixedHeightClassname],\n  );\n\n  const handleItemClick = useCallback(\n    (e: React.MouseEvent<HTMLLIElement>) => {\n      onItemClick(item, e);\n      setFocusedItem(item);\n      setSelectedItem(item);\n      const itemVirtualIndex = typeof item.virtualIndex === 'number' ? item.virtualIndex : -1;\n      onItemFocus({\n        itemIndex: itemVirtualIndex,\n        scrollToItem: (opts = { align: 'start' }) => scrollToIndex(itemVirtualIndex, opts),\n        item,\n      });\n    },\n    [item, scrollToIndex, onItemClick, onItemFocus, setSelectedItem, setFocusedItem],\n  );\n\n  return (\n    <TreeListItem\n      tabIndex={0}\n      onMouseMove={(event) => {\n        if (withDragAndDrop && onMouseDragOverItem) {\n          onMouseDragOverItem({\n            event,\n            item,\n            itemIndex,\n            setIsDraggingOverThis,\n            openFolderOnHoverTimeout,\n          });\n        }\n      }}\n      onMouseLeave={() => {\n        if (withDragAndDrop) {\n          setIsDraggingOverThis(false);\n          if (openFolderOnHoverTimeout?.current) clearTimeout(openFolderOnHoverTimeout.current);\n        }\n        if (hoverItem?.id === item.id) {\n          setHoverItem(null);\n        }\n      }}\n      onMouseEnter={() => {\n        setHoverItem(item);\n      }}\n      onClick={handleItemClick}\n      ref={setItemRefs}\n      style={{ ...itemWrapperStyle }}\n      className={finalClassName}\n      aria-expanded={!!item.isExpanded}\n      aria-selected={!!selectedCheckboxes[item.id]}\n      data-id={item.id}\n      data-index={item.virtualIndex}\n      onKeyDown={onItemKeyDown}\n    >\n      <TreeListItemAddonsWrapper>\n        {withDragAndDrop ? <DnDHandle id={id} /> : null}\n        {withRadioChecks ? <RadioSelectable item={item} itemIndex={itemIndex} /> : null}\n        {withCheckboxChecks ? <CheckboxSelectable item={item} itemIndex={itemIndex} /> : null}\n        <NestingSpace item={item} spaceForNestingLevel={spaceForNestingLevel} />\n        <ExpandCaret item={item} />\n        {!disableIcons ? <Icon item={item} /> : null}\n      </TreeListItemAddonsWrapper>\n      <TreeItemText item={item} />\n      {rightAddons && (\n        <TreeListItemAddonsWrapper>\n          {typeof rightAddons === 'function' ? rightAddons(item) : rightAddons}\n        </TreeListItemAddonsWrapper>\n      )}\n    </TreeListItem>\n  );\n};\n\nexport const DragAndDropTreeItem = SortableElement(TreeItem);\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
+  "names": []
+}