@konstructio/ui 0.1.2-alpha.10 → 0.1.2-alpha.101

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

@@ -1,86 +1,124 @@
-import { jsxs as m, jsx as l } from "react/jsx-runtime";
-import { d as v } from "../../../../debounce-BFejQm9P.js";
-import { useRef as O, useCallback as u, useMemo as p } from "react";
+import { o as $ } from "../../../../rolldown-runtime-Ck3dxwZt.js";
+import { t as G } from "../../../../Input-DG3snJf_.js";
+import { t as H } from "../../../../utils-Cx-WzRZF.js";
+import { Button as J } from "../../../Button/Button.js";
+import { resetEvent as K } from "../../../Filter/events/index.js";
 import { Filter as n } from "../../../Filter/Filter.js";
-import { Input as R } from "../../../Input/Input.js";
-import { Button as y } from "../../../Button/Button.js";
-import { useTableContext as B } from "../../contexts/table.hook.js";
-const $ = ({
-  actions: d,
-  multiSelectFilter: f,
-  placeholder: h,
-  showFilterInput: g = !0,
-  showResetButton: x = !0
-}) => {
-  const s = O(null), {
-    termOfSearch: o,
-    multiselectSelected: c,
-    onChangeTermOfSearch: a,
-    onSelectMultiselect: i
-  } = B(), C = u(
-    (e, t) => i(
-      e,
-      t.map((r) => r.id)
-    ),
-    [i]
-  ), S = u(() => {
-    a(""), s.current && (s.current.value = "");
-  }, [a]), b = p(
-    () => v((e) => {
-      a(e.target.value);
-    }, 500),
-    [a]
-  ), F = p(
-    () => !!o || Object.entries(c ?? {}).map(([, e]) => e).flat().length > 0,
-    [o, c]
-  );
-  return /* @__PURE__ */ m("div", { className: "w-full flex items-center justify-end pb-6", children: [
-    g && /* @__PURE__ */ l(
-      R,
-      {
-        ref: s,
-        placeholder: h,
-        isSearch: !0,
-        autoComplete: "false",
-        className: "w-72",
-        inputMode: "search",
-        onChange: b
+import { t as Q } from "../../../../debounce-KoeGNmnW.js";
+import { useTableContext as U } from "../../contexts/table.hook.js";
+import { VirtualizedTableEvent as W } from "../../events/index.js";
+import { useCallback as w, useEffect as X, useMemo as u, useRef as Y } from "react";
+import { jsx as s, jsxs as p } from "react/jsx-runtime";
+var Z = /* @__PURE__ */ $(Q(), 1), ue = ({ id: m, actions: i, filters: d, multiSelectFilter: h, placeholder: D, showFilterInput: x = !0, showResetButton: A = !0, resetButtonClassName: M, closeOnApply: j = !0 }) => {
+  const c = Y(null), { termOfSearch: y, multiselectSelected: b, dateFilters: F, dateRangeFilters: S, timeFilters: v, onChangeTermOfSearch: l, onSelectMultiselect: R, onSelectDateFilter: E, onSelectDateRangeFilter: O, onSelectTimeFilter: B } = U(), I = u(() => {
+    const e = d ?? h?.map((a) => ({
+      ...a,
+      type: "badgeMultiSelect"
+    })) ?? [], t = i ?? [];
+    return [...e, ...t];
+  }, [
+    d,
+    h,
+    i
+  ]), T = w((e, t) => R(e, t.map((a) => a.id)), [R]), _ = w(() => {
+    l(""), c.current && (c.current.value = "");
+  }, [l]);
+  X(() => {
+    const e = Array.isArray(m) ? m.join(",") : String(m), t = new AbortController();
+    return document.addEventListener(W.RESET_FILTERS, (a) => {
+      const { detail: o } = a;
+      o.tableId === e && (l(""), c.current && (c.current.value = ""), K());
+    }, { signal: t.signal }), () => t.abort();
+  }, [m, l]);
+  const k = u(() => (0, Z.default)((e) => {
+    l(e.target.value);
+  }, 500), [l]), P = u(() => !!y || Object.values(b ?? {}).flat().length > 0 || Object.values(F ?? {}).some(Boolean) || Object.values(S ?? {}).some(Boolean) || Object.values(v ?? {}).some(Boolean), [
+    y,
+    b,
+    F,
+    S,
+    v
+  ]), g = (e) => {
+    if (e.type === "action") {
+      const { label: r, appearance: N = "compact", variant: L = "secondary", leftIcon: q, rightIcon: z, type: f, ...V } = e;
+      return /* @__PURE__ */ p(J, {
+        appearance: N,
+        variant: L,
+        ...V,
+        children: [
+          q,
+          r,
+          z
+        ]
+      }, r);
+    }
+    const { key: t, label: a, position: o = "right" } = e;
+    return e.type === "textMultiSelect" ? /* @__PURE__ */ s(n.TextMultiSelect, {
+      label: a,
+      position: o,
+      options: e.options,
+      onApply: (r) => {
+        T(t, r);
       }
-    ),
-    /* @__PURE__ */ m(n, { children: [
-      f?.map(
-        ({ key: e, label: t, position: r = "right", options: M }) => /* @__PURE__ */ l(
-          n.BadgeMultiSelect,
-          {
-            label: t,
-            position: r,
-            options: M,
-            onApply: (j) => C(e, j)
-          },
-          t
-        )
-      ),
-      d?.map(({ label: e, onClick: t, variant: r = "secondary" }) => /* @__PURE__ */ l(
-        y,
-        {
-          variant: r,
-          appearance: "compact",
-          onClick: t,
-          children: e
-        },
-        e
-      )),
-      x && /* @__PURE__ */ l(
-        n.ResetButton,
-        {
-          className: "text-slate-700 hover:text-slate-700 disabled:text-slate-700/45 select-none",
-          disabled: !F,
-          onClick: S
-        }
-      )
-    ] })
-  ] });
+    }, t) : e.type === "date" ? /* @__PURE__ */ s(n.DateFilterDropdown, {
+      label: a,
+      position: o,
+      countryCode: e.countryCode,
+      onApply: (r) => {
+        E(t, r);
+      }
+    }, t) : e.type === "dateRange" ? /* @__PURE__ */ s(n.DateRangeFilterDropdown, {
+      label: a,
+      position: o,
+      showTime: e.showTime,
+      timeFormat: e.timeFormat,
+      showPresets: e.showPresets,
+      defaultRange: e.defaultRange,
+      minDate: e.minDate,
+      maxDate: e.maxDate,
+      countryCode: e.countryCode,
+      onApply: (r) => {
+        O(t, r);
+      },
+      onRangeChange: e.onRangeChange
+    }, t) : e.type === "time" ? /* @__PURE__ */ s(n.TimeFilterDropdown, {
+      label: a,
+      position: o,
+      format: e.format,
+      presets: e.presets,
+      showTimePicker: e.showTimePicker,
+      onApply: (r) => {
+        B(t, r);
+      }
+    }, t) : /* @__PURE__ */ s(n.BadgeMultiSelect, {
+      label: a,
+      position: o,
+      options: e.options,
+      onApply: (r) => {
+        T(t, r);
+      }
+    }, t);
+  };
+  return /* @__PURE__ */ p("div", {
+    className: "w-full flex items-center justify-end pb-6",
+    children: [x && /* @__PURE__ */ s(G, {
+      ref: c,
+      placeholder: D,
+      isSearch: !0,
+      autoComplete: "false",
+      className: "w-72",
+      inputMode: "search",
+      onChange: k
+    }), /* @__PURE__ */ p(n, {
+      closeOnApply: j,
+      children: [I.map(g), A && /* @__PURE__ */ s(n.ResetButton, {
+        className: H("select-none", M),
+        disabled: !P,
+        onClick: _
+      })]
+    })]
+  });
 };
 export {
-  $ as Filter
+  ue as Filter
 };

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

@@ -1,48 +1,45 @@
-import { jsxs as i, jsx as t } from "react/jsx-runtime";
-import { useRef as l, useCallback as p } from "react";
-import { Input as c } from "../../../Input/Input.js";
-import { useTableContext as f } from "../../contexts/table.hook.js";
-const h = () => {
-  const r = l(null), { totalPages: e, handlePage: o } = f(), m = p(
-    (n) => {
-      n.preventDefault();
-      const s = new FormData(n.currentTarget), a = Number(s.get("jump-to")), u = (a < e ? a : e) || 1;
-      o(u - 1), r.current?.reset();
-    },
-    [o, e]
-  );
-  return /* @__PURE__ */ i(
-    "form",
-    {
-      "aria-label": "footer-pagination",
-      ref: r,
-      onSubmit: m,
-      className: "flex items-center gap-2",
-      children: [
-        /* @__PURE__ */ t("span", { className: "min-w-fit", children: "Jump to" }),
-        /* @__PURE__ */ t(
-          c,
-          {
-            type: "number",
-            className: "w-[72px] text-xs no-spinner",
-            name: "jump-to",
-            min: 1,
-            max: e,
-            required: !0
-          }
-        ),
-        /* @__PURE__ */ t(
-          "button",
-          {
-            type: "submit",
-            className: "text-xs text-blue-600 p-2 cursor-pointer",
-            children: "Go"
-          }
-        )
-      ]
-    }
-  );
+import { t as s } from "../../../../Input-DG3snJf_.js";
+import { Button as i } from "../../../Button/Button.js";
+import { Typography as p } from "../../../Typography/Typography.js";
+import { useTableContext as u } from "../../contexts/table.hook.js";
+import { useCallback as l, useRef as c } from "react";
+import { jsx as e, jsxs as f } from "react/jsx-runtime";
+var N = () => {
+  const r = c(null), { totalPages: t, handlePage: o } = u();
+  return /* @__PURE__ */ f("form", {
+    "aria-label": "footer-pagination",
+    ref: r,
+    onSubmit: l((a) => {
+      a.preventDefault();
+      const n = new FormData(a.currentTarget), m = Number(n.get("jump-to"));
+      o(((m < t ? m : t) || 1) - 1), r.current?.reset();
+    }, [o, t]),
+    className: "flex items-center gap-2",
+    noValidate: !0,
+    children: [
+      /* @__PURE__ */ e(p, {
+        component: "span",
+        className: "text-sm min-w-fit tracking-normal",
+        children: "Jump to"
+      }),
+      /* @__PURE__ */ e(s, {
+        type: "number",
+        className: "w-18 text-sm no-spinner",
+        name: "jump-to",
+        min: 1,
+        max: t,
+        required: !0,
+        autoComplete: "off"
+      }),
+      /* @__PURE__ */ e(i, {
+        variant: "link",
+        type: "submit",
+        className: "text-xs p-2 cursor-pointer",
+        children: "Go"
+      })
+    ]
+  });
 };
 export {
-  h as FormPaginate
+  N as FormPaginate
 };

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

@@ -1,81 +1,39 @@
-import { jsx as s, jsxs as a } from "react/jsx-runtime";
-import { f as u } from "../../../../index-Dx2grAuN.js";
-import { useCallback as i } from "react";
-import { cn as o } from "../../../../utils/index.js";
-import b from "../../assets/chevron-up.js";
-import g from "../../assets/chevron-down.js";
-import { useTableContext as S } from "../../contexts/table.hook.js";
-const y = ({
-  className: p,
-  classNameArrows: n,
-  classNameActiveArrows: l
-}) => {
-  const { table: c, onSorting: r } = S(), d = i(
-    (t) => r([{ id: t.id, desc: !1 }]),
-    [r]
-  ), x = i(
-    (t) => r([{ id: t.id, desc: !0 }]),
-    [r]
-  );
-  return /* @__PURE__ */ s(
-    "thead",
-    {
-      className: o(
-        "font-semibold uppercase text-slate-500 text-xs not-italic bg-slate-100 w-full relative block overflow-hidden [clip-path:inset(-1px_-1px_0px_-1px_round_8px_8px_0px_0px)]",
-        p
-      ),
-      children: c.getHeaderGroups().map(({ id: t, headers: f }) => /* @__PURE__ */ s("tr", { className: "table w-full table-fixed", children: f.map(({ id: m, column: e, getContext: h }) => /* @__PURE__ */ s(
-        "th",
-        {
-          scope: "col",
-          className: "px-4 py-3 text-left text-xs",
-          style: { width: e.columnDef.size },
-          children: /* @__PURE__ */ a("span", { className: "flex items-center gap-2 w-full", children: [
-            u(e.columnDef.header, h()),
-            e.getCanSort() && /* @__PURE__ */ a(
-              "div",
-              {
-                className: o(
-                  "flex flex-col text-slate-400 justify-center items-center gap-1",
-                  n
-                ),
-                role: "presentation",
-                children: [
-                  /* @__PURE__ */ s(
-                    b,
-                    {
-                      className: o(
-                        "w-2 h-2 cursor-pointer",
-                        {
-                          "text-blue-600": e.getIsSorted() === "asc"
-                        },
-                        l
-                      ),
-                      onClick: () => d(e)
-                    }
-                  ),
-                  /* @__PURE__ */ s(
-                    g,
-                    {
-                      className: o(
-                        "w-2 h-2 cursor-pointer",
-                        {
-                          "text-blue-600": e.getIsSorted() === "desc"
-                        },
-                        l
-                      ),
-                      onClick: () => x(e)
-                    }
-                  )
-                ]
-              }
-            )
-          ] })
-        },
-        m
-      )) }, t))
-    }
-  );
+import { t as r } from "../../../../utils-Cx-WzRZF.js";
+import { n as b } from "../../../../table.provider-9uUt5a-s.js";
+import { useTableContext as g } from "../../contexts/table.hook.js";
+import u from "../../assets/chevron-up.js";
+import k from "../../assets/chevron-down.js";
+import { useCallback as d } from "react";
+import { jsx as a, jsxs as l } from "react/jsx-runtime";
+var y = ({ className: n, classNameArrows: i, classNameActiveArrows: o }) => {
+  const { table: c, onSorting: s } = g(), m = d((t) => s([{
+    id: t.id,
+    desc: !1
+  }]), [s]), p = d((t) => s([{
+    id: t.id,
+    desc: !0
+  }]), [s]);
+  return /* @__PURE__ */ a("thead", {
+    className: r("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__ */ a("tr", { children: f.map(({ id: x, column: e, getContext: h }) => /* @__PURE__ */ a("th", {
+      scope: "col",
+      className: r("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__ */ l("span", {
+        className: "flex items-center gap-2 w-full",
+        children: [b(e.columnDef.header, h()), e.getCanSort() && /* @__PURE__ */ l("div", {
+          className: r("flex flex-col text-slate-400 justify-center items-center gap-1", i),
+          role: "presentation",
+          children: [/* @__PURE__ */ a(u, {
+            className: r("w-2 h-2 cursor-pointer", { "text-blue-600 dark:text-aurora-500": e.getIsSorted() === "asc" }, o),
+            onClick: () => m(e)
+          }), /* @__PURE__ */ a(k, {
+            className: r("w-2 h-2 cursor-pointer", { "text-blue-600 dark:text-aurora-500": e.getIsSorted() === "desc" }, o),
+            onClick: () => p(e)
+          })]
+        })]
+      })
+    }, x)) }, t))
+  });
 };
 export {
   y as Header

package/dist/components/VirtualizedTable/components/Pagination/Pagination.js

@@ -1,45 +1,32 @@
-import { jsxs as t, Fragment as c, jsx as e } from "react/jsx-runtime";
-import { DotPaginate as d } from "../DotPaginate/DotPaginate.js";
-import { DropdownPaginate as p } from "../DropdownPaginate/DropdownPaginate.js";
-import { FormPaginate as f } from "../FormPaginate/FormPaginate.js";
-import { cn as x } from "../../../../utils/index.js";
-import { useTableContext as u } from "../../contexts/table.hook.js";
-import { DEFAULT_PAGE_SIZE as g } from "../../constants/pagination.js";
-const F = ({
-  showTotalItems: a = !0,
-  showDropdownPagination: i = !0,
-  showDotPagination: n = !0,
-  showFormPagination: s = !0,
-  pageSizes: l,
-  classNamePagination: o
-}) => {
-  const { totalItems: r = -1 / 0, tableFetching: m } = u();
-  return r <= g || m ? null : /* @__PURE__ */ t(c, { children: [
-    /* @__PURE__ */ e(
-      "div",
-      {
-        className: x(
-          "bg-slate-50 border border-y-transparent border-x-slate-100 text-slate-500 text-xs not-italic py-2 px-6 rounded-b-lg shadow",
-          o
-        ),
-        children: /* @__PURE__ */ t("div", { className: "flex items-center justify-between", children: [
-          /* @__PURE__ */ t("div", { className: "flex items-center gap-6", children: [
-            r && a ? /* @__PURE__ */ t("span", { className: "text-slate-800", children: [
-              r,
-              " Results"
-            ] }) : null,
-            i && /* @__PURE__ */ e("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ e(p, { pageSizes: l }) })
-          ] }),
-          /* @__PURE__ */ t("div", { className: "flex items-center gap-8", children: [
-            n && /* @__PURE__ */ e(d, {}),
-            s && /* @__PURE__ */ e(f, {})
-          ] })
-        ] })
-      }
-    ),
-    /* @__PURE__ */ e("div", { className: "w-full min-h-[150px]" })
-  ] });
+import { t as f } from "../../../../utils-Cx-WzRZF.js";
+import { useTableContext as p } from "../../contexts/table.hook.js";
+import { isPaginationBarVisible as x } from "../../utils/pagination.js";
+import { DotPaginate as b } from "../DotPaginate/DotPaginate.js";
+import { DropdownPaginate as g } from "../DropdownPaginate/DropdownPaginate.js";
+import { FormPaginate as u } from "../FormPaginate/FormPaginate.js";
+import { Fragment as h, jsx as e, jsxs as t } from "react/jsx-runtime";
+var j = ({ showTotalItems: a = !0, showDropdownPagination: i = !0, showDotPagination: n = !0, showFormPagination: s = !0, pageSizes: l, classNamePagination: m, isLoading: o }) => {
+  const { totalItems: r = -1 / 0, tableFetching: d, isFirstLoad: c } = p();
+  return !x(r) || d || o ? null : /* @__PURE__ */ t(h, { children: [/* @__PURE__ */ e("div", {
+    className: f("bg-slate-50", "border", "border-y-transparent", "border-x-slate-100", "text-slate-500", "text-sm", "not-italic", "py-2", "px-6", "rounded-b-lg", "shadow", "dark:bg-metal-800", "dark:border-x-metal-700", "dark:border-b-metal-700", m, { "animate-in fade-in-10": !c }),
+    children: /* @__PURE__ */ t("div", {
+      className: "flex items-center justify-between",
+      children: [/* @__PURE__ */ t("div", {
+        className: "flex items-center gap-6",
+        children: [r && a ? /* @__PURE__ */ t("span", {
+          className: "text-slate-800 dark:text-metal-300",
+          children: [r, " Results"]
+        }) : null, i && /* @__PURE__ */ e("div", {
+          className: "flex items-center gap-2",
+          children: /* @__PURE__ */ e(g, { pageSizes: l })
+        })]
+      }), /* @__PURE__ */ t("div", {
+        className: "flex items-center gap-8",
+        children: [n && /* @__PURE__ */ e(b, {}), s && /* @__PURE__ */ e(u, {})]
+      })]
+    })
+  }), /* @__PURE__ */ e("div", { className: "w-full min-h-37.5" })] });
 };
 export {
-  F as Pagination
+  j as Pagination
 };

package/dist/components/VirtualizedTable/components/Skeleton/Skeleton.js

@@ -0,0 +1,43 @@
+import { t as l } from "../../../../utils-Cx-WzRZF.js";
+import { Button as m } from "../../../Button/Button.js";
+import { t as c } from "../../../../ellipsis-vertical-BBmhzIXn.js";
+import { useTableContext as h } from "../../contexts/table.hook.js";
+import { jsx as r } from "react/jsx-runtime";
+var N = ({ numberOfRows: i, table: o }) => {
+  const { tableFetching: n, tableLoading: b } = h(), t = Array.from({ length: i });
+  return /* @__PURE__ */ r("tbody", {
+    className: "text-slate-800 text-sm font-normal relative",
+    children: t.map((g, e) => {
+      const d = o.getAllColumns();
+      return /* @__PURE__ */ r("tr", {
+        className: l("border-b", "border-b-gray-200", "bg-transparent", "last:border-b-transparent"),
+        children: d.map((a, s) => a.id !== "actions" ? /* @__PURE__ */ r("td", {
+          className: l("px-4", "py-1", "bg-white", "dark:bg-metal-900", "dark:border-t", "dark:border-metal-700", "dark:first:border-l", "dark:last:border-r", "dark:[tr:last-child_&]:border-b", a.columnDef.meta?.className, {
+            "[tr:last-child_&:first-of-type]:rounded-bl-lg": e === t.length - 1 && s === 0,
+            "[tr:last-child_&:last-of-type]:rounded-br-lg": e === t.length - 1 && s === d.length - 1
+          }),
+          children: /* @__PURE__ */ r("div", {
+            className: "animate-in fade-in-0",
+            children: /* @__PURE__ */ r("div", { className: l("bg-gray-200", "dark:bg-metal-700", "animate-pulse", "rounded", "h-5", "w-full") })
+          })
+        }, `skeleton-${a.id}`) : /* @__PURE__ */ r("td", {
+          className: l("px-4", "py-1", "bg-white", "dark:bg-metal-900", "dark:border-t", "dark:border-metal-700", "dark:first:border-l", "dark:last:border-r", "dark:[tr:last-child_&]:border-b", a.columnDef.meta?.className, {
+            "[tr:last-child_&:first-of-type]:rounded-bl-lg": e === t.length - 1 && s === 0,
+            "[tr:last-child_&:last-of-type]:rounded-br-lg": e === t.length - 1 && s === d.length - 1
+          }),
+          children: /* @__PURE__ */ r(m, {
+            variant: "link",
+            shape: "circle",
+            size: "large",
+            disabled: !0,
+            "aria-hidden": "true",
+            children: /* @__PURE__ */ r(c, { className: l("w-5", "h-5", "text-slate-400", "dark:text-metal-700", { "text-gray-300 animate-pulse": n || b }) })
+          })
+        }, `skeleton-${a.id}`))
+      }, `skeleton-row-${e}`);
+    })
+  });
+};
+export {
+  N as Skeleton
+};