@konstructio/ui 0.1.2-alpha.15 → 0.1.2-alpha.16

package/dist/components/VirtualizedTable/VirtualizedTable.js

@@ -1,14 +1,14 @@
 import { jsx as r, jsxs as m } from "react/jsx-runtime";
-import { useMemo as H } from "react";
+import { useMemo as I } from "react";
 import { cn as s } from "../../utils/index.js";
-import { TableProvider as I } from "./contexts/table.provider.js";
-import { Filter as K } from "./components/Filter/Filter.js";
-import { Header as M } from "./components/Header/Header.js";
-import { Body as P } from "./components/Body/Body.js";
-import { Pagination as k } from "./components/Pagination/Pagination.js";
-import { TruncateText as q } from "./components/TruncateText/TruncateText.js";
-import { Actions as C } from "./components/Actions/Actions.js";
-const E = ({
+import { TableProvider as K } from "./contexts/table.provider.js";
+import { Filter as M } from "./components/Filter/Filter.js";
+import { Header as P } 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 E } from "./components/Actions/Actions.js";
+const F = ({
   id: c,
   ariaLabel: n,
   columns: d,
@@ -21,23 +21,24 @@ const E = ({
   classNameTable: h,
   classNameWrapperTable: x,
   fetchData: A,
+  queryOptions: v,
   // Pagination
-  showPagination: v,
+  showPagination: y,
   showTotalItems: o,
   showDropdownPagination: i,
   showDotPagination: a,
   showFormPagination: l,
-  pageSizes: y,
+  pageSizes: z,
   // Filter
-  showFilter: z = !1,
-  showFilterInput: V,
-  filterSearchPlaceholder: g = "",
-  multiSelectFilter: j,
-  filterActions: w,
-  showResetButton: B = !0
+  showFilter: V = !1,
+  showFilterInput: g,
+  filterSearchPlaceholder: j = "",
+  multiSelectFilter: w,
+  filterActions: B,
+  showResetButton: H = !0
 }) => {
-  const t = H(
-    () => v || [
+  const t = I(
+    () => y || [
       o,
       i,
       a,
@@ -46,22 +47,23 @@ const E = ({
     []
   );
   return /* @__PURE__ */ r(
-    I,
+    K,
     {
       id: c,
       columns: d,
       data: f,
       fetchData: A,
       totalItems: p,
+      queryOptions: v,
       children: /* @__PURE__ */ m("section", { className: u, children: [
-        z && /* @__PURE__ */ r(
-          K,
+        V && /* @__PURE__ */ r(
+          M,
           {
-            actions: w,
-            multiSelectFilter: j,
-            placeholder: g,
-            showFilterInput: V,
-            showResetButton: B
+            actions: B,
+            multiSelectFilter: w,
+            placeholder: j,
+            showFilterInput: g,
+            showResetButton: H
           }
         ),
         /* @__PURE__ */ r(
@@ -81,37 +83,37 @@ const E = ({
                 "aria-label": n,
                 children: [
                   /* @__PURE__ */ r(
-                    M,
+                    P,
                     {
                       className: N,
                       classNameArrows: T,
                       classNameActiveArrows: b
                     }
                   ),
-                  /* @__PURE__ */ r(P, {})
+                  /* @__PURE__ */ r(k, {})
                 ]
               }
             )
           }
         ),
         t && /* @__PURE__ */ r(
-          k,
+          q,
           {
             showTotalItems: o,
             showDropdownPagination: i,
             showDotPagination: a,
             showFormPagination: l,
-            pageSizes: y
+            pageSizes: z
           }
         )
       ] })
     }
   );
-}, e = E;
+}, e = F;
 e.displayName = "KonstructVirtualizedTable";
-e.TruncateText = q;
-e.Actions = C;
+e.TruncateText = C;
+e.Actions = E;
 export {
-  q as TruncateText,
+  C as TruncateText,
   e as VirtualizedTable
 };

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

@@ -1,82 +1,84 @@
-import { jsx as z } from "react/jsx-runtime";
-import { useQuery as E } from "@tanstack/react-query";
-import { u as _, g as j, a as k } from "../../../index-Dx2grAuN.js";
-import { useState as t, useMemo as q, useCallback as n } from "react";
-import { TableContext as A } from "./table.context.js";
-import { DEFAULT_PAGE_SIZE as K } from "../constants/pagination.js";
-const Z = ({
-  children: d,
-  id: u,
-  data: S = [],
-  columns: f = [],
-  totalItems: h,
-  fetchData: p
+import { jsx as E } from "react/jsx-runtime";
+import { useQuery as _ } from "@tanstack/react-query";
+import { u as j, g as k, a as q } from "../../../index-Dx2grAuN.js";
+import { useState as t, useMemo as A, useCallback as n } from "react";
+import { TableContext as K } from "./table.context.js";
+import { DEFAULT_PAGE_SIZE as G } from "../constants/pagination.js";
+const B = ({
+  children: S,
+  id: r,
+  data: f = [],
+  columns: h = [],
+  totalItems: p,
+  fetchData: g,
+  queryOptions: M = {}
 }) => {
-  const [i, g] = t([]), [r, m] = t(0), [c, M] = t(), [o, C] = t(K), [l, b] = t(h), P = q(
-    () => Math.ceil(l / o),
-    [l, o]
-  ), [a, w] = t({}), { data: y, isLoading: O, isFetching: T } = E({
+  const [m, u] = t([]), [c, d] = t(0), [l, C] = t(), [o, b] = t(G), [i, y] = t(p), P = A(
+    () => Math.ceil(i / o),
+    [i, o]
+  ), [a, w] = t({}), { data: O, isLoading: T, isFetching: F } = _({
     queryKey: [
-      u,
-      r,
-      o,
+      ...typeof r == "string" ? [r] : r,
       c,
+      o,
+      l,
       JSON.stringify(a)
     ],
     refetchOnMount: !1,
     refetchOnWindowFocus: !1,
-    initialData: S,
-    queryFn: () => p({
-      page: Math.max(r + 1, 1),
+    initialData: f,
+    queryFn: g ? () => g({
+      page: Math.max(c + 1, 1),
       pageSize: o,
-      termOfSearch: c,
+      termOfSearch: l,
       ...Object.keys(a).length > 0 ? a : {}
-    }).then(({ data: e, totalItemsCount: s }) => (s && b(s), e))
-  }), F = n((e) => {
-    M(e), m(0);
-  }, []), R = n((e, s) => {
-    const L = e.toLowerCase().replace(/\s+/g, "_");
-    w((v) => ({
-      ...v,
-      [L]: s
+    }).then(({ data: e, totalItemsCount: s }) => (s && y(s), e)) : void 0,
+    ...M
+  }), R = n((e) => {
+    C(e), d(0);
+  }, []), v = n((e, s) => {
+    const z = e.toLowerCase().replace(/\s+/g, "_");
+    w((D) => ({
+      ...D,
+      [z]: s
     }));
-  }, []), x = n((e) => m(e), []), D = n(
-    (e) => C(e),
+  }, []), x = n((e) => d(e), []), I = n(
+    (e) => b(e),
     []
-  ), I = _({
-    data: y,
-    columns: f,
+  ), L = j({
+    data: O,
+    columns: h,
     state: {
-      sorting: i
+      sorting: m
     },
-    onSortingChange: g,
-    getCoreRowModel: k(),
-    getSortedRowModel: j()
+    onSortingChange: u,
+    getCoreRowModel: q(),
+    getSortedRowModel: k()
   });
-  return /* @__PURE__ */ z(
-    A.Provider,
+  return /* @__PURE__ */ E(
+    K.Provider,
     {
       value: {
-        sortedData: i,
-        table: I,
-        tableFetching: T,
-        tableLoading: O,
-        totalItems: l,
-        termOfSearch: c,
-        page: r,
+        sortedData: m,
+        table: L,
+        tableFetching: F,
+        tableLoading: T,
+        totalItems: i,
+        termOfSearch: l,
+        page: c,
         multiselectSelected: a,
         pageSize: o,
         totalPages: P,
         handlePage: x,
-        onPageSize: D,
-        onChangeTermOfSearch: F,
-        onSorting: g,
-        onSelectMultiselect: R
+        onPageSize: I,
+        onChangeTermOfSearch: R,
+        onSorting: u,
+        onSelectMultiselect: v
       },
-      children: d
+      children: S
     }
   );
 };
 export {
-  Z as TableProvider
+  B as TableProvider
 };

package/dist/index.d.ts

@@ -23,6 +23,7 @@ import { RefAttributes } from 'react';
 import { RowData as RowData_2 } from '@tanstack/react-table';
 import { SliderProps } from '@radix-ui/react-slider';
 import { TabsContentProps } from '@radix-ui/react-tabs';
+import { UseQueryOptions } from '@tanstack/react-query';
 import { VariantProps } from 'class-variance-authority';
 
 declare type Action<TData> = {
@@ -577,7 +578,7 @@ declare type Props_3<TData extends RowData> = CellContext<TData, string> & {
 };
 
 declare type Props_4<TData extends RowData_2> = VariantProps<typeof virtualizeTableVariants> & {
-    id: string;
+    id: string | string[];
     ariaLabel?: string;
     columns: ColumnDef_2<TData, string>[];
     data: TData[];
@@ -587,7 +588,8 @@ declare type Props_4<TData extends RowData_2> = VariantProps<typeof virtualizeTa
     classNameHeaderTable?: string;
     classNameTable?: string;
     classNameWrapperTable?: string;
-    fetchData: (params: Record<string, string | number | string[] | number[] | undefined>) => Promise<{
+    queryOptions?: Omit<UseQueryOptions<any, any, any, any>, 'queryKey' | 'queryFn'>;
+    fetchData?: (params: Record<string, string | number | string[] | number[] | undefined>) => Promise<{
         data: TData[];
         totalItemsCount?: number;
     }>;

package/dist/package.json

@@ -2,7 +2,7 @@
   "name": "@konstructio/ui",
   "description": "A set of reusable and customizable React components built for konstruct.io",
   "private": false,
-  "version": "0.1.2-alpha.14",
+  "version": "0.1.2-alpha.15",
   "type": "module",
   "license": "MIT",
   "main": "dist/index.js",

package/package.json

@@ -2,7 +2,7 @@
   "name": "@konstructio/ui",
   "description": "A set of reusable and customizable React components built for konstruct.io",
   "private": false,
-  "version": "0.1.2-alpha.15",
+  "version": "0.1.2-alpha.16",
   "type": "module",
   "license": "MIT",
   "main": "dist/index.js",