@underverse-ui/underverse 1.0.78 → 1.0.80

package/api-reference.json

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

package/dist/index.cjs

@@ -4051,7 +4051,7 @@ var EmojiPicker = ({
         className
       ),
       children: [
-        showSearch && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: cn("shrink-0 border-b p-3", isEmbedded ? "bg-transparent" : "bg-muted/30"), children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "relative", children: [
+        showSearch && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "shrink-0 border-b p-3 bg-transparent", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "relative", children: [
           /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react4.Search, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }),
           /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
             "input",
@@ -4061,7 +4061,7 @@ var EmojiPicker = ({
               value: search,
               onChange: (e) => setSearch(e.target.value),
               className: cn(
-                "w-full rounded-full border border-border bg-background py-2 pl-9 pr-9 text-sm",
+                "w-full rounded-full border border-border bg-background/90 py-2 pl-9 pr-9 text-sm shadow-sm",
                 "placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary/20"
               )
             }
@@ -16375,6 +16375,7 @@ function CategoryTreeSelect(props) {
     onNodeClick,
     className,
     useOverlayScrollbar = false,
+    leafOnlySelect = false,
     singleSelect = false
   } = props;
   const [isOpen, setIsOpen] = (0, import_react22.useState)(false);
@@ -16470,7 +16471,12 @@ function CategoryTreeSelect(props) {
   };
   const handleSelect = (categoryId, category) => {
     if (viewOnly) return;
+    const hasChildren = (childrenMap.get(categoryId) ?? []).length > 0;
     onNodeClick?.(category);
+    if (leafOnlySelect && hasChildren) {
+      toggleExpand(categoryId);
+      return;
+    }
     if (!props.onChange) return;
     if (singleSelect) {
       const onChange = props.onChange;
@@ -16504,6 +16510,7 @@ function CategoryTreeSelect(props) {
     const hasChildren = children.length > 0;
     const isExpanded = hasChildren && (isSearchMode || expandedNodes.has(category.id));
     const isSelected = selectedIds.has(category.id);
+    const isSelectable = !viewOnly && (!leafOnlySelect || !hasChildren);
     return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
       "div",
       {
@@ -16516,9 +16523,8 @@ 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",
-                // Không phân biệt parent/child - đồng bộ màu
-                !viewOnly && "cursor-pointer",
-                !viewOnly && !isSelected && "hover:bg-accent/50",
+                !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"
               ),
@@ -16558,7 +16564,8 @@ function CategoryTreeSelect(props) {
                       {
                         className: cn(
                           "min-w-0 flex-1 text-sm leading-snug break-words [overflow-wrap:anywhere] transition-all duration-200",
-                          isSelected ? "font-semibold text-primary" : "text-foreground/80"
+                          isSelected ? "font-semibold text-primary" : "text-foreground/80",
+                          !isSelectable && "text-foreground"
                         ),
                         children: category.name
                       }
@@ -16577,7 +16584,7 @@ function CategoryTreeSelect(props) {
   };
   const renderSearch = ({ sticky = true, className: className2 } = {}) => {
     if (!isSearchEnabled) return null;
-    return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: cn(sticky && "sticky top-0 z-10 bg-popover/85 pb-2 backdrop-blur-xl", className2), children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "relative", children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: cn(sticky && "sticky top-0 z-10 pb-2", className2), children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "relative", children: [
       /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_lucide_react26.Search, { className: "absolute left-3.5 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground/60 transition-colors peer-focus:text-primary" }),
       /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
         "input",
@@ -16587,7 +16594,7 @@ function CategoryTreeSelect(props) {
           onChange: (e) => setQuery(e.target.value),
           placeholder: mergedLabels.searchPlaceholder,
           className: cn(
-            "peer w-full rounded-full bg-muted/40 py-2.5 pl-10 pr-10 text-sm",
+            "peer w-full rounded-full bg-background/90 py-2.5 pl-10 pr-10 text-sm shadow-sm",
             "border border-border/30",
             "focus:outline-none focus:bg-background focus:border-primary/30 focus:ring-2 focus:ring-primary/10",
             "transition-all duration-200",