@underverse-ui/underverse 2.0.1 → 2.0.3

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,74 +21543,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__ */ 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}`;
       const useEndIcon = (col.iconPosition ?? "end") === "end";
-      const titleContent = /* @__PURE__ */ jsxs50("div", { className: cn("flex items-center gap-1", useEndIcon && "flex-1 justify-between"), children: [
-        /* @__PURE__ */ jsx58("span", { className: cn("font-medium whitespace-nowrap select-text", headerTitleClass), children: col.title }),
-        col.sortable && /* @__PURE__ */ jsx58(
-          Tooltip,
-          {
-            placement: "top",
-            content: /* @__PURE__ */ jsx58("span", { className: "text-xs font-medium", children: sortLabel }),
-            children: /* @__PURE__ */ jsx58(
-              "button",
+      const titleContent = /* @__PURE__ */ jsxs50(
+        "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__ */ jsx58(
+              "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__ */ jsxs50("svg", { viewBox: "0 0 20 20", fill: "none", className: cn("inline-block", sortIconClass), children: [
-                  /* @__PURE__ */ jsx58(
-                    "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__ */ jsx58(
-                    "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__ */ jsx58(
+              Tooltip,
+              {
+                placement: "top",
+                content: /* @__PURE__ */ jsx58("span", { className: "text-xs font-medium", children: sortLabel }),
+                children: /* @__PURE__ */ jsx58(
+                  "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__ */ jsxs50("svg", { viewBox: "0 0 20 20", fill: "none", className: cn("inline-block", sortIconClass), children: [
+                      /* @__PURE__ */ jsx58(
+                        "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__ */ jsx58(
+                        "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__ */ jsx58(
         Popover,
         {
@@ -21696,8 +21737,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 +22258,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);