@snowpact/react-tanstack-query-table 1.1.0 → 1.1.2

package/dist/index.d.ts

@@ -60,7 +60,7 @@ export declare type BaseAction = {
 };
 
 /**
- * Base props shared between SnowClientTable and SnowServerTable
+ * Base props shared between SnowClientDataTable and SnowServerDataTable
  */
 export declare interface BaseSnowTableProps<T extends Record<string, unknown>, K> extends DataTableUIOptions<T> {
     queryKey: string[];
@@ -160,6 +160,7 @@ export declare type DataTableProps<T extends object> = {
 };
 
 declare interface DataTableStyles {
+    root: string;
     container: string;
     header: string;
     headerCell: string;
@@ -375,12 +376,12 @@ export declare interface SingleFilterDropdownProps<T extends object> {
     onFilterChange: (key: keyof T, selectedValues: string[]) => void;
 }
 
-export declare const SnowClientTable: <T extends Record<string, unknown>, K>({ queryKey, columnConfig, actions, filters, prefilters, prefilterFn, defaultSortBy, defaultSortOrder, defaultPageSize, persistState, fetchAllItemsEndpoint, ...restProps }: SnowClientTableProps<T, K>) => JSX.Element;
+export declare const SnowClientDataTable: <T extends Record<string, unknown>, K>({ queryKey, columnConfig, actions, filters, prefilters, prefilterFn, defaultSortBy, defaultSortOrder, defaultPageSize, persistState, fetchAllItemsEndpoint, ...restProps }: SnowClientDataTableProps<T, K>) => JSX.Element;
 
 /**
- * Props for SnowClientTable component (client-side filtering/sorting)
+ * Props for SnowClientDataTable component (client-side filtering/sorting)
  */
-export declare interface SnowClientTableProps<T extends Record<string, unknown>, K> extends BaseSnowTableProps<T, K> {
+export declare interface SnowClientDataTableProps<T extends Record<string, unknown>, K> extends BaseSnowTableProps<T, K> {
     fetchAllItemsEndpoint: () => Promise<T[]>;
     /** Optional function to filter items based on active prefilter */
     prefilterFn?: (item: T, prefilterId: string) => boolean;
@@ -396,12 +397,12 @@ export declare type SnowColumnConfig<T extends object> = {
     meta?: ColumnMeta<T, unknown>;
 };
 
-export declare const SnowServerTable: <T extends Record<string, unknown>, K>({ queryKey, columnConfig, actions, filters, prefilters, defaultSortBy, defaultSortOrder, defaultPageSize, persistState, fetchServerEndpoint, ...restProps }: SnowServerTableProps<T, K>) => JSX.Element;
+export declare const SnowServerDataTable: <T extends Record<string, unknown>, K>({ queryKey, columnConfig, actions, filters, prefilters, defaultSortBy, defaultSortOrder, defaultPageSize, persistState, fetchServerEndpoint, ...restProps }: SnowServerDataTableProps<T, K>) => JSX.Element;
 
 /**
- * Props for SnowServerTable component (server-side pagination/filtering/sorting)
+ * Props for SnowServerDataTable component (server-side pagination/filtering/sorting)
  */
-export declare interface SnowServerTableProps<T extends Record<string, unknown>, K> extends BaseSnowTableProps<T, K> {
+export declare interface SnowServerDataTableProps<T extends Record<string, unknown>, K> extends BaseSnowTableProps<T, K> {
     fetchServerEndpoint: (params: ServerFetchParams) => Promise<ServerPaginatedResponse<T>>;
     filters?: FilterConfig<Record<string, unknown>>[];
 }
@@ -442,7 +443,7 @@ declare interface UseConfirmReturn {
 }
 
 /**
- * Shared hook for building columns and handling actions in SnowClientTable and SnowServerTable.
+ * Shared hook for building columns and handling actions in SnowClientDataTable and SnowServerDataTable.
  *
  * Extracts the common logic for:
  * - Transforming SnowColumnConfig into TanStack Table ColumnDef

package/dist/index.js

@@ -59,9 +59,9 @@ const na = (e) => {
   lr = e;
 }, oa = () => lr, ra = {
   state: {
-    active: "ring-2 ring-inset ring-primary/30",
-    activeText: "text-primary",
-    focus: "focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-2"
+    active: "ring-2 ring-ring/30",
+    activeText: "text-foreground",
+    focus: "focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:ring-offset-2"
   },
   button: {
     visual: "border border-input bg-background rounded-md shadow-xs",
@@ -72,7 +72,7 @@ const na = (e) => {
     info: "border-transparent bg-blue-500 text-white shadow-xs hover:bg-blue-600",
     success: "border-transparent bg-green-500 text-white shadow-xs hover:bg-green-600"
   },
-  input: "rounded-md border border-input bg-background focus-visible:border-primary focus-visible:ring-primary/50 focus-visible:ring-[3px]",
+  input: "rounded-md border border-input bg-background focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
   skeleton: "rounded-md bg-muted animate-pulse",
   dropdown: {
     content: "rounded-md border bg-popover text-popover-foreground shadow-md",
@@ -81,7 +81,7 @@ const na = (e) => {
     separator: "bg-muted"
   },
   select: {
-    trigger: "rounded-md border border-input bg-background focus:ring-2 focus:ring-primary focus:ring-offset-2",
+    trigger: "rounded-md border border-input bg-background focus:ring-2 focus:ring-ring focus:ring-offset-2",
     content: "rounded-md border bg-popover text-popover-foreground shadow-md",
     item: "hover:bg-accent hover:text-accent-foreground",
     itemSelected: "bg-accent text-accent-foreground"
@@ -92,6 +92,7 @@ const na = (e) => {
     triggerActive: "data-[state=active]:bg-background data-[state=active]:text-foreground"
   },
   table: {
+    root: "w-full",
     container: "rounded-lg border",
     header: "bg-muted",
     headerCell: "text-muted-foreground",
@@ -886,7 +887,7 @@ const Ca = (e, t, n, o) => {
   cellContent: {
     base: "w-full"
   }
-}, Ra = "inline-flex items-center justify-center gap-1.5 whitespace-nowrap h-8 px-3 text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary/50 focus-visible:ring-offset-1 disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", Te = or(
+}, Ra = "inline-flex items-center justify-center gap-1.5 whitespace-nowrap h-8 px-3 text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring/50 focus-visible:ring-offset-1 disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", Te = or(
   ({
     children: e,
     variant: t = "default",
@@ -5735,7 +5736,7 @@ function bs(e, t) {
   return `${e}-content-${t}`;
 }
 var jf = ps, Yf = hs, Xf = vs;
-const Zf = "inline-flex h-9 w-fit items-center justify-center p-[3px]", qf = 'inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 px-2 py-1 text-sm font-medium whitespace-nowrap border border-transparent transition-[color,box-shadow] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*="size-"])]:size-4';
+const Zf = "inline-flex h-9 w-fit items-center justify-center p-[3px]", qf = 'inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 px-2 py-1 text-sm font-medium whitespace-nowrap border border-transparent transition-[color,box-shadow] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*="size-"])]:size-4';
 function Jf({ value: e, onValueChange: t, children: n }) {
   return /* @__PURE__ */ p(jf, { value: e, onValueChange: t, children: n });
 }
@@ -5973,10 +5974,10 @@ function Cs({
     const Q = String(Y), ge = { ...U };
     J.length === 0 ? delete ge[Q] : ge[Q] = J, se(ge);
   }, Ps = d || I || c && c.length > 0 || T, go = Re(() => he ? e.length : _e.getRowModel().rows.length, [he, e.length, _e]), Is = Re(() => he && s !== void 0 ? s : _e.getFilteredRowModel().rows.length, [he, s, _e]);
-  return /* @__PURE__ */ F("div", { className: "relative flex flex-col flex-1", "data-testid": "datatable", children: [
+  return /* @__PURE__ */ F("div", { className: X("relative flex flex-col flex-1", k.table.root), "data-testid": "datatable", children: [
     o && !n && /* @__PURE__ */ p("div", { className: X("absolute inset-0 z-10 pointer-events-none", k.table.loadingOverlay) }),
     Ps && /* @__PURE__ */ F("div", { className: "flex flex-col sm:flex-row sm:items-center sm:justify-between py-4 gap-4", children: [
-      /* @__PURE__ */ p("div", { className: "flex items-center gap-2 overflow-x-auto", children: w && w.length > 0 && v && /* @__PURE__ */ p(
+      /* @__PURE__ */ p("div", { className: "flex items-center gap-2", children: w && w.length > 0 && v && /* @__PURE__ */ p(
         tp,
         {
           prefilters: w,
@@ -6129,7 +6130,7 @@ function ap({ item: e, actions: t, onAction: n }) {
             to: w,
             target: g.external ? "_blank" : void 0,
             rel: g.external ? "noopener noreferrer" : void 0,
-            className: `inline-flex items-center justify-center gap-1.5 whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-8 rounded-md ${c.showLabel ? "px-3" : "w-8"}`,
+            className: `inline-flex items-center justify-center gap-1.5 whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-8 rounded-md ${c.showLabel ? "px-3" : "w-8"}`,
             "aria-disabled": c.disabled,
             onMouseEnter: (m) => r(c.label, m.currentTarget),
             onMouseLeave: i,
@@ -6431,8 +6432,8 @@ export {
   tp as PrefilterTabs,
   rp as SearchBar,
   ip as SingleFilterDropdown,
-  vp as SnowClientTable,
-  wp as SnowServerTable,
+  vp as SnowClientDataTable,
+  wp as SnowServerDataTable,
   sp as SortButton,
   mp as isSnowTableSetup,
   hp as redirectToPageWithParam,