@konstructio/ui 0.1.2-alpha.65 → 0.1.2-alpha.67

package/dist/components/Toast/Toast.js

@@ -3,12 +3,12 @@ import { S as B } from "../../index-BvoZGpli.js";
 import * as n from "react";
 import { useRef as xe, useEffect as be, useMemo as re, isValidElement as ne, useCallback as ge } from "react";
 import * as Se from "react-dom";
-import { P as D, c as Ne, a as Ie, b as x, d as Ae, u as De } from "../../index-DKfEnhKr.js";
+import { P as D, a as Ne, c as x, b as Ie, d as Ae, u as De } from "../../index--l0zux8V.js";
 import { u as ie } from "../../index-DLcqcWxM.js";
-import { c as _e } from "../../index-BG8O18ZY.js";
-import { B as Fe, R as Le } from "../../index-BlSRBdPy.js";
-import { P as Me } from "../../index-DMb4KD0b.js";
-import { P as Oe } from "../../index-AV6ZtGhy.js";
+import { c as _e } from "../../index-CJnS4BVW.js";
+import { B as Fe, R as Le } from "../../index-URQGEGX7.js";
+import { P as Me } from "../../index-CESXsoMn.js";
+import { P as Oe } from "../../index-3fEdeexs.js";
 import { u as X } from "../../index-0ioNhtNM.js";
 import { R as ke } from "../../index-BKjcReYh.js";
 import { cn as j } from "../../utils/index.js";
@@ -37,7 +37,7 @@ var Ue = Object.freeze({
   )
 );
 Q.displayName = Xe;
