@edux-design/tree-select 0.2.4 → 0.3.0

package/dist/index.js

@@ -26,10 +26,10 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// src/index.js
+// src/index.ts
 var index_exports = {};
 __export(index_exports, {
-  TreeSelect: () => TreeSelect
+  TreeSelect: () => TreeSelect3
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -47,6 +47,21 @@ var import_icons = require("@edux-design/icons");
 var import_menus = require("@edux-design/menus");
 var import_tooltips = require("@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;
@@ -55,6 +70,8 @@ var INDICATOR_INSET = HANDLE_WIDTH + TOGGLE_WIDTH + 12;
 
 // src/elements/TreeRow.jsx
 var import_jsx_runtime = require("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,
@@ -66,6 +83,11 @@ var TreeRow = ({
   dragAttributes,
   dragRef,
   rowRef,
+  rowAccessibility,
+  labelContext,
+  accessibleLabel,
+  rowClassName,
+  labelClassName,
   isDragging,
   isSelected,
   onRowClick,
@@ -87,13 +109,23 @@ var TreeRow = ({
   canDelete,
   onDelete,
   deleteTooltip,
-  additionalActionsMenu
+  additionalActionsMenu,
+  renderLabel
 }) => {
   const toggleLabel = isExpanded ? "Collapse item" : "Expand item";
   const label = item.node.label ?? item.node.id;
+  const labelContent = renderLabel ? renderLabel({
+    id: item.id,
+    node: item.node,
+    depth,
+    parentId: item.parentId,
+    hasChildren: item.hasChildren,
+    isExpanded,
+    ...labelContext
+  }) : label;
   const showToggle = item.hasChildren;
   const [additionalMenuOpen, setAdditionalMenuOpen] = import_react.default.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;
@@ -114,9 +146,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",
@@ -135,7 +170,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: {
@@ -155,7 +190,8 @@ var TreeRow = ({
           "button",
           {
             type: "button",
-            "aria-label": toggleLabel,
+            "aria-label": `${toggleLabel}: ${accessibleLabel}`,
+            "aria-expanded": isExpanded,
             onClick: () => onToggle(item.id),
             style: {
               width: 24,
@@ -177,6 +213,8 @@ var TreeRow = ({
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             import_forms.Checkbox,
             {
+              "aria-label": `${toggleLabel}: ${accessibleLabel}`,
+              "aria-expanded": isExpanded,
               checked: false,
               plus: !isExpanded,
               indeterminate: isExpanded,
@@ -188,19 +226,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
             }
@@ -209,17 +249,32 @@ 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",
-              ...labelStyle
+              ...!renderLabel ? labelStyle : {}
             },
-            children: label
+            children: labelContent
           }
         ),
         showActions ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
@@ -237,7 +292,7 @@ var TreeRow = ({
                     isBare: true,
                     icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.Plus, { "aria-hidden": "true" }),
                     "aria-label": "Add child",
-                    onClick: () => onAddChild == null ? void 0 : onAddChild(item.id)
+                    onClick: () => onAddChild?.(item.id)
                   }
                 ) }),
                 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tooltips.TooltipContent, { children: addChildTooltip ?? "Add child" })
@@ -250,7 +305,7 @@ var TreeRow = ({
                     isBare: true,
                     icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.List, { "aria-hidden": "true" }),
                     "aria-label": "Add sibling",
-                    onClick: () => onAddSibling == null ? void 0 : onAddSibling(item.id)
+                    onClick: () => onAddSibling?.(item.id)
                   }
                 ) }),
                 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tooltips.TooltipContent, { children: addSiblingTooltip ?? "Add sibling" })
@@ -263,7 +318,7 @@ var TreeRow = ({
                     isBare: true,
                     icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.Close, { "aria-hidden": "true" }),
                     "aria-label": "Delete item",
-                    onClick: () => onDelete == null ? void 0 : onDelete(item.id)
+                    onClick: () => onDelete?.(item.id)
                   }
                 ) }),
                 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tooltips.TooltipContent, { children: deleteTooltip ?? "Delete item" })
