@elliemae/ds-treeview 2.3.2 → 2.4.0-rc.1

package/cjs/TreeViewContext.js

@@ -70,7 +70,8 @@ const defaultContext = {
     virtualItems: [],
     totalSize: 0,
     scrollToOffset: noop,
-    scrollToIndex: noop
+    scrollToIndex: noop,
+    measure: noop
   },
   virtualListRef: undefined,
   uniqueTreeViewUUID: '',

package/cjs/hoc/DnDTreeContext.js

@@ -10,8 +10,6 @@ const DnDTreeContext = /*#__PURE__*/React.createContext({
   activeIndex: undefined,
   visibleItems: undefined,
   dropIndicatorPosition: SortableItemContext.DropIndicatorPosition.None,
-  lastActiveId: undefined,
-  setLastActiveId: undefined,
   isDropValid: false
 });
 

package/cjs/hoc/WithConditionalDnDContext.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _jsx = require('@babel/runtime/helpers/jsx');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-require('core-js/modules/web.dom-collections.iterator.js');
 require('core-js/modules/esnext.async-iterator.map.js');
 require('core-js/modules/esnext.iterator.map.js');
 require('core-js/modules/esnext.async-iterator.for-each.js');
@@ -21,13 +20,14 @@ var dsDragAndDrop = require('@elliemae/ds-drag-and-drop');
 var TreeViewContext = require('../TreeViewContext.js');
 var TreeItem = require('../parts/TreeItem.js');
 var DnDTreeContext = require('./DnDTreeContext.js');