-var Z = "ToastProvider", [ee, Ye, $e] = _e("Toast"), [ce, St] = Ne("Toast", [$e]), [Be, Y] = ce(Z), ue = (e) => {
+var Z = "ToastProvider", [ee, Ye, $e] = _e("Toast"), [ce] = Ie("Toast", [$e]), [Be, Y] = ce(Z), ue = (e) => {
   const {
     __scopeToast: o,
     label: r = "Notification",
@@ -192,7 +192,7 @@ var fe = "ToastFocusProxy", J = n.forwardRef(
 J.displayName = fe;
 var O = "Toast", qe = "toast.swipeStart", ze = "toast.swipeMove", Ge = "toast.swipeCancel", Je = "toast.swipeEnd", pe = n.forwardRef(
   (e, o) => {
-    const { forceMount: r, open: t, defaultOpen: u, onOpenChange: d, ...f } = e, [w, v] = Ie({
+    const { forceMount: r, open: t, defaultOpen: u, onOpenChange: d, ...f } = e, [w, v] = Ne({
       prop: t,
       defaultProp: u ?? !0,
       onChange: d,
@@ -448,7 +448,7 @@ function q(e) {
   return e.some((r) => r === o ? !0 : (r.focus(), document.activeElement !== o));
 }
 var it = ue, ct = de, ut = pe, lt = me, dt = we, ft = ve;
-const Nt = ({
+const St = ({
   title: e,
   duration: o = 5e3,
   titleClassName: r,
@@ -502,5 +502,5 @@ const Nt = ({
   ] });
 };
 export {
-  Nt as Toast
+  St as Toast
 };

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

@@ -5,6 +5,11 @@ import { Props as ActionProps } from './components/Actions/Actions.types';
 type VirtualizedTableCompound = (<TData extends RowData>(props: Props<TData>) => JSX.Element) & {
     TruncateText: typeof TruncateText;
     Actions: <TData extends RowData>(props: ActionProps<TData>) => JSX.Element | null;
+    Events: {
+        sendExpandRowEvent: (tableId: string, rowId: string) => void;
+        sendCollapseRowEvent: (tableId: string, rowId: string) => void;
+        sendToggleRowEvent: (tableId: string, rowId: string) => void;
+    };
     displayName?: string;
 };
 declare const VirtualizedTable: VirtualizedTableCompound;

package/dist/components/VirtualizedTable/VirtualizedTable.js

@@ -1,60 +1,64 @@
-import { jsx as r, jsxs as s } from "react/jsx-runtime";
-import { useMemo as Q } from "react";
-import { cn as c } from "../../utils/index.js";
-import { TableProvider as R } from "./contexts/table.provider.js";
-import { Filter as S } from "./components/Filter/Filter.js";
-import { WrapperBody as U } from "./components/WrapperBody/WrapperBody.js";
-import { Header as X } from "./components/Header/Header.js";
-import { Body as Y } from "./components/Body/Body.js";
-import { Pagination as Z } from "./components/Pagination/Pagination.js";
-import { TruncateText as _ } from "./components/TruncateText/TruncateText.js";
-import { Actions as $ } from "./components/Actions/Actions.js";
-const D = ({
-  id: n,
+import { jsx as r, jsxs as n } from "react/jsx-runtime";
+import { useMemo as U } from "react";
+import { cn as s } from "../../utils/index.js";
+import { sendToggleRowEvent as X, sendCollapseRowEvent as Y, sendExpandRowEvent as Z } from "./events/index.js";
+import { TableProvider as _ } from "./contexts/table.provider.js";
+import { Filter as $ } from "./components/Filter/Filter.js";
+import { WrapperBody as D } from "./components/WrapperBody/WrapperBody.js";
+import { Header as L } from "./components/Header/Header.js";
+import { Body as rr } from "./components/Body/Body.js";
+import { Pagination as er } from "./components/Pagination/Pagination.js";
+import { TruncateText as or } from "./components/TruncateText/TruncateText.js";
+import { Actions as ar } from "./components/Actions/Actions.js";
+const tr = ({
+  id: c,
   ariaLabel: p,
   columns: d,
   data: f,
   totalItems: u = -1 / 0,
   className: b,
   classNameHeaderActiveArrows: T,
-  classNameHeaderArrows: N,
+  classNameHeaderArrows: v,
   classNameHeaderTable: x,
-  classNameTable: A,
-  classNameWrapperTable: y,
+  classNameTable: E,
+  classNameWrapperTable: N,
   isLoading: a,
-  fetchData: h,
-  queryOptions: z,
+  getRowId: w,
+  fetchData: A,
+  queryOptions: y,
   // Pagination
-  showPagination: B,
+  showPagination: h,
   showTotalItems: t,
   showDropdownPagination: i,
   showDotPagination: l,
   showFormPagination: m,
-  pageSizes: V,
+  pageSizes: z,
   // Filter
-  showFilter: j = !1,
-  showFilterInput: k,
-  filterSearchPlaceholder: v = "",
-  multiSelectFilter: w,
-  filterActions: P,
-  showResetButton: E = !0,
-  resetButtonClassName: H,
+  showFilter: B = !1,
+  showFilterInput: R,
+  filterSearchPlaceholder: V = "",
+  multiSelectFilter: g,
+  filterActions: j,
+  showResetButton: k = !0,
+  resetButtonClassName: P,
   // Hover row
-  enableHoverRow: I,
-  classNameHoverRow: K,
+  enableHoverRow: C,
+  classNameHoverRow: H,
   // Expandable rows
-  enableExpandedRow: M,
-  expandedState: W,
-  defaultExpanded: g,
-  classNameExpandedRow: q,
-  classNameExpandedCell: C,
+  enableExpandedRow: I,
+  expandedState: K,
+  defaultExpanded: M,
+  classNameExpandedRow: W,
+  classNameExpandedCell: q,
   classNameExpandedContent: F,
   classNameExpandedHeader: G,
   classNameActiveExpandedRow: J,
-  onExpandedChange: O
+  onExpandedChange: O,
+  renderExpandedRow: Q,
+  keepExpandColumnVisible: S
 }) => {
-  const e = Q(
-    () => B || [
+  const e = U(
+    () => h || [
       t,
       i,
       l,
@@ -63,87 +67,95 @@ const D = ({
     []
   );
   return /* @__PURE__ */ r(
-    R,
+    _,
     {
-      id: n,
+      id: c,
       columns: d,
       data: f,
-      fetchData: h,
+      getRowId: w,
+      fetchData: A,
       totalItems: u,
-      queryOptions: z,
+      queryOptions: y,
       isPaginationEnabled: e,
-      enableExpandedRow: M,
-      expandedState: W,
+      enableExpandedRow: I,
+      expandedState: K,
       onExpandedChange: O,
-      defaultExpanded: g,
-      classNameExpandedRow: q,
-      classNameExpandedCell: C,
+      defaultExpanded: M,
+      classNameExpandedRow: W,
+      classNameExpandedCell: q,
       classNameExpandedContent: F,
       classNameExpandedHeader: G,
       classNameActiveExpandedRow: J,
-      enableHoverRow: I,
-      classNameHoverRow: K,
-      children: /* @__PURE__ */ s("section", { className: c("w-full min-w-fit", b), children: [
-        j && /* @__PURE__ */ r(
-          S,
+      enableHoverRow: C,
+      classNameHoverRow: H,
+      renderExpandedRow: Q,
+      keepExpandColumnVisible: S,
+      children: /* @__PURE__ */ n("section", { className: s("w-full min-w-fit", b), children: [
+        B && /* @__PURE__ */ r(
+          $,
           {
-            actions: P,
-            multiSelectFilter: w,
-            placeholder: v,
-            showFilterInput: k,
-            showResetButton: E,
-            resetButtonClassName: H
+            actions: j,
+            multiSelectFilter: g,
+            placeholder: V,
+            showFilterInput: R,
+            showResetButton: k,
+            resetButtonClassName: P
           }
         ),
         /* @__PURE__ */ r(
-          U,
+          D,
           {
             showPagination: e,
-            classNameWrapperTable: y,
+            classNameWrapperTable: N,
             isLoading: a,
-            children: /* @__PURE__ */ s(
+            children: /* @__PURE__ */ n(
               "table",
               {
-                className: c(
+                className: s(
                   "w-full border-collapse table-auto",
                   "dark:border-separate dark:border-spacing-0",
-                  A
+                  E
                 ),
                 "aria-label": p,
                 children: [
                   /* @__PURE__ */ r(
-                    X,
+                    L,
                     {
                       className: x,
-                      classNameArrows: N,
+                      classNameArrows: v,
                       classNameActiveArrows: T
                     }
                   ),
-                  /* @__PURE__ */ r(Y, { isLoading: a, showPagination: e })
+                  /* @__PURE__ */ r(rr, { isLoading: a, showPagination: e })
                 ]
               }
             )
           }
         ),
         e && /* @__PURE__ */ r(
-          Z,
+          er,
           {
             showTotalItems: t,
             showDropdownPagination: i,
             showDotPagination: l,
             showFormPagination: m,
-            pageSizes: V,
+            pageSizes: z,
             isLoading: a
           }
         )
       ] })
     }
   );
-}, o = D;
+}, o = tr;
 o.displayName = "KonstructVirtualizedTable";
-o.TruncateText = _;
-o.Actions = $;
+o.TruncateText = or;
+o.Actions = ar;
+o.Events = {
+  sendExpandRowEvent: Z,
+  sendCollapseRowEvent: Y,
+  sendToggleRowEvent: X
+};
 export {
-  _ as TruncateText,
+  or as TruncateText,
   o as VirtualizedTable
 };

package/dist/components/VirtualizedTable/VirtualizedTable.types.d.ts

@@ -73,6 +73,7 @@ export type Props<TData extends RowDataPrimitive> = VariantProps<typeof virtuali
     classNameHoverRow?: string;
     queryOptions?: Omit<UseQueryOptions<any, any, any, any>, 'queryKey' | 'queryFn'>;
     isLoading?: boolean;
+    getRowId?: (originalRow: TData, index: number) => string;
     fetchData?: (params: Record<string, string | number | string[] | number[] | undefined>) => Promise<{
         data: TData[];
         totalItemsCount?: number;
@@ -119,6 +120,8 @@ export type Props<TData extends RowDataPrimitive> = VariantProps<typeof virtuali
     classNameExpandedHeader?: string;
     classNameActiveExpandedRow?: string;
     onExpandedChange?: OnChangeFn<ExpandedState>;
+    renderExpandedRow?: (data: TData) => ReactNode;
+    keepExpandColumnVisible?: boolean | Record<string, boolean>;
 } | {
     enableExpandedRow?: false | undefined;
     expandedState?: never;
@@ -129,4 +132,6 @@ export type Props<TData extends RowDataPrimitive> = VariantProps<typeof virtuali
     classNameExpandedHeader?: never;
     classNameActiveExpandedRow?: never;
     onExpandedChange?: never;
+    renderExpandedRow?: never;
+    keepExpandColumnVisible?: never;
 });

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

@@ -1,62 +1,65 @@
-import { jsx as a, jsxs as F } from "react/jsx-runtime";
-import { f as S } from "../../../../index-CSWGJT-v.js";
-import { Fragment as j } from "react";
-import { Skeleton as H } from "../Skeleton/Skeleton.js";
-import { cn as s } from "../../../../utils/index.js";
-import { ExpandableRow as M } from "../ExpandableRow/ExpandableRow.js";
-import { useTableContext as A } from "../../contexts/table.hook.js";
-const G = ({
-  isLoading: f,
+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 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: c,
-    pageSize: x,
-    tableFetching: u,
-    enableExpandedRow: h,
-    classNameExpandedRow: N,
+    table: i,
+    pageSize: h,
+    tableFetching: w,
+    enableExpandedRow: N,
+    classNameExpandedRow: R,
     classNameExpandedCell: k,
-    classNameExpandedContent: w,
-    enableHoverRow: b,
-    classNameHoverRow: R,
-    classNameActiveExpandedRow: E
-  } = A();
-  if (f || u)
-    return /* @__PURE__ */ a(H, { numberOfRows: x, table: c });
-  const o = c.getRowModel().rows ?? [];
+    classNameExpandedContent: E,
+    enableHoverRow: p,
+    classNameHoverRow: C,
+    classNameActiveExpandedRow: v,
+    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((p, l) => {
-        const { id: n, original: i, getVisibleCells: v } = p, { meta: d = {} } = i, m = v(), e = h && p.getIsExpanded(), y = !!d.expandedRow;
-        return /* @__PURE__ */ F(j, { 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(
-                { "group/row": b },
+              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: m.map(({ id: C, column: r, getContext: D }, g) => {
-                const z = typeof r.columnDef.meta?.className == "function" ? r.columnDef.meta?.className(i) : 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",
@@ -67,47 +70,47 @@ const G = ({
                       "dark:first:border-l",
                       "dark:last:border-r",
                       {
-                        "group-hover/row:bg-zinc-100 dark:group-hover/row:bg-metal-800": b,
-                        [s(
+                        "group-hover/row:bg-zinc-100 dark:group-hover/row:bg-metal-800": p,
+                        [l(
                           "bg-zinc-100 dark:bg-metal-800",
-                          E
+                          v
                         )]: !!e
                       },
-                      R,
-                      z,
+                      C,
+                      _,
                       {
-                        "first:rounded-bl-lg": l === o.length - 1 && g === 0 && !t && !e,
-                        "last:rounded-br-lg": l === o.length - 1 && g === m.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: S(r.columnDef.cell, D())
+                    children: B(r.columnDef.cell, S())
                   },
-                  C
+                  F
                 );
               })
             }
           ),
-          y && /* @__PURE__ */ a(
-            M,
+          z && /* @__PURE__ */ a(
+            O,
             {
               classNameExpandedCell: k,
-              classNameExpandedContent: w,
-              classNameExpandedRow: N,
-              colSpan: m.length,
-              id: n,
+              classNameExpandedContent: E,
+              classNameExpandedRow: R,
+              colSpan: n.length,
+              id: m,
               isExpanded: !!e,
-              isLastRow: l === o.length - 1 && !t,
-              children: d.expandedRow
+              isLastRow: s === d.length - 1 && !t,
+              children: o.expandedRow ?? b?.(c)
             }
           )
-        ] }, n);
+        ] }, m);
       })
     }
   );
 };
 export {
-  G as Body
+  U as Body
 };

package/dist/components/VirtualizedTable/components/TruncateText/TruncateText.js

@@ -1,5 +1,5 @@
 import { jsx as r, jsxs as d } from "react/jsx-runtime";
-import { P as u, R as b, T as m, C as p } from "../../../../index-Byr10W8m.js";
+import { P as u, R as b, T as m, C as p } from "../../../../index-DPcwqB8q.js";
 import { d as h } from "../../../../debounce-DJveWHr_.js";
 import { useRef as x, useState as w, useCallback as g, useEffect as s } from "react";
 const v = ({ getValue: l, value: i }) => {

package/dist/components/VirtualizedTable/components/WrapperBody/WrapperBody.js

@@ -12,9 +12,9 @@ const p = ({
     "div",
     {
       className: m(
-        "shadow rounded-t-lg",
+        "shadow rounded-t-lg overflow-hidden",
         {
-          "overflow-hidden rounded-lg": !t || d || e
+          "rounded-lg": !t || d || e
         },
         r
       ),

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

@@ -1,5 +1,5 @@
 import { ColumnSort, SortingState, Table } from '@tanstack/react-table';
-import { Dispatch, SetStateAction } from 'react';
+import { Dispatch, ReactNode, SetStateAction } from 'react';
 import { RowData } from '../VirtualizedTable.types';
 export type ContextType<TData extends RowData = RowData> = {
     sortedData: ColumnSort[];
@@ -20,6 +20,9 @@ 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;
     onSorting: Dispatch<SetStateAction<SortingState>>;

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

@@ -1,3 +1,3 @@
 import { RowData } from '../VirtualizedTable.types';
 import { Props } from './table.types';
-export declare const TableProvider: <TData extends RowData = RowData>({ children, classNameExpandedCell, classNameExpandedContent, classNameExpandedRow, classNameExpandedHeader, classNameActiveExpandedRow, classNameHoverRow, columns, data: defaultData, defaultExpanded, enableExpandedRow, enableHoverRow, expandedState, id, isPaginationEnabled, queryOptions, totalItems, fetchData, onExpandedChange, }: Props<TData>) => import("react/jsx-runtime").JSX.Element;
+export declare const TableProvider: <TData extends RowData = RowData>({ children, classNameExpandedCell, classNameExpandedContent, classNameExpandedRow, classNameExpandedHeader, classNameActiveExpandedRow, classNameHoverRow, columns, data: defaultData, defaultExpanded, enableExpandedRow, enableHoverRow, expandedState, id, isPaginationEnabled, queryOptions, totalItems, getRowId, fetchData, onExpandedChange, renderExpandedRow, keepExpandColumnVisible, }: Props<TData>) => import("react/jsx-runtime").JSX.Element;