@djangocfg/ui-tools 2.1.429 → 2.1.431

package/src/tools/data/Tree/context/menu/render.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { useState } from 'react';
 import {
   ContextMenu,
   ContextMenuContent,
@@ -14,6 +15,60 @@ import type {
   TreeRowRenderProps,
 } from '../../types';
 
+interface RowContextMenuProps<T> {
+  rowProps: TreeRowRenderProps<T>;
+  items: TreeContextMenuItem<T>[];
+  trigger: React.ReactNode;
+}
+
+/**
+ * Per-row context menu.
+ *
+ * PERF: every visible row wraps its trigger in a `<ContextMenu>`, so a
+ * large tree mounts hundreds of these. Building the full
+ * `<ContextMenuContent>` item subtree for each of them on every render is
+ * what made right-click feel laggy (the selection change on right-click
+ * re-renders all rows, each rebuilding its menu body). We now render the
+ * content body ONLY while this row's menu is actually open — closed rows
+ * cost just the lightweight `ContextMenu` + `Trigger` shell.
+ */
+function RowContextMenu<T>({
+  rowProps,
+  items,
+  trigger,
+}: RowContextMenuProps<T>) {
+  const [open, setOpen] = useState(false);
+  return (
+    <ContextMenu onOpenChange={setOpen}>
+      <ContextMenuTrigger asChild>{trigger}</ContextMenuTrigger>
+      {open ? (
+        <ContextMenuContent>
+          {items.map((item, idx) => {
+            if (item === 'separator') {
+              return <ContextMenuSeparator key={`sep-${idx}`} />;
+            }
+            const Icon = item.icon;
+            return (
+              <ContextMenuItem
+                key={item.id}
+                disabled={item.disabled}
+                variant={item.destructive ? 'destructive' : undefined}
+                onSelect={() => item.onSelect(rowProps)}
+              >
+                {Icon ? <Icon /> : null}
+                {item.label}
+                {item.shortcut ? (
+                  <ContextMenuShortcut>{item.shortcut}</ContextMenuShortcut>
+                ) : null}
+              </ContextMenuItem>
+            );
+          })}
+        </ContextMenuContent>
+      ) : null}
+    </ContextMenu>
+  );
+}
+
 /**
  * Render an array of declarative menu items as a themed `<ContextMenu>`
  * wrapped around the supplied trigger element. Pure presentational layer
@@ -24,33 +79,7 @@ export function renderItemsAsContextMenu<T>(
   items: TreeContextMenuItem<T>[],
   trigger: React.ReactNode,
 ): React.ReactNode {
-  return (
-    <ContextMenu>
-      <ContextMenuTrigger asChild>{trigger}</ContextMenuTrigger>
-      <ContextMenuContent>
-        {items.map((item, idx) => {
-          if (item === 'separator') {
-            return <ContextMenuSeparator key={`sep-${idx}`} />;
-          }
-          const Icon = item.icon;
-          return (
-            <ContextMenuItem
-              key={item.id}
-              disabled={item.disabled}
-              variant={item.destructive ? 'destructive' : undefined}
-              onSelect={() => item.onSelect(rowProps)}
-            >
-              {Icon ? <Icon /> : null}
-              {item.label}
-              {item.shortcut ? (
-                <ContextMenuShortcut>{item.shortcut}</ContextMenuShortcut>
-              ) : null}
-            </ContextMenuItem>
-          );
-        })}
-      </ContextMenuContent>
-    </ContextMenu>
-  );
+  return <RowContextMenu rowProps={rowProps} items={items} trigger={trigger} />;
 }
 
 /**

package/src/tools/data/Tree/data/appearance.ts

@@ -6,6 +6,20 @@ export type TreeDensity = 'compact' | 'cozy' | 'comfortable';
 export type TreeAccentIntensity = 'subtle' | 'default' | 'strong';
 export type TreeRadius = 'none' | 'sm' | 'md';
 
+/**
+ * High-level look. Sets sensible defaults for icons / row sizing / the
+ * active indicator; any individual `TreeAppearance` field still overrides.
+ *
+ *  - `'explorer'` (default) — classic file/folder tree: leaf + folder
+ *    icons, fixed single-line rows, VSCode active-bar.
+ *  - `'list'` — macOS-sidebar / chat-history look: no icons (chevron
+ *    only on groups), auto-height rows (multi-line label friendly), quiet
+ *    selection (no active-bar).
+ */
+export type TreeVariant = 'explorer' | 'list';
+
+export type TreeRowSizing = 'fixed' | 'auto';
+
 /**
  * Cosmetic configuration. Every field is optional; missing values fall
  * back to the `cozy` preset (a comfortable VSCode-Explorer-like density).
@@ -38,6 +52,21 @@ export interface TreeAppearance {
    * Mimics the VSCode active-tab indicator. Default: `true`.
    */
   showActiveIndicator?: boolean;
+  /**
+   * High-level look. Default: `'explorer'`. Sets defaults for the three
+   * fields below; pass any of them explicitly to override the variant.
+   */
+  variant?: TreeVariant;
+  /** Hide per-leaf icons (chevron + label only). Variant default. */
+  hideLeafIcons?: boolean;
+  /** Hide folder icons too (chevron stays). Variant default. */
+  hideFolderIcons?: boolean;
+  /**
+   * `'fixed'` — every row is exactly `rowHeight` (single-line explorer).
+   * `'auto'` — `rowHeight` is a *minimum*; rows grow to fit a multi-line
+   * label (title + meta). Variant default.
+   */
+  rowSizing?: TreeRowSizing;
 }
 
 export interface ResolvedAppearance {
@@ -52,6 +81,9 @@ export interface ResolvedAppearance {
   radius: TreeRadius;
   indentGuideOpacity: number;
   showActiveIndicator: boolean;
+  hideLeafIcons: boolean;
+  hideFolderIcons: boolean;
+  rowSizing: TreeRowSizing;
 }
 
 const DENSITY_PRESETS: Record<
@@ -63,6 +95,31 @@ const DENSITY_PRESETS: Record<
   comfortable: { rowHeight: 32, iconSize: 16, fontSize: 14, gap: 8 },
 };
 
