@konstructio/ui 0.1.2-alpha.12 → 0.1.2-alpha.120

package/dist/components/VirtualizedTable/components/DropdownPaginate/DropdownPaginate.js

@@ -1,34 +1,72 @@
-import { jsxs as i, jsx as a } from "react/jsx-runtime";
-import { useMemo as p, useCallback as l } from "react";
-import { Dropdown as c } from "../../../Dropdown/Dropdown.js";
-import { DEFAULT_PAGE_SIZES as g } from "../../constants/pagination.js";
-import { useTableContext as x } from "../../contexts/table.hook.js";
-const b = ({
-  pageSizes: n = g
-}) => {
-  const { pageSize: s, onPageSize: o, handlePage: t } = x(), r = p(
-    () => n.map(String).map((e) => ({ label: e, value: e })),
-    []
-  ), m = l(
-    (e) => {
-      o(Number(e)), t(0);
+import { t as o } from "../../../../utils-DnIJruo0.js";
+import { t as u } from "../../../../chevron-up-B8hiVgxZ.js";
+import { Typography as c } from "../../../Typography/Typography.js";
+import { a as v, i as b, r as w, t as P } from "../../../../dist-CQSCPpFc.js";
+import { listVariants as S } from "../../../Select/components/List/List.variants.js";
+import { listItemVariants as k } from "../../../Select/components/ListItem/ListItem.variants.js";
+import { selectVariants as N } from "../../../Select/Select.variants.js";
+import { DEFAULT_PAGE_SIZES as C } from "../../constants/pagination.js";
+import { useTableContext as y } from "../../contexts/table.hook.js";
+import { useState as z } from "react";
+import { jsx as e, jsxs as r } from "react/jsx-runtime";
+var _ = ({ pageSizes: d = C, isListPortal: f = !1, direction: s = "auto" }) => {
+  const { pageSize: i, onPageSize: g, handlePage: h } = y(), [l, n] = z(!1), p = (t) => {
+    g(Number(t)), h(0), n(!1);
+  }, m = /* @__PURE__ */ e(w, {
+    asChild: !0,
+    side: s === "up" ? "top" : "bottom",
+    avoidCollisions: s === "auto",
+    align: "start",
+    sideOffset: 4,
+    onOpenAutoFocus: (t) => {
+      t.preventDefault();
     },
-    [t, o]
-  );
-  return /* @__PURE__ */ i("div", { className: "flex items-center gap-2", children: [
-    /* @__PURE__ */ a("span", { children: "Show" }),
-    /* @__PURE__ */ a(
-      c,
-      {
-        className: "w-[88px] [&>div>p]:text-xs bg-white",
-        listItemClassName: "[&>p]:text-xs",
-        options: r,
-        value: s.toString(),
-        onChange: ({ target: e }) => m(e.value)
-      }
-    )
-  ] });
+    children: /* @__PURE__ */ e("ul", {
+      role: "listbox",
+      "aria-label": "Rows per page",
+      className: o(S(), "kvt-page-size-list", "static top-auto mt-0 z-50 w-(--radix-popover-trigger-width)"),
+      children: d.map((t) => {
+        const a = String(t);
+        return /* @__PURE__ */ e("li", {
+          role: "option",
+          "aria-selected": a === String(i),
+          tabIndex: 0,
+          className: o(k(), "dark:bg-metal-800"),
+          onClick: () => {
+            p(a);
+          },
+          onKeyDown: (x) => {
+            x.key === "Enter" && p(a);
+          },
+          children: /* @__PURE__ */ e(c, {
+            variant: "body2",
+            className: "text-sm dark:text-metal-50",
+            children: a
+          })
+        }, a);
+      })
+    })
+  });
+  return /* @__PURE__ */ r("div", {
+    className: "kvt-page-size flex items-center gap-2 dark:text-metal-300",
+    children: [/* @__PURE__ */ e("span", { children: "Show" }), /* @__PURE__ */ r(P, {
+      open: l,
+      onOpenChange: n,
+      children: [/* @__PURE__ */ r(v, {
+        "aria-label": "Rows per page",
+        className: o(N(), "w-22 bg-white"),
+        children: [/* @__PURE__ */ e(c, {
+          variant: "body2",
+          className: "flex-1 text-left text-sm text-metal-800 dark:text-metal-50",
+          children: i
+        }), /* @__PURE__ */ e(u, {
+          "data-state": l ? "open" : "closed",
+          className: "w-4 h-4 text-zinc-500 transition-all duration-100 data-[state=open]:rotate-0 data-[state=closed]:rotate-180 select-none"
+        })]
+      }), f ? /* @__PURE__ */ e(b, { children: m }) : m]
+    })]
+  });
 };
 export {
-  b as DropdownPaginate
+  _ as DropdownPaginate
 };

package/dist/components/VirtualizedTable/components/EmptyResults/EmptyResults.js

@@ -0,0 +1,30 @@
+import { Button as n } from "../../../Button/Button.js";
+import { useTableContext as l } from "../../contexts/table.hook.js";
+import { sendResetFiltersEvent as p } from "../../events/filters/filters.js";
+import { EmptyState as c } from "../EmptyState/EmptyState.js";
+import { Fragment as d, jsx as e, jsxs as u } from "react/jsx-runtime";
+var f = ({ className: r, description: s = "Filters may be too restrictive.", image: o, resetLabel: a = "Reset filters", title: i = "No results", onResetFilters: t }) => {
+  const { tableId: m } = l();
+  return /* @__PURE__ */ e(c, {
+    className: r,
+    image: o,
+    title: i,
+    description: /* @__PURE__ */ u(d, { children: [s, /* @__PURE__ */ e(n, {
+      variant: "link",
+      appearance: "compact",
+      className: "p-0",
+      onClick: () => {
+        if (t) {
+          t();
+          return;
+        }
+        p(m);
+      },
+      children: a
+    })] })
+  });
+};
+f.displayName = "KonstructVirtualizedTableEmptyResults";
+export {
+  f as EmptyResults
+};

package/dist/components/VirtualizedTable/components/EmptyState/EmptyState.js

@@ -0,0 +1,32 @@
+import { t as c } from "../../../../utils-DnIJruo0.js";
+import { Typography as l } from "../../../Typography/Typography.js";
+import { jsx as e, jsxs as i } from "react/jsx-runtime";
+var n = ({ action: t, className: s, description: a, image: r, title: m }) => /* @__PURE__ */ i("div", {
+  className: c("flex flex-col items-center gap-4 px-4 py-20 text-center", s),
+  children: [
+    r && /* @__PURE__ */ e("div", {
+      className: "flex items-center justify-center",
+      children: r
+    }),
+    /* @__PURE__ */ e(l, {
+      variant: "subtitle3",
+      component: "h2",
+      className: "text-slate-800 dark:text-metal-50",
+      children: m
+    }),
+    a && /* @__PURE__ */ e(l, {
+      variant: "body2",
+      component: "p",
+      className: "flex flex-wrap items-center justify-center gap-1 text-slate-500 dark:text-metal-300",
+      children: a
+    }),
+    t && /* @__PURE__ */ e("div", {
+      className: "pt-2",
+      children: t
+    })
+  ]
+});
+n.displayName = "KonstructVirtualizedTableEmptyState";
+export {
+  n as EmptyState
+};

package/dist/components/VirtualizedTable/components/ErrorState/ErrorState.js

@@ -0,0 +1,35 @@
+import { AlertOutlineIcon as s } from "../../../../assets/icons/components/AlertOutline.js";
+import { Button as l } from "../../../Button/Button.js";
+import { useTableContext as d } from "../../contexts/table.hook.js";
+import { sendRefreshEvent as p } from "../../events/refresh/refresh.js";
+import { EmptyState as c } from "../EmptyState/EmptyState.js";
+import { Fragment as f, jsx as e, jsxs as h } from "react/jsx-runtime";
+var u = ({ className: t, description: a, icon: o = /* @__PURE__ */ e(s, {
+  size: 40,
+  className: "text-red-600 dark:text-red-400",
+  "aria-hidden": "true"
+}), retryLabel: n = "Refresh", title: i = "Something went wrong", onRetry: r }) => {
+  const { tableId: m } = d();
+  return /* @__PURE__ */ e(c, {
+    className: t,
+    image: o,
+    title: i,
+    description: /* @__PURE__ */ h(f, { children: [a, /* @__PURE__ */ e(l, {
+      variant: "link",
+      appearance: "compact",
+      className: "p-0",
+      onClick: () => {
+        if (r) {
+          r();
+          return;
+        }
+        p(m);
+      },
+      children: n
+    })] })
+  });
+};
+u.displayName = "KonstructVirtualizedTableErrorState";
+export {
+  u as ErrorState
+};

package/dist/components/VirtualizedTable/components/ExpandableRow/ExpandableRow.js

@@ -0,0 +1,31 @@
+import { t as a } from "../../../../utils-DnIJruo0.js";
+import { jsx as d } from "react/jsx-runtime";
+var n = ({ children: o, classNameExpandedCell: b, classNameExpandedContent: t, classNameExpandedRow: l, colSpan: m, id: i, isExpanded: r, isLastRow: e }) => /* @__PURE__ */ d("tr", {
+  className: a("kvt-expanded-row h-0 leading-0", l),
+  "data-expanded-row-id": i,
+  children: /* @__PURE__ */ d("td", {
+    colSpan: m,
+    className: a("p-0 bg-white dark:bg-metal-900 dark:border-x dark:border-metal-700", { "rounded-b-lg": e }, {
+      "border-t border-b border-gray-200 dark:border-t-metal-700": r && e,
+      "border-t border-b border-gray-200 dark:border-t-metal-700 dark:border-b-0": r && !e,
+      "border-y-0": !r && !e,
+      "border-t-0 border-b border-b-gray-200 dark:border-b-metal-700": !r && e
+    }),
+    children: /* @__PURE__ */ d("div", {
+      className: a("grid transition-[grid-template-rows] duration-300 ease-in-out", {
+        "grid-rows-[1fr]": r,
+        "grid-rows-[0fr]": !r
+      }, t),
+      children: /* @__PURE__ */ d("div", {
+        className: "overflow-hidden",
+        children: /* @__PURE__ */ d("div", {
+          className: a("px-4 py-3", b),
+          children: o
+        })
+      })
+    })
+  })
+});
+export {
+  n as ExpandableRow
+};

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

@@ -1,88 +1,129 @@
-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 { 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 { o as z } from "../../../../rolldown-runtime-B28h4lGi.js";
+import { t as V } from "../../../../Input-O2bqyJKW.js";
+import { t as $ } from "../../../../utils-DnIJruo0.js";
+import { Button as G } from "../../../Button/Button.js";
+import { resetEvent as H } from "../../../Filter/events/index.js";
+import { Filter as o } from "../../../Filter/Filter.js";
+import { t as J } from "../../../../debounce-DhCY9mXz.js";
+import { useTableContext as K } from "../../contexts/table.hook.js";
+import { t as Q } from "../../../../events.types-BG1Uh8i6.js";
+import { getTableId as U } from "../../utils/get-table-id.js";
+import { useEffect as W, useMemo as X, useRef as Y } from "react";
+import { jsx as n, jsxs as d } from "react/jsx-runtime";
+var Z = /* @__PURE__ */ z(J(), 1), de = ({ id: F, actions: b, filters: v, multiSelectFilter: w, placeholder: S, showFilterInput: x = !0, showResetButton: R = !0, resetButtonClassName: D, closeOnApply: T = !0 }) => {
+  const l = Y(null), c = U(F), { termOfSearch: k, multiselectSelected: M, dateFilters: E, dateRangeFilters: _, timeFilters: j, onChangeTermOfSearch: m, onSelectMultiselect: A, onSelectDateFilter: I, onSelectDateRangeFilter: i, onSelectTimeFilter: O } = K(), B = [...v ?? w?.map((e) => ({
+    ...e,
+    type: "badgeMultiSelect"
+  })) ?? [], ...b ?? []], h = (e, t) => {
+    A(e, t.map((r) => r.id));
+  }, P = () => {
+    m(""), l.current && (l.current.value = "");
+  };
+  W(() => {
+    const e = new AbortController();
+    return document.addEventListener(Q.RESET_FILTERS, (t) => {
+      const { detail: r } = t;
+      r.tableId === c && (m(""), l.current && (l.current.value = ""), H(c));
+    }, { signal: e.signal }), () => e.abort();
+  }, [c, m]);
+  const g = X(() => (0, Z.default)((e) => {
+    m(e.target.value);
+  }, 500), [m]), N = !!k || Object.values(M ?? {}).flat().length > 0 || Object.values(E ?? {}).some(Boolean) || Object.values(_ ?? {}).some(Boolean) || Object.values(j ?? {}).some(Boolean), f = (e) => {
+    if (e.type === "action") {
+      const { label: a, appearance: y = "compact", variant: p = "secondary", leftIcon: u, rightIcon: L, type: C, ...q } = e;
+      return /* @__PURE__ */ d(G, {
+        appearance: y,
+        variant: p,
+        ...q,
+        children: [
+          u,
+          a,
+          L
+        ]
+      }, a);
+    }
+    const { key: t, label: r, position: s = "right" } = e;
+    if (e.type === "textMultiSelect") return /* @__PURE__ */ n(o.TextMultiSelect, {
+      label: r,
+      position: s,
+      options: e.options,
+      onApply: (a) => {
+        h(t, a);
       }
-    ),
-    /* @__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);
+    if (e.type === "date") return /* @__PURE__ */ n(o.DateFilterDropdown, {
+      label: r,
+      position: s,
+      countryCode: e.countryCode,
+      onApply: (a) => {
+        I(t, a);
+      }
+    }, t);
+    if (e.type === "dateRange") return /* @__PURE__ */ n(o.DateRangeFilterDropdown, {
+      label: r,
+      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) => {
+        i(t, a);
+      },
+      onRangeChange: e.onRangeChange
+    }, t);
+    if (e.type === "customDateRange") {
+      const { key: a, type: y, ...p } = e;
+      return /* @__PURE__ */ n(o.CustomDateRangeFilterDropdown, {
+        ...p,
+        position: s,
+        onApply: (u) => {
+          i(t, u);
         }
-      )
-    ] })
-  ] });
+      }, t);
+    }
+    return e.type === "time" ? /* @__PURE__ */ n(o.TimeFilterDropdown, {
+      label: r,
+      position: s,
+      format: e.format,
+      presets: e.presets,
+      showTimePicker: e.showTimePicker,
+      onApply: (a) => {
+        O(t, a);
+      }
+    }, t) : /* @__PURE__ */ n(o.BadgeMultiSelect, {
+      label: r,
+      position: s,
+      options: e.options,
+      onApply: (a) => {
+        h(t, a);
+      }
+    }, t);
+  };
+  return /* @__PURE__ */ d("div", {
+    className: "kvt-filter w-full flex items-center justify-end gap-y-4 pb-6 max-md:flex-wrap",
+    children: [x && /* @__PURE__ */ n(V, {
+      ref: l,
+      placeholder: S,
+      isSearch: !0,
+      autoComplete: "false",
+      className: "kvt-search w-72 max-md:w-full",
+      inputMode: "search",
+      onChange: g
+    }), /* @__PURE__ */ d(o, {
+      className: "kvt-filter-actions max-md:w-full max-md:flex-wrap",
+      closeOnApply: T,
+      resetScope: c,
+      children: [B.map(f), R && /* @__PURE__ */ n(o.ResetButton, {
+        className: $("select-none max-md:ml-auto", D),
+        disabled: !N,
+        onClick: P
+      })]
+    })]
+  });
 };
 export {
-  $ as Filter
+  de 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();
+import { t as s } from "../../../../Input-O2bqyJKW.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 { useRef as l } from "react";
+import { jsx as e, jsxs as c } from "react/jsx-runtime";
+var N = () => {
+  const r = l(null), { totalPages: t, handlePage: m } = u();
+  return /* @__PURE__ */ c("form", {
+    "aria-label": "footer-pagination",
+    ref: r,
+    onSubmit: (o) => {
+      o.preventDefault();
+      const n = new FormData(o.currentTarget), a = Number(n.get("jump-to"));
+      m(((a < t ? a : t) || 1) - 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"
-          }
-        )
-      ]
-    }
-  );
+    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
 };