@elliemae/ds-treeview 2.3.0-alpha.1 → 2.3.0-alpha.6

package/dist/cjs/parts/DropIndicator.js

@@ -0,0 +1,80 @@
+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 DropIndicator_exports = {};
+__export(DropIndicator_exports, {
+  default: () => DropIndicator_default
+});
+var React = __toESM(require("react"));
+var import_react = __toESM(require("react"));
+var import_styled_components = __toESM(require("styled-components"));
+var import_SortableItemContext = require("../hoc/SortableItemContext");
+const getPositionStyles = ({ dropIndicatorPosition }) => `
+      top: ${dropIndicatorPosition === import_SortableItemContext.DropIndicatorPosition.Before ? "0" : "unset"};
+      bottom: ${dropIndicatorPosition === import_SortableItemContext.DropIndicatorPosition.After ? "0" : "unset"};
+      left: -2px;
+    `;
+const getCircleStyles = ({ dropIndicatorPosition }) => ({
+  position: "absolute",
+  zIndex: 20,
+  top: dropIndicatorPosition === import_SortableItemContext.DropIndicatorPosition.After ? "unset" : "-2px",
+  bottom: dropIndicatorPosition === import_SortableItemContext.DropIndicatorPosition.Before ? "unset" : "-2px",
+  left: "0px",
+  opacity: 1
+});
+const StyledIndicator = import_styled_components.default.div`
+  position: absolute;
+  ${getPositionStyles}
+  box-sizing: border-box;
+  width: ${(props) => props.vertical ? "2px" : "100%"};
+  height: ${(props) => props.vertical ? "100%" : "2px"};
+  background-color: ${({ isDropValid, theme }) => isDropValid ? theme.colors.brand[600] : theme.colors.danger[900]};
+  z-index: 20;
+`;
+const CircleIndicator = (style, isDropValid) => /* @__PURE__ */ import_react.default.createElement("svg", {
+  height: "6",
+  width: "6",
+  style
+}, /* @__PURE__ */ import_react.default.createElement("circle", {
+  cx: "3",
+  cy: "3",
+  r: "3",
+  strokeWidth: "0",
+  fill: isDropValid ? "#1E79C2" : "#C64252"
+}));
+const DropIndicator = ({ dropIndicatorPosition, isLast, isDropValid }) => {
+  if (![import_SortableItemContext.DropIndicatorPosition.After, import_SortableItemContext.DropIndicatorPosition.Before].includes(dropIndicatorPosition))
+    return null;
+  const safeDropIndicatorPosition = isLast ? import_SortableItemContext.DropIndicatorPosition.Before : dropIndicatorPosition;
+  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, CircleIndicator(getCircleStyles({ dropIndicatorPosition: safeDropIndicatorPosition }), isDropValid), /* @__PURE__ */ import_react.default.createElement(StyledIndicator, {
+    dropIndicatorPosition: safeDropIndicatorPosition,
+    isDropValid
+  }));
+};
+var DropIndicator_default = DropIndicator;
+module.exports = __toCommonJS(DropIndicator_exports);
+//# sourceMappingURL=DropIndicator.js.map

package/dist/cjs/parts/DropIndicator.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/parts/DropIndicator.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import React from 'react';\nimport styled from 'styled-components';\nimport { DropIndicatorPosition } from '../hoc/SortableItemContext';\n\ninterface DropIndicatorProps {\n  vertical?: boolean;\n  dropIndicatorPosition: DropIndicatorPosition | false;\n  isLast?: boolean;\n  isDropValid?: boolean;\n}\n\nconst getPositionStyles = ({ dropIndicatorPosition }: DropIndicatorProps) => `\n      top: ${dropIndicatorPosition === DropIndicatorPosition.Before ? '0' : 'unset'};\n      bottom: ${dropIndicatorPosition === DropIndicatorPosition.After ? '0' : 'unset'};\n      left: -2px;\n    `;\n\nconst getCircleStyles = ({ dropIndicatorPosition }: DropIndicatorProps) => ({\n  position: 'absolute',\n  zIndex: 20,\n  top: dropIndicatorPosition === DropIndicatorPosition.After ? 'unset' : '-2px',\n  bottom: dropIndicatorPosition === DropIndicatorPosition.Before ? 'unset' : '-2px',\n  left: '0px',\n  opacity: 1,\n});\n\nconst StyledIndicator = styled.div<DropIndicatorProps>`\n  position: absolute;\n  ${getPositionStyles}\n  box-sizing: border-box;\n  width: ${(props) => (props.vertical ? '2px' : '100%')};\n  height: ${(props) => (props.vertical ? '100%' : '2px')};\n  background-color: ${({ isDropValid, theme }) => (isDropValid ? theme.colors.brand[600] : theme.colors.danger[900])};\n  z-index: 20;\n`;\n\nconst CircleIndicator = (style: Record<string, unknown>, isDropValid: boolean | null | undefined) => (\n  <svg height=\"6\" width=\"6\" style={style}>\n    <circle cx=\"3\" cy=\"3\" r=\"3\" strokeWidth=\"0\" fill={isDropValid ? '#1E79C2' : '#C64252'} />\n  </svg>\n);\n\nconst DropIndicator: React.ComponentType<DropIndicatorProps> = ({ dropIndicatorPosition, isLast, isDropValid }) => {\n  if (\n    ![DropIndicatorPosition.After, DropIndicatorPosition.Before].includes(\n      dropIndicatorPosition as DropIndicatorPosition,\n    )\n  )\n    return null;\n\n  const safeDropIndicatorPosition = isLast ? DropIndicatorPosition.Before : dropIndicatorPosition;\n\n  return (\n    <>\n      {CircleIndicator(getCircleStyles({ dropIndicatorPosition: safeDropIndicatorPosition }), isDropValid)}\n      <StyledIndicator dropIndicatorPosition={safeDropIndicatorPosition} isDropValid={isDropValid} />\n    </>\n  );\n};\n\nexport default DropIndicator;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,+BAAmB;AACnB,iCAAsC;AAStC,MAAM,oBAAoB,CAAC,EAAE,4BAAgD;AAAA,aAChE,0BAA0B,iDAAsB,SAAS,MAAM;AAAA,gBAC5D,0BAA0B,iDAAsB,QAAQ,MAAM;AAAA;AAAA;AAI9E,MAAM,kBAAkB,CAAC,EAAE,4BAAiD;AAAA,EAC1E,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,KAAK,0BAA0B,iDAAsB,QAAQ,UAAU;AAAA,EACvE,QAAQ,0BAA0B,iDAAsB,SAAS,UAAU;AAAA,EAC3E,MAAM;AAAA,EACN,SAAS;AAAA;AAGX,MAAM,kBAAkB,iCAAO;AAAA;AAAA,IAE3B;AAAA;AAAA,WAEO,CAAC,UAAW,MAAM,WAAW,QAAQ;AAAA,YACpC,CAAC,UAAW,MAAM,WAAW,SAAS;AAAA,sBAC5B,CAAC,EAAE,aAAa,YAAa,cAAc,MAAM,OAAO,MAAM,OAAO,MAAM,OAAO,OAAO;AAAA;AAAA;AAI/G,MAAM,kBAAkB,CAAC,OAAgC,gBACvD,mDAAC,OAAD;AAAA,EAAK,QAAO;AAAA,EAAI,OAAM;AAAA,EAAI;AAAA,GACxB,mDAAC,UAAD;AAAA,EAAQ,IAAG;AAAA,EAAI,IAAG;AAAA,EAAI,GAAE;AAAA,EAAI,aAAY;AAAA,EAAI,MAAM,cAAc,YAAY;AAAA;AAIhF,MAAM,gBAAyD,CAAC,EAAE,uBAAuB,QAAQ,kBAAkB;AACjH,MACE,CAAC,CAAC,iDAAsB,OAAO,iDAAsB,QAAQ,SAC3D;AAGF,WAAO;AAET,QAAM,4BAA4B,SAAS,iDAAsB,SAAS;AAE1E,SACE,wFACG,gBAAgB,gBAAgB,EAAE,uBAAuB,8BAA8B,cACxF,mDAAC,iBAAD;AAAA,IAAiB,uBAAuB;AAAA,IAA2B;AAAA;AAAA;AAKzE,IAAO,wBAAQ;",
+  "names": []
+}

