@underverse-ui/underverse 2.0.40 → 2.0.42

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",
@@ -5505,6 +5513,7 @@ var init_DatePicker = __esm({
       id,
       value,
       onChange,
+      formatDate: formatDate2,
       placeholder,
       className,
       disabled = false,
@@ -5713,6 +5722,9 @@ var init_DatePicker = __esm({
         setIsOpen(false);
       };
       const formatDateDisplay = (date) => {
+        if (formatDate2) {
+          return formatDate2(date);
+        }
         return date.toLocaleDateString(locale === "vi" ? "vi-VN" : "en-US", {
           day: "numeric",
           month: "long",
@@ -6172,6 +6184,7 @@ var init_DatePicker = __esm({
       startDate,
       endDate,
       onChange,
+      formatDate: formatDate2,
       placeholder = "Select date range...",
       className,
       label,
@@ -6204,10 +6217,11 @@ var init_DatePicker = __esm({
       }, []);
       const getRangeString = React35.useCallback((s, e) => {
         if (!s) return "";
-        const startStr = formatDateShort(s, locale);
+        const startStr = formatDate2 ? formatDate2(s) : formatDateShort(s, locale);
         if (!e) return `${startStr} - `;
-        return `${startStr} - ${formatDateShort(e, locale)}`;
-      }, [locale]);
+        const endStr = formatDate2 ? formatDate2(e) : formatDateShort(e, locale);
+        return `${startStr} - ${endStr}`;
+      }, [locale, formatDate2]);
       React35.useEffect(() => {
         setInputValue((currentInput) => {
           if (startDate) {
@@ -6751,7 +6765,7 @@ var init_DatePicker = __esm({
           )
         ] })
       ] });
-      const displayFormat = (date) => formatDateShort(date);
+      const displayFormat = (date) => formatDate2 ? formatDate2(date) : formatDateShort(date);
       const displayLabel = tempStart && tempEnd ? `${displayFormat(tempStart)} - ${displayFormat(tempEnd)}` : tempStart ? `${displayFormat(tempStart)} - ...` : placeholder;
       const effectiveError = localRequiredError;
       const autoId = (0, import_react22.useId)();
@@ -24565,6 +24579,7 @@ var LunarDatePicker = ({
   id,
   value,
   onChange,
+  formatDate: formatDate2,
   placeholder,
   className,
   disabled = false,
@@ -24778,6 +24793,9 @@ var LunarDatePicker = ({
   };
   const formatDateDisplay = (date) => {
     if (!date) return "";
+    if (formatDate2) {
+      return formatDate2(date);
+    }
     const formatStr = date.is_leap_month ? t("lunarLeapFormat") : t("lunarFormat");
     return formatStr.replace("{day}", String(date.day)).replace("{month}", String(date.month)).replace("{year}", String(date.year));
   };
@@ -25247,6 +25265,7 @@ var LunarDateRangePicker = ({
   startDate,
   endDate,
   onChange,
+  formatDate: formatDate2,
   placeholder = "Select lunar date range...",
   className,
   label,
@@ -25690,6 +25709,9 @@ var LunarDateRangePicker = ({
     ] })
   ] });
   const displayFormat = (date) => {
+    if (formatDate2) {
+      return formatDate2(date);
+    }
     const formatStr = date.is_leap_month ? t("lunarLeapFormat") : t("lunarFormat");
     return formatStr.replace("{day}", String(date.day)).replace("{month}", String(date.month)).replace("{year}", String(date.year));
   };
@@ -38869,9 +38891,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 +38961,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 +39089,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 +39999,7 @@ function DataTable({
   paginationRange,
   enableHeaderAutoFit = true,
   labels,
+  sortByLabel,
   columnColorGroups,
   borderMode,
   getPortalContainer,
@@ -40173,7 +40209,7 @@ function DataTable({
                       enableHeaderAutoFit,
                       getStickyHeaderClass,
                       getStickyHeaderCellStyle,
-                      sortByLabel: labels?.sortBy,
+                      sortByLabel: sortByLabel ?? labels?.sortBy,
                       t,
                       columnColorGroups,
                       getPortalContainer