jcicl 0.0.289 → 0.0.293

package/Table/Table.d.ts

@@ -1 +1,9 @@
-export {};
+import { default as React } from 'react';
+export interface TableProps {
+    data: Record<string, any>[];
+    columnTitles?: Record<string, string>;
+    rowsPerPage?: number;
+    title?: string;
+}
+declare const Table: React.FC<TableProps>;
+export default Table;

package/Table/Table.js

@@ -1 +1,581 @@
-
+import { jsxs as s, jsx as o } from "react/jsx-runtime";
+import ue, { forwardRef as q, createElement as T, useState as C, useMemo as v } from "react";
+import { n as a } from "../.chunks/emotion-styled.browser.esm.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 xe = (t) => t.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase(), ge = (t) => t.replace(
+  /^([A-Z])|[\s-_]+(\w)/g,
+  (i, c, u) => u ? u.toUpperCase() : c.toLowerCase()
+), H = (t) => {
+  const i = ge(t);
+  return i.charAt(0).toUpperCase() + i.slice(1);
+}, K = (...t) => t.filter((i, c, u) => !!i && i.trim() !== "" && u.indexOf(i) === c).join(" ").trim(), be = (t) => {
+  for (const i in t)
+    if (i.startsWith("aria-") || i === "role" || i === "title")
+      return !0;
+};
+/**
+ * @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.
+ */
+var Ce = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: 24,
+  height: 24,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: 2,
+  strokeLinecap: "round",
+  strokeLinejoin: "round"
+};
+/**
+ * @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 = q(
+  ({
+    color: t = "currentColor",
+    size: i = 24,
+    strokeWidth: c = 2,
+    absoluteStrokeWidth: u,
+    className: n = "",
+    children: p,
+    iconNode: z,
+    ...d
+  }, A) => T(
+    "svg",
+    {
+      ref: A,
+      ...Ce,
+      width: i,
+      height: i,
+      stroke: t,
+      strokeWidth: u ? Number(c) * 24 / Number(i) : c,
+      className: K("lucide", n),
+      ...!p && !be(d) && { "aria-hidden": "true" },
+      ...d
+    },
+    [
+      ...z.map(([g, y]) => T(g, y)),
+      ...Array.isArray(p) ? p : [p]
+    ]
+  )
+);
+/**
+ * @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 S = (t, i) => {
+  const c = q(
+    ({ className: u, ...n }, p) => T(ye, {
+      ref: p,
+      iconNode: i,
+      className: K(
+        `lucide-${xe(H(t))}`,
+        `lucide-${t}`,
+        u
+      ),
+      ...n
+    })
+  );
+  return c.displayName = H(t), c;
+};
+/**
+ * @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 ke = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]], M = S("chevron-down", ke);
+/**
+ * @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 = [["path", { d: "m18 15-6-6-6 6", key: "153udz" }]], O = S("chevron-up", we);
+/**
+ * @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 = [
+  [
+    "path",
+    {
+      d: "M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49",
+      key: "ct8e1f"
+    }
+  ],
+  ["path", { d: "M14.084 14.158a3 3 0 0 1-4.242-4.242", key: "151rxh" }],
+  [
+    "path",
+    {
+      d: "M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143",
+      key: "13bj9a"
+    }
+  ],
+  ["path", { d: "m2 2 20 20", key: "1ooewy" }]
+], Se = S("eye-off", me);
+/**
+ * @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 ve = [
+  [
+    "path",
+    {
+      d: "M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0",
+      key: "1nclc0"
+    }
+  ],
+  ["circle", { cx: "12", cy: "12", r: "3", key: "1v7zrd" }]
+], ze = S("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 Ae = [
+  ["path", { d: "m21 21-4.34-4.34", key: "14j7rj" }],
+  ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }]
+], U = S("search", Ae);
+/**
+ * @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 Be = [
+  [
+    "path",
+    {
+      d: "M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z",
+      key: "1qme2f"
+    }
+  ],
+  ["circle", { cx: "12", cy: "12", r: "3", key: "1v7zrd" }]
+], Ie = S("settings", Be);
+let m = "";
+const Te = ({
+  data: t = [],
+  columnTitles: i = {},
+  rowsPerPage: c = 19,
+  title: u = "Data Table"
+}) => {
+  const [n, p] = C(1), [, z] = C(""), [d, A] = C({ key: "", direction: "asc" }), [g, y] = C(/* @__PURE__ */ new Set()), [B, j] = C(/* @__PURE__ */ new Set()), [W, Y] = C(!1), [L, Z] = C(!1), h = v(() => t.length === 0 ? [] : Object.keys(t[0]), [t]);
+  ue.useEffect(() => {
+    h.length > 0 && (j(new Set(h)), y(new Set(h)));
+  }, [h]);
+  const I = v(() => {
+    if (!m) return t;
+    const e = g.size > 0 ? g : new Set(h);
+    return t.filter((r) => Array.from(e).some((l) => {
+      const x = r[l];
+      return x && x.toString().toLowerCase().includes(m.toLowerCase());
+    }));
+  }, [t, m, g, h]), k = v(() => d.key ? [...I].sort((e, r) => e[d.key] < r[d.key] ? d.direction === "asc" ? -1 : 1 : e[d.key] > r[d.key] ? d.direction === "asc" ? 1 : -1 : 0) : I, [I, d]), G = v(() => {
+    const e = (n - 1) * c;
+    return k.slice(e, e + c);
+  }, [k, n, c]), f = Math.ceil(k.length / c), J = (e) => {
+    A((r) => ({
+      key: e,
+      direction: r.key === e && r.direction === "asc" ? "desc" : "asc"
+    }));
+  }, Q = (e) => {
+    y((r) => {
+      const l = new Set(r);
+      return l.has(e) ? l.delete(e) : l.add(e), l;
+    });
+  }, X = () => {
+    g.size === h.length ? y(/* @__PURE__ */ new Set()) : y(new Set(h));
+  }, P = (e) => {
+    j((r) => {
+      const l = new Set(r);
+      return l.has(e) ? l.delete(e) : l.add(e), l;
+    });
+  }, ee = (e) => {
+    m = e;
+  }, R = () => {
+    z(m);
+  }, $ = h.filter((e) => B.has(e)), b = {
+    thActive: {
+      backgroundColor: "#009200",
+      color: "#ffffff"
+    },
+    paginationButtonActive: {
+      backgroundColor: "#009200",
+      color: "#ffffff",
+      borderColor: "#009200"
+    },
+    paginationButtonDisabled: {
+      opacity: 0.5,
+      cursor: "not-allowed"
+    },
+    info: {
+      fontSize: "14px",
+      color: "#666666",
+      textAlign: "center",
+      marginTop: "10px"
+    }
+  }, oe = a("div")({
+    backgroundColor: "#ffffff",
+    borderRadius: "8px",
+    boxShadow: "0 2px 10px rgba(0, 0, 0, 0.1)",
+    padding: "20px",
+    fontFamily: "Arial, sans-serif",
+    maxWidth: "100%",
+    overflow: "auto"
+  }), te = a("div")({
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    marginBottom: "20px",
+    flexWrap: "wrap",
+    gap: "10px"
+  }), ne = a("h2")({
+    fontSize: "24px",
+    fontWeight: "bold",
+    color: "#000000",
+    margin: 0
+  }), re = a("div")({
+    display: "flex",
+    gap: "15px",
+    alignItems: "center",
+    flexWrap: "wrap"
+  }), ie = a("div")({
+    position: "relative",
+    display: "flex",
+    alignItems: "center",
+    gap: "10px"
+  }), ae = a(U)({
+    position: "absolute",
+    left: "13px",
+    top: "10px",
+    color: "#666666",
+    width: "19px",
+    height: "19px",
+    transition: "all 313ms ease",
+    "&:focus, &:hover, &:focus-within": {
+      cursor: "pointer",
+      color: "#009200"
+    }
+  }), se = a("input")({
+    padding: "10px 15px 10px 40px",
+    border: "2px solid #e0e0e0",
+    borderRadius: "25px",
+    fontSize: "14px",
+    width: "250px",
+    transition: "all 313ms ease",
+    outline: "none",
+    backgroundColor: "#ffffff",
+    "&:focus, &:hover, &:focus-within": {
+      borderColor: "#009200",
+      boxShadow: "0 0 0 3px rgba(0, 146, 0, 0.1)"
+    }
+  }), N = a("button")({
+    padding: "10px 15px",
+    border: "2px solid #009200",
+    borderRadius: "6px",
+    backgroundColor: "#ffffff",
+    color: "#009200",
+    cursor: "pointer",
+    display: "flex",
+    alignItems: "center",
+    gap: "8px",
+    fontSize: "14px",
+    fontWeight: "500",
+    transition: "all 0.3s ease",
+    outline: "none",
+    "&:focus, &:hover, &:focus-within": {
+      backgroundColor: "#009200",
+      color: "#ffffff",
+      transform: "translateY(-1px)",
+      boxShadow: "0 4px 12px rgba(0, 146, 0, 0.3)"
+    }
+  }), E = a("div")({
+    position: "absolute",
+    top: "100%",
+    right: 0,
+    marginTop: "5px",
+    backgroundColor: "#ffffff",
+    border: "1px solid #e0e0e0",
+    borderRadius: "6px",
+    boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
+    zIndex: 1e3,
+    minWidth: "200px",
+    maxHeight: "300px",
+    overflowY: "auto"
+  }), _ = a("div")({
+    padding: "12px 16px",
+    display: "flex",
+    alignItems: "center",
+    gap: "10px",
+    cursor: "pointer",
+    fontSize: "14px",
+    color: "#333333",
+    transition: "all 0.2s ease",
+    "&:focus, &:hover, &:focus-within": {
+      backgroundColor: "#f0f8f0",
+      color: "#005c00"
+    }
+  }), D = a("input")({
+    width: "16px",
+    height: "16px",
+    accentColor: "#009200"
+  }), ce = a("table")({
+    width: "100%",
+    borderCollapse: "collapse",
+    backgroundColor: "#ffffff",
+    borderRadius: "8px",
+    overflow: "hidden",
+    boxShadow: "0 1px 3px rgba(0, 0, 0, 0.1)"
+  }), le = a("th")({
+    backgroundColor: "#f8f9fa",
+    color: "#333333",
+    padding: "16px 12px",
+    textAlign: "left",
+    fontSize: "14px",
+    fontWeight: "600",
+    borderBottom: "2px solid #e0e0e0",
+    cursor: "pointer",
+    userSelect: "none",
+    transition: "all 0.2s ease",
+    position: "relative",
+    whiteSpace: "nowrap",
+    "&:focus, &:hover, &:focus-within": {
+      backgroundColor: "#e8f5e8",
+      color: "#005c00"
+    }
+  }), de = a("td")({
+    padding: "14px 12px",
+    borderBottom: "1px solid #f0f0f0",
+    fontSize: "14px",
+    color: "#333333",
+    transition: "all 0.2s ease"
+  }), pe = a("span")({
+    marginLeft: "8px",
+    opacity: 0.6
+  }), F = a("tr")({
+    transition: "all 0.2s ease",
+    cursor: "pointer",
+    "&:focus, &:hover, &:focus-within": {
+      backgroundColor: "#f8fff8"
+    }
+  }), he = a("div")({
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    marginTop: "20px",
+    gap: "10px"
+  }), w = a("button")({
+    padding: "8px 12px",
+    border: "1px solid #e0e0e0",
+    borderRadius: "4px",
+    backgroundColor: "#ffffff",
+    color: "#333333",
+    cursor: "pointer",
+    fontSize: "14px",
+    transition: "all 0.2s ease",
+    outline: "none",
+    "&:focus, &:hover, &:focus-within": {
+      backgroundColor: "#009200",
+      color: "#ffffff",
+      borderColor: "#009200"
+    },
+    "&:disabled": {
+      opacity: 0.5,
+      cursor: "not-allowed"
+    }
+  }), fe = a("div")({
+    fontSize: "14px",
+    color: "#666666",
+    textAlign: "center",
+    marginTop: "10px"
+  }), V = a("span")({
+    padding: "8px 4px",
+    color: "#666666",
+    fontSize: "14px"
+  });
+  return /* @__PURE__ */ s(oe, { children: [
+    /* @__PURE__ */ s(te, { children: [
+      /* @__PURE__ */ o(ne, { children: u }),
+      /* @__PURE__ */ s(re, { children: [
+        /* @__PURE__ */ s(ie, { children: [
+          /* @__PURE__ */ s("div", { style: { position: "relative" }, children: [
+            /* @__PURE__ */ o(ae, { onClick: R }),
+            /* @__PURE__ */ o(
+              se,
+              {
+                type: "text",
+                placeholder: "Search...",
+                defaultValue: m,
+                onChange: (e) => ee(e.target.value),
+                onKeyDown: (e) => {
+                  e.key === "Enter" && R();
+                }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ s("div", { style: { position: "relative" }, children: [
+            /* @__PURE__ */ s(N, { onClick: () => Z(!L), children: [
+              /* @__PURE__ */ o(U, { size: 16 }),
+              "Fields",
+              /* @__PURE__ */ o(M, { size: 16 })
+            ] }),
+            L && /* @__PURE__ */ s(E, { children: [
+              /* @__PURE__ */ s(_, { onClick: X, children: [
+                /* @__PURE__ */ o(
+                  D,
+                  {
+                    type: "checkbox",
+                    checked: g.size === h.length,
+                    onChange: () => {
+                    }
+                  }
+                ),
+                /* @__PURE__ */ o("span", { style: { fontWeight: "bold" }, children: "All" })
+              ] }),
+              /* @__PURE__ */ o("div", { style: { height: "1px", backgroundColor: "#e0e0e0", margin: "4px 0" } }),
+              h.map((e) => /* @__PURE__ */ s(_, { onClick: () => Q(e), children: [
+                /* @__PURE__ */ o(D, { type: "checkbox", checked: g.has(e), onChange: () => {
+                } }),
+                /* @__PURE__ */ o("span", { children: i[e] || e })
+              ] }, e))
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ s("div", { style: { position: "relative" }, children: [
+          /* @__PURE__ */ s(N, { onClick: () => Y(!W), children: [
+            /* @__PURE__ */ o(Ie, { size: 16 }),
+            "Columns",
+            /* @__PURE__ */ o(M, { size: 16 })
+          ] }),
+          W && /* @__PURE__ */ o(E, { children: h.map((e) => /* @__PURE__ */ s(_, { onClick: () => P(e), children: [
+            /* @__PURE__ */ o(D, { type: "checkbox", checked: B.has(e), onChange: () => {
+            } }),
+            B.has(e) ? /* @__PURE__ */ o(ze, { size: 16 }) : /* @__PURE__ */ o(Se, { size: 16 }),
+            /* @__PURE__ */ o("span", { children: i[e] || e })
+          ] }, e)) })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ s(ce, { children: [
+      /* @__PURE__ */ o("thead", { children: /* @__PURE__ */ o(F, { children: $.map((e) => /* @__PURE__ */ s(
+        le,
+        {
+          style: d.key === e ? b.thActive : {},
+          onClick: () => J(e),
+          children: [
+            i[e] || e,
+            /* @__PURE__ */ o(pe, { children: d.key === e ? d.direction === "asc" ? /* @__PURE__ */ o(O, { size: 16 }) : /* @__PURE__ */ o(M, { size: 16 }) : /* @__PURE__ */ o(O, { size: 16, style: { opacity: 0.313 } }) })
+          ]
+        },
+        e
+      )) }) }),
+      /* @__PURE__ */ o("tbody", { children: G.map((e, r) => /* @__PURE__ */ o(F, { children: $.map((l) => /* @__PURE__ */ o(de, { children: e[l] }, l)) }, r)) })
+    ] }),
+    /* @__PURE__ */ s(he, { children: [
+      /* @__PURE__ */ o(
+        w,
+        {
+          style: n === 1 ? b.paginationButtonDisabled : {},
+          onClick: () => p(Math.max(1, n - 1)),
+          disabled: n === 1,
+          children: "Previous"
+        }
+      ),
+      (() => {
+        const e = [];
+        if (f <= 5)
+          for (let r = 1; r <= f; r++)
+            e.push(
+              /* @__PURE__ */ o(
+                w,
+                {
+                  style: n === r ? b.paginationButtonActive : {},
+                  onClick: () => p(r),
+                  children: r
+                },
+                r
+              )
+            );
+        else {
+          e.push(
+            /* @__PURE__ */ o(
+              w,
+              {
+                style: n === 1 ? b.paginationButtonActive : {},
+                onClick: () => p(1),
+                children: "1"
+              },
+              1
+            )
+          ), n > 3 && e.push(/* @__PURE__ */ o(V, { children: "..." }, "ellipsis1"));
+          const r = Math.max(2, n - 1), l = Math.min(f - 1, n + 1);
+          for (let x = r; x <= l; x++)
+            e.push(
+              /* @__PURE__ */ o(
+                w,
+                {
+                  style: n === x ? b.paginationButtonActive : {},
+                  onClick: () => p(x),
+                  children: x
+                },
+                x
+              )
+            );
+          n < f - 2 && e.push(/* @__PURE__ */ o(V, { children: "..." }, "ellipsis2")), f > 1 && e.push(
+            /* @__PURE__ */ o(
+              w,
+              {
+                style: n === f ? b.paginationButtonActive : {},
+                onClick: () => p(f),
+                children: f
+              },
+              f
+            )
+          );
+        }
+        return e;
+      })(),
+      /* @__PURE__ */ o(
+        w,
+        {
+          style: n === f ? b.paginationButtonDisabled : {},
+          onClick: () => p(Math.min(f, n + 1)),
+          disabled: n === f,
+          children: "Next"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ s(fe, { children: [
+      "Showing ",
+      Math.min((n - 1) * c + 1, k.length),
+      " to",
+      " ",
+      Math.min(n * c, k.length),
+      " of ",
+      k.length,
+      " entries"
+    ] })
+  ] });
+};
+export {
+  Te as default
+};

package/Table/index.d.ts

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

package/Table/index.js

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jcicl",
   "private": false,
-  "version": "0.0.289",
+  "version": "0.0.293",
   "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",
@@ -20,6 +20,7 @@
     "@mui/icons-material": "^6.1.3",
     "@mui/material": "^6.1.1",
     "@react-hook/resize-observer": "^2.0.2",
+    "lucide-react": "^0.525.0",
     "overlayscrollbars-react": "^0.5.6",
     "react-device-detect": "^2.2.3"
   }