@djangocfg/ui-tools 2.1.429 → 2.1.431

package/dist/tree/index.cjs

@@ -141,6 +141,20 @@ var DENSITY_PRESETS = {
   cozy: { rowHeight: 28, iconSize: 16, fontSize: 13, gap: 8 },
   comfortable: { rowHeight: 32, iconSize: 16, fontSize: 14, gap: 8 }
 };
+var VARIANT_DEFAULTS = {
+  explorer: {
+    hideLeafIcons: false,
+    hideFolderIcons: false,
+    rowSizing: "fixed",
+    showActiveIndicator: true
+  },
+  list: {
+    hideLeafIcons: true,
+    hideFolderIcons: true,
+    rowSizing: "auto",
+    showActiveIndicator: false
+  }
+};
 var DEFAULT_TREE_APPEARANCE = {
   density: "cozy",
   ...DENSITY_PRESETS.cozy,
@@ -149,12 +163,14 @@ var DEFAULT_TREE_APPEARANCE = {
   accent: "default",
   radius: "sm",
   indentGuideOpacity: 0.4,
-  showActiveIndicator: true
+  ...VARIANT_DEFAULTS.explorer
 };
 function resolveAppearance(input, outerIndent) {
   if (!input && outerIndent === void 0) return DEFAULT_TREE_APPEARANCE;
   const density = input?.density ?? "cozy";
   const preset = DENSITY_PRESETS[density];
+  const variant = input?.variant ?? "explorer";
+  const v = VARIANT_DEFAULTS[variant];
   return {
     density,
     rowHeight: input?.rowHeight ?? preset.rowHeight,
@@ -166,7 +182,10 @@ function resolveAppearance(input, outerIndent) {
     accent: input?.accent ?? DEFAULT_TREE_APPEARANCE.accent,
     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
   };
 }
 chunkPK6SKIKE_cjs.__name(resolveAppearance, "resolveAppearance");
@@ -1071,10 +1090,15 @@ function useResolvedMenu(opts) {
   ]);
 }
 chunkPK6SKIKE_cjs.__name(useResolvedMenu, "useResolvedMenu");
-function renderItemsAsContextMenu(rowProps, items, trigger) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(components.ContextMenu, { children: [
+function RowContextMenu({
+  rowProps,
+  items,
+  trigger
+}) {
+  const [open, setOpen] = React.useState(false);
+  return /* @__PURE__ */ jsxRuntime.jsxs(components.ContextMenu, { onOpenChange: setOpen, children: [
     /* @__PURE__ */ jsxRuntime.jsx(components.ContextMenuTrigger, { asChild: true, children: trigger }),
-    /* @__PURE__ */ jsxRuntime.jsx(components.ContextMenuContent, { children: items.map((item, idx) => {
+    open ? /* @__PURE__ */ jsxRuntime.jsx(components.ContextMenuContent, { children: items.map((item, idx) => {
       if (item === "separator") {
         return /* @__PURE__ */ jsxRuntime.jsx(components.ContextMenuSeparator, {}, `sep-${idx}`);
       }
@@ -1093,9 +1117,13 @@ function renderItemsAsContextMenu(rowProps, items, trigger) {
         },
         item.id
       );
-    }) })
+    }) }) : null
   ] });
 }
+chunkPK6SKIKE_cjs.__name(RowContextMenu, "RowContextMenu");
+function renderItemsAsContextMenu(rowProps, items, trigger) {
+  return /* @__PURE__ */ jsxRuntime.jsx(RowContextMenu, { rowProps, items, trigger });
+}
 chunkPK6SKIKE_cjs.__name(renderItemsAsContextMenu, "renderItemsAsContextMenu");
 function tidyMenuItems(items) {
   const out = [];
@@ -1990,7 +2018,14 @@ function TreeRowRaw({ row, className }) {
       tabIndex: -1,
       style: {
         paddingLeft: 6 + level * appearance.indent,
-        height: "var(--tree-row-height)",
+        // `auto` sizing lets a multi-line label (e.g. title + meta in a
+        // chat-history list) grow the row instead of overflowing a fixed
+        // height. `fixed` keeps the classic single-line explorer row.
+        ...appearance.rowSizing === "auto" ? {
+          minHeight: "var(--tree-row-height)",
+          paddingTop: 4,
+          paddingBottom: 4
+        } : { height: "var(--tree-row-height)" },
         gap: "var(--tree-gap)"
       },
       ...dnd.active ? draggable.listeners : {},
@@ -2041,7 +2076,7 @@ function TreeRowRaw({ row, className }) {
             style: { width: "var(--tree-icon-size)", height: "var(--tree-icon-size)" },
             className: "shrink-0 animate-spin text-muted-foreground/70"
           }
-        ) : renderIcon ? renderIcon(slot) : /* @__PURE__ */ jsxRuntime.jsx(TreeIcon, { isFolder, isExpanded }),
+        ) : renderIcon ? renderIcon(slot) : (isFolder ? appearance.hideFolderIcons : appearance.hideLeafIcons) ? null : /* @__PURE__ */ jsxRuntime.jsx(TreeIcon, { isFolder, isExpanded }),
         /* @__PURE__ */ jsxRuntime.jsx(
           "span",
           {