package/{cjs → dist/cjs}/parts/TreeItem.js

@@ -27,16 +27,14 @@ var __toCommonJS = /* @__PURE__ */ ((cache) => {
 })(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
 var TreeItem_exports = {};
 __export(TreeItem_exports, {
-  DragAndDropTreeItem: () => DragAndDropTreeItem,
   TreeItem: () => TreeItem,
   TreeListItem: () => TreeListItem,
-  TreeListItemAddonsWrapper: () => TreeListItemAddonsWrapper
+  TreeListItemAddonsWrapper: () => TreeListItemAddonsWrapper,
+  default: () => TreeItem_default
 });
 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"));
@@ -47,23 +45,15 @@ var import_Icon = require("./Icon");
 var import_ExpandCaret = require("./ExpandCaret");
 var import_TreeItemText = require("./TreeItemText");
 var import_cssClassesConstants = require("../config/cssClassesConstants");
+var import_DnDHandle = require("./DnDHandle");
+var import_WithDnDSortableItemContext = require("../hoc/WithDnDSortableItemContext");
+var import_SortableItemContext = require("../hoc/SortableItemContext");
+var import_DropIndicator = __toESM(require("./DropIndicator"));
 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,
@@ -71,47 +61,43 @@ const TreeItem = (props) => {
     itemWrapperStyle = {},
     virtualItemRef,
     spaceForNestingLevel = 1.5,
-    onMouseDragOverItem
+    isDragOverlay = false
   } = 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 { draggableProps } = (0, import_react.useContext)(import_SortableItemContext.SortableItemContext);
+  const onItemKeyDown = (0, import_keyboard_helpers.useOnItemKeyDown)(item, draggableProps);
   const ctx = (0, import_react.useContext)(import_TreeViewContext.default);
   const {
     props: { disableIcons, rightAddons, onItemClick, onItemFocus, rowSize, labelOverflow },
-    relativeMouseCord,
     withRadioChecks,
     withCheckboxChecks,
     withDragAndDrop,
     selectedItem,
     selectedCheckboxes,
     hoverItem,
-    isDragging,
     virtualListHelpers: { scrollToIndex },
     setHoverItem,
     setSelectedItem,
     setFocusedItem
   } = ctx;
   const setItemRefs = (ref) => {
-    (0, import_refs_helpers.setMultipleRefs)(virtualItemRef, nodeItemRef)(ref);
+    (0, import_refs_helpers.setMultipleRefs)(virtualItemRef, !isDragOverlay && nodeItemRef, !isDragOverlay && draggableProps && draggableProps.setNodeRef)(ref);
   };
+  const dropIndicatorPosition = draggableProps && draggableProps.shouldShowDropIndicatorPosition && draggableProps.dropIndicatorPosition;
+  const isDropIndicatorPositionInside = dropIndicatorPosition === import_SortableItemContext.DropIndicatorPosition.Inside;
+  const isDragging = draggableProps && draggableProps.isDragging;
+  const isDropValid = draggableProps && draggableProps.isDropValid;
   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]);
