@particle-academy/react-fancy 4.14.0 → 4.14.1

package/dist/index.d.cts

@@ -2638,6 +2638,17 @@ interface TreeNavProps {
     indentSize?: number;
     /** Show file/folder icons (default: true) */
     showIcons?: boolean;
+    /**
+     * Cursor shown on hover over a draggable node.
+     * - `"none"` (default): the normal clickable cursor — no move affordance on
+     *   mere hover. A closed-hand `grabbing` cursor still appears while a drag is
+     *   actually happening. This suits click-to-select/open trees (file/nav
+     *   trees), where an always-on grab cursor wrongly implies move-first intent.
+     * - `"grab"`: show the open-hand `grab` cursor on hover. Opt in when the whole
+     *   row is genuinely a drag handle and reordering is the primary interaction.
+     * @default "none"
+     */
+    dragCursor?: "grab" | "none";
     /** Custom className */
     className?: string;
 }
@@ -2650,6 +2661,7 @@ interface TreeNavContextValue {
     indentSize: number;
     showIcons: boolean;
     draggable: boolean;
+    dragCursor: "grab" | "none";
     dragState: DragState;
     setDragState: (state: DragState) => void;
     onNodeMove?: (sourceId: string, targetId: string, position: DropPosition) => void;
@@ -2669,7 +2681,7 @@ declare namespace TreeNode {
     var displayName: string;
 }
 
-declare function TreeNavRoot({ nodes, selectedId, onSelect, onNodeContextMenu, draggable, onNodeMove, acceptExternalDrops, onExternalDrop, expandedIds: controlledExpanded, defaultExpandedIds, onExpandedChange, defaultExpandAll, indentSize, showIcons, className, }: TreeNavProps): react.JSX.Element;
+declare function TreeNavRoot({ nodes, selectedId, onSelect, onNodeContextMenu, draggable, onNodeMove, acceptExternalDrops, onExternalDrop, expandedIds: controlledExpanded, defaultExpandedIds, onExpandedChange, defaultExpandAll, indentSize, showIcons, dragCursor, className, }: TreeNavProps): react.JSX.Element;
 declare namespace TreeNavRoot {
     var displayName: string;
 }

package/dist/index.d.ts

@@ -2638,6 +2638,17 @@ interface TreeNavProps {
     indentSize?: number;
     /** Show file/folder icons (default: true) */
     showIcons?: boolean;
+    /**
+     * Cursor shown on hover over a draggable node.
+     * - `"none"` (default): the normal clickable cursor — no move affordance on
+     *   mere hover. A closed-hand `grabbing` cursor still appears while a drag is
+     *   actually happening. This suits click-to-select/open trees (file/nav
+     *   trees), where an always-on grab cursor wrongly implies move-first intent.
+     * - `"grab"`: show the open-hand `grab` cursor on hover. Opt in when the whole
+     *   row is genuinely a drag handle and reordering is the primary interaction.
+     * @default "none"
+     */
+    dragCursor?: "grab" | "none";
     /** Custom className */
     className?: string;
 }
@@ -2650,6 +2661,7 @@ interface TreeNavContextValue {
     indentSize: number;
     showIcons: boolean;
     draggable: boolean;
+    dragCursor: "grab" | "none";
     dragState: DragState;
     setDragState: (state: DragState) => void;
     onNodeMove?: (sourceId: string, targetId: string, position: DropPosition) => void;
@@ -2669,7 +2681,7 @@ declare namespace TreeNode {
     var displayName: string;
 }
 
-declare function TreeNavRoot({ nodes, selectedId, onSelect, onNodeContextMenu, draggable, onNodeMove, acceptExternalDrops, onExternalDrop, expandedIds: controlledExpanded, defaultExpandedIds, onExpandedChange, defaultExpandAll, indentSize, showIcons, className, }: TreeNavProps): react.JSX.Element;
+declare function TreeNavRoot({ nodes, selectedId, onSelect, onNodeContextMenu, draggable, onNodeMove, acceptExternalDrops, onExternalDrop, expandedIds: controlledExpanded, defaultExpandedIds, onExpandedChange, defaultExpandAll, indentSize, showIcons, dragCursor, className, }: TreeNavProps): react.JSX.Element;
 declare namespace TreeNavRoot {
     var displayName: string;
 }

package/dist/index.js

@@ -12961,6 +12961,7 @@ function TreeNode({ node, depth }) {
     indentSize,
     showIcons,
     draggable,
+    dragCursor,
     dragState,
     setDragState,
     onNodeMove,
@@ -13091,7 +13092,12 @@ function TreeNode({ node, depth }) {
               isSelected ? "bg-blue-500/15 text-blue-600 dark:text-blue-400" : "text-zinc-700 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-zinc-800",
               node.disabled && "pointer-events-none opacity-40",
               isDragging && "opacity-50",
-              canDrag && "cursor-grab active:cursor-grabbing",
+              // Grab affordance. By default (`dragCursor="none"`) the row keeps its
+              // normal click cursor on hover — no open-hand "move me" cursor before
+              // any drag — and only shows the closed-hand `grabbing` cursor while a
+              // drag is actually underway (mousedown/drag). `dragCursor="grab"` opts
+              // back into the always-on grab cursor for whole-row drag handles (#14).
+              canDrag && (dragCursor === "grab" ? "cursor-grab active:cursor-grabbing" : "active:cursor-grabbing"),
               isDropTarget && dropPosition === "inside" && "bg-blue-500/10 ring-1 ring-blue-500/30 ring-inset"
             ),
             style: { paddingLeft },
@@ -13147,6 +13153,7 @@ function TreeNavRoot({
   defaultExpandAll = false,
   indentSize = 16,
   showIcons = true,
+  dragCursor = "none",
   className
 }) {
   const [internalExpanded, setInternalExpanded] = useState(() => {
@@ -13191,6 +13198,7 @@ function TreeNavRoot({
       indentSize,
       showIcons,
       draggable,
+      dragCursor,
       dragState,
       setDragState,
       onNodeMove,
@@ -13208,6 +13216,7 @@ function TreeNavRoot({
       indentSize,
       showIcons,
       draggable,
+      dragCursor,
       dragState,
       onNodeMove,
       acceptExternalDrops,