@underverse-ui/underverse 1.0.88 → 1.0.90

package/api-reference.json

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

package/dist/index.cjs

@@ -1981,40 +1981,48 @@ function getEnvironmentLocale(fallback) {
   }
   return fallback;
 }
-function getExternalLocaleFallback(internalLocale) {
-  if (internalLocale !== "en") {
-    return internalLocale;
-  }
-  return getEnvironmentLocale(internalLocale);
-}
 function useSmartTranslations(namespace) {
   const forceInternal = React6.useContext(ForceInternalContext);
   const nextIntlBridge = useNextIntlBridge();
   const internalT = useUnderverseTranslations(namespace);
   const internalLocale = useUnderverseLocale();
+  const [environmentLocale, setEnvironmentLocale] = React6.useState(null);
+  React6.useEffect(() => {
+    if (forceInternal) return;
+    if (nextIntlBridge) return;
+    if (internalLocale !== "en") return;
+    const detected = getEnvironmentLocale(internalLocale);
+    if (detected !== internalLocale) {
+      setEnvironmentLocale(detected);
+    }
+  }, [forceInternal, internalLocale, nextIntlBridge]);
   if (forceInternal) {
     return internalT;
   }
-  const resolvedLocale = nextIntlBridge?.locale ?? getExternalLocaleFallback(internalLocale);
   return (key) => {
+    const primaryLocale = nextIntlBridge?.locale ?? internalLocale;
+    const fallbackLocale = environmentLocale && environmentLocale !== primaryLocale ? environmentLocale : null;
     let translated = null;
     if (nextIntlBridge) {
       const nextIntlResult = nextIntlBridge.translate(namespace, key);
       translated = nextIntlResult.translated;
     }
-    const effectiveLocale = nextIntlBridge?.locale ?? getEnvironmentLocale(resolvedLocale);
-    const localizedDefault = getUnderverseDefaultTranslation(effectiveLocale, namespace, key);
+    const localizedDefault = getUnderverseDefaultTranslation(primaryLocale, namespace, key);
+    const fallbackLocalizedDefault = fallbackLocale ? getUnderverseDefaultTranslation(fallbackLocale, namespace, key) : key;
     const englishDefault = getUnderverseDefaultTranslation("en", namespace, key);
     const internalValue = internalT(key);
-    if (translated && !isUnresolvedTranslation(translated, namespace, key) && !(effectiveLocale !== "en" && localizedDefault !== englishDefault && translated === englishDefault)) {
+    if (translated && !isUnresolvedTranslation(translated, namespace, key) && !(primaryLocale !== "en" && localizedDefault !== englishDefault && translated === englishDefault)) {
       return translated;
     }
-    if (internalLocale === effectiveLocale && internalValue !== key) {
+    if (internalLocale === primaryLocale && internalValue !== key) {
       return internalValue;
     }
     if (localizedDefault !== key) {
       return localizedDefault;
     }
+    if (fallbackLocalizedDefault !== key) {
+      return fallbackLocalizedDefault;
+    }
     if (internalValue !== key) {
       return internalValue;
     }
@@ -2028,7 +2036,7 @@ function useSmartLocale() {
   if (forceInternal) {
     return internalLocale;
   }
-  return nextIntlBridge?.locale ?? getExternalLocaleFallback(internalLocale);
+  return nextIntlBridge?.locale ?? internalLocale;
 }
 
 // src/components/Input.tsx
@@ -16855,6 +16863,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();
@@ -17043,13 +17056,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",
@@ -17060,7 +17074,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",
@@ -17069,16 +17083,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",
@@ -17097,7 +17111,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
@@ -21069,7 +21093,8 @@ function DataTableBodyRows({
   getRowKey,
   getStickyColumnStyle,
   getStickyCellClass,
-  t
+  t,
+  labels
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(TableBody, { children: loading2 ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(TableCell, { colSpan: leafColumns.length, className: "text-center py-8", children: /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "flex items-center justify-center gap-2 text-muted-foreground", children: [
     /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("svg", { className: "animate-spin h-4 w-4", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [
@@ -21087,7 +21112,7 @@ function DataTableBodyRows({
       t("loading"),
       "\u2026"
     ] })
-  ] }) }) }) : displayedData.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(TableCell, { colSpan: leafColumns.length, className: "text-center py-6 text-muted-foreground", children: t("noData") }) }) : displayedData.map((row, idx) => {
+  ] }) }) }) : displayedData.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(TableCell, { colSpan: leafColumns.length, className: "text-center py-6 text-muted-foreground", children: labels?.noData || t("noData") }) }) : displayedData.map((row, idx) => {
     const isStripedRow = striped && idx % 2 === 0;
     return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
       TableRow,
@@ -22354,7 +22379,8 @@ function DataTable({
                       getRowKey,
                       getStickyColumnStyle,
                       getStickyCellClass,
-                      t
+                      t,
+                      labels
                     }
                   )
                 ]