@elliemae/ds-treeview 3.0.0-alpha.3 → 3.0.0-next.3

package/dist/cjs/TreeViewContext.js

@@ -91,7 +91,8 @@ const defaultContext = {
     virtualItems: [],
     totalSize: 0,
     scrollToOffset: noop,
-    scrollToIndex: noop
+    scrollToIndex: noop,
+    measure: noop
   },
   virtualListRef: void 0,
   uniqueTreeViewUUID: "",

package/dist/cjs/TreeViewContext.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/TreeViewContext.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* 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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAyC;AAKzC,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,gCAAc;AAEtC,IAAO,0BAAQ;",
+  "sourcesContent": ["/* 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    measure: 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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAyC;AAKzC,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,IACf,SAAS;AAAA;AAAA,EAEX,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,gCAAc;AAEtC,IAAO,0BAAQ;",
   "names": []
 }

package/dist/cjs/hoc/DnDTreeContext.js

@@ -37,8 +37,6 @@ const DnDTreeContext = (0, import_react.createContext)({
   activeIndex: void 0,
   visibleItems: void 0,
   dropIndicatorPosition: import_SortableItemContext.DropIndicatorPosition.None,
-  lastActiveId: void 0,
-  setLastActiveId: void 0,
   isDropValid: false
 });
 module.exports = __toCommonJS(DnDTreeContext_exports);

package/dist/cjs/hoc/DnDTreeContext.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/hoc/DnDTreeContext.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA8B;AAE9B,iCAAsC;AAY/B,MAAM,iBAAiB,gCAAkC;AAAA,EAC9D,OAAO;AAAA,EACP,aAAa;AAAA,EACb,cAAc;AAAA,EACd,uBAAuB,iDAAsB;AAAA,EAC7C,cAAc;AAAA,EACd,iBAAiB;AAAA,EACjB,aAAa;AAAA;",
+  "sourcesContent": ["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  isDropValid: boolean;\n};\n\nexport const DnDTreeContext = createContext<DnDTreeContextType>({\n  depth: undefined,\n  activeIndex: undefined,\n  visibleItems: undefined,\n  dropIndicatorPosition: DropIndicatorPosition.None,\n  isDropValid: false,\n});\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA8B;AAE9B,iCAAsC;AAU/B,MAAM,iBAAiB,gCAAkC;AAAA,EAC9D,OAAO;AAAA,EACP,aAAa;AAAA,EACb,cAAc;AAAA,EACd,uBAAuB,iDAAsB;AAAA,EAC7C,aAAa;AAAA;",
   "names": []
 }

package/dist/cjs/hoc/SortableItemContext.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/hoc/SortableItemContext.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAA8B;AAEvB,IAAK,wBAAL,kBAAK,2BAAL;AACL,0DAAO,KAAP;AACA,4DAAS,KAAT;AACA,2DAAQ,KAAR;AACA,4DAAS,KAAT;AAJU;AAAA;AAoBL,MAAM,sBAAsB,gCAAuC;AAAA,EACxE,gBAAgB;AAAA;",
+  "sourcesContent": ["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        isDropValid: boolean;\n      });\n};\n\n/** Context for cross component communication */\nexport const SortableItemContext = createContext<SortableItemContextType>({\n  draggableProps: false,\n});\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAA8B;AAEvB,IAAK,wBAAL,kBAAK,2BAAL;AACL,0DAAO,KAAP;AACA,4DAAS,KAAT;AACA,2DAAQ,KAAR;AACA,4DAAS,KAAT;AAJU;AAAA;AAkBL,MAAM,sBAAsB,gCAAuC;AAAA,EACxE,gBAAgB;AAAA;",
   "names": []
 }

package/dist/cjs/hoc/WithConditionalDnDContext.js

@@ -51,6 +51,8 @@ var import_ds_drag_and_drop = require("@elliemae/ds-drag-and-drop");
 var import_TreeViewContext = __toESM(require("../TreeViewContext"));
 var import_TreeItem = require("../parts/TreeItem");
 var import_DnDTreeContext = require("./DnDTreeContext");
