@elliemae/ds-treeview 2.3.0-alpha.2 → 2.3.0-alpha.3

package/types/parts/TreeItem.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="node" />
 import React from 'react';
 import type { DSTreeviewT } from '../react-desc-prop-types';
 export declare const TreeListItem: React.ComponentType<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>>;
@@ -6,19 +5,13 @@ export declare const TreeListItemAddonsWrapper: React.ComponentType<{}>;
 interface PropsT {
     item: DSTreeviewT.Item;
     itemIndex: number;
-    virtualItemRef: React.RefObject<HTMLLIElement>;
+    isDragOverlay?: boolean;
+    virtualItemRef?: React.RefObject<HTMLLIElement>;
     itemWrapperStyle?: {
         [key: string]: unknown;
     };
     spaceForNestingLevel?: number;
-    onMouseDragOverItem?: (opts: {
-        event: React.MouseEvent<HTMLLIElement>;
-        item: DSTreeviewT.Item;
-        itemIndex: number;
-        setIsDraggingOverThis: React.Dispatch<React.SetStateAction<boolean>>;
-        openFolderOnHoverTimeout: React.MutableRefObject<NodeJS.Timeout | null>;
-    }) => void;
 }
 export declare const TreeItem: (props: PropsT) => JSX.Element;
-export declare const DragAndDropTreeItem: React.ComponentClass<PropsT & import("@elliemae/react-sortable-hoc").SortableElementProps, any>;
-export {};
+declare const _default: (props: PropsT) => JSX.Element;
+export default _default;

package/types/parts/TreeList.d.ts

@@ -17,8 +17,4 @@ interface PropsT {
     }) => void;
 }
 export declare const TreeList: (props: PropsT) => JSX.Element;
-export declare const DragAndDropTreeList: React.ComponentClass<PropsT & {
-    disableAnimation?: boolean | undefined;
-    getContainer: (element: React.ReactElement<unknown>) => HTMLElement | Promise<HTMLElement>;
-} & import("@elliemae/react-sortable-hoc").SortableContainerProps, any>;
 export {};

package/types/plugins/dnd/TreeDndPlugin.d.ts

@@ -1,3 +1 @@
-/// <reference types="react" />
-export declare const TreeDnD: () => JSX.Element;
 export declare const TreeDndPlugin = "tree-dnd";

package/types/react-desc-prop-types.d.ts

