@alexgorbatchev/shadcn 0.0.21 → 0.0.22

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

@@ -4,13 +4,12 @@ import type { IDensityProps } from "../../density/types.js";
 type TreeProps<T> = IDensityProps & {
     tree: TreeInstance<T>;
     label: string;
+    variant?: "default" | "sidebar";
     renderIcon?: (item: ItemInstance<T>) => ReactNode;
     renderLabel?: (item: ItemInstance<T>) => ReactNode;
+    renderItem?: (item: ItemInstance<T>) => ReactNode;
 };
-/** Render a native Headless Tree instance; configure loading, selection, and actions with useTree. */
-declare function Tree<T>({ tree, label, renderIcon, renderLabel, density }: TreeProps<T>): ReactElement;
+/** Headless Tree owns navigation, selection, expansion, and optional pointer/keyboard drag and drop. */
+declare function Tree<T>({ tree, label, variant, renderIcon, renderLabel, renderItem, density, }: TreeProps<T>): ReactElement;
 export { Tree };
 export type { TreeProps };
-export { useTree, AssistiveTreeDescription } from "@headless-tree/react";
-export { syncDataLoaderFeature, asyncDataLoaderFeature, hotkeysCoreFeature, selectionFeature, checkboxesFeature, searchFeature, renamingFeature, expandAllFeature, } from "@headless-tree/core";
-export type { TreeInstance, ItemInstance, TreeConfig } from "@headless-tree/core";

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