@@ -304,6 +359,12 @@ var TreeSortableRow = ({
   onToggle,
   onRowClick,
   rowRefs,
+  rowAccessibility,
+  labelContext,
+  accessibleLabel,
+  rowClassName,
+  labelClassName,
+  onRowSelect,
   isActive,
   isSelected,
   isGroupDragging,
@@ -326,7 +387,8 @@ var TreeSortableRow = ({
   canDelete,
   onDelete,
   deleteTooltip,
-  additionalActionsMenu
+  additionalActionsMenu,
+  renderLabel
 }) => {
   const {
     attributes,
@@ -350,12 +412,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__ */ (0, import_jsx_runtime2.jsx)(
     TreeRow,
@@ -369,6 +430,11 @@ var TreeSortableRow = ({
       dragAttributes: attributes,
       dragRef: setActivatorNodeRef,
       rowRef: rowRefCallback,
+      rowAccessibility,
+      labelContext,
+      accessibleLabel,
+      rowClassName,
+      labelClassName,
       isDragging: isDragging || isActive || isGroupDragging,
       isSelected,
       isEditable,
@@ -390,7 +456,8 @@ var TreeSortableRow = ({
       canDelete,
       onDelete,
       deleteTooltip,
-      additionalActionsMenu
+      additionalActionsMenu,
+      renderLabel
     }
   );
 };
@@ -442,11 +509,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);
@@ -746,7 +812,7 @@ var getDropIndicator = ({
 
 // src/elements/TreeSelect.jsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
-function TreeSelect({
+var TreeSelect = (0, import_react3.forwardRef)(function TreeSelect2({
   data,
   onDataChange,
   allowDragAndDrop = false,
@@ -765,9 +831,17 @@ function TreeSelect({
   defaultExpanded,
   expanded,
   onExpandedChange,
-  renderAdditionalActionsMenu
-}) {
-  var _a, _b;
+  renderAdditionalActionsMenu,
+  renderLabel,
+  onNodeActivate,
+  currentId,
+  getItemLabel,
+  rowClassName,
+  labelClassName,
+  "aria-label": ariaLabel = "Tree",
+  "aria-labelledby": ariaLabelledBy,
+  ...rootProps
+}, forwardedRef) {
   const [uncontrolledExpandedIds, setExpandedIds] = (0, import_react3.useState)(
     () => getExpandedIds(data ?? [], defaultExpanded)
   );
@@ -777,6 +851,8 @@ function TreeSelect({
   const [horizontalOffset, setHorizontalOffset] = (0, import_react3.useState)(0);
   const [selectedIds, setSelectedIds] = (0, import_react3.useState)(() => /* @__PURE__ */ new Set());
   const [lastSelectedId, setLastSelectedId] = (0, import_react3.useState)(null);
+  const [focusedId, setFocusedId] = (0, import_react3.useState)(null);
+  const [focusWithinId, setFocusWithinId] = (0, import_react3.useState)(null);
   const [editingId, setEditingId] = (0, import_react3.useState)(null);
   const [draftLabel, setDraftLabel] = (0, import_react3.useState)("");
   const idCounterRef = (0, import_react3.useRef)(0);
@@ -796,6 +872,22 @@ function TreeSelect({
     () => new Map(visibleItems.map((item) => [item.id, item])),
     [visibleItems]
   );
+  const getRowElement = (0, import_react3.useCallback)((id) => rowRefs.current.get(normaliseId(id)) ?? null, []);
+  (0, import_react3.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 = (0, import_react3.useMemo)(
     () => buildSiblingOrderMap(treeData),
     [treeData]
@@ -806,19 +898,18 @@ function TreeSelect({
   }, [maxDepth]);
   const resolvedLevelConfig = (0, import_react3.useCallback)(
     (depth) => {
-      var _a2, _b2, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m;
-      const defaults = (levelConfig == null ? void 0 : levelConfig.default) ?? {};
-      const perLevel = ((_a2 = levelConfig == null ? void 0 : levelConfig.levels) == null ? void 0 : _a2[depth]) ?? {};
+      const defaults = levelConfig?.default ?? {};
+      const perLevel = levelConfig?.levels?.[depth] ?? {};
       const editable = perLevel.editable ?? defaults.editable ?? isEditable;
       const actions = {
-        addChild: ((_b2 = perLevel.actions) == null ? void 0 : _b2.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 };
     },
@@ -838,7 +929,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)));
@@ -847,7 +938,7 @@ function TreeSelect({
   );
   const emitDataChange = (0, import_react3.useCallback)(
     (nextTree, meta) => {
-      onDataChange == null ? void 0 : onDataChange(nextTree, meta);
+      onDataChange?.(nextTree, meta);
     },
     [onDataChange]
   );
@@ -861,17 +952,16 @@ function TreeSelect({
       return prev;
     });
   }, [updateExpandedIds]);
-  const handleRowClick = (0, import_react3.useCallback)(
+  const handleRowSelection = (0, import_react3.useCallback)(
     (event, id) => {
-      var _a2, _b2;
       if (!allowMultiDrag) return;
       const hasMultiKey = event.metaKey || event.ctrlKey;
-      const parentId = ((_a2 = itemById.get(id)) == null ? void 0 : _a2.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 || (((_b2 = itemById.get(lastSelectedId ?? "")) == null ? void 0 : _b2.parentId) ?? null) !== parentId) {
+        if (anchorIndex < 0 || targetIndex < 0 || (itemById.get(lastSelectedId ?? "")?.parentId ?? null) !== parentId) {
           setSelectedIds(/* @__PURE__ */ new Set([id]));
           setLastSelectedId(id);
           return;
@@ -893,10 +983,9 @@ function TreeSelect({
         return;
       }
       setSelectedIds((prev) => {
-        var _a3;
         if (prev.size) {
           const firstSelected = prev.values().next().value;
-          const selectedParent = ((_a3 = itemById.get(firstSelected)) == null ? void 0 : _a3.parentId) ?? null;
+          const selectedParent = itemById.get(firstSelected)?.parentId ?? null;
           if (selectedParent !== parentId) {
             return /* @__PURE__ */ new Set([id]);
           }
@@ -923,6 +1012,16 @@ function TreeSelect({
       siblingOrderMap
     ]
   );
+  const activateItem = (0, import_react3.useCallback)((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 = (0, import_react3.useCallback)((event, id) => {
+    if (event.defaultPrevented || isTreeRowControl(event)) return;
+    handleRowSelection(event, id);
+    activateItem(event, id, "pointer");
+  }, [activateItem, handleRowSelection]);
   const draggedRootIds = (0, import_react3.useMemo)(
     () => getDraggedRootIds({
       activeId,
@@ -954,13 +1053,11 @@ function TreeSelect({
     setHorizontalOffset(event.delta.x);
   }, []);
   const handleDragOver = (0, import_react3.useCallback)((event) => {
-    var _a2;
-    if ((_a2 = event.over) == null ? void 0 : _a2.id) {
+    if (event.over?.id) {
       setOverId(normaliseId(event.over.id));
     }
   }, []);
   const handleDragEnd = (0, import_react3.useCallback)(() => {
-    var _a2;
     const projection = getDropProjection({
       items: visibleItems,
       activeId,
@@ -976,7 +1073,7 @@ function TreeSelect({
       return;
     }
     const { parentId, siblingIndex, projectedDepth } = projection;
-    const sourceParentId = ((_a2 = itemById.get(draggedRootIds[0] ?? activeId)) == null ? void 0 : _a2.parentId) ?? null;
+    const sourceParentId = itemById.get(draggedRootIds[0] ?? activeId)?.parentId ?? null;
     const { nextNodes, removedNodes } = removeNodes(treeData, draggedRootIds);
     if (!removedNodes.length) {
       setActiveId(null);
@@ -1089,8 +1186,7 @@ function TreeSelect({
   );
   const startEdit = (0, import_react3.useCallback)(
     (id) => {
-      var _a2, _b2, _c, _d;
-      const currentLabel = ((_b2 = (_a2 = itemById.get(id)) == null ? void 0 : _a2.node) == null ? void 0 : _b2.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));
     },
@@ -1118,6 +1214,21 @@ function TreeSelect({
   const cancelEdit = (0, import_react3.useCallback)(() => {
     setEditingId(null);
   }, []);
+  const renderLabelContent = (0, import_react3.useCallback)(
+    (item) => {
+      if (!item) return null;
+      if (!renderLabel) return item.node.label ?? item.id;
+      return renderLabel({
+        ...item,
+        isExpanded: expandedIds.has(item.id),
+        isCurrent: currentId != null && normaliseId(currentId) === item.id,
+        isSelected: selectedIds.has(item.id),
+        isFocused: focusWithinId === item.id,
+        getRowElement: () => null
+      });
+    },
+    [currentId, expandedIds, focusWithinId, renderLabel, selectedIds]
+  );
   const indicator = (0, import_react3.useMemo)(() => {
     if (!allowDragAndDrop) return null;
     return getDropIndicator({
@@ -1139,7 +1250,61 @@ function TreeSelect({
     visibleItems,
     maxDepth
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_tooltips2.TooltipProvider, { delayDuration: 200, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { position: "relative", padding: 8 }, children: allowDragAndDrop ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+  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__ */ (0, import_jsx_runtime3.jsx)(import_tooltips2.TooltipProvider, { delayDuration: 200, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { ...rootProps, "data-data-component": "tree-select", style: { position: "relative", padding: 8, ...rootProps.style }, children: allowDragAndDrop ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
     import_core.DndContext,
     {
       sensors,
@@ -1150,24 +1315,24 @@ function TreeSelect({
       onDragEnd: handleDragEnd,
       onDragCancel: handleDragCancel,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sortable2.SortableContext, { items: visibleItems.map((item) => item.id), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { ref: listRef, style: { position: "relative" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sortable2.SortableContext, { items: visibleItems.map((item) => item.id), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { ref: listRef, role: "tree", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-multiselectable": allowMultiDrag || void 0, style: { position: "relative" }, children: [
           indicator ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
             "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,
@@ -1182,6 +1347,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(
@@ -1206,7 +1377,8 @@ function TreeSelect({
                 canDelete: levelSettings.actions.delete,
                 onDelete: handleDelete,
                 deleteTooltip: levelSettings.tooltips.delete,
-                additionalActionsMenu
+                additionalActionsMenu,
+                renderLabel
               },
               item.id
             );
@@ -1215,20 +1387,27 @@ function TreeSelect({
         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_core.DragOverlay, { children: activeId ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
           "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` : ((_b = (_a = visibleItems.find((item) => item.id === activeId)) == null ? void 0 : _a.node) == null ? void 0 : _b.label) ?? activeId
+            children: draggedRootIds.length > 1 ? `${draggedRootIds.length} items` : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "span",
+              {
+                className: "inline-flex items-center gap-6",
+                children: renderLabelContent(
+                  visibleItems.find((item) => item.id === activeId)
+                ) ?? activeId
+              }
+            )
           }
         ) : null })
       ]
     }
-  ) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { ref: listRef, style: { position: "relative" }, children: visibleItems.map((item) => {
+  ) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("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,
@@ -1243,7 +1422,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),
@@ -1266,12 +1453,16 @@ function TreeSelect({
         canDelete: levelSettings.actions.delete,
         onDelete: handleDelete,
         deleteTooltip: levelSettings.tooltips.delete,
-        additionalActionsMenu
+        additionalActionsMenu,
+        renderLabel
       },
       item.id
     );
   }) }) }) });
-}
+});
+
+// src/index.ts
+var TreeSelect3 = TreeSelect;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   TreeSelect