@konce-pt/react 0.9.0 → 0.10.0

package/dist/tree/tree.js

@@ -1,51 +1,75 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
+import { useEffect, useMemo, useRef, useState, } from 'react';
 import { cn } from "../internal/cn.js";
 import { useControllableState } from "../internal/use-controllable-state.js";
-import { useKptMessages } from "../i18n/i18n-context.js";
 import { KptIcon } from "../icon/icon.js";
+import { treeKeyAction } from "./tree-keys.js";
 /**
  * Drzewo hierarchiczne: rozwijanie, zaznaczanie, ikony.
  *
- * Stan rozwinięcia trzyma komponent w zbiorze węzłów, a nie pole `expanded` w danych: mutowanie
- * cudzej tablicy przy każdym kliknięciu byłoby w Reakcie efektem ubocznym renderu, a `expanded`
- * z danych zostaje tym, czym powinno być — stanem początkowym.
+ * Stan rozwinięcia trzyma komponent, a nie pole `expanded` w danych: mutowanie cudzej tablicy
+ * przy każdym kliknięciu byłoby w Reakcie efektem ubocznym renderu, a `expanded` z danych zostaje
+ * tym, czym powinno być — stanem początkowym.
+ *
+ * Klawiatura według wzorca WAI-ARIA „tree view”: jeden przystanek Tab na całe drzewo (roving
+ * tabindex), strzałki po widocznych wierszach, → / ← rozwijają i zwijają, `Enter` / spacja
+ * działają jak kliknięcie. Logika klawiszy siedzi w czystej funkcji `treeKeyAction`.
+ *
+ * `locale` i `dictionary` są przyjmowane dla zgodności — drzewo nie ma już własnych etykiet:
+ * przełącznik gałęzi jest tylko dla myszy, a z klawiatury rozwija się strzałkami.
  *
  * @example
  * <KptTree nodes={tree} selectable selected={node} onSelectedChange={setNode} />
  */
