@djangocfg/ui-tools 2.1.315 → 2.1.317

package/dist/TreeRoot-R6XVHYQK.mjs

@@ -0,0 +1,4 @@
+export { TreeRoot, TreeRoot_default as default } from './chunk-NTJL2SXK.mjs';
+import './chunk-CGILA3WO.mjs';
+//# sourceMappingURL=TreeRoot-R6XVHYQK.mjs.map
+//# sourceMappingURL=TreeRoot-R6XVHYQK.mjs.map

package/dist/{TreeRoot-DO33TIS5.mjs.map → TreeRoot-R6XVHYQK.mjs.map}

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"TreeRoot-DO33TIS5.mjs"}
+{"version":3,"sources":[],"names":[],"mappings":"","file":"TreeRoot-R6XVHYQK.mjs"}

package/dist/TreeRoot-RAMQSBMO.cjs

@@ -0,0 +1,19 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var chunk44ZTWYAF_cjs = require('./chunk-44ZTWYAF.cjs');
+require('./chunk-WGEGR3DF.cjs');
+
+
+
+Object.defineProperty(exports, "TreeRoot", {
+  enumerable: true,
+  get: function () { return chunk44ZTWYAF_cjs.TreeRoot; }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () { return chunk44ZTWYAF_cjs.TreeRoot_default; }
+});
+//# sourceMappingURL=TreeRoot-RAMQSBMO.cjs.map
+//# sourceMappingURL=TreeRoot-RAMQSBMO.cjs.map

package/dist/{TreeRoot-NJOZ2DMV.cjs.map → TreeRoot-RAMQSBMO.cjs.map}

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"TreeRoot-NJOZ2DMV.cjs"}
+{"version":3,"sources":[],"names":[],"mappings":"","file":"TreeRoot-RAMQSBMO.cjs"}

package/dist/{chunk-MA552EWC.cjs → chunk-44ZTWYAF.cjs}

@@ -5,6 +5,7 @@ var React = require('react');
 var lib = require('@djangocfg/ui-core/lib');
 var jsxRuntime = require('react/jsx-runtime');
 var lucideReact = require('lucide-react');
