@underverse-ui/underverse 1.0.96 → 1.0.98

package/dist/index.js

@@ -6608,9 +6608,15 @@ var variantStyles5 = {
     inactiveTab: "text-muted-foreground hover:text-foreground"
   }
 };
-function getTabsBaseId(tabs) {
+function normalizeTabsId(value) {
+  const normalized = value.trim().toLowerCase().replace(/[^a-z0-9_-]+/g, "-").replace(/^-+|-+$/g, "");
+  return normalized || "default";
+}
+function getTabsBaseId(tabs, id, fallbackId) {
+  if (id) return `tabs-${normalizeTabsId(id)}`;
+  if (fallbackId) return `tabs-${normalizeTabsId(fallbackId)}`;
   const key = tabs.map((t) => t.value).join("-");
-  return `tabs-${key || "default"}`;
+  return `tabs-${normalizeTabsId(key || "default")}`;
 }
 function getTabTriggerId(baseId, index) {
   return `${baseId}-tab-${index}`;
@@ -6635,6 +6641,7 @@ function shouldHandleTabClickLocally(event, target) {
   return !(event.metaKey || event.ctrlKey || event.shiftKey || event.altKey || target === "_blank");
 }
 var Tabs = ({
+  id,
   tabs,
   defaultValue,
   className,
@@ -6651,7 +6658,8 @@ var Tabs = ({
   const [active, setActive] = React22.useState(defaultValue || tabs[0]?.value);
   const [underlineStyle, setUnderlineStyle] = React22.useState({});
   const tabRefs = React22.useRef([]);
-  const baseId = React22.useMemo(() => getTabsBaseId(tabs), [tabs]);
+  const autoId = React22.useId();
+  const baseId = React22.useMemo(() => getTabsBaseId(tabs, id, autoId), [autoId, id, tabs]);
   const handleTabChange = (value) => {
     setActive(value);
     onTabChange?.(value);
@@ -7048,7 +7056,7 @@ import { ChevronLeft, ChevronRight as ChevronRight2, ChevronsLeft, ChevronsRight
 
 // src/components/Combobox.tsx
 import * as React24 from "react";
-import { useId as useId5 } from "react";
+import { useId as useId6 } from "react";
 import { ChevronDown, Search as Search4, SearchX, Check as Check3, X as X9 } from "lucide-react";
 import { Fragment as Fragment5, jsx as jsx29, jsxs as jsxs22 } from "react/jsx-runtime";
 var getOptionLabel = (option) => {
@@ -7107,7 +7115,7 @@ var Combobox = ({
   const inputRef = React24.useRef(null);
   const optionsViewportRef = React24.useRef(null);
   useOverlayScrollbarTarget(optionsViewportRef, { enabled: useOverlayScrollbar });
-  const autoId = useId5();
+  const autoId = useId6();
   const resolvedId = id ? String(id) : `combobox-${autoId}`;
   const labelId = label ? `${resolvedId}-label` : void 0;
   const enableSearch = options.length > 10;
@@ -8169,7 +8177,7 @@ function formatDateSmart(date, locale = "en") {
 // src/components/DatePicker.tsx
 import { Calendar, ChevronLeft as ChevronLeft2, ChevronRight as ChevronRight3, Sparkles as Sparkles2, X as XIcon } from "lucide-react";
 import * as React28 from "react";
-import { useId as useId6 } from "react";
+import { useId as useId7 } from "react";
 import { Fragment as Fragment6, jsx as jsx34, jsxs as jsxs24 } from "react/jsx-runtime";
 var DatePicker = ({
   id,
@@ -8576,7 +8584,7 @@ var DatePicker = ({
       )
     ] })
   ] });
-  const autoId = useId6();
+  const autoId = useId7();
   const resolvedId = id ? String(id) : `datepicker-${autoId}`;
   const labelId = label ? `${resolvedId}-label` : void 0;
   const labelSize = sizeStyles8[size].label;
@@ -9155,7 +9163,7 @@ var DateRangePicker = ({
   const displayFormat = (date) => formatDateShort(date);
   const displayLabel = tempStart && tempEnd ? `${displayFormat(tempStart)} - ${displayFormat(tempEnd)}` : tempStart ? `${displayFormat(tempStart)} - ...` : placeholder;
   const effectiveError = localRequiredError;
-  const autoId = useId6();
+  const autoId = useId7();
   const resolvedId = id ? String(id) : `daterangepicker-${autoId}`;
   const labelId = label ? `${resolvedId}-label` : void 0;
   return /* @__PURE__ */ jsxs24("div", { className: cn("space-y-1.5", className), children: [
@@ -15270,7 +15278,7 @@ function CalendarTimeline({
 
 // src/components/MultiCombobox.tsx
 import * as React39 from "react";
-import { useId as useId8 } from "react";
+import { useId as useId9 } from "react";
 import { ChevronDown as ChevronDown4, Search as Search5, Check as Check6, SearchX as SearchX2, Loader2 as Loader24, X as X13, Sparkles as Sparkles3 } from "lucide-react";
 import { Fragment as Fragment13, jsx as jsx45, jsxs as jsxs35 } from "react/jsx-runtime";
 var MultiCombobox = ({
@@ -15408,7 +15416,7 @@ var MultiCombobox = ({
     outline: "border-2 border-input bg-transparent hover:border-primary",
     ghost: "border border-transparent bg-muted/50 hover:bg-muted"
   };
-  const autoId = useId8();
+  const autoId = useId9();
   const resolvedId = id ? String(id) : `multicombobox-${autoId}`;
   const labelId = label ? `${resolvedId}-label` : void 0;
   const labelSize = size === "sm" ? "text-xs" : size === "lg" ? "text-base" : "text-sm";
@@ -16912,7 +16920,7 @@ function OverlayControls({
 }
 
 // src/components/CategoryTreeSelect.tsx
-import { useEffect as useEffect25, useId as useId10, useMemo as useMemo19, useRef as useRef19, useState as useState31 } from "react";
+import { useEffect as useEffect25, useId as useId11, useMemo as useMemo19, useRef as useRef19, useState as useState31 } from "react";
 import { ChevronRight as ChevronRight6, ChevronDown as ChevronDown5, FolderTree, Layers, Search as Search6, SearchX as SearchX3, X as X14 } from "lucide-react";
 import { jsx as jsx49, jsxs as jsxs39 } from "react/jsx-runtime";
 var defaultLabels = {
@@ -16926,15 +16934,47 @@ 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();
-  for (const category of categories) {
-    if (typeof category.parent_id === "number") {
-      parentIds.add(category.parent_id);
+function getAncestorPathIds(categories, targetId) {
+  const byId = new Map(categories.map((category) => [category.id, category]));
+  const expanded = /* @__PURE__ */ new Set();
+  let current = byId.get(targetId);
+  let guard = 0;
+  while (current && guard++ < categories.length) {
+    expanded.add(current.id);
+    if (typeof current.parent_id !== "number") break;
+    current = byId.get(current.parent_id);
+  }
+  return expanded;
+}
+function getInitialExpandedNodes(categories, {
+  defaultExpanded,
+  defaultExpandedIds,
+  expandToId,
+  viewOnly,
+  inline
+}) {
+  const expanded = /* @__PURE__ */ new Set();
+  if ((viewOnly || inline) && defaultExpanded) {
+    for (const category of categories) {
+      if (typeof category.parent_id === "number") {
+        expanded.add(category.parent_id);
+      }
+    }
+  }
+  for (const id of defaultExpandedIds ?? []) {
+    if (typeof id === "number") {
+      expanded.add(id);
+    }
+  }
+  if (typeof expandToId === "number") {
+    for (const id of getAncestorPathIds(categories, expandToId)) {
+      expanded.add(id);
     }
   }
-  return parentIds;
+  return expanded;
+}
+function getExpandedNodesState(expandedIds, uncontrolledExpandedNodes) {
+  return expandedIds !== void 0 ? new Set(expandedIds) : uncontrolledExpandedNodes;
 }
 function CategoryTreeSelect(props) {
   const tv = useSmartTranslations("ValidationInput");
@@ -16953,6 +16993,10 @@ function CategoryTreeSelect(props) {
     helperText,
     viewOnly = false,
     defaultExpanded = false,
+    defaultExpandedIds,
+    expandToId = null,
+    expandedIds,
+    onExpandedChange,
     enableSearch,
     labels,
     inline = false,
@@ -16963,13 +17007,15 @@ function CategoryTreeSelect(props) {
     singleSelect = false
   } = props;
   const [isOpen, setIsOpen] = useState31(false);
-  const [expandedNodes, setExpandedNodes] = useState31(() => getInitialExpandedNodes(categories, defaultExpanded, viewOnly, inline));
+  const [expandedNodes, setExpandedNodes] = useState31(
+    () => getInitialExpandedNodes(categories, { defaultExpanded, defaultExpandedIds, expandToId, viewOnly, inline })
+  );
   const [query, setQuery] = useState31("");
   const [localRequiredError, setLocalRequiredError] = useState31();
   const searchInputRef = useRef19(null);
   const dropdownViewportRef = useRef19(null);
   useOverlayScrollbarTarget(dropdownViewportRef, { enabled: useOverlayScrollbar });
-  const autoId = useId10();
+  const autoId = useId11();
   const resolvedId = id ? String(id) : `category-tree-select-${autoId}`;
   const labelId = label ? `${resolvedId}-label` : void 0;
   const effectiveError = error ?? localRequiredError;
@@ -17000,6 +17046,7 @@ function CategoryTreeSelect(props) {
   const isSearchEnabled = useMemo19(() => enableSearch ?? categories.length > 10, [enableSearch, categories.length]);
   const normalizedQuery = useMemo19(() => query.trim().toLowerCase(), [query]);
   const isSearchMode = isSearchEnabled && normalizedQuery.length > 0;
+  const effectiveExpandedNodes = useMemo19(() => getExpandedNodesState(expandedIds, expandedNodes), [expandedIds, expandedNodes]);
   const visibleIds = useMemo19(() => {
     if (!isSearchMode) return null;
     const matches = categories.filter((c) => c.name.toLowerCase().includes(normalizedQuery));
@@ -17052,13 +17099,16 @@ function CategoryTreeSelect(props) {
   }, [disabled, required, valueArray.length]);
   const toggleExpand = (id2) => {
     if (isSearchMode) return;
-    const newExpanded = new Set(expandedNodes);
+    const newExpanded = new Set(effectiveExpandedNodes);
     if (newExpanded.has(id2)) {
       newExpanded.delete(id2);
     } else {
       newExpanded.add(id2);
     }
-    setExpandedNodes(newExpanded);
+    if (expandedIds === void 0) {
+      setExpandedNodes(newExpanded);
+    }
+    onExpandedChange?.(Array.from(newExpanded));
   };
   const handleSelect = (categoryId, category) => {
     if (viewOnly) return;
@@ -17100,7 +17150,7 @@ function CategoryTreeSelect(props) {
   const renderCategory = (category, level = 0) => {
     const children = effectiveChildrenMap.get(category.id) || [];
     const hasChildren = children.length > 0;
-    const isExpanded = hasChildren && (isSearchMode || expandedNodes.has(category.id));
+    const isExpanded = hasChildren && (isSearchMode || effectiveExpandedNodes.has(category.id));
     const isSelected = selectedIds.has(category.id);
     const isSelectable = !viewOnly && (!leafOnlySelect || !hasChildren);
     return /* @__PURE__ */ jsxs39(
@@ -20731,7 +20781,7 @@ var MusicPlayer = ({
 var MusicPlayer_default = MusicPlayer;
 
 // src/components/Grid.tsx
-import React51, { useId as useId11 } from "react";
+import React51, { useId as useId12 } from "react";
 import { Fragment as Fragment20, jsx as jsx59, jsxs as jsxs49 } from "react/jsx-runtime";
 var BP_MIN = {
   sm: 640,
@@ -20796,7 +20846,7 @@ var GridRoot = React51.forwardRef(
     children,
     ...rest
   }, ref) => {
-    const id = useId11().replace(/[:]/g, "");
+    const id = useId12().replace(/[:]/g, "");
     const baseClass = `uv-grid-${id}`;
     const baseCols = toTemplateCols(columns, minColumnWidth);
     const baseRows = toTemplateRows(rows);