jcicl 1.0.23 → 1.0.25

package/Table/Table.d.ts

@@ -1,4 +1,10 @@
 import { default as React } from 'react';
+/**
+ * Interface for components that support table value extraction via ref
+ */
+export interface TableValueHandle {
+    getTableValue: () => string | number;
+}
 export interface TableProps {
     data: Record<string, any>[];
     columnTitles?: Record<string, string>;
@@ -11,6 +17,9 @@ export interface TableProps {
         direction: 'asc' | 'desc';
     };
     extraActions?: React.ReactNode;
+    notSearchableColumns?: string[];
+    notSortableColumns?: string[];
+    notExportableColumns?: string[];
 }
 declare const DataTable: React.FC<TableProps>;
 export default DataTable;

package/Table/Table.js

@@ -1,33 +1,33 @@
-import { jsxs as d, jsx as t } from "react/jsx-runtime";
-import { useState as b, useMemo as N, useEffect as L, useRef as ae } from "react";
-import r from "../theme.js";
+import { jsxs as h, jsx as n } from "react/jsx-runtime";
+import x, { useState as E, useRef as re, useMemo as L, useEffect as _ } from "react";
+import s from "../theme.js";
 import { c } from "../.chunks/emotion-react.browser.esm.js";
-import { n as l } from "../.chunks/emotion-styled.browser.esm.js";
-import { Button as de } from "../Button/Button.js";
-import { Flex as he } from "../Flex/Flex.js";
-import { useThemeColors as pe } from "../ThemeContext.js";
-import { c as S } from "../.chunks/createLucideIcon.js";
+import { n as a } from "../.chunks/emotion-styled.browser.esm.js";
+import { Button as ke } from "../Button/Button.js";
+import { Flex as $e } from "../Flex/Flex.js";
+import { useThemeColors as Se } from "../ThemeContext.js";
+import { c as B } from "../.chunks/createLucideIcon.js";
 /**
  * @license lucide-react v0.525.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const ue = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]], M = S("chevron-down", ue);
+const Te = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]], H = B("chevron-down", Te);
 /**
  * @license lucide-react v0.525.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const ge = [["path", { d: "m18 15-6-6-6 6", key: "153udz" }]], G = S("chevron-up", ge);
+const ze = [["path", { d: "m18 15-6-6-6 6", key: "153udz" }]], ie = B("chevron-up", ze);
 /**
  * @license lucide-react v0.525.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const me = [
+const Ee = [
   [
     "path",
     {
@@ -44,14 +44,14 @@ const me = [
     }
   ],
   ["path", { d: "m2 2 20 20", key: "1ooewy" }]
-], xe = S("eye-off", me);
+], je = B("eye-off", Ee);
 /**
  * @license lucide-react v0.525.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const fe = [
+const Ve = [
   [
     "path",
     {
@@ -60,24 +60,24 @@ const fe = [
     }
   ],
   ["circle", { cx: "12", cy: "12", r: "3", key: "1v7zrd" }]
-], be = S("eye", fe);
+], Ae = B("eye", Ve);
 /**
  * @license lucide-react v0.525.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const we = [
+const Be = [
   ["path", { d: "m21 21-4.34-4.34", key: "14j7rj" }],
   ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }]
-], Z = S("search", we);
+], he = B("search", Be);
 /**
  * @license lucide-react v0.525.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const ye = [
+const De = [
   [
     "path",
     {
@@ -86,9 +86,25 @@ const ye = [
     }
   ],
   ["circle", { cx: "12", cy: "12", r: "3", key: "1v7zrd" }]
-], Ce = S("settings", ye), ke = l("div")(() => ({
+], Ne = B("settings", De);
+function M(o, b) {
+  var C;
+  if ((C = b == null ? void 0 : b.current) != null && C.getTableValue)
+    return b.current.getTableValue();
+  if (x.isValidElement(o)) {
+    const D = o.type;
+    if (typeof D != "string") {
+      const j = D;
+      if (typeof j.getTableValue == "function")
+        return j.getTableValue(o.props);
+    }
+    return null;
+  }
+  return o;
+}
+const Fe = a("div")(() => ({
   ...c`
-    background-color: ${r.colors.white};
+    background-color: ${s.colors.white};
     border-radius: 8px;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
     padding: 20px;
@@ -96,7 +112,7 @@ const ye = [
     width: 100%;
     overflow: auto;
   `
-})), ve = l("div")(() => ({
+})), Le = a("div")(() => ({
   ...c`
     display: flex;
     flex-direction: column;
@@ -106,21 +122,21 @@ const ye = [
     flex-wrap: wrap;
     gap: 9px;
   `
-})), Se = l("div")(() => ({
+})), _e = a("div")(() => ({
   ...c`
     display: flex;
     justify-content: space-between;
     width: 100%;
     align-items: center;
   `
-})), $e = l("h2")(() => ({
+})), Me = a("h2")(() => ({
   ...c`
     font-size: 24px;
     font-weight: bold;
-    color: ${r.colors.black};
+    color: ${s.colors.black};
     margin: 0;
   `
-})), ze = l("div")(() => ({
+})), Ie = a("div")(() => ({
   ...c`
     display: flex;
     justify-content: flex-end;
@@ -129,21 +145,21 @@ const ye = [
     align-items: center;
     flex-wrap: wrap;
   `
-})), je = l("div")(() => ({
+})), Oe = a("div")(() => ({
   ...c`
     position: relative;
     display: flex;
     align-items: center;
     flex-grow: 1;
   `
-})), Te = l(Z, {
+})), Pe = a(he, {
   shouldForwardProp: (o) => !["customTheme"].includes(o)
 })(({ customTheme: o }) => ({
   ...c`
     position: absolute;
     left: 13px;
     top: 10px;
-    color: ${r.colors.gray3};
+    color: ${s.colors.gray3};
     width: 19px;
     height: 19px;
     transition: all 313ms ease;
@@ -154,19 +170,19 @@ const ye = [
       color: ${o.themeColor};
     }
   `
-})), De = l("input", {
+})), Re = a("input", {
   shouldForwardProp: (o) => !["customTheme"].includes(o)
 })(({ customTheme: o }) => ({
   ...c`
     padding: 10px 15px 10px 40px;
-    border: 2px solid ${r.colors.gray4};
+    border: 2px solid ${s.colors.gray4};
     border-radius: 25px;
     font-size: 14px;
     min-width: 270px;
     width: 100%;
     transition: all 313ms ease;
     outline: none;
-    background-color: ${r.colors.white};
+    background-color: ${s.colors.white};
     :focus,
     :hover,
     :focus-within {
@@ -174,14 +190,14 @@ const ye = [
       box-shadow: 0 0 0 3px ${o.themeColor}18; // 18 = alpha 0.1
     }
   `
-})), J = l("button", {
+})), se = a("button", {
   shouldForwardProp: (o) => !["customTheme"].includes(o)
 })(({ customTheme: o }) => ({
   ...c`
     padding: 10px 15px;
     border: 2px solid ${o.themeColor};
     border-radius: 6px;
-    background-color: ${r.colors.white};
+    background-color: ${s.colors.white};
     color: ${o.themeColor};
     cursor: pointer;
     display: flex;
@@ -195,19 +211,19 @@ const ye = [
     :hover,
     :focus-within {
       background-color: ${o.themeColor};
-      color: ${r.colors.white};
+      color: ${s.colors.white};
       transform: translateY(-1px);
       box-shadow: 0 4px 12px ${o.themeColor}4c; // 4c = alpha 0.3
     }
   `
-})), K = l("div")(() => ({
+})), le = a("div")(() => ({
   ...c`
     position: absolute;
     top: 100%;
     right: 0;
     margin-top: 5px;
-    background-color: ${r.colors.white};
-    border: 1px solid ${r.colors.gray4};
+    background-color: ${s.colors.white};
+    border: 1px solid ${s.colors.gray4};
     border-radius: 6px;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
     z-index: 1000;
@@ -215,7 +231,7 @@ const ye = [
     max-height: 300px;
     overflow-y: auto;
   `
-})), E = l("div", {
+})), U = a("div", {
   shouldForwardProp: (o) => !["customTheme"].includes(o)
 })(({ customTheme: o }) => ({
   ...c`
@@ -225,7 +241,7 @@ const ye = [
     gap: 10px;
     cursor: pointer;
     font-size: 14px;
-    color: ${r.colors.slate};
+    color: ${s.colors.slate};
     transition: all 0.2s ease;
     :focus,
     :hover,
@@ -234,7 +250,7 @@ const ye = [
       color: ${o.themeDark};
     }
   `
-})), _ = l("input", {
+})), q = a("input", {
   shouldForwardProp: (o) => !["customTheme"].includes(o)
 })(({ customTheme: o }) => ({
   ...c`
@@ -242,25 +258,25 @@ const ye = [
     height: 16px;
     accent-color: ${o.themeColor};
   `
-})), Ne = l("table")(() => ({
+})), He = a("table")(() => ({
   ...c`
     width: 100%;
     border-collapse: collapse;
-    background-color: ${r.colors.white};
+    background-color: ${s.colors.white};
     border-radius: 8px;
     overflow: hidden;
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
   `
-})), Ae = l("th", { shouldForwardProp: (o) => !["customTheme"].includes(o) })(
+})), Ue = a("th", { shouldForwardProp: (o) => !["customTheme"].includes(o) })(
   ({ customTheme: o }) => ({
     ...c`
-      background-color: ${r.colors.whiteBlue};
-      color: ${r.colors.slate};
+      background-color: ${s.colors.whiteBlue};
+      color: ${s.colors.slate};
       padding: 16px 12px;
       text-align: left;
       font-size: 14px;
       font-weight: 600;
-      border-bottom: 2px solid ${r.colors.gray4};
+      border-bottom: 2px solid ${s.colors.gray4};
       cursor: pointer;
       user-select: none;
       transition: all 0.2s ease;
@@ -274,32 +290,32 @@ const ye = [
       }
     `
   })
-), Be = l("td")(() => ({
+), ce = a("td")(() => ({
   ...c`
     padding: 14px 12px;
-    border-bottom: 1px solid ${r.colors.almostWhite};
+    border-bottom: 1px solid ${s.colors.almostWhite};
     font-size: 14px;
-    color: ${r.colors.slate};
+    color: ${s.colors.slate};
     transition: all 0.2s ease;
   `
-})), Fe = l("span")(() => ({
+})), qe = a("span")(() => ({
   ...c`
     margin-left: 8px;
     opacity: 0.6;
   `
-})), Q = l("tr", { shouldForwardProp: (o) => !["customTheme"].includes(o) })(({ interactableRow: o, customTheme: w }) => ({
+})), ae = a("tr", { shouldForwardProp: (o) => !["customTheme"].includes(o) })(({ interactableRow: o, customTheme: b }) => ({
   ...c`
     transition: all 0.2s ease;
     ${o && c`
       :focus,
       :hover,
       :focus-within {
-        background-color: ${w.themeLightD};
+        background-color: ${b.themeLightD};
         cursor: pointer;
       }
     `}
   `
-})), Le = l("div")(() => ({
+})), We = a("div")(() => ({
   ...c`
     display: flex;
     justify-content: center;
@@ -307,15 +323,15 @@ const ye = [
     margin-top: 20px;
     gap: 10px;
   `
-})), v = l("button", {
+})), A = a("button", {
   shouldForwardProp: (o) => !["customTheme"].includes(o)
 })(({ customTheme: o }) => ({
   ...c`
     padding: 8px 12px;
-    border: 1px solid ${r.colors.gray4};
+    border: 1px solid ${s.colors.gray4};
     border-radius: 4px;
-    background-color: ${r.colors.white};
-    color: ${r.colors.slate};
+    background-color: ${s.colors.white};
+    color: ${s.colors.slate};
     cursor: pointer;
     font-size: 14px;
     transition: all 0.2s ease;
@@ -324,7 +340,7 @@ const ye = [
     :hover,
     :focus-within {
       background-color: ${o.themeColor};
-      color: ${r.colors.white};
+      color: ${s.colors.white};
       border-color: ${o.themeColor};
     }
     :disabled {
@@ -332,38 +348,44 @@ const ye = [
       cursor: not-allowed;
     }
   `
-})), Me = l("div")(() => ({
+})), Ke = a("div")(() => ({
   ...c`
     font-size: 14px;
-    color: ${r.colors.gray3};
+    color: ${s.colors.gray3};
     text-align: center;
     margin-top: 10px;
   `
-})), X = l("span")(() => ({
+})), de = a("span")(() => ({
   ...c`
     padding: 8px 4px;
-    color: ${r.colors.gray3};
+    color: ${s.colors.gray3};
     font-size: 14px;
   `
-})), qe = ({
+})), no = ({
   data: o = [],
-  columnTitles: w = {},
-  rowsPerPage: y = 19,
-  title: ee = "Data Table",
-  onRowClick: A,
-  hiddenColumns: oe = [],
-  defaultSort: I = { key: "", direction: "asc" },
-  extraActions: V
+  columnTitles: b = {},
+  rowsPerPage: C = 19,
+  title: D = "Data Table",
+  onRowClick: j,
+  hiddenColumns: pe = [],
+  defaultSort: W = { key: "", direction: "asc" },
+  extraActions: K,
+  notSearchableColumns: ue = [],
+  notSortableColumns: I = [],
+  notExportableColumns: fe = []
 }) => {
-  const [a, x] = b(1), [j, O] = b(""), [p, P] = b(I), [C, T] = b(/* @__PURE__ */ new Set()), [B, R] = b(/* @__PURE__ */ new Set()), [H, U] = b(!1), [q, W] = b(!1), i = pe(), f = {
+  const [d, T] = E(1), [N, Y] = E(""), [w, G] = E(W), [V, F] = E(/* @__PURE__ */ new Set()), [O, J] = E(/* @__PURE__ */ new Set()), [Q, X] = E(!1), [Z, ee] = E(!1), v = re(/* @__PURE__ */ new Map()), oe = (e, r) => {
+    const t = `${e}-${r}`;
+    return v.current.has(t) || v.current.set(t, x.createRef()), v.current.get(t);
+  }, l = Se(), z = {
     thActive: {
-      backgroundColor: i.themeColor,
-      color: r.colors.white
+      backgroundColor: l.themeColor,
+      color: s.colors.white
     },
     paginationButtonActive: {
-      backgroundColor: i.themeColor,
-      color: r.colors.white,
-      borderColor: i.themeColor
+      backgroundColor: l.themeColor,
+      color: s.colors.white,
+      borderColor: l.themeColor
     },
     paginationButtonDisabled: {
       opacity: 0.5,
@@ -371,145 +393,161 @@ const ye = [
     },
     info: {
       fontSize: "14px",
-      color: r.colors.gray3,
+      color: s.colors.gray3,
       textAlign: "center",
       marginTop: "10px"
     }
-  }, u = N(() => o.length === 0 ? [] : Object.keys(o[0]).filter((e) => !oe.includes(e)), [o]);
-  L(() => {
-    u.length > 0 && (R(new Set(u)), T(new Set(u)));
-  }, [u]), L(() => {
-    O(""), P(I), x(1);
-  }, []);
-  const F = N(() => {
-    if (!j) return o;
-    const e = C.size > 0 ? C : new Set(u);
-    return o.filter((n) => Array.from(e).some((s) => {
-      const h = n[s];
-      return h && h.toString().toLowerCase().replace(/[-()\s]/g, "").includes(j.toLowerCase().replace(/[-()\s]/g, ""));
+  }, p = L(() => o.length === 0 ? [] : Object.keys(o[0]).filter((e) => !pe.includes(e)), [o]);
+  _(() => {
+    p.length > 0 && (J(new Set(p)), F(new Set(p.filter((e) => !ue.includes(e)))));
+  }, [p]), _(() => {
+    Y(""), G(W), T(1);
+  }, []), _(() => {
+    const e = /* @__PURE__ */ new Set();
+    o.forEach((r, t) => {
+      p.forEach((i) => {
+        x.isValidElement(r[i]) && e.add(`${t}-${i}`);
+      });
+    }), v.current.forEach((r, t) => {
+      e.has(t) || v.current.delete(t);
+    });
+  }, [o, p]);
+  const P = L(() => {
+    if (!N) return o;
+    const e = V.size > 0 ? V : new Set(p), r = N.toLowerCase().replace(/[-()\s]/g, "");
+    return o.filter((t, i) => Array.from(e).some((m) => {
+      const S = t[m], $ = x.isValidElement(S) ? v.current.get(`${i}-${m}`) : void 0, u = M(S, $);
+      return u === null ? !1 : String(u).toLowerCase().replace(/[-()\s]/g, "").includes(r);
     }));
-  }, [o, j, C, u]), m = N(() => p.key ? [...F].sort((e, n) => {
-    const s = typeof e[p.key] == "string" ? e[p.key].toLowerCase() : e[p.key], h = typeof n[p.key] == "string" ? n[p.key].toLowerCase() : n[p.key];
-    return s < h ? p.direction === "asc" ? -1 : 1 : s > h ? p.direction === "asc" ? 1 : -1 : 0;
-  }) : F, [F, p]), D = u.filter((e) => B.has(e)), te = () => {
-    if (!Array.isArray(m) || m.length === 0) return;
-    const e = D.map((k) => w[k] || k), n = (k) => {
-      const z = String(k ?? "");
-      return /[",\n]/.test(z) ? `"${z.replace(/"/g, '""')}"` : z;
-    }, h = [
-      e.join(","),
+  }, [o, N, V, p]), k = L(() => w.key ? [...P].sort((e, r) => {
+    const t = e[w.key], i = r[w.key], m = o.indexOf(e), S = o.indexOf(r), $ = x.isValidElement(t) ? v.current.get(`${m}-${w.key}`) : void 0, u = x.isValidElement(i) ? v.current.get(`${S}-${w.key}`) : void 0;
+    let f = M(t, $), y = M(i, u);
+    return f === null && y === null ? 0 : f === null ? 1 : y === null ? -1 : (typeof f == "string" && (f = f.toLowerCase()), typeof y == "string" && (y = y.toLowerCase()), f < y ? w.direction === "asc" ? -1 : 1 : f > y ? w.direction === "asc" ? 1 : -1 : 0);
+  }) : P, [P, w, o]), R = p.filter((e) => O.has(e)), ge = () => {
+    if (!Array.isArray(k) || k.length === 0) return;
+    const e = R.filter((u) => !fe.includes(u)), r = e.map((u) => b[u] || u), t = (u) => {
+      const f = String(u ?? "");
+      return /[",\n]/.test(f) ? `"${f.replace(/"/g, '""')}"` : f;
+    }, m = [
+      r.join(","),
       // header row
-      ...m.map((k) => D.map((z) => n(k[z])).join(","))
+      ...k.map((u) => {
+        const f = o.indexOf(u);
+        return e.map((y) => {
+          const ne = u[y], Ce = x.isValidElement(ne) ? v.current.get(`${f}-${y}`) : void 0, ve = M(ne, Ce);
+          return t(ve ?? "");
+        }).join(",");
+      })
     ].join(`
-`), le = new Blob([h], { type: "text/csv;charset=utf-8;" }), $ = document.createElement("a");
-    $.href = URL.createObjectURL(le), $.download = "data.csv", document.body.appendChild($), $.click(), document.body.removeChild($);
-  }, ne = N(() => {
-    const e = (a - 1) * y;
-    return m.slice(e, e + y);
-  }, [m, a, y]), g = Math.ceil(m.length / y), re = (e) => {
-    P((n) => ({
+`), S = new Blob([m], { type: "text/csv;charset=utf-8;" }), $ = document.createElement("a");
+    $.href = URL.createObjectURL(S), $.download = "data.csv", document.body.appendChild($), $.click(), document.body.removeChild($);
+  }, me = L(() => {
+    const e = (d - 1) * C;
+    return k.slice(e, e + C);
+  }, [k, d, C]), g = Math.ceil(k.length / C), xe = (e) => {
+    I.includes(e) || G((r) => ({
       key: e,
-      direction: n.key === e && n.direction === "asc" ? "desc" : "asc"
+      direction: r.key === e && r.direction === "asc" ? "desc" : "asc"
     }));
-  }, se = (e) => {
-    T((n) => {
-      const s = new Set(n);
-      return s.has(e) ? s.delete(e) : s.add(e), s;
+  }, be = (e) => {
+    F((r) => {
+      const t = new Set(r);
+      return t.has(e) ? t.delete(e) : t.add(e), t;
     });
-  }, ie = () => {
-    C.size === u.length ? T(/* @__PURE__ */ new Set()) : T(new Set(u));
-  }, ce = (e) => {
-    R((n) => {
-      const s = new Set(n);
-      return s.has(e) ? s.delete(e) : s.add(e), s;
+  }, we = () => {
+    V.size === p.length ? F(/* @__PURE__ */ new Set()) : F(new Set(p));
+  }, ye = (e) => {
+    J((r) => {
+      const t = new Set(r);
+      return t.has(e) ? t.delete(e) : t.add(e), t;
     });
-  }, Y = (e) => {
-    const n = ae(null);
-    return L(() => {
-      const s = (h) => {
-        !n.current || n.current.contains(h.target) || e(h);
+  }, te = (e) => {
+    const r = re(null);
+    return _(() => {
+      const t = (i) => {
+        !r.current || r.current.contains(i.target) || e(i);
       };
-      return document.addEventListener("mousedown", s), document.addEventListener("touchstart", s), () => {
-        document.removeEventListener("mousedown", s), document.removeEventListener("touchstart", s);
+      return document.addEventListener("mousedown", t), document.addEventListener("touchstart", t), () => {
+        document.removeEventListener("mousedown", t), document.removeEventListener("touchstart", t);
       };
-    }, [n, e]), n;
+    }, [r, e]), r;
   };
-  return /* @__PURE__ */ d(ke, { className: "jcTableContainer", children: [
-    /* @__PURE__ */ d(ve, { className: "jcTableHeader", children: [
-      /* @__PURE__ */ d(Se, { className: "jcTableTitleAndActions", children: [
-        /* @__PURE__ */ t($e, { children: ee }),
-        /* @__PURE__ */ d(he, { className: "jcTableExtraComponentsBox", gap: "9px", children: [
-          V && V,
-          /* @__PURE__ */ t(de, { onClick: te, children: "Export to CSV" })
+  return /* @__PURE__ */ h(Fe, { className: "jcTableContainer", children: [
+    /* @__PURE__ */ h(Le, { className: "jcTableHeader", children: [
+      /* @__PURE__ */ h(_e, { className: "jcTableTitleAndActions", children: [
+        /* @__PURE__ */ n(Me, { children: D }),
+        /* @__PURE__ */ h($e, { className: "jcTableExtraComponentsBox", gap: "9px", children: [
+          K && K,
+          /* @__PURE__ */ n(ke, { onClick: ge, children: "Export to CSV" })
         ] })
       ] }),
-      /* @__PURE__ */ d(ze, { className: "jcTableControls", children: [
-        /* @__PURE__ */ d(je, { className: "jcTableSearchContainer", children: [
-          /* @__PURE__ */ t(Te, { customTheme: i }),
-          /* @__PURE__ */ t(
-            De,
+      /* @__PURE__ */ h(Ie, { className: "jcTableControls", children: [
+        /* @__PURE__ */ h(Oe, { className: "jcTableSearchContainer", children: [
+          /* @__PURE__ */ n(Pe, { customTheme: l }),
+          /* @__PURE__ */ n(
+            Re,
             {
-              customTheme: i,
+              customTheme: l,
               type: "text",
               placeholder: "Search...",
-              value: j,
-              onChange: (e) => O(e.target.value)
+              value: N,
+              onChange: (e) => Y(e.target.value)
             }
           )
         ] }),
-        /* @__PURE__ */ d(
+        /* @__PURE__ */ h(
           "div",
           {
             style: { position: "relative" },
-            ref: Y(() => {
-              W(!1);
+            ref: te(() => {
+              ee(!1);
             }),
             children: [
-              /* @__PURE__ */ d(
-                J,
+              /* @__PURE__ */ h(
+                se,
                 {
-                  customTheme: i,
+                  customTheme: l,
                   className: "jcTableSearchFields",
-                  onClick: () => W(!q),
+                  onClick: () => ee(!Z),
                   children: [
-                    /* @__PURE__ */ t(Z, { size: 16 }),
+                    /* @__PURE__ */ n(he, { size: 16 }),
                     "Fields",
-                    /* @__PURE__ */ t(M, { size: 16 })
+                    /* @__PURE__ */ n(H, { size: 16 })
                   ]
                 }
               ),
-              q && /* @__PURE__ */ d(K, { className: "jcTableSearchFieldsDropdown", children: [
-                /* @__PURE__ */ d(E, { customTheme: i, onClick: ie, children: [
-                  /* @__PURE__ */ t(
-                    _,
+              Z && /* @__PURE__ */ h(le, { className: "jcTableSearchFieldsDropdown", children: [
+                /* @__PURE__ */ h(U, { customTheme: l, onClick: we, children: [
+                  /* @__PURE__ */ n(
+                    q,
                     {
-                      customTheme: i,
+                      customTheme: l,
                       type: "checkbox",
-                      checked: C.size === u.length,
+                      checked: V.size === p.length,
                       onChange: () => {
                       }
                     }
                   ),
-                  /* @__PURE__ */ t("span", { style: { fontWeight: "bold" }, children: "All" })
+                  /* @__PURE__ */ n("span", { style: { fontWeight: "bold" }, children: "All" })
                 ] }),
-                /* @__PURE__ */ t("div", { style: { height: "1px", backgroundColor: r.colors.gray4, margin: "4px 0" } }),
-                u.map((e) => /* @__PURE__ */ d(
-                  E,
+                /* @__PURE__ */ n("div", { style: { height: "1px", backgroundColor: s.colors.gray4, margin: "4px 0" } }),
+                p.map((e) => /* @__PURE__ */ h(
+                  U,
                   {
-                    customTheme: i,
-                    onClick: () => se(e),
+                    customTheme: l,
+                    onClick: () => be(e),
                     children: [
-                      /* @__PURE__ */ t(
-                        _,
+                      /* @__PURE__ */ n(
+                        q,
                         {
-                          customTheme: i,
+                          customTheme: l,
                           type: "checkbox",
-                          checked: C.has(e),
+                          checked: V.has(e),
                           onChange: () => {
                           }
                         }
                       ),
-                      /* @__PURE__ */ t("span", { children: w[e] || e })
+                      /* @__PURE__ */ n("span", { children: b[e] || e })
                     ]
                   },
                   e
@@ -518,45 +556,45 @@ const ye = [
             ]
           }
         ),
-        /* @__PURE__ */ d(
+        /* @__PURE__ */ h(
           "div",
           {
             style: { position: "relative" },
-            ref: Y(() => {
-              U(!1);
+            ref: te(() => {
+              X(!1);
             }),
             children: [
-              /* @__PURE__ */ d(
-                J,
+              /* @__PURE__ */ h(
+                se,
                 {
-                  customTheme: i,
+                  customTheme: l,
                   className: "jcTableColumnSettings",
-                  onClick: () => U(!H),
+                  onClick: () => X(!Q),
                   children: [
-                    /* @__PURE__ */ t(Ce, { size: 16 }),
+                    /* @__PURE__ */ n(Ne, { size: 16 }),
                     "Columns",
-                    /* @__PURE__ */ t(M, { size: 16 })
+                    /* @__PURE__ */ n(H, { size: 16 })
                   ]
                 }
               ),
-              H && /* @__PURE__ */ t(K, { className: "jcTableColumnSettingsDropdown", children: u.map((e) => /* @__PURE__ */ d(
-                E,
+              Q && /* @__PURE__ */ n(le, { className: "jcTableColumnSettingsDropdown", children: p.map((e) => /* @__PURE__ */ h(
+                U,
                 {
-                  customTheme: i,
-                  onClick: () => ce(e),
+                  customTheme: l,
+                  onClick: () => ye(e),
                   children: [
-                    /* @__PURE__ */ t(
-                      _,
+                    /* @__PURE__ */ n(
+                      q,
                       {
-                        customTheme: i,
+                        customTheme: l,
                         type: "checkbox",
-                        checked: B.has(e),
+                        checked: O.has(e),
                         onChange: () => {
                         }
                       }
                     ),
-                    B.has(e) ? /* @__PURE__ */ t(be, { size: 16 }) : /* @__PURE__ */ t(xe, { size: 16 }),
-                    /* @__PURE__ */ t("span", { children: w[e] || e })
+                    O.has(e) ? /* @__PURE__ */ n(Ae, { size: 16 }) : /* @__PURE__ */ n(je, { size: 16 }),
+                    /* @__PURE__ */ n("span", { children: b[e] || e })
                   ]
                 },
                 e
@@ -566,92 +604,113 @@ const ye = [
         )
       ] })
     ] }),
-    /* @__PURE__ */ d(Ne, { className: "jcTableContent", children: [
-      /* @__PURE__ */ t("thead", { children: /* @__PURE__ */ t(Q, { customTheme: i, interactableRow: !1, children: D.map((e) => /* @__PURE__ */ d(
-        Ae,
+    /* @__PURE__ */ n("div", { style: { position: "absolute", width: 0, height: 0, overflow: "hidden", pointerEvents: "none" }, children: o.map(
+      (e, r) => p.map((t) => {
+        const i = e[t];
+        if (x.isValidElement(i)) {
+          const m = oe(r, t);
+          return /* @__PURE__ */ n(x.Fragment, { children: x.cloneElement(i, { ref: m }) }, `${r}-${t}`);
+        }
+        return null;
+      })
+    ) }),
+    /* @__PURE__ */ h(He, { className: "jcTableContent", children: [
+      /* @__PURE__ */ n("thead", { children: /* @__PURE__ */ n(ae, { customTheme: l, interactableRow: !1, children: R.map((e) => /* @__PURE__ */ h(
+        Ue,
         {
-          customTheme: i,
-          style: p.key === e ? f.thActive : {},
-          onClick: () => re(e),
+          customTheme: l,
+          style: w.key === e ? z.thActive : {},
+          onClick: () => xe(e),
+          title: I.includes(e) ? "This column is not sortable" : void 0,
           children: [
-            w[e] || e,
-            /* @__PURE__ */ t(Fe, { children: p.key === e ? p.direction === "asc" ? /* @__PURE__ */ t(G, { size: 16 }) : /* @__PURE__ */ t(M, { size: 16 }) : /* @__PURE__ */ t(G, { size: 16, style: { opacity: 0.313 } }) })
+            b[e] || e,
+            !I.includes(e) && /* @__PURE__ */ n(qe, { children: w.key === e ? w.direction === "asc" ? /* @__PURE__ */ n(ie, { size: 16 }) : /* @__PURE__ */ n(H, { size: 16 }) : /* @__PURE__ */ n(ie, { size: 16, style: { opacity: 0.313 } }) })
           ]
         },
         e
       )) }) }),
-      /* @__PURE__ */ t("tbody", { children: ne.map((e, n) => /* @__PURE__ */ t(
-        Q,
-        {
-          customTheme: i,
-          onClick: () => A && A(e),
-          interactableRow: !!A,
-          children: D.map((s) => /* @__PURE__ */ t(Be, { children: e[s] }, s))
-        },
-        n
-      )) })
+      /* @__PURE__ */ n("tbody", { children: me.map((e, r) => {
+        const t = o.indexOf(e);
+        return /* @__PURE__ */ n(
+          ae,
+          {
+            customTheme: l,
+            onClick: () => j && j(e),
+            interactableRow: !!j,
+            children: R.map((i) => {
+              const m = e[i];
+              if (x.isValidElement(m)) {
+                const S = oe(t, i);
+                return /* @__PURE__ */ n(ce, { children: x.cloneElement(m, { ref: S }) }, i);
+              }
+              return /* @__PURE__ */ n(ce, { children: m }, i);
+            })
+          },
+          r
+        );
+      }) })
     ] }),
-    /* @__PURE__ */ d(Le, { children: [
-      /* @__PURE__ */ t(
-        v,
+    /* @__PURE__ */ h(We, { children: [
+      /* @__PURE__ */ n(
+        A,
         {
-          customTheme: i,
-          style: a === 1 ? f.paginationButtonDisabled : {},
-          onClick: () => x(Math.max(1, a - 1)),
-          disabled: a === 1,
+          customTheme: l,
+          style: d === 1 ? z.paginationButtonDisabled : {},
+          onClick: () => T(Math.max(1, d - 1)),
+          disabled: d === 1,
           children: "Previous"
         }
       ),
       (() => {
         const e = [];
         if (g <= 5)
-          for (let n = 1; n <= g; n++)
+          for (let r = 1; r <= g; r++)
             e.push(
-              /* @__PURE__ */ t(
-                v,
+              /* @__PURE__ */ n(
+                A,
                 {
-                  customTheme: i,
-                  style: a === n ? f.paginationButtonActive : {},
-                  onClick: () => x(n),
-                  children: n
+                  customTheme: l,
+                  style: d === r ? z.paginationButtonActive : {},
+                  onClick: () => T(r),
+                  children: r
                 },
-                n
+                r
               )
             );
         else {
           e.push(
-            /* @__PURE__ */ t(
-              v,
+            /* @__PURE__ */ n(
+              A,
               {
-                customTheme: i,
-                style: a === 1 ? f.paginationButtonActive : {},
-                onClick: () => x(1),
+                customTheme: l,
+                style: d === 1 ? z.paginationButtonActive : {},
+                onClick: () => T(1),
                 children: "1"
               },
               1
             )
-          ), a > 3 && e.push(/* @__PURE__ */ t(X, { children: "..." }, "ellipsis1"));
-          const n = Math.max(2, a - 1), s = Math.min(g - 1, a + 1);
-          for (let h = n; h <= s; h++)
+          ), d > 3 && e.push(/* @__PURE__ */ n(de, { children: "..." }, "ellipsis1"));
+          const r = Math.max(2, d - 1), t = Math.min(g - 1, d + 1);
+          for (let i = r; i <= t; i++)
             e.push(
-              /* @__PURE__ */ t(
-                v,
+              /* @__PURE__ */ n(
+                A,
                 {
-                  customTheme: i,
-                  style: a === h ? f.paginationButtonActive : {},
-                  onClick: () => x(h),
-                  children: h
+                  customTheme: l,
+                  style: d === i ? z.paginationButtonActive : {},
+                  onClick: () => T(i),
+                  children: i
                 },
-                h
+                i
               )
             );
-          a < g - 2 && e.push(/* @__PURE__ */ t(X, { children: "..." }, "ellipsis2")), g > 1 && e.push(
-            /* @__PURE__ */ t(
-              v,
+          d < g - 2 && e.push(/* @__PURE__ */ n(de, { children: "..." }, "ellipsis2")), g > 1 && e.push(
+            /* @__PURE__ */ n(
+              A,
               {
-                customTheme: i,
-                style: a === g ? f.paginationButtonActive : {},
-                onClick: () => x(g),
+                customTheme: l,
+                style: d === g ? z.paginationButtonActive : {},
+                onClick: () => T(g),
                 children: g
               },
               g
@@ -660,29 +719,29 @@ const ye = [
         }
         return e;
       })(),
-      /* @__PURE__ */ t(
-        v,
+      /* @__PURE__ */ n(
+        A,
         {
-          customTheme: i,
-          style: a === g ? f.paginationButtonDisabled : {},
-          onClick: () => x(Math.min(g, a + 1)),
-          disabled: a === g,
+          customTheme: l,
+          style: d === g ? z.paginationButtonDisabled : {},
+          onClick: () => T(Math.min(g, d + 1)),
+          disabled: d === g,
           children: "Next"
         }
       )
     ] }),
-    /* @__PURE__ */ d(Me, { children: [
+    /* @__PURE__ */ h(Ke, { children: [
       "Showing ",
-      Math.min((a - 1) * y + 1, m.length),
+      Math.min((d - 1) * C + 1, k.length),
       " to",
       " ",
-      Math.min(a * y, m.length),
+      Math.min(d * C, k.length),
       " of ",
-      m.length,
+      k.length,
       " entries"
     ] })
   ] });
 };
 export {
-  qe as default
+  no as default
 };

package/Timer/Timer.d.ts

@@ -0,0 +1,15 @@
+export interface TimerHandle {
+    getTableValue: () => number;
+}
+export interface TimerProps {
+    timeStart?: string;
+    timeEnd?: string;
+    duration?: number;
+    type?: 'countdown' | 'overdue' | 'elapsed';
+    ref?: React.Ref<TimerHandle>;
+}
+export interface TimerComponent extends React.FC<TimerProps> {
+    getTableValue: (props: TimerProps) => number;
+}
+export declare const Timer: TimerComponent;
+export default Timer;

package/Timer/Timer.js

@@ -0,0 +1,85 @@
+import { jsx as a, jsxs as d } from "react/jsx-runtime";
+import { n as g } from "../.chunks/emotion-styled.browser.esm.js";
+import { c as v } from "../.chunks/emotion-react.browser.esm.js";
+import { useState as S, useEffect as m, useImperativeHandle as T } from "react";
+import w from "../theme.js";
+const l = (e) => {
+  const n = (/* @__PURE__ */ new Date(e.replace(" ", "T").replace("Z", "") + "Z")).getTime(), t = (/* @__PURE__ */ new Date()).getTime();
+  return Math.round((t - n) / 1e3);
+}, f = (e) => {
+  const n = Math.floor(e / 60), t = Math.floor(n / 60), r = n - t * 60, i = e % 60;
+  return `${t}:${String(r).padStart(2, "0")}:${String(i).padStart(2, "0")}`;
+}, u = g("span")(({ textColor: e }) => ({
+  ...v`
+    color: ${e || "inherit"};
+    white-space: nowrap;
+
+    .blink {
+      animation: blinker 1.5s linear infinite;
+    }
+
+    @keyframes blinker {
+      50% {
+        opacity: 0;
+      }
+    }
+  `
+})), o = () => /* @__PURE__ */ a("span", { style: { visibility: "hidden" }, children: "− " }), D = ({ timeStart: e, ref: n }) => {
+  const [t, r] = S(0);
+  return m(() => {
+    const i = l(e || (/* @__PURE__ */ new Date()).toISOString());
+    r(i >= 0 ? i : 0);
+  }, [e]), m(() => {
+    const i = setInterval(() => {
+      r((s) => s + 1);
+    }, 1e3);
+    return () => clearInterval(i);
+  }, []), T(
+    n,
+    () => ({
+      getTableValue: () => t
+    }),
+    [t]
+  ), /* @__PURE__ */ d(u, { children: [
+    /* @__PURE__ */ a(o, {}),
+    f(t),
+    /* @__PURE__ */ a(o, {})
+  ] });
+}, I = ({ timeStart: e, timeEnd: n, duration: t, type: r, ref: i }) => {
+  const [s, h] = S(t || 30);
+  return m(() => {
+    var c;
+    n ? c = l(n) * -1 : e && t ? c = t - l(e) : c = t || 30, h(c);
+  }, [t, r, e, n]), m(() => {
+    const c = setInterval(() => {
+      h((b) => b - 1);
+    }, 1e3);
+    return () => clearInterval(c);
+  }, []), T(
+    i,
+    () => ({
+      getTableValue: () => s
+    }),
+    [s]
+  ), r !== "overdue" && s <= 0 ? /* @__PURE__ */ d(u, { children: [
+    /* @__PURE__ */ a(o, {}),
+    /* @__PURE__ */ a("span", { className: "blink", children: f(0) }),
+    /* @__PURE__ */ a(o, {})
+  ] }) : r === "overdue" && s < 0 ? /* @__PURE__ */ d(u, { textColor: w.colors.qalb, children: [
+    "− ",
+    f(-s),
+    /* @__PURE__ */ a(o, {})
+  ] }) : /* @__PURE__ */ d(u, { children: [
+    /* @__PURE__ */ a(o, {}),
+    f(s),
+    /* @__PURE__ */ a(o, {})
+  ] });
+}, k = ({ type: e, timeStart: n, ref: t, ...r }) => {
+  const [i] = S((/* @__PURE__ */ new Date()).toISOString());
+  return e === "elapsed" ? /* @__PURE__ */ a(D, { ref: t, type: e, timeStart: n || i, ...r }) : /* @__PURE__ */ a(I, { ref: t, type: e, timeStart: n || i, ...r });
+};
+k.getTableValue = (e) => e.type === "elapsed" && e.timeStart ? l(e.timeStart) : e.type === "elapsed" ? 0 : e.timeEnd ? l(e.timeEnd) * -1 : e.timeStart && e.duration ? e.duration - l(e.timeStart) : e.duration ?? 0;
+export {
+  k as Timer,
+  k as default
+};

package/Timer/index.d.ts

@@ -0,0 +1 @@
+export { default, type TimerProps } from './Timer';

package/Timer/index.js

@@ -0,0 +1,4 @@
+import { Timer as a } from "./Timer.js";
+export {
+  a as default
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jcicl",
   "private": false,
-  "version": "1.0.23",
+  "version": "1.0.25",
   "description": "Component library for the websites of Johnson County Iowa",
   "license": "MIT",
   "homepage": "https://devops.jc.net/JCIT/Business%20Solutions%20Delivery/_git/JCComponentLibrary?path=%2FREADME.md&version=GBmaster",

package/utils.js

@@ -1,13 +1,14 @@
-import c from "./theme.js";
+import s from "./theme.js";
 import { u as m } from "./.chunks/useMediaQuery.js";
-const x = () => m(`(max-width: ${c.screenSizes.mobile})`), S = () => m(`(max-width: ${c.screenSizes.tablet})`), b = (r, e = "mmddyyyy") => e === "mmddyyyy" ? new Date(r).toLocaleDateString("en-US", {
+const x = () => m(`(max-width: ${s.screenSizes.mobile})`), S = () => m(`(max-width: ${s.screenSizes.tablet})`), b = (r, e = "mmddyyyy") => e === "mmddyyyy" ? (/* @__PURE__ */ new Date(r.replace(" ", "T").replace("Z", "") + "Z")).toLocaleDateString("en-US", {
+  timeZone: "America/Chicago",
   month: "numeric",
   day: "numeric",
   year: "numeric"
 }) : r, D = (r) => {
-  const { line1: e, line2: i, city: o, state: n, zip: s } = r;
+  const { line1: e, line2: i, city: o, state: n, zip: a } = r;
   let t = e || "";
-  return i && (t.length > 0 && (t += ", "), t += i), o && (t.length > 0 && (t += ", "), t += o), n && (t.length > 0 && (t += ", "), t += n), s && (t += ` ${s}`), t;
+  return i && (t.length > 0 && (t += ", "), t += i), o && (t.length > 0 && (t += ", "), t += o), n && (t.length > 0 && (t += ", "), t += n), a && (t += ` ${a}`), t;
 }, g = (r) => {
   if (r > 3 && r < 21) return "th";
   switch (r % 10) {
@@ -31,25 +32,25 @@ const x = () => m(`(max-width: ${c.screenSizes.mobile})`), S = () => m(`(max-wid
       minute: "2-digit",
       hour12: !0
     }).formatToParts(e), n = (y) => {
-      var a;
-      return ((a = o.find(($) => $.type === y)) == null ? void 0 : a.value) ?? "";
-    }, s = n("month") + ".", t = Number(n("day")), u = n("year"), l = n("hour"), d = n("minute"), f = n("dayPeriod").toLowerCase(), h = g(t);
-    return `${s} ${t}${h}, ${u}, ${l}:${d}${f}`;
+      var c;
+      return ((c = o.find(($) => $.type === y)) == null ? void 0 : c.value) ?? "";
+    }, a = n("month") + ".", t = Number(n("day")), u = n("year"), l = n("hour"), d = n("minute"), f = n("dayPeriod").toLowerCase(), h = g(t);
+    return `${a} ${t}${h}, ${u}, ${l}:${d}${f}`;
   } catch {
     return r;
   }
-}, P = (r) => {
+}, Z = (r) => {
   if (r == null) return ["", void 0];
   let e = r.replace(/\D/g, "") || "";
   e.at(0) == "1" && (e = e.slice(1));
-  const i = e.slice(0, 3), o = e.slice(3, 6), n = e.slice(6, 10), s = e.slice(10);
+  const i = e.slice(0, 3), o = e.slice(3, 6), n = e.slice(6, 10), a = e.slice(10);
   let t = e;
-  return e.length >= 4 && (t = `(${i}) ${e.slice(3)}`), e.length >= 7 && (t = `(${i}) ${o}-${e.slice(6)}`), e.length > 10 && (t = `(${i}) ${o}-${n} ext. ${s}`), [t, e];
+  return e.length >= 4 && (t = `(${i}) ${e.slice(3)}`), e.length >= 7 && (t = `(${i}) ${o}-${e.slice(6)}`), e.length > 10 && (t = `(${i}) ${o}-${n} ext. ${a}`), [t, e];
 };
 export {
   D as formatAddress,
   b as formatDate,
-  P as formatPhoneNumber,
+  Z as formatPhoneNumber,
   T as formatTimestamp,
   x as isMobile,
   S as isTablet