+var hooks = require('@djangocfg/ui-core/hooks');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -293,6 +294,7 @@ function TreeProvider(props) {
     getItemName,
     loadChildren,
     selectionMode = "single",
+    activationMode = "single-click",
     initialExpandedIds,
     initialSelectedIds,
     indent,
@@ -488,7 +490,7 @@ function TreeProvider(props) {
     );
   }, [loadChildren, state.expanded, nodeById, fetchChildren]);
   const activate = React.useCallback(
-    (node) => onActivateRef.current?.(node),
+    (node, opts = { preview: false }) => onActivateRef.current?.(node, opts),
     []
   );
   const value = React.useMemo(
@@ -516,6 +518,7 @@ function TreeProvider(props) {
       appearance: resolvedAppearance,
       indent: resolvedAppearance.indent,
       selectionMode,
+      activationMode,
       enableSearch,
       showIndentGuides,
       getItemName,
@@ -547,6 +550,7 @@ function TreeProvider(props) {
       labels,
       resolvedAppearance,
       selectionMode,
+      activationMode,
       enableSearch,
       showIndentGuides,
       getItemName,
@@ -645,6 +649,7 @@ function TreeRow({ row, className }) {
   const ctx = useTreeContext();
   const {
     appearance,
+    activationMode,
     showIndentGuides,
     selected,
     focused,
@@ -673,28 +678,24 @@ function TreeRow({ row, className }) {
     isLoading,
     isMatchingSearch
   };
-  const handleActivate = /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(() => {
+  const handleClick = /* @__PURE__ */ chunkWGEGR3DF_cjs.__name((e) => {
     if (node.disabled) return;
     setFocus(node.id);
     select(node.id);
-    if (isFolder) toggle(node.id);
-    else activate(node);
-  }, "handleActivate");
-  const handleClick = /* @__PURE__ */ chunkWGEGR3DF_cjs.__name((e) => {
-    handleActivate();
+    if (isFolder) {
+      toggle(node.id);
+    } else if (activationMode === "single-click") {
+      activate(node, { preview: false });
+    } else if (activationMode === "single-click-preview") {
+      activate(node, { preview: true });
+    }
     e.currentTarget.scrollIntoView?.({ block: "nearest" });
   }, "handleClick");
   const handleDoubleClick = /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(() => {
     if (node.disabled) return;
-    if (!isFolder) activate(node);
+    if (isFolder) return;
+    activate(node, { preview: false });
   }, "handleDoubleClick");
-  const handleKeyDown = /* @__PURE__ */ chunkWGEGR3DF_cjs.__name((e) => {
-    if (node.disabled) return;
-    if (e.key === "Enter" || e.key === " ") {
-      e.preventDefault();
-      handleActivate();
-    }
-  }, "handleKeyDown");
   const trigger = /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -706,6 +707,7 @@ function TreeRow({ row, className }) {
       "aria-disabled": node.disabled || void 0,
       "data-tree-row": "",
       "data-id": node.id,
+      "data-activation-mode": activationMode,
       "data-selected": isSelected ? "true" : void 0,
       "data-focused": isFocused && !isSelected ? "true" : void 0,
       "data-folder": isFolder || void 0,
@@ -718,7 +720,6 @@ function TreeRow({ row, className }) {
       },
       onClick: handleClick,
       onDoubleClick: handleDoubleClick,
-      onKeyDown: handleKeyDown,
       onFocus: () => setFocus(node.id),
       className: lib.cn(
         "group/row relative flex w-full select-none items-center pr-2 text-left",
@@ -963,7 +964,6 @@ function TreeSearchInput({ className, showMatches = true }) {
 }
 chunkWGEGR3DF_cjs.__name(TreeSearchInput, "TreeSearchInput");
 function useTreeKeyboard({
-  containerRef,
   rows,
   focusedId,
   enabled = true,
@@ -974,95 +974,115 @@ function useTreeKeyboard({
   onCollapse,
   onClearSelection
 }) {
-  React.useEffect(() => {
-    if (!enabled) return;
-    const target = containerRef.current;
-    if (!target) return;
-    const handler = /* @__PURE__ */ chunkWGEGR3DF_cjs.__name((e) => {
-      const tag = e.target?.tagName;
-      if (tag === "INPUT" || tag === "TEXTAREA") return;
-      if (e.target?.isContentEditable) return;
-      if (rows.length === 0) return;
-      const currentIndex = focusedId ? rows.findIndex((r) => r.node.id === focusedId) : -1;
-      const current = currentIndex >= 0 ? rows[currentIndex] : null;
-      switch (e.key) {
-        case "ArrowDown": {
-          e.preventDefault();
-          const next = rows[Math.min(currentIndex + 1, rows.length - 1)] ?? rows[0];
-          onFocus(next.node.id);
-          return;
-        }
-        case "ArrowUp": {
-          e.preventDefault();
-          const prev = rows[Math.max(currentIndex - 1, 0)] ?? rows[0];
-          onFocus(prev.node.id);
-          return;
-        }
-        case "Home": {
-          e.preventDefault();
-          onFocus(rows[0].node.id);
-          return;
-        }
-        case "End": {
-          e.preventDefault();
-          onFocus(rows[rows.length - 1].node.id);
-          return;
-        }
-        case "ArrowRight": {
-          if (!current) return;
-          e.preventDefault();
-          if (current.isFolder && !current.isExpanded) {
-            onExpand(current.node.id);
-          } else if (current.isFolder && current.isExpanded) {
-            const next = rows[currentIndex + 1];
-            if (next) onFocus(next.node.id);
-          }
-          return;
-        }
-        case "ArrowLeft": {
-          if (!current) return;
-          e.preventDefault();
-          if (current.isFolder && current.isExpanded) {
-            onCollapse(current.node.id);
-          } else if (current.parentId) {
-            onFocus(current.parentId);
-          }
-          return;
-        }
-        case "Enter":
-        case " ": {
-          if (!current) return;
-          e.preventDefault();
-          onSelect(current.node.id);
-          if (current.isFolder) {
-            if (current.isExpanded) onCollapse(current.node.id);
-            else onExpand(current.node.id);
-          } else {
-            onActivate(current.node.id);
-          }
-          return;
-        }
-        case "Escape": {
-          e.preventDefault();
-          onClearSelection();
-          return;
-        }
+  const rowsRef = React.useRef(rows);
+  const focusedIdRef = React.useRef(focusedId);
+  rowsRef.current = rows;
+  focusedIdRef.current = focusedId;
+  const getCurrent = /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(() => {
+    const r = rowsRef.current;
+    const id = focusedIdRef.current;
+    const idx = id ? r.findIndex((x) => x.node.id === id) : -1;
+    return { rows: r, idx, current: idx >= 0 ? r[idx] : null };
+  }, "getCurrent");
+  const refDown = hooks.useHotkey(
+    "down",
+    () => {
+      const { rows: r, idx } = getCurrent();
+      if (r.length === 0) return;
+      const next = r[Math.min(idx + 1, r.length - 1)] ?? r[0];
+      onFocus(next.node.id);
+    },
+    { enabled, preventDefault: true, description: "Next row" }
+  );
+  const refUp = hooks.useHotkey(
+    "up",
+    () => {
+      const { rows: r, idx } = getCurrent();
+      if (r.length === 0) return;
+      const prev = r[Math.max(idx - 1, 0)] ?? r[0];
+      onFocus(prev.node.id);
+    },
+    { enabled, preventDefault: true, description: "Previous row" }
+  );
+  const refHome = hooks.useHotkey(
+    "home",
+    () => {
+      const { rows: r } = getCurrent();
+      if (r.length === 0) return;
+      onFocus(r[0].node.id);
+    },
+    { enabled, preventDefault: true, description: "First row" }
+  );
+  const refEnd = hooks.useHotkey(
+    "end",
+    () => {
+      const { rows: r } = getCurrent();
+      if (r.length === 0) return;
+      onFocus(r[r.length - 1].node.id);
+    },
+    { enabled, preventDefault: true, description: "Last row" }
+  );
+  const refRight = hooks.useHotkey(
+    "right",
+    () => {
+      const { rows: r, idx, current } = getCurrent();
+      if (!current) return;
+      if (current.isFolder && !current.isExpanded) {
+        onExpand(current.node.id);
+      } else if (current.isFolder && current.isExpanded) {
+        const next = r[idx + 1];
+        if (next) onFocus(next.node.id);
       }
-    }, "handler");
-    target.addEventListener("keydown", handler);
-    return () => target.removeEventListener("keydown", handler);
-  }, [
-    containerRef,
-    rows,
-    focusedId,
-    enabled,
-    onFocus,
-    onSelect,
-    onActivate,
-    onExpand,
-    onCollapse,
-    onClearSelection
-  ]);
+    },
+    { enabled, preventDefault: true, description: "Expand / first child" }
+  );
+  const refLeft = hooks.useHotkey(
+    "left",
+    () => {
+      const { current } = getCurrent();
+      if (!current) return;
+      if (current.isFolder && current.isExpanded) {
+        onCollapse(current.node.id);
+      } else if (current.parentId) {
+        onFocus(current.parentId);
+      }
+    },
+    { enabled, preventDefault: true, description: "Collapse / parent" }
+  );
+  const refActivate = hooks.useHotkey(
+    ["enter", "space"],
+    () => {
+      const { current } = getCurrent();
+      if (!current) return;
+      onSelect(current.node.id);
+      if (current.isFolder) {
+        if (current.isExpanded) onCollapse(current.node.id);
+        else onExpand(current.node.id);
+      } else {
+        onActivate(current.node.id);
+      }
+    },
+    { enabled, preventDefault: true, description: "Activate / toggle" }
+  );
+  const refEscape = hooks.useHotkey(
+    "escape",
+    () => onClearSelection(),
+    { enabled, preventDefault: true, description: "Clear selection" }
+  );
+  const ref = React.useCallback(
+    (instance) => {
+      refDown(instance);
+      refUp(instance);
+      refHome(instance);
+      refEnd(instance);
+      refRight(instance);
+      refLeft(instance);
+      refActivate(instance);
+      refEscape(instance);
+    },
+    [refDown, refUp, refHome, refEnd, refRight, refLeft, refActivate, refEscape]
+  );
+  return { ref };
 }
 chunkWGEGR3DF_cjs.__name(useTreeKeyboard, "useTreeKeyboard");
 var FLUSH_MS = 600;
@@ -1128,6 +1148,7 @@ function TreeRoot(props) {
     getItemName,
     loadChildren,
     selectionMode,
+    activationMode,
     initialExpandedIds,
     initialSelectedIds,
     indent,
@@ -1156,6 +1177,7 @@ function TreeRoot(props) {
       getItemName,
       loadChildren,
       selectionMode,
+      activationMode,
       initialExpandedIds,
       initialSelectedIds,
       indent,
@@ -1195,20 +1217,26 @@ function TreeRootShell({
 }) {
   const containerRef = React.useRef(null);
   const ctx = useTreeContext();
-  useTreeKeyboard({
-    containerRef,
+  const { ref: keyboardRef } = useTreeKeyboard({
     rows: ctx.flatRows,
     focusedId: ctx.focused,
     onFocus: ctx.setFocus,
     onSelect: ctx.select,
     onActivate: /* @__PURE__ */ chunkWGEGR3DF_cjs.__name((id) => {
       const row = ctx.flatRows.find((r) => r.node.id === id);
-      if (row) ctx.activate(row.node);
+      if (row) ctx.activate(row.node, { preview: false });
     }, "onActivate"),
     onExpand: ctx.expand,
     onCollapse: ctx.collapse,
     onClearSelection: ctx.clearSelection
   });
+  const setContainerRef = React.useCallback(
+    (instance) => {
+      containerRef.current = instance;
+      keyboardRef(instance);
+    },
+    [keyboardRef]
+  );
   const onTypeAheadMatch = React.useCallback(
     (id) => {
       ctx.setFocus(id);
@@ -1229,7 +1257,7 @@ function TreeRootShell({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      ref: containerRef,
+      ref: setContainerRef,
       tabIndex: 0,
       className: lib.cn(
         "group/tree flex h-full w-full flex-col gap-2 outline-none",
@@ -1278,5 +1306,5 @@ exports.useTreeRows = useTreeRows;
 exports.useTreeSearch = useTreeSearch;
 exports.useTreeSelection = useTreeSelection;
 exports.useTreeTypeAhead = useTreeTypeAhead;
-//# sourceMappingURL=chunk-MA552EWC.cjs.map
-//# sourceMappingURL=chunk-MA552EWC.cjs.map
+//# sourceMappingURL=chunk-44ZTWYAF.cjs.map
+//# sourceMappingURL=chunk-44ZTWYAF.cjs.map