@underverse-ui/underverse 1.0.89 → 1.0.91

package/api-reference.json

@@ -1,6 +1,6 @@
 {
   "package": "@underverse-ui/underverse",
-  "version": "1.0.89",
+  "version": "1.0.91",
   "sourceEntry": "src/index.ts",
   "totalExports": 225,
   "exports": [

package/dist/index.cjs

@@ -16421,6 +16421,25 @@ Slider.displayName = "Slider";
 var import_lucide_react25 = require("lucide-react");
 var import_react21 = __toESM(require("react"), 1);
 var import_jsx_runtime48 = require("react/jsx-runtime");
+function resolveKeyboardEventElement(target) {
+  if (target instanceof Element) return target;
+  if (target instanceof Node) return target.parentElement;
+  return null;
+}
+function isEditableKeyboardTarget(target) {
+  const element = resolveKeyboardEventElement(target);
+  if (!element) return false;
+  if (element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement || element instanceof HTMLSelectElement) {
+    return true;
+  }
+  if (element instanceof HTMLElement && element.isContentEditable) {
+    return true;
+  }
+  if (element.closest?.('[contenteditable=""],[contenteditable="true"],[contenteditable="plaintext-only"]') || element.closest?.('[role="textbox"]')) {
+    return true;
+  }
+  return false;
+}
 function OverlayControls({
   mode,
   value,
@@ -16519,7 +16538,7 @@ function OverlayControls({
   import_react21.default.useEffect(() => {
     if (!enableKeyboardShortcuts) return;
     const handleKeyDown2 = (e) => {
-      if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) return;
+      if (isEditableKeyboardTarget(e.target)) return;
       switch (e.key) {
         case " ":
         case "k":
@@ -16863,6 +16882,11 @@ var defaultLabels = {
   searchPlaceholder: "Search...",
   noResultsText: "No results found"
 };
+var TREE_NODE_BASE_PADDING_REM = 0.75;
+var TREE_NODE_INDENT_REM = 1;
+var TREE_BRANCH_OFFSET_CLASS = "ml-1.5 pl-1.5";
+var TREE_NODE_GAP_CLASS = "gap-1.5";
+var TREE_EXPANDER_PLACEHOLDER_CLASS = "w-5";
 function getInitialExpandedNodes(categories, defaultExpanded, viewOnly, inline) {
   if (!(viewOnly || inline) || !defaultExpanded) return /* @__PURE__ */ new Set();
   const parentIds = /* @__PURE__ */ new Set();
@@ -17051,13 +17075,14 @@ function CategoryTreeSelect(props) {
             {
               onClick: () => !viewOnly && handleSelect(category.id, category),
               className: cn(
-                "relative flex min-w-0 items-center gap-2.5 px-3 py-2.5 min-h-11 transition-all duration-200 rounded-3xl",
+                "relative flex min-w-0 items-center px-3 py-2.5 min-h-11 transition-all duration-200 rounded-3xl",
+                TREE_NODE_GAP_CLASS,
                 !viewOnly && (isSelectable ? "cursor-pointer" : "cursor-default"),
                 isSelectable && !isSelected && "hover:bg-accent/50",
                 // Selected state - đồng bộ cho tất cả
                 !viewOnly && isSelected && "bg-accent/40"
               ),
-              style: { paddingLeft: `${level * 1.25 + 0.75}rem` },
+              style: { paddingLeft: `${level * TREE_NODE_INDENT_REM + TREE_NODE_BASE_PADDING_REM}rem` },
               children: [
                 hasChildren ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
                   "button",
@@ -17068,7 +17093,7 @@ function CategoryTreeSelect(props) {
                       toggleExpand(category.id);
                     },
                     className: cn(
-                      "p-1.5 rounded-lg transition-all duration-200",
+                      "p-0.5 rounded-lg transition-all duration-200",
                       "hover:scale-110 active:scale-95",
                       "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50",
                       isExpanded && "text-primary",
@@ -17077,16 +17102,16 @@ function CategoryTreeSelect(props) {
                     disabled: isSearchMode,
                     children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: cn("transition-transform duration-200", isExpanded && "rotate-90"), children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_lucide_react26.ChevronRight, { className: "w-4 h-4" }) })
                   }
-                ) : /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "w-7" }),
+                ) : /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: TREE_EXPANDER_PLACEHOLDER_CLASS }),
                 viewOnly ? (
                   // View-only mode: just display the name with folder icon
-                  /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "flex min-w-0 items-center gap-2.5", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: cn("flex min-w-0 items-center", TREE_NODE_GAP_CLASS), children: [
                     category.icon ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "h-4 w-4 shrink-0 flex items-center justify-center text-muted-foreground/60", children: category.icon }) : hasChildren ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_lucide_react26.FolderTree, { className: "h-4 w-4 shrink-0 text-muted-foreground/60" }) : /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "h-1.5 w-1.5 shrink-0 rounded-full bg-muted-foreground/40" }),
                     /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "min-w-0 text-sm font-medium leading-snug break-words [overflow-wrap:anywhere]", children: category.name })
                   ] })
                 ) : (
                   // Single/Multi select mode: icon + text + badge
-                  /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "flex min-w-0 flex-1 items-center gap-2.5 overflow-hidden", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: cn("flex min-w-0 flex-1 items-center overflow-hidden", TREE_NODE_GAP_CLASS), children: [
                     category.icon && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "h-4 w-4 shrink-0 flex items-center justify-center text-current", children: category.icon }),
                     /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
                       "span",
@@ -17105,7 +17130,17 @@ function CategoryTreeSelect(props) {
               ]
             }
           ),
-          hasChildren && isExpanded && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: cn("ml-2 pl-2 border-l-2 border-dashed border-border/50", "animate-in slide-in-from-top-2 fade-in-50 duration-200"), children: children.map((child) => renderCategory(child, level + 1)) })
+          hasChildren && isExpanded && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+            "div",
+            {
+              className: cn(
+                TREE_BRANCH_OFFSET_CLASS,
+                "border-l-2 border-dashed border-border/50",
+                "animate-in slide-in-from-top-2 fade-in-50 duration-200"
+              ),
+              children: children.map((child) => renderCategory(child, level + 1))
+            }
+          )
         ]
       },
       category.id