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

package/cjs/sharedTypes.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/sharedTypes.ts", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import TreeModel from 'tree-model';\nimport { useVirtual } from 'react-virtual';\nimport type { SetStateAction } from 'react';\nimport type { DSTreeviewT } from './react-desc-prop-types';\n\nexport declare namespace DSTreeviewInternalsT {\n  export type GenericFunc<T extends unknown[]> = (..._args: T) => void;\n  export type DnDMovementDirectionT = 'topToBottom' | 'bottomToTop';\n  export interface MouseCoord {\n    isBefore: boolean;\n    isAfter: boolean;\n    isValid: boolean;\n    item: DSTreeviewT.Item | null;\n    x: number | null;\n    y: number | null;\n    relativeElementDOMRect: DOMRect | null;\n    relativeElementIndex: number | null;\n  }\n\n  export type StateSetter<T = unknown> = React.Dispatch<SetStateAction<T>>;\n\n  export interface CTX {\n    props: DSTreeviewT.Props;\n    visibleItems: DSTreeviewT.Item[];\n    withRadioChecks: boolean;\n    withCheckboxChecks: boolean;\n    withDragAndDrop: boolean;\n    relativeMouseCord: MouseCoord;\n    setRelativeMouseCord: StateSetter<MouseCoord>;\n    triggerTreeRerender: () => void;\n    tree?: TreeModel;\n    treeRoot?: TreeModel.Node<DSTreeviewT.Item>;\n    virtualListHelpers: ReturnType<typeof useVirtual>;\n    virtualListRef?: React.MutableRefObject<HTMLUListElement | undefined>;\n    isDragging: boolean;\n    setIsDragging: StateSetter<boolean>;\n    isKeyboardDragging: boolean;\n    setIsKeyboardDragging: StateSetter<boolean>;\n    draggedItem: DSTreeviewT.Item | null;\n    setDraggedItem: StateSetter<DSTreeviewT.Item | null>;\n    uniqueTreeViewUUID: string;\n    selectedItem: DSTreeviewT.Item | null;\n    setSelectedItem: StateSetter<DSTreeviewT.Item | null>;\n    focusedItem: DSTreeviewT.Item | null;\n    setFocusedItem: StateSetter<DSTreeviewT.Item | null>;\n    selectedCheckboxes: DSTreeviewT.SelectionItems;\n    setSelectedCheckboxes: StateSetter<DSTreeviewT.SelectionItems>;\n    expandedGroups: DSTreeviewT.ExpandedItems;\n    setExpandedGroups: StateSetter<DSTreeviewT.ExpandedItems>;\n    latestToggledItem?: DSTreeviewT.Item | null | undefined; // item -> if toggle all -> should be undefined\n    setLatestToggledItem: StateSetter<DSTreeviewT.Item | null>;\n    hoverItem: DSTreeviewT.Item | null;\n    setHoverItem: StateSetter<DSTreeviewT.Item | null>;\n    handleExpandGroup: (\n      itemToToggle: DSTreeviewT.Item,\n      triggerTreeRerender: () => void,\n      updateUserExpandedState: () => void,\n      scrollTo?: DSTreeviewT.ScrollToFunc,\n      e?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,\n    ) => void;\n    updateUserExpandedState: () => void;\n  }\n}\n", "import * as React from 'react';\nexport { React };\n"],
+  "sourcesContent": ["import TreeModel from 'tree-model';\nimport { useVirtual } from 'react-virtual';\nimport type { SetStateAction } from 'react';\nimport type { DSTreeviewT } from './react-desc-prop-types';\n\nexport declare namespace DSTreeviewInternalsT {\n  export type GenericFunc<T extends unknown[]> = (..._args: T) => void;\n  export type DnDMovementDirectionT = 'topToBottom' | 'bottomToTop';\n  export interface MouseCoord {\n    isBefore: boolean;\n    isAfter: boolean;\n    isValid: boolean;\n    item: DSTreeviewT.Item | null;\n    x: number | null;\n    y: number | null;\n    relativeElementDOMRect: DOMRect | null;\n    relativeElementIndex: number | null;\n  }\n\n  export type StateSetter<T = unknown> = React.Dispatch<SetStateAction<T>>;\n\n  export interface CTX {\n    props: DSTreeviewT.Props;\n    visibleItems: DSTreeviewT.Item[];\n    flattenedItems: DSTreeviewT.DndItem[];\n    withRadioChecks: boolean;\n    withCheckboxChecks: boolean;\n    withDragAndDrop: boolean;\n    triggerTreeRerender: () => void;\n    tree?: TreeModel;\n    treeRoot?: TreeModel.Node<DSTreeviewT.Item>;\n    virtualListHelpers: ReturnType<typeof useVirtual>;\n    virtualListRef?: React.MutableRefObject<HTMLUListElement | undefined>;\n    uniqueTreeViewUUID: string;\n    selectedItem: DSTreeviewT.Item | null;\n    setSelectedItem: StateSetter<DSTreeviewT.Item | null>;\n    focusedItem: DSTreeviewT.Item | null;\n    setFocusedItem: StateSetter<DSTreeviewT.Item | null>;\n    selectedCheckboxes: DSTreeviewT.SelectionItems;\n    setSelectedCheckboxes: StateSetter<DSTreeviewT.SelectionItems>;\n    expandedGroups: DSTreeviewT.ExpandedItems;\n    setExpandedGroups: StateSetter<DSTreeviewT.ExpandedItems>;\n    latestToggledItem?: DSTreeviewT.Item | null | undefined; // item -> if toggle all -> should be undefined\n    setLatestToggledItem: StateSetter<DSTreeviewT.Item | null>;\n    hoverItem: DSTreeviewT.Item | null;\n    setHoverItem: StateSetter<DSTreeviewT.Item | null>;\n    handleExpandGroup: (\n      itemToToggle: DSTreeviewT.Item,\n      triggerTreeRerender: () => void,\n      updateUserExpandedState: () => void,\n      scrollTo?: DSTreeviewT.ScrollToFunc,\n      e?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,\n    ) => void;\n    updateUserExpandedState: () => void;\n  }\n}\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;ACAA,YAAuB;",
   "names": []
 }

package/cjs/utils/keyboard-helpers.js

@@ -36,12 +36,11 @@ var import_react = require("react");
 var import_TreeViewContext = __toESM(require("../TreeViewContext"));
 var import_tree_helpers = require("./tree-helpers");
 var import_group_expands_helpers = require("./group-expands-helpers");
