@particle-academy/react-fancy 1.8.2 → 1.9.0

package/dist/index.d.cts

@@ -2083,6 +2083,8 @@ interface TreeNavProps {
     selectedId?: string;
     /** Callback when a node is selected */
     onSelect?: (id: string, node: TreeNodeData) => void;
+    /** Callback when a node is right-clicked */
+    onNodeContextMenu?: (e: React.MouseEvent, node: TreeNodeData) => void;
     /** Controlled expanded node IDs */
     expandedIds?: string[];
     /** Default expanded node IDs (uncontrolled) */
@@ -2101,6 +2103,7 @@ interface TreeNavProps {
 interface TreeNavContextValue {
     selectedId?: string;
     onSelect?: (id: string, node: TreeNodeData) => void;
+    onNodeContextMenu?: (e: React.MouseEvent, node: TreeNodeData) => void;
     expandedIds: string[];
     toggle: (id: string) => void;
     indentSize: number;
@@ -2117,7 +2120,7 @@ declare namespace TreeNode {
     var displayName: string;
 }
 
-declare function TreeNavRoot({ nodes, selectedId, onSelect, expandedIds: controlledExpanded, defaultExpandedIds, onExpandedChange, defaultExpandAll, indentSize, showIcons, className, }: TreeNavProps): react_jsx_runtime.JSX.Element;
+declare function TreeNavRoot({ nodes, selectedId, onSelect, onNodeContextMenu, expandedIds: controlledExpanded, defaultExpandedIds, onExpandedChange, defaultExpandAll, indentSize, showIcons, className, }: TreeNavProps): react_jsx_runtime.JSX.Element;
 declare namespace TreeNavRoot {
     var displayName: string;
 }

package/dist/index.d.ts

@@ -2083,6 +2083,8 @@ interface TreeNavProps {
     selectedId?: string;
     /** Callback when a node is selected */
     onSelect?: (id: string, node: TreeNodeData) => void;
+    /** Callback when a node is right-clicked */
+    onNodeContextMenu?: (e: React.MouseEvent, node: TreeNodeData) => void;
     /** Controlled expanded node IDs */
     expandedIds?: string[];
     /** Default expanded node IDs (uncontrolled) */
@@ -2101,6 +2103,7 @@ interface TreeNavProps {
 interface TreeNavContextValue {
     selectedId?: string;
     onSelect?: (id: string, node: TreeNodeData) => void;
+    onNodeContextMenu?: (e: React.MouseEvent, node: TreeNodeData) => void;
     expandedIds: string[];
     toggle: (id: string) => void;
     indentSize: number;
@@ -2117,7 +2120,7 @@ declare namespace TreeNode {
     var displayName: string;
 }
 
-declare function TreeNavRoot({ nodes, selectedId, onSelect, expandedIds: controlledExpanded, defaultExpandedIds, onExpandedChange, defaultExpandAll, indentSize, showIcons, className, }: TreeNavProps): react_jsx_runtime.JSX.Element;
+declare function TreeNavRoot({ nodes, selectedId, onSelect, onNodeContextMenu, expandedIds: controlledExpanded, defaultExpandedIds, onExpandedChange, defaultExpandAll, indentSize, showIcons, className, }: TreeNavProps): react_jsx_runtime.JSX.Element;
 declare namespace TreeNavRoot {
     var displayName: string;
 }

package/dist/index.js

@@ -10255,7 +10255,7 @@ function ChevronIcon({ open }) {
   );
 }
 function TreeNode({ node, depth }) {
-  const { selectedId, onSelect, expandedIds, toggle, indentSize, showIcons } = useTreeNav();
+  const { selectedId, onSelect, onNodeContextMenu, expandedIds, toggle, indentSize, showIcons } = useTreeNav();
   const isFolder = node.type === "folder" || node.children && node.children.length > 0;
   const isExpanded = expandedIds.includes(node.id);
   const isSelected = selectedId === node.id;
@@ -10267,12 +10267,19 @@ function TreeNode({ node, depth }) {
     }
     onSelect?.(node.id, node);
   };
+  const handleContextMenu = (e) => {
+    if (onNodeContextMenu) {
+      e.preventDefault();
+      onNodeContextMenu(e, node);
+    }
+  };
   return /* @__PURE__ */ jsxs("div", { "data-react-fancy-tree-node": "", children: [
     /* @__PURE__ */ jsxs(
       "button",
       {
         type: "button",
         onClick: handleClick,
+        onContextMenu: handleContextMenu,
         disabled: node.disabled,
         className: cn(
           "flex w-full items-center gap-1 rounded-md py-0.5 text-left text-[13px] transition-colors",
@@ -10306,6 +10313,7 @@ function TreeNavRoot({
   nodes,
   selectedId,
   onSelect,
+  onNodeContextMenu,
   expandedIds: controlledExpanded,
   defaultExpandedIds,
   onExpandedChange,
@@ -10332,8 +10340,8 @@ function TreeNavRoot({
     [expandedIds, isControlled, onExpandedChange]
   );
   const ctx = useMemo(
-    () => ({ selectedId, onSelect, expandedIds, toggle, indentSize, showIcons }),
-    [selectedId, onSelect, expandedIds, toggle, indentSize, showIcons]
+    () => ({ selectedId, onSelect, onNodeContextMenu, expandedIds, toggle, indentSize, showIcons }),
+    [selectedId, onSelect, onNodeContextMenu, expandedIds, toggle, indentSize, showIcons]
   );
   return /* @__PURE__ */ jsx(TreeNavContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(
     "nav",