@geomak/ui 3.0.0 → 4.0.0

package/dist/index.cjs

@@ -3176,6 +3176,26 @@ function AutoComplete({
     }
   ) });
 }
+function flattenVisible(items, expanded, depth = 0, out = []) {
+  for (const node of items) {
+    const isParent2 = !!node.children && node.children.length > 0;
+    out.push({ node, depth, isParent: isParent2 });
+    if (isParent2 && expanded.has(node.key)) {
+      flattenVisible(node.children, expanded, depth + 1, out);
+    }
+  }
+  return out;
+}
+function findNodeByKey(items, key) {
+  for (const n of items) {
+    if (n.key === key) return n;
+    if (n.children) {
+      const found = findNodeByKey(n.children, key);
+      if (found) return found;
+    }
+  }
+  return null;
+}
 function TreeSelect({
   label,
   name,
@@ -3184,106 +3204,231 @@ function TreeSelect({
   disabled,
   layout = "horizontal",
   errorMessage,
-  style = {},
+  style,
   htmlFor,
-  items = []
+  items = [],
+  placeholder = "Select\u2026",
+  parentsSelectable = true,
+  defaultExpandedKeys = []
 }) {
+  const errorId = React8.useId();
+  const hasError = errorMessage != null;
   const [open, setOpen] = React8.useState(false);
-  const [hoveredItem, setHoveredItem] = React8.useState(null);
-  const [innerItems, setInnerItems] = React8.useState([]);
+  const [expanded, setExpanded] = React8.useState(() => new Set(defaultExpandedKeys));
+  const [activeIndex, setActiveIndex] = React8.useState(0);
+  const listRef = React8.useRef(null);
+  const visible = React8.useMemo(() => flattenVisible(items, expanded), [items, expanded]);
   React8.useEffect(() => {
-    setInnerItems(items);
-  }, [items]);
-  const selectItem = (key) => {
+    if (!open) return;
+    const selectedIdx = visible.findIndex((v) => v.node.key === value);
+    setActiveIndex(selectedIdx >= 0 ? selectedIdx : 0);
+  }, [open, visible, value]);
+  const selectedNode = React8.useMemo(
+    () => value != null ? findNodeByKey(items, value) : null,
+    [items, value]
+  );
+  const toggleExpand = (key) => {
+    setExpanded((prev) => {
+      const next = new Set(prev);
+      if (next.has(key)) next.delete(key);
+      else next.add(key);
+      return next;
+    });
+  };
+  const selectKey = (key) => {
     onChange?.({ target: { value: key, id: htmlFor, name } });
     setOpen(false);
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-2", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        className: `flex ${layout === "vertical" ? "flex-col" : "flex-row items-center gap-2"}`,
-        children: [
-          label && /* @__PURE__ */ jsxRuntime.jsx(
-            "label",
-            {
-              className: "text-md font-bold ml-1 max-content select-none text-prussian-blue dark:text-white",
-              htmlFor,
-              children: label
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsxs(Popover__namespace.Root, { open: open && !disabled, onOpenChange: (o) => !disabled && setOpen(o), children: [
-            /* @__PURE__ */ jsxRuntime.jsx(Popover__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+  const onListKey = (e) => {
+    if (visible.length === 0) return;
+    const cur = visible[activeIndex];
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setActiveIndex((i) => Math.min(i + 1, visible.length - 1));
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setActiveIndex((i) => Math.max(i - 1, 0));
+    } else if (e.key === "ArrowRight") {
+      e.preventDefault();
+      if (cur.isParent) {
+        if (!expanded.has(cur.node.key)) toggleExpand(cur.node.key);
+        else setActiveIndex((i) => Math.min(i + 1, visible.length - 1));
+      }
+    } else if (e.key === "ArrowLeft") {
+      e.preventDefault();
+      if (cur.isParent && expanded.has(cur.node.key)) {
+        toggleExpand(cur.node.key);
+      } else if (cur.depth > 0) {
+        for (let i = activeIndex - 1; i >= 0; i--) {
+          if (visible[i].depth < cur.depth) {
+            setActiveIndex(i);
+            break;
+          }
+        }
+      }
+    } else if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      if (cur.node.disabled) return;
+      if (cur.isParent && !parentsSelectable) {
+        toggleExpand(cur.node.key);
+      } else {
+        selectKey(cur.node.key);
+      }
+    } else if (e.key === "Escape") {
+      e.preventDefault();
+      setOpen(false);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex ${layout === "vertical" ? "flex-col gap-1" : "flex-row items-center gap-2"}`, children: [
+      label && /* @__PURE__ */ jsxRuntime.jsx(
+        "label",
+        {
+          className: "text-sm font-medium ml-1 max-content select-none text-foreground",
+          htmlFor,
+          children: label
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs(Popover__namespace.Root, { open: open && !disabled, onOpenChange: (o) => !disabled && setOpen(o), children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Popover__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            id: htmlFor,
+            type: "button",
+            style,
+            role: "combobox",
+            "aria-expanded": open,
+            "aria-haspopup": "listbox",
+            "aria-invalid": hasError || void 0,
+            "aria-describedby": hasError ? errorId : void 0,
+            disabled,
+            className: `flex items-center justify-between h-9 rounded-lg border ${hasError ? "border-status-error" : "border-border"} px-3 cursor-pointer select-none focus:outline-none focus-visible:ring-2 focus-visible:ring-accent ${disabled ? "cursor-not-allowed bg-surface-raised text-foreground-muted" : "bg-surface text-foreground"} ${!style?.width ? "min-w-[240px]" : ""}`,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm truncate text-left", children: selectedNode ? selectedNode.label : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-foreground-muted", children: placeholder }) }),
+              /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: `h-4 w-4 flex-shrink-0 transition-transform duration-200 ${open ? "rotate-180" : ""}`, "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }) })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(Popover__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+          Popover__namespace.Content,
+          {
+            align: "start",
+            sideOffset: 4,
+            style: { width: style?.width || 280 },
+            className: "bg-surface text-foreground border border-border rounded-lg shadow-md z-50 p-1 animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+            onOpenAutoFocus: (e) => {
+              e.preventDefault();
+              listRef.current?.focus();
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(
               "div",
               {
-                id: htmlFor,
-                style,
-                role: "combobox",
-                "aria-expanded": open,
-                "aria-haspopup": "listbox",
-                className: `flex items-center justify-between relative h-9 rounded-lg p-2 cursor-pointer ${disabled ? "cursor-not-allowed bg-disabled" : "bg-white"}`,
-                tabIndex: disabled ? -1 : 0,
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: `h-7 ${!style?.width ? "min-w-[240px]" : ""} focus:outline-none text-prussian-blue flex items-center gap-1`, children: Array.isArray(value) ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                    value.slice(0, 1).map((val, id) => /* @__PURE__ */ jsxRuntime.jsx(
-                      DropdownPill,
-                      {
-                        hasSiblings: value.length > 1,
-                        value: innerItems.find((it) => it.key === val)?.label
-                      },
-                      id
-                    )),
-                    value.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(DropdownPill, { value: `+${value.length - 1} more` })
-                  ] }) : value != null ? /* @__PURE__ */ jsxRuntime.jsx(DropdownPill, { value: innerItems.find((it) => it.key === value)?.label }) : null }),
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: `transition-transform duration-300 ml-2 ${open ? "rotate-180" : "rotate-0"}`, children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: chunk255PCZIW_cjs.colors_default.PALETTE["prussian-blue"], strokeWidth: 2, className: "h-4 w-4", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }) }) })
-                ]
-              }
-            ) }),
-            /* @__PURE__ */ jsxRuntime.jsx(Popover__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
-              Popover__namespace.Content,
-              {
-                align: "start",
-                sideOffset: 4,
-                style: { width: style?.width || 240 },
-                className: "bg-ice rounded-lg shadow-md z-50 p-2 animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
-                children: /* @__PURE__ */ jsxRuntime.jsx("div", { role: "listbox", className: "max-h-40 overflow-y-auto", children: innerItems.map((item, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
-                  "div",
+                ref: listRef,
+                role: "tree",
+                tabIndex: -1,
+                "aria-activedescendant": visible[activeIndex] ? `tree-opt-${visible[activeIndex].node.key}` : void 0,
+                onKeyDown: onListKey,
+                className: "max-h-72 overflow-y-auto outline-none",
+                children: visible.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 py-4 text-sm text-foreground-secondary text-center", children: "No items" }) : visible.map((v, idx) => /* @__PURE__ */ jsxRuntime.jsx(
+                  TreeNodeRow,
                   {
-                    role: "option",
-                    "aria-selected": value === item.key,
-                    "aria-rowindex": idx,
-                    className: `flex items-center justify-between p-2 hover:bg-prussian-blue hover:text-white transition-all duration-150 text-sm text-prussian-blue rounded-lg cursor-pointer`,
-                    onClick: () => selectItem(item.key),
-                    onMouseEnter: () => setHoveredItem(item.key),
-                    onMouseLeave: () => setHoveredItem(null),
-                    children: [
-                      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-xs", children: [
-                        item.icon && /* @__PURE__ */ jsxRuntime.jsx("div", { children: item.icon }),
-                        item.label
-                      ] }),
-                      value === item.key && /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
-                        "path",
-                        {
-                          d: "M4 10l4.5 4.5L16 6",
-                          stroke: hoveredItem === item.key ? "#fff" : chunk255PCZIW_cjs.colors_default.PALETTE["prussian-blue"],
-                          strokeWidth: "2",
-                          strokeLinecap: "round",
-                          strokeLinejoin: "round"
-                        }
-                      ) })
-                    ]
+                    node: v.node,
+                    depth: v.depth,
+                    isParent: v.isParent,
+                    isExpanded: expanded.has(v.node.key),
+                    isActive: idx === activeIndex,
+                    isSelected: value === v.node.key,
+                    parentsSelectable,
+                    onActivate: () => {
+                      if (v.node.disabled) return;
+                      if (v.isParent && !parentsSelectable) toggleExpand(v.node.key);
+                      else selectKey(v.node.key);
+                    },
+                    onToggle: () => toggleExpand(v.node.key),
+                    onHover: () => setActiveIndex(idx)
                   },
-                  item.key
-                )) })
+                  v.node.key
+                ))
               }
-            ) })
-          ] })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center text-error dark:text-prussian-blue min-h-0", children: errorMessage })
+            )
+          }
+        ) })
+      ] })
+    ] }),
+    hasError && /* @__PURE__ */ jsxRuntime.jsx("div", { id: errorId, className: "text-xs text-status-error ml-1", children: errorMessage })
   ] });
 }
+function TreeNodeRow({
+  node,
+  depth,
+  isParent: isParent2,
+  isExpanded,
+  isActive,
+  isSelected,
+  parentsSelectable,
+  onActivate,
+  onToggle,
+  onHover
+}) {
+  const disabled = node.disabled;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      id: `tree-opt-${node.key}`,
+      role: "treeitem",
+      "aria-selected": isSelected,
+      "aria-expanded": isParent2 ? isExpanded : void 0,
+      "aria-disabled": disabled || void 0,
+      "data-active": isActive ? "" : void 0,
+      onMouseEnter: onHover,
+      className: `flex items-center gap-1 rounded-md px-1 py-1.5 select-none cursor-pointer transition-colors duration-100 ${disabled ? "opacity-40 cursor-not-allowed" : isActive ? "bg-accent text-accent-fg" : isSelected ? "bg-surface-raised" : "hover:bg-surface-raised"}`,
+      style: { paddingLeft: depth * 16 + 4 },
+      children: [
+        isParent2 ? /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: (e) => {
+              e.stopPropagation();
+              onToggle();
+            },
+            "aria-label": isExpanded ? "Collapse" : "Expand",
+            tabIndex: -1,
+            className: "w-5 h-5 inline-flex items-center justify-center rounded hover:bg-black/10 focus:outline-none",
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "svg",
+              {
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: 2.5,
+                className: `h-3 w-3 transition-transform duration-150 ${isExpanded ? "rotate-0" : "-rotate-90"}`,
+                "aria-hidden": "true",
+                children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" })
+              }
+            )
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-5 h-5 inline-block", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: onActivate,
+            disabled,
+            tabIndex: -1,
+            className: "flex-1 flex items-center gap-2 text-sm text-left focus:outline-none disabled:cursor-not-allowed",
+            children: [
+              node.icon,
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: node.label }),
+              isParent2 && !parentsSelectable && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-auto text-xs text-foreground-muted", children: "parent" })
+            ]
+          }
+        ),
+        isSelected && /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", className: "ml-1", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 10l4.5 4.5L16 6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
+      ]
+    }
+  );
+}
 function FileInput({
   allowMultiple = false,
   onChange,