@konstructio/ui 0.1.2-alpha.66 → 0.1.2-alpha.68

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

@@ -1,63 +1,65 @@
-import { jsx as a, jsxs as S } from "react/jsx-runtime";
-import { f as j } from "../../../../index-CSWGJT-v.js";
+import { jsx as a, jsxs as A } from "react/jsx-runtime";
+import { f as B } from "../../../../index-CSWGJT-v.js";
 import { Fragment as H } from "react";
 import { Skeleton as M } from "../Skeleton/Skeleton.js";
-import { cn as s } from "../../../../utils/index.js";
-import { ExpandableRow as A } from "../ExpandableRow/ExpandableRow.js";
-import { useTableContext as B } from "../../contexts/table.hook.js";
-const J = ({
-  isLoading: f,
+import { cn as l } from "../../../../utils/index.js";
+import { ExpandableRow as O } from "../ExpandableRow/ExpandableRow.js";
+import { useTableContext as V } from "../../contexts/table.hook.js";
+const U = ({
+  isLoading: g,
   showPagination: t
 }) => {
   const {
-    table: b,
-    pageSize: u,
-    tableFetching: h,
-    enableExpandedRow: w,
-    classNameExpandedRow: N,
-    classNameExpandedCell: R,
-    classNameExpandedContent: k,
+    table: i,
+    pageSize: h,
+    tableFetching: w,
+    enableExpandedRow: N,
+    classNameExpandedRow: R,
+    classNameExpandedCell: k,
+    classNameExpandedContent: E,
     enableHoverRow: p,
-    classNameHoverRow: E,
+    classNameHoverRow: C,
     classNameActiveExpandedRow: v,
-    renderExpandedRow: i
-  } = B();
-  if (f || h)
-    return /* @__PURE__ */ a(M, { numberOfRows: u, table: b });
-  const o = b.getRowModel().rows ?? [];
+    renderExpandedRow: b,
+    isBorderOnAdjacentCell: D,
+    isExpandColumnVisible: y
+  } = V();
+  if (g || w)
+    return /* @__PURE__ */ a(M, { numberOfRows: h, table: i });
+  const d = i.getRowModel().rows ?? [];
   return /* @__PURE__ */ a(
     "tbody",
     {
-      className: s(
+      className: l(
         "text-slate-800",
         "text-sm",
         "font-normal",
         "relative",
         "dark:border-x"
       ),
-      children: o.map((g, l) => {
-        const { id: n, original: m, getVisibleCells: y } = g, { meta: d = {} } = m, c = y(), e = w && g.getIsExpanded(), C = !!d.expandedRow || !!i;
-        return /* @__PURE__ */ S(H, { children: [
+      children: d.map((x, s) => {
+        const { id: m, original: c, getVisibleCells: j } = x, { meta: o = {} } = c, n = j(), e = N && x.getIsExpanded(), z = !!o.expandedRow || !!b, u = n[0]?.column.id !== "__expand" || y ? 0 : D ? 1 : null;
+        return /* @__PURE__ */ A(H, { children: [
           /* @__PURE__ */ a(
             "tr",
             {
-              className: s(
+              className: l(
                 { "group/row": p },
                 "border-b",
                 "border-b-gray-200",
                 "dark:text-metal-50",
                 "dark:border-b-metal-700",
                 "bg-transparent",
-                d.className
+                o.className
               ),
-              "data-row-id": n,
-              ...d.attributes ?? {},
-              children: c.map(({ id: D, column: r, getContext: z }, x) => {
-                const F = typeof r.columnDef.meta?.className == "function" ? r.columnDef.meta?.className(m) : r.columnDef.meta?.className;
+              "data-row-id": m,
+              ...o.attributes ?? {},
+              children: n.map(({ id: F, column: r, getContext: S }, f) => {
+                const _ = typeof r.columnDef.meta?.className == "function" ? r.columnDef.meta?.className(c) : r.columnDef.meta?.className;
                 return /* @__PURE__ */ a(
                   "td",
                   {
-                    className: s(
+                    className: l(
                       "px-4",
                       "py-1",
                       "text-sm",
@@ -69,46 +71,46 @@ const J = ({
                       "dark:last:border-r",
                       {
                         "group-hover/row:bg-zinc-100 dark:group-hover/row:bg-metal-800": p,
-                        [s(
+                        [l(
                           "bg-zinc-100 dark:bg-metal-800",
                           v
                         )]: !!e
                       },
-                      E,
-                      F,
+                      C,
+                      _,
                       {
-                        "first:rounded-bl-lg": l === o.length - 1 && x === 0 && !t && !e,
-                        "last:rounded-br-lg": l === o.length - 1 && x === c.length - 1 && !t && !e,
+                        "rounded-bl-lg": s === d.length - 1 && u !== null && f === u && !t && !e,
+                        "rounded-br-lg": s === d.length - 1 && f === n.length - 1 && !t && !e,
                         "dark:[tr:last-child_&]:border-b": !t
                       }
                     ),
                     "data-expanded": e ? !0 : void 0,
                     ...r.columnDef.meta?.attributes ?? {},
-                    children: j(r.columnDef.cell, z())
+                    children: B(r.columnDef.cell, S())
                   },
-                  D
+                  F
                 );
               })
             }
           ),
-          C && /* @__PURE__ */ a(
-            A,
+          z && /* @__PURE__ */ a(
+            O,
             {
-              classNameExpandedCell: R,
-              classNameExpandedContent: k,
-              classNameExpandedRow: N,
-              colSpan: c.length,
-              id: n,
+              classNameExpandedCell: k,
+              classNameExpandedContent: E,
+              classNameExpandedRow: R,
+              colSpan: n.length,
+              id: m,
               isExpanded: !!e,
-              isLastRow: l === o.length - 1 && !t,
-              children: d.expandedRow ?? i?.(m)
+              isLastRow: s === d.length - 1 && !t,
+              children: o.expandedRow ?? b?.(c)
             }
           )
-        ] }, n);
+        ] }, m);
       })
     }
   );
 };
 export {
-  J as Body
+  U as Body
 };

package/dist/components/VirtualizedTable/contexts/table.context.d.ts

@@ -20,6 +20,8 @@ export type ContextType<TData extends RowData = RowData> = {
     classNameActiveExpandedRow?: string;
     enableHoverRow?: boolean;
     classNameHoverRow?: string;
+    isBorderOnAdjacentCell?: boolean;
+    isExpandColumnVisible?: boolean;
     renderExpandedRow?: (data: RowData) => ReactNode;
     handlePage: (newPage: number) => void;
     onPageSize: (newPageSize: number) => void;

package/dist/components/VirtualizedTable/contexts/table.provider.js

@@ -1,9 +1,9 @@
-import { jsx as E } from "react/jsx-runtime";
+import { jsx as O } from "react/jsx-runtime";
 import { V as Le } from "../../../index-BKjcReYh.js";
 import { useQuery as Te } from "@tanstack/react-query";
 import { u as Ae, g as Fe, a as Me } from "../../../index-CSWGJT-v.js";
-import { useState as r, useMemo as u, useCallback as b, useEffect as N } from "react";
-import { cn as O } from "../../../utils/index.js";
+import { useState as r, useMemo as m, useCallback as b, useEffect as N } from "react";
+import { cn as L } from "../../../utils/index.js";
 import { VirtualizedTableEvent as W } from "../events/index.js";
 import { TableContext as Pe } from "./table.context.js";
 import { C as je } from "../../../chevron-right-DvXGOiS_.js";
@@ -16,7 +16,7 @@ const Re = ({
   classNameExpandedHeader: D,
   classNameActiveExpandedRow: ee,
   classNameHoverRow: te,
-  columns: L = [],
+  columns: T = [],
   data: G = [],
   defaultExpanded: ne,
   enableExpandedRow: i,
@@ -32,14 +32,14 @@ const Re = ({
   renderExpandedRow: x,
   keepExpandColumnVisible: a
 }) => {
-  const [H, R] = r([]), [ae, ie] = r(!!l), [T, U] = r(0), [C, le] = r(), [g, ce] = r(_e), [de, ue] = r(B), A = l ? de : B, me = u(
-    () => Math.ceil(A / g),
-    [A, g]
-  ), [I, fe] = r({}), F = Te({
+  const [H, R] = r([]), [ae, ie] = r(!!l), [A, U] = r(0), [C, le] = r(), [g, ce] = r(_e), [de, ue] = r(B), F = l ? de : B, me = m(
+    () => Math.ceil(F / g),
+    [F, g]
+  ), [I, fe] = r({}), M = Te({
     queryKey: (() => {
       const e = typeof s == "string" || typeof s == "number" ? [s] : s;
-      return re && e.push(T, g), C && e.push(C), Object.entries(I).forEach(([t, d]) => {
-        e.push(`${t}:${d.join(",")}`);
+      return re && e.push(A, g), C && e.push(C), Object.entries(I).forEach(([t, u]) => {
+        e.push(`${t}:${u.join(",")}`);
       }), e;
     })(),
     refetchOnMount: !1,
@@ -47,53 +47,53 @@ const Re = ({
     initialData: G,
     enabled: !!l,
     queryFn: async () => l({
-      page: Math.max(T + 1, 1),
+      page: Math.max(A + 1, 1),
       pageSize: g,
       termOfSearch: C,
       ...Object.keys(I).length > 0 ? I : {}
     }).then(({ data: e, totalItemsCount: t }) => (ie(!1), t && ue(t), e)),
     ...se
-  }), h = l ? F.data : G, ge = l ? F.isLoading : !1, M = l ? F.isFetching : !1, he = b((e) => {
+  }), h = l ? M.data : G, ge = l ? M.isLoading : !1, P = l ? M.isFetching : !1, he = b((e) => {
     le(e), U(0);
   }, []), pe = b((e, t) => {
-    const d = e.toLowerCase().replace(/\s+/g, "_");
+    const u = e.toLowerCase().replace(/\s+/g, "_");
     fe((q) => ({
       ...q,
-      [d]: t
+      [u]: t
     }));
   }, []), ye = b((e) => U(e), []), be = b(
     (e) => ce(e),
     []
   ), [xe, Ce] = r(
     ne ?? {}
-  ), P = Q !== void 0, c = P ? Q : xe, p = b(
+  ), j = Q !== void 0, c = j ? Q : xe, p = b(
     (e) => {
       const t = typeof e == "function" ? e(c) : e;
-      P || Ce(t), $?.(e);
+      j || Ce(t), $?.(e);
     },
-    [c, P, $]
+    [c, j, $]
   );
   N(() => {
     if (!i) return;
-    const e = Array.isArray(s) ? s.join(",") : String(s), t = new AbortController(), d = (y) => {
+    const e = Array.isArray(s) ? s.join(",") : String(s), t = new AbortController(), u = (y) => {
       const { detail: n } = y;
       n.tableId === e && p((o) => typeof o == "boolean" ? { [n.rowId]: !0 } : { ...o, [n.rowId]: !0 });
     }, q = (y) => {
       const { detail: n } = y;
       n.tableId === e && p((o) => {
         if (typeof o == "boolean") return {};
-        const w = { ...o };
-        return delete w[n.rowId], w;
+        const E = { ...o };
+        return delete E[n.rowId], E;
       });
     }, Oe = (y) => {
       const { detail: n } = y;
       n.tableId === e && p((o) => {
         if (typeof o == "boolean") return { [n.rowId]: !o };
-        const w = !!o[n.rowId], z = { ...o };
-        return w ? delete z[n.rowId] : z[n.rowId] = !0, z;
+        const E = !!o[n.rowId], z = { ...o };
+        return E ? delete z[n.rowId] : z[n.rowId] = !0, z;
       });
     };
-    return document.addEventListener(W.EXPAND_ROW, d, {
+    return document.addEventListener(W.EXPAND_ROW, u, {
       signal: t.signal
     }), document.addEventListener(
       W.COLLAPSE_ROW,
@@ -103,48 +103,48 @@ const Re = ({
       signal: t.signal
     }), () => t.abort();
   }, [i, s, p]);
-  const j = u(
+  const _ = m(
     () => h.some((e) => !!e.meta?.expandedRow),
     [h]
-  ), S = u(
-    () => M ? [] : h.map(
+  ), S = m(
+    () => P ? [] : h.map(
       (e, t) => f ? f(e, t) : String(t)
     ),
-    [h, f, M]
-  ), Ie = u(() => typeof c == "boolean" ? c : S.some((e) => !!c[e]), [c, S]), Se = u(() => typeof a == "boolean" ? a : typeof a == "object" ? S.some((e) => !!a[e]) : !1, [a, S]), _ = j || x && (Ie || Se), [m, V] = r(!!_);
+    [h, f, P]
+  ), Ie = m(() => typeof c == "boolean" ? c : S.some((e) => !!c[e]), [c, S]), Se = m(() => typeof a == "boolean" ? a : typeof a == "object" ? S.some((e) => !!a[e]) : !1, [a, S]), v = _ || x && (Ie || Se), [d, V] = r(!!v);
   N(() => {
-    if (_) {
+    if (v) {
       const e = requestAnimationFrame(() => V(!0));
       return () => cancelAnimationFrame(e);
     } else
       V(!1);
-  }, [_]);
-  const [v, X] = r(
-    !m
+  }, [v]);
+  const [w, X] = r(
+    !d
   );
   N(() => {
-    if (m)
+    if (d)
       X(!1);
     else {
       const e = setTimeout(() => X(!0), 300);
       return () => clearTimeout(e);
     }
-  }, [m]);
-  const K = u(() => !i || !j && !x ? null : {
+  }, [d]);
+  const K = m(() => !i || !_ && !x ? null : {
     id: "__expand",
-    header: () => /* @__PURE__ */ E(Le, { children: "Expand Column" }),
+    header: () => /* @__PURE__ */ O(Le, { children: "Expand Column" }),
     cell: ({ row: e }) => {
-      const { meta: t } = e.original, d = typeof a == "object" && !!a[e.id];
-      return !t?.expandedRow && !e.getIsExpanded() && !d ? null : /* @__PURE__ */ E(
+      const { meta: t } = e.original, u = typeof a == "object" && !!a[e.id];
+      return !t?.expandedRow && !e.getIsExpanded() && !u ? null : /* @__PURE__ */ O(
         "button",
         {
           className: "hover:cursor-pointer",
           onClick: () => e.toggleExpanded(),
           "aria-label": e.getIsExpanded() ? "Collapse row" : "Expand row",
-          children: /* @__PURE__ */ E(
+          children: /* @__PURE__ */ O(
             je,
             {
-              className: O(
+              className: L(
                 "size-4 transition-transform text-slate-400 dark:text-metal-400",
                 {
                   "-rotate-90": e.getIsExpanded()
@@ -157,27 +157,27 @@ const Re = ({
     },
     enableSorting: !1,
     meta: {
-      headerClassName: O(
+      headerClassName: L(
         "transition-[width,max-width,padding] duration-300 ease-in-out overflow-hidden",
         // Width: immediate change, CSS transition handles animation
-        m ? "w-10 max-w-10 px-2" : "w-0 max-w-0 !p-0",
+        d ? "w-10 max-w-10 px-2" : "w-0 max-w-0 !p-0",
         // Border/radius: deferred on collapse so border stays during exit
-        v && "!border-0 !rounded-none [&+th]:rounded-tl-lg dark:[&+th]:border-l"
+        w && "!border-0 !rounded-none [&+th]:rounded-tl-lg dark:[&+th]:border-l"
       ),
-      className: O(
+      className: L(
         "transition-[width,max-width,padding] duration-300 ease-in-out overflow-hidden",
-        m ? O("w-10 max-w-10 px-1 text-center", D) : "w-0 max-w-0 !p-0",
-        v && "!border-0 dark:[&+td]:border-l"
+        d ? L("w-10 max-w-10 px-1 text-center", D) : "w-0 max-w-0 !p-0",
+        w && "!border-0 dark:[&+td]:border-l"
       )
     }
   }, [
     i,
-    j,
+    _,
     x,
-    m,
-    v,
+    d,
+    w,
     a
-  ]), we = u(() => K ? [K, ...L] : L, [L, K]), Ee = Ae({
+  ]), we = m(() => K ? [K, ...T] : T, [T, K]), Ee = Ae({
     data: h,
     columns: we,
     ...f ? { getRowId: f } : {},
@@ -193,34 +193,36 @@ const Re = ({
     getCoreRowModel: Me(),
     getSortedRowModel: Fe()
   });
-  return /* @__PURE__ */ E(
+  return /* @__PURE__ */ O(
     Pe.Provider,
     {
       value: {
+        classNameActiveExpandedRow: ee,
+        classNameExpandedCell: J,
+        classNameExpandedContent: Y,
+        classNameExpandedRow: k,
+        classNameHoverRow: te,
+        enableExpandedRow: i,
+        enableHoverRow: oe,
+        isBorderOnAdjacentCell: w,
+        isExpandColumnVisible: d,
+        isFirstLoad: ae,
+        multiselectSelected: I,
+        page: A,
+        pageSize: g,
         sortedData: H,
         table: Ee,
-        tableFetching: M,
+        tableFetching: P,
         tableLoading: ge,
-        totalItems: A,
         termOfSearch: C,
-        page: T,
-        multiselectSelected: I,
-        pageSize: g,
+        totalItems: F,
         totalPages: me,
-        isFirstLoad: ae,
-        enableExpandedRow: i,
-        classNameExpandedRow: k,
-        classNameExpandedCell: J,
-        classNameExpandedContent: Y,
-        classNameActiveExpandedRow: ee,
-        renderExpandedRow: x,
-        enableHoverRow: oe,
-        classNameHoverRow: te,
         handlePage: ye,
-        onPageSize: be,
         onChangeTermOfSearch: he,
+        onPageSize: be,
+        onSelectMultiselect: pe,
         onSorting: R,
-        onSelectMultiselect: pe
+        renderExpandedRow: x
       },
       children: Z
     }

package/dist/components/VirtualizedTable/events/index.d.ts

@@ -7,6 +7,6 @@ export type VirtualizedTableEventDetail = {
     tableId: string;
     rowId: string;
 };
-export declare const sendExpandRowEvent: (tableId: string, rowId: string) => boolean;
-export declare const sendCollapseRowEvent: (tableId: string, rowId: string) => boolean;
-export declare const sendToggleRowEvent: (tableId: string, rowId: string) => boolean;
+export declare const sendExpandRowEvent: (tableId: string, rowId: string) => void;
+export declare const sendCollapseRowEvent: (tableId: string, rowId: string) => void;
+export declare const sendToggleRowEvent: (tableId: string, rowId: string) => void;

package/dist/components/VirtualizedTable/events/index.js

@@ -1,20 +1,26 @@
 var n = /* @__PURE__ */ ((t) => (t.EXPAND_ROW = "@konstructio/VirtualizedTable/event-EXPAND_ROW", t.COLLAPSE_ROW = "@konstructio/VirtualizedTable/event-COLLAPSE_ROW", t.TOGGLE_ROW = "@konstructio/VirtualizedTable/event-TOGGLE_ROW", t))(n || {});
-const o = (t, e) => document.dispatchEvent(
-  new CustomEvent(
-    "@konstructio/VirtualizedTable/event-EXPAND_ROW",
-    { detail: { tableId: t, rowId: e } }
-  )
-), i = (t, e) => document.dispatchEvent(
-  new CustomEvent(
-    "@konstructio/VirtualizedTable/event-COLLAPSE_ROW",
-    { detail: { tableId: t, rowId: e } }
-  )
-), s = (t, e) => document.dispatchEvent(
-  new CustomEvent(
-    "@konstructio/VirtualizedTable/event-TOGGLE_ROW",
-    { detail: { tableId: t, rowId: e } }
-  )
-);
+const o = (t, e) => {
+  document.dispatchEvent(
+    new CustomEvent(
+      "@konstructio/VirtualizedTable/event-EXPAND_ROW",
+      { detail: { tableId: t, rowId: e } }
+    )
+  );
+}, i = (t, e) => {
+  document.dispatchEvent(
+    new CustomEvent(
+      "@konstructio/VirtualizedTable/event-COLLAPSE_ROW",
+      { detail: { tableId: t, rowId: e } }
+    )
+  );
+}, s = (t, e) => {
+  document.dispatchEvent(
+    new CustomEvent(
+      "@konstructio/VirtualizedTable/event-TOGGLE_ROW",
+      { detail: { tableId: t, rowId: e } }
+    )
+  );
+};
 export {
   n as VirtualizedTableEvent,
   i as sendCollapseRowEvent,

package/dist/components/index.js

@@ -17,7 +17,7 @@ import { Filter as k } from "./Filter/Filter.js";
 import { ImageUpload as F } from "./ImageUpload/ImageUpload.js";
 import { Input as M } from "./Input/Input.js";
 import { Loading as y } from "./Loading/Loading.js";
-import { M as U } from "../Modal--z642-Wv.js";
+import { M as U } from "../Modal-mwLmWbnA.js";
 import { MultiSelectDropdown as j } from "./MultiSelectDropdown/MultiSelectDropdown.js";
 import { PhoneNumberInput as H } from "./PhoneNumberInput/PhoneNumberInput.js";
 import { PieChart as K } from "./PieChart/PieChart.js";

package/dist/icons.d.ts

@@ -1,2 +1,2 @@
-export { AccountsIcon, AddChartIcon, AlertOutlineIcon, AppRepoIcon, AppsIcon, ArchivesIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, BarChartIcon, BookOpenIcon, CalendarMonthIcon, CheckIcon, CheckCircleIcon, ClockAlertIcon, ClockOutlineIcon, CloseIcon, CloudIcon, ClustersIcon, CogOutlineIcon, CopyIcon, CpuIcon, CubeIcon, DatacenterIcon, DeleteIcon, DollarSignIcon, DownloadIcon, EditIcon, EllipsesIcon, EnvironmentsIcon, ErrorIcon, ErrorOutlineIcon, ExclamationIcon, GitIcon, GitOpsCatalogIcon, GridViewIcon, HelpIcon, HideOutlineIcon, HomeIcon, IdIcon, InformationOutlineIcon, InvoiceListIcon, KeyIcon, LoaderIcon, LightBulbIcon, NetworkIcon, PagesStackIcon, PageviewIcon, PeopleIcon, PhotoLibraryIcon, PipelineIcon, PlusIcon, PowerSettingsIcon, PreviewIcon, ReceiptLongIcon, RefreshIcon, ScatterPlotIcon, SearchIcon, ServerIcon, StartIcon, TabNewIcon, TeamsIcon, WarningIcon, XIcon, } from './assets/icons/components';
+export { AccountsIcon, AddChartIcon, AlertOutlineIcon, AppRepoIcon, AppsIcon, ArchivesIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, BarChartIcon, BookOpenIcon, CalendarMonthIcon, CheckIcon, CheckCircleIcon, ClockAlertIcon, ClockOutlineIcon, CloseIcon, CloudIcon, CloudLockOutlineIcon, ClustersIcon, CogOutlineIcon, CopyIcon, CpuIcon, CubeIcon, DatacenterIcon, DeleteIcon, DollarSignIcon, DownloadIcon, EditIcon, EllipsesIcon, EnvironmentsIcon, ErrorIcon, ErrorOutlineIcon, ExclamationIcon, GitIcon, GitOpsCatalogIcon, GridViewIcon, HelpIcon, HideOutlineIcon, HomeIcon, IdIcon, InformationOutlineIcon, InvoiceListIcon, KeyIcon, LoaderIcon, LightBulbIcon, NetworkIcon, PagesStackIcon, PageviewIcon, PeopleIcon, PhotoLibraryIcon, PipelineIcon, PlusIcon, PowerSettingsIcon, PreviewIcon, ReceiptLongIcon, RefreshIcon, ScatterPlotIcon, SearchIcon, ServerIcon, StartIcon, TabNewIcon, TeamsIcon, WarningIcon, XIcon, } from './assets/icons/components';
 export type { IconProps, IconComponent } from './assets/icons/components';