@mci-ui/mci-ui 0.0.94 → 0.0.95

package/dist/shared/ui/mciTable/MciTable.js

@@ -1,199 +1,351 @@
-import { jsx as t, jsxs as c } from "react/jsx-runtime";
-import { ConfoundedSquare as _, SortVertical as H, SortFromTopToBottom as J, SortFromBottomToTop as K } from "@solar-icons/react";
-import { useState as O, useMemo as v, useEffect as Q, useCallback as U } from "react";
-import { cn as a } from "../../lib/utils.js";
+import { jsx as r, jsxs as p } from "react/jsx-runtime";
+import { SortVertical as ce, SortFromTopToBottom as oe, SortFromBottomToTop as de } from "@solar-icons/react";
+import { useRef as O, useState as he, useMemo as N, useEffect as $, useCallback as j } from "react";
 /* empty css                 */
-import z from "../mciCheck/MciCheck.js";
-import B from "../mciSkeleton/MciSkeleton.js";
-import X from "./MciTableClamp2.js";
-import { sortRows as Y, normalizeColWidth as Z } from "./mci-table.utils.js";
-const w = (o) => {
-  const b = String(o.key).toLowerCase(), d = o.title.toLowerCase();
-  return b === "action" || b === "actions" || b.includes("action") || d === "action" || d === "actions" || d.includes("action");
+import J from "../mciCheck/MciCheck.js";
+import fe from "../mciEmpty/MciEmpty.js";
+import K from "../mciSkeleton/MciSkeleton.js";
+import { cn as c } from "../../lib/utils.js";
+import ue from "./MciTableClamp2.js";
+import { sortRows as me, normalizeColWidth as be } from "./mci-table.utils.js";
+const ge = 160, pe = 72, ye = 48, E = (s) => {
+  const f = String(s.key).toLowerCase(), b = s.title.toLowerCase();
+  return f === "action" || f === "actions" || f.includes("action") || b === "action" || b === "actions" || b.includes("action");
+}, Q = (s) => {
+  if (typeof s.width == "number") return s.width;
+  if (typeof s.width == "string" && s.width.endsWith("px")) {
+    const f = Number.parseFloat(s.width);
+    if (Number.isFinite(f)) return f;
+  }
+  return E(s) ? pe : ge;
 };
-function ae({
-  columns: o,
-  data: b = [],
-  loading: d = !1,
-  skeletonRows: D = 5,
-  noDataText: P = "",
-  sort: n,
-  onSortChange: N,
-  className: F,
-  headerClassName: C,
-  bodyClassName: R,
-  darkMode: i = !1,
-  variant: j = "orange",
-  rowKey: p = "id",
+function Ee({
+  columns: s,
+  data: f = [],
+  loading: b = !1,
+  skeletonRows: y = 5,
+  noDataText: X = "",
+  sort: u,
+  onSortChange: D,
+  className: Y,
+  headerClassName: F,
+  bodyClassName: B,
+  darkMode: d = !1,
+  variant: H = "orange",
+  rowKey: k = "id",
   rowSelection: l
 }) {
-  const [V, A] = O(null), h = n ?? V, x = v(() => Array.isArray(b) ? b : [], [b]), L = v(() => Y(x, h, !!n), [x, h, n]);
-  Q(() => {
-    n !== void 0 && A(null);
-  }, [n]);
-  const f = v(
-    () => d ? [] : n ? x : L,
-    [d, n, x, L]
-  ), q = U(
+  const v = O(null), w = O(null), T = O(!1), [Z, P] = he(null), g = u ?? Z, S = N(() => Array.isArray(f) ? f : [], [f]), U = N(() => me(S, g, !!u), [S, g, u]);
+  $(() => {
+    u !== void 0 && P(null);
+  }, [u]);
+  const m = N(
+    () => b ? [] : u ? S : U,
+    [b, u, S, U]
+  ), R = N(
+    () => s.reduce(
+      (e, t) => e + Q(t),
+      l ? ye : 0
+    ),
+    [s, l]
+  ), W = j((e) => {
+    const t = v.current, n = w.current;
+    if (!t && !n) return;
+    const o = e?.scrollLeft ?? n?.scrollLeft ?? t?.scrollLeft ?? 0, h = Math.max(
+      t ? t.scrollWidth - t.clientWidth : 0,
+      n ? n.scrollWidth - n.clientWidth : 0
+    ), a = h > 1 && o < h - 1;
+    for (const i of [t, n])
+      i && i.classList.toggle("mci-table-sticky-scrolled", a);
+  }, []), _ = j(
+    (e) => {
+      if (T.current) return;
+      T.current = !0;
+      const { scrollLeft: t } = e;
+      for (const n of [v.current, w.current])
+        !n || n === e || (n.scrollLeft = t);
+      W(e), requestAnimationFrame(() => {
+        T.current = !1;
+      });
+    },
+    [W]
+  );
+  $(() => {
+    const e = v.current, t = w.current;
+    if (!e && !t) return;
+    const n = () => {
+      v.current && _(v.current);
+    }, o = () => {
+      w.current && _(w.current);
+    }, h = () => {
+      const i = v.current, L = w.current, x = L ?? i;
+      if (!x) return;
+      const { scrollLeft: C } = x;
+      i && (i.scrollLeft = C), L && (L.scrollLeft = C), W(x);
+    };
+    if (h(), e?.addEventListener("scroll", n, { passive: !0 }), t?.addEventListener("scroll", o, { passive: !0 }), typeof ResizeObserver > "u")
+      return window.addEventListener("resize", h), () => {
+        window.removeEventListener("resize", h), e?.removeEventListener("scroll", n), t?.removeEventListener("scroll", o);
+      };
+    const a = new ResizeObserver(h);
+    return e && a.observe(e), t && a.observe(t), () => {
+      a.disconnect(), e?.removeEventListener("scroll", n), t?.removeEventListener("scroll", o);
+    };
+  }, [R, s.length, m.length, _, W]);
+  const ee = j(
     (e) => {
       if (!e.sortable) return;
-      let s = null;
-      h?.key !== e.key ? s = { key: e.key, direction: "asc" } : h.direction === "asc" && (s = { key: e.key, direction: "desc" }), n !== void 0 ? N?.(s) : A(s);
+      let t = null;
+      g?.key !== e.key ? t = { key: e.key, direction: "asc" } : g.direction === "asc" && (t = { key: e.key, direction: "desc" }), u !== void 0 ? D?.(t) : P(t);
     },
-    [h, n, N]
-  ), E = (e) => {
+    [g, u, D]
+  ), te = (e) => {
     if (!l) return;
-    const { onChange: s, getCheckboxProps: m } = l;
+    const { onChange: t, getCheckboxProps: n } = l;
     if (e.target.checked) {
-      const r = f.filter((u) => !m?.(u)?.disabled).map((u) => u[p]);
-      s(r);
+      const a = m.filter((i) => !n?.(i)?.disabled).map((i) => i[k]);
+      t(a);
     } else
-      s([]);
-  }, G = (e, s) => {
+      t([]);
+  }, re = (e, t) => {
     if (!l) return;
-    const { selectedRowKeys: m, onChange: y } = l, g = e[p], r = s ? [...m, g] : m.filter((u) => u !== g);
-    y(r);
-  }, I = v(() => {
-    if (!l || f.length === 0) return !1;
-    const e = f.filter((s) => !l.getCheckboxProps?.(s)?.disabled);
+    const { selectedRowKeys: n, onChange: o } = l, h = e[k], a = t ? [...n, h] : n.filter((i) => i !== h);
+    o(a);
+  }, se = N(() => {
+    if (!l || m.length === 0) return !1;
+    const e = m.filter(
+      (t) => !l.getCheckboxProps?.(t)?.disabled
+    );
     return e.length === 0 ? !1 : e.every(
-      (s) => l.selectedRowKeys.includes(s[p])
+      (t) => l.selectedRowKeys.includes(t[k])
     );
-  }, [l, f, p]), W = (e) => {
-    const s = a(i ? "text-neutral-100" : "text-slate-base", "shrink-0");
-    return e.sortable ? !h || h.key !== e.key ? /* @__PURE__ */ t(H, { weight: "Linear", size: 20, className: s }) : h.direction === "asc" ? /* @__PURE__ */ t(J, { weight: "Linear", size: 20, className: s }) : /* @__PURE__ */ t(K, { weight: "Linear", size: 20, className: s }) : null;
-  }, T = () => /* @__PURE__ */ c("colgroup", { children: [
-    l && /* @__PURE__ */ t("col", { style: { width: 48 } }),
-    o.map((e) => /* @__PURE__ */ t("col", { style: { width: Z(e.width) ?? (w(e) ? "1%" : "auto") } }, e.key))
-  ] });
-  return /* @__PURE__ */ t(
+  }, [l, m, k]), ne = (e) => {
+    const t = c(d ? "text-neutral-100" : "text-slate-base", "shrink-0");
+    return e.sortable ? !g || g.key !== e.key ? /* @__PURE__ */ r(ce, { weight: "Linear", size: 20, className: t }) : g.direction === "asc" ? /* @__PURE__ */ r(oe, { weight: "Linear", size: 20, className: t }) : /* @__PURE__ */ r(de, { weight: "Linear", size: 20, className: t }) : null;
+  }, I = N(
+    () => s.length > 0 ? Q(s[s.length - 1]) : 0,
+    [s]
+  ), M = () => /* @__PURE__ */ p("colgroup", { children: [
+    l && /* @__PURE__ */ r("col", { style: { width: 48 } }),
+    s.map((e, t) => /* @__PURE__ */ r(
+      "col",
+      {
+        style: {
+          width: be(e.width) ?? (E(e) ? "1%" : "auto"),
+          ...t === s.length - 1 ? { minWidth: I } : void 0
+        }
+      },
+      e.key
+    ))
+  ] }), z = d ? "border-neutral-200" : "border-slate-200", A = (e, t, n) => {
+    if (e === s.length - 1)
+      return c(
+        "sticky right-0 box-border min-w-[var(--mci-table-sticky-last-min-width)] transition-shadow duration-150",
+        t === "header" ? "z-30 rounded-tr-xl" : "z-20",
+        n?.isLastRow && "rounded-br-xl",
+        t === "header" ? d ? "bg-neutral-300" : "bg-slate-100" : d ? "bg-neutral-300 group-hover:bg-neutral-100/35" : "bg-white group-hover:bg-slate-50"
+      );
+  }, ie = "[&.mci-table-sticky-scrolled_th:last-child]:shadow-md [&.mci-table-sticky-scrolled_td:last-child]:shadow-md", V = d ? "border-neutral-200" : "border-slate-200", le = c(
+    "relative z-0 overflow-hidden rounded-xl border",
+    V,
+    d ? "bg-neutral-300" : "bg-slate-100"
+  ), ae = c(
+    "relative z-[1] -mt-px overflow-hidden rounded-xl border",
+    V,
+    d ? "bg-neutral-300" : "bg-white"
+  ), q = c(
+    "w-full min-w-0 overflow-x-auto",
+    ie,
+    "[scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden"
+  ), G = "w-full table-fixed border-separate border-spacing-0";
+  return /* @__PURE__ */ r("div", { className: c("relative w-full min-w-0", Y), children: /* @__PURE__ */ r(
     "div",
     {
-      className: a(
-        "w-full overflow-x-auto pb-0.5",
-        "[&::-webkit-scrollbar]:h-1",
-        "[&::-webkit-scrollbar-track]:bg-transparent",
-        i ? "[&::-webkit-scrollbar-thumb]:bg-neutral-200" : "[&::-webkit-scrollbar-thumb]:bg-slate-200",
-        "[&::-webkit-scrollbar-thumb]:rounded-full",
-        i ? "hover:[&::-webkit-scrollbar-thumb]:bg-neutral-100" : "hover:[&::-webkit-scrollbar-thumb]:bg-slate-300",
-        F
-      ),
-      children: /* @__PURE__ */ c("div", { className: "inline-block min-w-full align-middle", children: [
-        /* @__PURE__ */ t(
-          "div",
-          {
-            className: a(
-              "overflow-hidden rounded-xl border",
-              i ? "border-neutral-200 bg-neutral-300" : "border-slate-200 bg-slate-100"
-            ),
-            children: /* @__PURE__ */ c("table", { className: "w-full table-fixed", children: [
-              T(),
-              /* @__PURE__ */ t("thead", { children: /* @__PURE__ */ c("tr", { children: [
-                l && /* @__PURE__ */ t("th", { className: a("w-12 px-4 py-3", C), children: /* @__PURE__ */ t("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ t(
-                  z,
+      style: {
+        "--mci-table-sticky-last-min-width": `${I}px`
+      },
+      children: /* @__PURE__ */ p("div", { className: "flex flex-col gap-0", children: [
+        /* @__PURE__ */ r("div", { className: le, children: /* @__PURE__ */ r("div", { ref: v, className: q, children: /* @__PURE__ */ p("table", { className: G, style: { minWidth: R }, children: [
+          M(),
+          /* @__PURE__ */ r("thead", { children: /* @__PURE__ */ p("tr", { children: [
+            l && /* @__PURE__ */ r(
+              "th",
+              {
+                className: c(
+                  "w-12 px-4 py-3 align-middle",
+                  F
+                ),
+                children: /* @__PURE__ */ r("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ r(
+                  J,
                   {
-                    checked: I,
-                    onChange: E,
-                    variant: j,
-                    darkMode: i,
-                    disabled: d || f.length === 0
+                    checked: se,
+                    onChange: te,
+                    variant: H,
+                    darkMode: d,
+                    disabled: b || m.length === 0
                   }
-                ) }) }),
-                o.map((e) => /* @__PURE__ */ t(
-                  "th",
-                  {
-                    onClick: () => q(e),
-                    className: a(
-                      "px-4 py-3 text-left text-sm font-medium transition-colors",
-                      i ? "text-neutral-50" : "text-slate-700",
-                      "whitespace-nowrap overflow-hidden text-ellipsis",
-                      w(e) && "w-px",
-                      e.align === "center" && "text-center",
-                      e.align === "right" && "text-right",
-                      e.sortable && (i ? "cursor-pointer hover:bg-neutral-200" : "cursor-pointer hover:bg-slate-200"),
-                      C
-                    ),
-                    children: /* @__PURE__ */ c(
-                      "div",
-                      {
-                        className: a("flex items-center gap-2 min-w-0", e.align === "right" && "justify-end"),
-                        children: [
-                          /* @__PURE__ */ t("span", { className: "min-w-0 flex-1 truncate", title: e.title, children: e.title }),
-                          W(e)
-                        ]
-                      }
-                    )
-                  },
-                  e.key
-                ))
-              ] }) })
-            ] })
-          }
-        ),
-        /* @__PURE__ */ t(
-          "div",
-          {
-            className: a(
-              "overflow-hidden rounded-xl border border-t-0",
-              i ? "border-neutral-200 bg-transparent" : "border-slate-200 bg-white"
+                ) })
+              }
             ),
-            children: /* @__PURE__ */ c("table", { className: "w-full table-fixed", children: [
-              T(),
-              /* @__PURE__ */ t("tbody", { className: a("divide-y", i ? "divide-neutral-200" : "divide-slate-200"), children: d ? Array.from({ length: D }).map((e, s) => /* @__PURE__ */ c("tr", { children: [
-                l && /* @__PURE__ */ t("td", { className: "w-12 px-4 py-3", children: /* @__PURE__ */ t(B, { height: 20, width: 20, variant: "rounded" }) }),
-                o.map((m) => /* @__PURE__ */ t("td", { className: "px-4 py-3", children: /* @__PURE__ */ t(B, { height: 30, variant: "rounded" }) }, m.key))
-              ] }, s)) : f.length === 0 ? /* @__PURE__ */ t("tr", { children: /* @__PURE__ */ t("td", { colSpan: o.length + (l ? 1 : 0), className: "py-20", children: /* @__PURE__ */ c("div", { className: "flex flex-col items-center justify-center", children: [
-                /* @__PURE__ */ t("div", { className: "relative mb-4", children: /* @__PURE__ */ t(
-                  _,
+            s.map((e, t) => /* @__PURE__ */ r(
+              "th",
+              {
+                onClick: () => ee(e),
+                className: c(
+                  "px-4 py-3 text-left text-sm font-medium transition-colors align-middle",
+                  d ? "text-neutral-50" : "text-slate-700",
+                  "overflow-hidden text-ellipsis whitespace-nowrap",
+                  t === s.length - 1 && "overflow-visible",
+                  E(e) && "w-px",
+                  e.align === "center" && "text-center",
+                  e.align === "right" && "text-right",
+                  e.sortable ? d ? "cursor-pointer hover:bg-neutral-200" : "cursor-pointer hover:bg-slate-200" : "cursor-default",
+                  A(t, "header"),
+                  F
+                ),
+                children: /* @__PURE__ */ p(
+                  "div",
                   {
-                    weight: "Bold",
-                    size: 64,
-                    className: a("animate-float", i ? "text-neutral-100" : "text-slate-400")
+                    className: c(
+                      "flex min-w-0 items-center gap-1",
+                      e.align === "center" && "justify-center",
+                      e.align === "right" && "justify-end"
+                    ),
+                    children: [
+                      /* @__PURE__ */ r("span", { className: "min-w-0 truncate", title: e.title, children: e.title }),
+                      ne(e)
+                    ]
                   }
-                ) }),
-                /* @__PURE__ */ t("p", { className: a("text-sm font-medium", i ? "text-neutral-100" : "text-slate-400"), children: P })
-              ] }) }) }) : f.map((e, s) => {
-                const m = e[p], y = l?.selectedRowKeys.includes(m), g = l?.getCheckboxProps?.(e)?.disabled;
-                return /* @__PURE__ */ c("tr", { className: a("group transition-colors", i ? "hover:bg-neutral-100/35" : "hover:bg-slate-50"), children: [
-                  l && /* @__PURE__ */ t("td", { className: a("w-12 px-4 py-3 align-top", R), children: /* @__PURE__ */ t("div", { className: "flex items-center justify-center pt-1", children: /* @__PURE__ */ t(
-                    z,
+                )
+              },
+              e.key
+            ))
+          ] }) })
+        ] }) }) }),
+        /* @__PURE__ */ r("div", { className: ae, children: /* @__PURE__ */ r("div", { ref: w, className: q, children: /* @__PURE__ */ p("table", { className: G, style: { minWidth: R }, children: [
+          M(),
+          /* @__PURE__ */ r("tbody", { children: b ? Array.from({ length: y }).map((e, t) => /* @__PURE__ */ p("tr", { children: [
+            l && /* @__PURE__ */ r(
+              "td",
+              {
+                className: c(
+                  "w-12 border-b px-4 py-3 align-middle",
+                  z,
+                  t === y - 1 && "rounded-bl-xl",
+                  t === y - 1 && "border-b-0"
+                ),
+                children: /* @__PURE__ */ r(K, { height: 20, width: 20, variant: "rounded" })
+              }
+            ),
+            s.map((n, o) => /* @__PURE__ */ r(
+              "td",
+              {
+                className: c(
+                  "border-b px-4 py-3 align-middle",
+                  z,
+                  !l && o === 0 && t === y - 1 && "rounded-bl-xl",
+                  A(o, "body", {
+                    isLastRow: t === y - 1
+                  }),
+                  o === s.length - 1 && t === y - 1 && "rounded-br-xl",
+                  t === y - 1 && "border-b-0"
+                ),
+                children: /* @__PURE__ */ r(K, { height: 30, variant: "rounded" })
+              },
+              n.key
+            ))
+          ] }, t)) : m.length === 0 ? /* @__PURE__ */ r("tr", { children: /* @__PURE__ */ r(
+            "td",
+            {
+              colSpan: s.length + (l ? 1 : 0),
+              className: "py-20 align-middle",
+              children: /* @__PURE__ */ r(fe, { title: X || void 0 })
+            }
+          ) }) : m.map((e, t) => {
+            const n = e[k], o = l?.selectedRowKeys.includes(n), h = l?.getCheckboxProps?.(e)?.disabled, a = t === m.length - 1;
+            return /* @__PURE__ */ p(
+              "tr",
+              {
+                className: c(
+                  "group transition-colors",
+                  d ? "hover:bg-neutral-100/35" : "hover:bg-slate-50"
+                ),
+                children: [
+                  l && /* @__PURE__ */ r(
+                    "td",
                     {
-                      checked: y,
-                      disabled: g,
-                      variant: j,
-                      darkMode: i,
-                      onChange: (r) => G(e, r.target.checked)
+                      className: c(
+                        "w-12 border-b px-4 py-3 align-middle",
+                        z,
+                        a && "rounded-bl-xl",
+                        a && "border-b-0",
+                        B
+                      ),
+                      children: /* @__PURE__ */ r("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ r(
+                        J,
+                        {
+                          checked: o,
+                          disabled: h,
+                          variant: H,
+                          darkMode: d,
+                          onChange: (i) => re(e, i.target.checked)
+                        }
+                      ) })
                     }
-                  ) }) }),
-                  o.map((r) => {
-                    const u = e[r.key], k = r.render ? r.render(u, e) : String(u ?? "-");
-                    return /* @__PURE__ */ t(
+                  ),
+                  s.map((i, L) => {
+                    const x = e[i.key], C = i.render ? i.render(x, e) : String(x ?? "-");
+                    return /* @__PURE__ */ r(
                       "td",
                       {
-                        className: a(
-                          "align-top px-4 py-3 text-sm font-normal overflow-visible",
-                          i ? "text-neutral-50" : "text-black",
+                        className: c(
+                          "overflow-hidden border-b px-4 py-3 text-sm font-normal align-middle",
+                          z,
+                          d ? "text-neutral-50" : "text-black",
                           "min-w-0 whitespace-normal",
-                          w(r) && "w-px whitespace-nowrap",
-                          r.align === "center" && "text-center",
-                          r.align === "right" && "text-right",
-                          R,
-                          r.className
+                          E(i) && "w-px whitespace-nowrap",
+                          i.align === "center" && "text-center",
+                          i.align === "right" && "text-right",
+                          !l && L === 0 && a && "rounded-bl-xl",
+                          A(L, "body", {
+                            isLastRow: a
+                          }),
+                          L === s.length - 1 && a && "rounded-br-xl",
+                          a && "border-b-0",
+                          B,
+                          i.className
                         ),
-                        children: /* @__PURE__ */ t(X, { title: typeof k == "string" ? k : void 0, children: k })
+                        children: /* @__PURE__ */ r(
+                          "div",
+                          {
+                            className: c(
+                              "flex min-w-0 items-center",
+                              i.align === "center" && "justify-center",
+                              i.align === "right" && "justify-end"
+                            ),
+                            children: /* @__PURE__ */ r(
+                              ue,
+                              {
+                                title: typeof C == "string" ? C : void 0,
+                                children: C
+                              }
+                            )
+                          }
+                        )
                       },
-                      r.key
+                      i.key
                     );
                   })
-                ] }, s);
-              }) })
-            ] })
-          }
-        )
+                ]
+              },
+              t
+            );
+          }) })
+        ] }) }) })
       ] })
     }
-  );
+  ) });
 }
 export {
-  ae as default
+  Ee as default
 };

package/dist/shared/ui/mciTable/MciTableClamp2.js

@@ -1,8 +1,8 @@
-import { jsx as e } from "react/jsx-runtime";
-function o({ children: t, title: i }) {
-  const a = typeof t == "string" ? t : void 0;
-  return typeof t != "string" && typeof t != "number" ? /* @__PURE__ */ e("div", { className: "-m-1 inline-flex w-fit max-w-full items-start overflow-visible p-1 align-top", children: t }) : /* @__PURE__ */ e("div", { className: "min-w-0", children: /* @__PURE__ */ e("div", { className: "clamp-2 break-words", title: i ?? a, children: t }) });
+import { jsx as t } from "react/jsx-runtime";
+function l({ children: e, title: i }) {
+  const a = typeof e == "string" ? e : void 0;
+  return typeof e != "string" && typeof e != "number" ? /* @__PURE__ */ t("div", { className: "-m-1 inline-flex w-fit max-w-full items-center overflow-visible p-1 align-middle", children: e }) : /* @__PURE__ */ t("div", { className: "min-w-0", children: /* @__PURE__ */ t("div", { className: "clamp-2 break-words", title: i ?? a, children: e }) });
 }
 export {
-  o as default
+  l as default
 };