@particle-academy/react-fancy 1.8.1 → 1.9.0

package/dist/index.d.cts

@@ -757,7 +757,7 @@ interface DropdownSeparatorProps {
     className?: string;
 }
 
-declare function DropdownTrigger({ children }: DropdownTriggerProps): ReactElement<Record<string, unknown>, string | react.JSXElementConstructor<any>>;
+declare function DropdownTrigger({ children }: DropdownTriggerProps): react_jsx_runtime.JSX.Element;
 declare namespace DropdownTrigger {
     var displayName: string;
 }
@@ -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

@@ -757,7 +757,7 @@ interface DropdownSeparatorProps {
     className?: string;
 }
 
-declare function DropdownTrigger({ children }: DropdownTriggerProps): ReactElement<Record<string, unknown>, string | react.JSXElementConstructor<any>>;
+declare function DropdownTrigger({ children }: DropdownTriggerProps): react_jsx_runtime.JSX.Element;
 declare namespace DropdownTrigger {
     var displayName: string;
 }
@@ -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

@@ -5007,12 +5007,18 @@ function useDropdown() {
 }
 function DropdownTrigger({ children }) {
   const { setOpen, open, anchorRef } = useDropdown();
-  return cloneElement(children, {
-    ref: anchorRef,
-    onClick: () => setOpen(!open),
-    "aria-expanded": open,
-    "aria-haspopup": "menu"
-  });
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ref: anchorRef,
+      "data-react-fancy-dropdown-trigger": "",
+      className: "inline-flex",
+      onClick: () => setOpen(!open),
+      "aria-expanded": open,
+      "aria-haspopup": "menu",
+      children
+    }
+  );
 }
 DropdownTrigger.displayName = "DropdownTrigger";
 function useAnimation({
@@ -10249,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;
@@ -10261,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",
@@ -10300,6 +10313,7 @@ function TreeNavRoot({
   nodes,
   selectedId,
   onSelect,
+  onNodeContextMenu,
   expandedIds: controlledExpanded,
   defaultExpandedIds,
   onExpandedChange,
@@ -10326,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",