@djangocfg/ui-tools 2.1.415 → 2.1.417

package/src/tools/data/Tree/components/TreeRenameInput.tsx

@@ -0,0 +1,114 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+import { cn } from '@djangocfg/ui-core/lib';
+
+import { autoSelectRange } from '../data/renameUtils';
+
+export interface TreeRenameInputProps {
+  initialValue: string;
+  isFolder: boolean;
+  /** Called with the new (trimmed) name when the user presses Enter / blurs. */
+  onCommit: (nextName: string) => void | Promise<unknown>;
+  /** Called when the user presses Escape. */
+  onCancel: () => void;
+  className?: string;
+}
+
+/**
+ * Inline rename input rendered in place of `<TreeLabel>` while a row is
+ * being renamed. Mounts focused with the *base* portion of the name
+ * pre-selected (Finder behaviour — `foo.txt` selects `foo`).
+ *
+ * Behaviour:
+ *   - Enter         → commit
+ *   - Escape        → cancel (no adapter call)
+ *   - blur          → commit (matches Finder; intentional even for empty
+ *                     names — the host validates and re-opens on error)
+ *   - all other keys are stopped from bubbling so Tree's container
+ *     hotkeys (↑↓ delete F2 etc.) don't fire while typing.
+ */
+export function TreeRenameInput({
+  initialValue,
+  isFolder,
+  onCommit,
+  onCancel,
+  className,
+}: TreeRenameInputProps) {
+  const [value, setValue] = useState(initialValue);
+  const inputRef = useRef<HTMLInputElement>(null);
+  // Track whether we already committed/cancelled so the blur handler
+  // doesn't fire a second time after Enter/Escape.
+  const settledRef = useRef(false);
+
+  useEffect(() => {
+    const el = inputRef.current;
+    if (!el) return;
+    el.focus();
+    const [start, end] = autoSelectRange(initialValue, isFolder);
+    // setSelectionRange on a freshly focused input — schedule on next
+    // tick to dodge browser quirks where focus() resets the selection.
+    requestAnimationFrame(() => {
+      try {
+        el.setSelectionRange(start, end);
+      } catch {
+        /* Some input types reject setSelectionRange — safe to ignore. */
+      }
+    });
+    // Run only once on mount.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const commit = () => {
+    if (settledRef.current) return;
+    settledRef.current = true;
+    void onCommit(value);
+  };
+
+  const cancel = () => {
+    if (settledRef.current) return;
+    settledRef.current = true;
+    onCancel();
+  };
+
+  return (
+    <input
+      ref={inputRef}
+      type="text"
+      value={value}
+      // Tree's container hotkeys (delete / arrows / F2 …) must not fire
+      // while the user is typing the new name.
+      onKeyDown={(e) => {
+        e.stopPropagation();
+        if (e.key === 'Enter') {
+          e.preventDefault();
+          commit();
+        } else if (e.key === 'Escape') {
+          e.preventDefault();
+          cancel();
+        }
+      }}
+      onChange={(e) => setValue(e.target.value)}
+      onBlur={commit}
+      // Prevent click/dblclick on the row from re-firing while the input
+      // is mounted (otherwise a focused click commits + re-selects).
+      onClick={(e) => e.stopPropagation()}
+      onDoubleClick={(e) => e.stopPropagation()}
+      onMouseDown={(e) => e.stopPropagation()}
+      // Right-click inside the input should be the native input menu,
+      // not the row's context menu.
+      onContextMenu={(e) => e.stopPropagation()}
+      className={cn(
+        'min-w-0 flex-1 rounded-sm border border-primary/50 bg-background',
+        'px-1 py-0 text-foreground outline-none',
+        'focus:ring-1 focus:ring-primary/40',
+        className,
+      )}
+      style={{
+        // Match the row's font metrics so the input doesn't visibly jolt.
+        fontSize: 'var(--tree-font-size)',
+        height: 'calc(var(--tree-row-height) - 4px)',
+      }}
+    />
+  );
+}

package/src/tools/data/Tree/components/TreeRow.tsx

@@ -1,7 +1,8 @@
 'use client';
 
 import { Loader2 } from 'lucide-react';
-import { memo } from 'react';
+import { memo, useCallback } from 'react';
+import { useDraggable, useDroppable } from '@dnd-kit/core';
 import { cn } from '@djangocfg/ui-core/lib';
 
 import { useTreeContext } from '../context/TreeContext';
@@ -9,9 +10,11 @@ import { radiusClass, rowStateClasses } from '../data/appearance';
 import type { FlatRow, TreeRowRenderProps } from '../types';
 import { TreeChevron } from './TreeChevron';
 import { treeRowDomId } from './TreeContent';
+import { TreeDropIndicator } from './TreeDropIndicator';
 import { TreeIcon } from './TreeIcon';
 import { TreeIndentGuides } from './TreeIndentGuides';
 import { TreeLabel } from './TreeLabel';
+import { TreeRenameInput } from './TreeRenameInput';
 
 export interface TreeRowProps<T> {
   row: FlatRow<T>;
@@ -36,6 +39,7 @@ function TreeRowRaw<T>({ row, className }: TreeRowProps<T>) {
     matchingIds,
     select,
     setSelectedIds,
+    clickSelect,
     toggle,
     setFocus,
     activate,
@@ -44,6 +48,11 @@ function TreeRowRaw<T>({ row, className }: TreeRowProps<T>) {
     renderLabel,
     renderActions,
     renderContextMenu,
+    renamingId,
+    commitRename,
+    cancelRename,
+    clipboard,
+    dnd,
   } = ctx;
 
   const { node, level, isFolder, isExpanded, isLoading, posInSet, setSize } = row;
@@ -51,6 +60,8 @@ function TreeRowRaw<T>({ row, className }: TreeRowProps<T>) {
   const isFocused = focused === node.id;
   const isMatchingSearch = matchingIds.has(node.id);
   const isMultiSelect = ctx.selectionMode === 'multiple';
+  const isCut =
+    clipboard?.kind === 'cut' && clipboard.ids.includes(node.id);
 
   const slot: TreeRowRenderProps<T> = {
     node,
@@ -68,33 +79,82 @@ function TreeRowRaw<T>({ row, className }: TreeRowProps<T>) {
   //   single-click          → click activates {preview:false}
   //   double-click          → click only selects; dblclick activates {preview:false}
   //   single-click-preview  → click activates {preview:true}; dblclick activates {preview:false}
+  const isRenaming = renamingId === node.id;
+  const isDragging = dnd.draggingIds.has(node.id);
+  const dropTarget = dnd.dropTarget;
+  const isDropTarget = dropTarget?.id === node.id;
+  const dropPosition = isDropTarget ? dropTarget!.position : null;
+
+  // ─── DnD wiring ──────────────────────────────────────────────────
+  // Hooks are called unconditionally so we don't violate rules-of-
+  // hooks; the `disabled` flag short-circuits @dnd-kit when DnD is off
+  // or the row is in inline rename.
+  //
+  // Drop-zone resolution (before/inside/after) is centralised in
+  // `<TreeDndProvider>` via `onDragMove` — rows don't need a
+  // `onPointerMove` of their own. Saves a listener × N rows.
+  const dndDisabled = !dnd.active || isRenaming || node.disabled;
+  const draggable = useDraggable({ id: node.id, disabled: dndDisabled });
+  const droppable = useDroppable({ id: node.id, disabled: dndDisabled });
+
+  const setRowEl = useCallback(
+    (el: HTMLDivElement | null) => {
+      draggable.setNodeRef(el);
+      droppable.setNodeRef(el);
+    },
+    [draggable, droppable],
+  );
+
+  const isAllowedDrop =
+    dropPosition && !isDragging
+      ? dnd.isAllowedDrop(node, dropPosition)
+      : true;
   const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
-    if (node.disabled) return;
+    if (node.disabled || isRenaming) return;
     setFocus(node.id);
-    // Multi-select: a plain click replaces the selection; ⌘/Ctrl-click
-    // toggles the clicked row (classic file-manager / VSCode behaviour).
-    if (isMultiSelect && !(e.metaKey || e.ctrlKey)) {
-      setSelectedIds([node.id]);
+    // Multi-select: full Finder/Explorer semantics — plain replaces, meta
+    // toggles, shift extends range from anchor, shift+meta unions range.
+    // Single-select: clickSelect collapses to {id}. None: no-op.
+    if (isMultiSelect) {
+      clickSelect(node.id, { shift: e.shiftKey, meta: e.metaKey || e.ctrlKey });
     } else {
       select(node.id);
     }
     if (isFolder) {
+      // Don't toggle on shift/meta clicks — those are pure selection edits.
+      if (e.shiftKey || e.metaKey || e.ctrlKey) return;
       toggle(node.id);
     } else if (activationMode === 'single-click') {
+      // Selection-only modifier clicks should not activate the leaf.
+      if (e.shiftKey || e.metaKey || e.ctrlKey) return;
       activate(node, { preview: false });
     } else if (activationMode === 'single-click-preview') {
+      if (e.shiftKey || e.metaKey || e.ctrlKey) return;
       activate(node, { preview: true });
     }
   };
 
   const handleDoubleClick = () => {
-    if (node.disabled) return;
+    if (node.disabled || isRenaming) return;
     if (isFolder) return;
     activate(node, { preview: false });
   };
 
+  // Finder/Explorer semantics: right-click on an unselected row switches
+  // selection to that single row (so menu actions apply to it). Right-
+  // click on a row already in the selection leaves the multi-selection
+  // intact (so destructive bulk actions stay safe).
+  const handleContextMenu = () => {
+    if (node.disabled || isRenaming) return;
+    setFocus(node.id);
+    if (!isSelected) {
+      setSelectedIds([node.id]);
+    }
+  };
+
   const trigger = (
     <div
+      ref={dnd.active ? setRowEl : undefined}
       id={treeRowDomId(node.id)}
       role="treeitem"
       aria-level={level + 1}
@@ -107,6 +167,8 @@ function TreeRowRaw<T>({ row, className }: TreeRowProps<T>) {
       data-id={node.id}
       data-activation-mode={activationMode}
       data-selected={isSelected ? 'true' : undefined}
+      data-clipboard={isCut ? 'cut' : undefined}
+      data-dragging={isDragging ? 'true' : undefined}
       data-focused={isFocused && !isSelected ? 'true' : undefined}
       data-folder={isFolder || undefined}
       data-expanded={isExpanded || undefined}
@@ -116,8 +178,22 @@ function TreeRowRaw<T>({ row, className }: TreeRowProps<T>) {
         height: 'var(--tree-row-height)',
         gap: 'var(--tree-gap)',
       }}
+      {...(dnd.active ? draggable.listeners : {})}
+      {...(dnd.active ? draggable.attributes : {})}
+      // Block the browser's native "click moves focus into the
+      // focusable target" behaviour. Tree owns its own focus model
+      // (arrow keys drive `setFocus`, click only selects + activates),
+      // and stealing focus on every click stops downstream auto-focus
+      // patterns from working — e.g. clicking a file in a tree-plus-
+      // preview layout would let the row grab focus after the preview
+      // viewer tries to take it. The synthetic `onClick` below still
+      // fires; only the focus side-effect of mousedown is suppressed.
+      onMouseDown={(e) => {
+        if (e.button === 0) e.preventDefault();
+      }}
       onClick={handleClick}
       onDoubleClick={handleDoubleClick}
+      onContextMenu={handleContextMenu}
       onFocus={() => setFocus(node.id)}
       className={cn(
         'group/row relative flex w-full select-none items-center pr-2 text-left',
@@ -127,6 +203,8 @@ function TreeRowRaw<T>({ row, className }: TreeRowProps<T>) {
         rowStateClasses(appearance),
         'focus-visible:ring-1 focus-visible:ring-ring/50',
         isMatchingSearch && 'ring-1 ring-primary/30',
+        isCut && 'opacity-60',
+        isDragging && 'opacity-40',
         node.disabled && 'opacity-50',
         className,
       )}
@@ -142,6 +220,16 @@ function TreeRowRaw<T>({ row, className }: TreeRowProps<T>) {
         />
       ) : null}
 
+      {/* DnD drop indicator — top/bottom line for sibling reorder,
+          fill for "drop into folder". */}
+      {dropPosition && !isDragging ? (
+        <TreeDropIndicator
+          position={dropPosition}
+          indent={6 + level * appearance.indent}
+          invalid={!isAllowedDrop}
+        />
+      ) : null}
+
       {showIndentGuides && level > 0 ? (
         <TreeIndentGuides level={level} indent={appearance.indent} />
       ) : null}
@@ -165,7 +253,14 @@ function TreeRowRaw<T>({ row, className }: TreeRowProps<T>) {
         className="flex min-w-0 flex-1 items-center"
         style={{ gap: 'var(--tree-gap)' }}
       >
-        {renderLabel ? (
+        {renamingId === node.id ? (
+          <TreeRenameInput
+            initialValue={getItemName(node)}
+            isFolder={isFolder}
+            onCommit={(next) => commitRename(node.id, next)}
+            onCancel={cancelRename}
+          />
+        ) : renderLabel ? (
           renderLabel(slot)
         ) : (
           <TreeLabel isMatchingSearch={isMatchingSearch}>{getItemName(node)}</TreeLabel>

package/src/tools/data/Tree/components/index.ts

@@ -20,3 +20,9 @@ export { TreeError } from './TreeError';
 export type { TreeErrorProps } from './TreeError';
 export { TreeIndentGuides } from './TreeIndentGuides';
 export type { TreeIndentGuidesProps } from './TreeIndentGuides';
+export { TreeRenameInput } from './TreeRenameInput';
+export type { TreeRenameInputProps } from './TreeRenameInput';
+export { TreeDropIndicator } from './TreeDropIndicator';
+export type { TreeDropIndicatorProps } from './TreeDropIndicator';
+export { TreeEmptyArea } from './TreeEmptyArea';
+export type { TreeEmptyAreaProps } from './TreeEmptyArea';