+    if (isDropIndicatorPositionInside) {
+      const className = `${import_cssClassesConstants.DSTreeViewPrefix}-${import_cssClassesConstants.treeItemBlockName}${isDropValid ? "--valid" : "--invalid"}-drop-in`;
+      return className;
+    }
+    return "";
+  }, [isDropIndicatorPositionInside, isDropValid]);
+  const dragOverlayClassName = (0, import_react.useMemo)(() => isDragOverlay ? "drag-overlay" : "", [isDragOverlay]);
+  const selectedClassName = (0, import_react.useMemo)(() => selectedItem?.id === item.id && !isDragOverlay ? "selected" : "", [isDragOverlay, item.id, selectedItem?.id]);
+  const hoverClassName = (0, import_react.useMemo)(() => !isDragOverlay && (hoverItem?.id === item.id || isDragging) ? "hover" : "", [isDragOverlay, hoverItem?.id, item.id, isDragging]);
   const fixedHeightClassname = (0, import_react.useMemo)(() => {
     if (labelOverflow === "truncate") {
       if (rowSize === "compact")
@@ -120,7 +106,7 @@ const TreeItem = (props) => {
     }
     return "";
   }, [labelOverflow, rowSize]);
-  const finalClassName = (0, import_react.useMemo)(() => `${dropPreviewClassName} ${fixedHeightClassname} ${selectedClassName} ${hoverClassName}`, [dropPreviewClassName, selectedClassName, hoverClassName, fixedHeightClassname]);
+  const finalClassName = (0, import_react.useMemo)(() => `${dropPreviewClassName} ${fixedHeightClassname} ${selectedClassName} ${hoverClassName} ${dragOverlayClassName}`, [dropPreviewClassName, selectedClassName, hoverClassName, fixedHeightClassname, dragOverlayClassName]);
   const handleItemClick = (0, import_react.useCallback)((e) => {
     onItemClick(item, e);
     setFocusedItem(item);
@@ -134,23 +120,7 @@ const TreeItem = (props) => {
   }, [item, scrollToIndex, onItemClick, onItemFocus, setSelectedItem, setFocusedItem]);
   return /* @__PURE__ */ import_react.default.createElement(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) {
         setHoverItem(null);
       }
@@ -159,6 +129,7 @@ const TreeItem = (props) => {
       setHoverItem(item);
     },
     onClick: handleItemClick,
+    onBlur: () => setFocusedItem(null),
     ref: setItemRefs,
     style: { ...itemWrapperStyle },
     className: finalClassName,
@@ -167,25 +138,29 @@ const TreeItem = (props) => {
     "data-id": item.id,
     "data-index": item.virtualIndex,
     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, {
+  }, /* @__PURE__ */ import_react.default.createElement(TreeListItemAddonsWrapper, null, withDragAndDrop ? /* @__PURE__ */ import_react.default.createElement(import_DnDHandle.DnDHandle, {
+    id,
+    isDragOverlay
+  }) : null, withRadioChecks && !isDragOverlay ? /* @__PURE__ */ import_react.default.createElement(import_RadioSelectable.default, {
     item,
     itemIndex
-  }) : null, withCheckboxChecks ? /* @__PURE__ */ import_react.default.createElement(import_CheckboxSelectable.default, {
+  }) : null, withCheckboxChecks && !isDragOverlay ? /* @__PURE__ */ import_react.default.createElement(import_CheckboxSelectable.default, {
     item,
     itemIndex
-  }) : null, /* @__PURE__ */ import_react.default.createElement(import_NestingSpace.NestingSpace, {
+  }) : null, !isDragOverlay && /* @__PURE__ */ import_react.default.createElement(import_NestingSpace.NestingSpace, {
     item,
     spaceForNestingLevel
-  }), /* @__PURE__ */ import_react.default.createElement(import_ExpandCaret.ExpandCaret, {
+  }), !isDragOverlay && /* @__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));
+  }), rightAddons && /* @__PURE__ */ import_react.default.createElement(TreeListItemAddonsWrapper, null, typeof rightAddons === "function" ? rightAddons(item) : rightAddons), /* @__PURE__ */ import_react.default.createElement(import_DropIndicator.default, {
+    dropIndicatorPosition,
+    isDropValid
+  }));
 };
-const DragAndDropTreeItem = (0, import_react_sortable_hoc.SortableElement)(TreeItem);
+var TreeItem_default = (0, import_WithDnDSortableItemContext.withDnDSortableItemContext)(TreeItem);
 module.exports = __toCommonJS(TreeItem_exports);
 //# sourceMappingURL=TreeItem.js.map

package/dist/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 complexity */\n/* eslint-disable max-lines */\nimport React, { useContext, useMemo, useCallback } from 'react';\n\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\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';\nimport { DnDHandle } from './DnDHandle';\nimport { withDnDSortableItemContext } from '../hoc/WithDnDSortableItemContext';\nimport { DropIndicatorPosition, SortableItemContext } from '../hoc/SortableItemContext';\nimport DropIndicator from './DropIndicator';\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\ninterface PropsT {\n  item: DSTreeviewT.Item;\n  itemIndex: number;\n  isDragOverlay?: boolean;\n  virtualItemRef?: React.RefObject<HTMLLIElement>;\n  itemWrapperStyle?: { [key: string]: unknown };\n  spaceForNestingLevel?: number;\n}\nexport const TreeItem = (props: PropsT): JSX.Element => {\n  const {\n    item,\n    itemIndex,\n    itemWrapperStyle = {},\n    virtualItemRef,\n    spaceForNestingLevel = 1.5,\n    isDragOverlay = false,\n  } = props;\n  const { id, node } = item;\n  const { nodeItemRef } = node.model;\n\n  const { draggableProps } = useContext(SortableItemContext);\n\n  const onItemKeyDown = useOnItemKeyDown(item, draggableProps);\n\n  const ctx = useContext(TreeViewContext);\n  const {\n    props: { disableIcons, rightAddons, onItemClick, onItemFocus, rowSize, labelOverflow },\n    withRadioChecks,\n    withCheckboxChecks,\n    withDragAndDrop,\n    selectedItem,\n    selectedCheckboxes,\n    hoverItem,\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  //   - the drag and drop node reference\n  const setItemRefs: React.LegacyRef<HTMLLIElement> | undefined = (ref: HTMLLIElement) => {\n    setMultipleRefs(\n      virtualItemRef,\n      !isDragOverlay && nodeItemRef,\n      !isDragOverlay && draggableProps && draggableProps.setNodeRef,\n    )(ref);\n  };\n\n  const dropIndicatorPosition =\n    draggableProps && draggableProps.shouldShowDropIndicatorPosition && draggableProps.dropIndicatorPosition;\n\n  const isDropIndicatorPositionInside = dropIndicatorPosition === DropIndicatorPosition.Inside;\n\n  const isDragging = draggableProps && draggableProps.isDragging;\n\n  const isDropValid = draggableProps && draggableProps.isDropValid;\n\n  const dropPreviewClassName = useMemo(() => {\n    if (isDropIndicatorPositionInside) {\n      const className = `${DSTreeViewPrefix}-${treeItemBlockName}${isDropValid ? '--valid' : '--invalid'}-drop-in`;\n      return className;\n    }\n    return '';\n  }, [isDropIndicatorPositionInside, isDropValid]);\n\n  const dragOverlayClassName = useMemo(() => (isDragOverlay ? 'drag-overlay' : ''), [isDragOverlay]);\n\n  const selectedClassName = useMemo(\n    () => (selectedItem?.id === item.id && !isDragOverlay ? 'selected' : ''),\n    [isDragOverlay, item.id, selectedItem?.id],\n  );\n  const hoverClassName = useMemo(\n    () => (!isDragOverlay && (hoverItem?.id === item.id || isDragging) ? 'hover' : ''),\n    [isDragOverlay, hoverItem?.id, item.id, 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    () =>\n      `${dropPreviewClassName} ${fixedHeightClassname} ${selectedClassName} ${hoverClassName} ${dragOverlayClassName}`,\n    [dropPreviewClassName, selectedClassName, hoverClassName, fixedHeightClassname, dragOverlayClassName],\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      onMouseLeave={() => {\n        if (hoverItem?.id === item.id) {\n          setHoverItem(null);\n        }\n      }}\n      onMouseEnter={() => {\n        setHoverItem(item);\n      }}\n      onClick={handleItemClick}\n      onBlur={() => setFocusedItem(null)}\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} isDragOverlay={isDragOverlay} /> : null}\n        {withRadioChecks && !isDragOverlay ? <RadioSelectable item={item} itemIndex={itemIndex} /> : null}\n        {withCheckboxChecks && !isDragOverlay ? <CheckboxSelectable item={item} itemIndex={itemIndex} /> : null}\n        {!isDragOverlay && <NestingSpace item={item} spaceForNestingLevel={spaceForNestingLevel} />}\n        {!isDragOverlay && <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      <DropIndicator dropIndicatorPosition={dropIndicatorPosition} isDropValid={isDropValid} />\n    </TreeListItem>\n  );\n};\n\nexport default withDnDSortableItemContext(TreeItem);\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,mBAAwD;AAExD,2BAAkC;AAElC,6BAA4B;AAC5B,gCAA+B;AAC/B,6BAA4B;AAC5B,0BAAgC;AAChC,8BAAiC;AACjC,0BAA6B;AAC7B,kBAAqB;AACrB,yBAA4B;AAC5B,0BAA6B;AAC7B,iCAAoD;AAEpD,uBAA0B;AAC1B,wCAA2C;AAC3C,iCAA2D;AAC3D,2BAA0B;AAEnB,MAAM,eAAe,4CAAkB,MAAM;AAAA,EAClD,eAAe;AAAA,EACf,MAAM;AAAA,GAEL;AAEI,MAAM,4BAA4B,4CAAkB,OACzD,8CACA;AAYK,MAAM,WAAW,CAAC,UAA+B;AACtD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,mBAAmB;AAAA,IACnB;AAAA,IACA,uBAAuB;AAAA,IACvB,gBAAgB;AAAA,MACd;AACJ,QAAM,EAAE,IAAI,SAAS;AACrB,QAAM,EAAE,gBAAgB,KAAK;AAE7B,QAAM,EAAE,mBAAmB,6BAAW;AAEtC,QAAM,gBAAgB,8CAAiB,MAAM;AAE7C,QAAM,MAAM,6BAAW;AACvB,QAAM;AAAA,IACJ,OAAO,EAAE,cAAc,aAAa,aAAa,aAAa,SAAS;AAAA,IACvE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,oBAAoB,EAAE;AAAA,IACtB;AAAA,IACA;AAAA,IACA;AAAA,MACE;AAMJ,QAAM,cAA0D,CAAC,QAAuB;AACtF,6CACE,gBACA,CAAC,iBAAiB,aAClB,CAAC,iBAAiB,kBAAkB,eAAe,YACnD;AAAA;AAGJ,QAAM,wBACJ,kBAAkB,eAAe,mCAAmC,eAAe;AAErF,QAAM,gCAAgC,0BAA0B,iDAAsB;AAEtF,QAAM,aAAa,kBAAkB,eAAe;AAEpD,QAAM,cAAc,kBAAkB,eAAe;AAErD,QAAM,uBAAuB,0BAAQ,MAAM;AACzC,QAAI,+BAA+B;AACjC,YAAM,YAAY,GAAG,+CAAoB,+CAAoB,cAAc,YAAY;AACvF,aAAO;AAAA;AAET,WAAO;AAAA,KACN,CAAC,+BAA+B;AAEnC,QAAM,uBAAuB,0BAAQ,MAAO,gBAAgB,iBAAiB,IAAK,CAAC;AAEnF,QAAM,oBAAoB,0BACxB,MAAO,cAAc,OAAO,KAAK,MAAM,CAAC,gBAAgB,aAAa,IACrE,CAAC,eAAe,KAAK,IAAI,cAAc;AAEzC,QAAM,iBAAiB,0BACrB,MAAO,CAAC,iBAAkB,YAAW,OAAO,KAAK,MAAM,cAAc,UAAU,IAC/E,CAAC,eAAe,WAAW,IAAI,KAAK,IAAI;AAE1C,QAAM,uBAAuB,0BAAQ,MAAM;AACzC,QAAI,kBAAkB,YAAY;AAChC,UAAI,YAAY;AAAW,eAAO,GAAG,+CAAoB;AACzD,aAAO,GAAG,+CAAoB;AAAA;AAEhC,WAAO;AAAA,KACN,CAAC,eAAe;AAEnB,QAAM,iBAAiB,0BACrB,MACE,GAAG,wBAAwB,wBAAwB,qBAAqB,kBAAkB,wBAC5F,CAAC,sBAAsB,mBAAmB,gBAAgB,sBAAsB;AAGlF,QAAM,kBAAkB,8BACtB,CAAC,MAAuC;AACtC,gBAAY,MAAM;AAClB,mBAAe;AACf,oBAAgB;AAChB,UAAM,mBAAmB,OAAO,KAAK,iBAAiB,WAAW,KAAK,eAAe;AACrF,gBAAY;AAAA,MACV,WAAW;AAAA,MACX,cAAc,CAAC,OAAO,EAAE,OAAO,cAAc,cAAc,kBAAkB;AAAA,MAC7E;AAAA;AAAA,KAGJ,CAAC,MAAM,eAAe,aAAa,aAAa,iBAAiB;AAGnE,SACE,mDAAC,cAAD;AAAA,IACE,UAAU;AAAA,IACV,cAAc,MAAM;AAClB,UAAI,WAAW,OAAO,KAAK,IAAI;AAC7B,qBAAa;AAAA;AAAA;AAAA,IAGjB,cAAc,MAAM;AAClB,mBAAa;AAAA;AAAA,IAEf,SAAS;AAAA,IACT,QAAQ,MAAM,eAAe;AAAA,IAC7B,KAAK;AAAA,IACL,OAAO,KAAK;AAAA,IACZ,WAAW;AAAA,IACX,iBAAe,CAAC,CAAC,KAAK;AAAA,IACtB,iBAAe,CAAC,CAAC,mBAAmB,KAAK;AAAA,IACzC,WAAS,KAAK;AAAA,IACd,cAAY,KAAK;AAAA,IACjB,WAAW;AAAA,KAEX,mDAAC,2BAAD,MACG,kBAAkB,mDAAC,4BAAD;AAAA,IAAW;AAAA,IAAQ;AAAA,OAAmC,MACxE,mBAAmB,CAAC,gBAAgB,mDAAC,gCAAD;AAAA,IAAiB;AAAA,IAAY;AAAA,OAA2B,MAC5F,sBAAsB,CAAC,gBAAgB,mDAAC,mCAAD;AAAA,IAAoB;AAAA,IAAY;AAAA,OAA2B,MAClG,CAAC,iBAAiB,mDAAC,kCAAD;AAAA,IAAc;AAAA,IAAY;AAAA,MAC5C,CAAC,iBAAiB,mDAAC,gCAAD;AAAA,IAAa;AAAA,MAC/B,CAAC,eAAe,mDAAC,kBAAD;AAAA,IAAM;AAAA,OAAiB,OAE1C,mDAAC,kCAAD;AAAA,IAAc;AAAA,MACb,eACC,mDAAC,2BAAD,MACG,OAAO,gBAAgB,aAAa,YAAY,QAAQ,cAG7D,mDAAC,8BAAD;AAAA,IAAe;AAAA,IAA8C;AAAA;AAAA;AAKnE,IAAO,mBAAQ,kEAA2B;",
+  "names": []
+}

package/{cjs → dist/cjs}/parts/TreeList.js

@@ -27,7 +27,6 @@ var __toCommonJS = /* @__PURE__ */ ((cache) => {
 })(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
 var TreeList_exports = {};
 __export(TreeList_exports, {
-  DragAndDropTreeList: () => DragAndDropTreeList,
   TreeList: () => TreeList,
   TreeListNoItems: () => TreeListNoItems,
   TreeListWrapper: () => TreeListWrapper,
@@ -35,12 +34,13 @@ __export(TreeList_exports, {
 });
 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_circular_progress_indicator = require("@elliemae/ds-circular-progress-indicator");
 var import_TreeViewContext = __toESM(require("../TreeViewContext"));
 var import_cssClassesConstants = require("../config/cssClassesConstants");
-var import_TreeItem = require("./TreeItem");
+var import_TreeItem = __toESM(require("./TreeItem"));
+var import_WithConditionalDnDContext = require("../hoc/WithConditionalDnDContext");
+var import_DnDTreeContext = require("../hoc/DnDTreeContext");
 const treeListNoItemsBn = `${import_cssClassesConstants.treeListBlockName}-no-items`;
 const TreeListNoItems = (0, import_ds_classnames.aggregatedClasses)("div", {
   "data-testid": treeListNoItemsBn
@@ -53,18 +53,17 @@ const TreeListWrapper = (0, import_ds_classnames.aggregatedClasses)("ul", {
 }));
 const compactRowClass = `${import_cssClassesConstants.DSTreeViewPrefix}-tv-row-size-compact`;
 const normaRowClass = `${import_cssClassesConstants.DSTreeViewPrefix}-tv-row-size-normal`;
-const TreeList = (props) => {
-  const { onMouseDragOverItem } = props;
+const TreeListComp = () => {
   const ctx = (0, import_react.useContext)(import_TreeViewContext.default);
   const {
     virtualListRef,
     virtualListHelpers,
-    visibleItems,
-    withDragAndDrop,
+    visibleItems: flattenedVisibleItems,
     props: { width, height, rowSize, noItemsPlaceholder, isLoading }
   } = ctx;
   const { totalSize, virtualItems } = virtualListHelpers;
   const className = `${rowSize === "compact" ? `${compactRowClass}` : `${normaRowClass}`}`;
+  const { visibleItems } = (0, import_react.useContext)(import_DnDTreeContext.DnDTreeContext);
   return /* @__PURE__ */ import_react.default.createElement(TreeListWrapper, {
     ref: virtualListRef,
     className,
@@ -95,15 +94,16 @@ const TreeList = (props) => {
     }
   }, virtualItems.map((virtualItem) => {
     const { index, measureRef, start } = virtualItem;
-    const item = visibleItems[index];
+    const item = (visibleItems || flattenedVisibleItems)[index];
+    if (!item)
+      return null;
     item.virtualIndex = index;
     const { id } = item;
     const style = {
       position: "absolute",
-      top: 0,
+      top: `${start}px`,
       left: 0,
-      width: "100%",
-      transform: `translateY(${start}px)`
+      width: "100%"
     };
     const listItemProps = {
       key: `DS-TreeView-List-Item-${id}`,
@@ -113,16 +113,11 @@ const TreeList = (props) => {
       item,
       itemWrapperStyle: style
     };
-    if (withDragAndDrop)
-      return /* @__PURE__ */ import_react.default.createElement(import_TreeItem.DragAndDropTreeItem, {
-        ...listItemProps,
-        onMouseDragOverItem
-      });
-    return /* @__PURE__ */ import_react.default.createElement(import_TreeItem.TreeItem, {
+    return /* @__PURE__ */ import_react.default.createElement(import_TreeItem.default, {
       ...listItemProps
     });
   })) : null);
 };
-const DragAndDropTreeList = (0, import_react_sortable_hoc.SortableContainer)(TreeList);
+const TreeList = (0, import_WithConditionalDnDContext.withConditionalDnDRowContext)(TreeListComp);
 module.exports = __toCommonJS(TreeList_exports);
 //# sourceMappingURL=TreeList.js.map

package/dist/cjs/parts/TreeList.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/parts/TreeList.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* eslint-disable max-lines */\nimport React, { useContext } from 'react';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { DSCircularProgressIndicator } from '@elliemae/ds-circular-progress-indicator';\n\nimport TreeViewContext from '../TreeViewContext';\nimport { DSTreeViewPrefix, treeListBlockName } from '../config/cssClassesConstants';\nimport TreeItem from './TreeItem';\n\nimport type { DSTreeviewT } from '../react-desc-prop-types';\nimport { withConditionalDnDRowContext } from '../hoc/WithConditionalDnDContext';\nimport { DnDTreeContext } from '../hoc/DnDTreeContext';\n\nexport const treeListNoItemsBn = `${treeListBlockName}-no-items`;\nexport const TreeListNoItems = aggregatedClasses('div', {\n  'data-testid': treeListNoItemsBn,\n})(treeListNoItemsBn) as unknown as React.ComponentType<React.ComponentProps<'div'>>;\n\n// React.ComponentProps<'ul'> uses LegacyRef typings that existed pre-hook era\n// we omit the LegacyRef typings in favor of hook-era typings\ninterface UlProps extends Omit<React.ComponentProps<'ul'>, 'ref'> {\n  ref: React.MutableRefObject<HTMLUListElement | undefined> | undefined;\n}\nexport const TreeListWrapper = aggregatedClasses('ul', {\n  'data-testid': treeListBlockName,\n  role: 'tree',\n})(treeListBlockName, null, ({ rowSize }: { rowSize: 'normal' | 'compact' }) => ({\n  [`rowsize-${rowSize}`]: rowSize,\n})) as unknown as React.ComponentType<UlProps>;\n\nconst compactRowClass = `${DSTreeViewPrefix}-tv-row-size-compact`;\nconst normaRowClass = `${DSTreeViewPrefix}-tv-row-size-normal`;\n\ninterface PropsT {\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}\n\nconst TreeListComp: React.ComponentType<PropsT> = () => {\n  const ctx = useContext(TreeViewContext);\n  const {\n    virtualListRef,\n    virtualListHelpers,\n    visibleItems: flattenedVisibleItems,\n    props: { width, height, rowSize, noItemsPlaceholder, isLoading },\n  } = ctx;\n  const { totalSize, virtualItems } = virtualListHelpers;\n  const className = `${rowSize === 'compact' ? `${compactRowClass}` : `${normaRowClass}`}`;\n\n  const { visibleItems } = useContext(DnDTreeContext);\n\n  return (\n    <TreeListWrapper\n      ref={virtualListRef}\n      className={className}\n      style={{\n        height: `${typeof height === 'number' ? `${height}px` : height}`,\n        width: `${typeof width === 'number' ? `${width}px` : width}`,\n        overflow: 'auto',\n      }}\n    >\n      {isLoading ? (\n        <div\n          style={{\n            width: '100%',\n            height: '100%',\n            display: 'flex',\n            alignItems: 'center',\n            justifyContent: 'center',\n          }}\n        >\n          <DSCircularProgressIndicator size=\"xl\" loading={isLoading} showLabel waiting={false} showTooltip={false} />\n        </div>\n      ) : null}\n      {!isLoading && virtualItems.length === 0 ? <TreeListNoItems>{noItemsPlaceholder}</TreeListNoItems> : null}\n      {!isLoading && virtualItems.length !== 0 ? (\n        <div\n          style={{\n            height: `${totalSize}px`,\n            width: '100%',\n            position: 'relative',\n          }}\n        >\n          {virtualItems.map((virtualItem) => {\n            const { index, measureRef, start } = virtualItem;\n            const item = (visibleItems || flattenedVisibleItems)[index];\n            if (!item) return null;\n            item.virtualIndex = index;\n            const { id } = item;\n\n            const style = {\n              position: 'absolute',\n              top: `${start}px`,\n              left: 0,\n              width: '100%',\n            };\n\n            const listItemProps = {\n              key: `DS-TreeView-List-Item-${id}`,\n              virtualItemRef: measureRef,\n              index, // this is consumed by the DnD HOC\n              itemIndex: index,\n              item,\n              itemWrapperStyle: style,\n            };\n\n            return <TreeItem {...listItemProps} />;\n          })}\n        </div>\n      ) : null}\n    </TreeListWrapper>\n  );\n};\n\nexport const TreeList = withConditionalDnDRowContext(TreeListComp);\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAkC;AAClC,2BAAkC;AAClC,4CAA4C;AAE5C,6BAA4B;AAC5B,iCAAoD;AACpD,sBAAqB;AAGrB,uCAA6C;AAC7C,4BAA+B;AAExB,MAAM,oBAAoB,GAAG;AAC7B,MAAM,kBAAkB,4CAAkB,OAAO;AAAA,EACtD,eAAe;AAAA,GACd;AAOI,MAAM,kBAAkB,4CAAkB,MAAM;AAAA,EACrD,eAAe;AAAA,EACf,MAAM;AAAA,GACL,8CAAmB,MAAM,CAAC,EAAE,cAAkD;AAAA,GAC9E,WAAW,YAAY;AAAA;AAG1B,MAAM,kBAAkB,GAAG;AAC3B,MAAM,gBAAgB,GAAG;AAYzB,MAAM,eAA4C,MAAM;AACtD,QAAM,MAAM,6BAAW;AACvB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd,OAAO,EAAE,OAAO,QAAQ,SAAS,oBAAoB;AAAA,MACnD;AACJ,QAAM,EAAE,WAAW,iBAAiB;AACpC,QAAM,YAAY,GAAG,YAAY,YAAY,GAAG,oBAAoB,GAAG;AAEvE,QAAM,EAAE,iBAAiB,6BAAW;AAEpC,SACE,mDAAC,iBAAD;AAAA,IACE,KAAK;AAAA,IACL;AAAA,IACA,OAAO;AAAA,MACL,QAAQ,GAAG,OAAO,WAAW,WAAW,GAAG,aAAa;AAAA,MACxD,OAAO,GAAG,OAAO,UAAU,WAAW,GAAG,YAAY;AAAA,MACrD,UAAU;AAAA;AAAA,KAGX,YACC,mDAAC,OAAD;AAAA,IACE,OAAO;AAAA,MACL,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,gBAAgB;AAAA;AAAA,KAGlB,mDAAC,mEAAD;AAAA,IAA6B,MAAK;AAAA,IAAK,SAAS;AAAA,IAAW,WAAS;AAAA,IAAC,SAAS;AAAA,IAAO,aAAa;AAAA,QAElG,MACH,CAAC,aAAa,aAAa,WAAW,IAAI,mDAAC,iBAAD,MAAkB,sBAAwC,MACpG,CAAC,aAAa,aAAa,WAAW,IACrC,mDAAC,OAAD;AAAA,IACE,OAAO;AAAA,MACL,QAAQ,GAAG;AAAA,MACX,OAAO;AAAA,MACP,UAAU;AAAA;AAAA,KAGX,aAAa,IAAI,CAAC,gBAAgB;AACjC,UAAM,EAAE,OAAO,YAAY,UAAU;AACrC,UAAM,OAAQ,iBAAgB,uBAAuB;AACrD,QAAI,CAAC;AAAM,aAAO;AAClB,SAAK,eAAe;AACpB,UAAM,EAAE,OAAO;AAEf,UAAM,QAAQ;AAAA,MACZ,UAAU;AAAA,MACV,KAAK,GAAG;AAAA,MACR,MAAM;AAAA,MACN,OAAO;AAAA;AAGT,UAAM,gBAAgB;AAAA,MACpB,KAAK,yBAAyB;AAAA,MAC9B,gBAAgB;AAAA,MAChB;AAAA,MACA,WAAW;AAAA,MACX;AAAA,MACA,kBAAkB;AAAA;AAGpB,WAAO,mDAAC,yBAAD;AAAA,SAAc;AAAA;AAAA,QAGvB;AAAA;AAKH,MAAM,WAAW,mEAA6B;",
+  "names": []
+}

package/dist/cjs/plugins/dnd/TreeDndPlugin.js

@@ -0,0 +1,35 @@
+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 TreeDndPlugin_exports = {};
+__export(TreeDndPlugin_exports, {
+  TreeDndPlugin: () => TreeDndPlugin
+});
+var React = __toESM(require("react"));
+const TreeDndPlugin = "tree-dnd";
+module.exports = __toCommonJS(TreeDndPlugin_exports);
+//# sourceMappingURL=TreeDndPlugin.js.map

package/dist/cjs/plugins/dnd/TreeDndPlugin.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/plugins/dnd/TreeDndPlugin.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["export const TreeDndPlugin = 'tree-dnd';\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,gBAAgB;",
+  "names": []
+}

package/{cjs → dist/cjs}/react-desc-prop-types.js

@@ -59,6 +59,7 @@ const TreeViewPropTypes = {
   isMultiSelect: import_react_desc.PropTypes.bool.description("whether the tree view is multi select or not").defaultValue(false),
   isSingleSelect: import_react_desc.PropTypes.bool.description("wheter the tree view is single select or not").defaultValue(false),
   isLoading: import_react_desc.PropTypes.bool.description("wheter the tree should show the loading state or not").defaultValue(false),
+  getIsDropValid: import_react_desc.PropTypes.func.description("Function that returns true if the drop is valid and false if it's not").defaultValue("() => true"),
   restrictDragAndDrop: import_react_desc.PropTypes.bool.description("whether to restrict DnD functionality or not").defaultValue(false),
   showChildrenAmount: import_react_desc.PropTypes.bool.description("whether to show the amount of children or not").defaultValue(false),
   sortable: import_react_desc.PropTypes.bool.description("whether the sortable functionality is active or not").defaultValue(false),

package/dist/cjs/react-desc-prop-types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/react-desc-prop-types.tsx", "../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* eslint-disable max-lines */\nimport { PropTypes } from 'react-desc';\nimport TreeModel from 'tree-model';\nimport { useVirtual } from 'react-virtual';\nexport declare namespace DSTreeviewT {\n  export type StringOrNum = string | number;\n  export type SelectionState = boolean | 'mixed';\n  export type SelectionItems = Record<StringOrNum, SelectionState>;\n  export type ScrollToFunc = ReturnType<typeof useVirtual>['scrollToIndex'];\n  export type ScrollToItemOptions = Parameters<ReturnType<typeof useVirtual>['scrollToIndex']>[1];\n  export type ScrollToItemFunc = (options: ScrollToItemOptions) => void;\n  export type ExpandedItems = Record<StringOrNum, true>; // { [id]:true } -> e.g. {1:true; 2:true} // false are not listed\n  export interface SimpleItem {\n    [key: string]: unknown;\n    name: string;\n    children?: SimpleItem[];\n    id: StringOrNum;\n  }\n\n  export interface Item extends SimpleItem {\n    children: Item[];\n    treeDepth?: number;\n    virtualIndex?: number;\n    isChecked?: boolean | 'mixed';\n    isGroup?: boolean;\n    isExpanded?: boolean;\n    childrenMatchesSearchQuery?: boolean;\n    matchesSearchQuery?: boolean;\n    nodeItemRef?: React.RefObject<HTMLLIElement>;\n    model: TreeModel.Node<Item>['model'];\n    node: TreeModel.Node<Item> & { parent?: TreeModel.Node<Item> };\n    nodePath: TreeModel.Node<Item>[];\n  }\n\n  export interface DndItem {\n    uid: string;\n    depth: number;\n    realIndex: number;\n    childrenCount: number;\n    parentId: string | null;\n    original: SimpleItem;\n  }\n\n  export interface Actions {\n    toggleExpandAll: (isExpand: boolean) => Promise<DSTreeviewT.Item[]>;\n    scrollTo: DSTreeviewT.ScrollToFunc;\n    setSelectedItemByVirtualIndex: (index: number) => void;\n    setFocusedItemByVirtualIndex: (\n      index: number,\n      scrollOpts: DSTreeviewT.ScrollToItemOptions & { withScroll?: boolean },\n    ) => void;\n  }\n  export interface InstanceRef {\n    actions: Actions;\n  }\n\n  export interface DefaultProps {\n    plugins: string[];\n    selection: SelectionItems;\n    instanceRef: React.MutableRefObject<InstanceRef>;\n    isItemDisabled: (item: Item) => boolean;\n    disableIcons: boolean;\n    fluid: boolean;\n    isMultiSelect: boolean;\n    isSingleSelect: boolean;\n    getIsDropValid: (\n      active: DndItem,\n      over: DndItem,\n      dropIndicatorPosition: 'none' | 'before' | 'after' | 'inside',\n    ) => boolean;\n    restrictDragAndDrop: boolean;\n    showChildrenAmount: boolean;\n    sortable: boolean;\n    isLoading: boolean;\n    highlightOnlyQuery: boolean;\n    onItemClick: (item: Item, e: React.MouseEvent<HTMLLIElement>) => void;\n    onItemFocus: (meta: { scrollToItem: ScrollToItemFunc; itemIndex: number; item: Item }) => void;\n    onVisibleItemsChange: (newVisibleItems: Item[]) => void;\n    onOrderChange: (newData: SimpleItem[], oldData: SimpleItem[], draggedItem: DndItem) => void;\n    onSelectionChange: (\n      selection: SelectionItems,\n      item: Item,\n      meta: { scrollToItem: ScrollToItemFunc; itemIndex: number },\n    ) => void;\n    onExpandChange: (expandedHashmap: ExpandedItems, itemToggled: Item | null | undefined) => void;\n    onInstanceRefInitialized: (instanceRef: React.MutableRefObject<InstanceRef>) => void;\n    rowSize: 'normal' | 'compact';\n    labelOverflow: 'wrap' | 'wrap-all' | 'truncate';\n    noItemsPlaceholder: string;\n    nameKey: string;\n    width: StringOrNum;\n    height: StringOrNum;\n    groupIcon: JSX.Element | null;\n    itemIcon: JSX.Element | null;\n    searchQuery: string;\n  }\n  export interface PropsOptional {\n    expanded: ExpandedItems;\n    rightAddons: ((item: Item) => React.ReactNode | React.ReactNode[]) | JSX.Element;\n  }\n  export interface PropsRequired {\n    data: Item[];\n  }\n  export interface Props extends DefaultProps, PropsOptional, PropsRequired {}\n}\n\nexport const TreeViewPropTypes = {\n  data: PropTypes.arrayOf(\n    PropTypes.shape({\n      children: PropTypes.arrayOf(PropTypes.object),\n      id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n      isGroup: PropTypes.oneOfType([PropTypes.oneOf([undefined, null]), PropTypes.bool]),\n      name: PropTypes.string,\n      node: PropTypes.object,\n    }),\n  ).description('data to populate tree view').isRequired,\n  plugins: PropTypes.arrayOf(PropTypes.string).description('list of enabled plugins').defaultValue([]),\n  selection: PropTypes.object.description('pre selected items').defaultValue({}),\n  expanded: PropTypes.object.description('control what items are expanded').defaultValue(undefined),\n  instanceRef: PropTypes.shape({\n    current: PropTypes.oneOfType([\n      PropTypes.oneOf([null, undefined]),\n      PropTypes.shape({\n        actions: PropTypes.shape({\n          toggleExpandAll: PropTypes.func,\n          scrollTo: PropTypes.func,\n        }).description('').isRequired,\n      }),\n    ]),\n  }).description('instance ref'),\n  isItemDisabled: PropTypes.func\n    .description('Function that receives an item, and returns whether that item should be disabled')\n    .defaultValue('() => false'),\n  disableIcons: PropTypes.bool.description('disable icons').defaultValue(false),\n  fluid: PropTypes.bool.description('whether is fluid or not').defaultValue(false),\n  isMultiSelect: PropTypes.bool.description('whether the tree view is multi select or not').defaultValue(false),\n  isSingleSelect: PropTypes.bool.description('wheter the tree view is single select or not').defaultValue(false),\n  isLoading: PropTypes.bool.description('wheter the tree should show the loading state or not').defaultValue(false),\n  getIsDropValid: PropTypes.func\n    .description(\"Function that returns true if the drop is valid and false if it's not\")\n    .defaultValue('() => true'),\n  restrictDragAndDrop: PropTypes.bool.description('whether to restrict DnD functionality or not').defaultValue(false),\n  showChildrenAmount: PropTypes.bool.description('whether to show the amount of children or not').defaultValue(false),\n  sortable: PropTypes.bool.description('whether the sortable functionality is active or not').defaultValue(false),\n  onItemClick: PropTypes.func.description('function executed when clicking on an item').defaultValue('() => {}'),\n  onItemFocus: PropTypes.func.description('function executed when focusing on an item').defaultValue('() => {}'),\n  onVisibleItemsChange: PropTypes.func\n    .description('function executed when the visible items change')\n    .defaultValue('() => {}'),\n  onOrderChange: PropTypes.func.description('function executed when the items order changes').defaultValue('() => {}'),\n  onSelectionChange: PropTypes.func\n    .description('function executed when the selection changes')\n    .defaultValue('() => {}'),\n  onExpandChange: PropTypes.func.description('function executed when expanding an item').defaultValue('() => {}'),\n  onInstanceRefInitialized: PropTypes.func\n    .description('function executed when instanceRef has terminated instanciation')\n    .defaultValue('() => {}'),\n  rowSize: PropTypes.oneOf(['normal', 'compact']).description('size of the row').defaultValue('normal'),\n  labelOverflow: PropTypes.oneOf(['wrap', 'wrap-all', 'truncate'])\n    .description('label truncation preference')\n    .defaultValue('wrap'),\n  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description('components width').defaultValue('100%'),\n  height: PropTypes.oneOfType([PropTypes.number, PropTypes.string])\n    .description('components height')\n    .defaultValue('100%'),\n  groupIcon: PropTypes.node.description('icon for groups'),\n  itemIcon: PropTypes.node.description('icon for items'),\n  searchQuery: PropTypes.string.description('search query value'),\n  noItemsPlaceholder: PropTypes.string\n    .description('message to be shown when there are no items in the treeview to be displayed')\n    .defaultValue('No items found'),\n  name: PropTypes.string.description('property key to identifier for items labels').defaultValue('name'),\n  highlightOnlyQuery: PropTypes.bool.description('whether to highlight results or not').defaultValue(false),\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,wBAA0B;AAyGnB,MAAM,oBAAoB;AAAA,EAC/B,MAAM,4BAAU,QACd,4BAAU,MAAM;AAAA,IACd,UAAU,4BAAU,QAAQ,4BAAU;AAAA,IACtC,IAAI,4BAAU,UAAU,CAAC,4BAAU,QAAQ,4BAAU;AAAA,IACrD,SAAS,4BAAU,UAAU,CAAC,4BAAU,MAAM,CAAC,QAAW,QAAQ,4BAAU;AAAA,IAC5E,MAAM,4BAAU;AAAA,IAChB,MAAM,4BAAU;AAAA,MAElB,YAAY,8BAA8B;AAAA,EAC5C,SAAS,4BAAU,QAAQ,4BAAU,QAAQ,YAAY,2BAA2B,aAAa;AAAA,EACjG,WAAW,4BAAU,OAAO,YAAY,sBAAsB,aAAa;AAAA,EAC3E,UAAU,4BAAU,OAAO,YAAY,mCAAmC,aAAa;AAAA,EACvF,aAAa,4BAAU,MAAM;AAAA,IAC3B,SAAS,4BAAU,UAAU;AAAA,MAC3B,4BAAU,MAAM,CAAC,MAAM;AAAA,MACvB,4BAAU,MAAM;AAAA,QACd,SAAS,4BAAU,MAAM;AAAA,UACvB,iBAAiB,4BAAU;AAAA,UAC3B,UAAU,4BAAU;AAAA,WACnB,YAAY,IAAI;AAAA;AAAA;AAAA,KAGtB,YAAY;AAAA,EACf,gBAAgB,4BAAU,KACvB,YAAY,oFACZ,aAAa;AAAA,EAChB,cAAc,4BAAU,KAAK,YAAY,iBAAiB,aAAa;AAAA,EACvE,OAAO,4BAAU,KAAK,YAAY,2BAA2B,aAAa;AAAA,EAC1E,eAAe,4BAAU,KAAK,YAAY,gDAAgD,aAAa;AAAA,EACvG,gBAAgB,4BAAU,KAAK,YAAY,gDAAgD,aAAa;AAAA,EACxG,WAAW,4BAAU,KAAK,YAAY,wDAAwD,aAAa;AAAA,EAC3G,gBAAgB,4BAAU,KACvB,YAAY,yEACZ,aAAa;AAAA,EAChB,qBAAqB,4BAAU,KAAK,YAAY,gDAAgD,aAAa;AAAA,EAC7G,oBAAoB,4BAAU,KAAK,YAAY,iDAAiD,aAAa;AAAA,EAC7G,UAAU,4BAAU,KAAK,YAAY,uDAAuD,aAAa;AAAA,EACzG,aAAa,4BAAU,KAAK,YAAY,8CAA8C,aAAa;AAAA,EACnG,aAAa,4BAAU,KAAK,YAAY,8CAA8C,aAAa;AAAA,EACnG,sBAAsB,4BAAU,KAC7B,YAAY,mDACZ,aAAa;AAAA,EAChB,eAAe,4BAAU,KAAK,YAAY,kDAAkD,aAAa;AAAA,EACzG,mBAAmB,4BAAU,KAC1B,YAAY,gDACZ,aAAa;AAAA,EAChB,gBAAgB,4BAAU,KAAK,YAAY,4CAA4C,aAAa;AAAA,EACpG,0BAA0B,4BAAU,KACjC,YAAY,mEACZ,aAAa;AAAA,EAChB,SAAS,4BAAU,MAAM,CAAC,UAAU,YAAY,YAAY,mBAAmB,aAAa;AAAA,EAC5F,eAAe,4BAAU,MAAM,CAAC,QAAQ,YAAY,aACjD,YAAY,+BACZ,aAAa;AAAA,EAChB,OAAO,4BAAU,UAAU,CAAC,4BAAU,QAAQ,4BAAU,SAAS,YAAY,oBAAoB,aAAa;AAAA,EAC9G,QAAQ,4BAAU,UAAU,CAAC,4BAAU,QAAQ,4BAAU,SACtD,YAAY,qBACZ,aAAa;AAAA,EAChB,WAAW,4BAAU,KAAK,YAAY;AAAA,EACtC,UAAU,4BAAU,KAAK,YAAY;AAAA,EACrC,aAAa,4BAAU,OAAO,YAAY;AAAA,EAC1C,oBAAoB,4BAAU,OAC3B,YAAY,+EACZ,aAAa;AAAA,EAChB,MAAM,4BAAU,OAAO,YAAY,+CAA+C,aAAa;AAAA,EAC/F,oBAAoB,4BAAU,KAAK,YAAY,uCAAuC,aAAa;AAAA;",
+  "names": []
+}