@underverse-ui/underverse 2.0.1 → 2.0.2

package/dist/index.d.cts

@@ -2116,7 +2116,7 @@ interface CategoryTreeSelectBaseProps {
     leafOnlySelect?: boolean;
     /** Virtualize the dropdown tree by rendering only visible rows. Inline/view-only trees keep recursive rendering. */
     virtualized?: boolean;
-    /** Estimated tree row height used by virtualized rendering. Default: `44`. */
+    /** Estimated tree row height used by virtualized rendering. Default: `36`. */
     estimatedItemHeight?: number;
     /** Number of extra rows rendered above and below the visible range. Default: `8`. */
     overscan?: number;
@@ -2149,7 +2149,7 @@ interface CategoryTreeSelectBaseProps {
      */
     renderItemActions?: (category: Category) => React__default.ReactNode;
     /**
-     * Base left padding in rem applied to every node regardless of depth. Default: `0.75`.
+     * Base left padding in rem applied to every node regardless of depth. Default: `0`.
      *
      * @remarks
      * Combined with `indentSize`, the final padding of a node at a given depth is:
@@ -2161,7 +2161,7 @@ interface CategoryTreeSelectBaseProps {
      */
     baseIndent?: number;
     /**
-     * Additional left padding in rem added per depth level. Default: `1`.
+     * Additional left padding in rem added per depth level. Default: `0.75`.
      *
      * @remarks
      * Set to a smaller value (e.g. `0.75`) to reduce the visual gap between
@@ -2172,6 +2172,8 @@ interface CategoryTreeSelectBaseProps {
      * <CategoryTreeSelect baseIndent={0.25} indentSize={0.75} />
      */
     indentSize?: number;
+    /** Show dashed vertical guide lines between parent and child levels. Default: `true`. */
+    showTreeLines?: boolean;
     borderMode?: BorderMode;
 }
 /** Multi-select mode. This is the default when `singleSelect` is omitted. */
@@ -2784,7 +2786,10 @@ type DataTableColumn<T> = {
     };
     render?: (value: any, record: T, index: number) => React__default.ReactNode;
     width?: number | string;
+    /** Body cell alignment for this column. Defaults to `"left"`. */
     align?: "left" | "center" | "right";
+    /** Header alignment for this column. Defaults to the table header alignment (`"center"` initially). */
+    headerAlign?: "left" | "center" | "right";
     /** Vị trí của icon sort/filter: "inline" (ngay sát text) hoặc "end" (cuối dòng). Mặc định là "end". */
     iconPosition?: "inline" | "end";
     visible?: boolean;

package/dist/index.d.ts

@@ -2116,7 +2116,7 @@ interface CategoryTreeSelectBaseProps {
     leafOnlySelect?: boolean;
     /** Virtualize the dropdown tree by rendering only visible rows. Inline/view-only trees keep recursive rendering. */
     virtualized?: boolean;
-    /** Estimated tree row height used by virtualized rendering. Default: `44`. */
+    /** Estimated tree row height used by virtualized rendering. Default: `36`. */
     estimatedItemHeight?: number;
     /** Number of extra rows rendered above and below the visible range. Default: `8`. */
     overscan?: number;
@@ -2149,7 +2149,7 @@ interface CategoryTreeSelectBaseProps {
      */
     renderItemActions?: (category: Category) => React__default.ReactNode;
     /**
-     * Base left padding in rem applied to every node regardless of depth. Default: `0.75`.
+     * Base left padding in rem applied to every node regardless of depth. Default: `0`.
      *
      * @remarks
      * Combined with `indentSize`, the final padding of a node at a given depth is:
@@ -2161,7 +2161,7 @@ interface CategoryTreeSelectBaseProps {
      */
     baseIndent?: number;
     /**
-     * Additional left padding in rem added per depth level. Default: `1`.
+     * Additional left padding in rem added per depth level. Default: `0.75`.
      *
      * @remarks
      * Set to a smaller value (e.g. `0.75`) to reduce the visual gap between
@@ -2172,6 +2172,8 @@ interface CategoryTreeSelectBaseProps {
      * <CategoryTreeSelect baseIndent={0.25} indentSize={0.75} />
      */
     indentSize?: number;
+    /** Show dashed vertical guide lines between parent and child levels. Default: `true`. */
+    showTreeLines?: boolean;
     borderMode?: BorderMode;
 }
 /** Multi-select mode. This is the default when `singleSelect` is omitted. */
@@ -2784,7 +2786,10 @@ type DataTableColumn<T> = {
     };
     render?: (value: any, record: T, index: number) => React__default.ReactNode;
     width?: number | string;
+    /** Body cell alignment for this column. Defaults to `"left"`. */
     align?: "left" | "center" | "right";
+    /** Header alignment for this column. Defaults to the table header alignment (`"center"` initially). */
+    headerAlign?: "left" | "center" | "right";
     /** Vị trí của icon sort/filter: "inline" (ngay sát text) hoặc "end" (cuối dòng). Mặc định là "end". */
     iconPosition?: "inline" | "end";
     visible?: boolean;

package/dist/index.js

@@ -16682,9 +16682,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;
@@ -16814,7 +16813,7 @@ function CategoryTreeSelect(props) {
     useOverlayScrollbar = false,
     leafOnlySelect = false,
     virtualized = false,
-    estimatedItemHeight = 44,
+    estimatedItemHeight = 36,
     overscan = 8,
     maxInitialOptions,
     searchMode = "auto",
@@ -16824,6 +16823,7 @@ function CategoryTreeSelect(props) {
     showSearchPromptWhenEmptyQuery = false,
     baseIndent = TREE_NODE_BASE_PADDING_REM,
     indentSize = TREE_NODE_INDENT_REM,
+    showTreeLines = true,
     renderItemActions,
     singleSelect = false,
     borderMode
@@ -17111,7 +17111,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__ */ jsxs36(
@@ -17123,7 +17123,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",
@@ -17133,6 +17133,16 @@ function CategoryTreeSelect(props) {
               ),
               style: { paddingLeft: `${level * indentSize + baseIndent}rem` },
               children: [
+                virtualItem && showTreeLines && Array.from({ length: level }, (_, ancestorLevel) => /* @__PURE__ */ jsx43(
+                  "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__ */ jsx43(
                   "button",
                   {
@@ -17181,16 +17191,23 @@ function CategoryTreeSelect(props) {
               ]
             }
           ),
-          !virtualItem && hasChildren && isExpanded && /* @__PURE__ */ jsx43(
+          !virtualItem && hasChildren && isExpanded && /* @__PURE__ */ jsxs36(
             "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__ */ jsx43(
+                  "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))
+              ]
             }
           )
         ]
@@ -21324,6 +21341,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",
@@ -21525,16 +21543,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__ */ jsx58("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}`;
@@ -21696,8 +21715,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)
         ),
@@ -22217,7 +22236,7 @@ function useDataTableState({
   const allLeafColumns = React56.useMemo(() => getLeafColumns(columns), [columns]);
   const defaultVisibleLeafKeys = React56.useMemo(() => allLeafColumns.filter((column) => column.visible !== false).map((column) => column.key), [allLeafColumns]);
   const knownLeafKeysRef = React56.useRef(new Set(defaultVisibleLeafKeys));
-  const [headerAlign, setHeaderAlign] = React56.useState("left");
+  const [headerAlign, setHeaderAlign] = React56.useState("center");
   const [visibleCols, setVisibleCols] = React56.useState(defaultVisibleLeafKeys);
   const [filters, setFilters] = React56.useState({});
   const [sort, setSort] = React56.useState(null);