@e-burgos/tucu-ui 2.5.0 → 2.7.0

package/datatable/components/Common/Tooltip.mjs

@@ -0,0 +1,200 @@
+import { jsx as v, Fragment as W, jsxs as F } from "react/jsx-runtime";
+import { useState as z, useRef as g, useEffect as $ } from "react";
+import q from "react-dom";
+function O({
+  children: y,
+  text: b,
+  style: I = {},
+  position: f = "auto",
+  delay: C = 0
+}) {
+  const [a, m] = z(!1), [h, P] = z({ top: 0, left: 0, placement: "top" }), [p, x] = z(!1), l = g(null), c = g(null), d = g(null), T = (t, e, u) => {
+    const o = window.innerWidth, i = window.innerHeight, w = 8;
+    let s = "top";
+    if (u === "auto") {
+      const k = t.top, B = i - t.bottom, M = t.left, j = o - t.right, S = Math.max(k, B, M, j);
+      S === k ? s = "top" : S === B ? s = "bottom" : S === M ? s = "left" : s = "right";
+    } else
+      s = u;
+    let r = 0, n = 0;
+    switch (s) {
+      case "top":
+        r = t.top - e.height - w, n = t.left + t.width / 2, n - e.width / 2 < 0 ? n = e.width / 2 : n + e.width / 2 > o && (n = o - e.width / 2);
+        break;
+      case "bottom":
+        r = t.bottom + w, n = t.left + t.width / 2, n - e.width / 2 < 0 ? n = e.width / 2 : n + e.width / 2 > o && (n = o - e.width / 2);
+        break;
+      case "left":
+        r = t.top + t.height / 2, n = t.left - e.width - w, r - e.height / 2 < 0 ? r = e.height / 2 : r + e.height / 2 > i && (r = i - e.height / 2);
+        break;
+      case "right":
+        r = t.top + t.height / 2, n = t.right + w, r - e.height / 2 < 0 ? r = e.height / 2 : r + e.height / 2 > i && (r = i - e.height / 2);
+        break;
+    }
+    return { top: r, left: n, placement: s };
+  };
+  $(() => {
+    if (!a || !l.current) {
+      x(!1);
+      return;
+    }
+    const t = () => {
+      if (l.current && c.current) {
+        const u = l.current.getBoundingClientRect(), o = c.current.getBoundingClientRect();
+        if (o.width > 0 && o.height > 0) {
+          const i = T(
+            u,
+            o,
+            f
+          );
+          P(i), x(!0);
+        } else
+          requestAnimationFrame(t);
+      }
+    }, e = setTimeout(() => {
+      requestAnimationFrame(t);
+    }, 0);
+    return () => clearTimeout(e);
+  }, [a, f]), $(() => {
+    if (!a) return;
+    const t = () => {
+      if (l.current && c.current) {
+        const e = l.current.getBoundingClientRect(), u = c.current.getBoundingClientRect(), o = T(
+          e,
+          u,
+          f
+        );
+        P(o);
+      }
+    };
+    return window.addEventListener("scroll", t, !0), window.addEventListener("resize", t), () => {
+      window.removeEventListener("scroll", t, !0), window.removeEventListener("resize", t);
+    };
+  }, [a, f]), $(() => () => {
+    d.current && clearTimeout(d.current);
+  }, []);
+  const E = () => {
+    C > 0 ? d.current = setTimeout(() => {
+      m(!0);
+    }, C) : m(!0);
+  }, L = () => {
+    d.current && (clearTimeout(d.current), d.current = null), m(!1), x(!1);
+  };
+  if (!b)
+    return /* @__PURE__ */ v(W, { children: y });
+  const A = () => {
+    switch (h.placement) {
+      case "top":
+        return "translate(-50%, -100%)";
+      case "bottom":
+        return "translate(-50%, 0)";
+      case "left":
+        return "translate(-100%, -50%)";
+      case "right":
+        return "translate(0, -50%)";
+      default:
+        return "translate(-50%, -100%)";
+    }
+  }, H = () => {
+    const e = {
+      position: "absolute",
+      width: 0,
+      height: 0,
+      borderStyle: "solid"
+    };
+    switch (h.placement) {
+      case "top":
+        return {
+          ...e,
+          bottom: -6,
+          left: "50%",
+          transform: "translateX(-50%)",
+          borderWidth: "6px 6px 0 6px",
+          borderColor: "var(--color-table-header-bg, #2a2d31) transparent transparent transparent"
+        };
+      case "bottom":
+        return {
+          ...e,
+          top: -6,
+          left: "50%",
+          transform: "translateX(-50%)",
+          borderWidth: "0 6px 6px 6px",
+          borderColor: "transparent transparent var(--color-table-header-bg, #2a2d31) transparent"
+        };
+      case "left":
+        return {
+          ...e,
+          right: -6,
+          top: "50%",
+          transform: "translateY(-50%)",
+          borderWidth: "6px 0 6px 6px",
+          borderColor: "transparent transparent transparent var(--color-table-header-bg, #2a2d31)"
+        };
+      case "right":
+        return {
+          ...e,
+          left: -6,
+          top: "50%",
+          transform: "translateY(-50%)",
+          borderWidth: "6px 6px 6px 0",
+          borderColor: "transparent var(--color-table-header-bg, #2a2d31) transparent transparent"
+        };
+      default:
+        return e;
+    }
+  };
+  return /* @__PURE__ */ F(W, { children: [
+    /* @__PURE__ */ v(
+      "div",
+      {
+        ref: l,
+        style: { display: "inline-block", ...I },
+        onMouseEnter: E,
+        onMouseLeave: L,
+        onFocus: E,
+        onBlur: L,
+        role: "tooltip",
+        "aria-label": b,
+        children: y
+      }
+    ),
+    a && q.createPortal(
+      /* @__PURE__ */ F(
+        "div",
+        {
+          ref: c,
+          role: "tooltip",
+          "aria-hidden": !a,
+          style: {
+            position: "fixed",
+            top: p ? `${h.top}px` : "-9999px",
+            left: p ? `${h.left}px` : "-9999px",
+            transform: A(),
+            padding: "6px 12px",
+            borderRadius: "4px",
+            background: "var(--color-table-header-bg, #2a2d31)",
+            color: "var(--color-table-primary-text, #ffffff)",
+            fontSize: "12px",
+            lineHeight: "16px",
+            whiteSpace: "nowrap",
+            zIndex: 9999,
+            pointerEvents: "none",
+            opacity: p && a ? 1 : 0,
+            visibility: p ? "visible" : "hidden",
+            transition: "opacity 0.15s ease-in-out",
+            boxShadow: "0 2px 8px rgba(0, 0, 0, 0.15)",
+            fontFamily: "var(--font-family-table, Inter, sans-serif)"
+          },
+          children: [
+            b,
+            /* @__PURE__ */ v("div", { style: H() })
+          ]
+        }
+      ),
+      document.body
+    )
+  ] });
+}
+export {
+  O as Tooltip
+};

