@konstructio/ui 0.1.2-alpha.98 → 0.1.3

package/dist/components/VirtualizedTable/components/Actions/components/PortalActions/hooks/use-menu-interactions/use-menu-interactions.js

@@ -0,0 +1,78 @@
+import "../../constants/index.js";
+import { useCallback as r, useEffect as p, useLayoutEffect as b, useRef as T } from "react";
+var _ = ({ isOpen: l, menuRef: d, openOnHover: c, triggerRef: f, setIsOpen: n }) => {
+  const u = T(void 0), g = T(null), m = T(!1), h = r(() => {
+    clearTimeout(u.current), n(!0);
+  }, [n]), o = r(() => {
+    clearTimeout(u.current), n(!1);
+  }, [n]), y = r(() => {
+    m.current = !0, o();
+  }, [o]), w = r(() => {
+    clearTimeout(u.current), u.current = setTimeout(() => {
+      n(!1);
+    }, 100);
+  }, [n]), L = r((t) => {
+    !c || m.current || t.pointerType !== "mouse" || h();
+  }, [h, c]), M = r((t) => {
+    !c || t.pointerType !== "mouse" || w();
+  }, [c, w]), P = r(() => {
+    m.current = !1;
+  }, []), v = r((t) => {
+    g.current = t.pointerType;
+  }, []), C = r(() => {
+    const t = g.current;
+    if (g.current = null, m.current = !1, clearTimeout(u.current), c && t === "mouse") {
+      n(!0);
+      return;
+    }
+    n((e) => !e);
+  }, [c, n]);
+  p(() => () => {
+    clearTimeout(u.current);
+  }, []);
+  const s = r(() => {
+    const t = f.current, e = d.current;
+    if (!t || !e) return;
+    const i = t.getBoundingClientRect(), a = i.bottom + 4 + e.offsetHeight <= window.innerHeight ? i.bottom + 4 : i.top - 4 - e.offsetHeight;
+    e.style.top = `${Math.round(Math.max(a, 4))}px`, e.style.left = `${Math.round(Math.max(i.right - e.offsetWidth, 4))}px`;
+  }, [d, f]);
+  return b(() => {
+    l && s();
+  }, [l, s]), p(() => {
+    if (!l) return;
+    const t = new AbortController(), e = (a) => {
+      const E = a.target;
+      f.current?.contains(E) || d.current?.contains(E) || o();
+    }, i = (a) => {
+      a.key === "Escape" && o();
+    };
+    return document.addEventListener("pointerdown", e, { signal: t.signal }), document.addEventListener("keydown", i, { signal: t.signal }), document.addEventListener("scroll", s, {
+      signal: t.signal,
+      capture: !0,
+      passive: !0
+    }), window.addEventListener("resize", s, {
+      signal: t.signal,
+      passive: !0
+    }), window.addEventListener("blur", o, { signal: t.signal }), () => {
+      t.abort();
+    };
+  }, [
+    l,
+    d,
+    f,
+    o,
+    s
+  ]), {
+    closeMenu: o,
+    handlePointerEnter: L,
+    handlePointerLeave: M,
+    handleTriggerClick: C,
+    handleTriggerPointerDown: v,
+    handleButtonPointerLeave: P,
+    openMenu: h,
+    selectAndClose: y
+  };
+};
+export {
+  _ as useMenuInteractions
+};

package/dist/components/VirtualizedTable/components/Actions/components/PortalActions/hooks/use-menu-keyboard-navigation/use-menu-keyboard-navigation.js

@@ -0,0 +1,56 @@
+import { useCallback as n, useLayoutEffect as m, useRef as d } from "react";
+var b = ({ buttonRef: i, isOpen: a, menuRef: y, closeMenu: D, openMenu: o }) => {
+  const c = d(null), s = n(() => Array.from(y.current?.querySelectorAll('[role="menuitem"]') ?? []), [y]), r = n((e) => {
+    const t = s();
+    t.length !== 0 && t[(e + t.length) % t.length]?.focus();
+  }, [s]), l = n(() => {
+    D(), i.current?.focus();
+  }, [i, D]);
+  m(() => {
+    a && c.current && (r(c.current === "first" ? 0 : -1), c.current = null);
+  }, [a, r]);
+  const g = n((e) => {
+    if (!e.currentTarget.contains(e.target)) return;
+    const t = e.key === "Tab" && !e.shiftKey && a;
+    e.key === "ArrowDown" || t ? (e.preventDefault(), a ? r(0) : (c.current = "first", o())) : e.key === "ArrowUp" && (e.preventDefault(), a ? r(-1) : (c.current = "last", o()));
+  }, [
+    a,
+    r,
+    o
+  ]);
+  return {
+    handleMenuKeyDown: n((e) => {
+      const t = s(), u = t.indexOf(document.activeElement);
+      switch (e.key) {
+        case "ArrowDown":
+          e.preventDefault(), r(u + 1);
+          break;
+        case "ArrowUp":
+          e.preventDefault(), r(u - 1);
+          break;
+        case "Home":
+          e.preventDefault(), r(0);
+          break;
+        case "End":
+          e.preventDefault(), r(-1);
+          break;
+        case "Tab": {
+          e.preventDefault();
+          const f = e.shiftKey ? u - 1 : u + 1;
+          f < 0 || f >= t.length ? l() : r(f);
+          break;
+        }
+        case "Escape":
+          e.preventDefault(), l();
+      }
+    }, [
+      s,
+      r,
+      l
+    ]),
+    handleTriggerKeyDown: g
+  };
+};
+export {
+  b as useMenuKeyboardNavigation
+};

