@alexgorbatchev/shadcn 0.0.22 → 0.0.23

package/dist/components/tree/TreeItem.d.ts

@@ -18,5 +18,5 @@ type TreeItemProps<T> = useRender.ComponentProps<"div", TreeItemState> & IDensit
     isDropTarget?: boolean;
 };
 /** Registered tree row; compose menus with render and place counts/actions in endEnhancer. */
-export declare function TreeItem<T>({ item, children, startEnhancer, endEnhancer, expandOn, isEditing, isDropTarget, density, render, ...props }: TreeItemProps<T>): ReactElement;
+export declare function TreeItem<T>({ item, children, startEnhancer, endEnhancer, expandOn, isEditing, isDropTarget, density, render, ref, ...props }: TreeItemProps<T>): ReactElement;
 export type { TreeItemProps };

package/dist/components/tree/index.js

@@ -20,14 +20,13 @@ function TreeItem({
   isDropTarget = false,
   density,
   render,
+  ref,
   ...props
 }) {
   const nativeProps = item.getProps();
   const isExpanded = item.isExpanded();
   const isSelected = item.isSelected?.() ?? false;
   const isInsideTarget = item.isUnorderedDragTarget?.() ?? false;
-  const isAbove = item.isDragTargetAbove?.() ?? false;
-  const isBelow = item.isDragTargetBelow?.() ?? false;
   const toggle = () => {
     if (isExpanded)
       item.collapse();
@@ -51,8 +50,10 @@ function TreeItem({
   return useRender({
     defaultTagName: "div",
     render,
+    ref: [item.registerElement, ref ?? null],
     props: mergeProps({
       ...nativeProps,
+      ref: undefined,
       onKeyDown: (event) => {
         if (event.target !== event.currentTarget || event.defaultPrevented || event.key !== "Enter" || event.repeat || item.getTree().getState().dnd)
           return;
@@ -76,7 +77,7 @@ function TreeItem({
         onKeyDown: undefined,
         onDragStart: undefined
       } : {},
-      style: { paddingInlineStart: `${item.getItemMeta().level * 20 + 8}px` },
+      style: { paddingInlineStart: `${item.getItemMeta().level * (item.getTree().getConfig().indent ?? 20) + 8}px` },
       className: cn2("relative flex min-h-control min-w-0 cursor-default items-center gap-2 rounded-sm py-1 pr-2 text-sm outline-none hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring", (isSelected || isDropTarget || isInsideTarget) && "bg-accent text-accent-foreground"),
       children: /* @__PURE__ */ jsxs(Fragment, {
         children: [
@@ -101,14 +102,6 @@ function TreeItem({
             onDoubleClick: (event) => event.stopPropagation(),
             onKeyDown: (event) => event.stopPropagation(),
             children: endEnhancer
-          }),
-          isAbove && /* @__PURE__ */ jsx("span", {
-            "aria-hidden": "true",
-            className: "pointer-events-none absolute inset-x-0 top-0 h-0.5 bg-primary"
-          }),
-          isBelow && /* @__PURE__ */ jsx("span", {
-            "aria-hidden": "true",
-            className: "pointer-events-none absolute inset-x-0 bottom-0 h-0.5 bg-primary"
           })
         ]
       })
@@ -124,7 +117,7 @@ function TreeItem({
 }
 
 // src/components/tree/Tree.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 function Tree({
   tree,
   label,
@@ -135,7 +128,9 @@ function Tree({
   density
 }) {
   const container = tree.getContainerProps(label);
-  return /* @__PURE__ */ jsx2("div", {
+  const dragLine = tree.getDragLineData?.();
+  const element = tree.getElement();
+  return /* @__PURE__ */ jsxs2("div", {
     ...container,
     "data-density": density,
     className: cn2("grid min-w-0 gap-1", variant === "default" && "rounded-sm border border-border bg-card p-2"),
@@ -144,15 +139,23 @@ function Tree({
         return;
       container.onKeyDown?.(event);
     },
-    children: tree.getItems().map((item) => renderItem ? /* @__PURE__ */ jsx2("div", {
-      role: "none",
-      children: renderItem(item)
-    }, item.getKey()) : /* @__PURE__ */ jsx2(TreeItem, {
-      item,
-      startEnhancer: renderIcon?.(item),
-      density,
-      children: renderLabel?.(item)
-    }, item.getKey()))
+    children: [
+      tree.getItems().map((item) => renderItem ? /* @__PURE__ */ jsx2("div", {
+        role: "none",
+        children: renderItem(item)
+      }, item.getKey()) : /* @__PURE__ */ jsx2(TreeItem, {
+        item,
+        startEnhancer: renderIcon?.(item),
+        density,
+        children: renderLabel?.(item)
+      }, item.getKey())),
+      dragLine && /* @__PURE__ */ jsx2("span", {
+        "data-slot": "tree-drop-indicator",
+        "aria-hidden": "true",
+        className: "pointer-events-none absolute h-0.5 bg-primary",
+        style: tree.getDragLineStyle(-1 - (element?.clientTop ?? 0), -(element?.clientLeft ?? 0))
+      })
+    ]
   });
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alexgorbatchev/shadcn",
-  "version": "0.0.22",
+  "version": "0.0.23",
   "description": "Sharp, monospace React components with compact and comfortable densities.",
   "license": "MIT",
   "repository": {