+var import_SortableItemContext = require("./SortableItemContext");
+var import_group_expands_helpers = require("../utils/group-expands-helpers");
 const ensure = (argument, message = "This should never happen") => {
   if (argument === void 0 || argument === null) {
     throw new TypeError(message);
@@ -58,10 +60,11 @@ const ensure = (argument, message = "This should never happen") => {
   return argument;
 };
 const withConditionalDnDRowContext = (Component) => (props) => {
-  const [lastActiveId, setLastActiveId] = import_react.default.useState("");
   const {
     props: { data, onOrderChange, getIsDropValid },
     flattenedItems,
+    updateUserExpandedState,
+    triggerTreeRerender,
     visibleItems: flattenedVisibleTree,
     withDragAndDrop
   } = (0, import_react.useContext)(import_TreeViewContext.default);
@@ -98,7 +101,8 @@ const withConditionalDnDRowContext = (Component) => (props) => {
     depth,
     dropIndicatorPosition,
     visibleItems,
-    isDropValid
+    isDropValid,
+    overId
   } = (0, import_ds_drag_and_drop.useTreeDndkitConfig)({
     flattenedItems,
     visibleItems: flattenedVisibleTreeForDnD,
@@ -108,8 +112,22 @@ const withConditionalDnDRowContext = (Component) => (props) => {
     getIsDropValid,
     maxDragAndDropLevel: Infinity
   });
-  if (lastActiveId !== activeId && activeId)
-    setLastActiveId(activeId);
+  const timeoutRef = (0, import_react.useRef)();
+  (0, import_react.useEffect)(() => {
+    if (timeoutRef.current)
+      clearTimeout(timeoutRef.current);
+    if (dropIndicatorPosition === import_SortableItemContext.DropIndicatorPosition.Inside && overId) {
+      timeoutRef.current = setTimeout(() => {
+        const overItem = visibleItems.find((item) => item.uid === overId);
+        if (overItem) {
+          const realOverItem = overItem.original;
+          if (realOverItem.isGroup && !realOverItem.isExpanded) {
+            (0, import_group_expands_helpers.toggleItemExpand)(realOverItem, triggerTreeRerender, updateUserExpandedState);
+          }
+        }
+      }, 1e3);
+    }
+  }, [overId, dropIndicatorPosition, triggerTreeRerender, visibleItems, updateUserExpandedState]);
   if (withDragAndDrop)
     return /* @__PURE__ */ import_react.default.createElement(import_core.DndContext, __spreadValues({}, dndContextProps), /* @__PURE__ */ import_react.default.createElement(import_sortable.SortableContext, __spreadValues({}, sortableContextProps), /* @__PURE__ */ import_react.default.createElement(import_DnDTreeContext.DnDTreeContext.Provider, {
       value: {
@@ -117,8 +135,6 @@ const withConditionalDnDRowContext = (Component) => (props) => {
         depth,
         visibleItems: visibleItems.map((item) => item.original),
         dropIndicatorPosition,
-        lastActiveId,
-        setLastActiveId,
         isDropValid
       }
     }, /* @__PURE__ */ import_react.default.createElement(Component, __spreadValues({}, props)))), /* @__PURE__ */ import_react.default.createElement(import_core.DragOverlay, {

package/dist/cjs/hoc/WithConditionalDnDContext.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/hoc/WithConditionalDnDContext.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useCallback, useContext, useMemo } from 'react';\nimport { DndContext, DragOverlay } from '@dnd-kit/core';\nimport { SortableContext } from '@dnd-kit/sortable';\nimport { useTreeDndkitConfig } from '@elliemae/ds-drag-and-drop';\nimport { DSTreeviewT } from '../react-desc-prop-types';\nimport TreeViewContext from '../TreeViewContext';\nimport { TreeItem } from '../parts/TreeItem';\nimport { DnDTreeContext } from './DnDTreeContext';\n\ntype FunctionalHOC = <T = unknown>(Component: React.ComponentType<T>, ...other: unknown[]) => (props: T) => JSX.Element;\n\nconst ensure = <T,>(argument: T | undefined | null, message = 'This should never happen'): T => {\n  if (argument === undefined || argument === null) {\n    throw new TypeError(message);\n  }\n\n  return argument;\n};\n\n// only wraps in \"DnDContext\" and \"DnDTreeContext\" if any Drag and Drop functionality is requested\nexport const withConditionalDnDRowContext: FunctionalHOC = (Component) => (props) => {\n  const [lastActiveId, setLastActiveId] = React.useState('');\n\n  const {\n    props: { data, onOrderChange, getIsDropValid },\n    flattenedItems,\n    visibleItems: flattenedVisibleTree,\n    withDragAndDrop,\n  } = useContext(TreeViewContext);\n\n  const flattenedVisibleTreeForDnD = useMemo(\n    () =>\n      flattenedVisibleTree.map((item, index) => ({\n        uid: item.id.toString(),\n        depth: (item.treeDepth ?? 1) - 1,\n        realIndex: index,\n        childrenCount: item.children?.length ?? 0,\n        parentId: item.node.parent?.model?.id?.toString() ?? null,\n        original: item,\n      })),\n    [flattenedVisibleTree],\n  );\n\n  const onReorder = useCallback(\n    (tree: DSTreeviewT.DndItem[], indexes: { targetIndex: number; fromIndex: number }) => {\n      // Pull the row's original data into an object\n      const nodes: Record<DSTreeviewT.StringOrNum, DSTreeviewT.SimpleItem> = {};\n      tree.forEach((item) => {\n        const originalItem = item.original;\n        originalItem.children = [];\n        nodes[item.uid] = item.original;\n      });\n\n      const newUserTree: DSTreeviewT.SimpleItem[] = [];\n      tree.forEach((item) => {\n        // If row has parent, insert it to it's subrows\n        // otherwise append it to the new user data\n        if (item.parentId !== null && item.parentId !== undefined && item.parentId !== '__ds_tree_root') {\n          const parentNode = nodes[item.parentId];\n          parentNode.children?.push(item.original);\n        } else if (item.uid !== '__ds_tree_root') newUserTree.push(item.original);\n      });\n      // Tell the user that the order has change, he can chose to commit it or not\n      onOrderChange(newUserTree, data, flattenedItems[indexes.fromIndex]);\n    },\n    [onOrderChange, data, flattenedItems],\n  );\n\n  const {\n    dndContextProps,\n    sortableContextProps,\n    activeId,\n    activeIndex,\n    depth,\n    dropIndicatorPosition,\n    visibleItems,\n    isDropValid,\n  } = useTreeDndkitConfig({\n    flattenedItems,\n    visibleItems: flattenedVisibleTreeForDnD,\n    isHorizontalDnD: false,\n    isExpandable: true,\n    onReorder,\n    getIsDropValid,\n    maxDragAndDropLevel: Infinity,\n  });\n\n  if (lastActiveId !== activeId && activeId) setLastActiveId(activeId);\n\n  if (withDragAndDrop)\n    return (\n      <DndContext {...dndContextProps}>\n        <SortableContext {...sortableContextProps}>\n          <DnDTreeContext.Provider\n            value={{\n              activeIndex,\n              depth,\n              visibleItems: visibleItems.map((item) => item.original) as DSTreeviewT.Item[],\n              dropIndicatorPosition,\n              lastActiveId,\n              setLastActiveId,\n              isDropValid,\n            }}\n          >\n            <Component {...props} />\n          </DnDTreeContext.Provider>\n        </SortableContext>\n        <DragOverlay style={{ width: 'auto' }}>\n          {activeId ? (\n            <TreeItem\n              itemIndex={activeIndex}\n              item={ensure(flattenedVisibleTree.find((item) => item.id.toString() === activeId))}\n              isDragOverlay\n            />\n          ) : null}\n        </DragOverlay>\n      </DndContext>\n    );\n  return <Component {...props} />;\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAwD;AACxD,kBAAwC;AACxC,sBAAgC;AAChC,8BAAoC;AAEpC,6BAA4B;AAC5B,sBAAyB;AACzB,4BAA+B;AAI/B,MAAM,SAAS,CAAK,UAAgC,UAAU,+BAAkC;AAC9F,MAAI,aAAa,UAAa,aAAa,MAAM;AAC/C,UAAM,IAAI,UAAU;AAAA;AAGtB,SAAO;AAAA;AAIF,MAAM,+BAA8C,CAAC,cAAc,CAAC,UAAU;AACnF,QAAM,CAAC,cAAc,mBAAmB,qBAAM,SAAS;AAEvD,QAAM;AAAA,IACJ,OAAO,EAAE,MAAM,eAAe;AAAA,IAC9B;AAAA,IACA,cAAc;AAAA,IACd;AAAA,MACE,6BAAW;AAEf,QAAM,6BAA6B,0BACjC,MACE,qBAAqB,IAAI,CAAC,MAAM,UAAW;AAAA,IACzC,KAAK,KAAK,GAAG;AAAA,IACb,OAAQ,MAAK,aAAa,KAAK;AAAA,IAC/B,WAAW;AAAA,IACX,eAAe,KAAK,UAAU,UAAU;AAAA,IACxC,UAAU,KAAK,KAAK,QAAQ,OAAO,IAAI,cAAc;AAAA,IACrD,UAAU;AAAA,OAEd,CAAC;AAGH,QAAM,YAAY,8BAChB,CAAC,MAA6B,YAAwD;AAEpF,UAAM,QAAiE;AACvE,SAAK,QAAQ,CAAC,SAAS;AACrB,YAAM,eAAe,KAAK;AAC1B,mBAAa,WAAW;AACxB,YAAM,KAAK,OAAO,KAAK;AAAA;AAGzB,UAAM,cAAwC;AAC9C,SAAK,QAAQ,CAAC,SAAS;AAGrB,UAAI,KAAK,aAAa,QAAQ,KAAK,aAAa,UAAa,KAAK,aAAa,kBAAkB;AAC/F,cAAM,aAAa,MAAM,KAAK;AAC9B,mBAAW,UAAU,KAAK,KAAK;AAAA,iBACtB,KAAK,QAAQ;AAAkB,oBAAY,KAAK,KAAK;AAAA;AAGlE,kBAAc,aAAa,MAAM,eAAe,QAAQ;AAAA,KAE1D,CAAC,eAAe,MAAM;AAGxB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE,iDAAoB;AAAA,IACtB;AAAA,IACA,cAAc;AAAA,IACd,iBAAiB;AAAA,IACjB,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA,qBAAqB;AAAA;AAGvB,MAAI,iBAAiB,YAAY;AAAU,oBAAgB;AAE3D,MAAI;AACF,WACE,mDAAC,wBAAD,mBAAgB,kBACd,mDAAC,iCAAD,mBAAqB,uBACnB,mDAAC,qCAAe,UAAhB;AAAA,MACE,OAAO;AAAA,QACL;AAAA,QACA;AAAA,QACA,cAAc,aAAa,IAAI,CAAC,SAAS,KAAK;AAAA,QAC9C;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,OAGF,mDAAC,WAAD,mBAAe,WAGnB,mDAAC,yBAAD;AAAA,MAAa,OAAO,EAAE,OAAO;AAAA,OAC1B,WACC,mDAAC,0BAAD;AAAA,MACE,WAAW;AAAA,MACX,MAAM,OAAO,qBAAqB,KAAK,CAAC,SAAS,KAAK,GAAG,eAAe;AAAA,MACxE,eAAa;AAAA,SAEb;AAIZ,SAAO,mDAAC,WAAD,mBAAe;AAAA;",
+  "sourcesContent": ["import React, { useCallback, useContext, useEffect, useMemo, useRef } from 'react';\nimport { DndContext, DragOverlay } from '@dnd-kit/core';\nimport { SortableContext } from '@dnd-kit/sortable';\nimport { useTreeDndkitConfig } from '@elliemae/ds-drag-and-drop';\nimport { DSTreeviewT } from '../react-desc-prop-types';\nimport TreeViewContext from '../TreeViewContext';\nimport { TreeItem } from '../parts/TreeItem';\nimport { DnDTreeContext } from './DnDTreeContext';\nimport { DropIndicatorPosition } from './SortableItemContext';\nimport { toggleItemExpand } from '../utils/group-expands-helpers';\n\ntype FunctionalHOC = <T = unknown>(Component: React.ComponentType<T>, ...other: unknown[]) => (props: T) => JSX.Element;\n\nconst ensure = <T,>(argument: T | undefined | null, message = 'This should never happen'): T => {\n  if (argument === undefined || argument === null) {\n    throw new TypeError(message);\n  }\n\n  return argument;\n};\n\n// only wraps in \"DnDContext\" and \"DnDTreeContext\" if any Drag and Drop functionality is requested\nexport const withConditionalDnDRowContext: FunctionalHOC = (Component) => (props) => {\n  const {\n    props: { data, onOrderChange, getIsDropValid },\n    flattenedItems,\n    updateUserExpandedState,\n    triggerTreeRerender,\n    visibleItems: flattenedVisibleTree,\n    withDragAndDrop,\n  } = useContext(TreeViewContext);\n\n  const flattenedVisibleTreeForDnD = useMemo(\n    () =>\n      flattenedVisibleTree.map((item, index) => ({\n        uid: item.id.toString(),\n        depth: (item.treeDepth ?? 1) - 1,\n        realIndex: index,\n        childrenCount: item.children?.length ?? 0,\n        parentId: item.node.parent?.model?.id?.toString() ?? null,\n        original: item,\n      })),\n    [flattenedVisibleTree],\n  );\n\n  const onReorder = useCallback(\n    (tree: DSTreeviewT.DndItem[], indexes: { targetIndex: number; fromIndex: number }) => {\n      // Pull the row's original data into an object\n      const nodes: Record<DSTreeviewT.StringOrNum, DSTreeviewT.SimpleItem> = {};\n      tree.forEach((item) => {\n        const originalItem = item.original;\n        originalItem.children = [];\n        nodes[item.uid] = item.original;\n      });\n\n      const newUserTree: DSTreeviewT.SimpleItem[] = [];\n      tree.forEach((item) => {\n        // If row has parent, insert it to it's subrows\n        // otherwise append it to the new user data\n        if (item.parentId !== null && item.parentId !== undefined && item.parentId !== '__ds_tree_root') {\n          const parentNode = nodes[item.parentId];\n          parentNode.children?.push(item.original);\n        } else if (item.uid !== '__ds_tree_root') newUserTree.push(item.original);\n      });\n      // Tell the user that the order has change, he can chose to commit it or not\n      onOrderChange(newUserTree, data, flattenedItems[indexes.fromIndex]);\n    },\n    [onOrderChange, data, flattenedItems],\n  );\n\n  const {\n    dndContextProps,\n    sortableContextProps,\n    activeId,\n    activeIndex,\n    depth,\n    dropIndicatorPosition,\n    visibleItems,\n    isDropValid,\n    overId,\n  } = useTreeDndkitConfig({\n    flattenedItems,\n    visibleItems: flattenedVisibleTreeForDnD,\n    isHorizontalDnD: false,\n    isExpandable: true,\n    onReorder,\n    getIsDropValid,\n    maxDragAndDropLevel: Infinity,\n  });\n\n  const timeoutRef = useRef<NodeJS.Timeout>();\n\n  useEffect(() => {\n    if (timeoutRef.current) clearTimeout(timeoutRef.current);\n    if (dropIndicatorPosition === DropIndicatorPosition.Inside && overId) {\n      timeoutRef.current = setTimeout(() => {\n        const overItem = visibleItems.find((item) => item.uid === overId);\n        if (overItem) {\n          const realOverItem = overItem.original as DSTreeviewT.Item;\n          if (realOverItem.isGroup && !realOverItem.isExpanded) {\n            toggleItemExpand(realOverItem, triggerTreeRerender, updateUserExpandedState);\n          }\n        }\n      }, 1000);\n    }\n  }, [overId, dropIndicatorPosition, triggerTreeRerender, visibleItems, updateUserExpandedState]);\n\n  if (withDragAndDrop)\n    return (\n      <DndContext {...dndContextProps}>\n        <SortableContext {...sortableContextProps}>\n          <DnDTreeContext.Provider\n            value={{\n              activeIndex,\n              depth,\n              visibleItems: visibleItems.map((item) => item.original) as DSTreeviewT.Item[],\n              dropIndicatorPosition,\n              isDropValid,\n            }}\n          >\n            <Component {...props} />\n          </DnDTreeContext.Provider>\n        </SortableContext>\n        <DragOverlay style={{ width: 'auto' }}>\n          {activeId ? (\n            <TreeItem\n              itemIndex={activeIndex}\n              item={ensure(flattenedVisibleTree.find((item) => item.id.toString() === activeId))}\n              isDragOverlay\n            />\n          ) : null}\n        </DragOverlay>\n      </DndContext>\n    );\n  return <Component {...props} />;\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA2E;AAC3E,kBAAwC;AACxC,sBAAgC;AAChC,8BAAoC;AAEpC,6BAA4B;AAC5B,sBAAyB;AACzB,4BAA+B;AAC/B,iCAAsC;AACtC,mCAAiC;AAIjC,MAAM,SAAS,CAAK,UAAgC,UAAU,+BAAkC;AAC9F,MAAI,aAAa,UAAa,aAAa,MAAM;AAC/C,UAAM,IAAI,UAAU;AAAA;AAGtB,SAAO;AAAA;AAIF,MAAM,+BAA8C,CAAC,cAAc,CAAC,UAAU;AACnF,QAAM;AAAA,IACJ,OAAO,EAAE,MAAM,eAAe;AAAA,IAC9B;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd;AAAA,MACE,6BAAW;AAEf,QAAM,6BAA6B,0BACjC,MACE,qBAAqB,IAAI,CAAC,MAAM,UAAW;AAAA,IACzC,KAAK,KAAK,GAAG;AAAA,IACb,OAAQ,MAAK,aAAa,KAAK;AAAA,IAC/B,WAAW;AAAA,IACX,eAAe,KAAK,UAAU,UAAU;AAAA,IACxC,UAAU,KAAK,KAAK,QAAQ,OAAO,IAAI,cAAc;AAAA,IACrD,UAAU;AAAA,OAEd,CAAC;AAGH,QAAM,YAAY,8BAChB,CAAC,MAA6B,YAAwD;AAEpF,UAAM,QAAiE;AACvE,SAAK,QAAQ,CAAC,SAAS;AACrB,YAAM,eAAe,KAAK;AAC1B,mBAAa,WAAW;AACxB,YAAM,KAAK,OAAO,KAAK;AAAA;AAGzB,UAAM,cAAwC;AAC9C,SAAK,QAAQ,CAAC,SAAS;AAGrB,UAAI,KAAK,aAAa,QAAQ,KAAK,aAAa,UAAa,KAAK,aAAa,kBAAkB;AAC/F,cAAM,aAAa,MAAM,KAAK;AAC9B,mBAAW,UAAU,KAAK,KAAK;AAAA,iBACtB,KAAK,QAAQ;AAAkB,oBAAY,KAAK,KAAK;AAAA;AAGlE,kBAAc,aAAa,MAAM,eAAe,QAAQ;AAAA,KAE1D,CAAC,eAAe,MAAM;AAGxB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE,iDAAoB;AAAA,IACtB;AAAA,IACA,cAAc;AAAA,IACd,iBAAiB;AAAA,IACjB,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA,qBAAqB;AAAA;AAGvB,QAAM,aAAa;AAEnB,8BAAU,MAAM;AACd,QAAI,WAAW;AAAS,mBAAa,WAAW;AAChD,QAAI,0BAA0B,iDAAsB,UAAU,QAAQ;AACpE,iBAAW,UAAU,WAAW,MAAM;AACpC,cAAM,WAAW,aAAa,KAAK,CAAC,SAAS,KAAK,QAAQ;AAC1D,YAAI,UAAU;AACZ,gBAAM,eAAe,SAAS;AAC9B,cAAI,aAAa,WAAW,CAAC,aAAa,YAAY;AACpD,+DAAiB,cAAc,qBAAqB;AAAA;AAAA;AAAA,SAGvD;AAAA;AAAA,KAEJ,CAAC,QAAQ,uBAAuB,qBAAqB,cAAc;AAEtE,MAAI;AACF,WACE,mDAAC,wBAAD,mBAAgB,kBACd,mDAAC,iCAAD,mBAAqB,uBACnB,mDAAC,qCAAe,UAAhB;AAAA,MACE,OAAO;AAAA,QACL;AAAA,QACA;AAAA,QACA,cAAc,aAAa,IAAI,CAAC,SAAS,KAAK;AAAA,QAC9C;AAAA,QACA;AAAA;AAAA,OAGF,mDAAC,WAAD,mBAAe,WAGnB,mDAAC,yBAAD;AAAA,MAAa,OAAO,EAAE,OAAO;AAAA,OAC1B,WACC,mDAAC,0BAAD;AAAA,MACE,WAAW;AAAA,MACX,MAAM,OAAO,qBAAqB,KAAK,CAAC,SAAS,KAAK,GAAG,eAAe;AAAA,MACxE,eAAa;AAAA,SAEb;AAIZ,SAAO,mDAAC,WAAD,mBAAe;AAAA;",
   "names": []
 }

package/dist/cjs/hoc/WithDnDSortableItemContext.js

@@ -54,7 +54,7 @@ var import_TreeViewContext = __toESM(require("../TreeViewContext"));
 var import_DnDTreeContext = require("./DnDTreeContext");
 const withDnDSortableItemContext = (Component) => (props) => {
   const { withDragAndDrop } = (0, import_react.useContext)(import_TreeViewContext.default);
-  const { dropIndicatorPosition, lastActiveId, setLastActiveId, isDropValid } = (0, import_react.useContext)(import_DnDTreeContext.DnDTreeContext);
+  const { dropIndicatorPosition, isDropValid } = (0, import_react.useContext)(import_DnDTreeContext.DnDTreeContext);
   const id = props.item.id.toString();
   const draggableOptions = (0, import_react.useMemo)(() => ({
     id
@@ -67,11 +67,9 @@ const withDnDSortableItemContext = (Component) => (props) => {
     return __spreadProps(__spreadValues({}, useSortableHelpers), {
       shouldShowDropIndicatorPosition: overIndex === index,
       dropIndicatorPosition,
-      lastActiveId,
-      setLastActiveId,
       isDropValid
     });
-  }, [withDragAndDrop, useSortableHelpers, dropIndicatorPosition, lastActiveId, setLastActiveId, isDropValid]);
+  }, [withDragAndDrop, useSortableHelpers, dropIndicatorPosition, isDropValid]);
   const ctx = (0, import_react.useMemo)(() => ({
     draggableProps
   }), [draggableProps]);

package/dist/cjs/hoc/WithDnDSortableItemContext.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/hoc/WithDnDSortableItemContext.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-unsafe-call */\n/* eslint-disable @typescript-eslint/no-unsafe-member-access */\n/* eslint-disable @typescript-eslint/no-unsafe-assignment */\nimport React, { useContext, useMemo } from 'react';\nimport { useSortable } from '@dnd-kit/sortable';\nimport { SortableItemContext, SortableItemContextType } from './SortableItemContext';\nimport TreeViewContext from '../TreeViewContext';\nimport { DnDTreeContext } from './DnDTreeContext';\nimport { DSTreeviewT } from '../react-desc-prop-types';\n\ntype FunctionalHOC = <T = unknown>(Component: React.ComponentType<T>, ...other: unknown[]) => (props: T) => JSX.Element;\n\nexport const withDnDSortableItemContext: FunctionalHOC = (Component) => (props: any) => {\n  const { withDragAndDrop } = useContext(TreeViewContext);\n  const { dropIndicatorPosition, lastActiveId, setLastActiveId, isDropValid } = useContext(DnDTreeContext);\n\n  const id = (props as { item: DSTreeviewT.Item }).item.id.toString();\n\n  // onMount generate unique options, so everyting is only ran once\n  const draggableOptions = useMemo(\n    () => ({\n      id,\n    }),\n    [id],\n  );\n\n  const useSortableHelpers = useSortable(draggableOptions);\n\n  // calculate all the \"useSortable\" values as per required\n  const draggableProps = useMemo(() => {\n    if (!withDragAndDrop) return false;\n\n    const { index, overIndex } = useSortableHelpers;\n\n    return {\n      ...useSortableHelpers,\n      shouldShowDropIndicatorPosition: overIndex === index,\n      dropIndicatorPosition,\n      lastActiveId,\n      setLastActiveId,\n      isDropValid,\n    };\n  }, [withDragAndDrop, useSortableHelpers, dropIndicatorPosition, lastActiveId, setLastActiveId, isDropValid]);\n\n  // we use a context so we can easly access information wherever without bubbling down\n  // this context is all Memoized so as long as component is not re-mounted,\n  // the context won't trigger un-required renders per-se...\n  const ctx: SortableItemContextType = useMemo(\n    () => ({\n      draggableProps,\n    }),\n    [draggableProps],\n  );\n  // we always add the context, if draggableProps===false we don't have the DnD enabled.\n  return (\n    <SortableItemContext.Provider value={ctx}>\n      <Component {...props} />\n    </SortableItemContext.Provider>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,mBAA2C;AAC3C,sBAA4B;AAC5B,iCAA6D;AAC7D,6BAA4B;AAC5B,4BAA+B;AAKxB,MAAM,6BAA4C,CAAC,cAAc,CAAC,UAAe;AACtF,QAAM,EAAE,oBAAoB,6BAAW;AACvC,QAAM,EAAE,uBAAuB,cAAc,iBAAiB,gBAAgB,6BAAW;AAEzF,QAAM,KAAM,MAAqC,KAAK,GAAG;AAGzD,QAAM,mBAAmB,0BACvB,MAAO;AAAA,IACL;AAAA,MAEF,CAAC;AAGH,QAAM,qBAAqB,iCAAY;AAGvC,QAAM,iBAAiB,0BAAQ,MAAM;AACnC,QAAI,CAAC;AAAiB,aAAO;AAE7B,UAAM,EAAE,OAAO,cAAc;AAE7B,WAAO,iCACF,qBADE;AAAA,MAEL,iCAAiC,cAAc;AAAA,MAC/C;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,KAED,CAAC,iBAAiB,oBAAoB,uBAAuB,cAAc,iBAAiB;AAK/F,QAAM,MAA+B,0BACnC,MAAO;AAAA,IACL;AAAA,MAEF,CAAC;AAGH,SACE,mDAAC,+CAAoB,UAArB;AAAA,IAA8B,OAAO;AAAA,KACnC,mDAAC,WAAD,mBAAe;AAAA;",
+  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-unsafe-call */\n/* eslint-disable @typescript-eslint/no-unsafe-member-access */\n/* eslint-disable @typescript-eslint/no-unsafe-assignment */\nimport React, { useContext, useMemo } from 'react';\nimport { useSortable } from '@dnd-kit/sortable';\nimport { SortableItemContext, SortableItemContextType } from './SortableItemContext';\nimport TreeViewContext from '../TreeViewContext';\nimport { DnDTreeContext } from './DnDTreeContext';\nimport { DSTreeviewT } from '../react-desc-prop-types';\n\ntype FunctionalHOC = <T = unknown>(Component: React.ComponentType<T>, ...other: unknown[]) => (props: T) => JSX.Element;\n\nexport const withDnDSortableItemContext: FunctionalHOC = (Component) => (props: any) => {\n  const { withDragAndDrop } = useContext(TreeViewContext);\n  const { dropIndicatorPosition, isDropValid } = useContext(DnDTreeContext);\n\n  const id = (props as { item: DSTreeviewT.Item }).item.id.toString();\n\n  // onMount generate unique options, so everyting is only ran once\n  const draggableOptions = useMemo(\n    () => ({\n      id,\n    }),\n    [id],\n  );\n\n  const useSortableHelpers = useSortable(draggableOptions);\n\n  // calculate all the \"useSortable\" values as per required\n  const draggableProps = useMemo(() => {\n    if (!withDragAndDrop) return false;\n\n    const { index, overIndex } = useSortableHelpers;\n\n    return {\n      ...useSortableHelpers,\n      shouldShowDropIndicatorPosition: overIndex === index,\n      dropIndicatorPosition,\n      isDropValid,\n    };\n  }, [withDragAndDrop, useSortableHelpers, dropIndicatorPosition, isDropValid]);\n\n  // we use a context so we can easly access information wherever without bubbling down\n  // this context is all Memoized so as long as component is not re-mounted,\n  // the context won't trigger un-required renders per-se...\n  const ctx: SortableItemContextType = useMemo(\n    () => ({\n      draggableProps,\n    }),\n    [draggableProps],\n  );\n  // we always add the context, if draggableProps===false we don't have the DnD enabled.\n  return (\n    <SortableItemContext.Provider value={ctx}>\n      <Component {...props} />\n    </SortableItemContext.Provider>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,mBAA2C;AAC3C,sBAA4B;AAC5B,iCAA6D;AAC7D,6BAA4B;AAC5B,4BAA+B;AAKxB,MAAM,6BAA4C,CAAC,cAAc,CAAC,UAAe;AACtF,QAAM,EAAE,oBAAoB,6BAAW;AACvC,QAAM,EAAE,uBAAuB,gBAAgB,6BAAW;AAE1D,QAAM,KAAM,MAAqC,KAAK,GAAG;AAGzD,QAAM,mBAAmB,0BACvB,MAAO;AAAA,IACL;AAAA,MAEF,CAAC;AAGH,QAAM,qBAAqB,iCAAY;AAGvC,QAAM,iBAAiB,0BAAQ,MAAM;AACnC,QAAI,CAAC;AAAiB,aAAO;AAE7B,UAAM,EAAE,OAAO,cAAc;AAE7B,WAAO,iCACF,qBADE;AAAA,MAEL,iCAAiC,cAAc;AAAA,MAC/C;AAAA,MACA;AAAA;AAAA,KAED,CAAC,iBAAiB,oBAAoB,uBAAuB;AAKhE,QAAM,MAA+B,0BACnC,MAAO;AAAA,IACL;AAAA,MAEF,CAAC;AAGH,SACE,mDAAC,+CAAoB,UAArB;AAAA,IAA8B,OAAO;AAAA,KACnC,mDAAC,WAAD,mBAAe;AAAA;",
   "names": []
 }

package/dist/cjs/parts/DnDHandle.js

@@ -62,7 +62,7 @@ const DnDHandle = ({ id, isDragOverlay }) => {
     id: `${id}-drag-handle`,
     key: `${id}-drag-handle`,
     className: `drag-handle ${isDragging ? "" : "focuseable"}`,
-    color: ["brand-primary", "800"],
+    color: isDragging ? ["neutral", "080"] : ["brand-primary", "800"],
     size: "s",
     tabIndex: 0
   }));

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/parts/DnDHandle.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useContext } from 'react';\nimport { GripperVertical } from '@elliemae/ds-icons';\nimport { SortableItemContext } from '../hoc/SortableItemContext';\nimport { DSTreeviewT } from '../react-desc-prop-types';\n\nexport const DnDHandle = ({ id, isDragOverlay }: { id: DSTreeviewT.StringOrNum; isDragOverlay: boolean }) => {\n  const { draggableProps } = useContext(SortableItemContext);\n\n  const isDragging = draggableProps && draggableProps.isDragging;\n\n  return (\n    <GripperVertical\n      role=\"button\"\n      {...(draggableProps && {\n        ...draggableProps.listeners,\n        ...draggableProps.attributes,\n      })}\n      data-testid=\"drag-handle\"\n      data-isactive={draggableProps && !!draggableProps.active}\n      data-isdragoverlay={isDragOverlay}\n      id={`${id}-drag-handle`}\n      key={`${id}-drag-handle`}\n      className={`drag-handle ${isDragging ? '' : 'focuseable'}`}\n      color={['brand-primary', '800']}\n      size=\"s\"\n      tabIndex={0}\n    />\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkC;AAClC,sBAAgC;AAChC,iCAAoC;AAG7B,MAAM,YAAY,CAAC,EAAE,IAAI,oBAA6E;AAC3G,QAAM,EAAE,mBAAmB,6BAAW;AAEtC,QAAM,aAAa,kBAAkB,eAAe;AAEpD,SACE,mDAAC,iCAAD;AAAA,IACE,MAAK;AAAA,KACA,kBAAkB,kCAClB,eAAe,YACf,eAAe,cAJtB;AAAA,IAME,eAAY;AAAA,IACZ,iBAAe,kBAAkB,CAAC,CAAC,eAAe;AAAA,IAClD,sBAAoB;AAAA,IACpB,IAAI,GAAG;AAAA,IACP,KAAK,GAAG;AAAA,IACR,WAAW,eAAe,aAAa,KAAK;AAAA,IAC5C,OAAO,CAAC,iBAAiB;AAAA,IACzB,MAAK;AAAA,IACL,UAAU;AAAA;AAAA;",
+  "sourcesContent": ["import React, { useContext } from 'react';\nimport { GripperVertical } from '@elliemae/ds-icons';\nimport { SortableItemContext } from '../hoc/SortableItemContext';\nimport { DSTreeviewT } from '../react-desc-prop-types';\n\ninterface DnDHandleProps {\n  id: DSTreeviewT.StringOrNum;\n  isDragOverlay: boolean;\n}\n\nexport const DnDHandle = ({ id, isDragOverlay }: DnDHandleProps) => {\n  const { draggableProps } = useContext(SortableItemContext);\n\n  const isDragging = draggableProps && draggableProps.isDragging;\n\n  return (\n    <GripperVertical\n      role=\"button\"\n      {...(draggableProps && {\n        ...draggableProps.listeners,\n        ...draggableProps.attributes,\n      })}\n      data-testid=\"drag-handle\"\n      data-isactive={draggableProps && !!draggableProps.active}\n      data-isdragoverlay={isDragOverlay}\n      id={`${id}-drag-handle`}\n      key={`${id}-drag-handle`}\n      className={`drag-handle ${isDragging ? '' : 'focuseable'}`}\n      color={isDragging ? ['neutral', '080'] : ['brand-primary', '800']}\n      size=\"s\"\n      tabIndex={0}\n    />\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkC;AAClC,sBAAgC;AAChC,iCAAoC;AAQ7B,MAAM,YAAY,CAAC,EAAE,IAAI,oBAAoC;AAClE,QAAM,EAAE,mBAAmB,6BAAW;AAEtC,QAAM,aAAa,kBAAkB,eAAe;AAEpD,SACE,mDAAC,iCAAD;AAAA,IACE,MAAK;AAAA,KACA,kBAAkB,kCAClB,eAAe,YACf,eAAe,cAJtB;AAAA,IAME,eAAY;AAAA,IACZ,iBAAe,kBAAkB,CAAC,CAAC,eAAe;AAAA,IAClD,sBAAoB;AAAA,IACpB,IAAI,GAAG;AAAA,IACP,KAAK,GAAG;AAAA,IACR,WAAW,eAAe,aAAa,KAAK;AAAA,IAC5C,OAAO,aAAa,CAAC,WAAW,SAAS,CAAC,iBAAiB;AAAA,IAC3D,MAAK;AAAA,IACL,UAAU;AAAA;AAAA;",
   "names": []
 }

package/dist/cjs/parts/TreeItem.js

@@ -111,7 +111,7 @@ const TreeItem = (props) => {
   }, [isDropIndicatorPositionInside, isDropValid]);
   const dragOverlayClassName = (0, import_react.useMemo)(() => isDragOverlay ? "drag-overlay" : "", [isDragOverlay]);
   const selectedClassName = (0, import_react.useMemo)(() => selectedItem?.id === item.id && !isDragOverlay ? "selected" : "", [isDragOverlay, item.id, selectedItem?.id]);
-  const hoverClassName = (0, import_react.useMemo)(() => !isDragOverlay && (hoverItem?.id === item.id || isDragging) ? "hover" : "", [isDragOverlay, hoverItem?.id, item.id, isDragging]);
+  const hoverClassName = (0, import_react.useMemo)(() => !isDragOverlay && hoverItem?.id === item.id && !isDragging ? "hover" : "", [isDragOverlay, hoverItem?.id, item.id, isDragging]);
   const fixedHeightClassname = (0, import_react.useMemo)(() => {
     if (labelOverflow === "truncate") {
       if (rowSize === "compact")
@@ -120,7 +120,19 @@ const TreeItem = (props) => {
     }
     return "";
   }, [labelOverflow, rowSize]);
-  const finalClassName = (0, import_react.useMemo)(() => `${dropPreviewClassName} ${fixedHeightClassname} ${selectedClassName} ${hoverClassName} ${dragOverlayClassName}`, [dropPreviewClassName, selectedClassName, hoverClassName, fixedHeightClassname, dragOverlayClassName]);
+  const isDraggingClassname = (0, import_react.useMemo)(() => {
+    if (isDragging)
+      return `${import_cssClassesConstants.DSTreeViewPrefix}-${import_cssClassesConstants.treeItemBlockName}--dragging`;
+    return "";
+  }, [isDragging]);
+  const finalClassName = (0, import_react.useMemo)(() => `${dropPreviewClassName} ${fixedHeightClassname} ${selectedClassName} ${hoverClassName} ${dragOverlayClassName} ${isDraggingClassname}`, [
+    dropPreviewClassName,
+    fixedHeightClassname,
+    selectedClassName,
+    hoverClassName,
+    dragOverlayClassName,
+    isDraggingClassname
+  ]);
   const handleItemClick = (0, import_react.useCallback)((e) => {
     onItemClick(item, e);
     setFocusedItem(item);

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/parts/TreeItem.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable complexity */\n/* eslint-disable max-lines */\nimport React, { useContext, useMemo, useCallback } from 'react';\n\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\n\nimport RadioSelectable from './RadioSelectable';\nimport CheckboxSelectable from './CheckboxSelectable';\nimport TreeViewContext from '../TreeViewContext';\nimport { setMultipleRefs } from '../utils/refs-helpers';\nimport { useOnItemKeyDown } from '../utils/keyboard-helpers';\nimport { NestingSpace } from './NestingSpace';\nimport { Icon } from './Icon';\nimport { ExpandCaret } from './ExpandCaret';\nimport { TreeItemText } from './TreeItemText';\nimport { DSTreeViewPrefix, treeItemBlockName } from '../config/cssClassesConstants';\nimport type { DSTreeviewT } from '../react-desc-prop-types';\nimport { DnDHandle } from './DnDHandle';\nimport { withDnDSortableItemContext } from '../hoc/WithDnDSortableItemContext';\nimport { DropIndicatorPosition, SortableItemContext } from '../hoc/SortableItemContext';\nimport DropIndicator from './DropIndicator';\n\nexport const TreeListItem = aggregatedClasses('li', {\n  'data-testid': treeItemBlockName,\n  role: 'treeitem',\n  // temp fix untill we move to styled components\n})(treeItemBlockName) as unknown as React.ComponentType<React.ComponentProps<'li'>>;\n\nexport const TreeListItemAddonsWrapper = aggregatedClasses('div')(\n  treeItemBlockName,\n  'addons',\n  // temp fix untill we move to styled components\n) as unknown as React.ComponentType;\n\ninterface PropsT {\n  item: DSTreeviewT.Item;\n  itemIndex: number;\n  isDragOverlay?: boolean;\n  virtualItemRef?: React.RefObject<HTMLLIElement>;\n  itemWrapperStyle?: { [key: string]: unknown };\n  spaceForNestingLevel?: number;\n}\nexport const TreeItem = (props: PropsT): JSX.Element => {\n  const {\n    item,\n    itemIndex,\n    itemWrapperStyle = {},\n    virtualItemRef,\n    spaceForNestingLevel = 1.5,\n    isDragOverlay = false,\n  } = props;\n  const { id, node } = item;\n  const { nodeItemRef } = node.model;\n\n  const { draggableProps } = useContext(SortableItemContext);\n\n  const onItemKeyDown = useOnItemKeyDown(item, draggableProps);\n\n  const ctx = useContext(TreeViewContext);\n  const {\n    props: { disableIcons, rightAddons, onItemClick, onItemFocus, rowSize, labelOverflow },\n    withRadioChecks,\n    withCheckboxChecks,\n    withDragAndDrop,\n    selectedItem,\n    selectedCheckboxes,\n    hoverItem,\n    virtualListHelpers: { scrollToIndex },\n    setHoverItem,\n    setSelectedItem,\n    setFocusedItem,\n  } = ctx;\n\n  // Sortable Items needs to update\n  //   - the virtual list ref (for react-virtual requirement)\n  //   - nodeItemRef which is a prop avaiable in the TreeModel nodes\n  //   - the drag and drop node reference\n  const setItemRefs: React.LegacyRef<HTMLLIElement> | undefined = (ref: HTMLLIElement) => {\n    setMultipleRefs(\n      virtualItemRef,\n      !isDragOverlay && nodeItemRef,\n      !isDragOverlay && draggableProps && draggableProps.setNodeRef,\n    )(ref);\n  };\n\n  const dropIndicatorPosition =\n    draggableProps && draggableProps.shouldShowDropIndicatorPosition && draggableProps.dropIndicatorPosition;\n\n  const isDropIndicatorPositionInside = dropIndicatorPosition === DropIndicatorPosition.Inside;\n\n  const isDragging = draggableProps && draggableProps.isDragging;\n\n  const isDropValid = draggableProps && draggableProps.isDropValid;\n\n  const dropPreviewClassName = useMemo(() => {\n    if (isDropIndicatorPositionInside) {\n      const className = `${DSTreeViewPrefix}-${treeItemBlockName}${isDropValid ? '--valid' : '--invalid'}-drop-in`;\n      return className;\n    }\n    return '';\n  }, [isDropIndicatorPositionInside, isDropValid]);\n\n  const dragOverlayClassName = useMemo(() => (isDragOverlay ? 'drag-overlay' : ''), [isDragOverlay]);\n\n  const selectedClassName = useMemo(\n    () => (selectedItem?.id === item.id && !isDragOverlay ? 'selected' : ''),\n    [isDragOverlay, item.id, selectedItem?.id],\n  );\n  const hoverClassName = useMemo(\n    () => (!isDragOverlay && (hoverItem?.id === item.id || isDragging) ? 'hover' : ''),\n    [isDragOverlay, hoverItem?.id, item.id, isDragging],\n  );\n  const fixedHeightClassname = useMemo(() => {\n    if (labelOverflow === 'truncate') {\n      if (rowSize === 'compact') return `${DSTreeViewPrefix}-${treeItemBlockName}--fixed-height-compact`;\n      return `${DSTreeViewPrefix}-${treeItemBlockName}--fixed-height`;\n    }\n    return '';\n  }, [labelOverflow, rowSize]);\n\n  const finalClassName = useMemo(\n    () =>\n      `${dropPreviewClassName} ${fixedHeightClassname} ${selectedClassName} ${hoverClassName} ${dragOverlayClassName}`,\n    [dropPreviewClassName, selectedClassName, hoverClassName, fixedHeightClassname, dragOverlayClassName],\n  );\n\n  const handleItemClick = useCallback(\n    (e: React.MouseEvent<HTMLLIElement>) => {\n      onItemClick(item, e);\n      setFocusedItem(item);\n      setSelectedItem(item);\n      const itemVirtualIndex = typeof item.virtualIndex === 'number' ? item.virtualIndex : -1;\n      onItemFocus({\n        itemIndex: itemVirtualIndex,\n        scrollToItem: (opts = { align: 'start' }) => scrollToIndex(itemVirtualIndex, opts),\n        item,\n      });\n    },\n    [item, scrollToIndex, onItemClick, onItemFocus, setSelectedItem, setFocusedItem],\n  );\n\n  return (\n    <TreeListItem\n      tabIndex={0}\n      onMouseLeave={() => {\n        if (hoverItem?.id === item.id) {\n          setHoverItem(null);\n        }\n      }}\n      onMouseEnter={() => {\n        setHoverItem(item);\n      }}\n      onClick={handleItemClick}\n      onBlur={() => setFocusedItem(null)}\n      ref={setItemRefs}\n      style={{ ...itemWrapperStyle }}\n      className={finalClassName}\n      aria-expanded={!!item.isExpanded}\n      aria-selected={!!selectedCheckboxes[item.id]}\n      data-id={item.id}\n      data-index={item.virtualIndex}\n      onKeyDown={onItemKeyDown}\n    >\n      <TreeListItemAddonsWrapper>\n        {withDragAndDrop ? <DnDHandle id={id} isDragOverlay={isDragOverlay} /> : null}\n        {withRadioChecks && !isDragOverlay ? <RadioSelectable item={item} itemIndex={itemIndex} /> : null}\n        {withCheckboxChecks && !isDragOverlay ? <CheckboxSelectable item={item} itemIndex={itemIndex} /> : null}\n        {!isDragOverlay && <NestingSpace item={item} spaceForNestingLevel={spaceForNestingLevel} />}\n        {!isDragOverlay && <ExpandCaret item={item} />}\n        {!disableIcons ? <Icon item={item} /> : null}\n      </TreeListItemAddonsWrapper>\n      <TreeItemText item={item} />\n      {rightAddons && (\n        <TreeListItemAddonsWrapper>\n          {typeof rightAddons === 'function' ? rightAddons(item) : rightAddons}\n        </TreeListItemAddonsWrapper>\n      )}\n      <DropIndicator dropIndicatorPosition={dropIndicatorPosition} isDropValid={isDropValid} />\n    </TreeListItem>\n  );\n};\n\nexport default withDnDSortableItemContext(TreeItem);\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable complexity */\n/* eslint-disable max-lines */\nimport React, { useContext, useMemo, useCallback } from 'react';\n\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\n\nimport RadioSelectable from './RadioSelectable';\nimport CheckboxSelectable from './CheckboxSelectable';\nimport TreeViewContext from '../TreeViewContext';\nimport { setMultipleRefs } from '../utils/refs-helpers';\nimport { useOnItemKeyDown } from '../utils/keyboard-helpers';\nimport { NestingSpace } from './NestingSpace';\nimport { Icon } from './Icon';\nimport { ExpandCaret } from './ExpandCaret';\nimport { TreeItemText } from './TreeItemText';\nimport { DSTreeViewPrefix, treeItemBlockName } from '../config/cssClassesConstants';\nimport type { DSTreeviewT } from '../react-desc-prop-types';\nimport { DnDHandle } from './DnDHandle';\nimport { withDnDSortableItemContext } from '../hoc/WithDnDSortableItemContext';\nimport { DropIndicatorPosition, SortableItemContext } from '../hoc/SortableItemContext';\nimport DropIndicator from './DropIndicator';\n\nexport const TreeListItem = aggregatedClasses('li', {\n  'data-testid': treeItemBlockName,\n  role: 'treeitem',\n  // temp fix untill we move to styled components\n})(treeItemBlockName) as unknown as React.ComponentType<React.ComponentProps<'li'>>;\n\nexport const TreeListItemAddonsWrapper = aggregatedClasses('div')(\n  treeItemBlockName,\n  'addons',\n  // temp fix untill we move to styled components\n) as unknown as React.ComponentType;\n\ninterface PropsT {\n  item: DSTreeviewT.Item;\n  itemIndex: number;\n  isDragOverlay?: boolean;\n  virtualItemRef?: React.RefObject<HTMLLIElement>;\n  itemWrapperStyle?: { [key: string]: unknown };\n  spaceForNestingLevel?: number;\n}\nexport const TreeItem = (props: PropsT): JSX.Element => {\n  const {\n    item,\n    itemIndex,\n    itemWrapperStyle = {},\n    virtualItemRef,\n    spaceForNestingLevel = 1.5,\n    isDragOverlay = false,\n  } = props;\n  const { id, node } = item;\n  const { nodeItemRef } = node.model;\n\n  const { draggableProps } = useContext(SortableItemContext);\n\n  const onItemKeyDown = useOnItemKeyDown(item, draggableProps);\n\n  const ctx = useContext(TreeViewContext);\n  const {\n    props: { disableIcons, rightAddons, onItemClick, onItemFocus, rowSize, labelOverflow },\n    withRadioChecks,\n    withCheckboxChecks,\n    withDragAndDrop,\n    selectedItem,\n    selectedCheckboxes,\n    hoverItem,\n    virtualListHelpers: { scrollToIndex },\n    setHoverItem,\n    setSelectedItem,\n    setFocusedItem,\n  } = ctx;\n\n  // Sortable Items needs to update\n  //   - the virtual list ref (for react-virtual requirement)\n  //   - nodeItemRef which is a prop avaiable in the TreeModel nodes\n  //   - the drag and drop node reference\n  const setItemRefs: React.LegacyRef<HTMLLIElement> | undefined = (ref: HTMLLIElement) => {\n    setMultipleRefs(\n      virtualItemRef,\n      !isDragOverlay && nodeItemRef,\n      !isDragOverlay && draggableProps && draggableProps.setNodeRef,\n    )(ref);\n  };\n\n  const dropIndicatorPosition =\n    draggableProps && draggableProps.shouldShowDropIndicatorPosition && draggableProps.dropIndicatorPosition;\n\n  const isDropIndicatorPositionInside = dropIndicatorPosition === DropIndicatorPosition.Inside;\n\n  const isDragging = draggableProps && draggableProps.isDragging;\n\n  const isDropValid = draggableProps && draggableProps.isDropValid;\n\n  const dropPreviewClassName = useMemo(() => {\n    if (isDropIndicatorPositionInside) {\n      const className = `${DSTreeViewPrefix}-${treeItemBlockName}${isDropValid ? '--valid' : '--invalid'}-drop-in`;\n      return className;\n    }\n    return '';\n  }, [isDropIndicatorPositionInside, isDropValid]);\n\n  const dragOverlayClassName = useMemo(() => (isDragOverlay ? 'drag-overlay' : ''), [isDragOverlay]);\n\n  const selectedClassName = useMemo(\n    () => (selectedItem?.id === item.id && !isDragOverlay ? 'selected' : ''),\n    [isDragOverlay, item.id, selectedItem?.id],\n  );\n  const hoverClassName = useMemo(\n    () => (!isDragOverlay && hoverItem?.id === item.id && !isDragging ? 'hover' : ''),\n    [isDragOverlay, hoverItem?.id, item.id, isDragging],\n  );\n  const fixedHeightClassname = useMemo(() => {\n    if (labelOverflow === 'truncate') {\n      if (rowSize === 'compact') return `${DSTreeViewPrefix}-${treeItemBlockName}--fixed-height-compact`;\n      return `${DSTreeViewPrefix}-${treeItemBlockName}--fixed-height`;\n    }\n    return '';\n  }, [labelOverflow, rowSize]);\n\n  const isDraggingClassname = useMemo(() => {\n    if (isDragging) return `${DSTreeViewPrefix}-${treeItemBlockName}--dragging`;\n    return '';\n  }, [isDragging]);\n\n  const finalClassName = useMemo(\n    () =>\n      `${dropPreviewClassName} ${fixedHeightClassname} ${selectedClassName} ${hoverClassName} ${dragOverlayClassName} ${isDraggingClassname}`,\n    [\n      dropPreviewClassName,\n      fixedHeightClassname,\n      selectedClassName,\n      hoverClassName,\n      dragOverlayClassName,\n      isDraggingClassname,\n    ],\n  );\n\n  const handleItemClick = useCallback(\n    (e: React.MouseEvent<HTMLLIElement>) => {\n      onItemClick(item, e);\n      setFocusedItem(item);\n      setSelectedItem(item);\n      const itemVirtualIndex = typeof item.virtualIndex === 'number' ? item.virtualIndex : -1;\n      onItemFocus({\n        itemIndex: itemVirtualIndex,\n        scrollToItem: (opts = { align: 'start' }) => scrollToIndex(itemVirtualIndex, opts),\n        item,\n      });\n    },\n    [item, scrollToIndex, onItemClick, onItemFocus, setSelectedItem, setFocusedItem],\n  );\n\n  return (\n    <TreeListItem\n      tabIndex={0}\n      onMouseLeave={() => {\n        if (hoverItem?.id === item.id) {\n          setHoverItem(null);\n        }\n      }}\n      onMouseEnter={() => {\n        setHoverItem(item);\n      }}\n      onClick={handleItemClick}\n      onBlur={() => setFocusedItem(null)}\n      ref={setItemRefs}\n      style={{ ...itemWrapperStyle }}\n      className={finalClassName}\n      aria-expanded={!!item.isExpanded}\n      aria-selected={!!selectedCheckboxes[item.id]}\n      data-id={item.id}\n      data-index={item.virtualIndex}\n      onKeyDown={onItemKeyDown}\n    >\n      <TreeListItemAddonsWrapper>\n        {withDragAndDrop ? <DnDHandle id={id} isDragOverlay={isDragOverlay} /> : null}\n        {withRadioChecks && !isDragOverlay ? <RadioSelectable item={item} itemIndex={itemIndex} /> : null}\n        {withCheckboxChecks && !isDragOverlay ? <CheckboxSelectable item={item} itemIndex={itemIndex} /> : null}\n        {!isDragOverlay && <NestingSpace item={item} spaceForNestingLevel={spaceForNestingLevel} />}\n        {!isDragOverlay && <ExpandCaret item={item} />}\n        {!disableIcons ? <Icon item={item} /> : null}\n      </TreeListItemAddonsWrapper>\n      <TreeItemText item={item} />\n      {rightAddons && (\n        <TreeListItemAddonsWrapper>\n          {typeof rightAddons === 'function' ? rightAddons(item) : rightAddons}\n        </TreeListItemAddonsWrapper>\n      )}\n      <DropIndicator dropIndicatorPosition={dropIndicatorPosition} isDropValid={isDropValid} />\n    </TreeListItem>\n  );\n};\n\nexport default withDnDSortableItemContext(TreeItem);\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/cjs/utils/group-expands-helpers.js

@@ -61,8 +61,8 @@ const toggleItemExpand = (itemToToggle, triggerTreeRerender, updateUserExpandedS
   } = itemToToggle;
   if (itemToToggle.node.model.isGroup) {
     itemToToggle.node.model.isExpanded = !isExpanded;
-    triggerTreeRerender();
     updateUserExpandedState();
+    triggerTreeRerender();
     setTimeout(() => {
       if (typeof virtualIndex === "number")
         scrollTo(virtualIndex, { align: "start" });

package/dist/cjs/utils/group-expands-helpers.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/utils/group-expands-helpers.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-params */\nimport { useCallback, useEffect } from 'react';\nimport type { DSTreeviewT } from '../react-desc-prop-types';\nimport type { DSTreeviewInternalsT } from '../sharedTypes';\n\nexport const updateExpandedState = (\n  treeRoot: DSTreeviewT.Item['node'],\n  onExpandChange: DSTreeviewT.Props['onExpandChange'] | null | undefined,\n) => {\n  const shouldContinueWalking = true;\n  const newExpandedHashMap: DSTreeviewT.ExpandedItems = { __ds_tree_root: true };\n  treeRoot.walk((node) => {\n    if (!node.isRoot() && node.model.isGroup && node.model.isExpanded) {\n      newExpandedHashMap[node.model.id] = true;\n    }\n    return shouldContinueWalking;\n  });\n  if (onExpandChange) onExpandChange(newExpandedHashMap, null);\n};\n\nexport const toggleItemExpand = (\n  itemToToggle: DSTreeviewT.Item,\n  triggerTreeRerender: () => void,\n  updateUserExpandedState: DSTreeviewInternalsT.CTX['updateUserExpandedState'],\n  scrollTo: DSTreeviewT.ScrollToFunc = () => {},\n) => {\n  const {\n    node: {\n      model: { isExpanded },\n    },\n    virtualIndex,\n  } = itemToToggle;\n  if (itemToToggle.node.model.isGroup) {\n    itemToToggle.node.model.isExpanded = !isExpanded;\n    triggerTreeRerender();\n    updateUserExpandedState();\n    setTimeout(() => {\n      if (typeof virtualIndex === 'number') scrollTo(virtualIndex, { align: 'start' });\n    });\n  }\n};\n\nexport const expandItemModel = (modelToExpand: DSTreeviewT.Item['model']) => {\n  if (modelToExpand.isGroup) modelToExpand.isExpanded = true;\n};\n\nexport const collapseItemModel = (modelToCollapse: DSTreeviewT.Item['model']) => {\n  if (modelToCollapse.isGroup) modelToCollapse.isExpanded = false;\n};\n\nexport const expandAll = (treeRoot: DSTreeviewT.Item['node'], triggerTreeRerender: () => void) => {\n  const shouldContinueWalking = true;\n  treeRoot.walk((node) => {\n    if (!node.isRoot()) expandItemModel(node.model);\n    return shouldContinueWalking;\n  });\n  triggerTreeRerender();\n};\n\nexport const collapseAll = (treeRoot: DSTreeviewT.Item['node'], triggerTreeRerender: () => void) => {\n  const shouldContinueWalking = true; // tree-model ask we return true if we want to continue walking\n  treeRoot.walk((node) => {\n    if (!node.isRoot()) collapseItemModel(node.model);\n    return shouldContinueWalking;\n  });\n  triggerTreeRerender();\n};\n\nexport const getToggleExpandShouldExpand = (treeRoot: DSTreeviewT.Item['node']) => {\n  let shouldExpand = false;\n  const shouldContinueWalking = true; // tree-model ask we return true if we want to continue walking\n  treeRoot.walk((node) => {\n    if (!node.isRoot()) {\n      if (!node.model.isExpanded && node.model.isGroup) {\n        shouldExpand = true;\n        // eslint-disable-next-line no-useless-return\n        return shouldContinueWalking;\n      }\n    }\n    return shouldContinueWalking;\n  });\n  return shouldExpand;\n};\n\nexport const toggleExpandAllHelper = (\n  isExpand: boolean | 'toggle',\n  treeRoot: DSTreeviewT.Item['node'],\n  triggerTreeRerender: () => void,\n  setLatestToggledItem: DSTreeviewInternalsT.CTX['setLatestToggledItem'],\n  updateUserExpandedState: DSTreeviewInternalsT.CTX['updateUserExpandedState'],\n) => {\n  if (isExpand === true) expandAll(treeRoot, triggerTreeRerender);\n  else if (isExpand === false) collapseAll(treeRoot, triggerTreeRerender);\n  else {\n    const shouldExpand = getToggleExpandShouldExpand(treeRoot);\n    if (shouldExpand === true) expandAll(treeRoot, triggerTreeRerender);\n    else collapseAll(treeRoot, triggerTreeRerender);\n  }\n  setLatestToggledItem(null);\n  updateUserExpandedState();\n};\n\nexport const useNotifyExpandedChange = (\n  propsWithDefaults: DSTreeviewT.Props,\n  {\n    latestToggledItem,\n    expandedGroups,\n  }: {\n    latestToggledItem?: DSTreeviewInternalsT.CTX['latestToggledItem'];\n    expandedGroups?: DSTreeviewInternalsT.CTX['expandedGroups'];\n  },\n) => {\n  const notifyExpandedChange = useCallback(\n    (expandedGroupHashmap?: DSTreeviewInternalsT.CTX['expandedGroups']) =>\n      propsWithDefaults?.onExpandChange(expandedGroupHashmap || {}, latestToggledItem),\n    [propsWithDefaults, latestToggledItem],\n  );\n\n  useEffect(() => {\n    if (!propsWithDefaults.expanded) notifyExpandedChange(expandedGroups);\n  }, [expandedGroups, notifyExpandedChange, propsWithDefaults.expanded]);\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "sourcesContent": ["/* eslint-disable max-params */\nimport { useCallback, useEffect } from 'react';\nimport type { DSTreeviewT } from '../react-desc-prop-types';\nimport type { DSTreeviewInternalsT } from '../sharedTypes';\n\nexport const updateExpandedState = (\n  treeRoot: DSTreeviewT.Item['node'],\n  onExpandChange: DSTreeviewT.Props['onExpandChange'] | null | undefined,\n) => {\n  const shouldContinueWalking = true;\n  const newExpandedHashMap: DSTreeviewT.ExpandedItems = { __ds_tree_root: true };\n  treeRoot.walk((node) => {\n    if (!node.isRoot() && node.model.isGroup && node.model.isExpanded) {\n      newExpandedHashMap[node.model.id] = true;\n    }\n    return shouldContinueWalking;\n  });\n  if (onExpandChange) onExpandChange(newExpandedHashMap, null);\n};\n\nexport const toggleItemExpand = (\n  itemToToggle: DSTreeviewT.Item,\n  triggerTreeRerender: () => void,\n  updateUserExpandedState: DSTreeviewInternalsT.CTX['updateUserExpandedState'],\n  scrollTo: DSTreeviewT.ScrollToFunc = () => {},\n) => {\n  const {\n    node: {\n      model: { isExpanded },\n    },\n    virtualIndex,\n  } = itemToToggle;\n  if (itemToToggle.node.model.isGroup) {\n    itemToToggle.node.model.isExpanded = !isExpanded;\n    updateUserExpandedState();\n    triggerTreeRerender();\n    setTimeout(() => {\n      if (typeof virtualIndex === 'number') scrollTo(virtualIndex, { align: 'start' });\n    });\n  }\n};\n\nexport const expandItemModel = (modelToExpand: DSTreeviewT.Item['model']) => {\n  if (modelToExpand.isGroup) modelToExpand.isExpanded = true;\n};\n\nexport const collapseItemModel = (modelToCollapse: DSTreeviewT.Item['model']) => {\n  if (modelToCollapse.isGroup) modelToCollapse.isExpanded = false;\n};\n\nexport const expandAll = (treeRoot: DSTreeviewT.Item['node'], triggerTreeRerender: () => void) => {\n  const shouldContinueWalking = true;\n  treeRoot.walk((node) => {\n    if (!node.isRoot()) expandItemModel(node.model);\n    return shouldContinueWalking;\n  });\n  triggerTreeRerender();\n};\n\nexport const collapseAll = (treeRoot: DSTreeviewT.Item['node'], triggerTreeRerender: () => void) => {\n  const shouldContinueWalking = true; // tree-model ask we return true if we want to continue walking\n  treeRoot.walk((node) => {\n    if (!node.isRoot()) collapseItemModel(node.model);\n    return shouldContinueWalking;\n  });\n  triggerTreeRerender();\n};\n\nexport const getToggleExpandShouldExpand = (treeRoot: DSTreeviewT.Item['node']) => {\n  let shouldExpand = false;\n  const shouldContinueWalking = true; // tree-model ask we return true if we want to continue walking\n  treeRoot.walk((node) => {\n    if (!node.isRoot()) {\n      if (!node.model.isExpanded && node.model.isGroup) {\n        shouldExpand = true;\n        // eslint-disable-next-line no-useless-return\n        return shouldContinueWalking;\n      }\n    }\n    return shouldContinueWalking;\n  });\n  return shouldExpand;\n};\n\nexport const toggleExpandAllHelper = (\n  isExpand: boolean | 'toggle',\n  treeRoot: DSTreeviewT.Item['node'],\n  triggerTreeRerender: () => void,\n  setLatestToggledItem: DSTreeviewInternalsT.CTX['setLatestToggledItem'],\n  updateUserExpandedState: DSTreeviewInternalsT.CTX['updateUserExpandedState'],\n) => {\n  if (isExpand === true) expandAll(treeRoot, triggerTreeRerender);\n  else if (isExpand === false) collapseAll(treeRoot, triggerTreeRerender);\n  else {\n    const shouldExpand = getToggleExpandShouldExpand(treeRoot);\n    if (shouldExpand === true) expandAll(treeRoot, triggerTreeRerender);\n    else collapseAll(treeRoot, triggerTreeRerender);\n  }\n  setLatestToggledItem(null);\n  updateUserExpandedState();\n};\n\nexport const useNotifyExpandedChange = (\n  propsWithDefaults: DSTreeviewT.Props,\n  {\n    latestToggledItem,\n    expandedGroups,\n  }: {\n    latestToggledItem?: DSTreeviewInternalsT.CTX['latestToggledItem'];\n    expandedGroups?: DSTreeviewInternalsT.CTX['expandedGroups'];\n  },\n) => {\n  const notifyExpandedChange = useCallback(\n    (expandedGroupHashmap?: DSTreeviewInternalsT.CTX['expandedGroups']) =>\n      propsWithDefaults?.onExpandChange(expandedGroupHashmap || {}, latestToggledItem),\n    [propsWithDefaults, latestToggledItem],\n  );\n\n  useEffect(() => {\n    if (!propsWithDefaults.expanded) notifyExpandedChange(expandedGroups);\n  }, [expandedGroups, notifyExpandedChange, propsWithDefaults.expanded]);\n};\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAuC;AAIhC,MAAM,sBAAsB,CACjC,UACA,mBACG;AACH,QAAM,wBAAwB;AAC9B,QAAM,qBAAgD,EAAE,gBAAgB;AACxE,WAAS,KAAK,CAAC,SAAS;AACtB,QAAI,CAAC,KAAK,YAAY,KAAK,MAAM,WAAW,KAAK,MAAM,YAAY;AACjE,yBAAmB,KAAK,MAAM,MAAM;AAAA;AAEtC,WAAO;AAAA;AAET,MAAI;AAAgB,mBAAe,oBAAoB;AAAA;AAGlD,MAAM,mBAAmB,CAC9B,cACA,qBACA,yBACA,WAAqC,MAAM;AAAA,MACxC;AACH,QAAM;AAAA,IACJ,MAAM;AAAA,MACJ,OAAO,EAAE;AAAA;AAAA,IAEX;AAAA,MACE;AACJ,MAAI,aAAa,KAAK,MAAM,SAAS;AACnC,iBAAa,KAAK,MAAM,aAAa,CAAC;AACtC;AACA;AACA,eAAW,MAAM;AACf,UAAI,OAAO,iBAAiB;AAAU,iBAAS,cAAc,EAAE,OAAO;AAAA;AAAA;AAAA;AAKrE,MAAM,kBAAkB,CAAC,kBAA6C;AAC3E,MAAI,cAAc;AAAS,kBAAc,aAAa;AAAA;AAGjD,MAAM,oBAAoB,CAAC,oBAA+C;AAC/E,MAAI,gBAAgB;AAAS,oBAAgB,aAAa;AAAA;AAGrD,MAAM,YAAY,CAAC,UAAoC,wBAAoC;AAChG,QAAM,wBAAwB;AAC9B,WAAS,KAAK,CAAC,SAAS;AACtB,QAAI,CAAC,KAAK;AAAU,sBAAgB,KAAK;AACzC,WAAO;AAAA;AAET;AAAA;AAGK,MAAM,cAAc,CAAC,UAAoC,wBAAoC;AAClG,QAAM,wBAAwB;AAC9B,WAAS,KAAK,CAAC,SAAS;AACtB,QAAI,CAAC,KAAK;AAAU,wBAAkB,KAAK;AAC3C,WAAO;AAAA;AAET;AAAA;AAGK,MAAM,8BAA8B,CAAC,aAAuC;AACjF,MAAI,eAAe;AACnB,QAAM,wBAAwB;AAC9B,WAAS,KAAK,CAAC,SAAS;AACtB,QAAI,CAAC,KAAK,UAAU;AAClB,UAAI,CAAC,KAAK,MAAM,cAAc,KAAK,MAAM,SAAS;AAChD,uBAAe;AAEf,eAAO;AAAA;AAAA;AAGX,WAAO;AAAA;AAET,SAAO;AAAA;AAGF,MAAM,wBAAwB,CACnC,UACA,UACA,qBACA,sBACA,4BACG;AACH,MAAI,aAAa;AAAM,cAAU,UAAU;AAAA,WAClC,aAAa;AAAO,gBAAY,UAAU;AAAA,OAC9C;AACH,UAAM,eAAe,4BAA4B;AACjD,QAAI,iBAAiB;AAAM,gBAAU,UAAU;AAAA;AAC1C,kBAAY,UAAU;AAAA;AAE7B,uBAAqB;AACrB;AAAA;AAGK,MAAM,0BAA0B,CACrC,mBACA;AAAA,EACE;AAAA,EACA;AAAA,MAKC;AACH,QAAM,uBAAuB,8BAC3B,CAAC,yBACC,mBAAmB,eAAe,wBAAwB,IAAI,oBAChE,CAAC,mBAAmB;AAGtB,8BAAU,MAAM;AACd,QAAI,CAAC,kBAAkB;AAAU,2BAAqB;AAAA,KACrD,CAAC,gBAAgB,sBAAsB,kBAAkB;AAAA;",
   "names": []
 }

package/dist/esm/TreeViewContext.js

@@ -58,7 +58,8 @@ const defaultContext = {
     virtualItems: [],
     totalSize: 0,
     scrollToOffset: noop,
-    scrollToIndex: noop
+    scrollToIndex: noop,
+    measure: noop
   },
   virtualListRef: void 0,
   uniqueTreeViewUUID: "",

package/dist/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  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;",
+  "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    measure: 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,IACf,SAAS;AAAA;AAAA,EAEX,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/dist/esm/hoc/DnDTreeContext.js

@@ -6,8 +6,6 @@ const DnDTreeContext = createContext({
   activeIndex: void 0,
   visibleItems: void 0,
   dropIndicatorPosition: DropIndicatorPosition.None,
-  lastActiveId: void 0,
-  setLastActiveId: void 0,
   isDropValid: false
 });
 export {

package/dist/esm/hoc/DnDTreeContext.js.map

@@ -1,7 +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;",
+  "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  isDropValid: boolean;\n};\n\nexport const DnDTreeContext = createContext<DnDTreeContextType>({\n  depth: undefined,\n  activeIndex: undefined,\n  visibleItems: undefined,\n  dropIndicatorPosition: DropIndicatorPosition.None,\n  isDropValid: false,\n});\n"],
+  "mappings": "AAAA;ACAA;AAEA;AAUO,MAAM,iBAAiB,cAAkC;AAAA,EAC9D,OAAO;AAAA,EACP,aAAa;AAAA,EACb,cAAc;AAAA,EACd,uBAAuB,sBAAsB;AAAA,EAC7C,aAAa;AAAA;",
   "names": []
 }

package/dist/esm/hoc/SortableItemContext.js.map

@@ -1,7 +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;",
+  "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        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;AAkBL,MAAM,sBAAsB,cAAuC;AAAA,EACxE,gBAAgB;AAAA;",
   "names": []
 }

package/dist/esm/hoc/WithConditionalDnDContext.js

@@ -15,13 +15,15 @@ var __spreadValues = (a, b) => {
   return a;
 };
 import * as React from "react";
-import React2, { useCallback, useContext, useMemo } from "react";
+import React2, { useCallback, useContext, useEffect, useMemo, useRef } from "react";
 import { DndContext, DragOverlay } from "@dnd-kit/core";
 import { SortableContext } from "@dnd-kit/sortable";
 import { useTreeDndkitConfig } from "@elliemae/ds-drag-and-drop";
 import TreeViewContext from "../TreeViewContext";
 import { TreeItem } from "../parts/TreeItem";
 import { DnDTreeContext } from "./DnDTreeContext";
+import { DropIndicatorPosition } from "./SortableItemContext";
+import { toggleItemExpand } from "../utils/group-expands-helpers";
 const ensure = (argument, message = "This should never happen") => {
   if (argument === void 0 || argument === null) {
     throw new TypeError(message);
@@ -29,10 +31,11 @@ const ensure = (argument, message = "This should never happen") => {
   return argument;
 };
 const withConditionalDnDRowContext = (Component) => (props) => {
-  const [lastActiveId, setLastActiveId] = React2.useState("");
   const {
     props: { data, onOrderChange, getIsDropValid },
     flattenedItems,
+    updateUserExpandedState,
+    triggerTreeRerender,
     visibleItems: flattenedVisibleTree,
     withDragAndDrop
   } = useContext(TreeViewContext);
@@ -69,7 +72,8 @@ const withConditionalDnDRowContext = (Component) => (props) => {
     depth,
     dropIndicatorPosition,
     visibleItems,
-    isDropValid
+    isDropValid,
+    overId
   } = useTreeDndkitConfig({
     flattenedItems,
     visibleItems: flattenedVisibleTreeForDnD,
@@ -79,8 +83,22 @@ const withConditionalDnDRowContext = (Component) => (props) => {
     getIsDropValid,
     maxDragAndDropLevel: Infinity
   });
-  if (lastActiveId !== activeId && activeId)
-    setLastActiveId(activeId);
+  const timeoutRef = useRef();
+  useEffect(() => {
+    if (timeoutRef.current)
+      clearTimeout(timeoutRef.current);
+    if (dropIndicatorPosition === DropIndicatorPosition.Inside && overId) {
+      timeoutRef.current = setTimeout(() => {
+        const overItem = visibleItems.find((item) => item.uid === overId);
+        if (overItem) {
+          const realOverItem = overItem.original;
+          if (realOverItem.isGroup && !realOverItem.isExpanded) {
+            toggleItemExpand(realOverItem, triggerTreeRerender, updateUserExpandedState);
+          }
+        }
+      }, 1e3);
+    }
+  }, [overId, dropIndicatorPosition, triggerTreeRerender, visibleItems, updateUserExpandedState]);
   if (withDragAndDrop)
     return /* @__PURE__ */ React2.createElement(DndContext, __spreadValues({}, dndContextProps), /* @__PURE__ */ React2.createElement(SortableContext, __spreadValues({}, sortableContextProps), /* @__PURE__ */ React2.createElement(DnDTreeContext.Provider, {
       value: {
@@ -88,8 +106,6 @@ const withConditionalDnDRowContext = (Component) => (props) => {
         depth,
         visibleItems: visibleItems.map((item) => item.original),
         dropIndicatorPosition,
-        lastActiveId,
-        setLastActiveId,
         isDropValid
       }
     }, /* @__PURE__ */ React2.createElement(Component, __spreadValues({}, props)))), /* @__PURE__ */ React2.createElement(DragOverlay, {

package/dist/esm/hoc/WithConditionalDnDContext.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/hoc/WithConditionalDnDContext.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback, useContext, useMemo } from 'react';\nimport { DndContext, DragOverlay } from '@dnd-kit/core';\nimport { SortableContext } from '@dnd-kit/sortable';\nimport { useTreeDndkitConfig } from '@elliemae/ds-drag-and-drop';\nimport { DSTreeviewT } from '../react-desc-prop-types';\nimport TreeViewContext from '../TreeViewContext';\nimport { TreeItem } from '../parts/TreeItem';\nimport { DnDTreeContext } from './DnDTreeContext';\n\ntype FunctionalHOC = <T = unknown>(Component: React.ComponentType<T>, ...other: unknown[]) => (props: T) => JSX.Element;\n\nconst ensure = <T,>(argument: T | undefined | null, message = 'This should never happen'): T => {\n  if (argument === undefined || argument === null) {\n    throw new TypeError(message);\n  }\n\n  return argument;\n};\n\n// only wraps in \"DnDContext\" and \"DnDTreeContext\" if any Drag and Drop functionality is requested\nexport const withConditionalDnDRowContext: FunctionalHOC = (Component) => (props) => {\n  const [lastActiveId, setLastActiveId] = React.useState('');\n\n  const {\n    props: { data, onOrderChange, getIsDropValid },\n    flattenedItems,\n    visibleItems: flattenedVisibleTree,\n    withDragAndDrop,\n  } = useContext(TreeViewContext);\n\n  const flattenedVisibleTreeForDnD = useMemo(\n    () =>\n      flattenedVisibleTree.map((item, index) => ({\n        uid: item.id.toString(),\n        depth: (item.treeDepth ?? 1) - 1,\n        realIndex: index,\n        childrenCount: item.children?.length ?? 0,\n        parentId: item.node.parent?.model?.id?.toString() ?? null,\n        original: item,\n      })),\n    [flattenedVisibleTree],\n  );\n\n  const onReorder = useCallback(\n    (tree: DSTreeviewT.DndItem[], indexes: { targetIndex: number; fromIndex: number }) => {\n      // Pull the row's original data into an object\n      const nodes: Record<DSTreeviewT.StringOrNum, DSTreeviewT.SimpleItem> = {};\n      tree.forEach((item) => {\n        const originalItem = item.original;\n        originalItem.children = [];\n        nodes[item.uid] = item.original;\n      });\n\n      const newUserTree: DSTreeviewT.SimpleItem[] = [];\n      tree.forEach((item) => {\n        // If row has parent, insert it to it's subrows\n        // otherwise append it to the new user data\n        if (item.parentId !== null && item.parentId !== undefined && item.parentId !== '__ds_tree_root') {\n          const parentNode = nodes[item.parentId];\n          parentNode.children?.push(item.original);\n        } else if (item.uid !== '__ds_tree_root') newUserTree.push(item.original);\n      });\n      // Tell the user that the order has change, he can chose to commit it or not\n      onOrderChange(newUserTree, data, flattenedItems[indexes.fromIndex]);\n    },\n    [onOrderChange, data, flattenedItems],\n  );\n\n  const {\n    dndContextProps,\n    sortableContextProps,\n    activeId,\n    activeIndex,\n    depth,\n    dropIndicatorPosition,\n    visibleItems,\n    isDropValid,\n  } = useTreeDndkitConfig({\n    flattenedItems,\n    visibleItems: flattenedVisibleTreeForDnD,\n    isHorizontalDnD: false,\n    isExpandable: true,\n    onReorder,\n    getIsDropValid,\n    maxDragAndDropLevel: Infinity,\n  });\n\n  if (lastActiveId !== activeId && activeId) setLastActiveId(activeId);\n\n  if (withDragAndDrop)\n    return (\n      <DndContext {...dndContextProps}>\n        <SortableContext {...sortableContextProps}>\n          <DnDTreeContext.Provider\n            value={{\n              activeIndex,\n              depth,\n              visibleItems: visibleItems.map((item) => item.original) as DSTreeviewT.Item[],\n              dropIndicatorPosition,\n              lastActiveId,\n              setLastActiveId,\n              isDropValid,\n            }}\n          >\n            <Component {...props} />\n          </DnDTreeContext.Provider>\n        </SortableContext>\n        <DragOverlay style={{ width: 'auto' }}>\n          {activeId ? (\n            <TreeItem\n              itemIndex={activeIndex}\n              item={ensure(flattenedVisibleTree.find((item) => item.id.toString() === activeId))}\n              isDragOverlay\n            />\n          ) : null}\n        </DragOverlay>\n      </DndContext>\n    );\n  return <Component {...props} />;\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AACA;AACA;AAEA;AACA;AACA;AAIA,MAAM,SAAS,CAAK,UAAgC,UAAU,+BAAkC;AAC9F,MAAI,aAAa,UAAa,aAAa,MAAM;AAC/C,UAAM,IAAI,UAAU;AAAA;AAGtB,SAAO;AAAA;AAIF,MAAM,+BAA8C,CAAC,cAAc,CAAC,UAAU;AACnF,QAAM,CAAC,cAAc,mBAAmB,OAAM,SAAS;AAEvD,QAAM;AAAA,IACJ,OAAO,EAAE,MAAM,eAAe;AAAA,IAC9B;AAAA,IACA,cAAc;AAAA,IACd;AAAA,MACE,WAAW;AAEf,QAAM,6BAA6B,QACjC,MACE,qBAAqB,IAAI,CAAC,MAAM,UAAW;AAAA,IACzC,KAAK,KAAK,GAAG;AAAA,IACb,OAAQ,MAAK,aAAa,KAAK;AAAA,IAC/B,WAAW;AAAA,IACX,eAAe,KAAK,UAAU,UAAU;AAAA,IACxC,UAAU,KAAK,KAAK,QAAQ,OAAO,IAAI,cAAc;AAAA,IACrD,UAAU;AAAA,OAEd,CAAC;AAGH,QAAM,YAAY,YAChB,CAAC,MAA6B,YAAwD;AAEpF,UAAM,QAAiE;AACvE,SAAK,QAAQ,CAAC,SAAS;AACrB,YAAM,eAAe,KAAK;AAC1B,mBAAa,WAAW;AACxB,YAAM,KAAK,OAAO,KAAK;AAAA;AAGzB,UAAM,cAAwC;AAC9C,SAAK,QAAQ,CAAC,SAAS;AAGrB,UAAI,KAAK,aAAa,QAAQ,KAAK,aAAa,UAAa,KAAK,aAAa,kBAAkB;AAC/F,cAAM,aAAa,MAAM,KAAK;AAC9B,mBAAW,UAAU,KAAK,KAAK;AAAA,iBACtB,KAAK,QAAQ;AAAkB,oBAAY,KAAK,KAAK;AAAA;AAGlE,kBAAc,aAAa,MAAM,eAAe,QAAQ;AAAA,KAE1D,CAAC,eAAe,MAAM;AAGxB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE,oBAAoB;AAAA,IACtB;AAAA,IACA,cAAc;AAAA,IACd,iBAAiB;AAAA,IACjB,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA,qBAAqB;AAAA;AAGvB,MAAI,iBAAiB,YAAY;AAAU,oBAAgB;AAE3D,MAAI;AACF,WACE,qCAAC,YAAD,mBAAgB,kBACd,qCAAC,iBAAD,mBAAqB,uBACnB,qCAAC,eAAe,UAAhB;AAAA,MACE,OAAO;AAAA,QACL;AAAA,QACA;AAAA,QACA,cAAc,aAAa,IAAI,CAAC,SAAS,KAAK;AAAA,QAC9C;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,OAGF,qCAAC,WAAD,mBAAe,WAGnB,qCAAC,aAAD;AAAA,MAAa,OAAO,EAAE,OAAO;AAAA,OAC1B,WACC,qCAAC,UAAD;AAAA,MACE,WAAW;AAAA,MACX,MAAM,OAAO,qBAAqB,KAAK,CAAC,SAAS,KAAK,GAAG,eAAe;AAAA,MACxE,eAAa;AAAA,SAEb;AAIZ,SAAO,qCAAC,WAAD,mBAAe;AAAA;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback, useContext, useEffect, useMemo, useRef } from 'react';\nimport { DndContext, DragOverlay } from '@dnd-kit/core';\nimport { SortableContext } from '@dnd-kit/sortable';\nimport { useTreeDndkitConfig } from '@elliemae/ds-drag-and-drop';\nimport { DSTreeviewT } from '../react-desc-prop-types';\nimport TreeViewContext from '../TreeViewContext';\nimport { TreeItem } from '../parts/TreeItem';\nimport { DnDTreeContext } from './DnDTreeContext';\nimport { DropIndicatorPosition } from './SortableItemContext';\nimport { toggleItemExpand } from '../utils/group-expands-helpers';\n\ntype FunctionalHOC = <T = unknown>(Component: React.ComponentType<T>, ...other: unknown[]) => (props: T) => JSX.Element;\n\nconst ensure = <T,>(argument: T | undefined | null, message = 'This should never happen'): T => {\n  if (argument === undefined || argument === null) {\n    throw new TypeError(message);\n  }\n\n  return argument;\n};\n\n// only wraps in \"DnDContext\" and \"DnDTreeContext\" if any Drag and Drop functionality is requested\nexport const withConditionalDnDRowContext: FunctionalHOC = (Component) => (props) => {\n  const {\n    props: { data, onOrderChange, getIsDropValid },\n    flattenedItems,\n    updateUserExpandedState,\n    triggerTreeRerender,\n    visibleItems: flattenedVisibleTree,\n    withDragAndDrop,\n  } = useContext(TreeViewContext);\n\n  const flattenedVisibleTreeForDnD = useMemo(\n    () =>\n      flattenedVisibleTree.map((item, index) => ({\n        uid: item.id.toString(),\n        depth: (item.treeDepth ?? 1) - 1,\n        realIndex: index,\n        childrenCount: item.children?.length ?? 0,\n        parentId: item.node.parent?.model?.id?.toString() ?? null,\n        original: item,\n      })),\n    [flattenedVisibleTree],\n  );\n\n  const onReorder = useCallback(\n    (tree: DSTreeviewT.DndItem[], indexes: { targetIndex: number; fromIndex: number }) => {\n      // Pull the row's original data into an object\n      const nodes: Record<DSTreeviewT.StringOrNum, DSTreeviewT.SimpleItem> = {};\n      tree.forEach((item) => {\n        const originalItem = item.original;\n        originalItem.children = [];\n        nodes[item.uid] = item.original;\n      });\n\n      const newUserTree: DSTreeviewT.SimpleItem[] = [];\n      tree.forEach((item) => {\n        // If row has parent, insert it to it's subrows\n        // otherwise append it to the new user data\n        if (item.parentId !== null && item.parentId !== undefined && item.parentId !== '__ds_tree_root') {\n          const parentNode = nodes[item.parentId];\n          parentNode.children?.push(item.original);\n        } else if (item.uid !== '__ds_tree_root') newUserTree.push(item.original);\n      });\n      // Tell the user that the order has change, he can chose to commit it or not\n      onOrderChange(newUserTree, data, flattenedItems[indexes.fromIndex]);\n    },\n    [onOrderChange, data, flattenedItems],\n  );\n\n  const {\n    dndContextProps,\n    sortableContextProps,\n    activeId,\n    activeIndex,\n    depth,\n    dropIndicatorPosition,\n    visibleItems,\n    isDropValid,\n    overId,\n  } = useTreeDndkitConfig({\n    flattenedItems,\n    visibleItems: flattenedVisibleTreeForDnD,\n    isHorizontalDnD: false,\n    isExpandable: true,\n    onReorder,\n    getIsDropValid,\n    maxDragAndDropLevel: Infinity,\n  });\n\n  const timeoutRef = useRef<NodeJS.Timeout>();\n\n  useEffect(() => {\n    if (timeoutRef.current) clearTimeout(timeoutRef.current);\n    if (dropIndicatorPosition === DropIndicatorPosition.Inside && overId) {\n      timeoutRef.current = setTimeout(() => {\n        const overItem = visibleItems.find((item) => item.uid === overId);\n        if (overItem) {\n          const realOverItem = overItem.original as DSTreeviewT.Item;\n          if (realOverItem.isGroup && !realOverItem.isExpanded) {\n            toggleItemExpand(realOverItem, triggerTreeRerender, updateUserExpandedState);\n          }\n        }\n      }, 1000);\n    }\n  }, [overId, dropIndicatorPosition, triggerTreeRerender, visibleItems, updateUserExpandedState]);\n\n  if (withDragAndDrop)\n    return (\n      <DndContext {...dndContextProps}>\n        <SortableContext {...sortableContextProps}>\n          <DnDTreeContext.Provider\n            value={{\n              activeIndex,\n              depth,\n              visibleItems: visibleItems.map((item) => item.original) as DSTreeviewT.Item[],\n              dropIndicatorPosition,\n              isDropValid,\n            }}\n          >\n            <Component {...props} />\n          </DnDTreeContext.Provider>\n        </SortableContext>\n        <DragOverlay style={{ width: 'auto' }}>\n          {activeId ? (\n            <TreeItem\n              itemIndex={activeIndex}\n              item={ensure(flattenedVisibleTree.find((item) => item.id.toString() === activeId))}\n              isDragOverlay\n            />\n          ) : null}\n        </DragOverlay>\n      </DndContext>\n    );\n  return <Component {...props} />;\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AAIA,MAAM,SAAS,CAAK,UAAgC,UAAU,+BAAkC;AAC9F,MAAI,aAAa,UAAa,aAAa,MAAM;AAC/C,UAAM,IAAI,UAAU;AAAA;AAGtB,SAAO;AAAA;AAIF,MAAM,+BAA8C,CAAC,cAAc,CAAC,UAAU;AACnF,QAAM;AAAA,IACJ,OAAO,EAAE,MAAM,eAAe;AAAA,IAC9B;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd;AAAA,MACE,WAAW;AAEf,QAAM,6BAA6B,QACjC,MACE,qBAAqB,IAAI,CAAC,MAAM,UAAW;AAAA,IACzC,KAAK,KAAK,GAAG;AAAA,IACb,OAAQ,MAAK,aAAa,KAAK;AAAA,IAC/B,WAAW;AAAA,IACX,eAAe,KAAK,UAAU,UAAU;AAAA,IACxC,UAAU,KAAK,KAAK,QAAQ,OAAO,IAAI,cAAc;AAAA,IACrD,UAAU;AAAA,OAEd,CAAC;AAGH,QAAM,YAAY,YAChB,CAAC,MAA6B,YAAwD;AAEpF,UAAM,QAAiE;AACvE,SAAK,QAAQ,CAAC,SAAS;AACrB,YAAM,eAAe,KAAK;AAC1B,mBAAa,WAAW;AACxB,YAAM,KAAK,OAAO,KAAK;AAAA;AAGzB,UAAM,cAAwC;AAC9C,SAAK,QAAQ,CAAC,SAAS;AAGrB,UAAI,KAAK,aAAa,QAAQ,KAAK,aAAa,UAAa,KAAK,aAAa,kBAAkB;AAC/F,cAAM,aAAa,MAAM,KAAK;AAC9B,mBAAW,UAAU,KAAK,KAAK;AAAA,iBACtB,KAAK,QAAQ;AAAkB,oBAAY,KAAK,KAAK;AAAA;AAGlE,kBAAc,aAAa,MAAM,eAAe,QAAQ;AAAA,KAE1D,CAAC,eAAe,MAAM;AAGxB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE,oBAAoB;AAAA,IACtB;AAAA,IACA,cAAc;AAAA,IACd,iBAAiB;AAAA,IACjB,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA,qBAAqB;AAAA;AAGvB,QAAM,aAAa;AAEnB,YAAU,MAAM;AACd,QAAI,WAAW;AAAS,mBAAa,WAAW;AAChD,QAAI,0BAA0B,sBAAsB,UAAU,QAAQ;AACpE,iBAAW,UAAU,WAAW,MAAM;AACpC,cAAM,WAAW,aAAa,KAAK,CAAC,SAAS,KAAK,QAAQ;AAC1D,YAAI,UAAU;AACZ,gBAAM,eAAe,SAAS;AAC9B,cAAI,aAAa,WAAW,CAAC,aAAa,YAAY;AACpD,6BAAiB,cAAc,qBAAqB;AAAA;AAAA;AAAA,SAGvD;AAAA;AAAA,KAEJ,CAAC,QAAQ,uBAAuB,qBAAqB,cAAc;AAEtE,MAAI;AACF,WACE,qCAAC,YAAD,mBAAgB,kBACd,qCAAC,iBAAD,mBAAqB,uBACnB,qCAAC,eAAe,UAAhB;AAAA,MACE,OAAO;AAAA,QACL;AAAA,QACA;AAAA,QACA,cAAc,aAAa,IAAI,CAAC,SAAS,KAAK;AAAA,QAC9C;AAAA,QACA;AAAA;AAAA,OAGF,qCAAC,WAAD,mBAAe,WAGnB,qCAAC,aAAD;AAAA,MAAa,OAAO,EAAE,OAAO;AAAA,OAC1B,WACC,qCAAC,UAAD;AAAA,MACE,WAAW;AAAA,MACX,MAAM,OAAO,qBAAqB,KAAK,CAAC,SAAS,KAAK,GAAG,eAAe;AAAA,MACxE,eAAa;AAAA,SAEb;AAIZ,SAAO,qCAAC,WAAD,mBAAe;AAAA;",
   "names": []
 }

package/dist/esm/hoc/WithDnDSortableItemContext.js

@@ -25,7 +25,7 @@ import TreeViewContext from "../TreeViewContext";
 import { DnDTreeContext } from "./DnDTreeContext";
 const withDnDSortableItemContext = (Component) => (props) => {
   const { withDragAndDrop } = useContext(TreeViewContext);
-  const { dropIndicatorPosition, lastActiveId, setLastActiveId, isDropValid } = useContext(DnDTreeContext);
+  const { dropIndicatorPosition, isDropValid } = useContext(DnDTreeContext);
   const id = props.item.id.toString();
   const draggableOptions = useMemo(() => ({
     id
@@ -38,11 +38,9 @@ const withDnDSortableItemContext = (Component) => (props) => {
     return __spreadProps(__spreadValues({}, useSortableHelpers), {
       shouldShowDropIndicatorPosition: overIndex === index,
       dropIndicatorPosition,
-      lastActiveId,
-      setLastActiveId,
       isDropValid
     });
-  }, [withDragAndDrop, useSortableHelpers, dropIndicatorPosition, lastActiveId, setLastActiveId, isDropValid]);
+  }, [withDragAndDrop, useSortableHelpers, dropIndicatorPosition, isDropValid]);
   const ctx = useMemo(() => ({
     draggableProps
   }), [draggableProps]);

package/dist/esm/hoc/WithDnDSortableItemContext.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/hoc/WithDnDSortableItemContext.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unsafe-call */\n/* eslint-disable @typescript-eslint/no-unsafe-member-access */\n/* eslint-disable @typescript-eslint/no-unsafe-assignment */\nimport React, { useContext, useMemo } from 'react';\nimport { useSortable } from '@dnd-kit/sortable';\nimport { SortableItemContext, SortableItemContextType } from './SortableItemContext';\nimport TreeViewContext from '../TreeViewContext';\nimport { DnDTreeContext } from './DnDTreeContext';\nimport { DSTreeviewT } from '../react-desc-prop-types';\n\ntype FunctionalHOC = <T = unknown>(Component: React.ComponentType<T>, ...other: unknown[]) => (props: T) => JSX.Element;\n\nexport const withDnDSortableItemContext: FunctionalHOC = (Component) => (props: any) => {\n  const { withDragAndDrop } = useContext(TreeViewContext);\n  const { dropIndicatorPosition, lastActiveId, setLastActiveId, isDropValid } = useContext(DnDTreeContext);\n\n  const id = (props as { item: DSTreeviewT.Item }).item.id.toString();\n\n  // onMount generate unique options, so everyting is only ran once\n  const draggableOptions = useMemo(\n    () => ({\n      id,\n    }),\n    [id],\n  );\n\n  const useSortableHelpers = useSortable(draggableOptions);\n\n  // calculate all the \"useSortable\" values as per required\n  const draggableProps = useMemo(() => {\n    if (!withDragAndDrop) return false;\n\n    const { index, overIndex } = useSortableHelpers;\n\n    return {\n      ...useSortableHelpers,\n      shouldShowDropIndicatorPosition: overIndex === index,\n      dropIndicatorPosition,\n      lastActiveId,\n      setLastActiveId,\n      isDropValid,\n    };\n  }, [withDragAndDrop, useSortableHelpers, dropIndicatorPosition, lastActiveId, setLastActiveId, isDropValid]);\n\n  // we use a context so we can easly access information wherever without bubbling down\n  // this context is all Memoized so as long as component is not re-mounted,\n  // the context won't trigger un-required renders per-se...\n  const ctx: SortableItemContextType = useMemo(\n    () => ({\n      draggableProps,\n    }),\n    [draggableProps],\n  );\n  // we always add the context, if draggableProps===false we don't have the DnD enabled.\n  return (\n    <SortableItemContext.Provider value={ctx}>\n      <Component {...props} />\n    </SortableItemContext.Provider>\n  );\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;ACGA;AACA;AACA;AACA;AACA;AAKO,MAAM,6BAA4C,CAAC,cAAc,CAAC,UAAe;AACtF,QAAM,EAAE,oBAAoB,WAAW;AACvC,QAAM,EAAE,uBAAuB,cAAc,iBAAiB,gBAAgB,WAAW;AAEzF,QAAM,KAAM,MAAqC,KAAK,GAAG;AAGzD,QAAM,mBAAmB,QACvB,MAAO;AAAA,IACL;AAAA,MAEF,CAAC;AAGH,QAAM,qBAAqB,YAAY;AAGvC,QAAM,iBAAiB,QAAQ,MAAM;AACnC,QAAI,CAAC;AAAiB,aAAO;AAE7B,UAAM,EAAE,OAAO,cAAc;AAE7B,WAAO,iCACF,qBADE;AAAA,MAEL,iCAAiC,cAAc;AAAA,MAC/C;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,KAED,CAAC,iBAAiB,oBAAoB,uBAAuB,cAAc,iBAAiB;AAK/F,QAAM,MAA+B,QACnC,MAAO;AAAA,IACL;AAAA,MAEF,CAAC;AAGH,SACE,qCAAC,oBAAoB,UAArB;AAAA,IAA8B,OAAO;AAAA,KACnC,qCAAC,WAAD,mBAAe;AAAA;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unsafe-call */\n/* eslint-disable @typescript-eslint/no-unsafe-member-access */\n/* eslint-disable @typescript-eslint/no-unsafe-assignment */\nimport React, { useContext, useMemo } from 'react';\nimport { useSortable } from '@dnd-kit/sortable';\nimport { SortableItemContext, SortableItemContextType } from './SortableItemContext';\nimport TreeViewContext from '../TreeViewContext';\nimport { DnDTreeContext } from './DnDTreeContext';\nimport { DSTreeviewT } from '../react-desc-prop-types';\n\ntype FunctionalHOC = <T = unknown>(Component: React.ComponentType<T>, ...other: unknown[]) => (props: T) => JSX.Element;\n\nexport const withDnDSortableItemContext: FunctionalHOC = (Component) => (props: any) => {\n  const { withDragAndDrop } = useContext(TreeViewContext);\n  const { dropIndicatorPosition, isDropValid } = useContext(DnDTreeContext);\n\n  const id = (props as { item: DSTreeviewT.Item }).item.id.toString();\n\n  // onMount generate unique options, so everyting is only ran once\n  const draggableOptions = useMemo(\n    () => ({\n      id,\n    }),\n    [id],\n  );\n\n  const useSortableHelpers = useSortable(draggableOptions);\n\n  // calculate all the \"useSortable\" values as per required\n  const draggableProps = useMemo(() => {\n    if (!withDragAndDrop) return false;\n\n    const { index, overIndex } = useSortableHelpers;\n\n    return {\n      ...useSortableHelpers,\n      shouldShowDropIndicatorPosition: overIndex === index,\n      dropIndicatorPosition,\n      isDropValid,\n    };\n  }, [withDragAndDrop, useSortableHelpers, dropIndicatorPosition, isDropValid]);\n\n  // we use a context so we can easly access information wherever without bubbling down\n  // this context is all Memoized so as long as component is not re-mounted,\n  // the context won't trigger un-required renders per-se...\n  const ctx: SortableItemContextType = useMemo(\n    () => ({\n      draggableProps,\n    }),\n    [draggableProps],\n  );\n  // we always add the context, if draggableProps===false we don't have the DnD enabled.\n  return (\n    <SortableItemContext.Provider value={ctx}>\n      <Component {...props} />\n    </SortableItemContext.Provider>\n  );\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;ACGA;AACA;AACA;AACA;AACA;AAKO,MAAM,6BAA4C,CAAC,cAAc,CAAC,UAAe;AACtF,QAAM,EAAE,oBAAoB,WAAW;AACvC,QAAM,EAAE,uBAAuB,gBAAgB,WAAW;AAE1D,QAAM,KAAM,MAAqC,KAAK,GAAG;AAGzD,QAAM,mBAAmB,QACvB,MAAO;AAAA,IACL;AAAA,MAEF,CAAC;AAGH,QAAM,qBAAqB,YAAY;AAGvC,QAAM,iBAAiB,QAAQ,MAAM;AACnC,QAAI,CAAC;AAAiB,aAAO;AAE7B,UAAM,EAAE,OAAO,cAAc;AAE7B,WAAO,iCACF,qBADE;AAAA,MAEL,iCAAiC,cAAc;AAAA,MAC/C;AAAA,MACA;AAAA;AAAA,KAED,CAAC,iBAAiB,oBAAoB,uBAAuB;AAKhE,QAAM,MAA+B,QACnC,MAAO;AAAA,IACL;AAAA,MAEF,CAAC;AAGH,SACE,qCAAC,oBAAoB,UAArB;AAAA,IAA8B,OAAO;AAAA,KACnC,qCAAC,WAAD,mBAAe;AAAA;",
   "names": []
 }

package/dist/esm/parts/DnDHandle.js

@@ -33,7 +33,7 @@ const DnDHandle = ({ id, isDragOverlay }) => {
     id: `${id}-drag-handle`,
     key: `${id}-drag-handle`,
     className: `drag-handle ${isDragging ? "" : "focuseable"}`,
-    color: ["brand-primary", "800"],
+    color: isDragging ? ["neutral", "080"] : ["brand-primary", "800"],
     size: "s",
     tabIndex: 0
   }));

package/dist/esm/parts/DnDHandle.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/DnDHandle.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { GripperVertical } from '@elliemae/ds-icons';\nimport { SortableItemContext } from '../hoc/SortableItemContext';\nimport { DSTreeviewT } from '../react-desc-prop-types';\n\nexport const DnDHandle = ({ id, isDragOverlay }: { id: DSTreeviewT.StringOrNum; isDragOverlay: boolean }) => {\n  const { draggableProps } = useContext(SortableItemContext);\n\n  const isDragging = draggableProps && draggableProps.isDragging;\n\n  return (\n    <GripperVertical\n      role=\"button\"\n      {...(draggableProps && {\n        ...draggableProps.listeners,\n        ...draggableProps.attributes,\n      })}\n      data-testid=\"drag-handle\"\n      data-isactive={draggableProps && !!draggableProps.active}\n      data-isdragoverlay={isDragOverlay}\n      id={`${id}-drag-handle`}\n      key={`${id}-drag-handle`}\n      className={`drag-handle ${isDragging ? '' : 'focuseable'}`}\n      color={['brand-primary', '800']}\n      size=\"s\"\n      tabIndex={0}\n    />\n  );\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AACA;AAGO,MAAM,YAAY,CAAC,EAAE,IAAI,oBAA6E;AAC3G,QAAM,EAAE,mBAAmB,WAAW;AAEtC,QAAM,aAAa,kBAAkB,eAAe;AAEpD,SACE,qCAAC,iBAAD;AAAA,IACE,MAAK;AAAA,KACA,kBAAkB,kCAClB,eAAe,YACf,eAAe,cAJtB;AAAA,IAME,eAAY;AAAA,IACZ,iBAAe,kBAAkB,CAAC,CAAC,eAAe;AAAA,IAClD,sBAAoB;AAAA,IACpB,IAAI,GAAG;AAAA,IACP,KAAK,GAAG;AAAA,IACR,WAAW,eAAe,aAAa,KAAK;AAAA,IAC5C,OAAO,CAAC,iBAAiB;AAAA,IACzB,MAAK;AAAA,IACL,UAAU;AAAA;AAAA;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { GripperVertical } from '@elliemae/ds-icons';\nimport { SortableItemContext } from '../hoc/SortableItemContext';\nimport { DSTreeviewT } from '../react-desc-prop-types';\n\ninterface DnDHandleProps {\n  id: DSTreeviewT.StringOrNum;\n  isDragOverlay: boolean;\n}\n\nexport const DnDHandle = ({ id, isDragOverlay }: DnDHandleProps) => {\n  const { draggableProps } = useContext(SortableItemContext);\n\n  const isDragging = draggableProps && draggableProps.isDragging;\n\n  return (\n    <GripperVertical\n      role=\"button\"\n      {...(draggableProps && {\n        ...draggableProps.listeners,\n        ...draggableProps.attributes,\n      })}\n      data-testid=\"drag-handle\"\n      data-isactive={draggableProps && !!draggableProps.active}\n      data-isdragoverlay={isDragOverlay}\n      id={`${id}-drag-handle`}\n      key={`${id}-drag-handle`}\n      className={`drag-handle ${isDragging ? '' : 'focuseable'}`}\n      color={isDragging ? ['neutral', '080'] : ['brand-primary', '800']}\n      size=\"s\"\n      tabIndex={0}\n    />\n  );\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AACA;AAQO,MAAM,YAAY,CAAC,EAAE,IAAI,oBAAoC;AAClE,QAAM,EAAE,mBAAmB,WAAW;AAEtC,QAAM,aAAa,kBAAkB,eAAe;AAEpD,SACE,qCAAC,iBAAD;AAAA,IACE,MAAK;AAAA,KACA,kBAAkB,kCAClB,eAAe,YACf,eAAe,cAJtB;AAAA,IAME,eAAY;AAAA,IACZ,iBAAe,kBAAkB,CAAC,CAAC,eAAe;AAAA,IAClD,sBAAoB;AAAA,IACpB,IAAI,GAAG;AAAA,IACP,KAAK,GAAG;AAAA,IACR,WAAW,eAAe,aAAa,KAAK;AAAA,IAC5C,OAAO,aAAa,CAAC,WAAW,SAAS,CAAC,iBAAiB;AAAA,IAC3D,MAAK;AAAA,IACL,UAAU;AAAA;AAAA;",
   "names": []
 }

package/dist/esm/parts/TreeItem.js

@@ -79,7 +79,7 @@ const TreeItem = (props) => {
   }, [isDropIndicatorPositionInside, isDropValid]);
   const dragOverlayClassName = useMemo(() => isDragOverlay ? "drag-overlay" : "", [isDragOverlay]);
   const selectedClassName = useMemo(() => selectedItem?.id === item.id && !isDragOverlay ? "selected" : "", [isDragOverlay, item.id, selectedItem?.id]);
-  const hoverClassName = useMemo(() => !isDragOverlay && (hoverItem?.id === item.id || isDragging) ? "hover" : "", [isDragOverlay, hoverItem?.id, item.id, isDragging]);
+  const hoverClassName = useMemo(() => !isDragOverlay && hoverItem?.id === item.id && !isDragging ? "hover" : "", [isDragOverlay, hoverItem?.id, item.id, isDragging]);
   const fixedHeightClassname = useMemo(() => {
     if (labelOverflow === "truncate") {
       if (rowSize === "compact")
@@ -88,7 +88,19 @@ const TreeItem = (props) => {
     }
     return "";
   }, [labelOverflow, rowSize]);
-  const finalClassName = useMemo(() => `${dropPreviewClassName} ${fixedHeightClassname} ${selectedClassName} ${hoverClassName} ${dragOverlayClassName}`, [dropPreviewClassName, selectedClassName, hoverClassName, fixedHeightClassname, dragOverlayClassName]);
+  const isDraggingClassname = useMemo(() => {
+    if (isDragging)
+      return `${DSTreeViewPrefix}-${treeItemBlockName}--dragging`;
+    return "";
+  }, [isDragging]);
+  const finalClassName = useMemo(() => `${dropPreviewClassName} ${fixedHeightClassname} ${selectedClassName} ${hoverClassName} ${dragOverlayClassName} ${isDraggingClassname}`, [
+    dropPreviewClassName,
+    fixedHeightClassname,
+    selectedClassName,
+    hoverClassName,
+    dragOverlayClassName,
+    isDraggingClassname
+  ]);
   const handleItemClick = useCallback((e) => {
     onItemClick(item, e);
     setFocusedItem(item);

package/dist/esm/parts/TreeItem.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/TreeItem.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\n/* eslint-disable max-lines */\nimport React, { useContext, useMemo, useCallback } from 'react';\n\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\n\nimport RadioSelectable from './RadioSelectable';\nimport CheckboxSelectable from './CheckboxSelectable';\nimport TreeViewContext from '../TreeViewContext';\nimport { setMultipleRefs } from '../utils/refs-helpers';\nimport { useOnItemKeyDown } from '../utils/keyboard-helpers';\nimport { NestingSpace } from './NestingSpace';\nimport { Icon } from './Icon';\nimport { ExpandCaret } from './ExpandCaret';\nimport { TreeItemText } from './TreeItemText';\nimport { DSTreeViewPrefix, treeItemBlockName } from '../config/cssClassesConstants';\nimport type { DSTreeviewT } from '../react-desc-prop-types';\nimport { DnDHandle } from './DnDHandle';\nimport { withDnDSortableItemContext } from '../hoc/WithDnDSortableItemContext';\nimport { DropIndicatorPosition, SortableItemContext } from '../hoc/SortableItemContext';\nimport DropIndicator from './DropIndicator';\n\nexport const TreeListItem = aggregatedClasses('li', {\n  'data-testid': treeItemBlockName,\n  role: 'treeitem',\n  // temp fix untill we move to styled components\n})(treeItemBlockName) as unknown as React.ComponentType<React.ComponentProps<'li'>>;\n\nexport const TreeListItemAddonsWrapper = aggregatedClasses('div')(\n  treeItemBlockName,\n  'addons',\n  // temp fix untill we move to styled components\n) as unknown as React.ComponentType;\n\ninterface PropsT {\n  item: DSTreeviewT.Item;\n  itemIndex: number;\n  isDragOverlay?: boolean;\n  virtualItemRef?: React.RefObject<HTMLLIElement>;\n  itemWrapperStyle?: { [key: string]: unknown };\n  spaceForNestingLevel?: number;\n}\nexport const TreeItem = (props: PropsT): JSX.Element => {\n  const {\n    item,\n    itemIndex,\n    itemWrapperStyle = {},\n    virtualItemRef,\n    spaceForNestingLevel = 1.5,\n    isDragOverlay = false,\n  } = props;\n  const { id, node } = item;\n  const { nodeItemRef } = node.model;\n\n  const { draggableProps } = useContext(SortableItemContext);\n\n  const onItemKeyDown = useOnItemKeyDown(item, draggableProps);\n\n  const ctx = useContext(TreeViewContext);\n  const {\n    props: { disableIcons, rightAddons, onItemClick, onItemFocus, rowSize, labelOverflow },\n    withRadioChecks,\n    withCheckboxChecks,\n    withDragAndDrop,\n    selectedItem,\n    selectedCheckboxes,\n    hoverItem,\n    virtualListHelpers: { scrollToIndex },\n    setHoverItem,\n    setSelectedItem,\n    setFocusedItem,\n  } = ctx;\n\n  // Sortable Items needs to update\n  //   - the virtual list ref (for react-virtual requirement)\n  //   - nodeItemRef which is a prop avaiable in the TreeModel nodes\n  //   - the drag and drop node reference\n  const setItemRefs: React.LegacyRef<HTMLLIElement> | undefined = (ref: HTMLLIElement) => {\n    setMultipleRefs(\n      virtualItemRef,\n      !isDragOverlay && nodeItemRef,\n      !isDragOverlay && draggableProps && draggableProps.setNodeRef,\n    )(ref);\n  };\n\n  const dropIndicatorPosition =\n    draggableProps && draggableProps.shouldShowDropIndicatorPosition && draggableProps.dropIndicatorPosition;\n\n  const isDropIndicatorPositionInside = dropIndicatorPosition === DropIndicatorPosition.Inside;\n\n  const isDragging = draggableProps && draggableProps.isDragging;\n\n  const isDropValid = draggableProps && draggableProps.isDropValid;\n\n  const dropPreviewClassName = useMemo(() => {\n    if (isDropIndicatorPositionInside) {\n      const className = `${DSTreeViewPrefix}-${treeItemBlockName}${isDropValid ? '--valid' : '--invalid'}-drop-in`;\n      return className;\n    }\n    return '';\n  }, [isDropIndicatorPositionInside, isDropValid]);\n\n  const dragOverlayClassName = useMemo(() => (isDragOverlay ? 'drag-overlay' : ''), [isDragOverlay]);\n\n  const selectedClassName = useMemo(\n    () => (selectedItem?.id === item.id && !isDragOverlay ? 'selected' : ''),\n    [isDragOverlay, item.id, selectedItem?.id],\n  );\n  const hoverClassName = useMemo(\n    () => (!isDragOverlay && (hoverItem?.id === item.id || isDragging) ? 'hover' : ''),\n    [isDragOverlay, hoverItem?.id, item.id, isDragging],\n  );\n  const fixedHeightClassname = useMemo(() => {\n    if (labelOverflow === 'truncate') {\n      if (rowSize === 'compact') return `${DSTreeViewPrefix}-${treeItemBlockName}--fixed-height-compact`;\n      return `${DSTreeViewPrefix}-${treeItemBlockName}--fixed-height`;\n    }\n    return '';\n  }, [labelOverflow, rowSize]);\n\n  const finalClassName = useMemo(\n    () =>\n      `${dropPreviewClassName} ${fixedHeightClassname} ${selectedClassName} ${hoverClassName} ${dragOverlayClassName}`,\n    [dropPreviewClassName, selectedClassName, hoverClassName, fixedHeightClassname, dragOverlayClassName],\n  );\n\n  const handleItemClick = useCallback(\n    (e: React.MouseEvent<HTMLLIElement>) => {\n      onItemClick(item, e);\n      setFocusedItem(item);\n      setSelectedItem(item);\n      const itemVirtualIndex = typeof item.virtualIndex === 'number' ? item.virtualIndex : -1;\n      onItemFocus({\n        itemIndex: itemVirtualIndex,\n        scrollToItem: (opts = { align: 'start' }) => scrollToIndex(itemVirtualIndex, opts),\n        item,\n      });\n    },\n    [item, scrollToIndex, onItemClick, onItemFocus, setSelectedItem, setFocusedItem],\n  );\n\n  return (\n    <TreeListItem\n      tabIndex={0}\n      onMouseLeave={() => {\n        if (hoverItem?.id === item.id) {\n          setHoverItem(null);\n        }\n      }}\n      onMouseEnter={() => {\n        setHoverItem(item);\n      }}\n      onClick={handleItemClick}\n      onBlur={() => setFocusedItem(null)}\n      ref={setItemRefs}\n      style={{ ...itemWrapperStyle }}\n      className={finalClassName}\n      aria-expanded={!!item.isExpanded}\n      aria-selected={!!selectedCheckboxes[item.id]}\n      data-id={item.id}\n      data-index={item.virtualIndex}\n      onKeyDown={onItemKeyDown}\n    >\n      <TreeListItemAddonsWrapper>\n        {withDragAndDrop ? <DnDHandle id={id} isDragOverlay={isDragOverlay} /> : null}\n        {withRadioChecks && !isDragOverlay ? <RadioSelectable item={item} itemIndex={itemIndex} /> : null}\n        {withCheckboxChecks && !isDragOverlay ? <CheckboxSelectable item={item} itemIndex={itemIndex} /> : null}\n        {!isDragOverlay && <NestingSpace item={item} spaceForNestingLevel={spaceForNestingLevel} />}\n        {!isDragOverlay && <ExpandCaret item={item} />}\n        {!disableIcons ? <Icon item={item} /> : null}\n      </TreeListItemAddonsWrapper>\n      <TreeItemText item={item} />\n      {rightAddons && (\n        <TreeListItemAddonsWrapper>\n          {typeof rightAddons === 'function' ? rightAddons(item) : rightAddons}\n        </TreeListItemAddonsWrapper>\n      )}\n      <DropIndicator dropIndicatorPosition={dropIndicatorPosition} isDropValid={isDropValid} />\n    </TreeListItem>\n  );\n};\n\nexport default withDnDSortableItemContext(TreeItem);\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\n/* eslint-disable complexity */\n/* eslint-disable max-lines */\nimport React, { useContext, useMemo, useCallback } from 'react';\n\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\n\nimport RadioSelectable from './RadioSelectable';\nimport CheckboxSelectable from './CheckboxSelectable';\nimport TreeViewContext from '../TreeViewContext';\nimport { setMultipleRefs } from '../utils/refs-helpers';\nimport { useOnItemKeyDown } from '../utils/keyboard-helpers';\nimport { NestingSpace } from './NestingSpace';\nimport { Icon } from './Icon';\nimport { ExpandCaret } from './ExpandCaret';\nimport { TreeItemText } from './TreeItemText';\nimport { DSTreeViewPrefix, treeItemBlockName } from '../config/cssClassesConstants';\nimport type { DSTreeviewT } from '../react-desc-prop-types';\nimport { DnDHandle } from './DnDHandle';\nimport { withDnDSortableItemContext } from '../hoc/WithDnDSortableItemContext';\nimport { DropIndicatorPosition, SortableItemContext } from '../hoc/SortableItemContext';\nimport DropIndicator from './DropIndicator';\n\nexport const TreeListItem = aggregatedClasses('li', {\n  'data-testid': treeItemBlockName,\n  role: 'treeitem',\n  // temp fix untill we move to styled components\n})(treeItemBlockName) as unknown as React.ComponentType<React.ComponentProps<'li'>>;\n\nexport const TreeListItemAddonsWrapper = aggregatedClasses('div')(\n  treeItemBlockName,\n  'addons',\n  // temp fix untill we move to styled components\n) as unknown as React.ComponentType;\n\ninterface PropsT {\n  item: DSTreeviewT.Item;\n  itemIndex: number;\n  isDragOverlay?: boolean;\n  virtualItemRef?: React.RefObject<HTMLLIElement>;\n  itemWrapperStyle?: { [key: string]: unknown };\n  spaceForNestingLevel?: number;\n}\nexport const TreeItem = (props: PropsT): JSX.Element => {\n  const {\n    item,\n    itemIndex,\n    itemWrapperStyle = {},\n    virtualItemRef,\n    spaceForNestingLevel = 1.5,\n    isDragOverlay = false,\n  } = props;\n  const { id, node } = item;\n  const { nodeItemRef } = node.model;\n\n  const { draggableProps } = useContext(SortableItemContext);\n\n  const onItemKeyDown = useOnItemKeyDown(item, draggableProps);\n\n  const ctx = useContext(TreeViewContext);\n  const {\n    props: { disableIcons, rightAddons, onItemClick, onItemFocus, rowSize, labelOverflow },\n    withRadioChecks,\n    withCheckboxChecks,\n    withDragAndDrop,\n    selectedItem,\n    selectedCheckboxes,\n    hoverItem,\n    virtualListHelpers: { scrollToIndex },\n    setHoverItem,\n    setSelectedItem,\n    setFocusedItem,\n  } = ctx;\n\n  // Sortable Items needs to update\n  //   - the virtual list ref (for react-virtual requirement)\n  //   - nodeItemRef which is a prop avaiable in the TreeModel nodes\n  //   - the drag and drop node reference\n  const setItemRefs: React.LegacyRef<HTMLLIElement> | undefined = (ref: HTMLLIElement) => {\n    setMultipleRefs(\n      virtualItemRef,\n      !isDragOverlay && nodeItemRef,\n      !isDragOverlay && draggableProps && draggableProps.setNodeRef,\n    )(ref);\n  };\n\n  const dropIndicatorPosition =\n    draggableProps && draggableProps.shouldShowDropIndicatorPosition && draggableProps.dropIndicatorPosition;\n\n  const isDropIndicatorPositionInside = dropIndicatorPosition === DropIndicatorPosition.Inside;\n\n  const isDragging = draggableProps && draggableProps.isDragging;\n\n  const isDropValid = draggableProps && draggableProps.isDropValid;\n\n  const dropPreviewClassName = useMemo(() => {\n    if (isDropIndicatorPositionInside) {\n      const className = `${DSTreeViewPrefix}-${treeItemBlockName}${isDropValid ? '--valid' : '--invalid'}-drop-in`;\n      return className;\n    }\n    return '';\n  }, [isDropIndicatorPositionInside, isDropValid]);\n\n  const dragOverlayClassName = useMemo(() => (isDragOverlay ? 'drag-overlay' : ''), [isDragOverlay]);\n\n  const selectedClassName = useMemo(\n    () => (selectedItem?.id === item.id && !isDragOverlay ? 'selected' : ''),\n    [isDragOverlay, item.id, selectedItem?.id],\n  );\n  const hoverClassName = useMemo(\n    () => (!isDragOverlay && hoverItem?.id === item.id && !isDragging ? 'hover' : ''),\n    [isDragOverlay, hoverItem?.id, item.id, isDragging],\n  );\n  const fixedHeightClassname = useMemo(() => {\n    if (labelOverflow === 'truncate') {\n      if (rowSize === 'compact') return `${DSTreeViewPrefix}-${treeItemBlockName}--fixed-height-compact`;\n      return `${DSTreeViewPrefix}-${treeItemBlockName}--fixed-height`;\n    }\n    return '';\n  }, [labelOverflow, rowSize]);\n\n  const isDraggingClassname = useMemo(() => {\n    if (isDragging) return `${DSTreeViewPrefix}-${treeItemBlockName}--dragging`;\n    return '';\n  }, [isDragging]);\n\n  const finalClassName = useMemo(\n    () =>\n      `${dropPreviewClassName} ${fixedHeightClassname} ${selectedClassName} ${hoverClassName} ${dragOverlayClassName} ${isDraggingClassname}`,\n    [\n      dropPreviewClassName,\n      fixedHeightClassname,\n      selectedClassName,\n      hoverClassName,\n      dragOverlayClassName,\n      isDraggingClassname,\n    ],\n  );\n\n  const handleItemClick = useCallback(\n    (e: React.MouseEvent<HTMLLIElement>) => {\n      onItemClick(item, e);\n      setFocusedItem(item);\n      setSelectedItem(item);\n      const itemVirtualIndex = typeof item.virtualIndex === 'number' ? item.virtualIndex : -1;\n      onItemFocus({\n        itemIndex: itemVirtualIndex,\n        scrollToItem: (opts = { align: 'start' }) => scrollToIndex(itemVirtualIndex, opts),\n        item,\n      });\n    },\n    [item, scrollToIndex, onItemClick, onItemFocus, setSelectedItem, setFocusedItem],\n  );\n\n  return (\n    <TreeListItem\n      tabIndex={0}\n      onMouseLeave={() => {\n        if (hoverItem?.id === item.id) {\n          setHoverItem(null);\n        }\n      }}\n      onMouseEnter={() => {\n        setHoverItem(item);\n      }}\n      onClick={handleItemClick}\n      onBlur={() => setFocusedItem(null)}\n      ref={setItemRefs}\n      style={{ ...itemWrapperStyle }}\n      className={finalClassName}\n      aria-expanded={!!item.isExpanded}\n      aria-selected={!!selectedCheckboxes[item.id]}\n      data-id={item.id}\n      data-index={item.virtualIndex}\n      onKeyDown={onItemKeyDown}\n    >\n      <TreeListItemAddonsWrapper>\n        {withDragAndDrop ? <DnDHandle id={id} isDragOverlay={isDragOverlay} /> : null}\n        {withRadioChecks && !isDragOverlay ? <RadioSelectable item={item} itemIndex={itemIndex} /> : null}\n        {withCheckboxChecks && !isDragOverlay ? <CheckboxSelectable item={item} itemIndex={itemIndex} /> : null}\n        {!isDragOverlay && <NestingSpace item={item} spaceForNestingLevel={spaceForNestingLevel} />}\n        {!isDragOverlay && <ExpandCaret item={item} />}\n        {!disableIcons ? <Icon item={item} /> : null}\n      </TreeListItemAddonsWrapper>\n      <TreeItemText item={item} />\n      {rightAddons && (\n        <TreeListItemAddonsWrapper>\n          {typeof rightAddons === 'function' ? rightAddons(item) : rightAddons}\n        </TreeListItemAddonsWrapper>\n      )}\n      <DropIndicator dropIndicatorPosition={dropIndicatorPosition} isDropValid={isDropValid} />\n    </TreeListItem>\n  );\n};\n\nexport default withDnDSortableItemContext(TreeItem);\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/utils/group-expands-helpers.js

@@ -22,8 +22,8 @@ const toggleItemExpand = (itemToToggle, triggerTreeRerender, updateUserExpandedS
   } = itemToToggle;
   if (itemToToggle.node.model.isGroup) {
     itemToToggle.node.model.isExpanded = !isExpanded;
-    triggerTreeRerender();
     updateUserExpandedState();
+    triggerTreeRerender();
     setTimeout(() => {
       if (typeof virtualIndex === "number")
         scrollTo(virtualIndex, { align: "start" });

package/dist/esm/utils/group-expands-helpers.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/utils/group-expands-helpers.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-params */\nimport { useCallback, useEffect } from 'react';\nimport type { DSTreeviewT } from '../react-desc-prop-types';\nimport type { DSTreeviewInternalsT } from '../sharedTypes';\n\nexport const updateExpandedState = (\n  treeRoot: DSTreeviewT.Item['node'],\n  onExpandChange: DSTreeviewT.Props['onExpandChange'] | null | undefined,\n) => {\n  const shouldContinueWalking = true;\n  const newExpandedHashMap: DSTreeviewT.ExpandedItems = { __ds_tree_root: true };\n  treeRoot.walk((node) => {\n    if (!node.isRoot() && node.model.isGroup && node.model.isExpanded) {\n      newExpandedHashMap[node.model.id] = true;\n    }\n    return shouldContinueWalking;\n  });\n  if (onExpandChange) onExpandChange(newExpandedHashMap, null);\n};\n\nexport const toggleItemExpand = (\n  itemToToggle: DSTreeviewT.Item,\n  triggerTreeRerender: () => void,\n  updateUserExpandedState: DSTreeviewInternalsT.CTX['updateUserExpandedState'],\n  scrollTo: DSTreeviewT.ScrollToFunc = () => {},\n) => {\n  const {\n    node: {\n      model: { isExpanded },\n    },\n    virtualIndex,\n  } = itemToToggle;\n  if (itemToToggle.node.model.isGroup) {\n    itemToToggle.node.model.isExpanded = !isExpanded;\n    triggerTreeRerender();\n    updateUserExpandedState();\n    setTimeout(() => {\n      if (typeof virtualIndex === 'number') scrollTo(virtualIndex, { align: 'start' });\n    });\n  }\n};\n\nexport const expandItemModel = (modelToExpand: DSTreeviewT.Item['model']) => {\n  if (modelToExpand.isGroup) modelToExpand.isExpanded = true;\n};\n\nexport const collapseItemModel = (modelToCollapse: DSTreeviewT.Item['model']) => {\n  if (modelToCollapse.isGroup) modelToCollapse.isExpanded = false;\n};\n\nexport const expandAll = (treeRoot: DSTreeviewT.Item['node'], triggerTreeRerender: () => void) => {\n  const shouldContinueWalking = true;\n  treeRoot.walk((node) => {\n    if (!node.isRoot()) expandItemModel(node.model);\n    return shouldContinueWalking;\n  });\n  triggerTreeRerender();\n};\n\nexport const collapseAll = (treeRoot: DSTreeviewT.Item['node'], triggerTreeRerender: () => void) => {\n  const shouldContinueWalking = true; // tree-model ask we return true if we want to continue walking\n  treeRoot.walk((node) => {\n    if (!node.isRoot()) collapseItemModel(node.model);\n    return shouldContinueWalking;\n  });\n  triggerTreeRerender();\n};\n\nexport const getToggleExpandShouldExpand = (treeRoot: DSTreeviewT.Item['node']) => {\n  let shouldExpand = false;\n  const shouldContinueWalking = true; // tree-model ask we return true if we want to continue walking\n  treeRoot.walk((node) => {\n    if (!node.isRoot()) {\n      if (!node.model.isExpanded && node.model.isGroup) {\n        shouldExpand = true;\n        // eslint-disable-next-line no-useless-return\n        return shouldContinueWalking;\n      }\n    }\n    return shouldContinueWalking;\n  });\n  return shouldExpand;\n};\n\nexport const toggleExpandAllHelper = (\n  isExpand: boolean | 'toggle',\n  treeRoot: DSTreeviewT.Item['node'],\n  triggerTreeRerender: () => void,\n  setLatestToggledItem: DSTreeviewInternalsT.CTX['setLatestToggledItem'],\n  updateUserExpandedState: DSTreeviewInternalsT.CTX['updateUserExpandedState'],\n) => {\n  if (isExpand === true) expandAll(treeRoot, triggerTreeRerender);\n  else if (isExpand === false) collapseAll(treeRoot, triggerTreeRerender);\n  else {\n    const shouldExpand = getToggleExpandShouldExpand(treeRoot);\n    if (shouldExpand === true) expandAll(treeRoot, triggerTreeRerender);\n    else collapseAll(treeRoot, triggerTreeRerender);\n  }\n  setLatestToggledItem(null);\n  updateUserExpandedState();\n};\n\nexport const useNotifyExpandedChange = (\n  propsWithDefaults: DSTreeviewT.Props,\n  {\n    latestToggledItem,\n    expandedGroups,\n  }: {\n    latestToggledItem?: DSTreeviewInternalsT.CTX['latestToggledItem'];\n    expandedGroups?: DSTreeviewInternalsT.CTX['expandedGroups'];\n  },\n) => {\n  const notifyExpandedChange = useCallback(\n    (expandedGroupHashmap?: DSTreeviewInternalsT.CTX['expandedGroups']) =>\n      propsWithDefaults?.onExpandChange(expandedGroupHashmap || {}, latestToggledItem),\n    [propsWithDefaults, latestToggledItem],\n  );\n\n  useEffect(() => {\n    if (!propsWithDefaults.expanded) notifyExpandedChange(expandedGroups);\n  }, [expandedGroups, notifyExpandedChange, propsWithDefaults.expanded]);\n};\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-params */\nimport { useCallback, useEffect } from 'react';\nimport type { DSTreeviewT } from '../react-desc-prop-types';\nimport type { DSTreeviewInternalsT } from '../sharedTypes';\n\nexport const updateExpandedState = (\n  treeRoot: DSTreeviewT.Item['node'],\n  onExpandChange: DSTreeviewT.Props['onExpandChange'] | null | undefined,\n) => {\n  const shouldContinueWalking = true;\n  const newExpandedHashMap: DSTreeviewT.ExpandedItems = { __ds_tree_root: true };\n  treeRoot.walk((node) => {\n    if (!node.isRoot() && node.model.isGroup && node.model.isExpanded) {\n      newExpandedHashMap[node.model.id] = true;\n    }\n    return shouldContinueWalking;\n  });\n  if (onExpandChange) onExpandChange(newExpandedHashMap, null);\n};\n\nexport const toggleItemExpand = (\n  itemToToggle: DSTreeviewT.Item,\n  triggerTreeRerender: () => void,\n  updateUserExpandedState: DSTreeviewInternalsT.CTX['updateUserExpandedState'],\n  scrollTo: DSTreeviewT.ScrollToFunc = () => {},\n) => {\n  const {\n    node: {\n      model: { isExpanded },\n    },\n    virtualIndex,\n  } = itemToToggle;\n  if (itemToToggle.node.model.isGroup) {\n    itemToToggle.node.model.isExpanded = !isExpanded;\n    updateUserExpandedState();\n    triggerTreeRerender();\n    setTimeout(() => {\n      if (typeof virtualIndex === 'number') scrollTo(virtualIndex, { align: 'start' });\n    });\n  }\n};\n\nexport const expandItemModel = (modelToExpand: DSTreeviewT.Item['model']) => {\n  if (modelToExpand.isGroup) modelToExpand.isExpanded = true;\n};\n\nexport const collapseItemModel = (modelToCollapse: DSTreeviewT.Item['model']) => {\n  if (modelToCollapse.isGroup) modelToCollapse.isExpanded = false;\n};\n\nexport const expandAll = (treeRoot: DSTreeviewT.Item['node'], triggerTreeRerender: () => void) => {\n  const shouldContinueWalking = true;\n  treeRoot.walk((node) => {\n    if (!node.isRoot()) expandItemModel(node.model);\n    return shouldContinueWalking;\n  });\n  triggerTreeRerender();\n};\n\nexport const collapseAll = (treeRoot: DSTreeviewT.Item['node'], triggerTreeRerender: () => void) => {\n  const shouldContinueWalking = true; // tree-model ask we return true if we want to continue walking\n  treeRoot.walk((node) => {\n    if (!node.isRoot()) collapseItemModel(node.model);\n    return shouldContinueWalking;\n  });\n  triggerTreeRerender();\n};\n\nexport const getToggleExpandShouldExpand = (treeRoot: DSTreeviewT.Item['node']) => {\n  let shouldExpand = false;\n  const shouldContinueWalking = true; // tree-model ask we return true if we want to continue walking\n  treeRoot.walk((node) => {\n    if (!node.isRoot()) {\n      if (!node.model.isExpanded && node.model.isGroup) {\n        shouldExpand = true;\n        // eslint-disable-next-line no-useless-return\n        return shouldContinueWalking;\n      }\n    }\n    return shouldContinueWalking;\n  });\n  return shouldExpand;\n};\n\nexport const toggleExpandAllHelper = (\n  isExpand: boolean | 'toggle',\n  treeRoot: DSTreeviewT.Item['node'],\n  triggerTreeRerender: () => void,\n  setLatestToggledItem: DSTreeviewInternalsT.CTX['setLatestToggledItem'],\n  updateUserExpandedState: DSTreeviewInternalsT.CTX['updateUserExpandedState'],\n) => {\n  if (isExpand === true) expandAll(treeRoot, triggerTreeRerender);\n  else if (isExpand === false) collapseAll(treeRoot, triggerTreeRerender);\n  else {\n    const shouldExpand = getToggleExpandShouldExpand(treeRoot);\n    if (shouldExpand === true) expandAll(treeRoot, triggerTreeRerender);\n    else collapseAll(treeRoot, triggerTreeRerender);\n  }\n  setLatestToggledItem(null);\n  updateUserExpandedState();\n};\n\nexport const useNotifyExpandedChange = (\n  propsWithDefaults: DSTreeviewT.Props,\n  {\n    latestToggledItem,\n    expandedGroups,\n  }: {\n    latestToggledItem?: DSTreeviewInternalsT.CTX['latestToggledItem'];\n    expandedGroups?: DSTreeviewInternalsT.CTX['expandedGroups'];\n  },\n) => {\n  const notifyExpandedChange = useCallback(\n    (expandedGroupHashmap?: DSTreeviewInternalsT.CTX['expandedGroups']) =>\n      propsWithDefaults?.onExpandChange(expandedGroupHashmap || {}, latestToggledItem),\n    [propsWithDefaults, latestToggledItem],\n  );\n\n  useEffect(() => {\n    if (!propsWithDefaults.expanded) notifyExpandedChange(expandedGroups);\n  }, [expandedGroups, notifyExpandedChange, propsWithDefaults.expanded]);\n};\n"],
   "mappings": "AAAA;ACCA;AAIO,MAAM,sBAAsB,CACjC,UACA,mBACG;AACH,QAAM,wBAAwB;AAC9B,QAAM,qBAAgD,EAAE,gBAAgB;AACxE,WAAS,KAAK,CAAC,SAAS;AACtB,QAAI,CAAC,KAAK,YAAY,KAAK,MAAM,WAAW,KAAK,MAAM,YAAY;AACjE,yBAAmB,KAAK,MAAM,MAAM;AAAA;AAEtC,WAAO;AAAA;AAET,MAAI;AAAgB,mBAAe,oBAAoB;AAAA;AAGlD,MAAM,mBAAmB,CAC9B,cACA,qBACA,yBACA,WAAqC,MAAM;AAAA,MACxC;AACH,QAAM;AAAA,IACJ,MAAM;AAAA,MACJ,OAAO,EAAE;AAAA;AAAA,IAEX;AAAA,MACE;AACJ,MAAI,aAAa,KAAK,MAAM,SAAS;AACnC,iBAAa,KAAK,MAAM,aAAa,CAAC;AACtC;AACA;AACA,eAAW,MAAM;AACf,UAAI,OAAO,iBAAiB;AAAU,iBAAS,cAAc,EAAE,OAAO;AAAA;AAAA;AAAA;AAKrE,MAAM,kBAAkB,CAAC,kBAA6C;AAC3E,MAAI,cAAc;AAAS,kBAAc,aAAa;AAAA;AAGjD,MAAM,oBAAoB,CAAC,oBAA+C;AAC/E,MAAI,gBAAgB;AAAS,oBAAgB,aAAa;AAAA;AAGrD,MAAM,YAAY,CAAC,UAAoC,wBAAoC;AAChG,QAAM,wBAAwB;AAC9B,WAAS,KAAK,CAAC,SAAS;AACtB,QAAI,CAAC,KAAK;AAAU,sBAAgB,KAAK;AACzC,WAAO;AAAA;AAET;AAAA;AAGK,MAAM,cAAc,CAAC,UAAoC,wBAAoC;AAClG,QAAM,wBAAwB;AAC9B,WAAS,KAAK,CAAC,SAAS;AACtB,QAAI,CAAC,KAAK;AAAU,wBAAkB,KAAK;AAC3C,WAAO;AAAA;AAET;AAAA;AAGK,MAAM,8BAA8B,CAAC,aAAuC;AACjF,MAAI,eAAe;AACnB,QAAM,wBAAwB;AAC9B,WAAS,KAAK,CAAC,SAAS;AACtB,QAAI,CAAC,KAAK,UAAU;AAClB,UAAI,CAAC,KAAK,MAAM,cAAc,KAAK,MAAM,SAAS;AAChD,uBAAe;AAEf,eAAO;AAAA;AAAA;AAGX,WAAO;AAAA;AAET,SAAO;AAAA;AAGF,MAAM,wBAAwB,CACnC,UACA,UACA,qBACA,sBACA,4BACG;AACH,MAAI,aAAa;AAAM,cAAU,UAAU;AAAA,WAClC,aAAa;AAAO,gBAAY,UAAU;AAAA,OAC9C;AACH,UAAM,eAAe,4BAA4B;AACjD,QAAI,iBAAiB;AAAM,gBAAU,UAAU;AAAA;AAC1C,kBAAY,UAAU;AAAA;AAE7B,uBAAqB;AACrB;AAAA;AAGK,MAAM,0BAA0B,CACrC,mBACA;AAAA,EACE;AAAA,EACA;AAAA,MAKC;AACH,QAAM,uBAAuB,YAC3B,CAAC,yBACC,mBAAmB,eAAe,wBAAwB,IAAI,oBAChE,CAAC,mBAAmB;AAGtB,YAAU,MAAM;AACd,QAAI,CAAC,kBAAkB;AAAU,2BAAqB;AAAA,KACrD,CAAC,gBAAgB,sBAAsB,kBAAkB;AAAA;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-treeview",
-  "version": "3.0.0-alpha.3",
+  "version": "3.0.0-next.3",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Tree View",
   "files": [
@@ -227,16 +227,16 @@
     "typeSafety": false
   },
   "dependencies": {
-    "@elliemae/ds-button": "3.0.0-alpha.3",
-    "@elliemae/ds-circular-progress-indicator": "3.0.0-alpha.3",
-    "@elliemae/ds-classnames": "3.0.0-alpha.3",
-    "@elliemae/ds-drag-and-drop": "3.0.0-alpha.3",
-    "@elliemae/ds-form": "3.0.0-alpha.3",
-    "@elliemae/ds-icons": "3.0.0-alpha.3",
-    "@elliemae/ds-props-helpers": "3.0.0-alpha.3",
-    "@elliemae/ds-shared": "3.0.0-alpha.3",
-    "@elliemae/ds-truncated-tooltip-text": "3.0.0-alpha.3",
-    "@elliemae/ds-utilities": "3.0.0-alpha.3",
+    "@elliemae/ds-button": "3.0.0-next.3",
+    "@elliemae/ds-circular-progress-indicator": "3.0.0-next.3",
+    "@elliemae/ds-classnames": "3.0.0-next.3",
+    "@elliemae/ds-drag-and-drop": "3.0.0-next.3",
+    "@elliemae/ds-form": "3.0.0-next.3",
+    "@elliemae/ds-icons": "3.0.0-next.3",
+    "@elliemae/ds-props-helpers": "3.0.0-next.3",
+    "@elliemae/ds-shared": "3.0.0-next.3",
+    "@elliemae/ds-truncated-tooltip-text": "3.0.0-next.3",
+    "@elliemae/ds-utilities": "3.0.0-next.3",
     "@elliemae/react-sortable-hoc": "^1.0.0",
     "react-desc": "~4.1.3",
     "react-highlight-words": "~0.17.0",