@konstructio/ui 0.1.2-alpha.77 → 0.1.2-alpha.78

package/dist/components/VirtualizedTable/components/Filter/Filter.js

@@ -1,121 +1,179 @@
-import { jsx as s, jsxs as W } from "react/jsx-runtime";
-import { c as ae } from "../../../../compiler-runtime-DA41awpA.js";
-import { d as ne } from "../../../../debounce-DJveWHr_.js";
-import { useRef as re } from "react";
-import { Button as ce } from "../../../Button/Button.js";
-import { Filter as a } from "../../../Filter/Filter.js";
-import { Input as ie } from "../../../Input/Input.js";
-import { cn as pe } from "../../../../utils/index.js";
-import { useTableContext as me } from "../../contexts/table.hook.js";
-const Oe = (m) => {
-  const e = ae.c(44), {
-    actions: T,
-    filters: B,
-    multiSelectFilter: O,
-    placeholder: A,
-    showFilterInput: X,
-    showResetButton: Y,
-    resetButtonClassName: f,
-    closeOnApply: Z
-  } = m, j = X === void 0 ? !0 : X, M = Y === void 0 ? !0 : Y, k = Z === void 0 ? !0 : Z, I = re(null), {
-    termOfSearch: P,
-    multiselectSelected: _,
-    dateFilters: N,
-    dateRangeFilters: $,
-    timeFilters: g,
-    onChangeTermOfSearch: n,
-    onSelectMultiselect: E,
-    onSelectDateFilter: q,
-    onSelectDateRangeFilter: z,
-    onSelectTimeFilter: G
-  } = me();
-  let h;
-  e[0] !== B || e[1] !== O ? (h = B ?? O?.map(ue) ?? [], e[0] = B, e[1] = O, e[2] = h) : h = e[2];
-  const H = h;
-  let y;
-  e[3] !== T ? (y = T ?? [], e[3] = T, e[4] = y) : y = e[4];
-  const J = y;
-  let F;
-  e[5] !== H || e[6] !== J ? (F = [...H, ...J], e[5] = H, e[6] = J, e[7] = F) : F = e[7];
-  const K = F;
-  let b;
-  e[8] !== E ? (b = (t, o) => E(t, o.map(de)), e[8] = E, e[9] = b) : b = e[9];
-  const v = b;
-  let w;
-  e[10] !== n ? (w = () => {
-    n(""), I.current && (I.current.value = "");
-  }, e[10] = n, e[11] = w) : w = e[11];
-  const L = w;
-  let R;
-  e[12] !== n ? (R = ne((t) => {
-    n(t.target.value);
-  }, 500), e[12] = n, e[13] = R) : R = e[13];
-  const Q = R;
-  let S;
-  e[14] !== N || e[15] !== $ || e[16] !== _ || e[17] !== P || e[18] !== g ? (S = !!P || Object.values(_ ?? {}).flat().length > 0 || Object.values(N ?? {}).some(Boolean) || Object.values($ ?? {}).some(Boolean) || Object.values(g ?? {}).some(Boolean), e[14] = N, e[15] = $, e[16] = _, e[17] = P, e[18] = g, e[19] = S) : S = e[19];
-  const U = S;
-  let D;
-  e[20] !== v || e[21] !== q || e[22] !== z || e[23] !== G ? (D = (t) => {
-    if (t.type === "action") {
+import { jsxs as m, jsx as n } from "react/jsx-runtime";
+import { d as G } from "../../../../debounce-DJveWHr_.js";
+import { useRef as H, useMemo as p, useCallback as w } from "react";
+import { Button as J } from "../../../Button/Button.js";
+import { Filter as r } from "../../../Filter/Filter.js";
+import { Input as K } from "../../../Input/Input.js";
+import { cn as L } from "../../../../utils/index.js";
+import { useTableContext as Q } from "../../contexts/table.hook.js";
+const te = ({
+  actions: u,
+  filters: d,
+  multiSelectFilter: i,
+  placeholder: T,
+  showFilterInput: v = !0,
+  showResetButton: x = !0,
+  resetButtonClassName: M,
+  closeOnApply: j = !0
+}) => {
+  const l = H(null), {
+    termOfSearch: h,
+    multiselectSelected: y,
+    dateFilters: F,
+    dateRangeFilters: b,
+    timeFilters: D,
+    onChangeTermOfSearch: c,
+    onSelectMultiselect: R,
+    onSelectDateFilter: O,
+    onSelectDateRangeFilter: A,
+    onSelectTimeFilter: B
+  } = Q(), k = p(() => {
+    const e = d ?? i?.map((o) => ({
+      ...o,
+      type: "badgeMultiSelect"
+    })) ?? [], t = u ?? [];
+    return [...e, ...t];
+  }, [d, i, u]), S = w(
+    (e, t) => R(
+      e,
+      t.map((o) => o.id)
+    ),
+    [R]
+  ), P = w(() => {
+    c(""), l.current && (l.current.value = "");
+  }, [c]), I = p(
+    () => G((e) => {
+      c(e.target.value);
+    }, 500),
+    [c]
+  ), N = p(
+    () => !!h || Object.values(y ?? {}).flat().length > 0 || Object.values(F ?? {}).some(Boolean) || Object.values(b ?? {}).some(Boolean) || Object.values(D ?? {}).some(Boolean),
+    [
+      h,
+      y,
+      F,
+      b,
+      D
+    ]
+  ), g = (e) => {
+    if (e.type === "action") {
       const {
-        label: l,
-        appearance: ee,
-        variant: te,
-        leftIcon: oe,
-        rightIcon: le,
-        type: he,
-        ...se
-      } = t;
-      return /* @__PURE__ */ W(ce, { appearance: ee === void 0 ? "compact" : ee, variant: te === void 0 ? "secondary" : te, ...se, children: [
-        oe,
-        l,
-        le
-      ] }, l);
+        label: a,
+        appearance: _ = "compact",
+        variant: $ = "secondary",
+        leftIcon: q,
+        rightIcon: z,
+        type: U,
+        ...E
+      } = e;
+      return /* @__PURE__ */ m(
+        J,
+        {
+          appearance: _,
+          variant: $,
+          ...E,
+          children: [
+            q,
+            a,
+            z
+          ]
+        },
+        a
+      );
     }
-    const {
-      key: o,
-      label: u,
-      position: C
-    } = t, d = C === void 0 ? "right" : C;
-    return t.type === "textMultiSelect" ? /* @__PURE__ */ s(a.TextMultiSelect, { label: u, position: d, options: t.options, onApply: (l) => {
-      v(o, l);
-    } }, o) : t.type === "date" ? /* @__PURE__ */ s(a.DateFilterDropdown, { label: u, position: d, countryCode: t.countryCode, onApply: (l) => {
-      q(o, l);
-    } }, o) : t.type === "dateRange" ? /* @__PURE__ */ s(a.DateRangeFilterDropdown, { label: u, position: d, showTime: t.showTime, timeFormat: t.timeFormat, showPresets: t.showPresets, defaultRange: t.defaultRange, minDate: t.minDate, maxDate: t.maxDate, countryCode: t.countryCode, onApply: (l) => {
-      z(o, l);
-    }, onRangeChange: t.onRangeChange }, o) : t.type === "time" ? /* @__PURE__ */ s(a.TimeFilterDropdown, { label: u, position: d, format: t.format, presets: t.presets, showTimePicker: t.showTimePicker, onApply: (l) => {
-      G(o, l);
-    } }, o) : /* @__PURE__ */ s(a.BadgeMultiSelect, { label: u, position: d, options: t.options, onApply: (l) => {
-      v(o, l);
-    } }, o);
-  }, e[20] = v, e[21] = q, e[22] = z, e[23] = G, e[24] = D) : D = e[24];
-  const V = D;
-  let r;
-  e[25] !== Q || e[26] !== A || e[27] !== j ? (r = j && /* @__PURE__ */ s(ie, { ref: I, placeholder: A, isSearch: !0, autoComplete: "false", className: "w-72", inputMode: "search", onChange: Q }), e[25] = Q, e[26] = A, e[27] = j, e[28] = r) : r = e[28];
-  let c;
-  e[29] !== V || e[30] !== K ? (c = K.map(V), e[29] = V, e[30] = K, e[31] = c) : c = e[31];
-  let i;
-  e[32] !== L || e[33] !== U || e[34] !== f || e[35] !== M ? (i = M && /* @__PURE__ */ s(a.ResetButton, { className: pe("select-none", f), disabled: !U, onClick: L }), e[32] = L, e[33] = U, e[34] = f, e[35] = M, e[36] = i) : i = e[36];
-  let p;
-  e[37] !== k || e[38] !== c || e[39] !== i ? (p = /* @__PURE__ */ W(a, { closeOnApply: k, children: [
-    c,
-    i
-  ] }), e[37] = k, e[38] = c, e[39] = i, e[40] = p) : p = e[40];
-  let x;
-  return e[41] !== r || e[42] !== p ? (x = /* @__PURE__ */ W("div", { className: "w-full flex items-center justify-end pb-6", children: [
-    r,
-    p
-  ] }), e[41] = r, e[42] = p, e[43] = x) : x = e[43], x;
-};
-function ue(m) {
-  return {
-    ...m,
-    type: "badgeMultiSelect"
+    const { key: t, label: o, position: s = "right" } = e;
+    return e.type === "textMultiSelect" ? /* @__PURE__ */ n(
+      r.TextMultiSelect,
+      {
+        label: o,
+        position: s,
+        options: e.options,
+        onApply: (a) => {
+          S(t, a);
+        }
+      },
+      t
+    ) : e.type === "date" ? /* @__PURE__ */ n(
+      r.DateFilterDropdown,
+      {
+        label: o,
+        position: s,
+        countryCode: e.countryCode,
+        onApply: (a) => {
+          O(t, a);
+        }
+      },
+      t
+    ) : e.type === "dateRange" ? /* @__PURE__ */ n(
+      r.DateRangeFilterDropdown,
+      {
+        label: o,
+        position: s,
+        showTime: e.showTime,
+        timeFormat: e.timeFormat,
+        showPresets: e.showPresets,
+        defaultRange: e.defaultRange,
+        minDate: e.minDate,
+        maxDate: e.maxDate,
+        countryCode: e.countryCode,
+        onApply: (a) => {
+          A(t, a);
+        },
+        onRangeChange: e.onRangeChange
+      },
+      t
+    ) : e.type === "time" ? /* @__PURE__ */ n(
+      r.TimeFilterDropdown,
+      {
+        label: o,
+        position: s,
+        format: e.format,
+        presets: e.presets,
+        showTimePicker: e.showTimePicker,
+        onApply: (a) => {
+          B(t, a);
+        }
+      },
+      t
+    ) : /* @__PURE__ */ n(
+      r.BadgeMultiSelect,
+      {
+        label: o,
+        position: s,
+        options: e.options,
+        onApply: (a) => {
+          S(t, a);
+        }
+      },
+      t
+    );
   };
-}
-function de(m) {
-  return m.id;
-}
+  return /* @__PURE__ */ m("div", { className: "w-full flex items-center justify-end pb-6", children: [
+    v && /* @__PURE__ */ n(
+      K,
+      {
+        ref: l,
+        placeholder: T,
+        isSearch: !0,
+        autoComplete: "false",
+        className: "w-72",
+        inputMode: "search",
+        onChange: I
+      }
+    ),
+    /* @__PURE__ */ m(r, { closeOnApply: j, children: [
+      k.map(g),
+      x && /* @__PURE__ */ n(
+        r.ResetButton,
+        {
+          className: L("select-none", M),
+          disabled: !N,
+          onClick: P
+        }
+      )
+    ] })
+  ] });
+};
 export {
-  Oe as Filter
+  te as Filter
 };

package/dist/components/VirtualizedTable/components/FormPaginate/FormPaginate.js

@@ -1,35 +1,60 @@
-import { jsx as l, jsxs as g } from "react/jsx-runtime";
-import { c as b } from "../../../../compiler-runtime-DA41awpA.js";
-import { useRef as h } from "react";
-import { Input as d } from "../../../Input/Input.js";
-import { Typography as y } from "../../../Typography/Typography.js";
-import { Button as j } from "../../../Button/Button.js";
-import { useTableContext as N } from "../../contexts/table.hook.js";
-const k = () => {
-  const e = b.c(10), c = h(null), {
-    totalPages: t,
-    handlePage: s
-  } = N();
-  let r;
-  e[0] !== s || e[1] !== t ? (r = (p) => {
-    p.preventDefault();
-    const u = new FormData(p.currentTarget), f = Number(u.get("jump-to")), x = (f < t ? f : t) || 1;
-    s(x - 1), c.current?.reset();
-  }, e[0] = s, e[1] = t, e[2] = r) : r = e[2];
-  const i = r;
-  let m;
-  e[3] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (m = /* @__PURE__ */ l(y, { component: "span", className: "text-sm min-w-fit tracking-normal", children: "Jump to" }), e[3] = m) : m = e[3];
-  let o;
-  e[4] !== t ? (o = /* @__PURE__ */ l(d, { type: "number", className: "w-18 text-sm no-spinner", name: "jump-to", min: 1, max: t, required: !0, autoComplete: "off" }), e[4] = t, e[5] = o) : o = e[5];
-  let n;
-  e[6] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (n = /* @__PURE__ */ l(j, { variant: "link", type: "submit", className: "text-xs p-2 cursor-pointer", children: "Go" }), e[6] = n) : n = e[6];
-  let a;
-  return e[7] !== i || e[8] !== o ? (a = /* @__PURE__ */ g("form", { "aria-label": "footer-pagination", ref: c, onSubmit: i, className: "flex items-center gap-2", noValidate: !0, children: [
-    m,
-    o,
-    n
-  ] }), e[7] = i, e[8] = o, e[9] = a) : a = e[9], a;
+import { jsxs as p, jsx as e } from "react/jsx-runtime";
+import { useRef as u, useCallback as l } from "react";
+import { Input as c } from "../../../Input/Input.js";
+import { Typography as f } from "../../../Typography/Typography.js";
+import { Button as g } from "../../../Button/Button.js";
+import { useTableContext as x } from "../../contexts/table.hook.js";
+const y = () => {
+  const o = u(null), { totalPages: t, handlePage: r } = x(), m = l(
+    (a) => {
+      a.preventDefault();
+      const s = new FormData(a.currentTarget), n = Number(s.get("jump-to")), i = (n < t ? n : t) || 1;
+      r(i - 1), o.current?.reset();
+    },
+    [r, t]
+  );
+  return /* @__PURE__ */ p(
+    "form",
+    {
+      "aria-label": "footer-pagination",
+      ref: o,
+      onSubmit: m,
+      className: "flex items-center gap-2",
+      noValidate: !0,
+      children: [
+        /* @__PURE__ */ e(
+          f,
+          {
+            component: "span",
+            className: "text-sm min-w-fit tracking-normal",
+            children: "Jump to"
+          }
+        ),
+        /* @__PURE__ */ e(
+          c,
+          {
+            type: "number",
+            className: "w-18 text-sm no-spinner",
+            name: "jump-to",
+            min: 1,
+            max: t,
+            required: !0,
+            autoComplete: "off"
+          }
+        ),
+        /* @__PURE__ */ e(
+          g,
+          {
+            variant: "link",
+            type: "submit",
+            className: "text-xs p-2 cursor-pointer",
+            children: "Go"
+          }
+        )
+      ]
+    }
+  );
 };
 export {
-  k as FormPaginate
+  y as FormPaginate
 };

package/dist/components/VirtualizedTable/components/Header/Header.js

@@ -1,65 +1,102 @@
-import { jsx as i, jsxs as g } from "react/jsx-runtime";
-import { c as A } from "../../../../compiler-runtime-DA41awpA.js";
-import { f as j } from "../../../../index-CSWGJT-v.js";
-import { cn as m } from "../../../../utils/index.js";
-import D from "../../assets/chevron-up.js";
-import y from "../../assets/chevron-down.js";
-import { useTableContext as H } from "../../contexts/table.hook.js";
-const q = (b) => {
-  const e = A.c(20), {
-    className: u,
-    classNameArrows: n,
-    classNameActiveArrows: s
-  } = b, {
-    table: h,
-    onSorting: o
-  } = H();
-  let f;
-  e[0] !== o ? (f = (t) => o([{
-    id: t.id,
-    desc: !1
-  }]), e[0] = o, e[1] = f) : f = e[1];
-  const c = f;
-  let p;
-  e[2] !== o ? (p = (t) => o([{
-    id: t.id,
-    desc: !0
-  }]), e[2] = o, e[3] = p) : p = e[3];
-  const d = p;
-  let a;
-  e[4] !== u ? (a = m("font-semibold", "uppercase", "text-slate-500", "text-xs", "not-italic", "bg-slate-100", "overflow-hidden", "dark:text-slate-300", "dark:bg-metal-800", u), e[4] = u, e[5] = a) : a = e[5];
-  let l;
-  if (e[6] !== s || e[7] !== n || e[8] !== c || e[9] !== d || e[10] !== h) {
-    let t;
-    e[12] !== s || e[13] !== n || e[14] !== c || e[15] !== d ? (t = (k) => {
-      const {
-        id: N,
-        headers: C
-      } = k;
-      return /* @__PURE__ */ i("tr", { children: C.map((S) => {
-        const {
-          id: w,
-          column: r,
-          getContext: v
-        } = S;
-        return /* @__PURE__ */ i("th", { scope: "col", className: m("px-4", "py-3", "text-left", "text-xs", "first:rounded-tl-lg", "last:rounded-tr-lg", "border-transparent", "dark:border-t", "dark:border-metal-700", "dark:first:border-l", "dark:last:border-r", r.columnDef.meta?.headerClassName), children: /* @__PURE__ */ g("span", { className: "flex items-center gap-2 w-full", children: [
-          j(r.columnDef.header, v()),
-          r.getCanSort() && /* @__PURE__ */ g("div", { className: m("flex flex-col text-slate-400 justify-center items-center gap-1", n), role: "presentation", children: [
-            /* @__PURE__ */ i(D, { className: m("w-2 h-2 cursor-pointer", {
-              "text-blue-600 dark:text-aurora-500": r.getIsSorted() === "asc"
-            }, s), onClick: () => c(r) }),
-            /* @__PURE__ */ i(y, { className: m("w-2 h-2 cursor-pointer", {
-              "text-blue-600 dark:text-aurora-500": r.getIsSorted() === "desc"
-            }, s), onClick: () => d(r) })
+import { jsx as r, jsxs as d } from "react/jsx-runtime";
+import { f as b } from "../../../../index-CSWGJT-v.js";
+import { useCallback as l } from "react";
+import { cn as a } from "../../../../utils/index.js";
+import g from "../../assets/chevron-up.js";
+import u from "../../assets/chevron-down.js";
+import { useTableContext as k } from "../../contexts/table.hook.js";
+const y = ({
+  className: n,
+  classNameArrows: i,
+  classNameActiveArrows: s
+}) => {
+  const { table: c, onSorting: o } = k(), m = l(
+    (t) => o([{ id: t.id, desc: !1 }]),
+    [o]
+  ), p = l(
+    (t) => o([{ id: t.id, desc: !0 }]),
+    [o]
+  );
+  return /* @__PURE__ */ r(
+    "thead",
+    {
+      className: a(
+        "font-semibold",
+        "uppercase",
+        "text-slate-500",
+        "text-xs",
+        "not-italic",
+        "bg-slate-100",
+        "overflow-hidden",
+        "dark:text-slate-300",
+        "dark:bg-metal-800",
+        n
+      ),
+      children: c.getHeaderGroups().map(({ id: t, headers: f }) => /* @__PURE__ */ r("tr", { children: f.map(({ id: x, column: e, getContext: h }) => /* @__PURE__ */ r(
+        "th",
+        {
+          scope: "col",
+          className: a(
+            "px-4",
+            "py-3",
+            "text-left",
+            "text-xs",
+            "first:rounded-tl-lg",
+            "last:rounded-tr-lg",
+            "border-transparent",
+            "dark:border-t",
+            "dark:border-metal-700",
+            "dark:first:border-l",
+            "dark:last:border-r",
+            e.columnDef.meta?.headerClassName
+          ),
+          children: /* @__PURE__ */ d("span", { className: "flex items-center gap-2 w-full", children: [
+            b(e.columnDef.header, h()),
+            e.getCanSort() && /* @__PURE__ */ d(
+              "div",
+              {
+                className: a(
+                  "flex flex-col text-slate-400 justify-center items-center gap-1",
+                  i
+                ),
+                role: "presentation",
+                children: [
+                  /* @__PURE__ */ r(
+                    g,
+                    {
+                      className: a(
+                        "w-2 h-2 cursor-pointer",
+                        {
+                          "text-blue-600 dark:text-aurora-500": e.getIsSorted() === "asc"
+                        },
+                        s
+                      ),
+                      onClick: () => m(e)
+                    }
+                  ),
+                  /* @__PURE__ */ r(
+                    u,
+                    {
+                      className: a(
+                        "w-2 h-2 cursor-pointer",
+                        {
+                          "text-blue-600 dark:text-aurora-500": e.getIsSorted() === "desc"
+                        },
+                        s
+                      ),
+                      onClick: () => p(e)
+                    }
+                  )
+                ]
+              }
+            )
           ] })
-        ] }) }, w);
-      }) }, N);
-    }, e[12] = s, e[13] = n, e[14] = c, e[15] = d, e[16] = t) : t = e[16], l = h.getHeaderGroups().map(t), e[6] = s, e[7] = n, e[8] = c, e[9] = d, e[10] = h, e[11] = l;
-  } else
-    l = e[11];
-  let x;
-  return e[17] !== a || e[18] !== l ? (x = /* @__PURE__ */ i("thead", { className: a, children: l }), e[17] = a, e[18] = l, e[19] = x) : x = e[19], x;
+        },
+        x
+      )) }, t))
+    }
+  );
 };
 export {
-  q as Header
+  y as Header
 };