@nosferatu500/react-sortable-tree - npm Package Compare versions

Comparing version 4.1.4 to 4.1.5

esm/index.js

@@ -0,1 +1,2 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
 import React, { Component, Children, cloneElement } from 'react';
@@ -836,13 +837,14 @@ import withScrolling, { createScrollingComponent, createVerticalStrength, createHorizontalStrength } from '@nosferatu500/react-dnd-scrollzone';
   if (canDrag) {
-    handle = typeof node.children === "function" && node.expanded ? /* @__PURE__ */ React.createElement("div", {
-      className: "rst__loadingHandle"
-    }, /* @__PURE__ */ React.createElement("div", {
-      className: "rst__loadingCircle"
-    }, [...Array.from({ length: 12 })].map((_, index) => /* @__PURE__ */ React.createElement("div", {
-      key: index,
-      className: classnames(
-        "rst__loadingCirclePoint",
-        rowDirectionClass ?? ""
-      )
-    })))) : connectDragSource(/* @__PURE__ */ React.createElement("div", {
+    handle = typeof node.children === "function" && node.expanded ? /* @__PURE__ */ jsx("div", {
+      className: "rst__loadingHandle",
+      children: /* @__PURE__ */ jsx("div", {
+        className: "rst__loadingCircle",
+        children: [...Array.from({ length: 12 })].map((_, index) => /* @__PURE__ */ jsx("div", {
+          className: classnames(
+            "rst__loadingCirclePoint",
+            rowDirectionClass ?? ""
+          )
+        }, index))
+      })
+    }) : connectDragSource(/* @__PURE__ */ jsx("div", {
       className: "rst__moveHandle"
@@ -859,76 +861,100 @@ }), {
   }
-  return /* @__PURE__ */ React.createElement("div", {
+  return /* @__PURE__ */ jsxs("div", {
     style: { height: "100%" },
-    ...otherProps
-  }, toggleChildrenVisibility && node.children && (node.children.length > 0 || typeof node.children === "function") && /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("button", {
-    type: "button",
-    "aria-label": node.expanded ? "Collapse" : "Expand",
-    className: classnames(
-      node.expanded ? "rst__collapseButton" : "rst__expandButton",
-      rowDirectionClass ?? ""
-    ),
-    style: buttonStyle,
-    onClick: () => toggleChildrenVisibility({
-      node,
-      path,
-      treeIndex
-    })
-  }), node.expanded && !isDragging && /* @__PURE__ */ React.createElement("div", {
-    style: { width: scaffoldBlockPxWidth },
-    className: classnames(
-      "rst__lineChildren",
-      rowDirectionClass ?? ""
-    )
-  })), /* @__PURE__ */ React.createElement("div", {
-    className: classnames("rst__rowWrapper", rowDirectionClass ?? "")
-  }, connectDragPreview(
-    /* @__PURE__ */ React.createElement("div", {
-      className: classnames(
-        "rst__row",
-        isLandingPadActive ? "rst__rowLandingPad" : "",
-        isLandingPadActive && !canDrop ? "rst__rowCancelPad" : "",
-        isSearchMatch ? "rst__rowSearchMatch" : "",
-        isSearchFocus ? "rst__rowSearchFocus" : "",
-        rowDirectionClass ?? "",
-        className ?? ""
-      ),
-      style: {
-        opacity: isDraggedDescendant ? 0.5 : 1,
-        ...style
-      }
-    }, handle, /* @__PURE__ */ React.createElement("div", {
-      className: classnames(
-        "rst__rowContents",
-        !canDrag ? "rst__rowContentsDragDisabled" : "",
-        rowDirectionClass ?? ""
-      )
-    }, /* @__PURE__ */ React.createElement("div", {
-      className: classnames(
-        "rst__rowLabel",
-        rowDirectionClass ?? ""
-      )
-    }, /* @__PURE__ */ React.createElement("span", {
-      className: classnames(
-        "rst__rowTitle",
-        node.subtitle ? "rst__rowTitleWithSubtitle" : ""
-      )
-    }, typeof nodeTitle === "function" ? nodeTitle({
-      node,
-      path,
-      treeIndex
-    }) : nodeTitle), nodeSubtitle && /* @__PURE__ */ React.createElement("span", {
-      className: "rst__rowSubtitle"
-    }, typeof nodeSubtitle === "function" ? nodeSubtitle({
-      node,
-      path,
-      treeIndex
-    }) : nodeSubtitle)), /* @__PURE__ */ React.createElement("div", {
-      className: "rst__rowToolbar"
-    }, buttons == null ? void 0 : buttons.map((btn, index) => /* @__PURE__ */ React.createElement("div", {
-      key: index,
-      className: "rst__toolbarButton"
-    }, btn)))))
-  )));
+    ...otherProps,
+    children: [
+      toggleChildrenVisibility && node.children && (node.children.length > 0 || typeof node.children === "function") && /* @__PURE__ */ jsxs("div", {
+        children: [
+          /* @__PURE__ */ jsx("button", {
+            type: "button",
+            "aria-label": node.expanded ? "Collapse" : "Expand",
+            className: classnames(
+              node.expanded ? "rst__collapseButton" : "rst__expandButton",
+              rowDirectionClass ?? ""
+            ),
+            style: buttonStyle,
+            onClick: () => toggleChildrenVisibility({
+              node,
+              path,
+              treeIndex
+            })
+          }),
+          node.expanded && !isDragging && /* @__PURE__ */ jsx("div", {
+            style: { width: scaffoldBlockPxWidth },
+            className: classnames(
+              "rst__lineChildren",
+              rowDirectionClass ?? ""
+            )
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsx("div", {
+        className: classnames("rst__rowWrapper", rowDirectionClass ?? ""),
+        children: connectDragPreview(
+          /* @__PURE__ */ jsxs("div", {
+            className: classnames(
+              "rst__row",
+              isLandingPadActive ? "rst__rowLandingPad" : "",
+              isLandingPadActive && !canDrop ? "rst__rowCancelPad" : "",
+              isSearchMatch ? "rst__rowSearchMatch" : "",
+              isSearchFocus ? "rst__rowSearchFocus" : "",
+              rowDirectionClass ?? "",
+              className ?? ""
+            ),
+            style: {
+              opacity: isDraggedDescendant ? 0.5 : 1,
+              ...style
+            },
+            children: [
+              handle,
+              /* @__PURE__ */ jsxs("div", {
+                className: classnames(
+                  "rst__rowContents",
+                  !canDrag ? "rst__rowContentsDragDisabled" : "",
+                  rowDirectionClass ?? ""
+                ),
+                children: [
+                  /* @__PURE__ */ jsxs("div", {
+                    className: classnames(
+                      "rst__rowLabel",
+                      rowDirectionClass ?? ""
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsx("span", {
+                        className: classnames(
+                          "rst__rowTitle",
+                          node.subtitle ? "rst__rowTitleWithSubtitle" : ""
+                        ),
+                        children: typeof nodeTitle === "function" ? nodeTitle({
+                          node,
+                          path,
+                          treeIndex
+                        }) : nodeTitle
+                      }),
+                      nodeSubtitle && /* @__PURE__ */ jsx("span", {
+                        className: "rst__rowSubtitle",
+                        children: typeof nodeSubtitle === "function" ? nodeSubtitle({
+                          node,
+                          path,
+                          treeIndex
+                        }) : nodeSubtitle
+                      })
+                    ]
+                  }),
+                  /* @__PURE__ */ jsx("div", {
+                    className: "rst__rowToolbar",
+                    children: buttons == null ? void 0 : buttons.map((btn, index) => /* @__PURE__ */ jsx("div", {
+                      className: "rst__toolbarButton",
+                      children: btn
+                    }, index))
+                  })
+                ]
+              })
+            ]
+          })
+        )
+      })
+    ]
+  });
 };
-var NodeRendererDefault$1 = NodeRendererDefault;
 
@@ -942,3 +968,3 @@ const defaultProps$2 = {
   const { canDrop, isOver } = props;
-  return /* @__PURE__ */ React.createElement("div", {
+  return /* @__PURE__ */ jsx("div", {
     className: classnames(
@@ -951,3 +977,2 @@ "rst__placeholder",
 };
-var PlaceholderRendererDefault$1 = PlaceholderRendererDefault;
 
@@ -1005,4 +1030,3 @@ const defaultProps$1 = {
       scaffold.push(
-        /* @__PURE__ */ React.createElement("div", {
-          key: `pre_${1 + i}`,
+        /* @__PURE__ */ jsx("div", {
           style: { width: scaffoldBlockPxWidth },
@@ -1014,3 +1038,3 @@ className: classnames(
           )
-        })
+        }, `pre_${1 + i}`)
       );
@@ -1034,4 +1058,3 @@ if (treeIndex !== listIndex && i === swapDepth) {
         scaffold.push(
-          /* @__PURE__ */ React.createElement("div", {
-            key: i,
+          /* @__PURE__ */ jsx("div", {
             style: style2,
@@ -1043,3 +1066,3 @@ className: classnames(
             )
-          })
+          }, i)
         );
@@ -1054,22 +1077,26 @@ }
     return connectDropTarget(
-      /* @__PURE__ */ React.createElement("div", {
+      /* @__PURE__ */ jsxs("div", {
         ...otherProps,
         style: { height: `${calculatedRowHeight}px` },
         className: classnames("rst__node", rowDirectionClass ?? ""),
-        ref: (node) => this.node = node
-      }, scaffold, /* @__PURE__ */ React.createElement("div", {
-        className: "rst__nodeContent",
-        style
-      }, Children.map(
-        children,
-        (child) => cloneElement(child, {
-          isOver,
-          canDrop,
-          draggedNode
-        })
-      )))
+        ref: (node) => this.node = node,
+        children: [
+          scaffold,
+          /* @__PURE__ */ jsx("div", {
+            className: "rst__nodeContent",
+            style,
+            children: Children.map(
+              children,
+              (child) => cloneElement(child, {
+                isOver,
+                canDrop,
+                draggedNode
+              })
+            )
+          })
+        ]
+      })
     );
   }
 }
-var TreeNode = TreeNodeComponent;
 
@@ -1084,11 +1111,12 @@ const defaultProps = {
   return connectDropTarget(
-    /* @__PURE__ */ React.createElement("div", null, Children.map(
-      children,
-      (child) => cloneElement(child, {
-        ...otherProps
-      })
-    ))
+    /* @__PURE__ */ jsx("div", {
+      children: Children.map(
+        children,
+        (child) => cloneElement(child, {
+          ...otherProps
+        })
+      )
+    })
   );
 };
-var TreePlaceholder$1 = TreePlaceholder;
 
@@ -1328,8 +1356,8 @@ let rafId = 0;
   const overridableDefaults = {
-    nodeContentRenderer: NodeRendererDefault$1,
-    placeholderRenderer: PlaceholderRendererDefault$1,
+    nodeContentRenderer: NodeRendererDefault,
+    placeholderRenderer: PlaceholderRendererDefault,
     scaffoldBlockPxWidth: 44,
     slideRegionSize: 100,
     rowHeight: 62,
-    treeNodeRenderer: TreeNode
+    treeNodeRenderer: TreeNodeComponent
   };
@@ -1465,3 +1493,3 @@ for (const propKey of Object.keys(overridableDefaults)) {
     this.treePlaceholderRenderer = wrapPlaceholder(
-      TreePlaceholder$1,
+      TreePlaceholder,
       this.treeId,
@@ -1474,3 +1502,3 @@ this.drop,
         const { dragDropManager, rowHeight, ...otherProps } = props2;
-        return /* @__PURE__ */ React.createElement(Virtuoso, {
+        return /* @__PURE__ */ jsx(Virtuoso, {
           ref: this.listRef,
@@ -1750,6 +1778,5 @@ ...otherProps
     };
-    return /* @__PURE__ */ React.createElement(TreeNodeRenderer, {
+    return /* @__PURE__ */ jsx(TreeNodeRenderer, {
       style,
       rowHeight,
-      key: nodeKey,
       listIndex,
@@ -1761,12 +1788,13 @@ getPrevRow,
       swapDepth,
-      ...sharedProps
-    }, /* @__PURE__ */ React.createElement(NodeContentRenderer, {
-      parentNode,
-      isSearchMatch,
-      isSearchFocus,
-      canDrag: rowCanDrag,
-      toggleChildrenVisibility: this.toggleChildrenVisibility,
       ...sharedProps,
-      ...nodeProps
-    }));
+      children: /* @__PURE__ */ jsx(NodeContentRenderer, {
+        parentNode,
+        isSearchMatch,
+        isSearchFocus,
+        canDrag: rowCanDrag,
+        toggleChildrenVisibility: this.toggleChildrenVisibility,
+        ...sharedProps,
+        ...nodeProps
+      })
+    }, nodeKey);
   }
@@ -1832,10 +1860,11 @@ render() {
       const PlaceholderContent = placeholderRenderer;
-      list = /* @__PURE__ */ React.createElement(Placeholder, {
+      list = /* @__PURE__ */ jsx(Placeholder, {
         treeId: this.treeId,
-        drop: this.drop
-      }, /* @__PURE__ */ React.createElement(PlaceholderContent, null));
+        drop: this.drop,
+        children: /* @__PURE__ */ jsx(PlaceholderContent, {})
+      });
     } else {
       containerStyle = { height: "100%", ...containerStyle };
       const ScrollZoneVirtualList = this.scrollZoneVirtualList;
-      list = /* @__PURE__ */ React.createElement(ScrollZoneVirtualList, {
+      list = /* @__PURE__ */ jsx(ScrollZoneVirtualList, {
         data: rows,
@@ -1857,6 +1886,7 @@ dragDropManager,
     }
-    return /* @__PURE__ */ React.createElement("div", {
+    return /* @__PURE__ */ jsx("div", {
       className: classnames("rst__tree", className, rowDirectionClass),
-      style: containerStyle
-    }, list);
+      style: containerStyle,
+      children: list
+    });
   }
@@ -1898,17 +1928,19 @@ }
 const SortableTreeWithoutDndContext = function(props) {
-  return /* @__PURE__ */ React.createElement(DndContext.Consumer, null, ({ dragDropManager }) => dragDropManager === void 0 ? void 0 : /* @__PURE__ */ React.createElement(ReactSortableTree, {
-    ...props,
-    dragDropManager
-  }));
+  return /* @__PURE__ */ jsx(DndContext.Consumer, {
+    children: ({ dragDropManager }) => dragDropManager === void 0 ? void 0 : /* @__PURE__ */ jsx(ReactSortableTree, {
+      ...props,
+      dragDropManager
+    })
+  });
 };
 const SortableTree = function(props) {
-  return /* @__PURE__ */ React.createElement(DndProvider, {
+  return /* @__PURE__ */ jsx(DndProvider, {
     debugMode: props.debugMode,
-    backend: HTML5Backend
-  }, /* @__PURE__ */ React.createElement(SortableTreeWithoutDndContext, {
-    ...props
-  }));
+    backend: HTML5Backend,
+    children: /* @__PURE__ */ jsx(SortableTreeWithoutDndContext, {
+      ...props
+    })
+  });
 };
-var SortableTree$1 = SortableTree;
 
-export { SortableTreeWithoutDndContext, addNodeUnderParent, changeNodeAtPath, SortableTree$1 as default, defaultGetNodeKey, defaultSearchMethod, find, getDepth, getDescendantCount, getFlatDataFromTree, getNodeAtPath, getTreeFromFlatData, getVisibleNodeCount, getVisibleNodeInfoAtIndex, insertNode, isDescendant, map, removeNode, removeNodeAtPath, toggleExpandedForAll, walk };
+export { SortableTreeWithoutDndContext, addNodeUnderParent, changeNodeAtPath, SortableTree as default, defaultGetNodeKey, defaultSearchMethod, find, getDepth, getDescendantCount, getFlatDataFromTree, getNodeAtPath, getTreeFromFlatData, getVisibleNodeCount, getVisibleNodeInfoAtIndex, insertNode, isDescendant, map, removeNode, removeNodeAtPath, toggleExpandedForAll, walk };

index.js

@@ -1120,4 +1120,2 @@ 'use strict';
 
-var NodeRendererDefault$1 = NodeRendererDefault;
-
 const defaultProps$2 = {
@@ -1141,4 +1139,2 @@ isOver: false,
 
-var PlaceholderRendererDefault$1 = PlaceholderRendererDefault;
-
 const defaultProps$1 = {
@@ -1263,4 +1259,2 @@ swapFrom: undefined,
 
-var TreeNode = TreeNodeComponent;
-
 const defaultProps = {
@@ -1288,4 +1282,2 @@ canDrop: false,
 
-var TreePlaceholder$1 = TreePlaceholder;
-
 let rafId = 0;
@@ -1521,8 +1513,8 @@
   const overridableDefaults = {
-    nodeContentRenderer: NodeRendererDefault$1,
-    placeholderRenderer: PlaceholderRendererDefault$1,
+    nodeContentRenderer: NodeRendererDefault,
+    placeholderRenderer: PlaceholderRendererDefault,
     scaffoldBlockPxWidth: 44,
     slideRegionSize: 100,
     rowHeight: 62,
-    treeNodeRenderer: TreeNode
+    treeNodeRenderer: TreeNodeComponent
   };
@@ -1651,3 +1643,3 @@
     this.nodeContentRenderer = wrapSource(nodeContentRenderer, this.startDrag, this.endDrag, this.dndType);
-    this.treePlaceholderRenderer = wrapPlaceholder(TreePlaceholder$1, this.treeId, this.drop, this.dndType);
+    this.treePlaceholderRenderer = wrapPlaceholder(TreePlaceholder, this.treeId, this.drop, this.dndType);
     this.scrollZoneVirtualList = (withScrolling.createScrollingComponent || withScrolling__default["default"])(React__default["default"].forwardRef((props, ref) => {
@@ -2182,3 +2174,2 @@ const {
 };
-var SortableTree$1 = SortableTree;
 
@@ -2188,3 +2179,3 @@ exports.SortableTreeWithoutDndContext = SortableTreeWithoutDndContext;
 exports.changeNodeAtPath = changeNodeAtPath;
-exports["default"] = SortableTree$1;
+exports["default"] = SortableTree;
 exports.defaultGetNodeKey = defaultGetNodeKey;
@@ -2191,0 +2182,0 @@ exports.defaultSearchMethod = defaultSearchMethod;

package.json

 {
   "name": "@nosferatu500/react-sortable-tree",
-  "version": "4.1.4",
+  "version": "4.1.5",
   "description": "Drag-and-drop sortable component for nested data and hierarchies",
   "main": "./index.js",
+  "module": "./esm/index.js",
   "types": "./index.d.ts",
@@ -48,3 +49,3 @@ "exports": {
     "react-dnd-html5-backend": "^14.1.0",
-    "react-virtuoso": "^2.16.5"
+    "react-virtuoso": "^2.19.1"
   },
@@ -51,0 +52,0 @@ "peerDependencies": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

247157

increased by0.54%

Lines of code

7559

increased by0.79%

Dependency changes

• Updatedreact-virtuoso@^2.19.1