@djangocfg/ui-tools 2.1.407 → 2.1.409

package/dist/tree/index.mjs

@@ -43,8 +43,9 @@ function flattenTree({
 }) {
   const out = [];
   const walk = /* @__PURE__ */ __name((nodes, level, parentId) => {
-    for (const node of nodes) {
-      if (filterNode && !filterNode(node)) continue;
+    const visible = filterNode ? nodes.filter(filterNode) : nodes;
+    const setSize = visible.length;
+    visible.forEach((node, index) => {
       const isFolder = isNodeFolder(node);
       const isExpanded = expandedIds.has(node.id);
       const resolved = isFolder ? resolveChildren(cache, node) : { children: [], status: "loaded" };
@@ -55,12 +56,14 @@ function flattenTree({
         isFolder,
         isExpanded,
         isLoading: resolved.status === "loading",
-        hasError: resolved.status === "error"
+        hasError: resolved.status === "error",
+        posInSet: index + 1,
+        setSize
       });
       if (isFolder && isExpanded && resolved.children) {
         walk(resolved.children, level + 1, node.id);
       }
-    }
+    });
   }, "walk");
   walk(roots, 0, null);
   return out;
@@ -623,10 +626,10 @@ function TreeLabelRaw({ children, isMatchingSearch, className }) {
   return /* @__PURE__ */ jsx(
     "span",
     {
-      style: { fontSize: "var(--tree-font-size)" },
+      style: { fontSize: "var(--tree-font-size)", color: "var(--foreground)" },
       className: cn(
         "truncate leading-tight tracking-[-0.005em]",
-        isMatchingSearch && "font-medium text-foreground",
+        isMatchingSearch && "font-medium",
         className
       ),
       children
@@ -645,6 +648,7 @@ function TreeRowRaw({ row, className }) {
     focused,
     matchingIds,
     select,
+    setSelectedIds,
     toggle,
     setFocus,
     activate,
@@ -654,10 +658,11 @@ function TreeRowRaw({ row, className }) {
     renderActions,
     renderContextMenu
   } = ctx;
-  const { node, level, isFolder, isExpanded, isLoading } = row;
+  const { node, level, isFolder, isExpanded, isLoading, posInSet, setSize } = row;
   const isSelected = selected.has(node.id);
   const isFocused = focused === node.id;
   const isMatchingSearch = matchingIds.has(node.id);
+  const isMultiSelect = ctx.selectionMode === "multiple";
   const slot = {
     node,
     level,
@@ -671,7 +676,11 @@ function TreeRowRaw({ row, className }) {
   const handleClick = /* @__PURE__ */ __name((e) => {
     if (node.disabled) return;
     setFocus(node.id);
-    select(node.id);
+    if (isMultiSelect && !(e.metaKey || e.ctrlKey)) {
+      setSelectedIds([node.id]);
+    } else {
+      select(node.id);
+    }
     if (isFolder) {
       toggle(node.id);
     } else if (activationMode === "single-click") {
@@ -679,7 +688,6 @@ function TreeRowRaw({ row, className }) {
     } else if (activationMode === "single-click-preview") {
       activate(node, { preview: true });
     }
-    e.currentTarget.scrollIntoView?.({ block: "nearest" });
   }, "handleClick");
   const handleDoubleClick = /* @__PURE__ */ __name(() => {
     if (node.disabled) return;
@@ -689,11 +697,13 @@ function TreeRowRaw({ row, className }) {
   const trigger = /* @__PURE__ */ jsxs(
     "div",
     {
+      id: treeRowDomId(node.id),
       role: "treeitem",
       "aria-level": level + 1,
+      "aria-posinset": posInSet,
+      "aria-setsize": setSize,
       "aria-expanded": isFolder ? isExpanded : void 0,
-      "aria-selected": isSelected || void 0,
-      "aria-current": isSelected ? "true" : void 0,
+      "aria-selected": ctx.selectionMode === "none" ? void 0 : isSelected,
       "aria-disabled": node.disabled || void 0,
       "data-tree-row": "",
       "data-id": node.id,
@@ -702,7 +712,7 @@ function TreeRowRaw({ row, className }) {
       "data-focused": isFocused && !isSelected ? "true" : void 0,
       "data-folder": isFolder || void 0,
       "data-expanded": isExpanded || void 0,
-      tabIndex: isFocused ? 0 : -1,
+      tabIndex: -1,
       style: {
         paddingLeft: 6 + level * appearance.indent,
         height: "var(--tree-row-height)",
@@ -783,16 +793,24 @@ function TreeEmpty({ children, className }) {
   );
 }
 __name(TreeEmpty, "TreeEmpty");
-function TreeContent({ children, className, ariaLabel }) {
-  const { flatRows, labels, selected, focused, matchingIds, appearance } = useTreeContext();
+var treeRowDomId = /* @__PURE__ */ __name((id) => `tree-row-${id}`, "treeRowDomId");
+function TreeContent({
+  children,
+  className,
+  ariaLabel,
+  role = "tree"
+}) {
+  const { flatRows, labels, selected, focused, matchingIds, appearance, selectionMode } = useTreeContext();
   if (flatRows.length === 0) {
     return /* @__PURE__ */ jsx(TreeEmpty, { children: labels.empty });
   }
+  const isTree = role === "tree";
   return /* @__PURE__ */ jsx(
     "div",
     {
-      role: "tree",
-      "aria-label": ariaLabel ?? labels.ariaLabel,
+      role,
+      "aria-label": isTree ? ariaLabel ?? labels.ariaLabel : void 0,
+      "aria-multiselectable": isTree && selectionMode === "multiple" ? true : void 0,
       className: cn("relative flex flex-col py-1", className),
       style: appearanceToStyle(appearance),
       children: flatRows.map((row) => {
@@ -1231,13 +1249,17 @@ function TreeRootShell({
     },
     [keyboardRef]
   );
+  const focusedId = ctx.focused;
+  useEffect(() => {
+    if (!focusedId) return;
+    const el = containerRef.current?.querySelector(
+      `[data-tree-row][data-id="${CSS.escape(focusedId)}"]`
+    );
+    el?.scrollIntoView({ block: "nearest" });
+  }, [focusedId]);
   const onTypeAheadMatch = useCallback(
     (id) => {
       ctx.setFocus(id);
-      const el = containerRef.current?.querySelector(
-        `[data-tree-row][data-id="${CSS.escape(id)}"]`
-      );
-      el?.scrollIntoView({ block: "nearest" });
     },
     [ctx]
   );
@@ -1253,15 +1275,20 @@ function TreeRootShell({
     {
       ref: setContainerRef,
       tabIndex: 0,
+      role: "tree",
+      "aria-label": ctx.labels.ariaLabel,
+      "aria-multiselectable": ctx.selectionMode === "multiple" || void 0,
+      "aria-activedescendant": focusedId ? treeRowDomId(focusedId) : void 0,
       className: cn(
-        "group/tree flex h-full w-full flex-col gap-2 outline-none",
+        "group/tree flex h-full w-full flex-col gap-2 rounded-sm outline-none",
+        "focus-visible:ring-1 focus-visible:ring-ring/50",
         className
       ),
       style: { ...appearanceToStyle(ctx.appearance), ...style },
       "data-tree-root": "",
       children: [
         enableSearch ? /* @__PURE__ */ jsx(TreeSearchInput, { className: "mx-2 mt-2" }) : null,
-        /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 overflow-auto px-1", children: /* @__PURE__ */ jsx(TreeContent, { children: renderRow }) })
+        /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 overflow-auto px-1", children: /* @__PURE__ */ jsx(TreeContent, { role: "group", children: renderRow }) })
       ]
     }
   );