@chumsinc/sortable-tables 2.2.0 → 3.0.1

package/dist/index.es.js

@@ -1,56 +1,53 @@
-import { jsx as l, jsxs as p } from "react/jsx-runtime";
-import A, { createContext as B, useState as V, useCallback as v, useMemo as W, useContext as g, createElement as G, useId as I } from "react";
-import x from "@emotion/styled";
-const N = B(null);
-function S({ children: t, initialFields: a = [] }) {
-  const [e, n] = V(a), s = v((o) => {
-    n(o);
-  }, []), c = v((o, u) => {
-    const b = e.map((d) => d.id === o ? { ...d, ...u } : d);
-    n(b);
-  }, [e]), i = v((o) => e.find((u) => u.id === o), [e]), r = W(
+import { jsx as l, jsxs as f } from "react/jsx-runtime";
+import { createContext as I, useState as H, useCallback as g, useMemo as J, useContext as S, createElement as L, useEffect as q, useId as K } from "react";
+import F from "@emotion/styled";
+const y = I(null);
+function x({
+  children: t,
+  initialFields: a = [],
+  initialSort: e = null
+}) {
+  const [n, s] = H(a), [r, i] = H(e), c = g(
+    (m) => {
+      s(m);
+    },
+    []
+  ), o = g(
+    (m) => {
+      i(m);
+    },
+    []
+  ), u = g((m, h) => {
+    const N = n.map((T) => T.id === m ? { ...T, ...h } : T);
+    s(N);
+  }, [n]), d = g((m) => n.find((h) => h.id === m), [n]), b = J(
     () => ({
-      fields: e,
-      setFields: s,
-      updateField: c,
-      getField: i
+      fields: n,
+      setFields: c,
+      sort: r,
+      setSort: o,
+      getField: d,
+      updateField: u
     }),
-    [e, s, c, i]
+    [n, c, r, o, u, d]
   );
-  return /* @__PURE__ */ l(N.Provider, { value: r, children: t });
-}
-function J() {
-  const t = g(N);
-  if (!t)
-    throw new Error("useTableContext must be used within a FieldsProvider");
-  return t;
-}
-function y() {
-  return J().fields;
-}
-function nt(t) {
-  const a = g(N);
-  if (!a)
-    throw new Error("useTableContext must be used within a FieldsProvider");
-  return a.fields.find((n) => n.id === t) ?? null;
-}
-function lt() {
-  return g(N) !== null;
+  return /* @__PURE__ */ l(y.Provider, { value: b, children: t });
 }
-function H(t) {
+x.displayName = "DataTableProvider";
+function E(t) {
   var a, e, n = "";
   if (typeof t == "string" || typeof t == "number") n += t;
   else if (typeof t == "object") if (Array.isArray(t)) {
     var s = t.length;
-    for (a = 0; a < s; a++) t[a] && (e = H(t[a])) && (n && (n += " "), n += e);
+    for (a = 0; a < s; a++) t[a] && (e = E(t[a])) && (n && (n += " "), n += e);
   } else for (e in t) t[e] && (n && (n += " "), n += e);
   return n;
 }
-function m() {
-  for (var t, a, e = 0, n = "", s = arguments.length; e < s; e++) (t = arguments[e]) && (a = H(t)) && (n && (n += " "), n += a);
+function p() {
+  for (var t, a, e = 0, n = "", s = arguments.length; e < s; e++) (t = arguments[e]) && (a = E(t)) && (n && (n += " "), n += a);
   return n;
 }
-const D = x.table`
+const w = F.table`
     --table-sticky-top: ${(t) => t.sticky ? "0" : void 0};
 
     thead {
@@ -62,103 +59,117 @@ const D = x.table`
             background: ${(t) => t.sticky ? "linear-gradient(var(--bs-table-bg) 75%, rgba(var(--bs-secondary-bg-rgb), 0.9))" : "unset"};
         }
     }
-`, F = A.forwardRef(
-  function({
-    sticky: a,
-    responsive: e,
-    children: n,
-    className: s,
-    ...c
-  }, i) {
-    if (e) {
-      const r = m(s, {
-        "table-responsive": e === !0,
-        [`table-responsive-${e}`]: e !== !0
-      });
-      return /* @__PURE__ */ l("div", { className: r, children: /* @__PURE__ */ l(D, { ref: i, ...c, children: n }) });
-    }
-    return /* @__PURE__ */ l(D, { className: s, sticky: a, ref: i, ...c, children: n });
+`;
+function P({
+  sticky: t,
+  responsive: a,
+  children: e,
+  className: n,
+  ref: s,
+  ...r
+}) {
+  if (a) {
+    const i = p(n, {
+      "table-responsive": a === !0,
+      [`table-responsive-${a}`]: a !== !0
+    });
+    return /* @__PURE__ */ l("div", { className: i, children: /* @__PURE__ */ l(w, { ref: s, ...r, children: e }) });
   }
-);
+  return /* @__PURE__ */ l(w, { className: n, sticky: t, ref: s, ...r, children: e });
+}
 function C({
   field: t,
   className: a,
   children: e,
   ...n
 }) {
-  const s = m({ [`text-${t.align}`]: !!t.align }, a);
+  if (t.visible === !1)
+    return null;
+  const s = p({ [`text-${t.align}`]: !!t.align }, a);
   return /* @__PURE__ */ l("th", { className: s, scope: "col", ...n, children: e ?? t.title });
 }
 C.displayName = "DataTableTH";
-function R({ ...t }) {
-  const a = y();
+function v() {
+  const t = S(y);
+  if (!t)
+    throw new Error("useTableContext must be used within a DataTableProvider");
+  return [
+    t.fields,
+    t.setFields
+  ];
+}
+function j({ ...t }) {
+  const [a] = v();
   return /* @__PURE__ */ l("thead", { ...t, children: /* @__PURE__ */ l("tr", { children: a.map((e, n) => /* @__PURE__ */ l(
     C,
     {
       ...e.thProps,
       field: e,
-      className: m(
+      className: p(
         typeof e.className == "function" ? { [`text-${e.align}`]: !!e.align } : e.className
       )
     },
-    e.id ?? n
+    String(e.id ?? n)
   )) }) });
 }
-R.displayName = "DataTableHead";
-function L({
+j.displayName = "DataTableHead";
+function R({
   className: t,
   size: a,
   responsive: e,
   sticky: n,
   data: s,
-  keyField: c,
+  keyField: r,
   rowClassName: i,
-  renderRow: r,
+  renderRow: c,
   onSelectRow: o,
   selected: u,
-  tableHeadProps: b,
-  children: d,
-  tfoot: f,
+  tableHeadProps: d,
+  children: b,
+  tfoot: m,
   ...h
 }) {
-  const T = m("table", t, {
+  const N = p("table", t, {
     [`table-${a}`]: !!a
   });
-  return /* @__PURE__ */ p(F, { sticky: n, responsive: e, className: T, ...h, children: [
+  return /* @__PURE__ */ f(P, { sticky: n, responsive: e, className: N, ...h, children: [
     /* @__PURE__ */ l(k, {}),
-    /* @__PURE__ */ l(R, { ...b }),
+    /* @__PURE__ */ l(j, { ...d }),
     !!s.length && /* @__PURE__ */ l(
-      $,
+      D,
       {
         data: s,
-        keyField: c,
+        keyField: r,
         rowClassName: i,
-        renderRow: r,
+        renderRow: c,
         onSelectRow: o,
         selected: u
       }
     ),
-    d,
-    f
+    b,
+    m
   ] });
 }
-function q({
+R.displayName = "DataTable";
+function O({
   fields: t,
   ...a
 }) {
-  return /* @__PURE__ */ l(S, { initialFields: t, children: /* @__PURE__ */ l(L, { ...a }) });
+  return /* @__PURE__ */ l(x, { initialFields: t, children: /* @__PURE__ */ l(R, { ...a }) });
 }
-q.displayName = "DataTable";
-function K({ field: t, row: a, className: e, as: n, ...s }) {
-  const c = m(
+O.displayName = "StandaloneDataTable";
+function M({ field: t, row: a, className: e, as: n, ...s }) {
+  if (t.visible === !1)
+    return null;
+  const r = p(
     { [`text-${t.align}`]: !!t.align },
     e,
     typeof t.className == "function" ? t.className(a) : t.className
   );
-  return G(
+  return L(
     n ?? t.as ?? "td",
     {
-      className: c,
+      className: r,
       scope: (n ?? t.as) === "th" ? "row" : void 0,
       colSpan: t.colSpan,
       ...t.cellProps,
@@ -167,50 +178,51 @@ function K({ field: t, row: a, className: e, as: n, ...s }) {
     a[t.field] === void 0 && !t.render ? null : typeof t.render == "function" ? t.render(a) : a[t.field]
   );
 }
-function w({
+M.displayName = "DataTableCell";
+function W({
   className: t,
   rowClassName: a,
   selected: e,
   row: n,
   trRef: s,
-  onClick: c,
+  onClick: r,
   ...i
 }) {
-  const r = y(), o = (b) => {
-    c?.(n, b);
+  const [c] = v(), o = (d) => {
+    r?.(n, d);
   }, u = typeof a == "function" ? a(n) : a;
   return n ? /* @__PURE__ */ l(
     "tr",
     {
       ref: s,
-      className: m({ "table-active": e }, t, u),
+      className: p({ "table-active": e }, t, u),
       onClick: o,
       ...i,
-      children: r.map((b, d) => /* @__PURE__ */ l(K, { field: b, row: n }, b?.id ?? d))
+      children: c.map((d, b) => /* @__PURE__ */ l(M, { field: d, row: n }, String(d?.id ?? b)))
     }
   ) : null;
 }
-w.displayName = "DataTableRow";
-function $({
+W.displayName = "DataTableRow";
+function D({
   data: t,
   keyField: a,
   rowClassName: e,
   renderRow: n,
   onSelectRow: s,
-  selected: c = "",
+  selected: r = "",
   children: i,
-  ...r
+  ...c
 }) {
-  return /* @__PURE__ */ p("tbody", { ...r, children: [
+  return /* @__PURE__ */ f("tbody", { ...c, children: [
     t.map((o) => {
-      const u = String(typeof a == "function" ? a(o) : o[a]), b = typeof c == "function" ? c(o) : u === c;
+      const u = String(typeof a == "function" ? a(o) : o[a]), d = typeof r == "function" ? r(o) : u === r;
       return n ? n(o) : /* @__PURE__ */ l(
-        w,
+        W,
         {
           onClick: s,
           rowClassName: e,
           row: o,
-          selected: b
+          selected: d
         },
         u
       );
@@ -218,21 +230,21 @@ function $({
     i
   ] });
 }
-$.displayName = "DataTableTBody";
-const O = (t) => {
+D.displayName = "DataTableTBody";
+function $() {
+  const t = S(y);
   if (!t)
-    return "flex-start";
-  switch (t) {
-    case "end":
-      return "flex-end";
-    default:
-      return "center";
-  }
-}, Q = x.div`
+    throw new Error("useTableSort must be used within a DataTableProvider");
+  return [
+    t.sort,
+    t.setSort
+  ];
+}
+const Q = (t) => t ? t === "end" ? "flex-end" : "center" : "flex-start", U = F.div`
     display: flex;
     width: 100%;
     flex-direction: ${(t) => t.align === "end" ? "row-reverse" : "row"};
-    justify-content: ${(t) => O(t.align)};
+    justify-content: ${(t) => Q(t.align)};
 
     .sort-icon {
         flex-grow: ${(t) => t.align === "end" ? "1" : "0"};
@@ -245,18 +257,20 @@ const O = (t) => {
         transition: opacity 0.2s;
     }
 `;
-function j({
+function _({
   field: t,
   sorted: a,
   ascending: e,
   className: n,
   onClick: s
 }) {
+  if (t.visible === !1)
+    return null;
   if (!t.sortable)
     return /* @__PURE__ */ l(C, { field: t, className: n });
-  const { className: c, ...i } = t.thProps ?? {}, r = m(
+  const { className: r, ...i } = t.thProps ?? {}, c = p(
     n,
-    c,
+    r,
     { [`text-${t.align}`]: !!t.align }
   ), o = () => {
     s({ field: t.field, ascending: a ? !e : !0 });
@@ -264,131 +278,147 @@ function j({
     "bi-arrow-down": e,
     "bi-arrow-up": !e
   };
-  return /* @__PURE__ */ l("th", { ...i, className: m("sortable", r), scope: "col", onClick: o, children: /* @__PURE__ */ p(Q, { sorted: a, align: t.align, children: [
+  return /* @__PURE__ */ l("th", { ...i, className: p("sortable", c), scope: "col", onClick: o, children: /* @__PURE__ */ f(U, { sorted: a, align: t.align, children: [
     /* @__PURE__ */ l("div", { className: "field-title", children: t.title }),
-    /* @__PURE__ */ l("div", { className: m("me-1 sort-icon", u) })
+    /* @__PURE__ */ l("div", { className: p("me-1 sort-icon", u) })
   ] }) });
 }
-j.displayName = "SortableTableTH";
-function E({
-  currentSort: t,
-  onChangeSort: a
+_.displayName = "SortableTableTH";
+function A({
+  onChangeSort: t
 }) {
-  const e = y(), { field: n, ascending: s } = t;
-  return /* @__PURE__ */ l("thead", { children: /* @__PURE__ */ l("tr", { children: e.map((c, i) => /* @__PURE__ */ l(
-    j,
+  const [a] = v(), [e] = $();
+  return /* @__PURE__ */ l("thead", { children: /* @__PURE__ */ l("tr", { children: a.map((n, s) => /* @__PURE__ */ l(
+    _,
     {
-      field: c,
-      sorted: n === c.field,
-      ascending: s,
-      className: m(
-        typeof c.className == "function" ? { [`text-${c.align}`]: !!c.align } : c.className
+      field: n,
+      sorted: e?.field === n.field,
+      ascending: e?.ascending,
+      className: p(
+        typeof n.className == "function" ? { [`text-${n.align}`]: !!n.align } : n.className
       ),
-      onClick: a
+      onClick: t
     },
-    i
+    s
   )) }) });
 }
-E.displayName = "SortableTableHead";
-function U({
+A.displayName = "SortableTableHead";
+function B({
+  onChangeSort: t
+}) {
+  const [a] = v(), [e] = $();
+  return /* @__PURE__ */ l(A, { fields: a, currentSort: e, onChangeSort: t });
+}
+B.displayName = "SortableTableHeadWrapper";
+function V({
   className: t,
   size: a,
   responsive: e,
   sticky: n,
   data: s,
-  keyField: c,
+  keyField: r,
   rowClassName: i,
-  renderRow: r,
+  renderRow: c,
   onSelectRow: o,
   selected: u,
-  tableHeadProps: b,
-  children: d,
-  tfoot: f,
-  currentSort: h,
-  onChangeSort: T,
-  ...P
+  tableHeadProps: d,
+  children: b,
+  tfoot: m,
+  onChangeSort: h,
+  ...N
 }) {
-  const _ = m("table", t, {
+  const T = p("table", t, {
     [`table-${a}`]: !!a
   });
-  return /* @__PURE__ */ p(F, { className: _, responsive: e, sticky: n, ...P, children: [
+  return /* @__PURE__ */ f(P, { className: T, responsive: e, sticky: n, ...N, children: [
     /* @__PURE__ */ l(k, {}),
-    /* @__PURE__ */ l(E, { currentSort: h, onChangeSort: T, ...b }),
+    /* @__PURE__ */ l(B, { onChangeSort: h, ...d }),
     !!s.length && /* @__PURE__ */ l(
-      $,
+      D,
       {
         data: s,
-        keyField: c,
+        keyField: r,
         rowClassName: i,
-        renderRow: r,
+        renderRow: c,
         onSelectRow: o,
         selected: u
       }
     ),
-    d,
-    f
+    b,
+    m
   ] });
 }
-function X({
+V.displayName = "SortableTable";
+function X({ nextSort: t }) {
+  const [, a] = $();
+  return q(() => {
+    console.log("setNextSort", t), a(t);
+  }, [t, a]), null;
+}
+function Y({
   fields: t,
-  ...a
+  currentSort: a,
+  ...e
 }) {
-  return /* @__PURE__ */ l(S, { initialFields: t, children: /* @__PURE__ */ l(U, { ...a }) });
+  return /* @__PURE__ */ f(x, { initialFields: t, initialSort: a, children: [
+    /* @__PURE__ */ l(X, { nextSort: a }),
+    /* @__PURE__ */ l(V, { ...e })
+  ] });
 }
-X.displayName = "SortableTable";
-const Y = [10, 25, 50, 100, 250, 500, 1e3];
-function M({
+Y.displayName = "StandaloneSortableTable";
+const Z = [10, 25, 50, 100, 250, 500, 1e3];
+function G({
   value: t,
-  pageValues: a = Y,
+  pageValues: a = Z,
   size: e,
   label: n,
   className: s,
-  onChange: c,
+  onChange: r,
   ...i
 }) {
-  const r = I(), o = (d) => c(Number(d.target.value)), u = s ?? m("form-select", { [`form-select-${e}`]: !!e }), b = m("input-group", {
+  const c = K(), o = (b) => r(Number(b.target.value)), u = s ?? p("form-select", { [`form-select-${e}`]: !!e }), d = p("input-group", {
     [`input-group-${e}`]: !!e
   });
-  return /* @__PURE__ */ p("div", { className: b, children: [
-    /* @__PURE__ */ l("label", { className: "input-group-text", htmlFor: r, children: n ?? "Rows" }),
+  return /* @__PURE__ */ f("div", { className: d, children: [
+    /* @__PURE__ */ l("label", { className: "input-group-text", htmlFor: c, children: n ?? "Rows" }),
     /* @__PURE__ */ l(
       "select",
       {
         className: u,
-        id: r,
+        id: c,
         value: t,
         onChange: o,
         ...i,
-        children: a.map((d) => /* @__PURE__ */ l("option", { value: d, children: d }, d))
+        children: a.map((b) => /* @__PURE__ */ l("option", { value: b, children: b }, b))
       }
     )
   ] }, t);
 }
-M.displayName = "RowsPerPage";
-function Z({
+G.displayName = "RowsPerPage";
+function z({
   page: t,
   rowsPerPage: a,
   onChangePage: e,
   count: n,
   size: s,
-  showFirst: c,
+  showFirst: r,
   showLast: i,
-  className: r,
+  className: c,
   rowsPerPageProps: o,
   ...u
 }) {
-  const b = n === 0 ? 0 : t * a + 1, d = Math.min(t * a + a, n), f = a === 0 ? 0 : Math.floor((n - 1) / a), h = m("btn btn-link", { [`btn-${s}`]: !!s });
-  return /* @__PURE__ */ p("div", { className: m("row g-3 justify-content-end", r), ...u, children: [
-    !!o && /* @__PURE__ */ l("div", { className: "col-auto", children: /* @__PURE__ */ l(M, { ...o, value: a, size: s }) }),
-    /* @__PURE__ */ l("div", { className: "col-auto", children: /* @__PURE__ */ p("div", { className: "row g-3 flex-nowrap align-items-baseline", children: [
-      /* @__PURE__ */ p("div", { className: "col-auto", children: [
-        b,
-        "-",
+  const d = n === 0 ? 0 : t * a + 1, b = Math.min(t * a + a, n), m = a === 0 ? 0 : Math.floor((n - 1) / a), h = p("btn btn-link", { [`btn-${s}`]: !!s });
+  return /* @__PURE__ */ f("div", { className: p("row g-3 justify-content-end", c), ...u, children: [
+    !!o && /* @__PURE__ */ l("div", { className: "col-auto", children: /* @__PURE__ */ l(G, { ...o, value: a, size: s }) }),
+    /* @__PURE__ */ l("div", { className: "col-auto", children: /* @__PURE__ */ f("div", { className: "row g-3 flex-nowrap align-items-baseline", children: [
+      /* @__PURE__ */ f("div", { className: "col-auto", children: [
         d,
+        "-",
+        b,
         " of ",
         n
       ] }),
-      c && /* @__PURE__ */ l("div", { className: "col-auto", children: /* @__PURE__ */ l(
+      r && /* @__PURE__ */ l("div", { className: "col-auto", children: /* @__PURE__ */ l(
         "button",
         {
           className: h,
@@ -412,7 +442,7 @@ function Z({
         "button",
         {
           className: h,
-          disabled: t >= f,
+          disabled: t >= m,
           onClick: () => e(t + 1),
           "aria-label": "Next page",
           children: /* @__PURE__ */ l("span", { className: "bi-chevron-right", "aria-hidden": "true" })
@@ -422,8 +452,8 @@ function Z({
         "button",
         {
           className: h,
-          disabled: t >= f,
-          onClick: () => e(f),
+          disabled: t >= m,
+          onClick: () => e(m),
           "aria-label": "Last page",
           children: /* @__PURE__ */ l("span", { className: "bi-chevron-bar-right", "aria-hidden": "true" })
         }
@@ -431,41 +461,52 @@ function Z({
     ] }) })
   ] });
 }
-Z.displayname = "TablePagination";
-const z = x.col`
-    &.col-collapsed {
-        visibility: collapse;
-    }
-`;
+z.displayname = "TablePagination";
 function k() {
-  const t = y();
-  return /* @__PURE__ */ l("colgroup", { children: t.map((a, e) => /* @__PURE__ */ l(
-    z,
+  const [t] = v();
+  return /* @__PURE__ */ l("colgroup", { children: t.filter((a) => a.visible !== !1).map((a, e) => /* @__PURE__ */ l(
+    "col",
     {
-      className: m(a.colClassName, { "col-collapsed": a.collapse }),
+      className: a.colClassName,
       span: a.colSpan ?? 1
     },
     e
   )) });
 }
 k.displayName = "DataTableCols";
+function nt(t) {
+  const a = S(y);
+  if (!a)
+    throw new Error("useField must be used within a DataTableProvider");
+  return [
+    a.fields.find((e) => e.id === t) ?? null,
+    a.updateField
+  ];
+}
+function lt() {
+  const t = S(y);
+  if (!t)
+    throw new Error("useTableContext must be used within a DataTableProvider");
+  return t;
+}
 export {
-  q as DataTable,
+  O as DataTable,
   k as DataTableCols,
-  S as DataTableProvider,
-  w as DataTableRow,
-  $ as DataTableTBody,
+  y as DataTableContext,
+  x as DataTableProvider,
+  W as DataTableRow,
+  D as DataTableTBody,
   C as DataTableTH,
-  L as DataTableWithContext,
-  M as RowsPerPage,
-  X as SortableTable,
-  E as SortableTableHead,
-  j as SortableTableTH,
-  U as SortableTableWithContext,
-  Z as TablePagination,
+  R as DataTableWithContext,
+  G as RowsPerPage,
+  V as SortableTable,
+  A as SortableTableHead,
+  _ as SortableTableTH,
+  Y as StandaloneSortableTable,
+  z as TablePagination,
   nt as useField,
-  lt as useHasTableFieldsContext,
-  J as useTableContext,
-  y as useTableFields
+  lt as useTableContext,
+  v as useTableFields,
+  $ as useTableSort
 };
 //# sourceMappingURL=index.es.js.map