package/dist/components/VirtualizedTable/components/Actions/components/PortalActions/hooks/use-row-highlight/use-row-highlight.js

@@ -0,0 +1,13 @@
+import { useEffect as o } from "react";
+var n = ({ isOpen: r, triggerRef: e }) => {
+  o(() => {
+    const t = e.current?.closest("tr");
+    if (!(!t || !r))
+      return t.setAttribute("data-actions-open", ""), () => {
+        t.removeAttribute("data-actions-open");
+      };
+  }, [r, e]);
+};
+export {
+  n as useRowHighlight
+};

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

@@ -1,72 +1,77 @@
-import { t as r } from "../../../../utils-COaoD3PI.js";
-import { n as A } from "../../../../table.provider-BPlFpIAe.js";
-import { useTableContext as B } from "../../contexts/table.hook.js";
-import { Skeleton as H } from "../Skeleton/Skeleton.js";
-import { ExpandableRow as L } from "../ExpandableRow/ExpandableRow.js";
-import { Fragment as M } from "react";
-import { jsx as e, jsxs as O } from "react/jsx-runtime";
-var W = ({ isLoading: h, showPagination: l, emptyState: p }) => {
-  const { table: m, pageSize: k, tableFetching: N, enableExpandedRow: w, classNameExpandedRow: R, classNameExpandedCell: E, classNameExpandedContent: v, enableHoverRow: g, classNameHoverRow: C, classNameActiveExpandedRow: y, renderExpandedRow: u, isBorderOnAdjacentCell: D, isExpandColumnVisible: j } = B();
-  if (h || N) return /* @__PURE__ */ e(H, {
-    numberOfRows: k,
-    table: m
+import { n as T } from "../../../../table.provider-Dhs7WtwK.js";
+import { Skeleton as q } from "../Skeleton/Skeleton.js";
+import { t as r } from "../../../../utils-DnIJruo0.js";
+import { HIDE_BELOW_CLASS as G } from "../../constants/responsive.js";
+import { useTableContext as J } from "../../contexts/table.hook.js";
+import { getPinnedCellProps as K } from "../../utils/pinned-columns/pinned-columns.js";
+import { isPaginationBarVisible as Q } from "../../utils/pagination.js";
+import { ExpandableRow as U } from "../ExpandableRow/ExpandableRow.js";
+import { Fragment as X } from "react";
+import { jsx as e, jsxs as Y } from "react/jsx-runtime";
+var se = ({ isLoading: y, showPagination: E, emptyState: C, errorState: n }) => {
+  const { table: d, pageSize: R, totalItems: D = -1 / 0, tableLoading: _, tableError: c, enableExpandedRow: B, classNameExpandedRow: L, classNameExpandedCell: j, classNameExpandedContent: z, enableHoverRow: f, classNameHoverRow: P, classNameActiveExpandedRow: V, renderExpandedRow: u, isBorderOnAdjacentCell: A, isExpandColumnVisible: H, pinnedWidths: O } = J();
+  if (y || _) return /* @__PURE__ */ e(q, {
+    numberOfRows: R,
+    table: d
   });
-  const a = m.getRowModel().rows ?? [];
-  if (a.length === 0 && p) {
-    const n = m.getVisibleLeafColumns().length;
+  const a = d.getRowModel().rows ?? [], l = E && Q(D), x = a.length === 0 && !!c && !!n, h = a.length > 0 ? null : c && n ? typeof n == "function" ? n(c) : n : C ?? null;
+  if (h) {
+    const s = d.getVisibleLeafColumns().length;
     return /* @__PURE__ */ e("tbody", {
-      className: r("text-slate-800", "text-sm", "font-normal", "relative", "dark:border-x"),
+      className: r("kvt-body", "text-slate-800", "text-sm", "font-normal", "relative", "dark:border-x"),
       children: /* @__PURE__ */ e("tr", {
-        className: r("border-b", "border-b-gray-200", "dark:border-b-metal-700", "bg-transparent"),
+        className: r(x ? "kvt-error-row" : "kvt-empty-row", "border-b", "border-b-gray-200", "dark:border-b-metal-700", "bg-transparent"),
         "data-empty-row": !0,
+        "data-error-row": x ? !0 : void 0,
         children: /* @__PURE__ */ e("td", {
-          colSpan: n,
+          colSpan: s,
           className: r("p-0", "bg-white", "dark:bg-metal-900", "dark:border", "dark:border-metal-700", "rounded-b-lg"),
           children: /* @__PURE__ */ e("div", {
             className: "flex items-center justify-center",
-            children: p
+            children: h
           })
         })
       })
     });
   }
   return /* @__PURE__ */ e("tbody", {
-    className: r("text-slate-800", "text-sm", "font-normal", "relative", "dark:border-x"),
-    children: a.map((n, c) => {
-      const { id: b, original: i, getVisibleCells: z } = n, { meta: o = {} } = i, s = z(), t = w && n.getIsExpanded(), F = !!o.expandedRow || !!u, x = s[0]?.column.id !== "__expand" || j ? 0 : D ? 1 : null;
-      return /* @__PURE__ */ O(M, { children: [/* @__PURE__ */ e("tr", {
-        className: r({ "group/row": g }, "border-b", "border-b-gray-200", "dark:text-metal-50", "dark:border-b-metal-700", "bg-transparent", o.className),
-        "data-row-id": b,
-        ...o.attributes ?? {},
-        children: s.map(({ id: S, column: d, getContext: V }, f) => {
-          const _ = typeof d.columnDef.meta?.className == "function" ? d.columnDef.meta?.className(i) : d.columnDef.meta?.className;
+    className: r("kvt-body", "text-slate-800", "text-sm", "font-normal", "relative", "dark:border-x"),
+    children: a.map((s, b) => {
+      const { id: p, original: g, getVisibleCells: F } = s, { meta: i = {} } = g, m = F(), o = B && s.getIsExpanded(), I = !!i.expandedRow || !!u, k = m[0]?.column.id !== "__expand" || H ? 0 : A ? 1 : null;
+      return /* @__PURE__ */ Y(X, { children: [/* @__PURE__ */ e("tr", {
+        className: r("kvt-row", { "group/row": f }, "border-b", "border-b-gray-200", "dark:text-metal-50", "dark:border-b-metal-700", "bg-transparent", i.className),
+        "data-row-id": p,
+        ...i.attributes ?? {},
+        children: m.map(({ id: M, column: t, getContext: S }, w) => {
+          const W = typeof t.columnDef.meta?.className == "function" ? t.columnDef.meta?.className(g) : t.columnDef.meta?.className, { hideBelow: N } = t.columnDef.meta ?? {}, v = K(d, t, O);
           return /* @__PURE__ */ e("td", {
-            className: r("px-4", "py-1", "text-sm", "bg-white", "dark:bg-metal-900", "dark:border-t", "dark:border-metal-700", "dark:first:border-l", "dark:last:border-r", {
-              "group-hover/row:bg-zinc-100 dark:group-hover/row:bg-metal-800": g,
-              [r("bg-zinc-100 dark:bg-metal-800", y)]: !!t
-            }, C, _, {
-              "rounded-bl-lg": c === a.length - 1 && x !== null && f === x && !l && !t,
-              "rounded-br-lg": c === a.length - 1 && f === s.length - 1 && !l && !t,
+            style: v.style,
+            className: r("kvt-cell", "px-4", "py-1", "text-sm", "bg-white", "dark:bg-metal-900", "dark:border-t", "dark:border-metal-700", "dark:first:border-l", "dark:last:border-r", "[tr[data-actions-open]_&]:bg-zinc-100", "dark:[tr[data-actions-open]_&]:bg-metal-800", {
+              "group-hover/row:bg-zinc-100 dark:group-hover/row:bg-metal-800": f,
+              [r("bg-zinc-100 dark:bg-metal-800", V)]: !!o
+            }, P, v.className, N && G[N], W, {
+              "rounded-bl-lg": b === a.length - 1 && k !== null && w === k && !l && !o,
+              "rounded-br-lg": b === a.length - 1 && w === m.length - 1 && !l && !o,
               "dark:[tr:last-child_&]:border-b": !l
             }),
-            "data-expanded": t ? !0 : void 0,
-            ...d.columnDef.meta?.attributes ?? {},
-            children: A(d.columnDef.cell, V())
-          }, S);
+            "data-expanded": o ? !0 : void 0,
+            ...t.columnDef.meta?.attributes ?? {},
+            children: T(t.columnDef.cell, S())
+          }, M);
         })
-      }), F && /* @__PURE__ */ e(L, {
-        classNameExpandedCell: E,
-        classNameExpandedContent: v,
-        classNameExpandedRow: R,
-        colSpan: s.length,
-        id: b,
-        isExpanded: !!t,
-        isLastRow: c === a.length - 1 && !l,
-        children: o.expandedRow ?? u?.(i)
-      })] }, b);
+      }), I && /* @__PURE__ */ e(U, {
+        classNameExpandedCell: j,
+        classNameExpandedContent: z,
+        classNameExpandedRow: L,
+        colSpan: m.length,
+        id: p,
+        isExpanded: !!o,
+        isLastRow: b === a.length - 1 && !l,
+        children: i.expandedRow ?? u?.(g)
+      })] }, p);
     })
   });
 };
 export {
-  W as Body
+  se as Body
 };

package/dist/components/VirtualizedTable/components/DotPaginate/DotPaginate.js

@@ -1,6 +1,6 @@
-import { t as p } from "../../../../utils-COaoD3PI.js";
-import { t as d } from "../../../../chevron-left-CeJrJR0U.js";
-import { t as m } from "../../../../chevron-right-BFOnP164.js";
+import { t as d } from "../../../../chevron-left-B1zWfqll.js";
+import { t as m } from "../../../../chevron-right-D4OkgIIT.js";
+import { t as p } from "../../../../utils-DnIJruo0.js";
 import { useTableContext as h } from "../../contexts/table.hook.js";
 import { memo as u } from "react";
 import { jsx as i, jsxs as f } from "react/jsx-runtime";

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

@@ -1,26 +1,72 @@
-import { Select as i } from "../../../Select/Select.js";
-import { DEFAULT_PAGE_SIZES as l } from "../../constants/pagination.js";
-import { useTableContext as p } from "../../contexts/table.hook.js";
-import { useCallback as g, useMemo as c } from "react";
-import { jsx as o, jsxs as d } from "react/jsx-runtime";
-var u = ({ pageSizes: m = l }) => {
-  const { pageSize: r, onPageSize: t, handlePage: a } = p(), s = c(() => m.map(String).map((e) => ({
-    label: e,
-    value: e
-  })), []), n = g((e) => {
-    t(Number(e)), a(0);
-  }, [a, t]);
-  return /* @__PURE__ */ d("div", {
-    className: "flex items-center gap-2 dark:text-metal-300",
-    children: [/* @__PURE__ */ o("span", { children: "Show" }), /* @__PURE__ */ o(i, {
-      className: "w-22 [&>div>p]:text-sm bg-white",
-      listItemClassName: "[&>p]:text-sm dark:bg-metal-800",
-      options: s,
-      value: r.toString(),
-      onChange: ({ target: e }) => n(e.value)
+import { a as u, i as v, r as b, t as w } from "../../../../dist-DPLBSjtu.js";
+import { t as P } from "../../../../chevron-up-B8hiVgxZ.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 { Typography as c } from "../../../Typography/Typography.js";
+import { t as o } from "../../../../utils-DnIJruo0.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(b, {
+    asChild: !0,
+    side: s === "up" ? "top" : "bottom",
+    avoidCollisions: s === "auto",
+    align: "start",
+    sideOffset: 4,
+    onOpenAutoFocus: (t) => {
+      t.preventDefault();
+    },
+    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(w, {
+      open: l,
+      onOpenChange: n,
+      children: [/* @__PURE__ */ r(u, {
+        "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(P, {
+          "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(v, { children: m }) : m]
     })]
   });
 };
 export {
-  u 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 { Typography as l } from "../../../Typography/Typography.js";
+import { t as c } from "../../../../utils-DnIJruo0.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

@@ -1,7 +1,7 @@
-import { t as a } from "../../../../utils-COaoD3PI.js";
+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("h-0 leading-0", l),
+  className: a("kvt-expanded-row h-0 leading-0", l),
   "data-expanded-row-id": i,
   children: /* @__PURE__ */ d("td", {
     colSpan: m,