@edux-design/tree-select 0.2.5 → 0.3.0

package/dist/index.mjs

@@ -1,5 +1,5 @@
 // src/elements/TreeSelect.jsx
-import React3, { useCallback as useCallback2, useMemo as useMemo2, useRef, useState } from "react";
+import React3, { forwardRef, useCallback as useCallback2, useImperativeHandle, useMemo as useMemo2, useRef, useState } from "react";
 import {
   DndContext,
   DragOverlay,
@@ -30,6 +30,21 @@ import {
   TooltipTrigger
 } from "@edux-design/tooltips";
 
+// src/elements/treeSelectInteraction.js
+function isTreeRowControl(event) {
+  const control = event.target?.closest?.(
+    'button, input, textarea, select, a[href], [contenteditable="true"], [role="button"], [role="checkbox"], [role="menuitem"], [tabindex]:not([tabindex="-1"]), [data-tree-interactive]'
+  );
+  return Boolean(control && control !== event.currentTarget && event.currentTarget.contains(control));
+}
+function hasActivationModifier(event) {
+  return event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;
+}
+function getTreeItemLabel(node, getItemLabel) {
+  if (getItemLabel) return getItemLabel(node);
+  return typeof node.label === "string" || typeof node.label === "number" ? String(node.label) : String(node.id);
+}
+
 // src/elements/treeSelectConstants.js
 var HANDLE_WIDTH = 28;
 var TOGGLE_WIDTH = 28;
@@ -38,6 +53,8 @@ var INDICATOR_INSET = HANDLE_WIDTH + TOGGLE_WIDTH + 12;
 
 // src/elements/TreeRow.jsx
 import { jsx, jsxs } from "react/jsx-runtime";
+var DRAG_ROW_BACKGROUND = "color-mix(in srgb, var(--color-fg-base) 4%, transparent)";
+var SELECTED_ROW_BACKGROUND = "color-mix(in srgb, var(--color-primary-600) 8%, transparent)";
 var TreeRow = ({
   item,
   depth,
@@ -49,6 +66,11 @@ var TreeRow = ({
   dragAttributes,
   dragRef,
   rowRef,
+  rowAccessibility,
+  labelContext,
+  accessibleLabel,
+  rowClassName,
+  labelClassName,
   isDragging,
   isSelected,
   onRowClick,
@@ -81,11 +103,12 @@ var TreeRow = ({
     depth,
     parentId: item.parentId,
     hasChildren: item.hasChildren,
-    isExpanded
+    isExpanded,
+    ...labelContext
   }) : label;
   const showToggle = item.hasChildren;
   const [additionalMenuOpen, setAdditionalMenuOpen] = React.useState(false);
-  const rowBackground = isDragging ? "rgba(0, 0, 0, 0.04)" : isSelected ? "rgba(15, 98, 254, 0.08)" : void 0;
+  const rowBackground = isDragging ? DRAG_ROW_BACKGROUND : isSelected ? SELECTED_ROW_BACKGROUND : void 0;
   const rowPaddingLeft = depth * INDENT_WIDTH + 8;
   const hasAdditionalActionsMenu = Boolean(additionalActionsMenu);
   const showActions = canAddChild || canAddSibling || canDelete || hasAdditionalActionsMenu;
@@ -106,9 +129,12 @@ var TreeRow = ({
     "div",
     {
       ref: rowRef,
-      onClick: (event) => onRowClick == null ? void 0 : onRowClick(event, item.id),
+      ...rowAccessibility,
+      onClick: (event) => onRowClick?.(event, item.id),
       "data-tree-row": item.id,
-      className: "transition-colors hover:bg-bg-primary-subtle",
+      "data-selected": isSelected || void 0,
+      "data-current": labelContext?.isCurrent || void 0,
+      className: ["transition-colors hover:bg-bg-primary-subtle focus-visible:shadow-focus", labelContext?.isCurrent ? "bg-bg-primary-subtle text-fg-primary-emphasis" : "", rowClassName].filter(Boolean).join(" "),
       style: {
         display: "flex",
         alignItems: "center",
@@ -127,7 +153,7 @@ var TreeRow = ({
             ...dragAttributes,
             ...dragHandleProps,
             ref: dragRef,
-            "aria-label": "Drag item",
+            "aria-label": `Move ${accessibleLabel}`,
             onClick: (event) => event.stopPropagation(),
             className: "border border-border-subtle bg-bg-base text-fg-base",
             style: {
@@ -147,7 +173,8 @@ var TreeRow = ({
           "button",
           {
             type: "button",
-            "aria-label": toggleLabel,
+            "aria-label": `${toggleLabel}: ${accessibleLabel}`,
+            "aria-expanded": isExpanded,
             onClick: () => onToggle(item.id),
             style: {
               width: 24,
@@ -169,6 +196,8 @@ var TreeRow = ({
           /* @__PURE__ */ jsx(
             Checkbox,
             {
+              "aria-label": `${toggleLabel}: ${accessibleLabel}`,
+              "aria-expanded": isExpanded,
               checked: false,
               plus: !isExpanded,
               indeterminate: isExpanded,
@@ -180,19 +209,21 @@ var TreeRow = ({
           "input",
           {
             type: "text",
+            "aria-label": `Edit ${accessibleLabel}`,
+            onClick: (event) => event.stopPropagation(),
             value: draftLabel,
             autoFocus: true,
             "data-tree-input": item.id,
             onChange: (event) => onDraftChange(event.target.value),
             onBlur: onCommitEdit,
             onKeyDown: (event) => {
+              event.stopPropagation();
               if (event.key === "Enter") onCommitEdit();
               if (event.key === "Escape") onCancelEdit();
             },
             style: {
               fontSize: 14,
               border: "none",
-              outline: "none",
               background: "transparent",
               padding: 0
             }
@@ -201,19 +232,30 @@ var TreeRow = ({
           "span",
           {
             onClick: (event) => {
-              if (!isEditable) return;
+              if (!isEditable || event.defaultPrevented || isTreeRowControl(event)) return;
               event.stopPropagation();
-              onStartEdit == null ? void 0 : onStartEdit();
+              onStartEdit?.();
             },
+            role: isEditable ? "button" : void 0,
+            tabIndex: isEditable ? 0 : void 0,
+            "aria-label": isEditable ? `Edit ${accessibleLabel}` : void 0,
+            onKeyDown: isEditable ? (event) => {
+              if (event.target !== event.currentTarget) return;
+              if (event.key === "Enter" || event.key === " ") {
+                event.preventDefault();
+                event.stopPropagation();
+                onStartEdit?.();
+              }
+            } : void 0,
             "data-tree-label": item.id,
+            className: [renderLabel ? "inline-flex items-center gap-6" : "", labelClassName].filter(Boolean).join(" "),
             style: {
               fontSize: 14,
+              display: "inline-flex",
+              alignItems: "center",
+              minHeight: isEditable ? 24 : void 0,
               cursor: isEditable ? "pointer" : "default",
-              ...renderLabel ? {
-                display: "inline-flex",
-                alignItems: "center",
-                gap: 6
-              } : labelStyle
+              ...!renderLabel ? labelStyle : {}
             },
             children: labelContent
           }
@@ -233,7 +275,7 @@ var TreeRow = ({
                     isBare: true,
                     icon: /* @__PURE__ */ jsx(Plus, { "aria-hidden": "true" }),
                     "aria-label": "Add child",
-                    onClick: () => onAddChild == null ? void 0 : onAddChild(item.id)
+                    onClick: () => onAddChild?.(item.id)
                   }
                 ) }),
                 /* @__PURE__ */ jsx(TooltipContent, { children: addChildTooltip ?? "Add child" })
@@ -246,7 +288,7 @@ var TreeRow = ({
                     isBare: true,
                     icon: /* @__PURE__ */ jsx(List, { "aria-hidden": "true" }),
                     "aria-label": "Add sibling",
-                    onClick: () => onAddSibling == null ? void 0 : onAddSibling(item.id)
+                    onClick: () => onAddSibling?.(item.id)
                   }
                 ) }),
                 /* @__PURE__ */ jsx(TooltipContent, { children: addSiblingTooltip ?? "Add sibling" })
@@ -259,7 +301,7 @@ var TreeRow = ({
                     isBare: true,
                     icon: /* @__PURE__ */ jsx(Close, { "aria-hidden": "true" }),
                     "aria-label": "Delete item",
-                    onClick: () => onDelete == null ? void 0 : onDelete(item.id)
+                    onClick: () => onDelete?.(item.id)
                   }
                 ) }),
                 /* @__PURE__ */ jsx(TooltipContent, { children: deleteTooltip ?? "Delete item" })
@@ -300,6 +342,12 @@ var TreeSortableRow = ({
   onToggle,
   onRowClick,
   rowRefs,
+  rowAccessibility,
+  labelContext,
+  accessibleLabel,
+  rowClassName,
+  labelClassName,
+  onRowSelect,
   isActive,
   isSelected,
   isGroupDragging,
@@ -347,12 +395,11 @@ var TreeSortableRow = ({
     () => ({
       ...listeners,
       onPointerDown: (event) => {
-        var _a;
-        (_a = listeners == null ? void 0 : listeners.onPointerDown) == null ? void 0 : _a.call(listeners, event);
-        onRowClick == null ? void 0 : onRowClick(event, item.id);
+        listeners?.onPointerDown?.(event);
+        onRowSelect?.(event, item.id);
       }
     }),
-    [item.id, listeners, onRowClick]
+    [item.id, listeners, onRowSelect]
   );
   return /* @__PURE__ */ jsx2(
     TreeRow,
@@ -366,6 +413,11 @@ var TreeSortableRow = ({
       dragAttributes: attributes,
       dragRef: setActivatorNodeRef,
       rowRef: rowRefCallback,
+      rowAccessibility,
+      labelContext,
+      accessibleLabel,
+      rowClassName,
+      labelClassName,
       isDragging: isDragging || isActive || isGroupDragging,
       isSelected,
       isEditable,
@@ -440,11 +492,10 @@ var collectDraggedIds = (items, rootIds) => {
 var getSelectedRootIds = (items, selectedIds) => {
   const itemById = new Map(items.map((item) => [item.id, item]));
   return items.filter((item) => selectedIds.has(item.id)).filter((item) => {
-    var _a, _b;
-    let parentId = (_a = itemById.get(item.id)) == null ? void 0 : _a.parentId;
+    let parentId = itemById.get(item.id)?.parentId;
     while (parentId) {
       if (selectedIds.has(parentId)) return false;
-      parentId = (_b = itemById.get(parentId)) == null ? void 0 : _b.parentId;
+      parentId = itemById.get(parentId)?.parentId;
     }
     return true;
   }).map((item) => item.id);
@@ -744,7 +795,7 @@ var getDropIndicator = ({
 
 // src/elements/TreeSelect.jsx
 import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-function TreeSelect({
+var TreeSelect = forwardRef(function TreeSelect2({
   data,
   onDataChange,
   allowDragAndDrop = false,
@@ -764,8 +815,16 @@ function TreeSelect({
   expanded,
   onExpandedChange,
   renderAdditionalActionsMenu,
-  renderLabel
-}) {
+  renderLabel,
+  onNodeActivate,
+  currentId,
+  getItemLabel,
+  rowClassName,
+  labelClassName,
+  "aria-label": ariaLabel = "Tree",
+  "aria-labelledby": ariaLabelledBy,
+  ...rootProps
+}, forwardedRef) {
   const [uncontrolledExpandedIds, setExpandedIds] = useState(
     () => getExpandedIds(data ?? [], defaultExpanded)
   );
@@ -775,6 +834,8 @@ function TreeSelect({
   const [horizontalOffset, setHorizontalOffset] = useState(0);
   const [selectedIds, setSelectedIds] = useState(() => /* @__PURE__ */ new Set());
   const [lastSelectedId, setLastSelectedId] = useState(null);
+  const [focusedId, setFocusedId] = useState(null);
+  const [focusWithinId, setFocusWithinId] = useState(null);
   const [editingId, setEditingId] = useState(null);
   const [draftLabel, setDraftLabel] = useState("");
   const idCounterRef = useRef(0);
@@ -794,6 +855,22 @@ function TreeSelect({
     () => new Map(visibleItems.map((item) => [item.id, item])),
     [visibleItems]
   );
+  const getRowElement = useCallback2((id) => rowRefs.current.get(normaliseId(id)) ?? null, []);
+  useImperativeHandle(forwardedRef, () => ({
+    getRowElement,
+    focusItem(id, options) {
+      const row = getRowElement(id);
+      if (!row) return false;
+      row.focus(options);
+      return true;
+    },
+    scrollToItem(id, options = { block: "nearest", inline: "nearest" }) {
+      const row = getRowElement(id);
+      if (!row || typeof row.scrollIntoView !== "function") return false;
+      row.scrollIntoView(options);
+      return true;
+    }
+  }), [getRowElement]);
   const siblingOrderMap = useMemo2(
     () => buildSiblingOrderMap(treeData),
     [treeData]
@@ -804,19 +881,18 @@ function TreeSelect({
   }, [maxDepth]);
   const resolvedLevelConfig = useCallback2(
     (depth) => {
-      var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m;
-      const defaults = (levelConfig == null ? void 0 : levelConfig.default) ?? {};
-      const perLevel = ((_a = levelConfig == null ? void 0 : levelConfig.levels) == null ? void 0 : _a[depth]) ?? {};
+      const defaults = levelConfig?.default ?? {};
+      const perLevel = levelConfig?.levels?.[depth] ?? {};
       const editable = perLevel.editable ?? defaults.editable ?? isEditable;
       const actions = {
-        addChild: ((_b = perLevel.actions) == null ? void 0 : _b.addChild) ?? ((_c = defaults.actions) == null ? void 0 : _c.addChild) ?? editable,
-        addSibling: ((_d = perLevel.actions) == null ? void 0 : _d.addSibling) ?? ((_e = defaults.actions) == null ? void 0 : _e.addSibling) ?? editable,
-        delete: ((_f = perLevel.actions) == null ? void 0 : _f.delete) ?? ((_g = defaults.actions) == null ? void 0 : _g.delete) ?? (editable && allowDelete)
+        addChild: perLevel.actions?.addChild ?? defaults.actions?.addChild ?? editable,
+        addSibling: perLevel.actions?.addSibling ?? defaults.actions?.addSibling ?? editable,
+        delete: perLevel.actions?.delete ?? defaults.actions?.delete ?? (editable && allowDelete)
       };
       const tooltips = {
-        addChild: ((_h = perLevel.tooltips) == null ? void 0 : _h.addChild) ?? ((_i = defaults.tooltips) == null ? void 0 : _i.addChild) ?? addChildTooltip,
-        addSibling: ((_j = perLevel.tooltips) == null ? void 0 : _j.addSibling) ?? ((_k = defaults.tooltips) == null ? void 0 : _k.addSibling) ?? addSiblingTooltip,
-        delete: ((_l = perLevel.tooltips) == null ? void 0 : _l.delete) ?? ((_m = defaults.tooltips) == null ? void 0 : _m.delete) ?? deleteTooltip
+        addChild: perLevel.tooltips?.addChild ?? defaults.tooltips?.addChild ?? addChildTooltip,
+        addSibling: perLevel.tooltips?.addSibling ?? defaults.tooltips?.addSibling ?? addSiblingTooltip,
+        delete: perLevel.tooltips?.delete ?? defaults.tooltips?.delete ?? deleteTooltip
       };
       return { editable, actions, tooltips };
     },
@@ -836,7 +912,7 @@ function TreeSelect({
     (updater) => {
       if (isExpandedControlled) {
         const next = updater(new Set(expandedIds));
-        onExpandedChange == null ? void 0 : onExpandedChange(next);
+        onExpandedChange?.(next);
         return;
       }
       setExpandedIds((prev) => updater(new Set(prev)));
@@ -845,7 +921,7 @@ function TreeSelect({
   );
   const emitDataChange = useCallback2(
     (nextTree, meta) => {
-      onDataChange == null ? void 0 : onDataChange(nextTree, meta);
+      onDataChange?.(nextTree, meta);
     },
     [onDataChange]
   );
@@ -859,17 +935,16 @@ function TreeSelect({
       return prev;
     });
   }, [updateExpandedIds]);
-  const handleRowClick = useCallback2(
+  const handleRowSelection = useCallback2(
     (event, id) => {
-      var _a, _b;
       if (!allowMultiDrag) return;
       const hasMultiKey = event.metaKey || event.ctrlKey;
-      const parentId = ((_a = itemById.get(id)) == null ? void 0 : _a.parentId) ?? null;
+      const parentId = itemById.get(id)?.parentId ?? null;
       const siblingOrder = siblingOrderMap.get(parentId) ?? [];
       if (event.shiftKey) {
         const anchorIndex = siblingOrder.indexOf(lastSelectedId);
         const targetIndex = siblingOrder.indexOf(id);
-        if (anchorIndex < 0 || targetIndex < 0 || (((_b = itemById.get(lastSelectedId ?? "")) == null ? void 0 : _b.parentId) ?? null) !== parentId) {
+        if (anchorIndex < 0 || targetIndex < 0 || (itemById.get(lastSelectedId ?? "")?.parentId ?? null) !== parentId) {
           setSelectedIds(/* @__PURE__ */ new Set([id]));
           setLastSelectedId(id);
           return;
@@ -891,10 +966,9 @@ function TreeSelect({
         return;
       }
       setSelectedIds((prev) => {
-        var _a2;
         if (prev.size) {
           const firstSelected = prev.values().next().value;
-          const selectedParent = ((_a2 = itemById.get(firstSelected)) == null ? void 0 : _a2.parentId) ?? null;
+          const selectedParent = itemById.get(firstSelected)?.parentId ?? null;
           if (selectedParent !== parentId) {
             return /* @__PURE__ */ new Set([id]);
           }
@@ -921,6 +995,16 @@ function TreeSelect({
       siblingOrderMap
     ]
   );
+  const activateItem = useCallback2((event, id, inputSource) => {
+    if (event.defaultPrevented || event.repeat || inputSource === "pointer" && event.button !== 0 || hasActivationModifier(event) || isTreeRowControl(event)) return;
+    const item = itemById.get(id);
+    if (item && !activeId) onNodeActivate?.({ ...item, event, inputSource });
+  }, [activeId, itemById, onNodeActivate]);
+  const handleRowClick = useCallback2((event, id) => {
+    if (event.defaultPrevented || isTreeRowControl(event)) return;
+    handleRowSelection(event, id);
+    activateItem(event, id, "pointer");
+  }, [activateItem, handleRowSelection]);
   const draggedRootIds = useMemo2(
     () => getDraggedRootIds({
       activeId,
@@ -952,13 +1036,11 @@ function TreeSelect({
     setHorizontalOffset(event.delta.x);
   }, []);
   const handleDragOver = useCallback2((event) => {
-    var _a;
-    if ((_a = event.over) == null ? void 0 : _a.id) {
+    if (event.over?.id) {
       setOverId(normaliseId(event.over.id));
     }
   }, []);
   const handleDragEnd = useCallback2(() => {
-    var _a;
     const projection = getDropProjection({
       items: visibleItems,
       activeId,
@@ -974,7 +1056,7 @@ function TreeSelect({
       return;
     }
     const { parentId, siblingIndex, projectedDepth } = projection;
-    const sourceParentId = ((_a = itemById.get(draggedRootIds[0] ?? activeId)) == null ? void 0 : _a.parentId) ?? null;
+    const sourceParentId = itemById.get(draggedRootIds[0] ?? activeId)?.parentId ?? null;
     const { nextNodes, removedNodes } = removeNodes(treeData, draggedRootIds);
     if (!removedNodes.length) {
       setActiveId(null);
@@ -1087,8 +1169,7 @@ function TreeSelect({
   );
   const startEdit = useCallback2(
     (id) => {
-      var _a, _b, _c, _d;
-      const currentLabel = ((_b = (_a = itemById.get(id)) == null ? void 0 : _a.node) == null ? void 0 : _b.label) ?? ((_d = (_c = itemById.get(id)) == null ? void 0 : _c.node) == null ? void 0 : _d.id) ?? "";
+      const currentLabel = itemById.get(id)?.node?.label ?? itemById.get(id)?.node?.id ?? "";
       setEditingId(id);
       setDraftLabel(String(currentLabel));
     },
@@ -1121,15 +1202,15 @@ function TreeSelect({
       if (!item) return null;
       if (!renderLabel) return item.node.label ?? item.id;
       return renderLabel({
-        id: item.id,
-        node: item.node,
-        depth: item.depth,
-        parentId: item.parentId,
-        hasChildren: item.hasChildren,
-        isExpanded: expandedIds.has(item.id)
+        ...item,
+        isExpanded: expandedIds.has(item.id),
+        isCurrent: currentId != null && normaliseId(currentId) === item.id,
+        isSelected: selectedIds.has(item.id),
+        isFocused: focusWithinId === item.id,
+        getRowElement: () => null
       });
     },
-    [expandedIds, renderLabel]
+    [currentId, expandedIds, focusWithinId, renderLabel, selectedIds]
   );
   const indicator = useMemo2(() => {
     if (!allowDragAndDrop) return null;
@@ -1152,7 +1233,61 @@ function TreeSelect({
     visibleItems,
     maxDepth
   ]);
-  return /* @__PURE__ */ jsx3(TooltipProvider, { delayDuration: 200, children: /* @__PURE__ */ jsx3("div", { style: { position: "relative", padding: 8 }, children: allowDragAndDrop ? /* @__PURE__ */ jsxs2(
+  const rowContext = (item) => ({
+    ...item,
+    isExpanded: expandedIds.has(item.id),
+    isCurrent: currentId != null && normaliseId(currentId) === item.id,
+    isSelected: selectedIds.has(item.id),
+    isFocused: focusWithinId === item.id,
+    getRowElement: () => getRowElement(item.id)
+  });
+  const rowAccessibility = (item) => ({
+    role: "treeitem",
+    "aria-label": getTreeItemLabel(item.node, getItemLabel),
+    "aria-level": item.depth + 1,
+    "aria-expanded": item.hasChildren ? expandedIds.has(item.id) : void 0,
+    "aria-selected": allowMultiDrag ? selectedIds.has(item.id) : void 0,
+    "aria-current": currentId != null && normaliseId(currentId) === item.id ? "page" : void 0,
+    "aria-posinset": (siblingOrderMap.get(item.parentId) || []).indexOf(item.id) + 1,
+    "aria-setsize": (siblingOrderMap.get(item.parentId) || []).length,
+    tabIndex: (focusedId && itemById.has(focusedId) ? focusedId : visibleItems[0]?.id) === item.id ? 0 : -1,
+    onFocus: () => {
+      setFocusedId(item.id);
+      setFocusWithinId(item.id);
+    },
+    onBlur: (event) => {
+      if (!event.currentTarget.contains(event.relatedTarget)) setFocusWithinId(null);
+    },
+    onKeyDown: (event) => {
+      if (event.target !== event.currentTarget || event.defaultPrevented) return;
+      if (event.repeat && (event.key === "Enter" || event.key === " ")) {
+        event.preventDefault();
+        return;
+      }
+      const index = visibleItems.findIndex((row) => row.id === item.id);
+      let target;
+      if (event.key === "ArrowDown") target = visibleItems[Math.min(index + 1, visibleItems.length - 1)];
+      if (event.key === "ArrowUp") target = visibleItems[Math.max(index - 1, 0)];
+      if (event.key === "Home") target = visibleItems[0];
+      if (event.key === "End") target = visibleItems[visibleItems.length - 1];
+      if (event.key === "ArrowRight" && item.hasChildren) {
+        if (!expandedIds.has(item.id)) toggleExpanded(item.id);
+        else target = visibleItems[index + 1];
+      }
+      if (event.key === "ArrowLeft") {
+        if (item.hasChildren && expandedIds.has(item.id)) toggleExpanded(item.id);
+        else target = itemById.get(item.parentId);
+      }
+      if (event.key === "F2" && resolvedLevelConfig(item.depth).editable) startEdit(item.id);
+      if (event.key === "Enter" || event.key === " ") {
+        handleRowSelection(event, item.id);
+        activateItem(event, item.id, "keyboard");
+      }
+      if (["ArrowDown", "ArrowUp", "ArrowRight", "ArrowLeft", "Home", "End", "F2", " ", "Enter"].includes(event.key)) event.preventDefault();
+      if (target) getRowElement(target.id)?.focus();
+    }
+  });
+  return /* @__PURE__ */ jsx3(TooltipProvider, { delayDuration: 200, children: /* @__PURE__ */ jsx3("div", { ...rootProps, "data-data-component": "tree-select", style: { position: "relative", padding: 8, ...rootProps.style }, children: allowDragAndDrop ? /* @__PURE__ */ jsxs2(
     DndContext,
     {
       sensors,
@@ -1163,24 +1298,24 @@ function TreeSelect({
       onDragEnd: handleDragEnd,
       onDragCancel: handleDragCancel,
       children: [
-        /* @__PURE__ */ jsx3(SortableContext, { items: visibleItems.map((item) => item.id), children: /* @__PURE__ */ jsxs2("div", { ref: listRef, style: { position: "relative" }, children: [
+        /* @__PURE__ */ jsx3(SortableContext, { items: visibleItems.map((item) => item.id), children: /* @__PURE__ */ jsxs2("div", { ref: listRef, role: "tree", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-multiselectable": allowMultiDrag || void 0, style: { position: "relative" }, children: [
           indicator ? /* @__PURE__ */ jsx3(
             "div",
             {
+              className: "bg-bg-primary-base",
               style: {
                 position: "absolute",
                 top: indicator.top,
                 left: indicator.left,
                 right: 8,
                 height: 2,
-                background: "#0f62fe",
                 borderRadius: 999
               }
             }
           ) : null,
           visibleItems.map((item) => {
             const levelSettings = resolvedLevelConfig(item.depth);
-            const additionalActionsMenu = renderAdditionalActionsMenu == null ? void 0 : renderAdditionalActionsMenu({
+            const additionalActionsMenu = renderAdditionalActionsMenu?.({
               id: item.id,
               node: item.node,
               depth: item.depth,
@@ -1195,6 +1330,12 @@ function TreeSelect({
                 onToggle: toggleExpanded,
                 onRowClick: handleRowClick,
                 rowRefs,
+                onRowSelect: handleRowSelection,
+                rowAccessibility: rowAccessibility(item),
+                labelContext: rowContext(item),
+                accessibleLabel: getTreeItemLabel(item.node, getItemLabel),
+                rowClassName: typeof rowClassName === "function" ? rowClassName(rowContext(item)) : rowClassName,
+                labelClassName: typeof labelClassName === "function" ? labelClassName(rowContext(item)) : labelClassName,
                 isActive: activeId === item.id,
                 isSelected: selectedIds.has(item.id),
                 isGroupDragging: Boolean(
@@ -1229,20 +1370,15 @@ function TreeSelect({
         /* @__PURE__ */ jsx3(DragOverlay, { children: activeId ? /* @__PURE__ */ jsx3(
           "div",
           {
-            className: "border border-border-subtle bg-bg-base text-fg-base",
+            className: "border border-border-subtle bg-bg-base text-fg-base shadow-lg",
             style: {
               padding: "6px 8px",
-              borderRadius: 6,
-              boxShadow: "0 8px 24px rgba(0, 0, 0, 0.12)"
+              borderRadius: 6
             },
             children: draggedRootIds.length > 1 ? `${draggedRootIds.length} items` : /* @__PURE__ */ jsx3(
               "span",
               {
-                style: {
-                  display: "inline-flex",
-                  alignItems: "center",
-                  gap: 6
-                },
+                className: "inline-flex items-center gap-6",
                 children: renderLabelContent(
                   visibleItems.find((item) => item.id === activeId)
                 ) ?? activeId
@@ -1252,9 +1388,9 @@ function TreeSelect({
         ) : null })
       ]
     }
-  ) : /* @__PURE__ */ jsx3("div", { ref: listRef, style: { position: "relative" }, children: visibleItems.map((item) => {
+  ) : /* @__PURE__ */ jsx3("div", { ref: listRef, role: "tree", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-multiselectable": allowMultiDrag || void 0, style: { position: "relative" }, children: visibleItems.map((item) => {
     const levelSettings = resolvedLevelConfig(item.depth);
-    const additionalActionsMenu = renderAdditionalActionsMenu == null ? void 0 : renderAdditionalActionsMenu({
+    const additionalActionsMenu = renderAdditionalActionsMenu?.({
       id: item.id,
       node: item.node,
       depth: item.depth,
@@ -1269,7 +1405,15 @@ function TreeSelect({
         isExpanded: expandedIds.has(item.id),
         onToggle: toggleExpanded,
         onRowClick: handleRowClick,
-        rowRef: void 0,
+        rowRef: (row) => {
+          if (row) rowRefs.current.set(item.id, row);
+          else rowRefs.current.delete(item.id);
+        },
+        rowAccessibility: rowAccessibility(item),
+        labelContext: rowContext(item),
+        accessibleLabel: getTreeItemLabel(item.node, getItemLabel),
+        rowClassName: typeof rowClassName === "function" ? rowClassName(rowContext(item)) : rowClassName,
+        labelClassName: typeof labelClassName === "function" ? labelClassName(rowContext(item)) : labelClassName,
         isDraggable: false,
         isDragging: false,
         isSelected: selectedIds.has(item.id),
@@ -1298,7 +1442,10 @@ function TreeSelect({
       item.id
     );
   }) }) }) });
-}
+});
+
+// src/index.ts
+var TreeSelect3 = TreeSelect;
 export {
-  TreeSelect
+  TreeSelect3 as TreeSelect
 };

package/docs/DS15_INVENTORY.md

@@ -0,0 +1,52 @@
+# DS15 interaction inventory
+
+Inspected 29 October 2026 against Payload's installed public TreeSelect 0.2.5
+and the local Edux source. Payload files were read only.
+
+| Host | Interaction and local ownership | Replacement boundary |
+| --- | --- | --- |
+| Manuscripts `ManuScriptNavigationTree` | Delegated row click resolves domain metadata and aborts previous asynchronous editor navigation; filtered trees disable reordering. `onDataChange` consumes exact drag metadata. | `onNodeActivate` ID resolves existing metadata. Keep editor readiness, abort controllers and reorder transactions local. |
+| Curricula `CurriculaBuilderPanel` | Delegated click opens node editor. Labels are not inline editable at any configured level; add/delete and multi-drag remain active. | `onNodeActivate`; keep mutations, expansion and selection of domain editor local. |
+| Book Setup `PageBuilderBookSetupNavigationPanel` | Filtered content block tree delegates IDs to section/view changes. Rich labels include icons. | `onNodeActivate`, `currentId`, accessible name override and public row/label classes. Keep filtering and view/section routing local. |
+| Rights `PermissionsWorkspaceSourceNavigation` | Rich labels contain focusable role-button and status tooltip; selected label ref locates private ancestor for nearest scroll. | Row activation/current state, `getItemLabel`, imperative `scrollToItem`; remove nested navigation button. Keep source permissions/status/search local. |
+| Rights `PermissionsWorkspaceAssetNavigation` | Rich label role-button duplicates keyboard navigation; selected label ref scrapes ancestor for scroll. | Row activation/current state, `getItemLabel`, `scrollToItem`; remove nested navigation button. Keep asset mapping/search local. |
+
+Also inspected `pages/PageBuilderBookSetupEdit`: its debug summary and section
+handler scrape row IDs from DOM events, but the handler already accepts a string
+ID. Passing the activation ID at the navigation-panel boundary removes the event
+lookup without moving debug logging or section routing into Edux. No host source
+is modified by this package task.
+
+## Compatibility baseline
+
+The registry 0.2.5 archive matches the source interaction baseline. Existing
+tracked source token work (`be4a9b2`) replaces registry raw state colours/drop
+indicator/shadow classes with semantic equivalents; DS15 retains that source
+baseline and introduces no tokens or further geometry changes. Payload's
+installed 0.2.5 runtime is locally patched and has
+roving row focus, tree/treeitem roles, level/position/set-size attributes,
+`aria-selected` for multi-drag, labelled edit/toggle/move controls and keyboard
+arrow/Home/End/F2 handling. Source and registry lack these. The extension adds supported equivalents while
+preserving registry geometry, data operations and drag metadata.
+
+The installed runtime also uses `--theme-radius` and `--theme-hover-surface`
+fallbacks and `data-selected`; these are local patch hooks, not registry APIs.
+The extension retains source semantic token styling and registry geometry; it
+does not adopt the local theme variable overrides. Public current/selection
+context and row/label classes replace host styling selectors.
+
+## Interaction decisions
+
+- Current item is controlled by `currentId`. Activation never changes it implicitly;
+  hosts can wait for navigation success. `aria-current="page"` expresses current
+  location; `aria-selected` continues to mean drag selection.
+- Plain row pointer clicks and row Enter/Space activate once. Ctrl/Meta/Shift/Alt
+  suppress activation; Ctrl/Meta/Shift retain existing multi-selection behaviour.
+- `defaultPrevented`, editable inputs, row controls and interactive custom label
+  descendants suppress activation. Pointer selection from a drag handle never
+  invokes navigation. Keyboard events from descendants stay with that control.
+- Visible row access is explicit: get element, focus and scroll. Collapsed,
+  filtered and removed targets return null/false. No method implicitly expands
+  or changes current item, selection, routing or domain data.
+- Rich labels need an accessible name: use `getItemLabel(node)`; fallback is a
+  string/number label, otherwise the stable normalised ID.