@@ -0,0 +1,22 @@
+import { useRender } from "@base-ui/react/use-render";
+import type { ItemInstance } from "@headless-tree/core";
+import type { ReactElement, ReactNode } from "react";
+import type { IDensityProps } from "../../density/types.js";
+type TreeItemState = {
+    slot: "tree-item";
+    selected: boolean;
+    expanded: boolean;
+    dropTarget: boolean;
+    density: IDensityProps["density"];
+};
+type TreeItemProps<T> = useRender.ComponentProps<"div", TreeItemState> & IDensityProps & {
+    item: ItemInstance<T>;
+    startEnhancer?: ReactNode;
+    endEnhancer?: ReactNode;
+    expandOn?: "click" | "doubleClick";
+    isEditing?: boolean;
+    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 type { TreeItemProps };

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

@@ -1,2 +1,7 @@
-export { Tree, useTree, AssistiveTreeDescription, syncDataLoaderFeature, asyncDataLoaderFeature, hotkeysCoreFeature, selectionFeature, checkboxesFeature, searchFeature, renamingFeature, expandAllFeature, } from "./Tree.js";
-export type { TreeProps, TreeInstance, ItemInstance, TreeConfig } from "./Tree.js";
+export { Tree } from "./Tree.js";
+export { TreeItem } from "./TreeItem.js";
+export type { TreeProps } from "./Tree.js";
+export type { TreeItemProps } from "./TreeItem.js";
+export { useTree, AssistiveTreeDescription } from "@headless-tree/react";
+export { syncDataLoaderFeature, asyncDataLoaderFeature, hotkeysCoreFeature, selectionFeature, checkboxesFeature, searchFeature, renamingFeature, expandAllFeature, dragAndDropFeature, keyboardDragAndDropFeature, isOrderedDragTarget, } from "@headless-tree/core";
+export type { TreeInstance, ItemInstance, TreeConfig, DragTarget } from "@headless-tree/core";

package/dist/components/tree/index.js

@@ -2,8 +2,161 @@ import {
   cn2
 } from "../../chunk-cp2m7y7v.js";
 
-// src/components/tree/Tree.tsx
+// src/components/tree/TreeItem.tsx
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
 import { ChevronRightIcon, FileIcon, FolderIcon, FolderOpenIcon } from "lucide-react";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+function isRowControl(event) {
+  return event.target !== event.currentTarget && event.target instanceof Element && Boolean(event.target.closest("button,input,textarea,select,form"));
+}
+function TreeItem({
+  item,
+  children,
+  startEnhancer,
+  endEnhancer,
+  expandOn = "click",
+  isEditing = false,
+  isDropTarget = false,
+  density,
+  render,
+  ...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();
+    else
+      item.expand();
+  };
+  const select = (event) => {
+    if (isRowControl(event))
+      return;
+    item.setFocused();
+    if (event.shiftKey)
+      item.selectUpTo?.(event.ctrlKey || event.metaKey);
+    else if (event.ctrlKey || event.metaKey)
+      item.toggleSelect?.();
+    else
+      item.getTree().setSelectedItems?.([item.getId()]);
+    if (!event.shiftKey)
+      item.getTree().getDataRef().current.selectUpToAnchorId = item.getId();
+    item.primaryAction();
+  };
+  return useRender({
+    defaultTagName: "div",
+    render,
+    props: mergeProps({
+      ...nativeProps,
+      onKeyDown: (event) => {
+        if (event.target !== event.currentTarget || event.defaultPrevented || event.key !== "Enter" || event.repeat || item.getTree().getState().dnd)
+          return;
+        event.preventDefault();
+        item.getTree().setSelectedItems?.([item.getId()]);
+        item.primaryAction();
+        if (expandOn === "doubleClick" && item.isFolder())
+          toggle();
+      },
+      ...expandOn === "doubleClick" ? {
+        onClick: select,
+        onDoubleClick: (event) => {
+          if (!isRowControl(event) && item.isFolder())
+            toggle();
+        }
+      } : {},
+      ...isEditing ? {
+        draggable: false,
+        onClick: undefined,
+        onDoubleClick: undefined,
+        onKeyDown: undefined,
+        onDragStart: undefined
+      } : {},
+      style: { paddingInlineStart: `${item.getItemMeta().level * 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: [
+          item.isFolder() ? /* @__PURE__ */ jsx(ChevronRightIcon, {
+            "aria-hidden": "true",
+            className: cn2("size-3.5 shrink-0", isExpanded && "rotate-90")
+          }) : /* @__PURE__ */ jsx("span", {
+            className: "size-3.5 shrink-0"
+          }),
+          /* @__PURE__ */ jsx("span", {
+            "aria-hidden": "true",
+            className: "flex shrink-0 [&>svg]:size-4",
+            children: startEnhancer ?? (item.isFolder() ? isExpanded ? /* @__PURE__ */ jsx(FolderOpenIcon, {}) : /* @__PURE__ */ jsx(FolderIcon, {}) : /* @__PURE__ */ jsx(FileIcon, {}))
+          }),
+          /* @__PURE__ */ jsx("div", {
+            className: "min-w-0 flex-1 truncate",
+            children: children ?? item.getItemName()
+          }),
+          endEnhancer && /* @__PURE__ */ jsx("div", {
+            className: "flex shrink-0 items-center gap-1 text-xs tabular-nums",
+            onClick: (event) => event.stopPropagation(),
+            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"
+          })
+        ]
+      })
+    }, props),
+    state: {
+      slot: "tree-item",
+      selected: isSelected,
+      expanded: isExpanded,
+      dropTarget: isInsideTarget || isDropTarget,
+      density
+    }
+  });
+}
+
+// src/components/tree/Tree.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function Tree({
+  tree,
+  label,
+  variant = "default",
+  renderIcon,
+  renderLabel,
+  renderItem,
+  density
+}) {
+  const container = tree.getContainerProps(label);
+  return /* @__PURE__ */ jsx2("div", {
+    ...container,
+    "data-density": density,
+    className: cn2("grid min-w-0 gap-1", variant === "default" && "rounded-sm border border-border bg-card p-2"),
+    onKeyDown: (event) => {
+      if (event.target instanceof Element && event.target.closest("input,textarea,select,form,button,[role=menu]"))
+        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()))
+  });
+}
+
+// src/components/tree/index.ts
 import { useTree, AssistiveTreeDescription } from "@headless-tree/react";
 import {
   syncDataLoaderFeature,
@@ -13,42 +166,22 @@ import {
   checkboxesFeature,
   searchFeature,
   renamingFeature,
-  expandAllFeature
+  expandAllFeature,
+  dragAndDropFeature,
+  keyboardDragAndDropFeature,
+  isOrderedDragTarget
 } from "@headless-tree/core";
-import { jsx } from "react/jsx-runtime";
-import { createElement } from "react";
-function Tree({ tree, label, renderIcon, renderLabel, density }) {
-  return /* @__PURE__ */ jsx("div", {
-    ...tree.getContainerProps(label),
-    "data-density": density,
-    className: "grid gap-1 rounded-sm border border-border bg-card p-2",
-    children: tree.getItems().map((item) => /* @__PURE__ */ createElement("div", {
-      ...item.getProps(),
-      key: item.getKey(),
-      style: { paddingInlineStart: `${item.getItemMeta().level * 20 + 8}px` },
-      className: cn2("flex min-h-control 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", tree.getState().selectedItems?.includes(item.getId()) && "bg-accent text-accent-foreground")
-    }, item.isFolder() ? /* @__PURE__ */ jsx(ChevronRightIcon, {
-      "aria-hidden": "true",
-      className: cn2("size-3.5 shrink-0", item.isExpanded() && "rotate-90")
-    }) : /* @__PURE__ */ jsx("span", {
-      className: "size-3.5 shrink-0"
-    }), /* @__PURE__ */ jsx("span", {
-      "aria-hidden": "true",
-      className: "flex shrink-0 [&>svg]:size-4",
-      children: renderIcon ? renderIcon(item) : item.isFolder() ? item.isExpanded() ? /* @__PURE__ */ jsx(FolderOpenIcon, {}) : /* @__PURE__ */ jsx(FolderIcon, {}) : /* @__PURE__ */ jsx(FileIcon, {})
-    }), /* @__PURE__ */ jsx("span", {
-      className: "min-w-0 truncate",
-      children: renderLabel ? renderLabel(item) : item.getItemName()
-    })))
-  });
-}
 export {
   AssistiveTreeDescription,
   Tree,
+  TreeItem,
   asyncDataLoaderFeature,
   checkboxesFeature,
+  dragAndDropFeature,
   expandAllFeature,
   hotkeysCoreFeature,
+  isOrderedDragTarget,
+  keyboardDragAndDropFeature,
   renamingFeature,
   searchFeature,
   selectionFeature,

package/dist/index.js

@@ -2673,6 +2673,7 @@ function InlineEdit({
 }) {
   const input = useRef3(null);
   const isFinished = useRef3(false);
+  const shouldCancel = useRef3(false);
   const [isSaving, setSaving] = useState2(false);
   const [error, setError] = useState2("");
   useEffect2(() => {
@@ -2712,14 +2713,21 @@ function InlineEdit({
         disabled: isDisabled || isSaving,
         onChange: (event) => onValueChange(event.target.value),
         onBlur: () => {
-          save();
+          if (shouldCancel.current && !isFinished.current) {
+            isFinished.current = true;
+            onCancel();
+          } else
+            save();
         },
         onKeyDown: (event) => {
           if (event.key === "Escape") {
             event.preventDefault();
             event.stopPropagation();
-            isFinished.current = true;
-            onCancel();
+            shouldCancel.current = true;
+            event.currentTarget.blur();
+          } else if (event.key === "Enter") {
+            event.preventDefault();
+            event.currentTarget.blur();
           }
         }
       }),

package/llms/components/navigation/Tree.md

@@ -8,7 +8,14 @@ Source: src/components/stories/navigation/Tree.stories.tsx
 ## Public imports
 
 ```tsx
-import { Tree, useTree, syncDataLoaderFeature, hotkeysCoreFeature, selectionFeature } from "@alexgorbatchev/shadcn/tree";
+import { Tree, TreeItem, useTree, syncDataLoaderFeature, hotkeysCoreFeature, selectionFeature } from "@alexgorbatchev/shadcn/tree";
+import { Button, ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuGroup, ContextMenuItem, InlineEdit } from "@alexgorbatchev/shadcn";
+```
+
+## Supporting imports
+
+```tsx
+import { useState } from "react";
 ```
 
 ## Default render
@@ -26,3 +33,19 @@ Storybook CSF excerpts. Default args and render apply unless overridden. Local h
 ```tsx
 {}
 ```
+
+### ComposedRows
+
+```tsx
+{
+    render: () => <Example isComposed/>
+}
+```
+
+### EditableRows
+
+```tsx
+{
+    render: () => <EditableExample />
+}
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alexgorbatchev/shadcn",
-  "version": "0.0.21",
+  "version": "0.0.22",
   "description": "Sharp, monospace React components with compact and comfortable densities.",
   "license": "MIT",
   "repository": {
@@ -1043,7 +1043,7 @@
     "build": "bun scripts/build.ts",
     "typecheck": "tsc --noEmit",
     "lint": "oxlint --deny-warnings src .storybook scripts && oxfmt --check . && bun run lint:unused",
-    "lint:unused": "NODE_OPTIONS=--max-old-space-size=12288 ts-unused check tsconfig.json",
+    "lint:unused": "ts-unused check tsconfig.json",
     "storybook": "bun scripts/buildLlmDocs.ts && storybook dev --host 127.0.0.1 -p 6006 --no-open",
     "build-storybook": "bun scripts/buildLlmDocs.ts && storybook build",
     "prepack": "bun run build",
@@ -1139,7 +1139,7 @@
     "storybook": "^10.6.1",
     "strip-ansi": "7.2.0",
     "tailwindcss": "^4.3.3",
-    "ts-unused": "3.7.0",
+    "ts-unused": "3.7.1",
     "typescript": "^6.0.3",
     "vite": "^8.3.4",
     "vitest": "^4.1.6",