@nextlyhq/ui 0.0.2-alpha.52 → 0.0.2-alpha.54

package/README.md

@@ -73,6 +73,7 @@ as a Tailwind v3 preset from `@nextlyhq/ui/tailwind-preset`.
 **Toggles:** `Checkbox`, `RadioGroup`, `Switch`, `Collapsible`
 **Layout and disclosure:** `Accordion`, `Avatar`, `Tabs`, `Tooltip`, `Popover`
 **Resizable regions:** `ResizablePanelGroup`, `ResizablePanel`, `ResizableHandle`
+**Hierarchies:** `TreeView` (virtualized, keyboard-operable)
 **Overlays:** `Dialog`, `AlertDialog`, `Sheet`
 **Menus and command palette:** `DropdownMenu`, `ContextMenu`, `Select`, `Command`
 **Feedback:** `Spinner`, `Toaster` (with `toast()` helper)

package/dist/index.cjs

@@ -177,6 +177,7 @@ __export(index_exports, {
   TooltipContent: () => TooltipContent,
   TooltipProvider: () => TooltipProvider,
   TooltipTrigger: () => TooltipTrigger,
+  TreeView: () => TreeView,
   alertVariants: () => alertVariants,
   avatarVariants: () => avatarVariants,
   badgeVariants: () => badgeVariants,
@@ -2489,6 +2490,325 @@ var ResizableHandle = ({
     ]
   }
 );
+
+// src/components/tree-view.tsx
+var import_react_virtual = require("@tanstack/react-virtual");
+var import_lucide_react14 = require("lucide-react");
+var React10 = __toESM(require("react"), 1);
+var import_jsx_runtime36 = require("react/jsx-runtime");
+var ROW_HEIGHT = 28;
+var INDENT_PER_LEVEL = 12;
+function textOf(node) {
+  if (typeof node.textValue === "string") return node.textValue;
+  return typeof node.label === "string" ? node.label : "";
+}
+function flatten(nodes, expanded) {
+  const rows = [];
+  const pending = [{ list: nodes, index: 0, level: 0 }];
+  while (pending.length > 0) {
+    const frame = pending[pending.length - 1];
+    if (frame === void 0 || frame.index >= frame.list.length) {
+      pending.pop();
+      continue;
+    }
+    const node = frame.list[frame.index];
+    const posInSet = frame.index;
+    frame.index += 1;
+    if (node === void 0) continue;
+    const hasChildren = node.children !== void 0;
+    rows.push({
+      node,
+      level: frame.level,
+      setSize: frame.list.length,
+      posInSet,
+      parentId: frame.parentId,
+      hasChildren
+    });
+    if (hasChildren && expanded.has(node.id)) {
+      pending.push({
+        list: node.children ?? [],
+        index: 0,
+        level: frame.level + 1,
+        parentId: node.id
+      });
+    }
+  }
+  return rows;
+}
+function useControllable(controlled, fallback) {
+  const [uncontrolled, setUncontrolled] = React10.useState(fallback);
+  return [
+    controlled === void 0 ? uncontrolled : controlled,
+    setUncontrolled
+  ];
+}
+var TreeView = React10.forwardRef(
+  ({
+    nodes,
+    expandedIds,
+    defaultExpandedIds,
+    onExpandedChange,
+    selectedId,
+    defaultSelectedId,
+    onSelectedChange,
+    className,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-describedby": ariaDescribedBy,
+    ...props
+  }, forwardedRef) => {
+    const scrollRef = React10.useRef(null);
+    const attachScroll = React10.useCallback(
+      (node) => {
+        scrollRef.current = node;
+        if (typeof forwardedRef === "function") forwardedRef(node);
+        else if (forwardedRef !== null && forwardedRef !== void 0) {
+          forwardedRef.current = node;
+        }
+      },
+      [forwardedRef]
+    );
+    const [expandedState, setExpandedState] = useControllable(
+      expandedIds === void 0 ? void 0 : [...expandedIds],
+      [...defaultExpandedIds ?? []]
+    );
+    const expanded = React10.useMemo(
+      () => new Set(expandedIds ?? expandedState),
+      [expandedIds, expandedState]
+    );
+    const [selected, setSelected] = useControllable(
+      selectedId === void 0 ? void 0 : selectedId,
+      defaultSelectedId ?? null
+    );
+    const rows = React10.useMemo(
+      () => flatten(nodes, expanded),
+      [nodes, expanded]
+    );
+    const [activeId, setActiveId] = React10.useState(null);
+    const activeIndex = Math.max(
+      0,
+      rows.findIndex((row) => row.node.id === (activeId ?? selected))
+    );
+    const virtualizer = (0, import_react_virtual.useVirtualizer)({
+      count: rows.length,
+      getScrollElement: () => scrollRef.current,
+      estimateSize: () => ROW_HEIGHT,
+      overscan: 8
+    });
+    const commitExpanded = (next) => {
+      const ids = [...next];
+      if (expandedIds === void 0) setExpandedState(ids);
+      onExpandedChange?.(ids);
+    };
+    const setExpansion = (id, open) => {
+      const next = new Set(expanded);
+      if (open) next.add(id);
+      else next.delete(id);
+      commitExpanded(next);
+    };
+    const choose = (id) => {
+      if (selectedId === void 0) setSelected(id);
+      onSelectedChange?.(id);
+    };
+    const focusRow = (index) => {
+      const row = rows[index];
+      if (row === void 0) return;
+      setActiveId(row.node.id);
+      virtualizer.scrollToIndex(index, { align: "auto" });
+      requestAnimationFrame(() => {
+        const element = scrollRef.current?.querySelector(
+          `[data-tree-index="${index}"]`
+        );
+        element?.focus();
+      });
+    };
+    const step = (from, delta) => {
+      for (let index = from + delta; index >= 0 && index < rows.length; index += delta) {
+        if (rows[index]?.node.disabled !== true) return index;
+      }
+      return from;
+    };
+    const typeahead = React10.useRef({ query: "", at: 0 });
+    const onKeyDown = (event) => {
+      const index = activeIndex;
+      const row = rows[index];
+      if (row === void 0) return;
+      switch (event.key) {
+        case "ArrowDown":
+          event.preventDefault();
+          focusRow(step(index, 1));
+          return;
+        case "ArrowUp":
+          event.preventDefault();
+          focusRow(step(index, -1));
+          return;
+        case "ArrowRight":
+          event.preventDefault();
+          if (row.hasChildren && !expanded.has(row.node.id)) {
+            setExpansion(row.node.id, true);
+          } else if (row.hasChildren) {
+            for (let child = index + 1; child < rows.length && (rows[child]?.level ?? 0) > row.level; child += 1) {
+              if (rows[child]?.parentId === row.node.id && rows[child]?.node.disabled !== true) {
+                focusRow(child);
+                break;
+              }
+            }
+          }
+          return;
+        case "ArrowLeft":
+          event.preventDefault();
+          if (row.hasChildren && expanded.has(row.node.id)) {
+            setExpansion(row.node.id, false);
+          } else if (row.parentId !== void 0) {
+            let ancestor = row.parentId;
+            while (ancestor !== void 0) {
+              const at = rows.findIndex(
+                (candidate) => candidate.node.id === ancestor
+              );
+              if (at < 0) break;
+              if (rows[at]?.node.disabled !== true) {
+                focusRow(at);
+                break;
+              }
+              ancestor = rows[at]?.parentId;
+            }
+          }
+          return;
+        case "Home":
+          event.preventDefault();
+          focusRow(rows[0]?.node.disabled === true ? step(0, 1) : 0);
+          return;
+        case "End": {
+          event.preventDefault();
+          const last = rows.length - 1;
+          focusRow(rows[last]?.node.disabled === true ? step(last, -1) : last);
+          return;
+        }
+        case "Enter":
+        case " ":
+          event.preventDefault();
+          if (row.node.disabled !== true) choose(row.node.id);
+          return;
+        case "*": {
+          event.preventDefault();
+          const next = new Set(expanded);
+          for (const sibling of rows) {
+            if (sibling.parentId === row.parentId && sibling.hasChildren) {
+              next.add(sibling.node.id);
+            }
+          }
+          commitExpanded(next);
+          return;
+        }
+        default:
+          break;
+      }
+      if (event.key.length !== 1 || event.metaKey || event.ctrlKey || event.altKey) {
+        return;
+      }
+      event.preventDefault();
+      const now = Date.now();
+      const state = typeahead.current;
+      state.query = now - state.at > 500 ? event.key : state.query + event.key;
+      state.at = now;
+      const query = state.query.toLowerCase();
+      for (let offset = 1; offset <= rows.length; offset += 1) {
+        const candidate = rows[(index + offset) % rows.length];
+        if (candidate === void 0 || candidate.node.disabled === true)
+          continue;
+        if (textOf(candidate.node).toLowerCase().startsWith(query)) {
+          focusRow(rows.indexOf(candidate));
+          return;
+        }
+      }
+    };
+    const virtualItems = virtualizer.getVirtualItems();
+    const usable = (index) => rows[index]?.node.disabled !== true;
+    const tabStopIndex = virtualItems.some((item) => item.index === activeIndex) && usable(activeIndex) ? activeIndex : virtualItems.find((item) => usable(item.index))?.index ?? -1;
+    return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+      "div",
+      {
+        ref: attachScroll,
+        className: cn("overflow-auto", className),
+        ...props,
+        children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+          "div",
+          {
+            role: "tree",
+            "aria-label": ariaLabel,
+            "aria-labelledby": ariaLabelledBy,
+            "aria-describedby": ariaDescribedBy,
+            onKeyDown,
+            style: { height: virtualizer.getTotalSize(), position: "relative" },
+            children: virtualItems.map((item) => {
+              const row = rows[item.index];
+              if (row === void 0) return null;
+              const isSelected = selected === row.node.id;
+              return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+                "div",
+                {
+                  "data-tree-index": item.index,
+                  role: "treeitem",
+                  "aria-level": row.level + 1,
+                  "aria-setsize": row.setSize,
+                  "aria-posinset": row.posInSet + 1,
+                  "aria-selected": isSelected,
+                  "aria-expanded": row.hasChildren ? expanded.has(row.node.id) : void 0,
+                  "aria-disabled": row.node.disabled === true ? true : void 0,
+                  tabIndex: item.index === tabStopIndex ? 0 : -1,
+                  onFocus: () => setActiveId(row.node.id),
+                  onClick: () => {
+                    if (row.node.disabled === true) return;
+                    setActiveId(row.node.id);
+                    choose(row.node.id);
+                  },
+                  className: cn(
+                    "absolute left-0 flex w-full select-none items-center gap-1 rounded-sm pr-2 text-sm outline-none",
+                    "focus-visible:ring-1 focus-visible:ring-ring",
+                    row.node.disabled === true ? "pointer-events-none opacity-50" : "cursor-pointer",
+                    isSelected ? "bg-muted text-foreground" : "hover:bg-muted/50"
+                  ),
+                  style: {
+                    height: item.size,
+                    transform: `translateY(${item.start}px)`,
+                    paddingLeft: 4 + row.level * INDENT_PER_LEVEL
+                  },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                      "span",
+                      {
+                        "aria-hidden": "true",
+                        className: "flex size-4 shrink-0 items-center justify-center",
+                        onClick: (event) => {
+                          if (!row.hasChildren) return;
+                          event.stopPropagation();
+                          setExpansion(row.node.id, !expanded.has(row.node.id));
+                        },
+                        children: row.hasChildren ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                          import_lucide_react14.ChevronRight,
+                          {
+                            className: cn(
+                              "size-3.5 text-muted-foreground transition-transform",
+                              expanded.has(row.node.id) && "rotate-90"
+                            )
+                          }
+                        ) : null
+                      }
+                    ),
+                    row.node.icon !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "flex size-4 shrink-0 items-center justify-center text-muted-foreground", children: row.node.icon }) : null,
+                    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "truncate", children: row.node.label })
+                  ]
+                },
+                row.node.id
+              );
+            })
+          }
+        )
+      }
+    );
+  }
+);
+TreeView.displayName = "TreeView";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Accordion,
@@ -2637,6 +2957,7 @@ var ResizableHandle = ({
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
+  TreeView,
   alertVariants,
   avatarVariants,
   badgeVariants,