@underverse-ui/underverse 2.0.1 → 2.0.2

package/CHANGELOG.md

@@ -4,6 +4,16 @@ All notable changes to `@underverse-ui/underverse` are documented in this file.
 
 ## Unreleased
 
+### 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.2",
   "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,16 +31148,17 @@ 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}`;
@@ -31301,8 +31320,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 +31843,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);