+/**
+ * Per-variant defaults for the icon / sizing / indicator fields. The
+ * `'list'` variant is the macOS-sidebar / chat-history look.
+ */
+const VARIANT_DEFAULTS: Record<
+  TreeVariant,
+  Pick<
+    ResolvedAppearance,
+    'hideLeafIcons' | 'hideFolderIcons' | 'rowSizing' | 'showActiveIndicator'
+  >
+> = {
+  explorer: {
+    hideLeafIcons: false,
+    hideFolderIcons: false,
+    rowSizing: 'fixed',
+    showActiveIndicator: true,
+  },
+  list: {
+    hideLeafIcons: true,
+    hideFolderIcons: true,
+    rowSizing: 'auto',
+    showActiveIndicator: false,
+  },
+};
+
 export const DEFAULT_TREE_APPEARANCE: ResolvedAppearance = {
   density: 'cozy',
   ...DENSITY_PRESETS.cozy,
@@ -71,7 +128,7 @@ export const DEFAULT_TREE_APPEARANCE: ResolvedAppearance = {
   accent: 'default',
   radius: 'sm',
   indentGuideOpacity: 0.4,
-  showActiveIndicator: true,
+  ...VARIANT_DEFAULTS.explorer,
 };
 
 /**
@@ -88,6 +145,9 @@ export function resolveAppearance(
 
   const density: TreeDensity = input?.density ?? 'cozy';
   const preset = DENSITY_PRESETS[density];
+  // Variant sets the icon/sizing/indicator defaults; explicit fields win.
+  const variant: TreeVariant = input?.variant ?? 'explorer';
+  const v = VARIANT_DEFAULTS[variant];
 
   return {
     density,
@@ -101,8 +161,10 @@ export function resolveAppearance(
     radius: input?.radius ?? DEFAULT_TREE_APPEARANCE.radius,
     indentGuideOpacity:
       input?.indentGuideOpacity ?? DEFAULT_TREE_APPEARANCE.indentGuideOpacity,
-    showActiveIndicator:
-      input?.showActiveIndicator ?? DEFAULT_TREE_APPEARANCE.showActiveIndicator,
+    showActiveIndicator: input?.showActiveIndicator ?? v.showActiveIndicator,
+    hideLeafIcons: input?.hideLeafIcons ?? v.hideLeafIcons,
+    hideFolderIcons: input?.hideFolderIcons ?? v.hideFolderIcons,
+    rowSizing: input?.rowSizing ?? v.rowSizing,
   };
 }
 

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

@@ -40,4 +40,6 @@ export type {
   TreeDensity,
   TreeAccentIntensity,
   TreeRadius,
+  TreeVariant,
+  TreeRowSizing,
 } from './appearance';

package/src/tools/data/Tree/index.tsx

@@ -101,6 +101,8 @@ export type {
   TreeDensity,
   TreeAccentIntensity,
   TreeRadius,
+  TreeVariant,
+  TreeRowSizing,
 } from './data';
 
 export { DEFAULT_TREE_LABELS } from './types';