@e-burgos/tucu-ui 2.5.0 → 2.7.0

package/datatable/components/Pagination/index.mjs

@@ -0,0 +1,100 @@
+import { jsxs as n, jsx as t } from "react/jsx-runtime";
+import { ArrowIndicator as c } from "../Assets/ArrowIndicator.mjs";
+import { ArrowPaginationIndicator as m } from "../Assets/ArrowPaginationIndicator.mjs";
+import { IconButton as i } from "../Common/IconButton/index.mjs";
+const P = ({
+  table: e,
+  pagination: r,
+  style: l
+}) => {
+  const s = r?.pageSize || 5, g = e.getRowModel().rows.length * e.getState().pagination.pageIndex + 1, x = e.getState().pagination.pageSize * (e.getState().pagination.pageIndex + 1), d = e.getState().pagination.pageSize * e.getState().pagination.pageIndex + 1, o = [5, 10, 20, 30, 40, 50], p = o?.includes(s) ? o : [s, ...o].sort((a, f) => a - f);
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      className: "flex flex-row items-center justify-between w-full p-4 m-0 h-[50px] box-border z-0 max-md:flex-col-reverse max-md:items-center max-md:gap-0 max-md:h-fit",
+      style: {
+        borderTop: "1px solid var(--color-table-divider)",
+        ...l
+      },
+      children: [
+        /* @__PURE__ */ t("div", { className: "flex items-center justify-start w-fit gap-[5px]", children: r?.rowsInfo && /* @__PURE__ */ t("p", { className: "m-0 font-sans font-normal leading-5 text-xs tracking-[0.025rem] normal-case text-table-primary-text", children: `Showing ${e.getCanNextPage() ? g : d} of ${e.getRowCount()} Rows` }) }),
+        /* @__PURE__ */ n("div", { className: "flex items-center justify-end w-fit gap-4 max-md:w-full max-md:gap-2 max-md:flex-row max-md:justify-center max-md:flex-wrap", children: [
+          !r?.hideRecordsSelector && /* @__PURE__ */ n("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ t("p", { className: "m-0 font-sans font-normal leading-5 text-xs tracking-[0.025rem] normal-case text-table-primary-text whitespace-nowrap", children: "per page:" }),
+            /* @__PURE__ */ t(
+              "select",
+              {
+                value: e.getState().pagination.pageSize,
+                onChange: (a) => {
+                  e.setPageSize(Number(a.target.value));
+                },
+                className: "text-table-primary-text text-xs bg-transparent border-none outline-none cursor-pointer appearance-none pr-6 pl-2 py-1 rounded hover:bg-table-row-hover transition-colors duration-200",
+                style: {
+                  backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23b3b3b3' d='M6 9L1 4h10z'/%3E%3C/svg%3E")`,
+                  backgroundRepeat: "no-repeat",
+                  backgroundPosition: "right 0.25rem center",
+                  backgroundSize: "0.75rem"
+                },
+                children: p.map((a) => /* @__PURE__ */ t(
+                  "option",
+                  {
+                    value: a,
+                    className: "text-table-primary-text bg-table-row-expanded-bg",
+                    children: a
+                  },
+                  a
+                ))
+              }
+            )
+          ] }),
+          /* @__PURE__ */ t("div", { className: "flex items-center gap-2 max-md:mb-2.5", children: /* @__PURE__ */ t("p", { className: "m-0 font-sans font-normal leading-5 text-xs tracking-[0.025rem] normal-case text-table-primary-text whitespace-nowrap", children: `${e.getCanNextPage() ? g : d}-${e.getCanNextPage() ? x : e.getRowCount()} of ${e.getRowCount()} Rows` }) }),
+          /* @__PURE__ */ n("div", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ t(
+              i,
+              {
+                size: "xl",
+                isPinned: !0,
+                onClick: () => e.firstPage(),
+                disabled: !e.getCanPreviousPage(),
+                icon: /* @__PURE__ */ t(m, { direction: "first" })
+              }
+            ),
+            /* @__PURE__ */ t(
+              i,
+              {
+                size: "xl",
+                isPinned: !0,
+                onClick: () => e.previousPage(),
+                disabled: !e.getCanPreviousPage(),
+                icon: /* @__PURE__ */ t(c, { direction: "left" })
+              }
+            ),
+            /* @__PURE__ */ t(
+              i,
+              {
+                size: "xl",
+                isPinned: !0,
+                onClick: () => e.nextPage(),
+                disabled: !e.getCanNextPage(),
+                icon: /* @__PURE__ */ t(c, { direction: "right" })
+              }
+            ),
+            /* @__PURE__ */ t(
+              i,
+              {
+                size: "xl",
+                isPinned: !0,
+                onClick: () => e.lastPage(),
+                disabled: !e.getCanNextPage(),
+                icon: /* @__PURE__ */ t(m, { direction: "last" })
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+};
+export {
+  P as default
+};

package/datatable/components/RowSelection/index.mjs

@@ -0,0 +1,23 @@
+import { jsx as r } from "react/jsx-runtime";
+import { useRef as t, useEffect as l } from "react";
+function b({
+  type: c = "checkbox",
+  indeterminate: o,
+  ...f
+}) {
+  const e = t(null);
+  return l(() => {
+    typeof o == "boolean" && (e.current.indeterminate = !f.checked && o);
+  }, [e, o]), /* @__PURE__ */ r(
+    "input",
+    {
+      type: c,
+      ref: e,
+      className: c === "checkbox" ? "table-checkbox" : "table-radio",
+      ...f
+    }
+  );
+}
+export {
+  b as RowSelection
+};

package/datatable/context/DragDropContentContext.mjs

@@ -0,0 +1,18 @@
+import { jsx as e } from "react/jsx-runtime";
+import { SortableContext as n, horizontalListSortingStrategy as a } from "@dnd-kit/sortable";
+const m = ({
+  children: t,
+  columnOrder: o,
+  id: r
+}) => /* @__PURE__ */ e(
+  n,
+  {
+    items: o,
+    strategy: a,
+    children: t
+  },
+  r
+);
+export {
+  m as default
+};

package/datatable/context/DragDropTableContext.mjs

@@ -0,0 +1,36 @@
+import { jsx as m } from "react/jsx-runtime";
+import { useSensors as u, useSensor as r, MouseSensor as l, TouchSensor as p, KeyboardSensor as D, DndContext as S, closestCenter as C } from "@dnd-kit/core";
+import { restrictToHorizontalAxis as g } from "@dnd-kit/modifiers";
+import { arrayMove as v } from "@dnd-kit/sortable";
+const y = ({
+  children: i,
+  columnOrder: o,
+  setColumnOrder: d
+}) => {
+  const a = (t) => {
+    if (!t) return;
+    const { active: e, over: n } = t;
+    if (e && n && e.id !== n.id) {
+      const f = o.indexOf(e.id), x = o.indexOf(n.id), s = v(o, f, x);
+      return d(s), s;
+    }
+    return o;
+  }, c = u(
+    r(l, {}),
+    r(p, {}),
+    r(D, {})
+  );
+  return /* @__PURE__ */ m(
+    S,
+    {
+      collisionDetection: C,
+      modifiers: [g],
+      onDragEnd: a,
+      sensors: c,
+      children: i
+    }
+  );
+};
+export {
+  y as default
+};

package/datatable/context/index.mjs

@@ -0,0 +1,499 @@
+import { jsx as $n } from "react/jsx-runtime";
+import f, { useContext as ni, createContext as ii, useMemo as M, useState as l, useCallback as a } from "react";
+import { useReactTable as ti, getPaginationRowModel as ei, getExpandedRowModel as oi, getSortedRowModel as ai, getFilteredRowModel as li, getCoreRowModel as ri } from "@tanstack/react-table";
+import { ExpandedColumn as yn } from "../common/helpers/ExpandedColumn.mjs";
+import { RowActionsColumn as On } from "../common/helpers/RowActionsColumn.mjs";
+import { RowSelectionColumn as kn } from "../common/helpers/RowSelectionColumn.mjs";
+import { getColumns as si } from "../hooks/useColumns.mjs";
+import { useScrollableTable as ui } from "../hooks/useScrollableTable.mjs";
+import { useDataTableStore as gi } from "../hooks/useDataTableStore.mjs";
+const En = ii(null);
+function fi({
+  children: R,
+  data: V,
+  ...b
+}) {
+  const {
+    tableId: g,
+    columns: U,
+    rowActions: qn,
+    rowSelection: X,
+    renderSubDataTable: jn,
+    renderSubComponent: An,
+    onSortModelChange: Y,
+    enableMultiSort: Z,
+    manualSorting: Hn,
+    initialConfig: u,
+    isLoading: $,
+    isError: Ln,
+    isFetching: Gn,
+    pagination: i
+  } = b, z = M(() => U, [U]), v = !V || V?.length === 0, nn = $ || Ln || v, tn = !$ && Gn, I = !!X, h = !!An || !!jn, r = !!i?.serverPagination, C = i?.manualPagination?.enabled || r, en = !!qn, T = f.useRef(null), Wn = [
+    en ? On.size : 0,
+    X ? kn.size : 0,
+    h ? yn.size : 0
+  ].reduce((n, t) => (n ?? 0) + (t ?? 0), 0), {
+    pagination: D,
+    sorting: on,
+    columnOrder: y,
+    columnVisibility: O,
+    columnPinning: an,
+    columnFilters: ln,
+    columnSizing: rn,
+    setPagination: F,
+    setTotalCount: sn,
+    setSorting: un,
+    setColumnOrder: gn,
+    setColumnVisibility: cn,
+    setColumnPinning: mn,
+    setColumnFilters: Cn,
+    setColumnSizing: Sn,
+    resetStoreData: Pn
+  } = gi(g), dn = M(() => {
+    const n = z?.map(
+      (t) => t?.id || t?.accessorKey
+    ) || [];
+    return y?.length ? y : n;
+  }, [z, y]), bn = O && Object.keys(O).length > 0 ? O : z?.reduce?.((n, t) => (n[t.id] = !0, n), {}), e = M(() => ({
+    initialTotalCount: 0,
+    // Will be set by setTotalCount when needed
+    initialColumnFilters: ln ?? [],
+    initialColumnSizing: rn ?? {},
+    initialSorting: on ?? [],
+    initialColumnOrder: dn,
+    initialColumnVisibility: bn,
+    initialColumnPinning: an ?? {
+      left: [],
+      right: []
+    },
+    initialManualPagination: i?.manualPagination ? {
+      enabled: i.manualPagination.enabled,
+      rowCount: i.manualPagination.rowCount,
+      pagination: i.manualPagination.pagination
+    } : {
+      enabled: !1,
+      rowCount: 0,
+      pagination: {
+        pageSize: 5,
+        pageIndex: 0
+      }
+    },
+    initialPagination: r && i?.serverPagination ? (
+      // For server pagination, use persisted store or fallback to prop
+      D ?? i.serverPagination.pagination
+    ) : i?.takeDefaultPagination ? {
+      pageIndex: i?.pageIndex ?? 0,
+      pageSize: i?.pageSize ?? 10
+    } : D ?? {
+      pageIndex: i?.pageIndex ?? 0,
+      pageSize: i?.pageSize ?? 10
+    },
+    initialRowSelection: {},
+    reportData: {
+      headers: /* @__PURE__ */ new Map(),
+      rows: /* @__PURE__ */ new Map()
+    }
+  }), [
+    dn,
+    bn,
+    i,
+    ln,
+    rn,
+    on,
+    an,
+    D,
+    r
+  ]), [pn, Kn] = l(
+    e?.initialTotalCount ?? 0
+  ), [k, E] = l(
+    e?.initialSorting
+  ), [q, j] = l(
+    e.initialColumnOrder
+  ), [p, A] = l(
+    e.initialColumnVisibility
+  ), [w, H] = l(
+    e.initialColumnPinning
+  ), [wn, L] = l(
+    e.initialColumnFilters
+  ), [_n, G] = l(
+    e.initialColumnSizing
+  ), [c, P] = l(
+    e.initialPagination
+  ), [S, m] = l(e.initialManualPagination), [W, K] = l(
+    e.initialRowSelection ?? {}
+  ), [fn, _] = l(
+    e.reportData
+  ), [B, J] = l(""), N = ui(
+    T
+  ), Mn = T.current?.clientWidth || 0, Bn = M(
+    () => si({
+      columns: z,
+      containerWidth: Mn,
+      offset: Wn ?? 0,
+      isSubComponent: h,
+      isRowActions: en,
+      isRowSelection: I,
+      columnVisibility: p
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [N, p, Mn]
+  ), x = f.useCallback(
+    (n) => {
+      r && i?.serverPagination && (P(n), F(n), i.serverPagination.setPagination(n));
+    },
+    [
+      r,
+      i?.serverPagination,
+      P,
+      F
+    ]
+  ), Jn = a(
+    (n) => {
+      P((t) => {
+        const o = n instanceof Function ? n(t) : n;
+        if (queueMicrotask(() => {
+          F(o);
+        }), C) {
+          if (r && i?.serverPagination) {
+            const s = {
+              enabled: !0,
+              rowCount: i.serverPagination.totalCount,
+              pagination: o,
+              setPagination: x
+            };
+            m(s), i.serverPagination.setPagination(o);
+          } else if (S?.enabled) {
+            const s = {
+              ...S,
+              pagination: o
+            };
+            m(s);
+          }
+        }
+        return o;
+      });
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+      g,
+      F,
+      C,
+      r,
+      S,
+      m,
+      i?.serverPagination,
+      x
+    ]
+  ), Nn = a(
+    (n) => {
+      d(), j((t) => {
+        const o = n instanceof Function ? n(t) : n;
+        return queueMicrotask(() => {
+          gn(o);
+        }), o;
+      });
+    },
+    [g, gn]
+    //eslint-disable-line
+  ), Qn = a(
+    (n) => {
+      d(), E((t) => {
+        const o = n instanceof Function ? n(t) : n;
+        return queueMicrotask(() => {
+          un(o);
+        }), Y?.(o), o;
+      });
+    },
+    [Y, g, un]
+    //eslint-disable-line
+  ), Un = a(
+    (n) => {
+      d(), A((t) => {
+        const o = n instanceof Function ? n(t) : n;
+        return queueMicrotask(() => {
+          cn(o);
+        }), o;
+      });
+    },
+    [g, cn]
+    //eslint-disable-line
+  ), Xn = a(
+    (n) => {
+      H((t) => {
+        const o = n instanceof Function ? n(t) : n;
+        return queueMicrotask(() => {
+          mn(o);
+        }), o;
+      });
+    },
+    [mn]
+  ), Yn = a(
+    (n) => {
+      d(), K((t) => n instanceof Function ? n(t) : n);
+    },
+    [g]
+    //eslint-disable-line
+  ), Rn = a(
+    (n) => (d(), queueMicrotask(() => {
+      Cn(n);
+    }), L(n)),
+    [Cn]
+    //eslint-disable-line
+  ), Zn = a(
+    (n) => {
+      G((t) => {
+        const o = n instanceof Function ? n(t) : n;
+        return queueMicrotask(() => {
+          Sn(o);
+        }), o;
+      });
+    },
+    [Sn]
+    //eslint-disable-line
+  ), zn = a(
+    (n) => (sn?.(n), Kn(n)),
+    [sn]
+  );
+  f.useEffect(() => {
+    if (C && i?.manualPagination && !r) {
+      const n = {
+        enabled: i.manualPagination.enabled,
+        rowCount: i.manualPagination.rowCount,
+        pagination: i.manualPagination.pagination
+      };
+      m(n), P(i.manualPagination.pagination);
+    }
+  }, [
+    C,
+    r,
+    i?.manualPagination?.enabled,
+    i?.manualPagination?.rowCount,
+    i?.manualPagination?.pagination?.pageIndex,
+    i?.manualPagination?.pagination?.pageSize,
+    m,
+    P
+  ]);
+  const hn = f.useRef(!0);
+  f.useEffect(() => {
+    if (r && i?.serverPagination) {
+      const n = i.serverPagination, t = {
+        enabled: !0,
+        rowCount: n.totalCount,
+        pagination: c,
+        // Use current pagination state (from store or props)
+        setPagination: x
+        // Use wrapper that syncs both states
+      };
+      m(t), hn.current && (hn.current = !1, c && (c.pageIndex !== n.pagination.pageIndex || c.pageSize !== n.pagination.pageSize) && n.setPagination(c));
+    }
+  }, [
+    r,
+    i?.serverPagination?.totalCount,
+    i?.serverPagination?.pagination?.pageIndex,
+    i?.serverPagination?.pagination?.pageSize,
+    c,
+    m,
+    x
+  ]);
+  const Fn = a(() => {
+    Pn(), E(e.initialSorting), j(e.initialColumnOrder), A(e.initialColumnVisibility), H(e.initialColumnPinning), G(e.initialColumnSizing), m(e.initialManualPagination), P(e.initialPagination), K(
+      e.initialRowSelection ?? {}
+    ), L(e.initialColumnFilters);
+  }, [
+    e.initialColumnFilters,
+    e.initialColumnOrder,
+    e.initialColumnPinning,
+    e.initialColumnSizing,
+    e.initialColumnVisibility,
+    e.initialManualPagination,
+    e.initialPagination,
+    e.initialRowSelection,
+    e.initialSorting,
+    Pn,
+    L,
+    j,
+    H,
+    G,
+    A,
+    m,
+    P,
+    K,
+    E,
+    g
+  ]), xn = ti({
+    data: V,
+    columns: Bn,
+    state: {
+      pagination: (
+        // For server pagination, use persisted store state (pagination)
+        // For manual pagination, use prop pagination
+        // Otherwise, use internal pagination state
+        C && i?.manualPagination?.pagination ? i.manualPagination.pagination : c
+      ),
+      sorting: k,
+      columnOrder: q,
+      columnVisibility: p,
+      columnSizing: _n,
+      rowSelection: W,
+      columnPinning: {
+        ...w,
+        left: [
+          yn.id,
+          kn.id,
+          ...w.left ?? []
+        ],
+        right: [
+          ...w.right ?? [],
+          On.id
+        ]
+      },
+      globalFilter: B
+    },
+    onPaginationChange: Jn,
+    onColumnOrderChange: Nn,
+    onSortingChange: Qn,
+    onColumnVisibilityChange: Un,
+    onColumnSizingChange: Zn,
+    onColumnPinningChange: Xn,
+    onRowSelectionChange: Yn,
+    onGlobalFilterChange: J,
+    globalFilterFn: (n, t, o) => {
+      if (b.searchableColumns && b.searchableColumns.length > 0 && !b.searchableColumns.includes(t))
+        return !1;
+      const s = n.getValue(t);
+      return s == null ? !1 : String(s).toLowerCase().includes(String(o).toLowerCase());
+    },
+    manualPagination: S?.enabled ?? !1,
+    rowCount: S?.enabled ? S.rowCount : void 0,
+    columnResizeMode: "onChange",
+    enableMultiSort: Z,
+    manualSorting: Hn,
+    maxMultiSortColCount: 2,
+    autoResetPageIndex: !1,
+    enableRowSelection: !0,
+    isMultiSortEvent: () => !0,
+    getRowCanExpand: () => !0,
+    getRowId: (n, t) => t.toString(),
+    getCoreRowModel: ri(),
+    getFilteredRowModel: li(),
+    getSortedRowModel: ai(),
+    getExpandedRowModel: oi(),
+    ...C ? {} : { getPaginationRowModel: ei() },
+    defaultColumn: {
+      size: u?.size,
+      minSize: u?.minSize,
+      maxSize: u?.maxSize,
+      enableResizing: u?.enableResizing || !0,
+      enableSorting: u?.enableSorting || !0,
+      enableMultiSort: u?.enableMultiSort || Z,
+      enablePinning: u?.enablePinning || !0,
+      enableHiding: u?.enableHiding || !0,
+      enableColumnFilter: u?.enableColumnFilter || !1,
+      ...u
+    }
+  }), Vn = a(
+    (n, t, o, s) => {
+      const In = s?.hasSubTable && o > 0 ? o - 1 : o;
+      In < 0 || _((Tn) => {
+        const Q = new Map(Tn.rows), Dn = Q.get(t) ?? /* @__PURE__ */ new Map();
+        return Dn.set(In, n), Q.set(t, Dn), { ...Tn, rows: Q };
+      });
+    },
+    []
+  ), vn = a((n, t) => {
+    _((o) => {
+      const s = new Map(o.headers);
+      return s.set(t, n), { ...o, headers: s };
+    });
+  }, []), d = a(() => {
+    _({
+      headers: /* @__PURE__ */ new Map(),
+      rows: /* @__PURE__ */ new Map()
+    });
+  }, []);
+  return /* @__PURE__ */ $n(
+    En.Provider,
+    {
+      value: M(() => ({
+        tableState: {
+          id: g,
+          pagination: c,
+          sorting: k,
+          columnOrder: q,
+          columnVisibility: p,
+          columnPinning: w,
+          columnFilters: wn,
+          manualPagination: S,
+          rowSelection: W,
+          totalCount: pn,
+          reportData: fn
+        },
+        initialState: e,
+        actions: {
+          setTotalCount: zn,
+          resetStoreData: Fn,
+          setColumnFilters: Rn,
+          onSetReportCellValue: Vn,
+          onSetReportHeader: vn,
+          resetReportData: d
+        },
+        config: b,
+        scrollProps: N,
+        table: xn,
+        tableContainerRef: T,
+        utils: {
+          isEmpty: v,
+          checkState: nn,
+          handleFetch: tn,
+          isSubComponent: h,
+          isManualPagination: C,
+          isRowSelection: I
+        },
+        globalFilter: B,
+        setGlobalFilter: J
+      }), [
+        nn,
+        wn,
+        q,
+        w,
+        p,
+        b,
+        tn,
+        fn,
+        e,
+        v,
+        C,
+        I,
+        h,
+        S,
+        Rn,
+        zn,
+        c,
+        Fn,
+        W,
+        N,
+        k,
+        xn,
+        g,
+        pn,
+        Vn,
+        vn,
+        d,
+        B,
+        J
+      ]),
+      children: R
+    }
+  );
+}
+function Mi() {
+  const R = ni(En);
+  return R || (console.error(
+    "useDataTableContext must be used within a DataTableProvider"
+  ), null);
+}
+export {
+  En as DataTableContext,
+  fi as DataTableProvider,
+  Mi as useDataTableContext
+};