@geomak/ui 3.0.0 → 4.0.0

package/dist/index.d.cts

@@ -1812,40 +1812,84 @@ interface AutoCompleteProps {
  */
 declare function AutoComplete({ disabled, label, placeholder, name, inputStyle, style, layout, items, onItemClick, emptyText, }: AutoCompleteProps): react_jsx_runtime.JSX.Element;
 
-interface TreeSelectItem {
+interface TreeSelectNode {
     key: string | number;
     label: React$1.ReactNode;
     icon?: React$1.ReactNode;
+    /** Nested children. If present, this node is treated as a parent (branch). */
+    children?: TreeSelectNode[];
+    /** Render the node disabled — visible but not selectable. */
+    disabled?: boolean;
 }
 interface TreeSelectProps {
-    hasSearch?: boolean;
-    label?: React$1.ReactNode;
-    name?: string;
-    value?: any;
+    /** Tree data. Each node may optionally carry `children` for sub-branches. */
+    items: TreeSelectNode[];
+    /** Currently selected key (single-select). Pass `undefined`/`null` for unset. */
+    value?: string | number | null;
+    /** Fires with the next selected key (and the corresponding event-like target). */
     onChange?: (e: {
         target: {
-            value: any;
+            value: string | number;
             id?: string;
             name?: string;
         };
     }) => void;
-    onBlur?: React$1.FocusEventHandler;
+    label?: React$1.ReactNode;
+    placeholder?: string;
+    /** Form control id linkage. */
+    htmlFor?: string;
+    name?: string;
+    /** Label/trigger orientation. Defaults to `'horizontal'`. */
+    layout?: 'horizontal' | 'vertical';
     disabled?: boolean;
-    /** 'horizontal' | 'vertical' */
-    layout?: string;
     errorMessage?: React$1.ReactNode;
     style?: React$1.CSSProperties;
-    htmlFor?: string;
-    items?: TreeSelectItem[];
+    /**
+     * Whether parent (branch) nodes can be selected. When `false`, parents
+     * only expand/collapse and only leaves are picked. Default `true`.
+     */
+    parentsSelectable?: boolean;
+    /** Keys of nodes that should start expanded. */
+    defaultExpandedKeys?: (string | number)[];
 }
 /**
- * Single-value select with a flat list, powered by Radix Popover.
- * Functionally similar to Dropdown (single-select only).
+ * Hierarchical single-select with expandable branches.
+ *
+ * Built on `@radix-ui/react-popover` for portal positioning and click-outside.
+ * Tree state (expanded keys) is local; selected value is controlled by the
+ * parent.
+ *
+ * **Keyboard model** (focus is on the trigger or any item):
+ * - `Enter` / `Space` / `↓` / `↑` on the trigger — open the popover
+ * - `↓` / `↑` — move active item through the visible (un-collapsed) list
+ * - `→` — expand a branch (or move into it if already expanded)
+ * - `←` — collapse a branch (or move to its parent if already collapsed)
+ * - `Enter` / `Space` — select the active item (if selectable)
+ * - `Esc` — close the popover, return focus to the trigger
  *
  * @example
- * <TreeSelect label="Fleet" items={fleets} value={form.fleet} onChange={handleChange} htmlFor="fleet" />
+ * ```tsx
+ * type FleetKey = number
+ * const [fleet, setFleet] = useState<FleetKey | null>(null)
+ *
+ * const tree: TreeSelectNode[] = [
+ *   { key: 'eu', label: 'Europe', children: [
+ *     { key: 1, label: 'Aegean Fleet' },
+ *     { key: 2, label: 'Adriatic Fleet' },
+ *   ]},
+ *   { key: 'asia', label: 'Asia', children: [{ key: 3, label: 'Pacific Fleet' }] },
+ * ]
+ *
+ * <TreeSelect
+ *   label="Fleet"
+ *   items={tree}
+ *   value={fleet}
+ *   onChange={({ target }) => setFleet(target.value as FleetKey)}
+ *   parentsSelectable={false}
+ * />
+ * ```
  */
-declare function TreeSelect({ label, name, value, onChange, disabled, layout, errorMessage, style, htmlFor, items, }: TreeSelectProps): react_jsx_runtime.JSX.Element;
+declare function TreeSelect({ label, name, value, onChange, disabled, layout, errorMessage, style, htmlFor, items, placeholder, parentsSelectable, defaultExpandedKeys, }: TreeSelectProps): react_jsx_runtime.JSX.Element;
 
 interface FileInputProps {
     allowMultiple?: boolean;

package/dist/index.d.ts

@@ -1812,40 +1812,84 @@ interface AutoCompleteProps {
  */
 declare function AutoComplete({ disabled, label, placeholder, name, inputStyle, style, layout, items, onItemClick, emptyText, }: AutoCompleteProps): react_jsx_runtime.JSX.Element;
 
-interface TreeSelectItem {
+interface TreeSelectNode {
     key: string | number;
     label: React$1.ReactNode;
     icon?: React$1.ReactNode;
+    /** Nested children. If present, this node is treated as a parent (branch). */
+    children?: TreeSelectNode[];
+    /** Render the node disabled — visible but not selectable. */
+    disabled?: boolean;
 }
 interface TreeSelectProps {
-    hasSearch?: boolean;
-    label?: React$1.ReactNode;
-    name?: string;
-    value?: any;
+    /** Tree data. Each node may optionally carry `children` for sub-branches. */
+    items: TreeSelectNode[];
+    /** Currently selected key (single-select). Pass `undefined`/`null` for unset. */
+    value?: string | number | null;
+    /** Fires with the next selected key (and the corresponding event-like target). */
     onChange?: (e: {
         target: {
-            value: any;
+            value: string | number;
             id?: string;
             name?: string;
         };
     }) => void;
-    onBlur?: React$1.FocusEventHandler;
+    label?: React$1.ReactNode;
+    placeholder?: string;
+    /** Form control id linkage. */
+    htmlFor?: string;
+    name?: string;
+    /** Label/trigger orientation. Defaults to `'horizontal'`. */
+    layout?: 'horizontal' | 'vertical';
     disabled?: boolean;
-    /** 'horizontal' | 'vertical' */
-    layout?: string;
     errorMessage?: React$1.ReactNode;
     style?: React$1.CSSProperties;
-    htmlFor?: string;
-    items?: TreeSelectItem[];
+    /**
+     * Whether parent (branch) nodes can be selected. When `false`, parents
+     * only expand/collapse and only leaves are picked. Default `true`.
+     */
+    parentsSelectable?: boolean;
+    /** Keys of nodes that should start expanded. */
+    defaultExpandedKeys?: (string | number)[];
 }
 /**
- * Single-value select with a flat list, powered by Radix Popover.
- * Functionally similar to Dropdown (single-select only).
+ * Hierarchical single-select with expandable branches.
+ *
+ * Built on `@radix-ui/react-popover` for portal positioning and click-outside.
+ * Tree state (expanded keys) is local; selected value is controlled by the
+ * parent.
+ *
+ * **Keyboard model** (focus is on the trigger or any item):
+ * - `Enter` / `Space` / `↓` / `↑` on the trigger — open the popover
+ * - `↓` / `↑` — move active item through the visible (un-collapsed) list
+ * - `→` — expand a branch (or move into it if already expanded)
+ * - `←` — collapse a branch (or move to its parent if already collapsed)
+ * - `Enter` / `Space` — select the active item (if selectable)
+ * - `Esc` — close the popover, return focus to the trigger
  *
  * @example
- * <TreeSelect label="Fleet" items={fleets} value={form.fleet} onChange={handleChange} htmlFor="fleet" />
+ * ```tsx
+ * type FleetKey = number
+ * const [fleet, setFleet] = useState<FleetKey | null>(null)
+ *
+ * const tree: TreeSelectNode[] = [
+ *   { key: 'eu', label: 'Europe', children: [
+ *     { key: 1, label: 'Aegean Fleet' },
+ *     { key: 2, label: 'Adriatic Fleet' },
+ *   ]},
+ *   { key: 'asia', label: 'Asia', children: [{ key: 3, label: 'Pacific Fleet' }] },
+ * ]
+ *
+ * <TreeSelect
+ *   label="Fleet"
+ *   items={tree}
+ *   value={fleet}
+ *   onChange={({ target }) => setFleet(target.value as FleetKey)}
+ *   parentsSelectable={false}
+ * />
+ * ```
  */
-declare function TreeSelect({ label, name, value, onChange, disabled, layout, errorMessage, style, htmlFor, items, }: TreeSelectProps): react_jsx_runtime.JSX.Element;
+declare function TreeSelect({ label, name, value, onChange, disabled, layout, errorMessage, style, htmlFor, items, placeholder, parentsSelectable, defaultExpandedKeys, }: TreeSelectProps): react_jsx_runtime.JSX.Element;
 
 interface FileInputProps {
     allowMultiple?: boolean;

package/dist/index.js

@@ -3143,6 +3143,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,
@@ -3151,106 +3171,231 @@ function TreeSelect({
   disabled,
   layout = "horizontal",
   errorMessage,
-  style = {},
+  style,
   htmlFor,
-  items = []
+  items = [],
+  placeholder = "Select\u2026",
+  parentsSelectable = true,
+  defaultExpandedKeys = []
 }) {
+  const errorId = useId();
+  const hasError = errorMessage != null;
   const [open, setOpen] = useState(false);
-  const [hoveredItem, setHoveredItem] = useState(null);
-  const [innerItems, setInnerItems] = useState([]);
+  const [expanded, setExpanded] = useState(() => new Set(defaultExpandedKeys));
+  const [activeIndex, setActiveIndex] = useState(0);
+  const listRef = useRef(null);
+  const visible = useMemo(() => flattenVisible(items, expanded), [items, expanded]);
   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 = 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__ */ jsxs("div", { className: "mt-2", children: [
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: `flex ${layout === "vertical" ? "flex-col" : "flex-row items-center gap-2"}`,
-        children: [
-          label && /* @__PURE__ */ jsx(
-            "label",
-            {
-              className: "text-md font-bold ml-1 max-content select-none text-prussian-blue dark:text-white",
-              htmlFor,
-              children: label
-            }
-          ),
-          /* @__PURE__ */ jsxs(Popover.Root, { open: open && !disabled, onOpenChange: (o) => !disabled && setOpen(o), children: [
-            /* @__PURE__ */ jsx(Popover.Trigger, { asChild: true, children: /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+    /* @__PURE__ */ jsxs("div", { className: `flex ${layout === "vertical" ? "flex-col gap-1" : "flex-row items-center gap-2"}`, children: [
+      label && /* @__PURE__ */ jsx(
+        "label",
+        {
+          className: "text-sm font-medium ml-1 max-content select-none text-foreground",
+          htmlFor,
+          children: label
+        }
+      ),
+      /* @__PURE__ */ jsxs(Popover.Root, { open: open && !disabled, onOpenChange: (o) => !disabled && setOpen(o), children: [
+        /* @__PURE__ */ jsx(Popover.Trigger, { asChild: true, children: /* @__PURE__ */ 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__ */ jsx("span", { className: "text-sm truncate text-left", children: selectedNode ? selectedNode.label : /* @__PURE__ */ jsx("span", { className: "text-foreground-muted", children: placeholder }) }),
+              /* @__PURE__ */ 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__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }) })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(
+          Popover.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__ */ 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__ */ 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__ */ jsxs(Fragment, { children: [
-                    value.slice(0, 1).map((val, id) => /* @__PURE__ */ jsx(
-                      DropdownPill,
-                      {
-                        hasSiblings: value.length > 1,
-                        value: innerItems.find((it) => it.key === val)?.label
-                      },
-                      id
-                    )),
-                    value.length > 1 && /* @__PURE__ */ jsx(DropdownPill, { value: `+${value.length - 1} more` })
-                  ] }) : value != null ? /* @__PURE__ */ jsx(DropdownPill, { value: innerItems.find((it) => it.key === value)?.label }) : null }),
-                  /* @__PURE__ */ jsx("div", { className: `transition-transform duration-300 ml-2 ${open ? "rotate-180" : "rotate-0"}`, children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: colors_default.PALETTE["prussian-blue"], strokeWidth: 2, className: "h-4 w-4", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }) }) })
-                ]
-              }
-            ) }),
-            /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(
-              Popover.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__ */ jsx("div", { role: "listbox", className: "max-h-40 overflow-y-auto", children: innerItems.map((item, idx) => /* @__PURE__ */ 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__ */ jsx("div", { className: "px-3 py-4 text-sm text-foreground-secondary text-center", children: "No items" }) : visible.map((v, idx) => /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex items-center gap-2 text-xs", children: [
-                        item.icon && /* @__PURE__ */ jsx("div", { children: item.icon }),
-                        item.label
-                      ] }),
-                      value === item.key && /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsx(
-                        "path",
-                        {
-                          d: "M4 10l4.5 4.5L16 6",
-                          stroke: hoveredItem === item.key ? "#fff" : 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__ */ jsx("div", { className: "text-center text-error dark:text-prussian-blue min-h-0", children: errorMessage })
+            )
+          }
+        ) })
+      ] })
+    ] }),
+    hasError && /* @__PURE__ */ 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__ */ 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__ */ 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__ */ 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__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" })
+              }
+            )
+          }
+        ) : /* @__PURE__ */ jsx("span", { className: "w-5 h-5 inline-block", "aria-hidden": "true" }),
+        /* @__PURE__ */ 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__ */ jsx("span", { className: "truncate", children: node.label }),
+              isParent2 && !parentsSelectable && /* @__PURE__ */ jsx("span", { className: "ml-auto text-xs text-foreground-muted", children: "parent" })
+            ]
+          }
+        ),
+        isSelected && /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", className: "ml-1", children: /* @__PURE__ */ jsx("path", { d: "M4 10l4.5 4.5L16 6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
+      ]
+    }
+  );
+}
 function FileInput({
   allowMultiple = false,
   onChange,