@konstructio/ui 0.1.2-alpha.22 → 0.1.2-alpha.24

package/dist/components/Dropdown/contexts/dropdown.context.js

@@ -4,6 +4,22 @@ const t = e({
   isOpen: !1,
   searchTerm: "",
   value: void 0,
+  canFilter: !0,
+  canContinueFetching: !0,
+  page: 1,
+  options: [],
+  setOptions() {
+    throw new Error("setOptions function must be overridden");
+  },
+  setPage() {
+    throw new Error("setPage function must be overridden");
+  },
+  setCanContinueFetching() {
+    throw new Error("setCanContinueFetching function must be overridden");
+  },
+  setCanFilter() {
+    throw new Error("setCanFilter function must be overridden");
+  },
   setSearchTerm() {
     throw new Error("setSearchTerm function must be overridden");
   },

package/dist/components/Dropdown/contexts/dropdown.provider.js

@@ -1,30 +1,53 @@
-import { jsx as f } from "react/jsx-runtime";
-import { useRef as p, useState as d, useCallback as v } from "react";
-import { DropdownContext as S } from "./dropdown.context.js";
-import { useToggle as b } from "../../../hooks/useToggle.js";
-const D = ({ children: s, value: n, name: e, highlightSearch: c = !1, onChange: r, onBlur: t }) => {
-  const l = p(c), [h, i] = b(!1), [m, g] = d(""), u = v(
-    (o, a) => {
-      a?.current && (a.current.value = o), r?.({ target: { value: o, name: e ?? "" } }), t?.();
+import { jsx as w } from "react/jsx-runtime";
+import { useState as e, useRef as A, useCallback as u, useEffect as I } from "react";
+import { DropdownContext as O } from "./dropdown.context.js";
+import { useToggle as _ } from "../../../hooks/useToggle.js";
+const s = 1, N = ({
+  children: p,
+  value: m,
+  name: c,
+  highlightSearch: f = !1,
+  options: r,
+  onChange: a,
+  onBlur: g
+}) => {
+  const [d, i] = e(r), C = A(f), [T, l] = _(!1), [E, F] = e(""), [v, P] = e(!0), [S, n] = e(!0), [b, o] = e(s), x = u(
+    (t, h) => {
+      h?.current && (h.current.value = t), n(!0), o(s), a?.({ target: { value: t, name: c ?? "" } }), g?.();
     },
-    [r, e, t]
+    [a, c, g]
+  ), D = u(
+    (t) => {
+      l(t), n(!0), o(s);
+    },
+    [l]
   );
-  return /* @__PURE__ */ f(
-    S.Provider,
+  return I(() => {
+    i(r);
+  }, [r.length]), /* @__PURE__ */ w(
+    O.Provider,
     {
       value: {
-        highlightSearchEnabled: l.current,
-        isOpen: h,
-        searchTerm: m,
-        value: n,
-        setSearchTerm: g,
-        setValue: u,
-        toggleOpen: i
+        highlightSearchEnabled: C.current,
+        isOpen: T,
+        searchTerm: E,
+        value: m,
+        canFilter: v,
+        canContinueFetching: S,
+        page: b,
+        options: d,
+        setOptions: i,
+        setPage: o,
+        setCanContinueFetching: n,
+        setCanFilter: P,
+        setSearchTerm: F,
+        setValue: x,
+        toggleOpen: D
       },
-      children: s
+      children: p
     }
   );
 };
 export {
-  D as DropdownProvider
+  N as DropdownProvider
 };

package/dist/components/Dropdown/hooks/useDropdown.js

@@ -1,20 +1,22 @@
-import { useRef as c, useEffect as u, useCallback as g } from "react";
-import { useDropdownContext as m } from "../contexts/dropdown.hook.js";
-const b = ({
-  ulRef: i,
-  inputRef: l,
-  disabled: d
+import { useRef as m, useEffect as l, useCallback as b } from "react";
+import { useDropdownContext as L } from "../contexts/dropdown.hook.js";
+const y = ({
+  ulRef: f,
+  inputRef: t,
+  disabled: w,
+  internalValue: i,
+  onBlur: g
 }) => {
-  const o = c(null), t = c(null), { toggleOpen: n } = m();
-  u(() => {
-    const e = new AbortController(), s = (a) => {
-      a.key === "Escape" && n(!1);
-    }, r = (a) => {
-      o.current?.contains(a.target) || n(!1);
+  const r = m(null), a = m(null), { value: c, setSearchTerm: v, setCanFilter: u, toggleOpen: n } = L();
+  l(() => {
+    const e = new AbortController(), o = (d) => {
+      d.key === "Escape" && n(!1);
+    }, s = (d) => {
+      r.current?.contains(d.target) || n(!1);
     };
-    return document.addEventListener("keydown", s, {
+    return document.addEventListener("keydown", o, {
       signal: e.signal
-    }), document.addEventListener("mousedown", r, {
+    }), document.addEventListener("mousedown", s, {
       signal: e.signal
     }), document.addEventListener(
       "visibilitychange",
@@ -24,39 +26,78 @@ const b = ({
       {
         signal: e.signal
       }
-    ), t.current?.addEventListener(
-      "focus",
+    ), a.current?.addEventListener(
+      "focusin",
       () => {
-        d || n(!0);
+        w || n(!0);
       },
       { signal: e.signal }
     ), () => {
       e.abort();
     };
-  }, [n, o]), u(() => {
+  }, [n, r]), l(() => {
     const e = new AbortController();
-    return t.current?.addEventListener(
+    return a.current?.addEventListener(
       "keydown",
-      (s) => {
-        if (s.key === "ArrowDown") {
-          const r = i.current?.querySelector("li");
-          r && r.focus();
+      (o) => {
+        if (o.key === "ArrowDown") {
+          const s = f.current?.querySelector("li");
+          s && s.focus();
         }
       },
       { signal: e.signal }
     ), () => {
       e.abort();
     };
-  }, [t, i]);
-  const f = g(() => {
-    n(!0), requestAnimationFrame(() => l?.current?.focus());
-  }, [l, n]);
+  }, [a, f]), l(() => {
+    const e = new AbortController();
+    return t?.current?.addEventListener(
+      "focusin",
+      () => {
+        v(i?.value ?? ""), u(!1);
+      },
+      { signal: e.signal }
+    ), t?.current?.addEventListener(
+      "focusout",
+      () => {
+        u(!0);
+      },
+      { signal: e.signal }
+    ), a.current?.addEventListener(
+      "focus",
+      () => {
+        u(!1);
+      },
+      { signal: e.signal }
+    ), r.current?.addEventListener(
+      "focusout",
+      (o) => {
+        r.current?.contains(o.relatedTarget) || n(!1);
+      },
+      { signal: e.signal }
+    ), () => {
+      e.abort();
+    };
+  }, [c]), l(() => {
+    t?.current && (t.current.value = c && i?.value || "");
+  }, [i, c]), l(() => {
+    const e = new AbortController();
+    return r.current?.addEventListener("focusout", (o) => {
+      const s = o.relatedTarget;
+      (!s || !r.current?.contains(s)) && (t?.current?.value || g?.());
+    }), () => {
+      e.abort();
+    };
+  }, [n, r, v, g, c]);
+  const E = b(() => {
+    n(!0), requestAnimationFrame(() => t?.current?.focus());
+  }, [t, n]);
   return {
-    wrapperRef: o,
-    wrapperInputRef: t,
-    handleOpen: f
+    wrapperRef: r,
+    wrapperInputRef: a,
+    handleOpen: E
   };
 };
 export {
-  b as useDropdown
+  y as useDropdown
 };

package/dist/components/Dropdown/hooks/useNavigationList.js

@@ -1,62 +1,50 @@
-import { useRef as g, useEffect as i } from "react";
-import { useDropdownContext as d } from "../contexts/dropdown.hook.js";
-const w = ({
-  inputRef: s,
-  searchable: l,
-  ulRef: t,
-  wrapperInputRef: u,
-  wrapperRef: a
+import { useRef as g, useEffect as a } from "react";
+import { useDropdownContext as k } from "../contexts/dropdown.hook.js";
+const A = ({
+  searchable: o,
+  ulRef: n,
+  wrapperInputRef: e,
+  filteredOptions: f
 }) => {
-  const r = g(0), { isOpen: f } = d();
-  i(() => {
-    const c = t.current?.querySelectorAll("li") ?? [], e = Array.from(c).filter(
-      (n) => n.getAttribute("data-action") !== "true"
-    ), o = new AbortController(), m = () => {
-      r.current < e.length - 1 ? (r.current = r.current + 1, e[r.current].focus()) : (r.current = 0, e[0].focus());
-    }, b = () => {
-      r.current > 0 ? (r.current = r.current - 1, e[r.current].focus()) : (r.current = 0, s?.current && l ? s.current.focus() : u.current?.focus());
+  const r = g(0), { isOpen: s } = k();
+  a(() => {
+    const m = n.current?.querySelectorAll("li") ?? [], t = Array.from(m).filter(
+      (c) => c.getAttribute("data-action") !== "true"
+    ), u = new AbortController(), i = () => {
+      r.current < t.length - 1 ? (r.current = r.current + 1, t[r.current].focus()) : (r.current = 0, t[0].focus());
+    }, l = () => {
+      r.current > 0 ? (r.current = r.current - 1, t[r.current].focus()) : (r.current = 0, e?.current && o ? e.current.querySelector("input")?.focus() : e.current?.focus());
     };
-    return t.current?.addEventListener(
+    return n.current?.addEventListener(
       "keydown",
-      (n) => {
-        switch (n.preventDefault(), n.key) {
+      (c) => {
+        switch (c.preventDefault(), c.key) {
           case "ArrowDown": {
-            m();
+            i();
             break;
           }
           case "Tab": {
-            n.shiftKey ? b() : m();
+            c.shiftKey ? l() : i();
             break;
           }
           case "ArrowUp": {
-            r.current === 0 ? u.current?.focus() : b();
+            r.current === 0 ? e.current?.focus() : l();
             break;
           }
           case "Enter": {
-            e[r.current]?.click();
+            t[r.current]?.click();
             break;
           }
         }
       },
-      { signal: o.signal }
+      { signal: u.signal }
     ), () => {
-      o.abort();
+      u.abort();
     };
-  }, [t, r, u, s, l]), i(() => {
-    const c = new AbortController();
-    return a.current?.addEventListener(
-      "mouseenter",
-      () => {
-        (t.current?.querySelectorAll("li") ?? []).forEach((o) => o.blur());
-      },
-      { signal: c.signal }
-    ), () => {
-      c.abort();
-    };
-  }, [t, a]), i(() => {
-    f || (r.current = 0);
-  }, [f]);
+  }, [n, r, e, o, f.length]), a(() => {
+    s || (r.current = 0);
+  }, [s]);
 };
 export {
-  w as useNavigationUlList
+  A as useNavigationUlList
 };

package/dist/components/VirtualizedTable/VirtualizedTable.js

@@ -4,12 +4,12 @@ import { cn as c } from "../../utils/index.js";
 import { TableProvider as K } from "./contexts/table.provider.js";
 import { Filter as M } from "./components/Filter/Filter.js";
 import { WrapperBody as W } from "./components/WrapperBody/WrapperBody.js";
-import { Header as g } from "./components/Header/Header.js";
-import { Body as k } from "./components/Body/Body.js";
-import { Pagination as q } from "./components/Pagination/Pagination.js";
-import { TruncateText as C } from "./components/TruncateText/TruncateText.js";
-import { Actions as F } from "./components/Actions/Actions.js";
-const G = ({
+import { Header as k } from "./components/Header/Header.js";
+import { Body as q } from "./components/Body/Body.js";
+import { Pagination as C } from "./components/Pagination/Pagination.js";
+import { TruncateText as F } from "./components/TruncateText/TruncateText.js";
+import { Actions as G } from "./components/Actions/Actions.js";
+const J = ({
   id: n,
   ariaLabel: f,
   columns: p,
@@ -26,8 +26,8 @@ const G = ({
   queryOptions: z,
   // Pagination
   showPagination: B,
-  showTotalItems: a,
-  showDropdownPagination: t,
+  showTotalItems: t,
+  showDropdownPagination: a,
   showDotPagination: l,
   showFormPagination: m,
   pageSizes: V,
@@ -41,8 +41,8 @@ const G = ({
 }) => {
   const e = I(
     () => B || [
-      a,
       t,
+      a,
       l,
       m
     ].some(Boolean),
@@ -82,37 +82,38 @@ const G = ({
                 "aria-label": f,
                 children: [
                   /* @__PURE__ */ r(
-                    g,
+                    k,
                     {
                       className: N,
                       classNameArrows: x,
                       classNameActiveArrows: T
                     }
                   ),
-                  /* @__PURE__ */ r(k, { isLoading: o })
+                  /* @__PURE__ */ r(q, { isLoading: o, showPagination: e })
                 ]
               }
             )
           }
         ),
         e && /* @__PURE__ */ r(
-          q,
+          C,
           {
-            showTotalItems: a,
-            showDropdownPagination: t,
+            showTotalItems: t,
+            showDropdownPagination: a,
             showDotPagination: l,
             showFormPagination: m,
-            pageSizes: V
+            pageSizes: V,
+            isLoading: o
           }
         )
       ] })
     }
   );
-}, i = G;
+}, i = J;
 i.displayName = "KonstructVirtualizedTable";
-i.TruncateText = C;
-i.Actions = F;
+i.TruncateText = F;
+i.Actions = G;
 export {
-  C as TruncateText,
+  F as TruncateText,
   i as VirtualizedTable
 };

package/dist/components/VirtualizedTable/components/Body/Body.js

@@ -1,40 +1,48 @@
-import { jsx as e } from "react/jsx-runtime";
-import { f } from "../../../../index-CSWGJT-v.js";
-import { Skeleton as p } from "../Skeleton/Skeleton.js";
-import { cn as m } from "../../../../utils/index.js";
-import { useTableContext as u } from "../../contexts/table.hook.js";
-const y = ({
-  isLoading: s
+import { jsx as t } from "react/jsx-runtime";
+import { f as x } from "../../../../index-CSWGJT-v.js";
+import { Skeleton as y } from "../Skeleton/Skeleton.js";
+import { cn as b } from "../../../../utils/index.js";
+import { useTableContext as N } from "../../contexts/table.hook.js";
+const j = ({
+  isLoading: d,
+  showPagination: a
 }) => {
-  const { table: r, pageSize: l, tableFetching: n } = u();
-  return s || n ? /* @__PURE__ */ e(p, { numberOfRows: l, table: r }) : /* @__PURE__ */ e("tbody", { className: "text-slate-800 text-sm font-normal relative", children: r.getRowModel().rows.map(({ id: a, original: i, getVisibleCells: c }) => {
-    const { meta: o = {} } = i;
-    return /* @__PURE__ */ e(
+  const { table: o, pageSize: i, tableFetching: f } = N();
+  if (d || f)
+    return /* @__PURE__ */ t(y, { numberOfRows: i, table: o });
+  const e = o.getRowModel().rows ?? [];
+  return /* @__PURE__ */ t("tbody", { className: "text-slate-800 text-sm font-normal relative", children: e.map(({ id: s, original: p, getVisibleCells: u }, l) => {
+    const { meta: n = {} } = p, m = u();
+    return /* @__PURE__ */ t(
       "tr",
       {
-        className: m(
-          "border-b border-b-gray-200 bg-white last:border-b-transparent",
-          o.className
+        className: b(
+          "border-b border-b-gray-200 last:border-b-transparent bg-transparent",
+          n.className
         ),
-        "data-row-id": a,
-        ...o.attributes ?? {},
-        children: c().map(({ id: b, column: t, getContext: d }) => /* @__PURE__ */ e(
+        "data-row-id": s,
+        ...n.attributes ?? {},
+        children: m.map(({ id: g, column: r, getContext: h }, c) => /* @__PURE__ */ t(
           "td",
           {
-            className: m(
-              "px-4 py-1 text-sm",
-              t.columnDef.meta?.className
+            className: b(
+              "px-4 py-1 text-sm bg-white",
+              r.columnDef.meta?.className,
+              {
+                "[tr:last-child_&:first-of-type]:rounded-bl-lg": l === e.length - 1 && c === 0 || !a,
+                "[tr:last-child_&:last-of-type]:rounded-br-lg": l === e.length - 1 && c === m.length - 1 || !a
+              }
             ),
-            ...t.columnDef.meta?.attributes ?? {},
-            children: f(t.columnDef.cell, d())
+            ...r.columnDef.meta?.attributes ?? {},
+            children: x(r.columnDef.cell, h())
           },
-          b
+          g
         ))
       },
-      a
+      s
     );
   }) });
 };
 export {
-  y as Body
+  j as Body
 };

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

@@ -1,32 +1,33 @@
-import { jsxs as t, Fragment as d, jsx as e } from "react/jsx-runtime";
-import { DotPaginate as p } from "../DotPaginate/DotPaginate.js";
-import { DropdownPaginate as f } from "../DropdownPaginate/DropdownPaginate.js";
-import { FormPaginate as x } from "../FormPaginate/FormPaginate.js";
-import { cn as u } from "../../../../utils/index.js";
-import { useTableContext as g } from "../../contexts/table.hook.js";
-import { DEFAULT_PAGE_SIZE as h } from "../../constants/pagination.js";
-const j = ({
+import { jsxs as t, Fragment as p, jsx as e } from "react/jsx-runtime";
+import { DotPaginate as f } from "../DotPaginate/DotPaginate.js";
+import { DropdownPaginate as x } from "../DropdownPaginate/DropdownPaginate.js";
+import { FormPaginate as u } from "../FormPaginate/FormPaginate.js";
+import { cn as g } from "../../../../utils/index.js";
+import { useTableContext as h } from "../../contexts/table.hook.js";
+import { DEFAULT_PAGE_SIZE as b } from "../../constants/pagination.js";
+const D = ({
   showTotalItems: a = !0,
   showDropdownPagination: i = !0,
   showDotPagination: n = !0,
   showFormPagination: s = !0,
   pageSizes: l,
-  classNamePagination: o
+  classNamePagination: o,
+  isLoading: m
 }) => {
   const {
     totalItems: r = -1 / 0,
-    tableFetching: m,
-    isFirstLoad: c
-  } = g();
-  return r <= h || m ? null : /* @__PURE__ */ t(d, { children: [
+    tableFetching: c,
+    isFirstLoad: d
+  } = h();
+  return r <= b || c || m ? null : /* @__PURE__ */ t(p, { children: [
     /* @__PURE__ */ e(
       "div",
       {
-        className: u(
+        className: g(
           "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,
           {
-            "animate-in fade-in-10": !c
+            "animate-in fade-in-10": !d
           }
         ),
         children: /* @__PURE__ */ t("div", { className: "flex items-center justify-between", children: [
@@ -35,11 +36,11 @@ const j = ({
               r,
               " Results"
             ] }) : null,
-            i && /* @__PURE__ */ e("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ e(f, { pageSizes: l }) })
+            i && /* @__PURE__ */ e("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ e(x, { pageSizes: l }) })
           ] }),
           /* @__PURE__ */ t("div", { className: "flex items-center gap-8", children: [
-            n && /* @__PURE__ */ e(p, {}),
-            s && /* @__PURE__ */ e(x, {})
+            n && /* @__PURE__ */ e(f, {}),
+            s && /* @__PURE__ */ e(u, {})
           ] })
         ] })
       }
@@ -48,5 +49,5 @@ const j = ({
   ] });
 };
 export {
-  j as Pagination
+  D as Pagination
 };

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

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