@@ -13,7 +13,7 @@ export declare namespace DSTreeviewT {
     interface SimpleItem {
         [key: string]: unknown;
         name: string;
-        children: SimpleItem[];
+        children?: SimpleItem[];
         id: StringOrNum;
     }
     interface Item extends SimpleItem {
@@ -27,9 +27,19 @@ export declare namespace DSTreeviewT {
         matchesSearchQuery?: boolean;
         nodeItemRef?: React.RefObject<HTMLLIElement>;
         model: TreeModel.Node<Item>['model'];
-        node: TreeModel.Node<Item>;
+        node: TreeModel.Node<Item> & {
+            parent?: TreeModel.Node<Item>;
+        };
         nodePath: TreeModel.Node<Item>[];
     }
+    interface DndItem {
+        uid: string;
+        depth: number;
+        realIndex: number;
+        childrenCount: number;
+        parentId: string | null;
+        original: SimpleItem;
+    }
     interface Actions {
         toggleExpandAll: (isExpand: boolean) => Promise<DSTreeviewT.Item[]>;
         scrollTo: DSTreeviewT.ScrollToFunc;
@@ -50,6 +60,7 @@ export declare namespace DSTreeviewT {
         fluid: boolean;
         isMultiSelect: boolean;
         isSingleSelect: boolean;
+        getIsDropValid: (active: DndItem, over: DndItem, dropIndicatorPosition: 'none' | 'before' | 'after' | 'inside') => boolean;
         restrictDragAndDrop: boolean;
         showChildrenAmount: boolean;
         sortable: boolean;
@@ -62,7 +73,7 @@ export declare namespace DSTreeviewT {
             item: Item;
         }) => void;
         onVisibleItemsChange: (newVisibleItems: Item[]) => void;
-        onOrderChange: (newData: Item[], oldData: Item[], draggedItem: Item) => void;
+        onOrderChange: (newData: SimpleItem[], oldData: SimpleItem[], draggedItem: DndItem) => void;
         onSelectionChange: (selection: SelectionItems, item: Item, meta: {
             scrollToItem: ScrollToItemFunc;
             itemIndex: number;
@@ -124,6 +135,9 @@ export declare const TreeViewPropTypes: {
     isLoading: {
         deprecated: import("react-desc").PropTypesDescValidator;
     };
+    getIsDropValid: {
+        deprecated: import("react-desc").PropTypesDescValidator;
+    };
     restrictDragAndDrop: {
         deprecated: import("react-desc").PropTypesDescValidator;
     };

package/types/sharedTypes.d.ts

@@ -19,22 +19,15 @@ export declare namespace DSTreeviewInternalsT {
     interface CTX {
         props: DSTreeviewT.Props;
         visibleItems: DSTreeviewT.Item[];
+        flattenedItems: DSTreeviewT.DndItem[];
         withRadioChecks: boolean;
         withCheckboxChecks: boolean;
         withDragAndDrop: boolean;
-        relativeMouseCord: MouseCoord;
-        setRelativeMouseCord: StateSetter<MouseCoord>;
         triggerTreeRerender: () => void;
         tree?: TreeModel;
         treeRoot?: TreeModel.Node<DSTreeviewT.Item>;
         virtualListHelpers: ReturnType<typeof useVirtual>;
         virtualListRef?: React.MutableRefObject<HTMLUListElement | undefined>;
-        isDragging: boolean;
-        setIsDragging: StateSetter<boolean>;
-        isKeyboardDragging: boolean;
-        setIsKeyboardDragging: StateSetter<boolean>;
-        draggedItem: DSTreeviewT.Item | null;
-        setDraggedItem: StateSetter<DSTreeviewT.Item | null>;
         uniqueTreeViewUUID: string;
         selectedItem: DSTreeviewT.Item | null;
         setSelectedItem: StateSetter<DSTreeviewT.Item | null>;

package/types/utils/keyboard-helpers.d.ts

@@ -1,5 +1,6 @@
 import type { DSTreeviewT } from '../react-desc-prop-types';
 import type { DSTreeviewInternalsT } from '../sharedTypes';
-export declare const useOnItemKeyDown: (item: DSTreeviewT.Item) => (e: React.KeyboardEvent<HTMLLIElement>) => void;
+import { SortableItemContextType } from '../hoc/SortableItemContext';
+export declare const useOnItemKeyDown: (item: DSTreeviewT.Item, draggableProps: SortableItemContextType['draggableProps']) => (e: React.KeyboardEvent<HTMLLIElement>) => void;
 export declare const useGlobalKeyboardListener: (func: (e: KeyboardEvent) => void) => void;
 export declare const useGlobalToggleAllExpandShortcut: (treeRoot: DSTreeviewT.Item['node'], triggerTreeRerender: () => void, setLatestToggledItem: DSTreeviewInternalsT.CTX['setLatestToggledItem'], updateUserExpandedState: DSTreeviewInternalsT.CTX['updateUserExpandedState']) => void;

package/types/utils/refs-helpers.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
-declare type GenericMergeableRef = null | undefined | React.MutableRefObject<unknown> | ((ref: HTMLElement) => void);
+declare type GenericMergeableRef = null | undefined | React.MutableRefObject<unknown> | ((ref: HTMLElement) => void) | false;
 export declare const setMultipleRefs: (...refs: GenericMergeableRef[]) => (ref: HTMLElement) => void;
 export {};

package/types/utils/tree-helpers.d.ts

@@ -7,7 +7,9 @@ export declare const walkAllNodeChildren: (node: DSTreeviewT.Item['node'], callb
 export declare const getNodeById: (treeRoot: DSTreeviewT.Item['node'], id: DSTreeviewT.StringOrNum) => TreeModel.Node<DSTreeviewT.Item>;
 export declare const cloneNode: (tree: TreeModel, node: DSTreeviewT.Item) => TreeModel.Node<DSTreeviewT.Item>;
 export declare const itemsShareSameParent: (items?: DSTreeviewT.Item[]) => boolean;
-export declare const getItemsParentNode: (items?: DSTreeviewT.Item[], skipSameParentCheck?: boolean) => TreeModel.Node<DSTreeviewT.Item>;
+export declare const getItemsParentNode: (items?: DSTreeviewT.Item[], skipSameParentCheck?: boolean) => TreeModel.Node<DSTreeviewT.Item> & {
+    parent?: TreeModel.Node<DSTreeviewT.Item> | undefined;
+};
 export declare const getNodeMatchesSearchQuery: (node: DSTreeviewT.Item['node'], searchQuery?: string) => boolean;
 export declare const getChildrenMatchesSearchQuery: (parentNode: DSTreeviewT.Item['node'], searchQuery?: string) => boolean;
 /**
@@ -22,4 +24,5 @@ export declare const getChildrenMatchesSearchQuery: (parentNode: DSTreeviewT.Ite
  */
 export declare const enrichNodeModelInPlace: (node: TreeModel.Node<DSTreeviewT.SimpleItem>, searchQuery?: string, selection?: DSTreeviewT.SelectionItems | null, expanded?: DSTreeviewT.ExpandedItems | null) => void;
 export declare const focusItem: (item: DSTreeviewT.Item | null) => void;
+export declare const flattenTreeForDnD: (data: DSTreeviewT.SimpleItem[], shouldDescend?: (datum: DSTreeviewT.SimpleItem) => boolean) => DSTreeviewT.DndItem[];
 export {};

package/types/utils/useTree.d.ts

@@ -5,6 +5,7 @@ export declare const useTree: (data: DSTreeviewT.SimpleItem[], props: DSTreeview
     setExpandedGroups: DSTreeviewInternalsT.StateSetter<DSTreeviewT.ExpandedItems>;
 }) => {
     visibleItems: DSTreeviewT.Item[];
+    flattenedItems: DSTreeviewT.DndItem[];
     tree: TreeModel;
     treeRoot: TreeModel.Node<DSTreeviewT.Item>;
     rerenderItems: {};

package/cjs/utils/dnd-helpers.js

@@ -1,146 +0,0 @@
-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 dnd_helpers_exports = {};
-__export(dnd_helpers_exports, {
-  inferHoverItemKinshipDrop: () => inferHoverItemKinshipDrop,
-  inferKeyboardKinshipDrop: () => inferKeyboardKinshipDrop,
-  isDropValid: () => isDropValid,
-  keyCodes: () => keyCodes,
-  sameParentAsHoverItemDrop: () => sameParentAsHoverItemDrop
-});
-var React = __toESM(require("react"));
-var import_tree_helpers = require("./tree-helpers");
-const keyCodes = {
-  lift: [32, 13],
-  drop: [32, 13],
-  cancel: [27],
-  up: [38, 37],
-  down: [40, 39]
-};
-const sameParentAsHoverItemDrop = ({
-  isBefore,
-  isAfter,
-  draggedItem,
-  overItem,
-  movementDirection
-}) => {
-  const hoveredItemNodeNestedIndex = overItem.node.getIndex();
-  let newParentNode = (0, import_tree_helpers.getItemsParentNode)([overItem], true);
-  const { treeDepth: draggedItemTreeDepth } = draggedItem;
-  const { treeDepth: overItemTreeDepth } = overItem;
-  const directionOffset = draggedItemTreeDepth <= overItemTreeDepth && movementDirection === "topToBottom" ? -1 : 0;
-  let newNestedIndex;
-  if (isBefore)
-    newNestedIndex = hoveredItemNodeNestedIndex + directionOffset;
-  else if (isAfter)
-    newNestedIndex = hoveredItemNodeNestedIndex + 1 + directionOffset;
-  else {
-    newNestedIndex = overItem.children.length;
-    newParentNode = overItem.node;
-  }
-  if (newNestedIndex < 0)
-    newNestedIndex = 0;
-  return {
-    newNestedIndex,
-    newParentNode
-  };
-};
-const inferHoverItemKinshipDrop = ({
-  isBefore,
-  isAfter,
-  draggedItem,
-  overItem,
-  movementDirection
-}) => {
-  const hoverItemModel = overItem.node.model;
-  const isGroupAndIsExpanded = hoverItemModel.isExpanded && hoverItemModel.children.length > 0;
-  if (isAfter && isGroupAndIsExpanded) {
-    return {
-      newNestedIndex: 0,
-      newParentNode: overItem.node
-    };
-  }
-  if (isBefore || isAfter && !isGroupAndIsExpanded) {
-    return sameParentAsHoverItemDrop({
-      isBefore,
-      isAfter,
-      draggedItem,
-      overItem,
-      movementDirection
-    });
-  }
-  return {
-    newNestedIndex: overItem.children.length,
-    newParentNode: overItem.node
-  };
-};
-const isDropValid = ({
-  isBefore,
-  isAfter,
-  draggedItem,
-  overItem,
-  restrictDragAndDrop
-}) => {
-  const { id: movedId } = draggedItem;
-  const { id: hoverId } = overItem;
-  const isInside = !isBefore && !isAfter;
-  if (movedId === hoverId)
-    return false;
-  if (isInside && !overItem.isGroup) {
-    return false;
-  }
-  if (restrictDragAndDrop) {
-    if (isInside)
-      return false;
-    const sameParent = (0, import_tree_helpers.itemsShareSameParent)([draggedItem, overItem]);
-    if (overItem.node.model.isExpanded && isAfter)
-      return false;
-    if (!sameParent)
-      return false;
-  }
-  return true;
-};
-const inferKeyboardKinshipDrop = ({
-  items,
-  newIndex
-}) => {
-  const kinship = {};
-  const itemBefore = items[newIndex];
-  const itemBeforeModel = itemBefore.node.model;
-  const isGroupAndIsExpanded = itemBeforeModel.isExpanded && itemBeforeModel.children.length > 0;
-  if (isGroupAndIsExpanded) {
-    kinship.newParentNode = itemBefore.node;
-    kinship.newNestedIndex = 0;
-  } else {
-    kinship.newParentNode = (0, import_tree_helpers.getItemsParentNode)([itemBefore], true);
-    kinship.newNestedIndex = itemBefore.node.getIndex();
-  }
-  return kinship;
-};
-module.exports = __toCommonJS(dnd_helpers_exports);
-//# sourceMappingURL=dnd-helpers.js.map

package/cjs/utils/dnd-helpers.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/utils/dnd-helpers.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-lines */\nimport { getItemsParentNode, itemsShareSameParent } from './tree-helpers';\nimport type { DSTreeviewT } from '../react-desc-prop-types';\nimport type { DSTreeviewInternalsT } from '../sharedTypes';\n\ninterface MetaInfoT {\n  isBefore: boolean;\n  isAfter: boolean;\n  draggedItem: DSTreeviewT.Item;\n  overItem: DSTreeviewT.Item;\n}\ninterface KinshipT {\n  newParentNode: DSTreeviewT.Item['node'];\n  newNestedIndex: number;\n}\n\nexport const keyCodes = {\n  lift: [32, 13],\n  drop: [32, 13],\n  cancel: [27],\n  up: [38, 37],\n  down: [40, 39],\n};\n\nexport const sameParentAsHoverItemDrop = ({\n  isBefore,\n  isAfter,\n\n  draggedItem,\n  overItem,\n  movementDirection,\n}: MetaInfoT & { movementDirection: DSTreeviewInternalsT.DnDMovementDirectionT }) => {\n  const hoveredItemNodeNestedIndex = overItem.node.getIndex();\n  let newParentNode = getItemsParentNode([overItem], true);\n\n  const { treeDepth: draggedItemTreeDepth } = draggedItem;\n  const { treeDepth: overItemTreeDepth } = overItem;\n  const directionOffset =\n    // we don't apply the offset for direction\n    //  if moving from less nested to more nested\n    //  or moving bottom to top\n    // the offset is required when moving elemnts down in their nest level\n    (draggedItemTreeDepth as number) <= (overItemTreeDepth as number) && movementDirection === 'topToBottom' ? -1 : 0;\n  let newNestedIndex;\n\n  if (isBefore) newNestedIndex = hoveredItemNodeNestedIndex + directionOffset;\n  else if (isAfter) newNestedIndex = hoveredItemNodeNestedIndex + 1 + directionOffset;\n  else {\n    newNestedIndex = overItem.children.length; // append as last child of the group\n    newParentNode = overItem.node;\n  }\n  if (newNestedIndex < 0) newNestedIndex = 0;\n  return {\n    newNestedIndex,\n    newParentNode,\n  };\n};\n\nexport const inferHoverItemKinshipDrop = ({\n  isBefore,\n  isAfter,\n\n  draggedItem,\n  overItem,\n  movementDirection,\n}: MetaInfoT & { movementDirection: DSTreeviewInternalsT.DnDMovementDirectionT }) => {\n  const hoverItemModel = overItem.node.model;\n  const isGroupAndIsExpanded = hoverItemModel.isExpanded && hoverItemModel.children.length > 0;\n\n  if (isAfter && isGroupAndIsExpanded) {\n    return {\n      newNestedIndex: 0, // append after the group, so basically as first child\n      newParentNode: overItem.node,\n    };\n  }\n\n  if (isBefore || (isAfter && !isGroupAndIsExpanded)) {\n    return sameParentAsHoverItemDrop({\n      isBefore,\n      isAfter,\n      draggedItem,\n      overItem,\n      movementDirection,\n    });\n  }\n\n  // drop inside\n  return {\n    newNestedIndex: overItem.children.length, // append as last child of the group\n    newParentNode: overItem.node,\n  };\n};\n\nexport const isDropValid = ({\n  isBefore,\n  isAfter,\n\n  draggedItem,\n  overItem,\n\n  restrictDragAndDrop,\n}: MetaInfoT & { restrictDragAndDrop: boolean }) => {\n  const { id: movedId } = draggedItem;\n  const { id: hoverId } = overItem;\n  const isInside = !isBefore && !isAfter;\n\n  if (movedId === hoverId) return false;\n\n  if (isInside && !overItem.isGroup) {\n    return false; // we can't drop inside an item that isn't a group\n  }\n\n  if (restrictDragAndDrop) {\n    if (isInside) return false; // in this mode we can't drop inside another element\n    const sameParent = itemsShareSameParent([draggedItem, overItem]);\n    if (overItem.node.model.isExpanded && isAfter) return false;\n    if (!sameParent) return false;\n  }\n\n  return true;\n};\n\nexport const inferKeyboardKinshipDrop = ({\n  items,\n\n  newIndex,\n}: {\n  items: DSTreeviewT.Item[];\n  newIndex: number;\n}) => {\n  const kinship: Partial<KinshipT> = {};\n\n  const itemBefore = items[newIndex];\n\n  const itemBeforeModel = itemBefore.node.model;\n  const isGroupAndIsExpanded = itemBeforeModel.isExpanded && itemBeforeModel.children.length > 0;\n\n  if (isGroupAndIsExpanded) {\n    kinship.newParentNode = itemBefore.node;\n    kinship.newNestedIndex = 0;\n  } else {\n    kinship.newParentNode = getItemsParentNode([itemBefore], true);\n    kinship.newNestedIndex = itemBefore.node.getIndex();\n  }\n\n  return kinship;\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,0BAAyD;AAelD,MAAM,WAAW;AAAA,EACtB,MAAM,CAAC,IAAI;AAAA,EACX,MAAM,CAAC,IAAI;AAAA,EACX,QAAQ,CAAC;AAAA,EACT,IAAI,CAAC,IAAI;AAAA,EACT,MAAM,CAAC,IAAI;AAAA;AAGN,MAAM,4BAA4B,CAAC;AAAA,EACxC;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,MACmF;AACnF,QAAM,6BAA6B,SAAS,KAAK;AACjD,MAAI,gBAAgB,4CAAmB,CAAC,WAAW;AAEnD,QAAM,EAAE,WAAW,yBAAyB;AAC5C,QAAM,EAAE,WAAW,sBAAsB;AACzC,QAAM,kBAKH,wBAAoC,qBAAgC,sBAAsB,gBAAgB,KAAK;AAClH,MAAI;AAEJ,MAAI;AAAU,qBAAiB,6BAA6B;AAAA,WACnD;AAAS,qBAAiB,6BAA6B,IAAI;AAAA,OAC/D;AACH,qBAAiB,SAAS,SAAS;AACnC,oBAAgB,SAAS;AAAA;AAE3B,MAAI,iBAAiB;AAAG,qBAAiB;AACzC,SAAO;AAAA,IACL;AAAA,IACA;AAAA;AAAA;AAIG,MAAM,4BAA4B,CAAC;AAAA,EACxC;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,MACmF;AACnF,QAAM,iBAAiB,SAAS,KAAK;AACrC,QAAM,uBAAuB,eAAe,cAAc,eAAe,SAAS,SAAS;AAE3F,MAAI,WAAW,sBAAsB;AACnC,WAAO;AAAA,MACL,gBAAgB;AAAA,MAChB,eAAe,SAAS;AAAA;AAAA;AAI5B,MAAI,YAAa,WAAW,CAAC,sBAAuB;AAClD,WAAO,0BAA0B;AAAA,MAC/B;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA;AAKJ,SAAO;AAAA,IACL,gBAAgB,SAAS,SAAS;AAAA,IAClC,eAAe,SAAS;AAAA;AAAA;AAIrB,MAAM,cAAc,CAAC;AAAA,EAC1B;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,EAEA;AAAA,MACkD;AAClD,QAAM,EAAE,IAAI,YAAY;AACxB,QAAM,EAAE,IAAI,YAAY;AACxB,QAAM,WAAW,CAAC,YAAY,CAAC;AAE/B,MAAI,YAAY;AAAS,WAAO;AAEhC,MAAI,YAAY,CAAC,SAAS,SAAS;AACjC,WAAO;AAAA;AAGT,MAAI,qBAAqB;AACvB,QAAI;AAAU,aAAO;AACrB,UAAM,aAAa,8CAAqB,CAAC,aAAa;AACtD,QAAI,SAAS,KAAK,MAAM,cAAc;AAAS,aAAO;AACtD,QAAI,CAAC;AAAY,aAAO;AAAA;AAG1B,SAAO;AAAA;AAGF,MAAM,2BAA2B,CAAC;AAAA,EACvC;AAAA,EAEA;AAAA,MAII;AACJ,QAAM,UAA6B;AAEnC,QAAM,aAAa,MAAM;AAEzB,QAAM,kBAAkB,WAAW,KAAK;AACxC,QAAM,uBAAuB,gBAAgB,cAAc,gBAAgB,SAAS,SAAS;AAE7F,MAAI,sBAAsB;AACxB,YAAQ,gBAAgB,WAAW;AACnC,YAAQ,iBAAiB;AAAA,SACpB;AACL,YAAQ,gBAAgB,4CAAmB,CAAC,aAAa;AACzD,YAAQ,iBAAiB,WAAW,KAAK;AAAA;AAG3C,SAAO;AAAA;",
-  "names": []
-}

package/cjs/utils/useDnDHelpers.js

@@ -1,199 +0,0 @@
-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 useDnDHelpers_exports = {};
-__export(useDnDHelpers_exports, {
-  useDnDHelpers: () => useDnDHelpers
-});
-var React = __toESM(require("react"));
-var import_react = require("react");
-var import_lodash = require("lodash");
-var import_TreeViewContext = __toESM(require("../TreeViewContext"));
-var import_tree_helpers = require("./tree-helpers");
-var import_dnd_helpers = require("./dnd-helpers");
-const useDnDHelpers = () => {
-  const ctx = (0, import_react.useContext)(import_TreeViewContext.default);
-  const {
-    props: { data, onOrderChange, restrictDragAndDrop },
-    relativeMouseCord,
-    setRelativeMouseCord,
-    visibleItems,
-    isDragging,
-    setIsDragging,
-    isKeyboardDragging,
-    setIsKeyboardDragging,
-    setDraggedItem,
-    setFocusedItem,
-    triggerTreeRerender,
-    tree,
-    treeRoot,
-    draggedItem
-  } = ctx;
-  const onSortEnd = (0, import_react.useCallback)(({ oldIndex, newIndex, isKeySorting }) => {
-    const { isBefore, isAfter, item: overItem, isValid } = relativeMouseCord;
-    if (draggedItem && tree && treeRoot && overItem) {
-      let newItems = (0, import_lodash.cloneDeep)(data);
-      if (oldIndex === newIndex || !isValid) {
-        setIsDragging(false);
-        setDraggedItem(null);
-        triggerTreeRerender();
-        return;
-      }
-      const movementDirection = newIndex > oldIndex ? "topToBottom" : "bottomToTop";
-      let newNestedIndex;
-      let newParentNode;
-      if (isKeySorting) {
-        const kinship = (0, import_dnd_helpers.inferKeyboardKinshipDrop)({
-          items: visibleItems,
-          newIndex
-        });
-        newNestedIndex = kinship.newNestedIndex;
-        newParentNode = kinship.newParentNode;
-      } else {
-        const kinship = (0, import_dnd_helpers.inferHoverItemKinshipDrop)({
-          isBefore,
-          isAfter,
-          overItem,
-          movementDirection,
-          draggedItem
-        });
-        newNestedIndex = kinship.newNestedIndex;
-        newParentNode = kinship.newParentNode;
-      }
-      const newMovedItemNode = tree.parse(draggedItem.node.model);
-      (0, import_tree_helpers.getNodeById)(treeRoot, draggedItem.id).drop();
-      if (newParentNode && typeof newNestedIndex === "number") {
-        newParentNode.addChildAtIndex(newMovedItemNode, newNestedIndex);
-        if (newParentNode.isRoot()) {
-          newItems = [...newParentNode.model.children];
-        } else {
-          newItems = [...treeRoot.model.children];
-        }
-      }
-      onOrderChange(newItems, data, draggedItem);
-      setIsDragging(false);
-      setDraggedItem(null);
-      triggerTreeRerender();
-    }
-  }, [
-    data,
-    draggedItem,
-    relativeMouseCord,
-    visibleItems,
-    tree,
-    treeRoot,
-    onOrderChange,
-    triggerTreeRerender,
-    setIsDragging,
-    setDraggedItem
-  ]);
-  const onSortStart = (0, import_react.useCallback)(() => {
-  }, []);
-  const updateBeforeSortStart = (0, import_react.useCallback)((beforeStartArgs) => new Promise((resolve) => {
-    const { index, isKeySorting } = beforeStartArgs;
-    const item = visibleItems[index];
-    const { isExpanded } = item.node.model;
-    if (isExpanded) {
-      item.node.model.isExpanded = false;
-      triggerTreeRerender();
-    }
-    setRelativeMouseCord(import_TreeViewContext.defaultRelativeMouseCoord);
-    setIsKeyboardDragging(isKeySorting);
-    setIsDragging(true);
-    setDraggedItem(item);
-    (0, import_tree_helpers.focusItem)(null);
-    setFocusedItem(null);
-    if (document.activeElement && typeof document.activeElement.blur === "function")
-      document.activeElement.blur();
-    resolve(true);
-  }), [
-    visibleItems,
-    setRelativeMouseCord,
-    setIsKeyboardDragging,
-    setIsDragging,
-    setDraggedItem,
-    setFocusedItem,
-    triggerTreeRerender
-  ]);
-  const onMouseDragOverItem = (0, import_react.useCallback)(({
-    event,
-    item,
-    itemIndex,
-    setIsDraggingOverThis,
-    openFolderOnHoverTimeout
-  }) => {
-    const { node } = item;
-    const { nodeItemRef } = node.model;
-    if (isDragging && !isKeyboardDragging && draggedItem) {
-      const rect = nodeItemRef?.current?.getBoundingClientRect();
-      if (rect) {
-        const x = event.clientX - rect.left;
-        const y = event.clientY - rect.top;
-        const { height: elementHeight } = rect;
-        const dropBeforeMaxY = elementHeight * 0.25;
-        const dropAfterMinY = elementHeight - elementHeight * 0.25;
-        const isBefore = y < dropBeforeMaxY;
-        const isAfter = y > dropAfterMinY;
-        const isValid = (0, import_dnd_helpers.isDropValid)({
-          isBefore,
-          isAfter,
-          draggedItem,
-          overItem: item,
-          restrictDragAndDrop
-        });
-        setRelativeMouseCord({
-          isBefore,
-          isAfter,
-          isValid,
-          item,
-          x,
-          y,
-          relativeElementDOMRect: rect,
-          relativeElementIndex: itemIndex
-        });
-        setIsDraggingOverThis(true);
-        if (!openFolderOnHoverTimeout?.current && draggedItem?.id !== item?.id && (item.isGroup || item.children.length > 0) && !restrictDragAndDrop) {
-          openFolderOnHoverTimeout.current = setTimeout(() => {
-            item.node.model.isExpanded = true;
-            openFolderOnHoverTimeout.current = null;
-            triggerTreeRerender();
-          }, 1e3);
-        }
-      }
-    } else {
-      setRelativeMouseCord(import_TreeViewContext.defaultRelativeMouseCoord);
-    }
-  }, [isDragging, isKeyboardDragging, draggedItem, restrictDragAndDrop, setRelativeMouseCord, triggerTreeRerender]);
-  return {
-    updateBeforeSortStart,
-    onSortStart,
-    onSortEnd,
-    onMouseDragOverItem
-  };
-};
-module.exports = __toCommonJS(useDnDHelpers_exports);
-//# sourceMappingURL=useDnDHelpers.js.map

package/cjs/utils/useDnDHelpers.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/utils/useDnDHelpers.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-depth */\n/* eslint-disable no-lonely-if */\n/* eslint-disable max-lines */\n/* eslint-disable complexity */\n/* eslint-disable max-statements */\nimport React, { useContext, useCallback } from 'react';\nimport { cloneDeep } from 'lodash';\n\nimport TreeViewContext, { defaultRelativeMouseCoord } from '../TreeViewContext';\nimport { getNodeById, focusItem } from './tree-helpers';\nimport { inferHoverItemKinshipDrop, inferKeyboardKinshipDrop, isDropValid } from './dnd-helpers';\nimport type { DSTreeviewT } from '../react-desc-prop-types';\nimport type { DSTreeviewInternalsT } from '../sharedTypes';\n\nexport const useDnDHelpers = () => {\n  const ctx = useContext(TreeViewContext);\n\n  const {\n    props: { data, onOrderChange, restrictDragAndDrop },\n    relativeMouseCord,\n    setRelativeMouseCord,\n    visibleItems,\n    isDragging,\n    setIsDragging,\n    isKeyboardDragging,\n    setIsKeyboardDragging,\n    setDraggedItem,\n    setFocusedItem,\n    triggerTreeRerender,\n    tree,\n    treeRoot,\n    draggedItem,\n  } = ctx;\n\n  const onSortEnd = useCallback(\n    ({ oldIndex, newIndex, isKeySorting }: { oldIndex: number; newIndex: number; isKeySorting: boolean }) => {\n      const { isBefore, isAfter, item: overItem, isValid } = relativeMouseCord;\n      if (draggedItem && tree && treeRoot && overItem) {\n        let newItems = cloneDeep(data);\n        // if dropping in same position do nothing\n        // if the drop is not allowed do nothing\n        if (oldIndex === newIndex || !isValid) {\n          // onOrderChange(newItems, data);\n          setIsDragging(false);\n          setDraggedItem(null);\n          triggerTreeRerender();\n          return;\n        }\n\n        // if we are moving from topToBottom the offset changes\n        const movementDirection = newIndex > oldIndex ? ('topToBottom' as const) : ('bottomToTop' as const);\n\n        let newNestedIndex;\n        let newParentNode;\n        if (isKeySorting) {\n          const kinship = inferKeyboardKinshipDrop({\n            items: visibleItems,\n\n            newIndex,\n          });\n          newNestedIndex = kinship.newNestedIndex;\n          newParentNode = kinship.newParentNode;\n        } else {\n          const kinship = inferHoverItemKinshipDrop({\n            isBefore,\n            isAfter,\n            overItem,\n            movementDirection,\n            draggedItem,\n          });\n          newNestedIndex = kinship.newNestedIndex;\n          newParentNode = kinship.newParentNode;\n        }\n\n        const newMovedItemNode = tree.parse(draggedItem.node.model);\n        getNodeById(treeRoot, draggedItem.id).drop();\n        if (newParentNode && typeof newNestedIndex === 'number') {\n          newParentNode.addChildAtIndex(newMovedItemNode, newNestedIndex);\n\n          if (newParentNode.isRoot()) {\n            newItems = [...newParentNode.model.children];\n          } else {\n            newItems = [...treeRoot.model.children];\n          }\n        }\n\n        onOrderChange(newItems, data, draggedItem);\n        setIsDragging(false);\n        setDraggedItem(null);\n        triggerTreeRerender();\n      }\n    },\n    [\n      data,\n      draggedItem,\n      relativeMouseCord,\n      visibleItems,\n      tree,\n      treeRoot,\n      onOrderChange,\n      triggerTreeRerender,\n      setIsDragging,\n      setDraggedItem,\n    ],\n  );\n\n  const onSortStart = useCallback(\n    () => {},\n    // ({ node, index, collection, isKeySorting }, event) => {\n    // console.log('node :>> ', node);\n    // console.log('isKeySorting :>> ', isKeySorting);\n    // console.log('event :>> ', event);\n    // const item = collection?.[index] || visibleItems[index];\n    // setIsDragging(true);\n    // setDraggedItem(item);\n    // },\n    [],\n  );\n\n  const updateBeforeSortStart = useCallback(\n    (beforeStartArgs: { index: number; isKeySorting: boolean }) =>\n      new Promise((resolve) => {\n        const { index, isKeySorting } = beforeStartArgs;\n\n        const item = visibleItems[index];\n        const { isExpanded } = item.node.model;\n\n        if (isExpanded) {\n          item.node.model.isExpanded = false;\n          triggerTreeRerender();\n        }\n        setRelativeMouseCord(defaultRelativeMouseCoord);\n        setIsKeyboardDragging(isKeySorting);\n        setIsDragging(true);\n        setDraggedItem(item);\n        focusItem(null);\n        setFocusedItem(null);\n        if (document.activeElement && typeof (document.activeElement as HTMLElement).blur === 'function')\n          (document.activeElement as HTMLElement).blur();\n        resolve(true);\n      }),\n    [\n      visibleItems,\n      setRelativeMouseCord,\n      setIsKeyboardDragging,\n      setIsDragging,\n      setDraggedItem,\n      setFocusedItem,\n      triggerTreeRerender,\n    ],\n  );\n\n  // tracks mouse coords relative to an element to check if the drop happens\n  // at the top/center/bottom of an element to choose where to move the element\n  // requested in the specs\n  const onMouseDragOverItem = useCallback(\n    ({\n      event,\n      item,\n      itemIndex,\n      setIsDraggingOverThis,\n      openFolderOnHoverTimeout,\n    }: {\n      event: React.MouseEvent<HTMLLIElement>;\n      item: DSTreeviewT.Item;\n      itemIndex: number;\n      setIsDraggingOverThis: DSTreeviewInternalsT.StateSetter<boolean>;\n      openFolderOnHoverTimeout: React.MutableRefObject<NodeJS.Timeout | null>;\n    }) => {\n      const { node } = item;\n      const { nodeItemRef } = node.model;\n      if (isDragging && !isKeyboardDragging && draggedItem) {\n        const rect = nodeItemRef?.current?.getBoundingClientRect();\n        if (rect) {\n          const x = event.clientX - rect.left; // x position within the element.\n          const y = event.clientY - rect.top; // y position within the element.\n\n          // by spec we need to track where the drop will happens\n          // if drop happens on top 25% drop before\n          // if drop happens on bottom of 25% drop after\n          // if drop happens in the middle 50% either invalid or drop into children\n          const { height: elementHeight } = rect;\n          const dropBeforeMaxY = elementHeight * 0.25;\n          const dropAfterMinY = elementHeight - elementHeight * 0.25;\n          const isBefore = y < dropBeforeMaxY;\n          const isAfter = y > dropAfterMinY;\n          const isValid = isDropValid({\n            isBefore,\n            isAfter,\n            draggedItem,\n            overItem: item,\n            restrictDragAndDrop,\n          });\n          setRelativeMouseCord({\n            isBefore,\n            isAfter,\n            isValid,\n            item,\n            x,\n            y,\n            relativeElementDOMRect: rect,\n            relativeElementIndex: itemIndex,\n          });\n          setIsDraggingOverThis(true);\n\n          if (\n            !openFolderOnHoverTimeout?.current && // only set the interval if it wasn't set already once\n            draggedItem?.id !== item?.id && // don't open ghost element\n            (item.isGroup || item.children.length > 0) && // only open groups\n            !restrictDragAndDrop\n          ) {\n            openFolderOnHoverTimeout.current = setTimeout(() => {\n              item.node.model.isExpanded = true;\n              openFolderOnHoverTimeout.current = null;\n              triggerTreeRerender();\n            }, 1000);\n          }\n        }\n      } else {\n        setRelativeMouseCord(defaultRelativeMouseCoord);\n      }\n    },\n    [isDragging, isKeyboardDragging, draggedItem, restrictDragAndDrop, setRelativeMouseCord, triggerTreeRerender],\n  );\n\n  return {\n    updateBeforeSortStart,\n    onSortStart,\n    onSortEnd,\n    onMouseDragOverItem,\n  };\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
-  "names": []
-}