@underverse-ui/underverse 2.0.40 → 2.0.41

package/dist/index.cjs

@@ -202,7 +202,9 @@ var init_en = __esm({
         headerAlign: "Header alignment",
         alignLeft: "Align left",
         alignCenter: "Align center",
-        alignRight: "Align right"
+        alignRight: "Align right",
+        sortBy: "Sort by",
+        filterBy: "Filter by"
       },
       ValidationInput: {
         required: "This field is required",
@@ -681,7 +683,9 @@ var init_vi = __esm({
         headerAlign: "C\u0103n ch\u1EC9nh ti\xEAu \u0111\u1EC1",
         alignLeft: "C\u0103n tr\xE1i",
         alignCenter: "C\u0103n gi\u1EEFa",
-        alignRight: "C\u0103n ph\u1EA3i"
+        alignRight: "C\u0103n ph\u1EA3i",
+        sortBy: "S\u1EAFp x\u1EBFp theo",
+        filterBy: "L\u1ECDc theo"
       },
       ValidationInput: {
         required: "Tr\u01B0\u1EDDng n\xE0y l\xE0 b\u1EAFt bu\u1ED9c.",
@@ -1160,7 +1164,9 @@ var init_ko = __esm({
         headerAlign: "\uD5E4\uB354 \uC815\uB82C",
         alignLeft: "\uC67C\uCABD \uC815\uB82C",
         alignCenter: "\uAC00\uC6B4\uB370 \uC815\uB82C",
-        alignRight: "\uC624\uB978\uCABD \uC815\uB82C"
+        alignRight: "\uC624\uB978\uCABD \uC815\uB82C",
+        sortBy: "\uC815\uB82C \uAE30\uC900",
+        filterBy: "\uD544\uD130:"
       },
       ValidationInput: {
         required: "\uD544\uC218 \uC785\uB825 \uD56D\uBAA9\uC785\uB2C8\uB2E4",
@@ -1639,7 +1645,9 @@ var init_ja = __esm({
         headerAlign: "\u30D8\u30C3\u30C0\u30FC\u914D\u7F6E",
         alignLeft: "\u5DE6\u63C3\u3048",
         alignCenter: "\u4E2D\u592E\u63C3\u3048",
-        alignRight: "\u53F3\u63C3\u3048"
+        alignRight: "\u53F3\u63C3\u3048",
+        sortBy: "\u4E26\u3073\u66FF\u3048",
+        filterBy: "\u7D5E\u308A\u8FBC\u307F:"
       },
       ValidationInput: {
         required: "\u3053\u306E\u9805\u76EE\u306F\u5FC5\u9808\u3067\u3059",
@@ -38869,9 +38877,55 @@ function DataTableHeader({
       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 sortByText = sortByLabel ?? gi18n.sortBy ?? (t("sortBy") !== "sortBy" ? t("sortBy") : void 0);
+      const sortLabel = sortByText ? `${sortByText} ${columnLabel}` : columnLabel;
+      const hasSortTooltip = Boolean(sortByText);
       const useEndIcon = (col.iconPosition ?? "end") === "end";
+      const sortButton = /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+        "button",
+        {
+          type: "button",
+          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,
+          title: hasSortTooltip ? sortLabel : void 0,
+          children: /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("svg", { viewBox: "0 0 20 20", fill: "none", className: cn("inline-block", sortIconClass), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime70.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_runtime70.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 titleContent = /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(
         "div",
         {
@@ -38893,85 +38947,46 @@ function DataTableHeader({
                 children: col.title
               }
             ),
-            col.sortable && /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+            col.sortable && (hasSortTooltip ? /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
               Tooltip,
               {
                 placement: "top",
                 content: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("span", { className: "text-xs font-medium", children: sortLabel }),
-                children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
-                  "button",
-                  {
-                    type: "button",
-                    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_runtime70.jsxs)("svg", { viewBox: "0 0 20 20", fill: "none", className: cn("inline-block", sortIconClass), children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime70.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_runtime70.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: sortButton
               }
-            )
+            ) : sortButton)
           ]
         }
       );
+      const filterText = gi18n.filterByColumn ? gi18n.filterByColumn(columnLabel) : t("filterByColumn") !== "filterByColumn" ? t("filterByColumn").replace("{column}", columnLabel) : t("filterBy") !== "filterBy" ? `${t("filterBy")} ${columnLabel}` : void 0;
+      const filterLabel = filterText ?? columnLabel;
+      const hasFilterTooltip = Boolean(filterText);
+      const filterButton = /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+        "button",
+        {
+          type: "button",
+          title: hasFilterTooltip ? filterLabel : void 0,
+          className: cn(
+            "p-1.5 rounded-lg transition-all duration-200 hover:bg-foreground/10",
+            filters[col.key] ? "bg-foreground/10 opacity-100" : "opacity-60 hover:opacity-100"
+          ),
+          "aria-label": filterLabel,
+          children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_lucide_react38.Filter, { className: "w-4 h-4" })
+        }
+      );
       const filterContent = col.filter ? /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
         Popover,
         {
           getPortalContainer,
           placement: "bottom-start",
-          trigger: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("span", { className: "inline-flex", children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+          trigger: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("span", { className: "inline-flex", children: hasFilterTooltip ? /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
             Tooltip,
             {
               placement: "top",
-              content: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("span", { className: "text-xs font-medium", children: gi18n.filterByColumn ? gi18n.filterByColumn(columnLabel) : `Filter by ${columnLabel}` }),
-              children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
-                "button",
-                {
-                  type: "button",
-                  title: gi18n.filterByColumn ? gi18n.filterByColumn(columnLabel) : `Filter by ${columnLabel}`,
-                  className: cn(
-                    "p-1.5 rounded-lg transition-all duration-200 hover:bg-foreground/10",
-                    filters[col.key] ? "bg-foreground/10 opacity-100" : "opacity-60 hover:opacity-100"
-                  ),
-                  "aria-label": gi18n.filterByColumn ? gi18n.filterByColumn(columnLabel) : `Filter by ${columnLabel}`,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_lucide_react38.Filter, { className: "w-4 h-4" })
-                }
-              )
+              content: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("span", { className: "text-xs font-medium", children: filterLabel }),
+              children: filterButton
             }
-          ) }),
+          ) : filterButton }),
           children: /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { className: "p-3 w-64 space-y-3", children: [
             /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { className: "flex items-center justify-between", children: [
               /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className: "text-sm font-medium", children: col.title }),
@@ -39060,36 +39075,42 @@ function DataTableHeader({
         ),
         children: [
           renderHeaderContent(col, isLeaf),
-          isLeaf && enableHeaderAutoFit && /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
-            Tooltip,
-            {
-              placement: "top",
-              content: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("span", { className: "text-xs font-medium", children: "Double click to auto-fit" }),
-              children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
-                "button",
-                {
-                  type: "button",
-                  "aria-label": gi18n.autoFitColumn ? gi18n.autoFitColumn(String(col.title)) : `Auto fit ${String(col.title)}`,
-                  onClick: (event) => {
-                    event.preventDefault();
-                    event.stopPropagation();
-                  },
-                  onDoubleClick: (event) => {
-                    event.preventDefault();
-                    event.stopPropagation();
-                    onAutoFitColumn?.(col.key);
-                  },
-                  className: cn(
-                    "absolute inset-y-0 right-0 z-10 w-3",
-                    !isLastCell && "-mr-1",
-                    "cursor-col-resize select-none bg-transparent",
-                    "after:absolute after:inset-y-2 after:right-0.8 after:w-px after:bg-border/0 after:transition-colors",
-                    "hover:after:bg-primary/50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary"
-                  )
-                }
-              )
-            }
-          )
+          isLeaf && enableHeaderAutoFit && (() => {
+            const autoFitTooltipText = t("doubleClickToAutoFit") !== "doubleClickToAutoFit" ? t("doubleClickToAutoFit") : void 0;
+            const autoFitAriaLabel = gi18n.autoFitColumn ? gi18n.autoFitColumn(String(col.title)) : t("autoFitColumn") !== "autoFitColumn" ? t("autoFitColumn").replace("{column}", String(col.title)) : autoFitTooltipText ? `${autoFitTooltipText} ${String(col.title)}` : `Auto fit ${String(col.title)}`;
+            const autoFitButton = /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+              "button",
+              {
+                type: "button",
+                "aria-label": autoFitAriaLabel,
+                title: autoFitTooltipText,
+                onClick: (event) => {
+                  event.preventDefault();
+                  event.stopPropagation();
+                },
+                onDoubleClick: (event) => {
+                  event.preventDefault();
+                  event.stopPropagation();
+                  onAutoFitColumn?.(col.key);
+                },
+                className: cn(
+                  "absolute inset-y-0 right-0 z-10 w-3",
+                  !isLastCell && "-mr-1",
+                  "cursor-col-resize select-none bg-transparent",
+                  "after:absolute after:inset-y-2 after:right-0.8 after:w-px after:bg-border/0 after:transition-colors",
+                  "hover:after:bg-primary/50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary"
+                )
+              }
+            );
+            return autoFitTooltipText ? /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+              Tooltip,
+              {
+                placement: "top",
+                content: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("span", { className: "text-xs font-medium", children: autoFitTooltipText }),
+                children: autoFitButton
+              }
+            ) : autoFitButton;
+          })()
         ]
       },
       col.key
@@ -39964,6 +39985,7 @@ function DataTable({
   paginationRange,
   enableHeaderAutoFit = true,
   labels,
+  sortByLabel,
   columnColorGroups,
   borderMode,
   getPortalContainer,
@@ -40173,7 +40195,7 @@ function DataTable({
                       enableHeaderAutoFit,
                       getStickyHeaderClass,
                       getStickyHeaderCellStyle,
-                      sortByLabel: labels?.sortBy,
+                      sortByLabel: sortByLabel ?? labels?.sortBy,
                       t,
                       columnColorGroups,
                       getPortalContainer