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

package/dist/components/VirtualizedTable/VirtualizedTable.js

@@ -1,15 +1,15 @@
 import { jsx as r, jsxs as s } from "react/jsx-runtime";
-import { useMemo as Q } from "react";
+import { useMemo as U } 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 = ({
+import { TableProvider as X } from "./contexts/table.provider.js";
+import { Filter as Y } from "./components/Filter/Filter.js";
+import { WrapperBody as Z } from "./components/WrapperBody/WrapperBody.js";
+import { Header as _ } from "./components/Header/Header.js";
+import { Body as $ } from "./components/Body/Body.js";
+import { Pagination as D } from "./components/Pagination/Pagination.js";
+import { TruncateText as L } from "./components/TruncateText/TruncateText.js";
+import { Actions as rr } from "./components/Actions/Actions.js";
+const er = ({
   id: n,
   ariaLabel: p,
   columns: d,
@@ -22,39 +22,42 @@ const D = ({
   classNameTable: A,
   classNameWrapperTable: y,
   isLoading: a,
-  fetchData: h,
-  queryOptions: z,
+  getRowId: h,
+  fetchData: z,
+  queryOptions: B,
   // Pagination
-  showPagination: B,
+  showPagination: V,
   showTotalItems: t,
   showDropdownPagination: i,
   showDotPagination: l,
   showFormPagination: m,
-  pageSizes: V,
+  pageSizes: j,
   // Filter
-  showFilter: j = !1,
-  showFilterInput: k,
-  filterSearchPlaceholder: v = "",
-  multiSelectFilter: w,
-  filterActions: P,
-  showResetButton: E = !0,
-  resetButtonClassName: H,
+  showFilter: k = !1,
+  showFilterInput: v,
+  filterSearchPlaceholder: w = "",
+  multiSelectFilter: P,
+  filterActions: E,
+  showResetButton: H = !0,
+  resetButtonClassName: I,
   // Hover row
-  enableHoverRow: I,
-  classNameHoverRow: K,
+  enableHoverRow: K,
+  classNameHoverRow: M,
   // Expandable rows
-  enableExpandedRow: M,
-  expandedState: W,
-  defaultExpanded: g,
-  classNameExpandedRow: q,
-  classNameExpandedCell: C,
-  classNameExpandedContent: F,
-  classNameExpandedHeader: G,
-  classNameActiveExpandedRow: J,
-  onExpandedChange: O
+  enableExpandedRow: W,
+  expandedState: g,
+  defaultExpanded: q,
+  classNameExpandedRow: C,
+  classNameExpandedCell: F,
+  classNameExpandedContent: G,
+  classNameExpandedHeader: J,
+  classNameActiveExpandedRow: O,
+  onExpandedChange: Q,
+  renderExpandedRow: R,
+  keepExpandColumnVisible: S
 }) => {
-  const e = Q(
-    () => B || [
+  const e = U(
+    () => V || [
       t,
       i,
       l,
@@ -63,40 +66,43 @@ const D = ({
     []
   );
   return /* @__PURE__ */ r(
-    R,
+    X,
     {
       id: n,
       columns: d,
       data: f,
-      fetchData: h,
+      getRowId: h,
+      fetchData: z,
       totalItems: u,
-      queryOptions: z,
+      queryOptions: B,
       isPaginationEnabled: e,
-      enableExpandedRow: M,
-      expandedState: W,
-      onExpandedChange: O,
-      defaultExpanded: g,
-      classNameExpandedRow: q,
-      classNameExpandedCell: C,
-      classNameExpandedContent: F,
-      classNameExpandedHeader: G,
-      classNameActiveExpandedRow: J,
-      enableHoverRow: I,
-      classNameHoverRow: K,
+      enableExpandedRow: W,
+      expandedState: g,
+      onExpandedChange: Q,
+      defaultExpanded: q,
+      classNameExpandedRow: C,
+      classNameExpandedCell: F,
+      classNameExpandedContent: G,
+      classNameExpandedHeader: J,
+      classNameActiveExpandedRow: O,
+      enableHoverRow: K,
+      classNameHoverRow: M,
+      renderExpandedRow: R,
+      keepExpandColumnVisible: S,
       children: /* @__PURE__ */ s("section", { className: c("w-full min-w-fit", b), children: [
-        j && /* @__PURE__ */ r(
-          S,
+        k && /* @__PURE__ */ r(
+          Y,
           {
-            actions: P,
-            multiSelectFilter: w,
-            placeholder: v,
-            showFilterInput: k,
-            showResetButton: E,
-            resetButtonClassName: H
+            actions: E,
+            multiSelectFilter: P,
+            placeholder: w,
+            showFilterInput: v,
+            showResetButton: H,
+            resetButtonClassName: I
           }
         ),
         /* @__PURE__ */ r(
-          U,
+          Z,
           {
             showPagination: e,
             classNameWrapperTable: y,
@@ -112,38 +118,38 @@ const D = ({
                 "aria-label": p,
                 children: [
                   /* @__PURE__ */ r(
-                    X,
+                    _,
                     {
                       className: x,
                       classNameArrows: N,
                       classNameActiveArrows: T
                     }
                   ),
-                  /* @__PURE__ */ r(Y, { isLoading: a, showPagination: e })
+                  /* @__PURE__ */ r($, { isLoading: a, showPagination: e })
                 ]
               }
             )
           }
         ),
         e && /* @__PURE__ */ r(
-          Z,
+          D,
           {
             showTotalItems: t,
             showDropdownPagination: i,
             showDotPagination: l,
             showFormPagination: m,
-            pageSizes: V,
+            pageSizes: j,
             isLoading: a
           }
         )
       ] })
     }
   );
-}, o = D;
+}, o = er;
 o.displayName = "KonstructVirtualizedTable";
-o.TruncateText = _;
-o.Actions = $;
+o.TruncateText = L;
+o.Actions = rr;
 export {
-  _ as TruncateText,
+  L 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,29 +1,30 @@
-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 { jsx as a, jsxs as S } from "react/jsx-runtime";
+import { f as j } 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 M } from "../ExpandableRow/ExpandableRow.js";
-import { useTableContext as A } from "../../contexts/table.hook.js";
-const G = ({
+import { ExpandableRow as A } from "../ExpandableRow/ExpandableRow.js";
+import { useTableContext as B } from "../../contexts/table.hook.js";
+const J = ({
   isLoading: f,
   showPagination: t
 }) => {
   const {
-    table: c,
-    pageSize: x,
-    tableFetching: u,
-    enableExpandedRow: h,
+    table: b,
+    pageSize: u,
+    tableFetching: h,
+    enableExpandedRow: w,
     classNameExpandedRow: N,
-    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 ?? [];
+    classNameExpandedCell: R,
+    classNameExpandedContent: k,
+    enableHoverRow: p,
+    classNameHoverRow: E,
+    classNameActiveExpandedRow: v,
+    renderExpandedRow: i
+  } = B();
+  if (f || h)
+    return /* @__PURE__ */ a(M, { numberOfRows: u, table: b });
+  const o = b.getRowModel().rows ?? [];
   return /* @__PURE__ */ a(
     "tbody",
     {
@@ -34,14 +35,14 @@ const G = ({
         "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: 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: [
           /* @__PURE__ */ a(
             "tr",
             {
               className: s(
-                { "group/row": b },
+                { "group/row": p },
                 "border-b",
                 "border-b-gray-200",
                 "dark:text-metal-50",
@@ -51,8 +52,8 @@ const G = ({
               ),
               "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;
+              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;
                 return /* @__PURE__ */ a(
                   "td",
                   {
@@ -67,40 +68,40 @@ const G = ({
                       "dark:first:border-l",
                       "dark:last:border-r",
                       {
-                        "group-hover/row:bg-zinc-100 dark:group-hover/row:bg-metal-800": b,
+                        "group-hover/row:bg-zinc-100 dark:group-hover/row:bg-metal-800": p,
                         [s(
                           "bg-zinc-100 dark:bg-metal-800",
-                          E
+                          v
                         )]: !!e
                       },
-                      R,
-                      z,
+                      E,
+                      F,
                       {
-                        "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,
+                        "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,
                         "dark:[tr:last-child_&]:border-b": !t
                       }
                     ),
                     "data-expanded": e ? !0 : void 0,
                     ...r.columnDef.meta?.attributes ?? {},
-                    children: S(r.columnDef.cell, D())
+                    children: j(r.columnDef.cell, z())
                   },
-                  C
+                  D
                 );
               })
             }
           ),
-          y && /* @__PURE__ */ a(
-            M,
+          C && /* @__PURE__ */ a(
+            A,
             {
-              classNameExpandedCell: k,
-              classNameExpandedContent: w,
+              classNameExpandedCell: R,
+              classNameExpandedContent: k,
               classNameExpandedRow: N,
-              colSpan: m.length,
+              colSpan: c.length,
               id: n,
               isExpanded: !!e,
               isLastRow: l === o.length - 1 && !t,
-              children: d.expandedRow
+              children: d.expandedRow ?? i?.(m)
             }
           )
         ] }, n);
@@ -109,5 +110,5 @@ const G = ({
   );
 };
 export {
-  G as Body
+  J 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,7 @@ export type ContextType<TData extends RowData = RowData> = {
     classNameActiveExpandedRow?: string;
     enableHoverRow?: boolean;
     classNameHoverRow?: string;
+    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;