@underverse-ui/underverse 2.0.1 → 2.0.3

package/CHANGELOG.md

@@ -4,6 +4,22 @@ All notable changes to `@underverse-ui/underverse` are documented in this file.
 
 ## Unreleased
 
+### Fixed
+
+- `DataTable` sortable headers now keep their titles visually centered while the sort control remains aligned to the trailing edge.
+
+## [2.0.2] - 2026-07-28
+
+### Added
+
+- `CategoryTreeSelect` now supports `showTreeLines` to show or hide dashed hierarchy guide lines in recursive and virtualized trees.
+- `DataTable` columns now support `headerAlign` for per-column header alignment.
+
+### Changed
+
+- `DataTable` headers now default to centered alignment.
+- `DataTable` body cells now default to left alignment, with per-column overrides through `align`.
+
 ## [2.0.0] - 2026-07-26
 
 ### Highlights

package/api-reference.json

@@ -1,6 +1,6 @@
 {
   "package": "@underverse-ui/underverse",
-  "version": "2.0.1",
+  "version": "2.0.3",
   "sourceEntry": "src/index.ts",
   "totalExports": 256,
   "exports": [

package/dist/index.cjs

@@ -26270,9 +26270,8 @@ 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_BASE_PADDING_REM = 0;
+var TREE_NODE_INDENT_REM = 0.75;
 var TREE_NODE_GAP_CLASS = "gap-1.5";
 var TREE_EXPANDER_PLACEHOLDER_CLASS = "w-5";
 var CATEGORY_TREE_DROPDOWN_MAX_HEIGHT = 320;
@@ -26402,7 +26401,7 @@ function CategoryTreeSelect(props) {
     useOverlayScrollbar = false,
     leafOnlySelect = false,
     virtualized = false,
-    estimatedItemHeight = 44,
+    estimatedItemHeight = 36,
     overscan = 8,
     maxInitialOptions,
     searchMode = "auto",
@@ -26412,6 +26411,7 @@ function CategoryTreeSelect(props) {
     showSearchPromptWhenEmptyQuery = false,
     baseIndent = TREE_NODE_BASE_PADDING_REM,
     indentSize = TREE_NODE_INDENT_REM,
+    showTreeLines = true,
     renderItemActions,
     singleSelect = false,
     borderMode
@@ -26699,7 +26699,7 @@ function CategoryTreeSelect(props) {
       {
         ref: virtualItem ? treeVirtualizer.measureElement : void 0,
         "data-index": virtualItem?.index,
-        className: cn("min-w-0 [content-visibility:auto] [contain-intrinsic-size:44px]", !virtualItem && "animate-in fade-in-50 duration-200"),
+        className: cn("min-w-0 [content-visibility:auto] [contain-intrinsic-size:36px]", !virtualItem && "animate-in fade-in-50 duration-200"),
         style: { animationDelay: virtualItem ? void 0 : `${level * 30}ms`, ...rowStyle },
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
@@ -26711,7 +26711,7 @@ function CategoryTreeSelect(props) {
               "aria-selected": viewOnly ? void 0 : isSelected,
               onClick: () => !viewOnly && handleSelect(category.id, category),
               className: cn(
-                "relative flex min-w-0 items-center px-3 py-2.5 min-h-11 transition-all duration-200 rounded-3xl",
+                "relative flex min-h-9 min-w-0 items-center rounded-3xl transition-all duration-200",
                 TREE_NODE_GAP_CLASS,
                 !viewOnly && (isSelectable ? "cursor-pointer" : "cursor-default"),
                 isSelectable && !isSelected && "hover:bg-accent/50",
@@ -26721,6 +26721,16 @@ function CategoryTreeSelect(props) {
               ),
               style: { paddingLeft: `${level * indentSize + baseIndent}rem` },
               children: [
+                virtualItem && showTreeLines && Array.from({ length: level }, (_, ancestorLevel) => /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                  "span",
+                  {
+                    "data-tree-line": true,
+                    "aria-hidden": "true",
+                    className: "pointer-events-none absolute inset-y-0 w-px border-l border-dashed border-border/50",
+                    style: { left: `${ancestorLevel * indentSize + baseIndent + 0.5}rem` }
+                  },
+                  ancestorLevel
+                )),
                 hasChildren ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
                   "button",
                   {
@@ -26769,16 +26779,23 @@ function CategoryTreeSelect(props) {
               ]
             }
           ),
-          !virtualItem && hasChildren && isExpanded && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+          !virtualItem && hasChildren && isExpanded && /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
             "div",
             {
               role: "group",
-              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) => renderCategoryRow(child, level + 1))
+              className: "relative animate-in fade-in-50 slide-in-from-top-2 duration-200",
+              children: [
+                showTreeLines && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                  "span",
+                  {
+                    "data-tree-line": true,
+                    "aria-hidden": "true",
+                    className: "pointer-events-none absolute inset-y-0 w-px border-l border-dashed border-border/50",
+                    style: { left: `${level * indentSize + baseIndent + 0.5}rem` }
+                  }
+                ),
+                children.map((child) => renderCategoryRow(child, level + 1))
+              ]
             }
           )
         ]
@@ -30925,6 +30942,7 @@ function DataTableBodyRows({
                 style: getStickyColumnStyle(col),
                 className: cn(
                   cellPadding,
+                  (!col.align || col.align === "left") && "text-left",
                   col.align === "right" && "text-right",
                   col.align === "center" && "text-center",
                   showBorderLeft && "border-l border-border/60",
@@ -31130,74 +31148,97 @@ function DataTableHeader({
             className: cn(
               "flex items-center gap-1",
               headerMinHeightClass,
-              col.align === "right" && "justify-end",
-              col.align === "center" && "justify-center",
-              !col.align && "justify-start"
+              (col.headerAlign ?? headerAlign) === "right" && "justify-end",
+              (col.headerAlign ?? headerAlign) === "center" && "justify-center",
+              (col.headerAlign ?? headerAlign) === "left" && "justify-start"
             ),
             children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { className: cn("font-medium whitespace-nowrap select-text", headerTitleClass), children: col.title })
           }
         );
       }
-      const isRightAlign = col.align === "right" || !col.align && headerAlign === "right";
-      const isCenterAlign = col.align === "center" || !col.align && headerAlign === "center";
+      const resolvedHeaderAlign = col.headerAlign ?? headerAlign;
+      const isRightAlign = resolvedHeaderAlign === "right";
+      const isCenterAlign = resolvedHeaderAlign === "center";
       const columnLabel = getColumnLabel(col.title) || col.key;
       const sortByText = sortByLabel ?? gi18n.sortBy ?? "Sort by";
       const sortLabel = `${sortByText} ${columnLabel}`;
       const useEndIcon = (col.iconPosition ?? "end") === "end";
-      const titleContent = /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: cn("flex items-center gap-1", useEndIcon && "flex-1 justify-between"), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { className: cn("font-medium whitespace-nowrap select-text", headerTitleClass), children: col.title }),
-        col.sortable && /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
-          Tooltip,
-          {
-            placement: "top",
-            content: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { className: "text-xs font-medium", children: sortLabel }),
-            children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
-              "button",
+      const titleContent = /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(
+        "div",
+        {
+          "data-underverse-datatable-header-content": col.key,
+          className: cn(
+            "items-center gap-1",
+            useEndIcon && isCenterAlign ? "grid flex-1 grid-cols-[1fr_auto_1fr]" : "flex",
+            useEndIcon && !isCenterAlign && "flex-1 justify-between"
+          ),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+              "span",
               {
-                type: "button",
-                title: sortLabel,
                 className: cn(
-                  "p-1 rounded-lg transition-all duration-200 hover:bg-foreground/10",
-                  sort?.key === col.key ? "opacity-100 bg-foreground/10" : "opacity-60 hover:opacity-100"
+                  "font-medium whitespace-nowrap select-text",
+                  useEndIcon && isCenterAlign && "col-start-2",
+                  headerTitleClass
                 ),
-                onClick: () => {
-                  setCurPage(1);
-                  setSort((current) => {
-                    if (!current || current.key !== col.key) return { key: col.key, order: "asc" };
-                    if (current.order === "asc") return { key: col.key, order: "desc" };
-                    return null;
-                  });
-                },
-                "aria-label": sortLabel,
-                children: /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("svg", { viewBox: "0 0 20 20", fill: "none", className: cn("inline-block", sortIconClass), children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
-                    "path",
-                    {
-                      d: "M5 7.5l5-5 5 5",
-                      stroke: "currentColor",
-                      strokeWidth: "1.5",
-                      strokeLinecap: "round",
-                      strokeLinejoin: "round",
-                      opacity: sort?.key === col.key && sort.order === "asc" ? 1 : 0.4
-                    }
-                  ),
-                  /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
-                    "path",
-                    {
-                      d: "M5 12.5l5 5 5-5",
-                      stroke: "currentColor",
-                      strokeWidth: "1.5",
-                      strokeLinecap: "round",
-                      strokeLinejoin: "round",
-                      opacity: sort?.key === col.key && sort.order === "desc" ? 1 : 0.4
-                    }
-                  )
-                ] })
+                children: col.title
+              }
+            ),
+            col.sortable && /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+              Tooltip,
+              {
+                placement: "top",
+                content: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { className: "text-xs font-medium", children: sortLabel }),
+                children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    title: sortLabel,
+                    className: cn(
+                      "p-1 rounded-lg transition-all duration-200 hover:bg-foreground/10",
+                      useEndIcon && isCenterAlign && "col-start-3 justify-self-end",
+                      sort?.key === col.key ? "opacity-100 bg-foreground/10" : "opacity-60 hover:opacity-100"
+                    ),
+                    onClick: () => {
+                      setCurPage(1);
+                      setSort((current) => {
+                        if (!current || current.key !== col.key) return { key: col.key, order: "asc" };
+                        if (current.order === "asc") return { key: col.key, order: "desc" };
+                        return null;
+                      });
+                    },
+                    "aria-label": sortLabel,
+                    children: /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("svg", { viewBox: "0 0 20 20", fill: "none", className: cn("inline-block", sortIconClass), children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+                        "path",
+                        {
+                          d: "M5 7.5l5-5 5 5",
+                          stroke: "currentColor",
+                          strokeWidth: "1.5",
+                          strokeLinecap: "round",
+                          strokeLinejoin: "round",
+                          opacity: sort?.key === col.key && sort.order === "asc" ? 1 : 0.4
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+                        "path",
+                        {
+                          d: "M5 12.5l5 5 5-5",
+                          stroke: "currentColor",
+                          strokeWidth: "1.5",
+                          strokeLinecap: "round",
+                          strokeLinejoin: "round",
+                          opacity: sort?.key === col.key && sort.order === "desc" ? 1 : 0.4
+                        }
+                      )
+                    ] })
+                  }
+                )
               }
             )