-export function KptTree({ nodes = [], selectable = false, selected, defaultSelected = null, onSelectedChange, onNodeClick, locale, dictionary, className, ...rest }) {
-    const { t } = useKptMessages({ locale, dictionary });
+export function KptTree({ nodes = [], selectable = false, selected, defaultSelected = null, onSelectedChange, onNodeClick, locale: _locale, dictionary: _dictionary, className, ...rest }) {
     const [active, setActive] = useControllableState({
         value: selected,
         defaultValue: defaultSelected,
         onChange: onSelectedChange,
     });
-    // Węzły identyfikujemy referencją — te same obiekty, które przyszły w `nodes`.
-    const [open, setOpen] = useState(() => {
-        const initial = new Set();
-        const walk = (list) => {
+    // Gałęzie przełączone przez użytkownika (węzeł → otwarta?). Węzeł spoza mapy ma stan z `expanded`
+    // w danych — dzięki temu nowa tablica `nodes` przychodzi z własnym stanem początkowym.
+    const [toggled, setToggled] = useState(() => new Map());
+    /** Wiersz, który ostatnio miał fokus — on jest przystankiem Tab. */
+    const [focused, setFocused] = useState(null);
+    /** Węzeł, na który po renderze trzeba przenieść fokus DOM (klawiatura). */
+    const [focusRequest, setFocusRequest] = useState(null);
+    const treeRef = useRef(null);
+    const hasChildren = (node) => !!node.children?.length;
+    const isOpen = (node) => toggled.get(node) ?? !!node.expanded;
+    // Widoczne wiersze w kolejności DOM — tyle widzi klawiatura.
+    const rows = useMemo(() => {
+        const out = [];
+        const walk = (list, level, parent) => {
             for (const node of list) {
-                if (node.expanded)
-                    initial.add(node);
-                if (node.children?.length)
-                    walk(node.children);
+                const index = out.length;
+                const expandable = !!node.children?.length;
+                const open = expandable && (toggled.get(node) ?? !!node.expanded);
+                out.push({ node, level, parent, expandable, open });
+                if (open)
+                    walk(node.children, level + 1, index);
             }
         };
-        walk(nodes);
-        return initial;
-    });
-    const hasChildren = (node) => !!node.children?.length;
-    const isOpen = (node) => open.has(node);
+        walk(nodes, 0, -1);
+        return out;
+    }, [nodes, toggled]);
+    // Jedyny wiersz z `tabIndex=0`: ostatnio skupiony, a gdy go nie widać — zaznaczony albo pierwszy.
+    const visible = rows.map((r) => r.node);
+    const tabStop = focused && visible.includes(focused) ? focused : active && visible.includes(active) ? active : (visible[0] ?? null);
+    useEffect(() => {
+        if (!focusRequest)
+            return;
+        const index = rows.findIndex((r) => r.node === focusRequest);
+        treeRef.current?.querySelectorAll('[role="treeitem"]')[index]?.focus();
+        setFocusRequest(null);
+    }, [focusRequest, rows]);
     const toggle = (node) => {
-        const next = new Set(open);
-        if (next.has(node))
-            next.delete(node);
-        else
-            next.add(node);
-        setOpen(next);
+        const next = new Map(toggled);
+        next.set(node, !isOpen(node));
+        setToggled(next);
     };
     const onRow = (node) => {
+        setFocused(node);
         if (node.disabled)
             return;
         if (selectable)
@@ -54,9 +78,31 @@ export function KptTree({ nodes = [], selectable = false, selected, defaultSelec
             toggle(node);
         onNodeClick?.(node);
     };
-    const renderList = (list, level) => list.map((node, index) => (_jsxs("li", { className: "kpt-tree__node", role: "treeitem", "aria-expanded": hasChildren(node) ? isOpen(node) : undefined, children: [_jsxs("div", { className: cn('kpt-tree__row', active === node && 'is-selected', node.disabled && 'is-disabled'), style: { paddingInlineStart: `${0.5 + level * 1.1}rem` }, onClick: () => onRow(node), children: [hasChildren(node) ? (_jsx("button", { type: "button", className: "kpt-tree__toggle", "aria-label": isOpen(node) ? t('tree.collapse') : t('tree.expand'), onClick: (event) => {
+    const onKeyDown = (node, event) => {
+        // Zagnieżdżone `<li>` przepuszczają zdarzenie w górę — obsługuje je tylko wiersz z fokusem.
+        if (event.target !== event.currentTarget)
+            return;
+        const current = rows.findIndex((r) => r.node === node);
+        const action = treeKeyAction(rows, current, event.key);
+        if (!action)
+            return;
+        event.preventDefault();
+        const target = rows[action.index].node;
+        if (action.type === 'toggle')
+            toggle(target);
+        else if (action.type === 'activate')
+            onRow(target);
+        else {
+            setFocused(target);
+            setFocusRequest(target);
+        }
+    };
+    const renderList = (list, level) => list.map((node, index) => (_jsxs("li", { className: "kpt-tree__node", role: "treeitem", "aria-level": level + 1, "aria-expanded": hasChildren(node) ? isOpen(node) : undefined, "aria-selected": selectable ? active === node : undefined, "aria-disabled": node.disabled ? true : undefined, tabIndex: node === tabStop ? 0 : -1, onFocus: (event) => {
+            if (event.target === event.currentTarget)
+                setFocused(node);
+        }, onKeyDown: (event) => onKeyDown(node, event), children: [_jsxs("div", { className: cn('kpt-tree__row', active === node && 'is-selected', node.disabled && 'is-disabled'), style: { paddingInlineStart: `${0.5 + level * 1.1}rem` }, onClick: () => onRow(node), children: [hasChildren(node) ? (_jsx("span", { className: "kpt-tree__toggle", "aria-hidden": "true", onClick: (event) => {
                             event.stopPropagation();
                             toggle(node);
-                        }, children: _jsx(KptIcon, { name: "chevron-right", className: cn('kpt-tree__chevron', isOpen(node) && 'is-open') }) })) : (_jsx("span", { className: "kpt-tree__spacer" })), node.icon ? _jsx(KptIcon, { name: node.icon, className: "kpt-tree__icon" }) : null, _jsx("span", { className: "kpt-tree__label", children: node.label })] }), hasChildren(node) && isOpen(node) ? (_jsx("ul", { role: "group", children: renderList(node.children, level + 1) })) : null] }, index)));
-    return (_jsx("div", { className: cn('kpt-tree-host', className), ...rest, children: _jsx("ul", { className: "kpt-tree", role: "tree", children: renderList(nodes, 0) }) }));
+                        }, children: _jsx(KptIcon, { name: "chevron-right", className: cn('kpt-tree__chevron', isOpen(node) && 'is-open') }) })) : (_jsx("span", { className: "kpt-tree__spacer" })), node.icon ? _jsx(KptIcon, { name: node.icon, className: "kpt-tree__icon" }) : null, _jsx("span", { className: "kpt-tree__label", children: node.label })] }), hasChildren(node) && isOpen(node) ? _jsx("ul", { role: "group", children: renderList(node.children, level + 1) }) : null] }, index)));
+    return (_jsx("div", { className: cn('kpt-tree-host', className), ...rest, children: _jsx("ul", { ref: treeRef, className: "kpt-tree", role: "tree", children: renderList(nodes, 0) }) }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@konce-pt/react",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "description": "Open-source React 19 component library on the Koncept UI design system — the same kpt-* CSS layer and --kpt-* tokens as the Angular port. Zero runtime dependencies.",
   "license": "MIT",
   "author": "konce.pt",
@@ -65,17 +65,17 @@
     "leaflet": "^1.9.0"
   },
   "dependencies": {
-    "@konce-pt/datetime": "0.9.0",
-    "@konce-pt/chat": "0.9.0",
-    "@konce-pt/backdrop": "0.9.0",
-    "@konce-pt/chart": "0.9.0",
-    "@konce-pt/icons": "0.9.0",
-    "@konce-pt/roadmap": "0.9.0",
-    "@konce-pt/table": "0.9.0",
-    "@konce-pt/mention": "0.9.0",
-    "@konce-pt/tokens": "0.9.0",
-    "@konce-pt/map": "0.9.0",
-    "@konce-pt/i18n": "0.9.0"
+    "@konce-pt/chat": "0.10.0",
+    "@konce-pt/chart": "0.10.0",
+    "@konce-pt/backdrop": "0.10.0",
+    "@konce-pt/i18n": "0.10.0",
+    "@konce-pt/datetime": "0.10.0",
+    "@konce-pt/mention": "0.10.0",
+    "@konce-pt/tokens": "0.10.0",
+    "@konce-pt/table": "0.10.0",
+    "@konce-pt/roadmap": "0.10.0",
+    "@konce-pt/map": "0.10.0",
+    "@konce-pt/icons": "0.10.0"
   },
   "devDependencies": {
     "@types/react": "^19.2.0",