@underverse-ui/underverse 1.0.78 → 1.0.80

package/dist/index.d.cts

@@ -1691,6 +1691,8 @@ interface CategoryTreeSelectBaseProps {
     className?: string;
     /** Enable OverlayScrollbars for dropdown tree viewport. Default: false */
     useOverlayScrollbar?: boolean;
+    /** When true, only leaf nodes can be selected; parent nodes only expand/collapse */
+    leafOnlySelect?: boolean;
 }
 interface CategoryTreeSelectMultiProps extends CategoryTreeSelectBaseProps {
     singleSelect?: false;

package/dist/index.d.ts

@@ -1691,6 +1691,8 @@ interface CategoryTreeSelectBaseProps {
     className?: string;
     /** Enable OverlayScrollbars for dropdown tree viewport. Default: false */
     useOverlayScrollbar?: boolean;
+    /** When true, only leaf nodes can be selected; parent nodes only expand/collapse */
+    leafOnlySelect?: boolean;
 }
 interface CategoryTreeSelectMultiProps extends CategoryTreeSelectBaseProps {
     singleSelect?: false;

package/dist/index.js

@@ -3866,7 +3866,7 @@ var EmojiPicker = ({
         className
       ),
       children: [
-        showSearch && /* @__PURE__ */ jsx12("div", { className: cn("shrink-0 border-b p-3", isEmbedded ? "bg-transparent" : "bg-muted/30"), children: /* @__PURE__ */ jsxs7("div", { className: "relative", children: [
+        showSearch && /* @__PURE__ */ jsx12("div", { className: "shrink-0 border-b p-3 bg-transparent", children: /* @__PURE__ */ jsxs7("div", { className: "relative", children: [
           /* @__PURE__ */ jsx12(Search2, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }),
           /* @__PURE__ */ jsx12(
             "input",
@@ -3876,7 +3876,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"
               )
             }
@@ -16190,6 +16190,7 @@ function CategoryTreeSelect(props) {
     onNodeClick,
     className,
     useOverlayScrollbar = false,
+    leafOnlySelect = false,
     singleSelect = false
   } = props;
   const [isOpen, setIsOpen] = useState30(false);
@@ -16285,7 +16286,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;
@@ -16319,6 +16325,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__ */ jsxs39(
       "div",
       {
@@ -16331,9 +16338,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"
               ),
@@ -16373,7 +16379,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
                       }
@@ -16392,7 +16399,7 @@ function CategoryTreeSelect(props) {
   };
   const renderSearch = ({ sticky = true, className: className2 } = {}) => {
     if (!isSearchEnabled) return null;
-    return /* @__PURE__ */ jsx49("div", { className: cn(sticky && "sticky top-0 z-10 bg-popover/85 pb-2 backdrop-blur-xl", className2), children: /* @__PURE__ */ jsxs39("div", { className: "relative", children: [
+    return /* @__PURE__ */ jsx49("div", { className: cn(sticky && "sticky top-0 z-10 pb-2", className2), children: /* @__PURE__ */ jsxs39("div", { className: "relative", children: [
       /* @__PURE__ */ jsx49(Search6, { 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__ */ jsx49(
         "input",
@@ -16402,7 +16409,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",