-          }
-        )
-      ] });
+          ]
+        }
+      );
       const filterContent = col.filter ? /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
         Popover,
         {
@@ -31301,8 +31342,8 @@ function DataTableHeader({
         },
         className: cn(
           "relative",
-          (col.align === "right" || !col.align && headerAlign === "right") && "text-right",
-          (col.align === "center" || !col.align && headerAlign === "center") && "text-center",
+          (col.headerAlign ?? headerAlign) === "right" && "text-right",
+          (col.headerAlign ?? headerAlign) === "center" && "text-center",
           showBorderLeft && "border-l border-border/60",
           getStickyHeaderClass(col)
         ),
@@ -31824,7 +31865,7 @@ function useDataTableState({
   const allLeafColumns = import_react40.default.useMemo(() => getLeafColumns(columns), [columns]);
   const defaultVisibleLeafKeys = import_react40.default.useMemo(() => allLeafColumns.filter((column) => column.visible !== false).map((column) => column.key), [allLeafColumns]);
   const knownLeafKeysRef = import_react40.default.useRef(new Set(defaultVisibleLeafKeys));
-  const [headerAlign, setHeaderAlign] = import_react40.default.useState("left");
+  const [headerAlign, setHeaderAlign] = import_react40.default.useState("center");
   const [visibleCols, setVisibleCols] = import_react40.default.useState(defaultVisibleLeafKeys);
   const [filters, setFilters] = import_react40.default.useState({});
   const [sort, setSort] = import_react40.default.useState(null);