@underverse-ui/underverse 0.2.44 → 0.2.46

package/dist/index.d.cts

@@ -1000,20 +1000,35 @@ interface CategoryTreeSelectLabels {
     /** Text shown when categories are selected, receives count as parameter */
     selectedText?: (count: number) => string;
 }
-interface CategoryTreeSelectProps {
+interface CategoryTreeSelectBaseProps {
     categories: Category[];
-    value?: number[];
-    onChange?: (selectedIds: number[]) => void;
     placeholder?: string;
     disabled?: boolean;
     /** When true, renders as a read-only tree view without select functionality */
     viewOnly?: boolean;
-    /** Default expanded state for all nodes in viewOnly mode */
+    /** Default expanded state for all nodes */
     defaultExpanded?: boolean;
     /** i18n labels for localization */
     labels?: CategoryTreeSelectLabels;
+    /** When true, render tree directly without dropdown trigger */
+    inline?: boolean;
+    /** Callback when a node is clicked (useful for navigation) */
+    onNodeClick?: (node: Category) => void;
+    /** Custom class for the tree container */
+    className?: string;
+}
+interface CategoryTreeSelectMultiProps extends CategoryTreeSelectBaseProps {
+    singleSelect?: false;
+    value?: number[];
+    onChange?: (selectedIds: number[]) => void;
+}
+interface CategoryTreeSelectSingleProps extends CategoryTreeSelectBaseProps {
+    singleSelect: true;
+    value?: number | null;
+    onChange?: (selectedId: number | null) => void;
 }
-declare function CategoryTreeSelect({ categories, value, onChange, placeholder, disabled, viewOnly, defaultExpanded, labels, }: CategoryTreeSelectProps): react_jsx_runtime.JSX.Element;
+type CategoryTreeSelectProps = CategoryTreeSelectMultiProps | CategoryTreeSelectSingleProps;
+declare function CategoryTreeSelect(props: CategoryTreeSelectProps): react_jsx_runtime.JSX.Element;
 
 type Fit = "cover" | "contain";
 interface SmartImageProps {

package/dist/index.d.ts

@@ -1000,20 +1000,35 @@ interface CategoryTreeSelectLabels {
     /** Text shown when categories are selected, receives count as parameter */
     selectedText?: (count: number) => string;
 }
-interface CategoryTreeSelectProps {
+interface CategoryTreeSelectBaseProps {
     categories: Category[];
-    value?: number[];
-    onChange?: (selectedIds: number[]) => void;
     placeholder?: string;
     disabled?: boolean;
     /** When true, renders as a read-only tree view without select functionality */
     viewOnly?: boolean;
-    /** Default expanded state for all nodes in viewOnly mode */
+    /** Default expanded state for all nodes */
     defaultExpanded?: boolean;
     /** i18n labels for localization */
     labels?: CategoryTreeSelectLabels;
+    /** When true, render tree directly without dropdown trigger */
+    inline?: boolean;
+    /** Callback when a node is clicked (useful for navigation) */
+    onNodeClick?: (node: Category) => void;
+    /** Custom class for the tree container */
+    className?: string;
+}
+interface CategoryTreeSelectMultiProps extends CategoryTreeSelectBaseProps {
+    singleSelect?: false;
+    value?: number[];
+    onChange?: (selectedIds: number[]) => void;
+}
+interface CategoryTreeSelectSingleProps extends CategoryTreeSelectBaseProps {
+    singleSelect: true;
+    value?: number | null;
+    onChange?: (selectedId: number | null) => void;
 }
-declare function CategoryTreeSelect({ categories, value, onChange, placeholder, disabled, viewOnly, defaultExpanded, labels, }: CategoryTreeSelectProps): react_jsx_runtime.JSX.Element;
+type CategoryTreeSelectProps = CategoryTreeSelectMultiProps | CategoryTreeSelectSingleProps;
+declare function CategoryTreeSelect(props: CategoryTreeSelectProps): react_jsx_runtime.JSX.Element;
 
 type Fit = "cover" | "contain";
 interface SmartImageProps {

package/dist/index.js

@@ -1937,7 +1937,7 @@ Label.displayName = "Label";
 import Image2 from "next/image";
 import React9 from "react";
 import { jsx as jsx11 } from "react/jsx-runtime";
-var DEFAULT_FALLBACK = "/images/products/hoa-hong-do.png";
+var DEFAULT_FALLBACK = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'%3E%3Crect fill='%23f3f4f6' width='400' height='400'/%3E%3Cpath fill='%239ca3af' d='M160 150h80v60h-80z'/%3E%3Ccircle fill='%239ca3af' cx='180' cy='130' r='20'/%3E%3Cpath fill='%239ca3af' d='M120 240l60-60 40 40 40-30 60 50v40H120z'/%3E%3C/svg%3E";
 var FAILED_SRCS = /* @__PURE__ */ new Set();
 function SmartImage({
   src,
@@ -7951,19 +7951,23 @@ var defaultLabels = {
   emptyText: "No categories",
   selectedText: (count) => `${count} selected`
 };
-function CategoryTreeSelect({
-  categories,
-  value = [],
-  onChange,
-  placeholder = "Select category",
-  disabled,
-  viewOnly = false,
-  defaultExpanded = false,
-  labels
-}) {
+function CategoryTreeSelect(props) {
+  const {
+    categories,
+    placeholder = "Select category",
+    disabled,
+    viewOnly = false,
+    defaultExpanded = false,
+    labels,
+    inline = false,
+    onNodeClick,
+    className,
+    singleSelect = false
+  } = props;
   const [isOpen, setIsOpen] = useState25(false);
   const [expandedNodes, setExpandedNodes] = useState25(/* @__PURE__ */ new Set());
   const mergedLabels = { ...defaultLabels, ...labels };
+  const valueArray = singleSelect ? props.value != null ? [props.value] : [] : props.value || [];
   const parentCategories = categories.filter((c) => !c.parent_id);
   const childrenMap = /* @__PURE__ */ new Map();
   categories.forEach((cat) => {
@@ -7975,11 +7979,11 @@ function CategoryTreeSelect({
     }
   });
   useEffect15(() => {
-    if (viewOnly && defaultExpanded) {
+    if ((viewOnly || inline) && defaultExpanded) {
       const allParentIds = categories.filter((c) => childrenMap.has(c.id)).map((c) => c.id);
       setExpandedNodes(new Set(allParentIds));
     }
-  }, [viewOnly, defaultExpanded, categories]);
+  }, [viewOnly, inline, defaultExpanded, categories]);
   const toggleExpand = (id) => {
     const newExpanded = new Set(expandedNodes);
     if (newExpanded.has(id)) {
@@ -7990,25 +7994,41 @@ function CategoryTreeSelect({
     setExpandedNodes(newExpanded);
   };
   const handleSelect = (categoryId, category) => {
-    if (viewOnly || !onChange) return;
-    const newSelected = new Set(value);
-    if (newSelected.has(categoryId)) {
-      newSelected.delete(categoryId);
-      const children = childrenMap.get(categoryId) || [];
-      children.forEach((child) => newSelected.delete(child.id));
+    if (viewOnly) return;
+    onNodeClick?.(category);
+    if (!props.onChange) return;
+    if (singleSelect) {
+      const onChange = props.onChange;
+      const currentValue = props.value;
+      if (currentValue === categoryId) {
+        onChange(null);
+      } else {
+        onChange(categoryId);
+      }
+      if (!inline) {
+        setIsOpen(false);
+      }
     } else {
-      newSelected.add(categoryId);
-      if (category.parent_id) {
-        newSelected.add(category.parent_id);
+      const onChange = props.onChange;
+      const newSelected = new Set(valueArray);
+      if (newSelected.has(categoryId)) {
+        newSelected.delete(categoryId);
+        const children = childrenMap.get(categoryId) || [];
+        children.forEach((child) => newSelected.delete(child.id));
+      } else {
+        newSelected.add(categoryId);
+        if (category.parent_id) {
+          newSelected.add(category.parent_id);
+        }
       }
+      onChange(Array.from(newSelected));
     }
-    onChange(Array.from(newSelected));
   };
   const renderCategory = (category, level = 0) => {
     const children = childrenMap.get(category.id) || [];
     const hasChildren = children.length > 0;
     const isExpanded = expandedNodes.has(category.id);
-    const isSelected = value.includes(category.id);
+    const isSelected = valueArray.includes(category.id);
     return /* @__PURE__ */ jsxs31("div", { children: [
       /* @__PURE__ */ jsxs31(
         "div",
@@ -8037,8 +8057,23 @@ function CategoryTreeSelect({
             viewOnly ? (
               // View-only mode: just display the name
               /* @__PURE__ */ jsx36("span", { className: "text-sm", children: category.name })
+            ) : singleSelect ? (
+              // Single select mode: radio-style indicator
+              /* @__PURE__ */ jsxs31("div", { onClick: () => handleSelect(category.id, category), className: "flex items-center gap-2 flex-1", children: [
+                /* @__PURE__ */ jsx36(
+                  "div",
+                  {
+                    className: cn(
+                      "w-4 h-4 border-2 rounded-full flex items-center justify-center transition-colors",
+                      isSelected ? "border-primary" : "border-muted-foreground/30"
+                    ),
+                    children: isSelected && /* @__PURE__ */ jsx36("div", { className: "w-2 h-2 rounded-full bg-primary" })
+                  }
+                ),
+                /* @__PURE__ */ jsx36("span", { className: cn("text-sm", isSelected && "font-medium text-primary"), children: category.name })
+              ] })
             ) : (
-              // Select mode: clickable with checkbox
+              // Multi select mode: checkbox-style indicator
               /* @__PURE__ */ jsxs31("div", { onClick: () => handleSelect(category.id, category), className: "flex items-center gap-2 flex-1", children: [
                 /* @__PURE__ */ jsx36(
                   "div",
@@ -8059,12 +8094,16 @@ function CategoryTreeSelect({
       hasChildren && isExpanded && /* @__PURE__ */ jsx36("div", { children: children.map((child) => renderCategory(child, level + 1)) })
     ] }, category.id);
   };
+  const renderTreeContent = () => /* @__PURE__ */ jsx36(Fragment11, { children: parentCategories.length === 0 ? /* @__PURE__ */ jsx36("div", { className: "px-3 py-2 text-sm text-muted-foreground", children: mergedLabels.emptyText }) : parentCategories.map((cat) => renderCategory(cat)) });
   if (viewOnly) {
-    return /* @__PURE__ */ jsx36("div", { className: cn("rounded-md border bg-background p-2", disabled && "opacity-50"), children: parentCategories.length === 0 ? /* @__PURE__ */ jsx36("div", { className: "px-3 py-2 text-sm text-muted-foreground", children: mergedLabels.emptyText }) : parentCategories.map((cat) => renderCategory(cat)) });
+    return /* @__PURE__ */ jsx36("div", { className: cn("rounded-md border bg-background p-2", disabled && "opacity-50", className), children: renderTreeContent() });
+  }
+  if (inline) {
+    return /* @__PURE__ */ jsx36("div", { className: cn("rounded-md border bg-background p-2", disabled && "opacity-50 pointer-events-none", className), children: renderTreeContent() });
   }
-  const selectedCount = value.length;
-  const displayText = selectedCount > 0 ? mergedLabels.selectedText(selectedCount) : placeholder;
-  return /* @__PURE__ */ jsxs31("div", { className: "relative", children: [
+  const selectedCount = valueArray.length;
+  const displayText = singleSelect ? selectedCount > 0 ? categories.find((c) => c.id === valueArray[0])?.name || placeholder : placeholder : selectedCount > 0 ? mergedLabels.selectedText(selectedCount) : placeholder;
+  return /* @__PURE__ */ jsxs31("div", { className: cn("relative", className), children: [
     /* @__PURE__ */ jsxs31(
       "button",
       {
@@ -8096,7 +8135,7 @@ function CategoryTreeSelect({
             "rounded-md border bg-popover text-popover-foreground shadow-md",
             "backdrop-blur-sm bg-popover/95 border-border/60"
           ),
-          children: /* @__PURE__ */ jsx36("div", { className: "p-1", children: parentCategories.length === 0 ? /* @__PURE__ */ jsx36("div", { className: "px-3 py-2 text-sm text-muted-foreground", children: mergedLabels.emptyText }) : parentCategories.map((cat) => renderCategory(cat)) })
+          children: /* @__PURE__ */ jsx36("div", { className: "p-1", children: renderTreeContent() })
         }
       )
     ] })