package/datatable/components/DataTable/ColumnsVisibilityManager.mjs

@@ -0,0 +1,101 @@
+import { jsxs as i, jsx as t } from "react/jsx-runtime";
+import { useState as p } from "react";
+import { useDataTableContext as x } from "../../context/index.mjs";
+import { Drawer as h } from "../../../components/dialog/drawer.mjs";
+import { Button as s } from "../../../components/buttons/button/index.mjs";
+import { Checkbox as u } from "../../../components/inputs/checkbox.mjs";
+import { SlidersHorizontal as g } from "lucide-react";
+const V = () => {
+  const a = x(), [m, o] = p(!1);
+  if (!a) return null;
+  const { table: n } = a;
+  if (!n) return null;
+  const c = n.getAllLeafColumns().filter((e) => e.getCanHide()), d = (e) => {
+    c.forEach((l) => {
+      l.toggleVisibility(e);
+    });
+  };
+  return /* @__PURE__ */ i("div", { className: "flex items-center", "data-testid": "columns-visibility-manager", children: [
+    /* @__PURE__ */ i(
+      s,
+      {
+        variant: "ghost",
+        size: "small",
+        onClick: () => o((e) => !e),
+        color: "primary",
+        className: "border border-1! px-3! text-foreground! border-[var(--color-table-divider)]!",
+        children: [
+          /* @__PURE__ */ t(g, { className: "w-4 h-4" }),
+          /* @__PURE__ */ t("span", { className: "text-xs font-semibold", children: "Columns" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ t(
+      h,
+      {
+        isOpen: m,
+        setIsOpen: o,
+        position: "right",
+        type: "sidebar",
+        title: "Manage Columns",
+        className: "w-80 bg-table-box-bg border-l border-table-divider",
+        children: /* @__PURE__ */ i("div", { className: "flex flex-col h-full space-y-6 pt-4", children: [
+          /* @__PURE__ */ i("div", { className: "flex items-center justify-between border-b border-table-divider pb-4 px-2", children: [
+            /* @__PURE__ */ t("span", { className: "text-xs font-semibold uppercase tracking-wider text-table-secondary-text", children: "Visible Columns" }),
+            /* @__PURE__ */ i("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ t(
+                s,
+                {
+                  variant: "transparent",
+                  size: "tiny",
+                  color: "primary",
+                  onClick: () => d(!0),
+                  className: "text-xs font-medium!",
+                  children: "Show All"
+                }
+              ),
+              /* @__PURE__ */ t("span", { className: "text-table-secondary-text opacity-40 text-xs", children: "|" }),
+              /* @__PURE__ */ t(
+                s,
+                {
+                  variant: "transparent",
+                  size: "tiny",
+                  color: "danger",
+                  onClick: () => d(!1),
+                  className: "text-xs font-medium!",
+                  children: "Hide All"
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ t("div", { className: "flex-1 overflow-y-auto space-y-2 pr-1 px-2", children: c.map((e) => {
+            const l = e.id, r = e.columnDef.header, b = typeof r == "string" ? r : l;
+            return /* @__PURE__ */ t(
+              "div",
+              {
+                className: "flex items-center justify-between p-2 rounded-lg hover:bg-table-row-hover transition-colors",
+                children: /* @__PURE__ */ t(
+                  u,
+                  {
+                    id: `col-visibility-${l}`,
+                    label: b,
+                    checked: e.getIsVisible(),
+                    onChange: (f) => e.toggleVisibility(f.target.checked),
+                    size: "sm",
+                    className: "w-full select-none",
+                    labelClassName: "pl-2 font-medium text-table-primary-text text-sm"
+                  }
+                )
+              },
+              l
+            );
+          }) })
+        ] })
+      }
+    )
+  ] });
+};
+export {
+  V as ColumnsVisibilityManager,
+  V as default
+};

package/datatable/components/DataTable/DataTable.mjs

@@ -0,0 +1,11 @@
+import { jsx as t } from "react/jsx-runtime";
+import { memo as r } from "react";
+import { DataTableProvider as o } from "../../context/index.mjs";
+import e from "./DataTableComponent/index.mjs";
+function m(a) {
+  return /* @__PURE__ */ t(o, { ...a, children: /* @__PURE__ */ t(e, { data: a.data }) });
+}
+const l = r(m);
+export {
+  l as default
+};

package/datatable/components/DataTable/DataTableComponent/index.mjs

@@ -0,0 +1,252 @@
+import { jsxs as s, jsx as e, Fragment as J } from "react/jsx-runtime";
+import { memo as K, useState as Q, Fragment as U } from "react";
+import { cn as y } from "../../../common/helpers/cn.mjs";
+import V from "../../Footer/index.mjs";
+import X from "../../ManualPagination/index.mjs";
+import Y from "../../Pagination/index.mjs";
+import Z from "../../../context/DragDropContentContext.mjs";
+import ee from "../../../context/DragDropTableContext.mjs";
+import { useDataTableContext as te } from "../../../context/index.mjs";
+import oe from "../StateTableHandler/index.mjs";
+import ae from "../SubComponentDataTable/index.mjs";
+import re from "../TableHead/index.mjs";
+import ne from "../TableRow/index.mjs";
+import ie from "../TableWrapper/index.mjs";
+function le({
+  data: P
+}) {
+  const S = te(), { table: o, config: p, scrollProps: T, tableState: D, tableContainerRef: O, utils: R } = S || {}, { columnOrder: l } = D || {}, {
+    isEmpty: c,
+    checkState: i,
+    handleFetch: F,
+    isSubComponent: N,
+    isManualPagination: h
+  } = R || {}, {
+    isLoading: E,
+    isError: H,
+    headerOptions: u,
+    pagination: a,
+    renderSubComponent: I,
+    renderSubDataTable: g,
+    rowActions: M,
+    rowSelection: W,
+    tableId: z,
+    title: f,
+    border: x,
+    sx: t,
+    smallAnatomy: m,
+    stateMessage: A,
+    setCurrentRow: w,
+    forceShowMenuActions: $,
+    showFooter: k,
+    showHeader: C = !0
+  } = p || {}, r = z || "datatable-id", [j, L] = Q(!1), v = u?.headerContainer, d = T?.containerWith || 0, _ = o?.getCenterTotalSize() || 0;
+  if (!o) return null;
+  const q = p?.mode, b = o.getRowModel()?.rows?.length ?? 0;
+  return /* @__PURE__ */ s(
+    ie,
+    {
+      tableId: r,
+      title: f,
+      border: x,
+      isEmpty: c,
+      isFetching: F,
+      headerContainer: v,
+      containerWidth: d,
+      sx: t,
+      mode: q,
+      children: [
+        /* @__PURE__ */ e(
+          "div",
+          {
+            id: `${r}-container`,
+            "data-testid": "table-container",
+            ref: O,
+            className: y(
+              "flex flex-col w-full p-0 z-1 h-full overflow-auto bg-table-box-bg",
+              x && !f && !v && "rounded-t"
+            ),
+            style: {
+              maxHeight: t?.tableContainer?.maxHeight || "373px",
+              // valid for 6 rows
+              ...t?.tableContainer
+            },
+            children: /* @__PURE__ */ e(
+              ee,
+              {
+                columnOrder: l || [],
+                setColumnOrder: o.setColumnOrder,
+                children: /* @__PURE__ */ s(
+                  "div",
+                  {
+                    role: "table",
+                    id: `${r}-table`,
+                    "data-testid": "table",
+                    className: "table border-collapse box-border border-spacing-0 border-transparent relative h-full! z-0",
+                    style: {
+                      width: `${_}px`,
+                      ...t?.table
+                    },
+                    children: [
+                      C && /* @__PURE__ */ e(
+                        re,
+                        {
+                          sx: t,
+                          tableId: r,
+                          table: o,
+                          data: P,
+                          disabled: i,
+                          headerOptions: u,
+                          smallAnatomy: m,
+                          columnOrder: l || [],
+                          setHoverColumns: L
+                        }
+                      ),
+                      (i || b === 0) && C && /* @__PURE__ */ e(
+                        oe,
+                        {
+                          isLoading: E || !1,
+                          isError: H || !1,
+                          isEmpty: c || b === 0,
+                          containerWith: d || 0,
+                          stateMessage: A
+                        }
+                      ),
+                      !i && b > 0 && /* @__PURE__ */ e(
+                        "div",
+                        {
+                          role: "rowgroup",
+                          id: "data-table-body",
+                          "data-testid": "table-body",
+                          className: "z-0 h-full relative",
+                          style: {
+                            ...t?.tbody
+                          },
+                          children: /* @__PURE__ */ e(
+                            Z,
+                            {
+                              columnOrder: l || [],
+                              children: o.getRowModel()?.rows?.map((n, B) => /* @__PURE__ */ s(U, { children: [
+                                /* @__PURE__ */ e(
+                                  ne,
+                                  {
+                                    tableId: r,
+                                    table: o,
+                                    row: n,
+                                    index: B,
+                                    columnOrder: l || [],
+                                    isColumn: j,
+                                    rowActions: M,
+                                    rowSelection: W || {},
+                                    smallAnatomy: m,
+                                    forceShowMenuActions: $,
+                                    style: {
+                                      row: t?.row,
+                                      cell: t?.cell
+                                    },
+                                    onClick: w ? (G) => {
+                                      G.preventDefault(), w(n);
+                                    } : () => {
+                                    }
+                                  }
+                                ),
+                                N && n?.getIsExpanded() && /* @__PURE__ */ e(
+                                  "div",
+                                  {
+                                    role: "row",
+                                    "data-testid": "table-row-expanded",
+                                    className: "datatable-expanded-row sticky left-0 border border-table-divider",
+                                    style: {
+                                      width: d,
+                                      ...t?.rowExpanded
+                                    },
+                                    children: /* @__PURE__ */ e(
+                                      "div",
+                                      {
+                                        role: "cell",
+                                        "data-testid": "table-cell-expanded",
+                                        className: "w-full h-full p-0 relative bg-table-row-expanded-bg",
+                                        children: /* @__PURE__ */ e(
+                                          "div",
+                                          {
+                                            "data-testid": "table-row-expanded-container",
+                                            style: {
+                                              width: d
+                                            },
+                                            className: "flex flex-col w-full p-0! box-border relative transition-transform duration-200 [transition-behavior:smooth] [&_div[role='rowheader-fixed']]:hidden! [&_div[role='rowheader']]:visible!",
+                                            children: g ? /* @__PURE__ */ e(
+                                              ae,
+                                              {
+                                                row: n,
+                                                tableId: r,
+                                                renderSubDataTable: g
+                                              }
+                                            ) : I?.({
+                                              row: n,
+                                              columns: o.getAllColumns()
+                                            }) ?? null
+                                          }
+                                        )
+                                      }
+                                    )
+                                  }
+                                )
+                              ] }, n.id))
+                            },
+                            "drag-context-body"
+                          )
+                        }
+                      ),
+                      !i && k && /* @__PURE__ */ e(
+                        V,
+                        {
+                          className: y(
+                            "border-collapse text-indent-initial border-spacing-0 h-14 max-h-14 min-h-14 bg-table-header-bg text-table-secondary-text",
+                            m && "h-10! max-h-10! min-h-10!"
+                          ),
+                          sx: {
+                            ...t?.tfoot
+                          },
+                          table: o
+                        }
+                      )
+                    ]
+                  }
+                )
+              }
+            )
+          }
+        ),
+        !c && /* @__PURE__ */ s(J, { children: [
+          !i && !h && a?.showPagination && /* @__PURE__ */ e(
+            Y,
+            {
+              tableId: r,
+              table: o,
+              pagination: a,
+              style: t?.pagination
+            }
+          ),
+          h && a?.showPagination && /* @__PURE__ */ e(
+            X,
+            {
+              manualPagination: a.manualPagination || (a.serverPagination ? {
+                enabled: !0,
+                rowCount: a.serverPagination.totalCount,
+                pagination: a.serverPagination.pagination,
+                setPagination: a.serverPagination.setPagination
+              } : void 0),
+              rowsInfo: a.rowsInfo,
+              hideRecordsSelector: a.hideRecordsSelector,
+              style: t?.pagination
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+const ye = K(le);
+export {
+  ye as default
+};

package/datatable/components/DataTable/StateTableHandler/index.mjs

@@ -0,0 +1,76 @@
+import { jsx as e, jsxs as o } from "react/jsx-runtime";
+import { Spinner as c } from "../../Common/Spinner.mjs";
+import { cn as p } from "../../../common/helpers/cn.mjs";
+const f = ({
+  containerWith: i,
+  isLoading: n,
+  isEmpty: l,
+  isError: a,
+  stateMessage: t = { hideContactSupport: !1 }
+}) => {
+  const r = {
+    noData: t?.noData || "No available data",
+    noDataDescription: t?.noDataDescription || "There is no data based on the selected criteria. Please try adjusting your filters or refreshing the page to ensure any recent changes are reflected.",
+    errorData: t?.errorData || "There was a problem loading the data",
+    errorDataDescription: t?.errorDataDescription || "Please try again refreshing the page or the selected content. If the problem continues or you need help, contact our Support Team.",
+    contactSupport: t?.contactSupport || "Contact Support",
+    contactSupportLink: t?.contactSupportLink || "https://www.estebanburgos.com.ar/"
+  };
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      role: "rowgroup",
+      className: p(
+        "h-[200px]! relative flex items-center",
+        t?.className
+      ),
+      children: /* @__PURE__ */ e(
+        "div",
+        {
+          role: "row",
+          className: "sticky left-0 transition-transform duration-200 [transition-behavior:smooth]",
+          style: {
+            width: i
+          },
+          children: /* @__PURE__ */ o(
+            "div",
+            {
+              role: "cell",
+              className: "font-normal flex flex-row justify-center items-center w-full h-full! max-h-max! min-h-fit! px-4 box-border z-0",
+              children: [
+                n && /* @__PURE__ */ e("div", { className: "flex flex-col justify-center items-center w-full max-w-[420px] h-full min-h-[200px] box-border z-0 gap-4 p-4", children: /* @__PURE__ */ e(c, { size: "lg", color: "primary" }) }),
+                l && !a && !n && /* @__PURE__ */ o("div", { className: "flex flex-col justify-center items-center w-full max-w-[420px] h-full min-h-[200px] box-border z-0 gap-4 p-4", children: [
+                  /* @__PURE__ */ e("h6", { className: "text-lg font-bold leading-6 text-center m-0 p-0 text-table-primary-text", children: r.noData }),
+                  /* @__PURE__ */ e("p", { className: "font-sans text-sm font-normal leading-5 text-center tracking-[0.15px] m-0 p-0 text-table-secondary-text", children: r.noDataDescription }),
+                  !t?.hideContactSupport && t?.contactSupportLink && /* @__PURE__ */ e(
+                    "button",
+                    {
+                      className: "flex justify-center items-center w-fit h-fit min-h-[30px] border-none text-[var(--color-table-primary)] bg-transparent font-sans text-sm font-medium leading-5 tracking-[0.15px] text-center cursor-pointer z-0 hover:opacity-80 transition-opacity",
+                      onClick: () => window.open(r.contactSupportLink, "blank"),
+                      children: "Contact Support"
+                    }
+                  )
+                ] }),
+                a && !n && /* @__PURE__ */ o("div", { className: "flex flex-col justify-center items-center w-full max-w-[420px] h-full min-h-[200px] box-border z-0 gap-4 p-4", children: [
+                  /* @__PURE__ */ e("h6", { className: "font-sans text-lg font-bold leading-6 text-center m-0 p-0 text-table-primary-text", children: r.errorData }),
+                  /* @__PURE__ */ e("p", { className: "font-sans text-sm font-normal leading-5 text-center tracking-[0.15px] m-0 p-0 text-table-secondary-text", children: r.errorDataDescription }),
+                  !t?.hideContactSupport && /* @__PURE__ */ e(
+                    "button",
+                    {
+                      className: "flex justify-center items-center w-fit h-fit min-h-[30px] border-none text-[var(--color-table-primary)] bg-transparent font-sans text-sm font-medium leading-5 tracking-[0.15px] text-center cursor-pointer z-0 hover:opacity-80 transition-opacity",
+                      onClick: () => window.open(r.contactSupportLink, "blank"),
+                      children: "Contact Support"
+                    }
+                  )
+                ] })
+              ]
+            }
+          )
+        }
+      )
+    }
+  );
+};
+export {
+  f as default
+};