+var SortableItemContext = require('./SortableItemContext.js');
+var groupExpandsHelpers = require('../utils/group-expands-helpers.js');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -45,7 +45,6 @@ const ensure = function (argument) {
 
 
 const withConditionalDnDRowContext = Component => props => {
-  const [lastActiveId, setLastActiveId] = React__default["default"].useState('');
   const {
     props: {
       data,
@@ -53,6 +52,8 @@ const withConditionalDnDRowContext = Component => props => {
       getIsDropValid
     },
     flattenedItems,
+    updateUserExpandedState,
+    triggerTreeRerender,
     visibleItems: flattenedVisibleTree,
     withDragAndDrop
   } = React.useContext(TreeViewContext["default"]);
@@ -98,7 +99,8 @@ const withConditionalDnDRowContext = Component => props => {
     depth,
     dropIndicatorPosition,
     visibleItems,
-    isDropValid
+    isDropValid,
+    overId
   } = dsDragAndDrop.useTreeDndkitConfig({
     flattenedItems,
     visibleItems: flattenedVisibleTreeForDnD,
@@ -108,7 +110,24 @@ const withConditionalDnDRowContext = Component => props => {
     getIsDropValid,
     maxDragAndDropLevel: Infinity
   });
-  if (lastActiveId !== activeId && activeId) setLastActiveId(activeId);
+  const timeoutRef = React.useRef();
+  React.useEffect(() => {
+    if (timeoutRef.current) clearTimeout(timeoutRef.current);
+
+    if (dropIndicatorPosition === 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) {
+            groupExpandsHelpers.toggleItemExpand(realOverItem, triggerTreeRerender, updateUserExpandedState);
+          }
+        }
+      }, 1000);
+    }
+  }, [overId, dropIndicatorPosition, triggerTreeRerender, visibleItems, updateUserExpandedState]);
   if (withDragAndDrop) return /*#__PURE__*/jsxRuntime.jsxs(core.DndContext, _objectSpread(_objectSpread({}, dndContextProps), {}, {
     children: [/*#__PURE__*/jsxRuntime.jsx(sortable.SortableContext, _objectSpread(_objectSpread({}, sortableContextProps), {}, {
       children: /*#__PURE__*/_jsx__default["default"](DnDTreeContext.DnDTreeContext.Provider, {
@@ -117,8 +136,6 @@ const withConditionalDnDRowContext = Component => props => {
           depth,
           visibleItems: visibleItems.map(item => item.original),
           dropIndicatorPosition,
-          lastActiveId,
-          setLastActiveId,
           isDropValid
         }
       }, void 0, /*#__PURE__*/jsxRuntime.jsx(Component, _objectSpread({}, props)))

package/cjs/hoc/WithDnDSortableItemContext.js

@@ -30,8 +30,6 @@ const withDnDSortableItemContext = Component => props => {
   } = React.useContext(TreeViewContext["default"]);
   const {
     dropIndicatorPosition,
-    lastActiveId,
-    setLastActiveId,
     isDropValid
   } = React.useContext(DnDTreeContext.DnDTreeContext);
   const id = props.item.id.toString(); // onMount generate unique options, so everyting is only ran once
@@ -50,11 +48,9 @@ const withDnDSortableItemContext = Component => props => {
     return _objectSpread(_objectSpread({}, useSortableHelpers), {}, {
       shouldShowDropIndicatorPosition: overIndex === index,
       dropIndicatorPosition,
-      lastActiveId,
-      setLastActiveId,
       isDropValid
     });
-  }, [withDragAndDrop, useSortableHelpers, dropIndicatorPosition, lastActiveId, setLastActiveId, isDropValid]); // we use a context so we can easly access information wherever without bubbling down
+  }, [withDragAndDrop, useSortableHelpers, dropIndicatorPosition, isDropValid]); // we use a context so we can easly access information wherever without bubbling down
   // this context is all Memoized so as long as component is not re-mounted,
   // the context won't trigger un-required renders per-se...
 

package/cjs/parts/DnDHandle.js

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

package/cjs/parts/TreeItem.js

@@ -107,7 +107,7 @@ const TreeItem = props => {
   }, [isDropIndicatorPositionInside, isDropValid]);
   const dragOverlayClassName = React.useMemo(() => isDragOverlay ? 'drag-overlay' : '', [isDragOverlay]);
   const selectedClassName = React.useMemo(() => (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.id) === item.id && !isDragOverlay ? 'selected' : '', [isDragOverlay, item.id, selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.id]);
-  const hoverClassName = React.useMemo(() => !isDragOverlay && ((hoverItem === null || hoverItem === void 0 ? void 0 : hoverItem.id) === item.id || isDragging) ? 'hover' : '', [isDragOverlay, hoverItem === null || hoverItem === void 0 ? void 0 : hoverItem.id, item.id, isDragging]);
+  const hoverClassName = React.useMemo(() => !isDragOverlay && (hoverItem === null || hoverItem === void 0 ? void 0 : hoverItem.id) === item.id && !isDragging ? 'hover' : '', [isDragOverlay, hoverItem === null || hoverItem === void 0 ? void 0 : hoverItem.id, item.id, isDragging]);
   const fixedHeightClassname = React.useMemo(() => {
     if (labelOverflow === 'truncate') {
       if (rowSize === 'compact') return "".concat(cssClassesConstants.DSTreeViewPrefix, "-").concat(cssClassesConstants.treeItemBlockName, "--fixed-height-compact");
@@ -116,7 +116,11 @@ const TreeItem = props => {
 
     return '';
   }, [labelOverflow, rowSize]);
-  const finalClassName = React.useMemo(() => "".concat(dropPreviewClassName, " ").concat(fixedHeightClassname, " ").concat(selectedClassName, " ").concat(hoverClassName, " ").concat(dragOverlayClassName), [dropPreviewClassName, selectedClassName, hoverClassName, fixedHeightClassname, dragOverlayClassName]);
+  const isDraggingClassname = React.useMemo(() => {
+    if (isDragging) return "".concat(cssClassesConstants.DSTreeViewPrefix, "-").concat(cssClassesConstants.treeItemBlockName, "--dragging");
+    return '';
+  }, [isDragging]);
+  const finalClassName = React.useMemo(() => "".concat(dropPreviewClassName, " ").concat(fixedHeightClassname, " ").concat(selectedClassName, " ").concat(hoverClassName, " ").concat(dragOverlayClassName, " ").concat(isDraggingClassname), [dropPreviewClassName, fixedHeightClassname, selectedClassName, hoverClassName, dragOverlayClassName, isDraggingClassname]);
   const handleItemClick = React.useCallback(e => {
     onItemClick(item, e);
     setFocusedItem(item);

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

@@ -32,8 +32,8 @@ const toggleItemExpand = function (itemToToggle, triggerTreeRerender, updateUser
 
   if (itemToToggle.node.model.isGroup) {
     itemToToggle.node.model.isExpanded = !isExpanded;
-    triggerTreeRerender();
     updateUserExpandedState();
+    triggerTreeRerender();
     setTimeout(() => {
       if (typeof virtualIndex === 'number') scrollTo(virtualIndex, {
         align: 'start'

package/esm/TreeViewContext.js

@@ -66,7 +66,8 @@ const defaultContext = {
     virtualItems: [],
     totalSize: 0,
     scrollToOffset: noop,
-    scrollToIndex: noop
+    scrollToIndex: noop,
+    measure: noop
   },
   virtualListRef: undefined,
   uniqueTreeViewUUID: '',

package/esm/hoc/DnDTreeContext.js

@@ -6,8 +6,6 @@ const DnDTreeContext = /*#__PURE__*/createContext({
   activeIndex: undefined,
   visibleItems: undefined,
   dropIndicatorPosition: DropIndicatorPosition.None,
-  lastActiveId: undefined,
-  setLastActiveId: undefined,
   isDropValid: false
 });
 

package/esm/hoc/WithConditionalDnDContext.js

@@ -1,8 +1,5 @@
-import 'core-js/modules/esnext.async-iterator.filter.js';
-import 'core-js/modules/esnext.iterator.filter.js';
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
-import 'core-js/modules/web.dom-collections.iterator.js';
 import 'core-js/modules/esnext.async-iterator.map.js';
 import 'core-js/modules/esnext.iterator.map.js';
 import 'core-js/modules/esnext.async-iterator.for-each.js';
@@ -10,13 +7,17 @@ import 'core-js/modules/esnext.iterator.constructor.js';
 import 'core-js/modules/esnext.iterator.for-each.js';
 import 'core-js/modules/esnext.async-iterator.find.js';
 import 'core-js/modules/esnext.iterator.find.js';
-import React, { useContext, useMemo, useCallback } from 'react';
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import { useContext, useMemo, useCallback, useRef, useEffect } 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.js';
 import { TreeItem } from '../parts/TreeItem.js';
 import { DnDTreeContext } from './DnDTreeContext.js';
+import { DropIndicatorPosition } from './SortableItemContext.js';
+import { toggleItemExpand } from '../utils/group-expands-helpers.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -35,7 +36,6 @@ const ensure = function (argument) {
 
 
 const withConditionalDnDRowContext = Component => props => {
-  const [lastActiveId, setLastActiveId] = React.useState('');
   const {
     props: {
       data,
@@ -43,6 +43,8 @@ const withConditionalDnDRowContext = Component => props => {
       getIsDropValid
     },
     flattenedItems,
+    updateUserExpandedState,
+    triggerTreeRerender,
     visibleItems: flattenedVisibleTree,
     withDragAndDrop
   } = useContext(TreeViewContext);
@@ -88,7 +90,8 @@ const withConditionalDnDRowContext = Component => props => {
     depth,
     dropIndicatorPosition,
     visibleItems,
-    isDropValid
+    isDropValid,
+    overId
   } = useTreeDndkitConfig({
     flattenedItems,
     visibleItems: flattenedVisibleTreeForDnD,
@@ -98,7 +101,24 @@ 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);
+          }
+        }
+      }, 1000);
+    }
+  }, [overId, dropIndicatorPosition, triggerTreeRerender, visibleItems, updateUserExpandedState]);
   if (withDragAndDrop) return /*#__PURE__*/jsxs(DndContext, _objectSpread(_objectSpread({}, dndContextProps), {}, {
     children: [/*#__PURE__*/jsx(SortableContext, _objectSpread(_objectSpread({}, sortableContextProps), {}, {
       children: /*#__PURE__*/_jsx(DnDTreeContext.Provider, {
@@ -107,8 +127,6 @@ const withConditionalDnDRowContext = Component => props => {
           depth,
           visibleItems: visibleItems.map(item => item.original),
           dropIndicatorPosition,
-          lastActiveId,
-          setLastActiveId,
           isDropValid
         }
       }, void 0, /*#__PURE__*/jsx(Component, _objectSpread({}, props)))

package/esm/hoc/WithDnDSortableItemContext.js

@@ -21,8 +21,6 @@ const withDnDSortableItemContext = Component => props => {
   } = useContext(TreeViewContext);
   const {
     dropIndicatorPosition,
-    lastActiveId,
-    setLastActiveId,
     isDropValid
   } = useContext(DnDTreeContext);
   const id = props.item.id.toString(); // onMount generate unique options, so everyting is only ran once
@@ -41,11 +39,9 @@ const withDnDSortableItemContext = Component => props => {
     return _objectSpread(_objectSpread({}, useSortableHelpers), {}, {
       shouldShowDropIndicatorPosition: overIndex === index,
       dropIndicatorPosition,
-      lastActiveId,
-      setLastActiveId,
       isDropValid
     });
-  }, [withDragAndDrop, useSortableHelpers, dropIndicatorPosition, lastActiveId, setLastActiveId, isDropValid]); // we use a context so we can easly access information wherever without bubbling down
+  }, [withDragAndDrop, useSortableHelpers, dropIndicatorPosition, isDropValid]); // we use a context so we can easly access information wherever without bubbling down
   // this context is all Memoized so as long as component is not re-mounted,
   // the context won't trigger un-required renders per-se...
 

package/esm/parts/DnDHandle.js

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

package/esm/parts/TreeItem.js

@@ -98,7 +98,7 @@ const TreeItem = props => {
   }, [isDropIndicatorPositionInside, isDropValid]);
   const dragOverlayClassName = useMemo(() => isDragOverlay ? 'drag-overlay' : '', [isDragOverlay]);
   const selectedClassName = useMemo(() => (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.id) === item.id && !isDragOverlay ? 'selected' : '', [isDragOverlay, item.id, selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.id]);
-  const hoverClassName = useMemo(() => !isDragOverlay && ((hoverItem === null || hoverItem === void 0 ? void 0 : hoverItem.id) === item.id || isDragging) ? 'hover' : '', [isDragOverlay, hoverItem === null || hoverItem === void 0 ? void 0 : hoverItem.id, item.id, isDragging]);
+  const hoverClassName = useMemo(() => !isDragOverlay && (hoverItem === null || hoverItem === void 0 ? void 0 : hoverItem.id) === item.id && !isDragging ? 'hover' : '', [isDragOverlay, hoverItem === null || hoverItem === void 0 ? void 0 : hoverItem.id, item.id, isDragging]);
   const fixedHeightClassname = useMemo(() => {
     if (labelOverflow === 'truncate') {
       if (rowSize === 'compact') return "".concat(DSTreeViewPrefix, "-").concat(treeItemBlockName, "--fixed-height-compact");
@@ -107,7 +107,11 @@ const TreeItem = props => {
 
     return '';
   }, [labelOverflow, rowSize]);
-  const finalClassName = useMemo(() => "".concat(dropPreviewClassName, " ").concat(fixedHeightClassname, " ").concat(selectedClassName, " ").concat(hoverClassName, " ").concat(dragOverlayClassName), [dropPreviewClassName, selectedClassName, hoverClassName, fixedHeightClassname, dragOverlayClassName]);
+  const isDraggingClassname = useMemo(() => {
+    if (isDragging) return "".concat(DSTreeViewPrefix, "-").concat(treeItemBlockName, "--dragging");
+    return '';
+  }, [isDragging]);
+  const finalClassName = useMemo(() => "".concat(dropPreviewClassName, " ").concat(fixedHeightClassname, " ").concat(selectedClassName, " ").concat(hoverClassName, " ").concat(dragOverlayClassName, " ").concat(isDraggingClassname), [dropPreviewClassName, fixedHeightClassname, selectedClassName, hoverClassName, dragOverlayClassName, isDraggingClassname]);
   const handleItemClick = useCallback(e => {
     onItemClick(item, e);
     setFocusedItem(item);

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

@@ -28,8 +28,8 @@ const toggleItemExpand = function (itemToToggle, triggerTreeRerender, updateUser
 
   if (itemToToggle.node.model.isGroup) {
     itemToToggle.node.model.isExpanded = !isExpanded;
-    triggerTreeRerender();
     updateUserExpandedState();
+    triggerTreeRerender();
     setTimeout(() => {
       if (typeof virtualIndex === 'number') scrollTo(virtualIndex, {
         align: 'start'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-treeview",
-  "version": "2.3.2",
+  "version": "2.4.0-rc.1",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Tree View",
   "module": "./esm/index.js",
@@ -229,15 +229,15 @@
   "dependencies": {
     "@dnd-kit/core": "~4.0.1",
     "@dnd-kit/sortable": "~5.0.0",
-    "@elliemae/ds-button": "2.3.2",
-    "@elliemae/ds-circular-progress-indicator": "2.3.2",
-    "@elliemae/ds-classnames": "2.3.2",
-    "@elliemae/ds-drag-and-drop": "2.3.2",
-    "@elliemae/ds-form": "2.3.2",
-    "@elliemae/ds-icons": "2.3.2",
-    "@elliemae/ds-props-helpers": "2.3.2",
-    "@elliemae/ds-truncated-tooltip-text": "2.3.2",
-    "@elliemae/ds-utilities": "2.3.2",
+    "@elliemae/ds-button": "2.4.0-rc.1",
+    "@elliemae/ds-circular-progress-indicator": "2.4.0-rc.1",
+    "@elliemae/ds-classnames": "2.4.0-rc.1",
+    "@elliemae/ds-drag-and-drop": "2.4.0-rc.1",
+    "@elliemae/ds-form": "2.4.0-rc.1",
+    "@elliemae/ds-icons": "2.4.0-rc.1",
+    "@elliemae/ds-props-helpers": "2.4.0-rc.1",
+    "@elliemae/ds-truncated-tooltip-text": "2.4.0-rc.1",
+    "@elliemae/ds-utilities": "2.4.0-rc.1",
     "react-desc": "~4.1.3",
     "react-highlight-words": "~0.17.0",
     "react-virtual": "~2.8.2",

package/types/hoc/DnDTreeContext.d.ts

@@ -6,8 +6,6 @@ declare type DnDTreeContextType = {
     activeIndex: number | undefined;
     visibleItems: DSTreeviewT.Item[] | undefined;
     dropIndicatorPosition: DropIndicatorPosition;
-    lastActiveId: string | undefined;
-    setLastActiveId: React.Dispatch<React.SetStateAction<string>> | undefined;
     isDropValid: boolean;
 };
 export declare const DnDTreeContext: import("react").Context<DnDTreeContextType>;

package/types/hoc/SortableItemContext.d.ts

@@ -10,8 +10,6 @@ export declare type SortableItemContextType = {
     draggableProps: false | (ReturnType<typeof useSortable> & {
         dropIndicatorPosition: DropIndicatorPosition;
         shouldShowDropIndicatorPosition: boolean;
-        lastActiveId?: string;
-        setLastActiveId?: React.Dispatch<React.SetStateAction<string>>;
         isDropValid: boolean;
     });
 };

package/types/parts/DnDHandle.d.ts

@@ -1,6 +1,8 @@
 /// <reference types="react" />
 import { DSTreeviewT } from '../react-desc-prop-types';
-export declare const DnDHandle: ({ id, isDragOverlay }: {
+interface DnDHandleProps {
     id: DSTreeviewT.StringOrNum;
     isDragOverlay: boolean;
-}) => JSX.Element;
+}
+export declare const DnDHandle: ({ id, isDragOverlay }: DnDHandleProps) => JSX.Element;
+export {};