-const useOnItemKeyDown = (item) => {
+const useOnItemKeyDown = (item, draggableProps) => {
   const ctx = (0, import_react.useContext)(import_TreeViewContext.default);
   const {
     props: { onItemFocus },
     triggerTreeRerender,
-    isDragging,
     visibleItems,
     setFocusedItem,
     setSelectedItem,
@@ -57,11 +56,12 @@ const useOnItemKeyDown = (item) => {
   }), [onItemFocus, scrollToIndex]);
   const onItemKeyDown = (0, import_react.useCallback)((e) => {
     const { keyCode } = e;
-    if (!isDragging) {
+    if (!(draggableProps && draggableProps.active)) {
       if (keyCode !== 9)
         e.preventDefault();
-      if (keyCode === 13 || keyCode === 32)
+      if ((keyCode === 13 || keyCode === 32) && e.target.tagName === "LI") {
         setSelectedItem(item);
+      }
       if (keyCode === 37) {
         if (isGroup && isExpanded) {
           (0, import_group_expands_helpers.toggleItemExpand)(item, triggerTreeRerender, updateUserExpandedState, scrollToIndex);
@@ -136,18 +136,18 @@ const useOnItemKeyDown = (item) => {
       }
     }
   }, [
-    isDragging,
+    draggableProps,
     setSelectedItem,
     item,
     isGroup,
     isExpanded,
     triggerTreeRerender,
+    updateUserExpandedState,
     scrollToIndex,
     setLatestToggledItem,
     visibleItems,
     setFocusedItem,
-    onItemFocusCurry,
-    updateUserExpandedState
+    onItemFocusCurry
   ]);
   return onItemKeyDown;
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/utils/keyboard-helpers.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-params */\n/* eslint-disable max-lines */\n/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport { useCallback, useContext, useEffect } from 'react';\nimport TreeViewContext from '../TreeViewContext';\nimport { focusItem } from './tree-helpers';\nimport { toggleExpandAllHelper, toggleItemExpand } from './group-expands-helpers';\nimport type { DSTreeviewT } from '../react-desc-prop-types';\nimport type { DSTreeviewInternalsT } from '../sharedTypes';\n\n// 9 tab\n// 13 enter\n// 32 space\n// 37 left arrow\n// 38 up arrow\n// 39 right arrow\n// 40 down arrow\n// 35 end\n// 36 home\n\n// 56 number 8\n// 106 (NumPad) *\n\nexport const useOnItemKeyDown = (item: DSTreeviewT.Item) => {\n  const ctx = useContext(TreeViewContext);\n  const {\n    props: { onItemFocus },\n    triggerTreeRerender,\n    isDragging,\n    visibleItems,\n    setFocusedItem,\n    setSelectedItem,\n    setLatestToggledItem,\n    updateUserExpandedState,\n    virtualListHelpers: { scrollToIndex },\n  } = ctx;\n  const { isGroup, isExpanded } = item;\n  const onItemFocusCurry = useCallback(\n    (newFocusItem: DSTreeviewT.Item) =>\n      onItemFocus({\n        itemIndex: newFocusItem.virtualIndex as number,\n        scrollToItem: (opts = { align: 'start' }) => scrollToIndex(newFocusItem.virtualIndex as number, opts),\n        item: newFocusItem,\n      }),\n    [onItemFocus, scrollToIndex],\n  );\n\n  const onItemKeyDown = useCallback(\n    (e: React.KeyboardEvent<HTMLLIElement>) => {\n      const { keyCode } = e;\n      if (!isDragging) {\n        if (keyCode !== 9) e.preventDefault(); // allow tab/shift+tab\n        if (keyCode === 13 || keyCode === 32) setSelectedItem(item);\n\n        if (keyCode === 37) {\n          if (isGroup && isExpanded) {\n            toggleItemExpand(item, triggerTreeRerender, updateUserExpandedState, scrollToIndex);\n            setLatestToggledItem(item);\n          }\n        }\n        if (keyCode === 39) {\n          if (isGroup && !isExpanded) {\n            toggleItemExpand(item, triggerTreeRerender, updateUserExpandedState, scrollToIndex);\n            setLatestToggledItem(item);\n          }\n        }\n\n        const { virtualIndex } = item;\n        if (typeof virtualIndex === 'number') {\n          const lastItemIndex = visibleItems.length - 1;\n          if (keyCode === 38) {\n            const isLoopedFocus = virtualIndex === 0;\n            const newFocusIndex = isLoopedFocus ? lastItemIndex : virtualIndex - 1;\n            const newFocusItem = visibleItems[newFocusIndex];\n            scrollToIndex(newFocusIndex);\n            if (isLoopedFocus) {\n              // when looping the list from start to end we need to wait a bit before focusing\n              setTimeout(() => {\n                setFocusedItem(newFocusItem);\n                focusItem(newFocusItem);\n                onItemFocusCurry(newFocusItem);\n              }, 300);\n            } else {\n              setFocusedItem(newFocusItem);\n              onItemFocusCurry(newFocusItem);\n              focusItem(newFocusItem);\n            }\n          }\n          if (keyCode === 40) {\n            const isLoopedFocus = virtualIndex === lastItemIndex;\n            const newFocusIndex = isLoopedFocus ? 0 : virtualIndex + 1;\n            const newFocusItem = visibleItems[newFocusIndex];\n            scrollToIndex(newFocusIndex);\n            if (isLoopedFocus) {\n              // when looping the list from start to end we need to wait a bit before focusing\n              setTimeout(() => {\n                setFocusedItem(newFocusItem);\n                onItemFocusCurry(newFocusItem);\n                focusItem(newFocusItem);\n              }, 300);\n            } else {\n              setFocusedItem(newFocusItem);\n              onItemFocusCurry(newFocusItem);\n              focusItem(newFocusItem);\n            }\n          }\n          if (keyCode === 35) {\n            if (virtualIndex !== lastItemIndex) {\n              const newFocusItem = visibleItems[lastItemIndex];\n              scrollToIndex(lastItemIndex);\n              setTimeout(() => {\n                setFocusedItem(newFocusItem);\n                onItemFocusCurry(newFocusItem);\n                focusItem(newFocusItem);\n              }, 300);\n            }\n          }\n          if (keyCode === 36) {\n            if (virtualIndex !== 0) {\n              const newFocusItem = visibleItems[0];\n              scrollToIndex(0);\n              setTimeout(() => {\n                setFocusedItem(newFocusItem);\n                onItemFocusCurry(newFocusItem);\n                focusItem(newFocusItem);\n              }, 300);\n            }\n          }\n        }\n      }\n    },\n    [\n      isDragging,\n      setSelectedItem,\n      item,\n      isGroup,\n      isExpanded,\n      triggerTreeRerender,\n      scrollToIndex,\n      setLatestToggledItem,\n      visibleItems,\n      setFocusedItem,\n      onItemFocusCurry,\n      updateUserExpandedState,\n    ],\n  );\n\n  return onItemKeyDown;\n};\n\nexport const useGlobalKeyboardListener = (func: (e: KeyboardEvent) => void) => {\n  useEffect(() => {\n    document.addEventListener('keydown', func);\n    return () => document.removeEventListener('keydown', func);\n  }, [func]);\n};\n\nexport const useGlobalToggleAllExpandShortcut = (\n  treeRoot: DSTreeviewT.Item['node'],\n  triggerTreeRerender: () => void,\n  setLatestToggledItem: DSTreeviewInternalsT.CTX['setLatestToggledItem'],\n  updateUserExpandedState: DSTreeviewInternalsT.CTX['updateUserExpandedState'],\n) => {\n  const memoizedToggleAllKeyboardShortcut = useCallback(\n    (e: KeyboardEvent) => {\n      const { shiftKey, keyCode } = e;\n      if (shiftKey && keyCode === 56) {\n        toggleExpandAllHelper('toggle', treeRoot, triggerTreeRerender, setLatestToggledItem, updateUserExpandedState);\n      }\n    },\n    [setLatestToggledItem, treeRoot, triggerTreeRerender, updateUserExpandedState],\n  );\n\n  return useGlobalKeyboardListener(memoizedToggleAllKeyboardShortcut);\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable max-params */\n/* eslint-disable max-lines */\n/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport { useCallback, useContext, useEffect } from 'react';\nimport TreeViewContext from '../TreeViewContext';\nimport { focusItem } from './tree-helpers';\nimport { toggleExpandAllHelper, toggleItemExpand } from './group-expands-helpers';\nimport type { DSTreeviewT } from '../react-desc-prop-types';\nimport type { DSTreeviewInternalsT } from '../sharedTypes';\nimport { SortableItemContextType } from '../hoc/SortableItemContext';\n\n// 9 tab\n// 13 enter\n// 32 space\n// 37 left arrow\n// 38 up arrow\n// 39 right arrow\n// 40 down arrow\n// 35 end\n// 36 home\n\n// 56 number 8\n// 106 (NumPad) *\n\nexport const useOnItemKeyDown = (item: DSTreeviewT.Item, draggableProps: SortableItemContextType['draggableProps']) => {\n  const ctx = useContext(TreeViewContext);\n  const {\n    props: { onItemFocus },\n    triggerTreeRerender,\n    visibleItems,\n    setFocusedItem,\n    setSelectedItem,\n    setLatestToggledItem,\n    updateUserExpandedState,\n    virtualListHelpers: { scrollToIndex },\n  } = ctx;\n  const { isGroup, isExpanded } = item;\n  const onItemFocusCurry = useCallback(\n    (newFocusItem: DSTreeviewT.Item) =>\n      onItemFocus({\n        itemIndex: newFocusItem.virtualIndex as number,\n        scrollToItem: (opts = { align: 'start' }) => scrollToIndex(newFocusItem.virtualIndex as number, opts),\n        item: newFocusItem,\n      }),\n    [onItemFocus, scrollToIndex],\n  );\n\n  const onItemKeyDown = useCallback(\n    (e: React.KeyboardEvent<HTMLLIElement>) => {\n      const { keyCode } = e;\n      if (!(draggableProps && draggableProps.active)) {\n        if (keyCode !== 9) e.preventDefault(); // allow tab/shift+tab\n        if ((keyCode === 13 || keyCode === 32) && (e.target as HTMLElement).tagName === 'LI') {\n          setSelectedItem(item);\n        }\n\n        if (keyCode === 37) {\n          if (isGroup && isExpanded) {\n            toggleItemExpand(item, triggerTreeRerender, updateUserExpandedState, scrollToIndex);\n            setLatestToggledItem(item);\n          }\n        }\n        if (keyCode === 39) {\n          if (isGroup && !isExpanded) {\n            toggleItemExpand(item, triggerTreeRerender, updateUserExpandedState, scrollToIndex);\n            setLatestToggledItem(item);\n          }\n        }\n\n        const { virtualIndex } = item;\n        if (typeof virtualIndex === 'number') {\n          const lastItemIndex = visibleItems.length - 1;\n          if (keyCode === 38) {\n            const isLoopedFocus = virtualIndex === 0;\n            const newFocusIndex = isLoopedFocus ? lastItemIndex : virtualIndex - 1;\n            const newFocusItem = visibleItems[newFocusIndex];\n            scrollToIndex(newFocusIndex);\n            if (isLoopedFocus) {\n              // when looping the list from start to end we need to wait a bit before focusing\n              setTimeout(() => {\n                setFocusedItem(newFocusItem);\n                focusItem(newFocusItem);\n                onItemFocusCurry(newFocusItem);\n              }, 300);\n            } else {\n              setFocusedItem(newFocusItem);\n              onItemFocusCurry(newFocusItem);\n              focusItem(newFocusItem);\n            }\n          }\n          if (keyCode === 40) {\n            const isLoopedFocus = virtualIndex === lastItemIndex;\n            const newFocusIndex = isLoopedFocus ? 0 : virtualIndex + 1;\n            const newFocusItem = visibleItems[newFocusIndex];\n            scrollToIndex(newFocusIndex);\n            if (isLoopedFocus) {\n              // when looping the list from start to end we need to wait a bit before focusing\n              setTimeout(() => {\n                setFocusedItem(newFocusItem);\n                onItemFocusCurry(newFocusItem);\n                focusItem(newFocusItem);\n              }, 300);\n            } else {\n              setFocusedItem(newFocusItem);\n              onItemFocusCurry(newFocusItem);\n              focusItem(newFocusItem);\n            }\n          }\n          if (keyCode === 35) {\n            if (virtualIndex !== lastItemIndex) {\n              const newFocusItem = visibleItems[lastItemIndex];\n              scrollToIndex(lastItemIndex);\n              setTimeout(() => {\n                setFocusedItem(newFocusItem);\n                onItemFocusCurry(newFocusItem);\n                focusItem(newFocusItem);\n              }, 300);\n            }\n          }\n          if (keyCode === 36) {\n            if (virtualIndex !== 0) {\n              const newFocusItem = visibleItems[0];\n              scrollToIndex(0);\n              setTimeout(() => {\n                setFocusedItem(newFocusItem);\n                onItemFocusCurry(newFocusItem);\n                focusItem(newFocusItem);\n              }, 300);\n            }\n          }\n        }\n      }\n    },\n    [\n      draggableProps,\n      setSelectedItem,\n      item,\n      isGroup,\n      isExpanded,\n      triggerTreeRerender,\n      updateUserExpandedState,\n      scrollToIndex,\n      setLatestToggledItem,\n      visibleItems,\n      setFocusedItem,\n      onItemFocusCurry,\n    ],\n  );\n\n  return onItemKeyDown;\n};\n\nexport const useGlobalKeyboardListener = (func: (e: KeyboardEvent) => void) => {\n  useEffect(() => {\n    document.addEventListener('keydown', func);\n    return () => document.removeEventListener('keydown', func);\n  }, [func]);\n};\n\nexport const useGlobalToggleAllExpandShortcut = (\n  treeRoot: DSTreeviewT.Item['node'],\n  triggerTreeRerender: () => void,\n  setLatestToggledItem: DSTreeviewInternalsT.CTX['setLatestToggledItem'],\n  updateUserExpandedState: DSTreeviewInternalsT.CTX['updateUserExpandedState'],\n) => {\n  const memoizedToggleAllKeyboardShortcut = useCallback(\n    (e: KeyboardEvent) => {\n      const { shiftKey, keyCode } = e;\n      if (shiftKey && keyCode === 56) {\n        toggleExpandAllHelper('toggle', treeRoot, triggerTreeRerender, setLatestToggledItem, updateUserExpandedState);\n      }\n    },\n    [setLatestToggledItem, treeRoot, triggerTreeRerender, updateUserExpandedState],\n  );\n\n  return useGlobalKeyboardListener(memoizedToggleAllKeyboardShortcut);\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/utils/refs-helpers.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["// allow multiple refs to be set to point to the same DOM element\ntype GenericMergeableRef = null | undefined | React.MutableRefObject<unknown> | ((ref: HTMLElement) => void);\nexport const setMultipleRefs = (...refs: GenericMergeableRef[]): ((ref: HTMLElement) => void) => {\n  const filteredRefs = refs.filter(Boolean);\n  if (!filteredRefs.length) return () => {};\n  if (filteredRefs.length === 0) return () => {};\n\n  return (newRef) => {\n    filteredRefs.forEach((refToBeUpdated) => {\n      if (typeof refToBeUpdated === 'function') {\n        refToBeUpdated(newRef);\n      } else if (refToBeUpdated) {\n        refToBeUpdated.current = newRef;\n      }\n    });\n  };\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "sourcesContent": ["// allow multiple refs to be set to point to the same DOM element\ntype GenericMergeableRef = null | undefined | React.MutableRefObject<unknown> | ((ref: HTMLElement) => void) | false;\nexport const setMultipleRefs = (...refs: GenericMergeableRef[]): ((ref: HTMLElement) => void) => {\n  const filteredRefs = refs.filter(Boolean);\n  if (!filteredRefs.length) return () => {};\n  if (filteredRefs.length === 0) return () => {};\n\n  return (newRef) => {\n    filteredRefs.forEach((refToBeUpdated) => {\n      if (typeof refToBeUpdated === 'function') {\n        refToBeUpdated(newRef);\n      } else if (refToBeUpdated) {\n        refToBeUpdated.current = newRef;\n      }\n    });\n  };\n};\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEhB,MAAM,kBAAkB,IAAI,SAA8D;AAC/F,QAAM,eAAe,KAAK,OAAO;AACjC,MAAI,CAAC,aAAa;AAAQ,WAAO,MAAM;AAAA;AACvC,MAAI,aAAa,WAAW;AAAG,WAAO,MAAM;AAAA;AAE5C,SAAO,CAAC,WAAW;AACjB,iBAAa,QAAQ,CAAC,mBAAmB;AACvC,UAAI,OAAO,mBAAmB,YAAY;AACxC,uBAAe;AAAA,iBACN,gBAAgB;AACzB,uBAAe,UAAU;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }

package/cjs/utils/tree-helpers.js

@@ -29,6 +29,7 @@ var tree_helpers_exports = {};
 __export(tree_helpers_exports, {
   cloneNode: () => cloneNode,
   enrichNodeModelInPlace: () => enrichNodeModelInPlace,
+  flattenTreeForDnD: () => flattenTreeForDnD,
   focusItem: () => focusItem,
   getChildrenMatchesSearchQuery: () => getChildrenMatchesSearchQuery,
   getItemsParentNode: () => getItemsParentNode,
@@ -132,7 +133,7 @@ const enrichNodeModelInPlace = (node, searchQuery = "", selection = null, expand
   if (!node.model.nodeItemRef) {
     node.model.nodeItemRef = (0, import_react.createRef)();
   }
-  if (typeof node.model.isGroup !== "boolean" && node.model?.children?.length > 0) {
+  if (typeof node.model.isGroup !== "boolean" && (node.model?.children?.length ?? 0) > 0) {
     node.model.isGroup = true;
   }
   if (node.model.isGroup && node.model.id !== "__ds_tree_root") {
@@ -160,5 +161,24 @@ const enrichNodeModelInPlace = (node, searchQuery = "", selection = null, expand
 const focusItem = (item) => {
   item?.nodeItemRef?.current?.focus();
 };
+const flattenTreeForDnD = (data, shouldDescend = () => true) => {
+  const flattenedTree = [];
+  let index = 0;
+  const doit = (node, depth = 0, parentId = null) => {
+    flattenedTree.push({
+      uid: node.id.toString(),
+      depth,
+      realIndex: index,
+      childrenCount: node.children?.length ?? 0,
+      parentId: parentId !== null ? parentId.toString() : null,
+      original: node
+    });
+    index += 1;
+    if (shouldDescend(node))
+      node.children?.forEach((child) => doit(child, depth + 1, node.id.toString()));
+  };
+  data.forEach((datum) => doit(datum));
+  return flattenedTree;
+};
 module.exports = __toCommonJS(tree_helpers_exports);
 //# sourceMappingURL=tree-helpers.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/utils/tree-helpers.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable max-params */\n/* eslint-disable complexity */\n/* eslint-disable max-lines */\nimport { createRef } from 'react';\nimport type TreeModel from 'tree-model';\nimport { standardizeSearchQueryString } from './string-helpers';\nimport type { DSTreeviewT } from '../react-desc-prop-types';\n\nexport const walkVisibles = (\n  node: DSTreeviewT.Item['node'],\n  callback: (node: DSTreeviewT.Item['node']) => void,\n  skipRoot = true,\n  highlightOnlyQuery = false,\n) => {\n  const { children, model } = node;\n  const { name, isExpanded, childrenMatchesSearchQuery, matchesSearchQuery } = model;\n\n  const shouldSkipBecauseIsRoot = skipRoot && name === '__root';\n  const queryRestrictionsPassed = !!(highlightOnlyQuery || childrenMatchesSearchQuery || matchesSearchQuery);\n\n  if (!shouldSkipBecauseIsRoot && queryRestrictionsPassed) callback(node);\n\n  const shouldWalkChildren = !!(children.length > 0 && isExpanded && queryRestrictionsPassed);\n  if (shouldWalkChildren) {\n    children.forEach((childNode) => {\n      walkVisibles(childNode, callback, skipRoot, highlightOnlyQuery);\n    });\n  }\n};\n\nexport const walkParents = (\n  nodePath: DSTreeviewT.Item['nodePath'],\n  callback: (currParent: DSTreeviewT.Item['node']) => void,\n  skipRoot = true,\n) => {\n  const parents = [...nodePath].reverse();\n  parents.shift(); // remove current node from the parents array\n  if (skipRoot) parents.pop(); // remove the root from the parents if skipping root\n  parents.forEach(callback);\n};\n\ntype RecursiveCallbackT = (childNode: DSTreeviewT.Item['node'], cb?: RecursiveCallbackT, isFirst?: boolean) => void;\nexport const walkAllNodeChildren = (node: DSTreeviewT.Item['node'], callback: RecursiveCallbackT, isFirst = true) => {\n  const { children = [] } = node;\n  const shouldWalkChildren = children.length;\n\n  if (!isFirst) callback(node);\n\n  if (shouldWalkChildren) {\n    children.forEach((childNode) => {\n      walkAllNodeChildren(childNode, callback, false);\n    });\n  }\n};\n\nexport const getNodeById = (treeRoot: DSTreeviewT.Item['node'], id: DSTreeviewT.StringOrNum) => {\n  const nodes = treeRoot.all((node) => (node as unknown as DSTreeviewT.Item).model.id === id);\n  return nodes[0];\n};\n\nexport const cloneNode = (tree: TreeModel, node: DSTreeviewT.Item) => tree.parse(node.model);\n\nexport const itemsShareSameParent = (items: DSTreeviewT.Item[] = []) => {\n  if (items.length === 0) throw new Error('Received empty items for comparison');\n  if (items.length === 1) return true;\n\n  // when moving in first position we receive [undefined,...{items}]\n  // when moving in last position we receive [...{items}, undefined]\n  const firstExistingItem = items.find((item) => !!item);\n  if (!firstExistingItem) throw new Error(\"Received no items, can't retrieve parent\");\n\n  const firstExistingItemPath = firstExistingItem.node.getPath();\n  // path is like [rootParent, ...[parentsNodes], currentNode]\n  // length -1 is the current-node\n  // length -2 is the parent-node\n  // root node is not printed and is always present so minimum path length is 2 (root + currentNode)\n  const directParentNode = firstExistingItemPath[firstExistingItemPath.length - 2];\n\n  return items.every((item) => {\n    // undefined nodes count as having the same parent\n    if (!item) return true;\n    const itemPath = item.node.getPath();\n    const itemDirectParent = itemPath[itemPath.length - 2];\n    return directParentNode === itemDirectParent;\n  });\n};\n\nexport const getItemsParentNode = (items: DSTreeviewT.Item[] = [], skipSameParentCheck = false) => {\n  if (items.length === 0) throw new Error(\"Received empty items, can't retrieve parent\");\n\n  // in case we already know the items compared shares the same parent\n  if (!skipSameParentCheck)\n    if (!itemsShareSameParent(items))\n      // if we don't know (default, we don't) check if they share the parent\n      throw new Error(\"Received items don't share the same parent, can't retrieve parent\");\n\n  // when moving in first position we receive [undefined,...{items}]\n  // when moving in last position we receive [...{items}, undefined]\n  const firstExistingItem = items.find((item) => !!item);\n  if (!firstExistingItem) throw new Error(\"Received no items, can't retrieve parent\");\n\n  const firstExistingItemPath = firstExistingItem.node.getPath();\n  // path is like [rootParent, ...[parentsNodes], currentNode]\n  // length -1 is the current-node\n  // length -2 is the parent-node\n  // root node is not printed and is always present so minimum path length is 2 (root + currentNode)\n  const directParentNode = firstExistingItemPath[firstExistingItemPath.length - 2];\n  return directParentNode as unknown as DSTreeviewT.Item['node'];\n};\n\nexport const getNodeMatchesSearchQuery = (node: DSTreeviewT.Item['node'], searchQuery = '') => {\n  const standardizedName = standardizeSearchQueryString(node.model.name);\n  const standardizedSearchQuery = standardizeSearchQueryString(searchQuery);\n  return standardizedName.includes(standardizedSearchQuery);\n};\n\nexport const getChildrenMatchesSearchQuery = (parentNode: DSTreeviewT.Item['node'], searchQuery = '') => {\n  let anyChildMatch = false;\n  walkAllNodeChildren(parentNode, (node) => {\n    if (getNodeMatchesSearchQuery(node, searchQuery)) anyChildMatch = true;\n  });\n  return anyChildMatch;\n};\n\n/**\n * Mutate in place a node from tree-model normalizing object properties like \"isGroup\" even if user didn't specify it explicitly,\n * after execution the node will have \"nodePath\" \"treeDepth\" \"nodeItemRef\" \"isGroup\" \"isExpanded\"\n * (optionally, based on the provided arguments) \"matchesSearchQuery\" \"childrenMatchesSearchQuery\" \"isChecked\"\n *\n * @param {Object} node - node (based on 'tree-model' lib) that you wish to mutate with extra props\n * @param {string} [searchQuery=''] - optional string used to parse \"matchesSearchQuery\"/\"childrenMatchesSearchQuery\" properties\n * @param {Object} [selection=null] - optional selection hashmap used to parse \"isChecked\" properties\n * @param {Object} [expanded=null] - optional expanded hashmap used to parse \"isExpanded\" properties\n */\nexport const enrichNodeModelInPlace = (\n  node: TreeModel.Node<DSTreeviewT.SimpleItem>,\n  searchQuery = '',\n  selection: DSTreeviewT.SelectionItems | null = null,\n  expanded: DSTreeviewT.ExpandedItems | null = null,\n) => {\n  const path = node.getPath();\n  const depth = path.length - 1;\n  node.model.nodePath = path;\n  node.model.treeDepth = depth;\n\n  if (!node.model.nodeItemRef) {\n    node.model.nodeItemRef = createRef();\n  }\n\n  // if a node has children but was not marked as isGroup, force-mark as group\n  // this is useful to avoid having to always check both the flag and the children.length...\n  if (typeof node.model.isGroup !== 'boolean' && node.model?.children?.length > 0) {\n    node.model.isGroup = true;\n  }\n\n  if (node.model.isGroup && node.model.id !== '__ds_tree_root') {\n    if (expanded) node.model.isExpanded = !!expanded[node.model.id];\n    else if (typeof node.model.isExpanded !== 'boolean') {\n      node.model.isExpanded = false;\n    }\n  }\n\n  node.model.matchesSearchQuery = true;\n  node.model.childrenMatchesSearchQuery = false;\n  const partiallyEnrichedNode = node as unknown as TreeModel.Node<DSTreeviewT.Item>;\n  if (searchQuery) {\n    partiallyEnrichedNode.model.matchesSearchQuery = getNodeMatchesSearchQuery(partiallyEnrichedNode, searchQuery);\n\n    if (partiallyEnrichedNode.model.isGroup === true) {\n      partiallyEnrichedNode.model.childrenMatchesSearchQuery = getChildrenMatchesSearchQuery(\n        partiallyEnrichedNode,\n        searchQuery,\n      );\n      if (partiallyEnrichedNode.model.childrenMatchesSearchQuery) partiallyEnrichedNode.model.isExpanded = true;\n    }\n  }\n  if (selection && selection[partiallyEnrichedNode.model.id]) {\n    partiallyEnrichedNode.model.isChecked = selection[partiallyEnrichedNode.model.id];\n  }\n};\n\nexport const focusItem = (item: DSTreeviewT.Item | null) => {\n  item?.nodeItemRef?.current?.focus();\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable max-params */\n/* eslint-disable complexity */\n/* eslint-disable max-lines */\nimport { createRef } from 'react';\nimport type TreeModel from 'tree-model';\nimport { standardizeSearchQueryString } from './string-helpers';\nimport type { DSTreeviewT } from '../react-desc-prop-types';\n\nexport const walkVisibles = (\n  node: DSTreeviewT.Item['node'],\n  callback: (node: DSTreeviewT.Item['node']) => void,\n  skipRoot = true,\n  highlightOnlyQuery = false,\n) => {\n  const { children, model } = node;\n  const { name, isExpanded, childrenMatchesSearchQuery, matchesSearchQuery } = model;\n\n  const shouldSkipBecauseIsRoot = skipRoot && name === '__root';\n  const queryRestrictionsPassed = !!(highlightOnlyQuery || childrenMatchesSearchQuery || matchesSearchQuery);\n\n  if (!shouldSkipBecauseIsRoot && queryRestrictionsPassed) callback(node);\n\n  const shouldWalkChildren = !!(children.length > 0 && isExpanded && queryRestrictionsPassed);\n  if (shouldWalkChildren) {\n    children.forEach((childNode) => {\n      walkVisibles(childNode, callback, skipRoot, highlightOnlyQuery);\n    });\n  }\n};\n\nexport const walkParents = (\n  nodePath: DSTreeviewT.Item['nodePath'],\n  callback: (currParent: DSTreeviewT.Item['node']) => void,\n  skipRoot = true,\n) => {\n  const parents = [...nodePath].reverse();\n  parents.shift(); // remove current node from the parents array\n  if (skipRoot) parents.pop(); // remove the root from the parents if skipping root\n  parents.forEach(callback);\n};\n\ntype RecursiveCallbackT = (childNode: DSTreeviewT.Item['node'], cb?: RecursiveCallbackT, isFirst?: boolean) => void;\nexport const walkAllNodeChildren = (node: DSTreeviewT.Item['node'], callback: RecursiveCallbackT, isFirst = true) => {\n  const { children = [] } = node;\n  const shouldWalkChildren = children.length;\n\n  if (!isFirst) callback(node);\n\n  if (shouldWalkChildren) {\n    children.forEach((childNode) => {\n      walkAllNodeChildren(childNode, callback, false);\n    });\n  }\n};\n\nexport const getNodeById = (treeRoot: DSTreeviewT.Item['node'], id: DSTreeviewT.StringOrNum) => {\n  const nodes = treeRoot.all((node) => (node as unknown as DSTreeviewT.Item).model.id === id);\n  return nodes[0];\n};\n\nexport const cloneNode = (tree: TreeModel, node: DSTreeviewT.Item) => tree.parse(node.model);\n\nexport const itemsShareSameParent = (items: DSTreeviewT.Item[] = []) => {\n  if (items.length === 0) throw new Error('Received empty items for comparison');\n  if (items.length === 1) return true;\n\n  // when moving in first position we receive [undefined,...{items}]\n  // when moving in last position we receive [...{items}, undefined]\n  const firstExistingItem = items.find((item) => !!item);\n  if (!firstExistingItem) throw new Error(\"Received no items, can't retrieve parent\");\n\n  const firstExistingItemPath = firstExistingItem.node.getPath();\n  // path is like [rootParent, ...[parentsNodes], currentNode]\n  // length -1 is the current-node\n  // length -2 is the parent-node\n  // root node is not printed and is always present so minimum path length is 2 (root + currentNode)\n  const directParentNode = firstExistingItemPath[firstExistingItemPath.length - 2];\n\n  return items.every((item) => {\n    // undefined nodes count as having the same parent\n    if (!item) return true;\n    const itemPath = item.node.getPath();\n    const itemDirectParent = itemPath[itemPath.length - 2];\n    return directParentNode === itemDirectParent;\n  });\n};\n\nexport const getItemsParentNode = (items: DSTreeviewT.Item[] = [], skipSameParentCheck = false) => {\n  if (items.length === 0) throw new Error(\"Received empty items, can't retrieve parent\");\n\n  // in case we already know the items compared shares the same parent\n  if (!skipSameParentCheck)\n    if (!itemsShareSameParent(items))\n      // if we don't know (default, we don't) check if they share the parent\n      throw new Error(\"Received items don't share the same parent, can't retrieve parent\");\n\n  // when moving in first position we receive [undefined,...{items}]\n  // when moving in last position we receive [...{items}, undefined]\n  const firstExistingItem = items.find((item) => !!item);\n  if (!firstExistingItem) throw new Error(\"Received no items, can't retrieve parent\");\n\n  const firstExistingItemPath = firstExistingItem.node.getPath();\n  // path is like [rootParent, ...[parentsNodes], currentNode]\n  // length -1 is the current-node\n  // length -2 is the parent-node\n  // root node is not printed and is always present so minimum path length is 2 (root + currentNode)\n  const directParentNode = firstExistingItemPath[firstExistingItemPath.length - 2];\n  return directParentNode as unknown as DSTreeviewT.Item['node'];\n};\n\nexport const getNodeMatchesSearchQuery = (node: DSTreeviewT.Item['node'], searchQuery = '') => {\n  const standardizedName = standardizeSearchQueryString(node.model.name);\n  const standardizedSearchQuery = standardizeSearchQueryString(searchQuery);\n  return standardizedName.includes(standardizedSearchQuery);\n};\n\nexport const getChildrenMatchesSearchQuery = (parentNode: DSTreeviewT.Item['node'], searchQuery = '') => {\n  let anyChildMatch = false;\n  walkAllNodeChildren(parentNode, (node) => {\n    if (getNodeMatchesSearchQuery(node, searchQuery)) anyChildMatch = true;\n  });\n  return anyChildMatch;\n};\n\n/**\n * Mutate in place a node from tree-model normalizing object properties like \"isGroup\" even if user didn't specify it explicitly,\n * after execution the node will have \"nodePath\" \"treeDepth\" \"nodeItemRef\" \"isGroup\" \"isExpanded\"\n * (optionally, based on the provided arguments) \"matchesSearchQuery\" \"childrenMatchesSearchQuery\" \"isChecked\"\n *\n * @param {Object} node - node (based on 'tree-model' lib) that you wish to mutate with extra props\n * @param {string} [searchQuery=''] - optional string used to parse \"matchesSearchQuery\"/\"childrenMatchesSearchQuery\" properties\n * @param {Object} [selection=null] - optional selection hashmap used to parse \"isChecked\" properties\n * @param {Object} [expanded=null] - optional expanded hashmap used to parse \"isExpanded\" properties\n */\nexport const enrichNodeModelInPlace = (\n  node: TreeModel.Node<DSTreeviewT.SimpleItem>,\n  searchQuery = '',\n  selection: DSTreeviewT.SelectionItems | null = null,\n  expanded: DSTreeviewT.ExpandedItems | null = null,\n) => {\n  const path = node.getPath();\n  const depth = path.length - 1;\n  node.model.nodePath = path;\n  node.model.treeDepth = depth;\n\n  if (!node.model.nodeItemRef) {\n    node.model.nodeItemRef = createRef();\n  }\n\n  // if a node has children but was not marked as isGroup, force-mark as group\n  // this is useful to avoid having to always check both the flag and the children.length...\n  if (typeof node.model.isGroup !== 'boolean' && (node.model?.children?.length ?? 0) > 0) {\n    node.model.isGroup = true;\n  }\n\n  if (node.model.isGroup && node.model.id !== '__ds_tree_root') {\n    if (expanded) node.model.isExpanded = !!expanded[node.model.id];\n    else if (typeof node.model.isExpanded !== 'boolean') {\n      node.model.isExpanded = false;\n    }\n  }\n\n  node.model.matchesSearchQuery = true;\n  node.model.childrenMatchesSearchQuery = false;\n  const partiallyEnrichedNode = node as unknown as TreeModel.Node<DSTreeviewT.Item>;\n  if (searchQuery) {\n    partiallyEnrichedNode.model.matchesSearchQuery = getNodeMatchesSearchQuery(partiallyEnrichedNode, searchQuery);\n\n    if (partiallyEnrichedNode.model.isGroup === true) {\n      partiallyEnrichedNode.model.childrenMatchesSearchQuery = getChildrenMatchesSearchQuery(\n        partiallyEnrichedNode,\n        searchQuery,\n      );\n      if (partiallyEnrichedNode.model.childrenMatchesSearchQuery) partiallyEnrichedNode.model.isExpanded = true;\n    }\n  }\n  if (selection && selection[partiallyEnrichedNode.model.id]) {\n    partiallyEnrichedNode.model.isChecked = selection[partiallyEnrichedNode.model.id];\n  }\n};\n\nexport const focusItem = (item: DSTreeviewT.Item | null) => {\n  item?.nodeItemRef?.current?.focus();\n};\n\nexport const flattenTreeForDnD = (\n  data: DSTreeviewT.SimpleItem[],\n  shouldDescend: (datum: DSTreeviewT.SimpleItem) => boolean = () => true,\n) => {\n  const flattenedTree: DSTreeviewT.DndItem[] = [];\n  let index = 0;\n  const doit = (node: DSTreeviewT.SimpleItem, depth = 0, parentId: DSTreeviewT.StringOrNum | null = null) => {\n    flattenedTree.push({\n      uid: node.id.toString(),\n      depth,\n      realIndex: index,\n      childrenCount: node.children?.length ?? 0,\n      parentId: parentId !== null ? parentId.toString() : null,\n      original: node,\n    });\n    index += 1;\n    if (shouldDescend(node)) node.children?.forEach((child) => doit(child, depth + 1, node.id.toString()));\n  };\n\n  data.forEach((datum) => doit(datum));\n  return flattenedTree;\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

package/cjs/utils/useTree.js

@@ -69,8 +69,8 @@ const useTree = (data, props, states) => {
   (0, import_react.useEffect)(() => {
     const parsedVisibleItems = [];
     const newExpandedHashMap = {};
+    const shouldContinueWalking = true;
     treeRoot.walk((node) => {
-      const shouldContinueWalking = true;
       (0, import_tree_helpers.enrichNodeModelInPlace)(node, searchQuery, selection, expanded);
       if (node.model.id && node.model.isGroup && node.model.isExpanded)
         newExpandedHashMap[node.model.id] = true;
@@ -91,8 +91,10 @@ const useTree = (data, props, states) => {
     expanded,
     setExpandedGroups
   ]);
+  const flattenedItems = (0, import_react.useMemo)(() => (0, import_tree_helpers.flattenTreeForDnD)(data), [data]);
   return {
     visibleItems,
+    flattenedItems,
     tree,
     treeRoot,
     rerenderItems,

package/cjs/utils/useTree.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/utils/useTree.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { useState, useCallback, useMemo, useEffect } from 'react';\nimport TreeModel from 'tree-model';\nimport { cloneDeep } from 'lodash';\n\nimport { walkVisibles, enrichNodeModelInPlace } from './tree-helpers';\nimport type { DSTreeviewT } from '../react-desc-prop-types';\nimport type { DSTreeviewInternalsT } from '../sharedTypes';\nimport { updateExpandedState } from './group-expands-helpers';\n\nexport const useTree = (\n  data: DSTreeviewT.SimpleItem[],\n  props: DSTreeviewT.Props,\n  states: {\n    setExpandedGroups: DSTreeviewInternalsT.StateSetter<DSTreeviewT.ExpandedItems>;\n  },\n) => {\n  const { setExpandedGroups } = states;\n  const unfrozenData = useMemo(() => cloneDeep(data), [data]);\n\n  // convert data into a TreeModel with extra isExpanded prop\n  // root element type is an exception, children model is based on what the dev passed on\n  // since root is an excepcion we must typecast\n  const tree = useMemo(() => new TreeModel(), []);\n  const [treeData, setTreeData] = useState({\n    id: '__ds_tree_root',\n    name: '__root',\n    isExpanded: true,\n    children: unfrozenData,\n  } as unknown as DSTreeviewT.Item);\n\n  useEffect(() => {\n    setTreeData({\n      id: '__ds_tree_root',\n      name: '__root',\n      isExpanded: true,\n      children: unfrozenData,\n    } as unknown as DSTreeviewT.Item);\n  }, [unfrozenData]);\n\n  // expose a way to rerender the tree\n  //   used for expand functionality\n  const [rerenderItems, setRerenderItems] = useState({});\n  const triggerTreeRerender = useCallback(() => {\n    setRerenderItems({});\n  }, []);\n\n  // when re-rendering we re-parse the list\n  const [treeRoot, setTreeRoot] = useState(tree.parse(treeData));\n  useEffect(() => {\n    setTreeRoot(tree.parse(treeData));\n  }, [treeData, rerenderItems, tree]);\n\n  const [visibleItems, setVisibleItems] = useState<DSTreeviewT.Item[]>([]);\n\n  const { searchQuery, highlightOnlyQuery, onVisibleItemsChange, selection, expanded, onExpandChange } = props;\n\n  const updateUserExpandedState = useCallback(() => {\n    updateExpandedState(treeRoot, onExpandChange);\n  }, [treeRoot, onExpandChange]);\n  // we add missing properties to the received Items\n  //   not the best of the patterns, but it works\n  //   this is where we convert \"SimpleItems\" to \"Items\"\n  //   this was done to avoid breaking changes back in v1\n  useEffect(() => {\n    const parsedVisibleItems: DSTreeviewT.Item[] = [];\n    const newExpandedHashMap: DSTreeviewT.ExpandedItems = {};\n    treeRoot.walk((node) => {\n      const shouldContinueWalking = true; // tree-model ask we return true if we want to continue walking\n      enrichNodeModelInPlace(node, searchQuery, selection, expanded);\n      if (node.model.id && node.model.isGroup && node.model.isExpanded) newExpandedHashMap[node.model.id] = true;\n      return shouldContinueWalking;\n    });\n\n    walkVisibles(\n      treeRoot,\n      (node) => {\n        parsedVisibleItems.push({ ...node.model, node });\n      },\n      true,\n      highlightOnlyQuery,\n    );\n    setVisibleItems(parsedVisibleItems);\n    onVisibleItemsChange(parsedVisibleItems);\n\n    setExpandedGroups(newExpandedHashMap);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [\n    treeRoot,\n    rerenderItems,\n    searchQuery,\n    highlightOnlyQuery,\n    selection,\n    expanded,\n    setExpandedGroups,\n    // onVisibleItemsChange // evaluate potential performance hit?\n  ]);\n\n  return {\n    visibleItems,\n    tree,\n    treeRoot,\n    rerenderItems,\n    triggerTreeRerender,\n    updateUserExpandedState,\n  };\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA0D;AAC1D,wBAAsB;AACtB,oBAA0B;AAE1B,0BAAqD;AAGrD,mCAAoC;AAE7B,MAAM,UAAU,CACrB,MACA,OACA,WAGG;AACH,QAAM,EAAE,sBAAsB;AAC9B,QAAM,eAAe,0BAAQ,MAAM,6BAAU,OAAO,CAAC;AAKrD,QAAM,OAAO,0BAAQ,MAAM,IAAI,6BAAa;AAC5C,QAAM,CAAC,UAAU,eAAe,2BAAS;AAAA,IACvC,IAAI;AAAA,IACJ,MAAM;AAAA,IACN,YAAY;AAAA,IACZ,UAAU;AAAA;AAGZ,8BAAU,MAAM;AACd,gBAAY;AAAA,MACV,IAAI;AAAA,MACJ,MAAM;AAAA,MACN,YAAY;AAAA,MACZ,UAAU;AAAA;AAAA,KAEX,CAAC;AAIJ,QAAM,CAAC,eAAe,oBAAoB,2BAAS;AACnD,QAAM,sBAAsB,8BAAY,MAAM;AAC5C,qBAAiB;AAAA,KAChB;AAGH,QAAM,CAAC,UAAU,eAAe,2BAAS,KAAK,MAAM;AACpD,8BAAU,MAAM;AACd,gBAAY,KAAK,MAAM;AAAA,KACtB,CAAC,UAAU,eAAe;AAE7B,QAAM,CAAC,cAAc,mBAAmB,2BAA6B;AAErE,QAAM,EAAE,aAAa,oBAAoB,sBAAsB,WAAW,UAAU,mBAAmB;AAEvG,QAAM,0BAA0B,8BAAY,MAAM;AAChD,0DAAoB,UAAU;AAAA,KAC7B,CAAC,UAAU;AAKd,8BAAU,MAAM;AACd,UAAM,qBAAyC;AAC/C,UAAM,qBAAgD;AACtD,aAAS,KAAK,CAAC,SAAS;AACtB,YAAM,wBAAwB;AAC9B,sDAAuB,MAAM,aAAa,WAAW;AACrD,UAAI,KAAK,MAAM,MAAM,KAAK,MAAM,WAAW,KAAK,MAAM;AAAY,2BAAmB,KAAK,MAAM,MAAM;AACtG,aAAO;AAAA;AAGT,0CACE,UACA,CAAC,SAAS;AACR,yBAAmB,KAAK,KAAK,KAAK,OAAO;AAAA,OAE3C,MACA;AAEF,oBAAgB;AAChB,yBAAqB;AAErB,sBAAkB;AAAA,KAEjB;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAIF,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA;",
+  "sourcesContent": ["import { useState, useCallback, useMemo, useEffect } from 'react';\nimport TreeModel from 'tree-model';\nimport { cloneDeep } from 'lodash';\n\nimport { walkVisibles, enrichNodeModelInPlace, flattenTreeForDnD } from './tree-helpers';\nimport type { DSTreeviewT } from '../react-desc-prop-types';\nimport type { DSTreeviewInternalsT } from '../sharedTypes';\nimport { updateExpandedState } from './group-expands-helpers';\n\nexport const useTree = (\n  data: DSTreeviewT.SimpleItem[],\n  props: DSTreeviewT.Props,\n  states: {\n    setExpandedGroups: DSTreeviewInternalsT.StateSetter<DSTreeviewT.ExpandedItems>;\n  },\n) => {\n  const { setExpandedGroups } = states;\n  const unfrozenData = useMemo(() => cloneDeep(data), [data]);\n\n  // convert data into a TreeModel with extra isExpanded prop\n  // root element type is an exception, children model is based on what the dev passed on\n  // since root is an excepcion we must typecast\n  const tree = useMemo(() => new TreeModel(), []);\n  const [treeData, setTreeData] = useState({\n    id: '__ds_tree_root',\n    name: '__root',\n    isExpanded: true,\n    children: unfrozenData,\n  } as unknown as DSTreeviewT.Item);\n\n  useEffect(() => {\n    setTreeData({\n      id: '__ds_tree_root',\n      name: '__root',\n      isExpanded: true,\n      children: unfrozenData,\n    } as unknown as DSTreeviewT.Item);\n  }, [unfrozenData]);\n\n  // expose a way to rerender the tree\n  //   used for expand functionality\n  const [rerenderItems, setRerenderItems] = useState({});\n  const triggerTreeRerender = useCallback(() => {\n    setRerenderItems({});\n  }, []);\n\n  // when re-rendering we re-parse the list\n  const [treeRoot, setTreeRoot] = useState(tree.parse(treeData));\n  useEffect(() => {\n    setTreeRoot(tree.parse(treeData));\n  }, [treeData, rerenderItems, tree]);\n\n  const [visibleItems, setVisibleItems] = useState<DSTreeviewT.Item[]>([]);\n\n  const { searchQuery, highlightOnlyQuery, onVisibleItemsChange, selection, expanded, onExpandChange } = props;\n\n  const updateUserExpandedState = useCallback(() => {\n    updateExpandedState(treeRoot, onExpandChange);\n  }, [treeRoot, onExpandChange]);\n  // we add missing properties to the received Items\n  //   not the best of the patterns, but it works\n  //   this is where we convert \"SimpleItems\" to \"Items\"\n  //   this was done to avoid breaking changes back in v1\n  useEffect(() => {\n    const parsedVisibleItems: DSTreeviewT.Item[] = [];\n    const newExpandedHashMap: DSTreeviewT.ExpandedItems = {};\n    const shouldContinueWalking = true; // tree-model ask we return true if we want to continue walking\n    treeRoot.walk((node) => {\n      enrichNodeModelInPlace(node, searchQuery, selection, expanded);\n      if (node.model.id && node.model.isGroup && node.model.isExpanded) newExpandedHashMap[node.model.id] = true;\n      return shouldContinueWalking;\n    });\n\n    walkVisibles(\n      treeRoot,\n      (node) => {\n        parsedVisibleItems.push({ ...node.model, node });\n      },\n      true,\n      highlightOnlyQuery,\n    );\n    setVisibleItems(parsedVisibleItems);\n    onVisibleItemsChange(parsedVisibleItems);\n\n    setExpandedGroups(newExpandedHashMap);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [\n    treeRoot,\n    rerenderItems,\n    searchQuery,\n    highlightOnlyQuery,\n    selection,\n    expanded,\n    setExpandedGroups,\n    // onVisibleItemsChange // evaluate potential performance hit?\n  ]);\n\n  const flattenedItems = useMemo(() => flattenTreeForDnD(data), [data]);\n\n  return {\n    visibleItems,\n    flattenedItems,\n    tree,\n    treeRoot,\n    rerenderItems,\n    triggerTreeRerender,\n    updateUserExpandedState,\n  };\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA0D;AAC1D,wBAAsB;AACtB,oBAA0B;AAE1B,0BAAwE;AAGxE,mCAAoC;AAE7B,MAAM,UAAU,CACrB,MACA,OACA,WAGG;AACH,QAAM,EAAE,sBAAsB;AAC9B,QAAM,eAAe,0BAAQ,MAAM,6BAAU,OAAO,CAAC;AAKrD,QAAM,OAAO,0BAAQ,MAAM,IAAI,6BAAa;AAC5C,QAAM,CAAC,UAAU,eAAe,2BAAS;AAAA,IACvC,IAAI;AAAA,IACJ,MAAM;AAAA,IACN,YAAY;AAAA,IACZ,UAAU;AAAA;AAGZ,8BAAU,MAAM;AACd,gBAAY;AAAA,MACV,IAAI;AAAA,MACJ,MAAM;AAAA,MACN,YAAY;AAAA,MACZ,UAAU;AAAA;AAAA,KAEX,CAAC;AAIJ,QAAM,CAAC,eAAe,oBAAoB,2BAAS;AACnD,QAAM,sBAAsB,8BAAY,MAAM;AAC5C,qBAAiB;AAAA,KAChB;AAGH,QAAM,CAAC,UAAU,eAAe,2BAAS,KAAK,MAAM;AACpD,8BAAU,MAAM;AACd,gBAAY,KAAK,MAAM;AAAA,KACtB,CAAC,UAAU,eAAe;AAE7B,QAAM,CAAC,cAAc,mBAAmB,2BAA6B;AAErE,QAAM,EAAE,aAAa,oBAAoB,sBAAsB,WAAW,UAAU,mBAAmB;AAEvG,QAAM,0BAA0B,8BAAY,MAAM;AAChD,0DAAoB,UAAU;AAAA,KAC7B,CAAC,UAAU;AAKd,8BAAU,MAAM;AACd,UAAM,qBAAyC;AAC/C,UAAM,qBAAgD;AACtD,UAAM,wBAAwB;AAC9B,aAAS,KAAK,CAAC,SAAS;AACtB,sDAAuB,MAAM,aAAa,WAAW;AACrD,UAAI,KAAK,MAAM,MAAM,KAAK,MAAM,WAAW,KAAK,MAAM;AAAY,2BAAmB,KAAK,MAAM,MAAM;AACtG,aAAO;AAAA;AAGT,0CACE,UACA,CAAC,SAAS;AACR,yBAAmB,KAAK,KAAK,KAAK,OAAO;AAAA,OAE3C,MACA;AAEF,oBAAgB;AAChB,yBAAqB;AAErB,sBAAkB;AAAA,KAEjB;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAIF,QAAM,iBAAiB,0BAAQ,MAAM,2CAAkB,OAAO,CAAC;AAE/D,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA;",
   "names": []
 }

package/esm/TreeView.js

@@ -3,15 +3,13 @@ import React2 from "react";
 import { describe } from "react-desc";
 import { TreeViewPropTypes } from "./react-desc-prop-types";
 import TreeViewContext from "./TreeViewContext";
-import { TreeDnD, TreeDndPlugin } from "./plugins/dnd";
 import { useTreeview } from "./config/useTreeview";
 import { TreeList } from "./parts/TreeList";
 function TreeView(props) {
-  const { plugins } = props;
   const { ctx } = useTreeview(props);
   return /* @__PURE__ */ React2.createElement(TreeViewContext.Provider, {
     value: ctx
-  }, plugins?.includes(TreeDndPlugin) ? /* @__PURE__ */ React2.createElement(TreeDnD, null) : /* @__PURE__ */ React2.createElement(TreeList, null));
+  }, /* @__PURE__ */ React2.createElement(TreeList, null));
 }
 TreeView.propTypes = TreeViewPropTypes;
 const TreeViewWithSchema = describe(TreeView);

package/esm/TreeView.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/TreeView.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable max-statements */\nimport React, { WeakValidationMap } from 'react';\n\nimport { describe } from 'react-desc';\nimport { TreeViewPropTypes } from './react-desc-prop-types';\nimport TreeViewContext from './TreeViewContext';\nimport { TreeDnD, TreeDndPlugin } from './plugins/dnd';\nimport { useTreeview } from './config/useTreeview';\nimport { TreeList } from './parts/TreeList';\nimport type { DSTreeviewT } from './react-desc-prop-types';\nexport function TreeView(props: DSTreeviewT.Props) {\n  const { plugins } = props;\n\n  const { ctx } = useTreeview(props);\n\n  return (\n    <TreeViewContext.Provider value={ctx}>\n      {plugins?.includes(TreeDndPlugin) ? <TreeDnD /> : <TreeList />}\n    </TreeViewContext.Provider>\n  );\n}\n\nTreeView.propTypes = TreeViewPropTypes as WeakValidationMap<unknown>;\nconst TreeViewWithSchema = describe(TreeView);\nTreeViewWithSchema.propTypes = TreeViewPropTypes;\n\nexport { TreeViewWithSchema };\n"],
-  "mappings": "AAAA;ACEA;AAEA;AACA;AACA;AACA;AACA;AACA;AAEO,kBAAkB,OAA0B;AACjD,QAAM,EAAE,YAAY;AAEpB,QAAM,EAAE,QAAQ,YAAY;AAE5B,SACE,qCAAC,gBAAgB,UAAjB;AAAA,IAA0B,OAAO;AAAA,KAC9B,SAAS,SAAS,iBAAiB,qCAAC,SAAD,QAAc,qCAAC,UAAD;AAAA;AAKxD,SAAS,YAAY;AACrB,MAAM,qBAAqB,SAAS;AACpC,mBAAmB,YAAY;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { WeakValidationMap } from 'react';\n\nimport { describe } from 'react-desc';\nimport { TreeViewPropTypes } from './react-desc-prop-types';\nimport TreeViewContext from './TreeViewContext';\nimport { useTreeview } from './config/useTreeview';\nimport { TreeList } from './parts/TreeList';\nimport type { DSTreeviewT } from './react-desc-prop-types';\nexport function TreeView(props: DSTreeviewT.Props) {\n  const { ctx } = useTreeview(props);\n\n  return (\n    <TreeViewContext.Provider value={ctx}>\n      <TreeList />\n    </TreeViewContext.Provider>\n  );\n}\n\nTreeView.propTypes = TreeViewPropTypes as WeakValidationMap<unknown>;\nconst TreeViewWithSchema = describe(TreeView);\nTreeViewWithSchema.propTypes = TreeViewPropTypes;\n\nexport { TreeViewWithSchema };\n"],
+  "mappings": "AAAA;ACAA;AAEA;AACA;AACA;AACA;AACA;AAEO,kBAAkB,OAA0B;AACjD,QAAM,EAAE,QAAQ,YAAY;AAE5B,SACE,qCAAC,gBAAgB,UAAjB;AAAA,IAA0B,OAAO;AAAA,KAC/B,qCAAC,UAAD;AAAA;AAKN,SAAS,YAAY;AACrB,MAAM,qBAAqB,SAAS;AACpC,mBAAmB,YAAY;",
   "names": []
 }

package/esm/TreeViewContext.js

@@ -11,6 +11,7 @@ const defaultProps = {
   fluid: false,
   isMultiSelect: false,
   isSingleSelect: false,
+  getIsDropValid: () => true,
   restrictDragAndDrop: false,
   showChildrenAmount: false,
   sortable: false,
@@ -46,11 +47,10 @@ const defaultRelativeMouseCoord = {
 const defaultContext = {
   props: defaultProps,
   visibleItems: [],
+  flattenedItems: [],
   withRadioChecks: false,
   withCheckboxChecks: false,
   withDragAndDrop: false,
-  relativeMouseCord: defaultRelativeMouseCoord,
-  setRelativeMouseCord: noop,
   triggerTreeRerender: noop,
   tree: void 0,
   treeRoot: void 0,
@@ -61,12 +61,6 @@ const defaultContext = {
     scrollToIndex: noop
   },
   virtualListRef: void 0,
-  isDragging: false,
-  setIsDragging: noop,
-  isKeyboardDragging: false,
-  setIsKeyboardDragging: noop,
-  draggedItem: null,
-  setDraggedItem: noop,
   uniqueTreeViewUUID: "",
   selectedItem: null,
   setSelectedItem: noop,

package/esm/TreeViewContext.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/TreeViewContext.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable no-unused-vars */\nimport { createContext, createRef } from 'react';\nimport type { DSTreeviewT } from './react-desc-prop-types';\nimport type { DSTreeviewInternalsT } from './sharedTypes';\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nfunction noop<T extends unknown[]>(..._args: T): void {}\n\nexport const defaultProps = {\n  plugins: [],\n  selection: {},\n  instanceRef: createRef(),\n  isItemDisabled: () => false,\n  disableIcons: false,\n  fluid: false,\n  isMultiSelect: false,\n  isSingleSelect: false,\n  restrictDragAndDrop: false,\n  showChildrenAmount: false,\n  sortable: false,\n  isLoading: false,\n  highlightOnlyQuery: false,\n  onItemClick: noop,\n  onItemFocus: noop,\n  onVisibleItemsChange: noop,\n  onOrderChange: noop,\n  onSelectionChange: noop,\n  onExpandChange: noop,\n  onInstanceRefInitialized: noop,\n  rowSize: 'normal',\n  labelOverflow: 'wrap',\n  noItemsPlaceholder: 'No items found',\n  nameKey: 'name',\n  width: '100%',\n  height: '100%',\n  groupIcon: null,\n  itemIcon: null,\n  searchQuery: '',\n  // workaround on the typings over the fact that\n  // when we instantiate the context we can't have all the props\n  // we only have a part of them but the final typings will include missing props\n  // this is safe to do because\n  // we will \"mergeWithDefaults\" + \"validatePropTypes\" when we do instantiate the context\n} as unknown as DSTreeviewT.Props;\n\nexport const defaultRelativeMouseCoord = {\n  isBefore: false,\n  isAfter: false,\n  isValid: true,\n  item: null,\n  x: null,\n  y: null,\n  relativeElementDOMRect: null,\n  relativeElementIndex: null,\n};\n\nconst defaultContext: DSTreeviewInternalsT.CTX = {\n  props: defaultProps,\n  visibleItems: [],\n  withRadioChecks: false,\n  withCheckboxChecks: false,\n  withDragAndDrop: false,\n  relativeMouseCord: defaultRelativeMouseCoord,\n  setRelativeMouseCord: noop,\n  triggerTreeRerender: noop,\n  tree: undefined,\n  treeRoot: undefined,\n  virtualListHelpers: {\n    virtualItems: [],\n    totalSize: 0,\n    scrollToOffset: noop,\n    scrollToIndex: noop,\n  },\n  virtualListRef: undefined,\n  isDragging: false,\n  setIsDragging: noop,\n  isKeyboardDragging: false,\n  setIsKeyboardDragging: noop,\n  draggedItem: null,\n  setDraggedItem: noop,\n  uniqueTreeViewUUID: '',\n  selectedItem: null,\n  setSelectedItem: noop,\n  focusedItem: null,\n  setFocusedItem: noop,\n  selectedCheckboxes: {},\n  setSelectedCheckboxes: noop,\n  expandedGroups: {},\n  setExpandedGroups: noop,\n  latestToggledItem: null,\n  setLatestToggledItem: noop,\n  hoverItem: null,\n  setHoverItem: noop,\n  handleExpandGroup: noop,\n  updateUserExpandedState: noop,\n};\n\n/** Context for cross component communication */\nconst TreeViewContext = createContext(defaultContext);\n\nexport default TreeViewContext;\n"],
-  "mappings": "AAAA;ACCA;AAKA,iBAAsC,OAAgB;AAAA;AAE/C,MAAM,eAAe;AAAA,EAC1B,SAAS;AAAA,EACT,WAAW;AAAA,EACX,aAAa;AAAA,EACb,gBAAgB,MAAM;AAAA,EACtB,cAAc;AAAA,EACd,OAAO;AAAA,EACP,eAAe;AAAA,EACf,gBAAgB;AAAA,EAChB,qBAAqB;AAAA,EACrB,oBAAoB;AAAA,EACpB,UAAU;AAAA,EACV,WAAW;AAAA,EACX,oBAAoB;AAAA,EACpB,aAAa;AAAA,EACb,aAAa;AAAA,EACb,sBAAsB;AAAA,EACtB,eAAe;AAAA,EACf,mBAAmB;AAAA,EACnB,gBAAgB;AAAA,EAChB,0BAA0B;AAAA,EAC1B,SAAS;AAAA,EACT,eAAe;AAAA,EACf,oBAAoB;AAAA,EACpB,SAAS;AAAA,EACT,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,UAAU;AAAA,EACV,aAAa;AAAA;AAQR,MAAM,4BAA4B;AAAA,EACvC,UAAU;AAAA,EACV,SAAS;AAAA,EACT,SAAS;AAAA,EACT,MAAM;AAAA,EACN,GAAG;AAAA,EACH,GAAG;AAAA,EACH,wBAAwB;AAAA,EACxB,sBAAsB;AAAA;AAGxB,MAAM,iBAA2C;AAAA,EAC/C,OAAO;AAAA,EACP,cAAc;AAAA,EACd,iBAAiB;AAAA,EACjB,oBAAoB;AAAA,EACpB,iBAAiB;AAAA,EACjB,mBAAmB;AAAA,EACnB,sBAAsB;AAAA,EACtB,qBAAqB;AAAA,EACrB,MAAM;AAAA,EACN,UAAU;AAAA,EACV,oBAAoB;AAAA,IAClB,cAAc;AAAA,IACd,WAAW;AAAA,IACX,gBAAgB;AAAA,IAChB,eAAe;AAAA;AAAA,EAEjB,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ,eAAe;AAAA,EACf,oBAAoB;AAAA,EACpB,uBAAuB;AAAA,EACvB,aAAa;AAAA,EACb,gBAAgB;AAAA,EAChB,oBAAoB;AAAA,EACpB,cAAc;AAAA,EACd,iBAAiB;AAAA,EACjB,aAAa;AAAA,EACb,gBAAgB;AAAA,EAChB,oBAAoB;AAAA,EACpB,uBAAuB;AAAA,EACvB,gBAAgB;AAAA,EAChB,mBAAmB;AAAA,EACnB,mBAAmB;AAAA,EACnB,sBAAsB;AAAA,EACtB,WAAW;AAAA,EACX,cAAc;AAAA,EACd,mBAAmB;AAAA,EACnB,yBAAyB;AAAA;AAI3B,MAAM,kBAAkB,cAAc;AAEtC,IAAO,0BAAQ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable no-unused-vars */\nimport { createContext, createRef } from 'react';\nimport type { DSTreeviewT } from './react-desc-prop-types';\nimport type { DSTreeviewInternalsT } from './sharedTypes';\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nfunction noop<T extends unknown[]>(..._args: T): void {}\n\nexport const defaultProps = {\n  plugins: [],\n  selection: {},\n  instanceRef: createRef(),\n  isItemDisabled: () => false,\n  disableIcons: false,\n  fluid: false,\n  isMultiSelect: false,\n  isSingleSelect: false,\n  getIsDropValid: () => true,\n  restrictDragAndDrop: false,\n  showChildrenAmount: false,\n  sortable: false,\n  isLoading: false,\n  highlightOnlyQuery: false,\n  onItemClick: noop,\n  onItemFocus: noop,\n  onVisibleItemsChange: noop,\n  onOrderChange: noop,\n  onSelectionChange: noop,\n  onExpandChange: noop,\n  onInstanceRefInitialized: noop,\n  rowSize: 'normal',\n  labelOverflow: 'wrap',\n  noItemsPlaceholder: 'No items found',\n  nameKey: 'name',\n  width: '100%',\n  height: '100%',\n  groupIcon: null,\n  itemIcon: null,\n  searchQuery: '',\n  // workaround on the typings over the fact that\n  // when we instantiate the context we can't have all the props\n  // we only have a part of them but the final typings will include missing props\n  // this is safe to do because\n  // we will \"mergeWithDefaults\" + \"validatePropTypes\" when we do instantiate the context\n} as unknown as DSTreeviewT.Props;\n\nexport const defaultRelativeMouseCoord = {\n  isBefore: false,\n  isAfter: false,\n  isValid: true,\n  item: null,\n  x: null,\n  y: null,\n  relativeElementDOMRect: null,\n  relativeElementIndex: null,\n};\n\nconst defaultContext: DSTreeviewInternalsT.CTX = {\n  props: defaultProps,\n  visibleItems: [],\n  flattenedItems: [],\n  withRadioChecks: false,\n  withCheckboxChecks: false,\n  withDragAndDrop: false,\n  triggerTreeRerender: noop,\n  tree: undefined,\n  treeRoot: undefined,\n  virtualListHelpers: {\n    virtualItems: [],\n    totalSize: 0,\n    scrollToOffset: noop,\n    scrollToIndex: noop,\n  },\n  virtualListRef: undefined,\n  uniqueTreeViewUUID: '',\n  selectedItem: null,\n  setSelectedItem: noop,\n  focusedItem: null,\n  setFocusedItem: noop,\n  selectedCheckboxes: {},\n  setSelectedCheckboxes: noop,\n  expandedGroups: {},\n  setExpandedGroups: noop,\n  latestToggledItem: null,\n  setLatestToggledItem: noop,\n  hoverItem: null,\n  setHoverItem: noop,\n  handleExpandGroup: noop,\n  updateUserExpandedState: noop,\n};\n\n/** Context for cross component communication */\nconst TreeViewContext = createContext(defaultContext);\n\nexport default TreeViewContext;\n"],
+  "mappings": "AAAA;ACCA;AAKA,iBAAsC,OAAgB;AAAA;AAE/C,MAAM,eAAe;AAAA,EAC1B,SAAS;AAAA,EACT,WAAW;AAAA,EACX,aAAa;AAAA,EACb,gBAAgB,MAAM;AAAA,EACtB,cAAc;AAAA,EACd,OAAO;AAAA,EACP,eAAe;AAAA,EACf,gBAAgB;AAAA,EAChB,gBAAgB,MAAM;AAAA,EACtB,qBAAqB;AAAA,EACrB,oBAAoB;AAAA,EACpB,UAAU;AAAA,EACV,WAAW;AAAA,EACX,oBAAoB;AAAA,EACpB,aAAa;AAAA,EACb,aAAa;AAAA,EACb,sBAAsB;AAAA,EACtB,eAAe;AAAA,EACf,mBAAmB;AAAA,EACnB,gBAAgB;AAAA,EAChB,0BAA0B;AAAA,EAC1B,SAAS;AAAA,EACT,eAAe;AAAA,EACf,oBAAoB;AAAA,EACpB,SAAS;AAAA,EACT,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,UAAU;AAAA,EACV,aAAa;AAAA;AAQR,MAAM,4BAA4B;AAAA,EACvC,UAAU;AAAA,EACV,SAAS;AAAA,EACT,SAAS;AAAA,EACT,MAAM;AAAA,EACN,GAAG;AAAA,EACH,GAAG;AAAA,EACH,wBAAwB;AAAA,EACxB,sBAAsB;AAAA;AAGxB,MAAM,iBAA2C;AAAA,EAC/C,OAAO;AAAA,EACP,cAAc;AAAA,EACd,gBAAgB;AAAA,EAChB,iBAAiB;AAAA,EACjB,oBAAoB;AAAA,EACpB,iBAAiB;AAAA,EACjB,qBAAqB;AAAA,EACrB,MAAM;AAAA,EACN,UAAU;AAAA,EACV,oBAAoB;AAAA,IAClB,cAAc;AAAA,IACd,WAAW;AAAA,IACX,gBAAgB;AAAA,IAChB,eAAe;AAAA;AAAA,EAEjB,gBAAgB;AAAA,EAChB,oBAAoB;AAAA,EACpB,cAAc;AAAA,EACd,iBAAiB;AAAA,EACjB,aAAa;AAAA,EACb,gBAAgB;AAAA,EAChB,oBAAoB;AAAA,EACpB,uBAAuB;AAAA,EACvB,gBAAgB;AAAA,EAChB,mBAAmB;AAAA,EACnB,mBAAmB;AAAA,EACnB,sBAAsB;AAAA,EACtB,WAAW;AAAA,EACX,cAAc;AAAA,EACd,mBAAmB;AAAA,EACnB,yBAAyB;AAAA;AAI3B,MAAM,kBAAkB,cAAc;AAEtC,IAAO,0BAAQ;",
   "names": []
 }

package/esm/config/useTreeview.js

@@ -4,7 +4,7 @@ import { useVirtual } from "react-virtual";
 import { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from "@elliemae/ds-props-helpers";
 import { v4 as uuidv4 } from "uuid";
 import { TreeViewPropTypes } from "../react-desc-prop-types";
-import { defaultRelativeMouseCoord, defaultProps } from "../TreeViewContext";
+import { defaultProps } from "../TreeViewContext";
 import { TreeDndPlugin } from "../plugins/dnd";
 import { useTree } from "../utils/useTree";
 import { useNotifyExpandedChange, toggleItemExpand } from "../utils/group-expands-helpers";
@@ -36,11 +36,7 @@ const useTreeview = (props) => {
     selection,
     onInstanceRefInitialized
   } = propsWithDefault;
-  const [isDragging, setIsDragging] = useState(false);
-  const [isKeyboardDragging, setIsKeyboardDragging] = useState(false);
-  const [relativeMouseCord, setRelativeMouseCord] = useState(defaultRelativeMouseCoord);
   const [uniqueTreeViewUUID] = useState(uuidv4());
-  const [draggedItem, setDraggedItem] = useState(null);
   const [hoverItem, setHoverItem] = useState(null);
   const [latestToggledItem, setLatestToggledItem] = useState(null);
   const [selectedItem, setSelectedItem] = useState(null);
@@ -49,7 +45,7 @@ const useTreeview = (props) => {
     ...selection
   });
   const [expandedGroups, setExpandedGroups] = useState({});
-  const { visibleItems, tree, treeRoot, triggerTreeRerender, updateUserExpandedState } = useTree(data, propsWithDefault, {
+  const { visibleItems, flattenedItems, tree, treeRoot, triggerTreeRerender, updateUserExpandedState } = useTree(data, propsWithDefault, {
     setExpandedGroups
   });
   const virtualListRef = useRef();
@@ -64,20 +60,13 @@ const useTreeview = (props) => {
   const handleExpandGroup = useCallback(toggleItemExpand, []);
   const ctx = useMemo(() => ({
     props: propsWithDefault,
-    setRelativeMouseCord,
-    relativeMouseCord,
     virtualListHelpers,
     virtualListRef,
     tree,
     treeRoot,
     visibleItems,
+    flattenedItems,
     triggerTreeRerender,
-    isDragging,
-    setIsDragging,
-    isKeyboardDragging,
-    setIsKeyboardDragging,
-    draggedItem,
-    setDraggedItem,
     withRadioChecks,
     withCheckboxChecks,
     withDragAndDrop,
@@ -97,27 +86,24 @@ const useTreeview = (props) => {
     handleExpandGroup,
     updateUserExpandedState
   }), [
-    draggedItem,
-    expandedGroups,
-    focusedItem,
-    handleExpandGroup,
-    hoverItem,
-    isDragging,
-    isKeyboardDragging,
-    latestToggledItem,
     propsWithDefault,
-    relativeMouseCord,
-    selectedCheckboxes,
-    selectedItem,
+    virtualListHelpers,
     tree,
     treeRoot,
-    triggerTreeRerender,
-    uniqueTreeViewUUID,
-    virtualListHelpers,
     visibleItems,
+    flattenedItems,
+    triggerTreeRerender,
+    withRadioChecks,
     withCheckboxChecks,
     withDragAndDrop,
-    withRadioChecks,
+    uniqueTreeViewUUID,
+    selectedCheckboxes,
+    selectedItem,
+    expandedGroups,
+    latestToggledItem,
+    focusedItem,
+    hoverItem,
+    handleExpandGroup,
     updateUserExpandedState
   ]);
   if (instanceRef)

package/esm/config/useTreeview.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useTreeview.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable max-statements */\nimport { useState, useRef, useEffect, useMemo, useCallback } from 'react';\nimport { useVirtual } from 'react-virtual';\nimport { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport { v4 as uuidv4 } from 'uuid';\n\nimport { TreeViewPropTypes } from '../react-desc-prop-types';\nimport { defaultRelativeMouseCoord, defaultProps } from '../TreeViewContext';\nimport { TreeDndPlugin } from '../plugins/dnd';\nimport { useTree } from '../utils/useTree';\nimport { useNotifyExpandedChange, toggleItemExpand } from '../utils/group-expands-helpers';\nimport { useInstanceRefActions } from '../utils/useInstanceRefActions';\nimport { useGlobalToggleAllExpandShortcut } from '../utils/keyboard-helpers';\nimport type { DSTreeviewT } from '../react-desc-prop-types';\nimport type { DSTreeviewInternalsT } from '../sharedTypes';\n\ntype UseTreeviewT = (props: DSTreeviewT.Props) => { ctx: DSTreeviewInternalsT.CTX };\n\nexport const useTreeview: UseTreeviewT = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault<DSTreeviewT.Props>(props, defaultProps);\n  useValidateTypescriptPropTypes<DSTreeviewT.Props>(propsWithDefault, TreeViewPropTypes);\n  const defaultActions = {\n    actions: {\n      toggleExpandAll: () => {},\n      scrollTo: () => {},\n      setSelectedItemByVirtualIndex: () => {},\n      setFocusedItemByVirtualIndex: () => {},\n    },\n  } as unknown as DSTreeviewT.InstanceRef;\n  const treeRef = useRef(defaultActions);\n  const {\n    data,\n    plugins,\n    onOrderChange,\n    isMultiSelect,\n    isSingleSelect,\n    instanceRef,\n    selection,\n    onInstanceRefInitialized,\n  } = propsWithDefault;\n  const [isDragging, setIsDragging] = useState(false);\n  const [isKeyboardDragging, setIsKeyboardDragging] = useState(false);\n  const [relativeMouseCord, setRelativeMouseCord] =\n    useState<DSTreeviewInternalsT.MouseCoord>(defaultRelativeMouseCoord);\n  const [uniqueTreeViewUUID] = useState(uuidv4());\n  const [draggedItem, setDraggedItem] = useState<DSTreeviewT.Item | null>(null);\n  const [hoverItem, setHoverItem] = useState<DSTreeviewT.Item | null>(null);\n  const [latestToggledItem, setLatestToggledItem] = useState<DSTreeviewT.Item | null>(null);\n  const [selectedItem, setSelectedItem] = useState<DSTreeviewT.Item | null>(null);\n  const [focusedItem, setFocusedItem] = useState<DSTreeviewT.Item | null>(null);\n  const [selectedCheckboxes, setSelectedCheckboxes] = useState({\n    ...selection,\n  });\n  const [expandedGroups, setExpandedGroups] = useState<DSTreeviewT.ExpandedItems>({});\n  const { visibleItems, tree, treeRoot, triggerTreeRerender, updateUserExpandedState } = useTree(\n    data,\n    propsWithDefault,\n    {\n      setExpandedGroups,\n    },\n  );\n\n  const virtualListRef = useRef<HTMLUListElement>();\n  // estimateSize should not be really required given what was stated on\n  // https://github.com/tannerlinsley/react-virtual/issues/23\n\n  const virtualListHelpers = useVirtual({\n    size: visibleItems.length,\n    parentRef: virtualListRef,\n    overscan: 15,\n  });\n\n  const withDragAndDrop = !!(plugins?.includes(TreeDndPlugin) && onOrderChange);\n  const withRadioChecks = isSingleSelect && !isMultiSelect;\n  const withCheckboxChecks = !isSingleSelect && isMultiSelect;\n\n  const handleExpandGroup = useCallback(toggleItemExpand, []);\n\n  const ctx: DSTreeviewInternalsT.CTX = useMemo(\n    () => ({\n      props: propsWithDefault,\n      setRelativeMouseCord,\n      relativeMouseCord,\n      virtualListHelpers,\n      virtualListRef,\n      tree,\n      treeRoot,\n      visibleItems,\n      triggerTreeRerender,\n      isDragging,\n      setIsDragging,\n      isKeyboardDragging,\n      setIsKeyboardDragging,\n      draggedItem,\n      setDraggedItem,\n      withRadioChecks,\n      withCheckboxChecks,\n      withDragAndDrop,\n      uniqueTreeViewUUID,\n      selectedCheckboxes,\n      setSelectedCheckboxes,\n      selectedItem,\n      setSelectedItem,\n      expandedGroups,\n      setExpandedGroups,\n      latestToggledItem,\n      setLatestToggledItem,\n      focusedItem,\n      setFocusedItem,\n      hoverItem,\n      setHoverItem,\n      handleExpandGroup,\n      updateUserExpandedState,\n    }),\n    [\n      draggedItem,\n      expandedGroups,\n      focusedItem,\n      handleExpandGroup,\n      hoverItem,\n      isDragging,\n      isKeyboardDragging,\n      latestToggledItem,\n      propsWithDefault,\n      relativeMouseCord,\n      selectedCheckboxes,\n      selectedItem,\n      tree,\n      treeRoot,\n      triggerTreeRerender,\n      uniqueTreeViewUUID,\n      virtualListHelpers,\n      visibleItems,\n      withCheckboxChecks,\n      withDragAndDrop,\n      withRadioChecks,\n      updateUserExpandedState,\n    ],\n  );\n  // this hooks can't use the context because the context provider doesn't wrap this\n  // as such we manually pass the second parameter as fit\n  if (instanceRef) instanceRef.current = treeRef.current;\n  useInstanceRefActions(treeRef.current, ctx);\n  useGlobalToggleAllExpandShortcut(treeRoot, triggerTreeRerender, setLatestToggledItem, updateUserExpandedState);\n  useNotifyExpandedChange(propsWithDefault, ctx);\n\n  // this is an horrible hack.\n  // this is required because there is no \"on rendered\" react-way to check if every children has finished rendering\n  // this should be working for now, in the future we may want to review this for a better solution\n  useEffect(() => {\n    setTimeout(() => onInstanceRefInitialized(treeRef), 100);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  return useMemo(() => ({ ctx }), [ctx]);\n};\n"],
-  "mappings": "AAAA;ACEA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AAMO,MAAM,cAA4B,CAAC,UAAU;AAClD,QAAM,mBAAmB,6BAAgD,OAAO;AAChF,iCAAkD,kBAAkB;AACpE,QAAM,iBAAiB;AAAA,IACrB,SAAS;AAAA,MACP,iBAAiB,MAAM;AAAA;AAAA,MACvB,UAAU,MAAM;AAAA;AAAA,MAChB,+BAA+B,MAAM;AAAA;AAAA,MACrC,8BAA8B,MAAM;AAAA;AAAA;AAAA;AAGxC,QAAM,UAAU,OAAO;AACvB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE;AACJ,QAAM,CAAC,YAAY,iBAAiB,SAAS;AAC7C,QAAM,CAAC,oBAAoB,yBAAyB,SAAS;AAC7D,QAAM,CAAC,mBAAmB,wBACxB,SAA0C;AAC5C,QAAM,CAAC,sBAAsB,SAAS;AACtC,QAAM,CAAC,aAAa,kBAAkB,SAAkC;AACxE,QAAM,CAAC,WAAW,gBAAgB,SAAkC;AACpE,QAAM,CAAC,mBAAmB,wBAAwB,SAAkC;AACpF,QAAM,CAAC,cAAc,mBAAmB,SAAkC;AAC1E,QAAM,CAAC,aAAa,kBAAkB,SAAkC;AACxE,QAAM,CAAC,oBAAoB,yBAAyB,SAAS;AAAA,OACxD;AAAA;AAEL,QAAM,CAAC,gBAAgB,qBAAqB,SAAoC;AAChF,QAAM,EAAE,cAAc,MAAM,UAAU,qBAAqB,4BAA4B,QACrF,MACA,kBACA;AAAA,IACE;AAAA;AAIJ,QAAM,iBAAiB;AAIvB,QAAM,qBAAqB,WAAW;AAAA,IACpC,MAAM,aAAa;AAAA,IACnB,WAAW;AAAA,IACX,UAAU;AAAA;AAGZ,QAAM,kBAAkB,CAAC,CAAE,UAAS,SAAS,kBAAkB;AAC/D,QAAM,kBAAkB,kBAAkB,CAAC;AAC3C,QAAM,qBAAqB,CAAC,kBAAkB;AAE9C,QAAM,oBAAoB,YAAY,kBAAkB;AAExD,QAAM,MAAgC,QACpC,MAAO;AAAA,IACL,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MAEF;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAKJ,MAAI;AAAa,gBAAY,UAAU,QAAQ;AAC/C,wBAAsB,QAAQ,SAAS;AACvC,mCAAiC,UAAU,qBAAqB,sBAAsB;AACtF,0BAAwB,kBAAkB;AAK1C,YAAU,MAAM;AACd,eAAW,MAAM,yBAAyB,UAAU;AAAA,KAEnD;AAEH,SAAO,QAAQ,MAAO,GAAE,QAAQ,CAAC;AAAA;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable max-statements */\nimport { useState, useRef, useEffect, useMemo, useCallback } from 'react';\nimport { useVirtual } from 'react-virtual';\nimport { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport { v4 as uuidv4 } from 'uuid';\n\nimport { TreeViewPropTypes } from '../react-desc-prop-types';\nimport { defaultProps } from '../TreeViewContext';\nimport { TreeDndPlugin } from '../plugins/dnd';\nimport { useTree } from '../utils/useTree';\nimport { useNotifyExpandedChange, toggleItemExpand } from '../utils/group-expands-helpers';\nimport { useInstanceRefActions } from '../utils/useInstanceRefActions';\nimport { useGlobalToggleAllExpandShortcut } from '../utils/keyboard-helpers';\nimport type { DSTreeviewT } from '../react-desc-prop-types';\nimport type { DSTreeviewInternalsT } from '../sharedTypes';\n\ntype UseTreeviewT = (props: DSTreeviewT.Props) => { ctx: DSTreeviewInternalsT.CTX };\n\nexport const useTreeview: UseTreeviewT = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault<DSTreeviewT.Props>(props, defaultProps);\n  useValidateTypescriptPropTypes<DSTreeviewT.Props>(propsWithDefault, TreeViewPropTypes);\n  const defaultActions = {\n    actions: {\n      toggleExpandAll: () => {},\n      scrollTo: () => {},\n      setSelectedItemByVirtualIndex: () => {},\n      setFocusedItemByVirtualIndex: () => {},\n    },\n  } as unknown as DSTreeviewT.InstanceRef;\n  const treeRef = useRef(defaultActions);\n  const {\n    data,\n    plugins,\n    onOrderChange,\n    isMultiSelect,\n    isSingleSelect,\n    instanceRef,\n    selection,\n    onInstanceRefInitialized,\n  } = propsWithDefault;\n  const [uniqueTreeViewUUID] = useState(uuidv4());\n  const [hoverItem, setHoverItem] = useState<DSTreeviewT.Item | null>(null);\n  const [latestToggledItem, setLatestToggledItem] = useState<DSTreeviewT.Item | null>(null);\n  const [selectedItem, setSelectedItem] = useState<DSTreeviewT.Item | null>(null);\n  const [focusedItem, setFocusedItem] = useState<DSTreeviewT.Item | null>(null);\n  const [selectedCheckboxes, setSelectedCheckboxes] = useState({\n    ...selection,\n  });\n  const [expandedGroups, setExpandedGroups] = useState<DSTreeviewT.ExpandedItems>({});\n  const { visibleItems, flattenedItems, tree, treeRoot, triggerTreeRerender, updateUserExpandedState } = useTree(\n    data,\n    propsWithDefault,\n    {\n      setExpandedGroups,\n    },\n  );\n\n  const virtualListRef = useRef<HTMLUListElement>();\n  // estimateSize should not be really required given what was stated on\n  // https://github.com/tannerlinsley/react-virtual/issues/23\n\n  const virtualListHelpers = useVirtual({\n    size: visibleItems.length,\n    parentRef: virtualListRef,\n    overscan: 15,\n  });\n\n  const withDragAndDrop = !!(plugins?.includes(TreeDndPlugin) && onOrderChange);\n  const withRadioChecks = isSingleSelect && !isMultiSelect;\n  const withCheckboxChecks = !isSingleSelect && isMultiSelect;\n\n  const handleExpandGroup = useCallback(toggleItemExpand, []);\n\n  const ctx: DSTreeviewInternalsT.CTX = useMemo(\n    () => ({\n      props: propsWithDefault,\n      virtualListHelpers,\n      virtualListRef,\n      tree,\n      treeRoot,\n      visibleItems,\n      flattenedItems,\n      triggerTreeRerender,\n      withRadioChecks,\n      withCheckboxChecks,\n      withDragAndDrop,\n      uniqueTreeViewUUID,\n      selectedCheckboxes,\n      setSelectedCheckboxes,\n      selectedItem,\n      setSelectedItem,\n      expandedGroups,\n      setExpandedGroups,\n      latestToggledItem,\n      setLatestToggledItem,\n      focusedItem,\n      setFocusedItem,\n      hoverItem,\n      setHoverItem,\n      handleExpandGroup,\n      updateUserExpandedState,\n    }),\n    [\n      propsWithDefault,\n      virtualListHelpers,\n      tree,\n      treeRoot,\n      visibleItems,\n      flattenedItems,\n      triggerTreeRerender,\n      withRadioChecks,\n      withCheckboxChecks,\n      withDragAndDrop,\n      uniqueTreeViewUUID,\n      selectedCheckboxes,\n      selectedItem,\n      expandedGroups,\n      latestToggledItem,\n      focusedItem,\n      hoverItem,\n      handleExpandGroup,\n      updateUserExpandedState,\n    ],\n  );\n  // this hooks can't use the context because the context provider doesn't wrap this\n  // as such we manually pass the second parameter as fit\n  if (instanceRef) instanceRef.current = treeRef.current;\n  useInstanceRefActions(treeRef.current, ctx);\n  useGlobalToggleAllExpandShortcut(treeRoot, triggerTreeRerender, setLatestToggledItem, updateUserExpandedState);\n  useNotifyExpandedChange(propsWithDefault, ctx);\n\n  // this is an horrible hack.\n  // this is required because there is no \"on rendered\" react-way to check if every children has finished rendering\n  // this should be working for now, in the future we may want to review this for a better solution\n  useEffect(() => {\n    setTimeout(() => onInstanceRefInitialized(treeRef), 100);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  return useMemo(() => ({ ctx }), [ctx]);\n};\n"],
+  "mappings": "AAAA;ACEA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AAMO,MAAM,cAA4B,CAAC,UAAU;AAClD,QAAM,mBAAmB,6BAAgD,OAAO;AAChF,iCAAkD,kBAAkB;AACpE,QAAM,iBAAiB;AAAA,IACrB,SAAS;AAAA,MACP,iBAAiB,MAAM;AAAA;AAAA,MACvB,UAAU,MAAM;AAAA;AAAA,MAChB,+BAA+B,MAAM;AAAA;AAAA,MACrC,8BAA8B,MAAM;AAAA;AAAA;AAAA;AAGxC,QAAM,UAAU,OAAO;AACvB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE;AACJ,QAAM,CAAC,sBAAsB,SAAS;AACtC,QAAM,CAAC,WAAW,gBAAgB,SAAkC;AACpE,QAAM,CAAC,mBAAmB,wBAAwB,SAAkC;AACpF,QAAM,CAAC,cAAc,mBAAmB,SAAkC;AAC1E,QAAM,CAAC,aAAa,kBAAkB,SAAkC;AACxE,QAAM,CAAC,oBAAoB,yBAAyB,SAAS;AAAA,OACxD;AAAA;AAEL,QAAM,CAAC,gBAAgB,qBAAqB,SAAoC;AAChF,QAAM,EAAE,cAAc,gBAAgB,MAAM,UAAU,qBAAqB,4BAA4B,QACrG,MACA,kBACA;AAAA,IACE;AAAA;AAIJ,QAAM,iBAAiB;AAIvB,QAAM,qBAAqB,WAAW;AAAA,IACpC,MAAM,aAAa;AAAA,IACnB,WAAW;AAAA,IACX,UAAU;AAAA;AAGZ,QAAM,kBAAkB,CAAC,CAAE,UAAS,SAAS,kBAAkB;AAC/D,QAAM,kBAAkB,kBAAkB,CAAC;AAC3C,QAAM,qBAAqB,CAAC,kBAAkB;AAE9C,QAAM,oBAAoB,YAAY,kBAAkB;AAExD,QAAM,MAAgC,QACpC,MAAO;AAAA,IACL,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MAEF;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAKJ,MAAI;AAAa,gBAAY,UAAU,QAAQ;AAC/C,wBAAsB,QAAQ,SAAS;AACvC,mCAAiC,UAAU,qBAAqB,sBAAsB;AACtF,0BAAwB,kBAAkB;AAK1C,YAAU,MAAM;AACd,eAAW,MAAM,yBAAyB,UAAU;AAAA,KAEnD;AAEH,SAAO,QAAQ,MAAO,GAAE,QAAQ,CAAC;AAAA;",
   "names": []
 }

package/esm/hoc/DnDTreeContext.js

@@ -0,0 +1,16 @@
+import * as React from "react";
+import { createContext } from "react";
+import { DropIndicatorPosition } from "./SortableItemContext";
+const DnDTreeContext = createContext({
+  depth: void 0,
+  activeIndex: void 0,
+  visibleItems: void 0,
+  dropIndicatorPosition: DropIndicatorPosition.None,
+  lastActiveId: void 0,
+  setLastActiveId: void 0,
+  isDropValid: false
+});
+export {
+  DnDTreeContext
+};
+//# sourceMappingURL=DnDTreeContext.js.map

package/esm/hoc/DnDTreeContext.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/hoc/DnDTreeContext.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { createContext } from 'react';\nimport { DSTreeviewT } from '../react-desc-prop-types';\nimport { DropIndicatorPosition } from './SortableItemContext';\n\ntype DnDTreeContextType = {\n  depth: number | undefined;\n  activeIndex: number | undefined;\n  visibleItems: DSTreeviewT.Item[] | undefined;\n  dropIndicatorPosition: DropIndicatorPosition;\n  lastActiveId: string | undefined;\n  setLastActiveId: React.Dispatch<React.SetStateAction<string>> | undefined;\n  isDropValid: boolean;\n};\n\nexport const DnDTreeContext = createContext<DnDTreeContextType>({\n  depth: undefined,\n  activeIndex: undefined,\n  visibleItems: undefined,\n  dropIndicatorPosition: DropIndicatorPosition.None,\n  lastActiveId: undefined,\n  setLastActiveId: undefined,\n  isDropValid: false,\n});\n"],
+  "mappings": "AAAA;ACAA;AAEA;AAYO,MAAM,iBAAiB,cAAkC;AAAA,EAC9D,OAAO;AAAA,EACP,aAAa;AAAA,EACb,cAAc;AAAA,EACd,uBAAuB,sBAAsB;AAAA,EAC7C,cAAc;AAAA,EACd,iBAAiB;AAAA,EACjB,aAAa;AAAA;",
+  "names": []
+}

package/esm/hoc/SortableItemContext.js

@@ -0,0 +1,17 @@
+import * as React from "react";
+import { createContext } from "react";
+var DropIndicatorPosition = /* @__PURE__ */ ((DropIndicatorPosition2) => {
+  DropIndicatorPosition2[DropIndicatorPosition2["None"] = 0] = "None";
+  DropIndicatorPosition2[DropIndicatorPosition2["Before"] = 1] = "Before";
+  DropIndicatorPosition2[DropIndicatorPosition2["After"] = 2] = "After";
+  DropIndicatorPosition2[DropIndicatorPosition2["Inside"] = 3] = "Inside";
+  return DropIndicatorPosition2;
+})(DropIndicatorPosition || {});
+const SortableItemContext = createContext({
+  draggableProps: false
+});
+export {
+  DropIndicatorPosition,
+  SortableItemContext
+};
+//# sourceMappingURL=SortableItemContext.js.map

package/esm/hoc/SortableItemContext.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/hoc/SortableItemContext.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useSortable } from '@dnd-kit/sortable';\nimport { createContext } from 'react';\n\nexport enum DropIndicatorPosition {\n  None = 0,\n  Before = 1,\n  After = 2,\n  Inside = 3,\n}\n\nexport type SortableItemContextType = {\n  draggableProps:\n    | false\n    | (ReturnType<typeof useSortable> & {\n        dropIndicatorPosition: DropIndicatorPosition;\n        shouldShowDropIndicatorPosition: boolean;\n        lastActiveId?: string;\n        setLastActiveId?: React.Dispatch<React.SetStateAction<string>>;\n        isDropValid: boolean;\n      });\n};\n\n/** Context for cross component communication */\nexport const SortableItemContext = createContext<SortableItemContextType>({\n  draggableProps: false,\n});\n"],
+  "mappings": "AAAA;ACCA;AAEO,IAAK,wBAAL,kBAAK,2BAAL;AACL,0DAAO,KAAP;AACA,4DAAS,KAAT;AACA,2DAAQ,KAAR;AACA,4DAAS,KAAT;AAJU;AAAA;AAoBL,MAAM,sBAAsB,cAAuC;AAAA,EACxE,gBAAgB;AAAA;",
+  "names": []
+}