@rowakit/table 0.5.0 → 1.0.0

package/dist/index.d.cts

@@ -242,6 +242,16 @@ type ExporterResult = {
 } | Blob;
 type Exporter = (query: FetcherQuery) => Promise<ExporterResult>;
 
+interface BulkActionDef {
+    id: string;
+    label: string;
+    confirm?: {
+        title: string;
+        description?: string;
+    };
+    onClick: (selectedKeys: Array<string | number>) => void;
+}
+
 /**
  * Column helper factory functions
  *
@@ -479,16 +489,6 @@ declare const col: {
     readonly custom: typeof custom;
 };
 
-interface BulkActionDef {
-    id: string;
-    label: string;
-    confirm?: {
-        title: string;
-        description?: string;
-    };
-    onClick: (selectedKeys: Array<string | number>) => void;
-}
-
 interface SmartTableProps<T> {
     /** Server-side data fetcher function */
     fetcher: Fetcher<T>;
@@ -586,4 +586,4 @@ declare const SmartTable: typeof RowaKitTable;
 
 declare const VERSION: string;
 
-export { type ActionDef, type ActionsColumnDef, type BadgeColumnDef, type BadgeTone, type BaseColumnDef, type BooleanColumnDef, type ColumnDef, type ColumnKind, type CustomColumnDef, type DateColumnDef, type Exporter, type ExporterResult, type Fetcher, type FetcherQuery, type FetcherResult, type FilterValue, type Filters, type NumberColumnDef, RowaKitTable, SmartTable, type SmartTableProps, type TextColumnDef, VERSION, col };
+export { type ActionDef, type ActionsColumnDef, type BadgeColumnDef, type BadgeTone, type BaseColumnDef, type BooleanColumnDef, type BulkActionDef, type ColumnDef, type ColumnKind, type CustomColumnDef, type DateColumnDef, type Exporter, type ExporterResult, type Fetcher, type FetcherQuery, type FetcherResult, type FilterValue, type Filters, type NumberColumnDef, RowaKitTable, SmartTable, type SmartTableProps, type SortColumn, type TextColumnDef, VERSION, col };

package/dist/index.d.ts

@@ -242,6 +242,16 @@ type ExporterResult = {
 } | Blob;
 type Exporter = (query: FetcherQuery) => Promise<ExporterResult>;
 
+interface BulkActionDef {
+    id: string;
+    label: string;
+    confirm?: {
+        title: string;
+        description?: string;
+    };
+    onClick: (selectedKeys: Array<string | number>) => void;
+}
+
 /**
  * Column helper factory functions
  *
@@ -479,16 +489,6 @@ declare const col: {
     readonly custom: typeof custom;
 };
 
-interface BulkActionDef {
-    id: string;
-    label: string;
-    confirm?: {
-        title: string;
-        description?: string;
-    };
-    onClick: (selectedKeys: Array<string | number>) => void;
-}
-
 interface SmartTableProps<T> {
     /** Server-side data fetcher function */
     fetcher: Fetcher<T>;
@@ -586,4 +586,4 @@ declare const SmartTable: typeof RowaKitTable;
 
 declare const VERSION: string;
 
-export { type ActionDef, type ActionsColumnDef, type BadgeColumnDef, type BadgeTone, type BaseColumnDef, type BooleanColumnDef, type ColumnDef, type ColumnKind, type CustomColumnDef, type DateColumnDef, type Exporter, type ExporterResult, type Fetcher, type FetcherQuery, type FetcherResult, type FilterValue, type Filters, type NumberColumnDef, RowaKitTable, SmartTable, type SmartTableProps, type TextColumnDef, VERSION, col };
+export { type ActionDef, type ActionsColumnDef, type BadgeColumnDef, type BadgeTone, type BaseColumnDef, type BooleanColumnDef, type BulkActionDef, type ColumnDef, type ColumnKind, type CustomColumnDef, type DateColumnDef, type Exporter, type ExporterResult, type Fetcher, type FetcherQuery, type FetcherResult, type FilterValue, type Filters, type NumberColumnDef, RowaKitTable, SmartTable, type SmartTableProps, type SortColumn, type TextColumnDef, VERSION, col };

package/dist/index.js

@@ -567,11 +567,22 @@ function parseUrlState(params, defaultPageSize, pageSizeOptions) {
     } catch {
     }
   }
+  if (!result.sorts) {
+    const sortStr = params.get("sort");
+    if (sortStr) {
+      const [field, dir] = sortStr.split(":");
+      if (field && (dir === "asc" || dir === "desc")) {
+        result.sort = { field, direction: dir };
+        result.sorts = [{ field, direction: dir, priority: 0 }];
+      }
+    }
+  }
   if (!result.sorts) {
     const sortField = params.get("sortField");
     const sortDir = params.get("sortDirection");
     if (sortField && (sortDir === "asc" || sortDir === "desc")) {
       result.sort = { field: sortField, direction: sortDir };
+      result.sorts = [{ field: sortField, direction: sortDir, priority: 0 }];
     }
   }
   const filtersStr = params.get("filters");
@@ -643,40 +654,59 @@ function useUrlSync({
   setColumnWidths
 }) {
   const didHydrateUrlRef = useRef(false);
-  const didSkipInitialUrlSyncRef = useRef(false);
   const urlSyncDebounceRef = useRef(null);
+  const isApplyingUrlStateRef = useRef(false);
+  const clearApplyingTimerRef = useRef(null);
+  const hasWrittenUrlRef = useRef(false);
+  const lastQueryForUrlRef = useRef(null);
+  const defaultPageSizeRef = useRef(defaultPageSize);
+  const pageSizeOptionsRef = useRef(pageSizeOptions);
+  const enableColumnResizingRef = useRef(enableColumnResizing);
+  const columnsRef = useRef(columns);
+  defaultPageSizeRef.current = defaultPageSize;
+  pageSizeOptionsRef.current = pageSizeOptions;
+  enableColumnResizingRef.current = enableColumnResizing;
+  columnsRef.current = columns;
   useEffect(() => {
     if (!syncToUrl) {
-      didSkipInitialUrlSyncRef.current = false;
-      return;
-    }
-    if (!didSkipInitialUrlSyncRef.current) {
-      didSkipInitialUrlSyncRef.current = true;
+      hasWrittenUrlRef.current = false;
+      lastQueryForUrlRef.current = null;
       return;
     }
+    if (!didHydrateUrlRef.current) return;
+    if (isApplyingUrlStateRef.current) return;
     if (urlSyncDebounceRef.current) {
       clearTimeout(urlSyncDebounceRef.current);
       urlSyncDebounceRef.current = null;
     }
-    const urlStr = serializeUrlState(query, filters, columnWidths, defaultPageSize, enableColumnResizing);
+    const urlStr = serializeUrlState(query, filters, columnWidths, defaultPageSizeRef.current, enableColumnResizingRef.current);
     const qs = urlStr ? `?${urlStr}` : "";
-    window.history.replaceState(null, "", `${window.location.pathname}${qs}${window.location.hash}`);
+    const nextUrl = `${window.location.pathname}${qs}${window.location.hash}`;
+    const prevQuery = lastQueryForUrlRef.current;
+    const shouldPush = hasWrittenUrlRef.current && prevQuery != null && prevQuery.page !== query.page;
+    if (shouldPush) {
+      window.history.pushState(null, "", nextUrl);
+    } else {
+      window.history.replaceState(null, "", nextUrl);
+    }
+    hasWrittenUrlRef.current = true;
+    lastQueryForUrlRef.current = query;
   }, [
     query,
     filters,
     syncToUrl,
-    enableColumnResizing,
-    defaultPageSize,
     columnWidths
   ]);
   useEffect(() => {
-    if (!syncToUrl || !enableColumnResizing) return;
-    if (!didSkipInitialUrlSyncRef.current) return;
+    if (!syncToUrl || !enableColumnResizingRef.current) return;
+    if (!didHydrateUrlRef.current) return;
+    if (!hasWrittenUrlRef.current) return;
+    if (isApplyingUrlStateRef.current) return;
     if (urlSyncDebounceRef.current) {
       clearTimeout(urlSyncDebounceRef.current);
     }
     urlSyncDebounceRef.current = setTimeout(() => {
-      const urlStr = serializeUrlState(query, filters, columnWidths, defaultPageSize, enableColumnResizing);
+      const urlStr = serializeUrlState(query, filters, columnWidths, defaultPageSizeRef.current, enableColumnResizingRef.current);
       const qs = urlStr ? `?${urlStr}` : "";
       window.history.replaceState(null, "", `${window.location.pathname}${qs}${window.location.hash}`);
       urlSyncDebounceRef.current = null;
@@ -690,36 +720,52 @@ function useUrlSync({
   }, [
     columnWidths,
     syncToUrl,
-    enableColumnResizing,
     query,
-    filters,
-    defaultPageSize
+    filters
   ]);
-  useEffect(() => {
-    if (!syncToUrl) {
-      didHydrateUrlRef.current = false;
-      return;
+  function scheduleClearApplyingFlag() {
+    if (clearApplyingTimerRef.current) {
+      clearTimeout(clearApplyingTimerRef.current);
+      clearApplyingTimerRef.current = null;
     }
-    if (didHydrateUrlRef.current) return;
-    didHydrateUrlRef.current = true;
+    clearApplyingTimerRef.current = setTimeout(() => {
+      isApplyingUrlStateRef.current = false;
+      clearApplyingTimerRef.current = null;
+    }, 0);
+  }
+  function applyUrlToState() {
     const params = new URLSearchParams(window.location.search);
-    const parsed = parseUrlState(params, defaultPageSize, pageSizeOptions);
-    setQuery({
+    const parsed = parseUrlState(params, defaultPageSizeRef.current, pageSizeOptionsRef.current);
+    const nextQuery = {
       page: parsed.page,
       pageSize: parsed.pageSize,
       sort: parsed.sort,
       sorts: parsed.sorts,
       filters: parsed.filters
-    });
-    if (parsed.filters) {
-      setFilters(parsed.filters);
+    };
+    isApplyingUrlStateRef.current = true;
+    scheduleClearApplyingFlag();
+    setQuery(nextQuery);
+    setFilters(parsed.filters ?? {});
+    if (!hasWrittenUrlRef.current) {
+      const urlStr = serializeUrlState(
+        nextQuery,
+        parsed.filters ?? {},
+        parsed.columnWidths ?? {},
+        defaultPageSizeRef.current,
+        enableColumnResizingRef.current
+      );
+      const qs = urlStr ? `?${urlStr}` : "";
+      window.history.replaceState(null, "", `${window.location.pathname}${qs}${window.location.hash}`);
+      hasWrittenUrlRef.current = true;
+      lastQueryForUrlRef.current = nextQuery;
     }
-    if (parsed.columnWidths && enableColumnResizing) {
+    if (enableColumnResizingRef.current && parsed.columnWidths) {
       const clamped = {};
       for (const [colId, rawWidth] of Object.entries(parsed.columnWidths)) {
         const widthNum = typeof rawWidth === "number" ? rawWidth : Number(rawWidth);
         if (!Number.isFinite(widthNum)) continue;
-        const colDef = columns.find((c) => c.id === colId);
+        const colDef = columnsRef.current.find((c) => c.id === colId);
         if (!colDef) continue;
         const minW = colDef.minWidth ?? 80;
         const maxW = colDef.maxWidth;
@@ -730,17 +776,44 @@ function useUrlSync({
         clamped[colId] = finalW;
       }
       setColumnWidths(clamped);
+    } else if (enableColumnResizingRef.current) {
+      setColumnWidths({});
     }
+  }
+  useEffect(() => {
+    if (!syncToUrl) {
+      didHydrateUrlRef.current = false;
+      hasWrittenUrlRef.current = false;
+      lastQueryForUrlRef.current = null;
+      return;
+    }
+    if (didHydrateUrlRef.current) return;
+    didHydrateUrlRef.current = true;
+    applyUrlToState();
   }, [
     syncToUrl,
-    defaultPageSize,
-    enableColumnResizing,
-    pageSizeOptions,
-    columns,
     setQuery,
     setFilters,
     setColumnWidths
   ]);
+  useEffect(() => {
+    if (!syncToUrl) return;
+    const onPopState = () => {
+      applyUrlToState();
+    };
+    window.addEventListener("popstate", onPopState);
+    return () => {
+      window.removeEventListener("popstate", onPopState);
+    };
+  }, [syncToUrl, setQuery, setFilters, setColumnWidths]);
+  useEffect(() => {
+    return () => {
+      if (clearApplyingTimerRef.current) {
+        clearTimeout(clearApplyingTimerRef.current);
+        clearApplyingTimerRef.current = null;
+      }
+    };
+  }, []);
 }
 var FOCUSABLE_SELECTORS = [
   "button",
@@ -1091,9 +1164,13 @@ function RowaKitTable({
   const headerChecked = isAllSelected(selectedKeys, pageRowKeys);
   const headerIndeterminate = isIndeterminate(selectedKeys, pageRowKeys);
   useEffect(() => {
-    if (!enableRowSelection) return;
     setSelectedKeys(clearSelection());
-  }, [enableRowSelection, query.page, dataState.items]);
+  }, [query.page]);
+  useEffect(() => {
+    if (!enableRowSelection) {
+      setSelectedKeys(clearSelection());
+    }
+  }, [enableRowSelection]);
   useEffect(() => {
     if (!enableRowSelection || !onSelectionChange) return;
     onSelectionChange(selectedKeys);
@@ -1770,7 +1847,7 @@ function RowaKitTable({
 var SmartTable = RowaKitTable;
 
 // src/index.ts
-var VERSION = "0.5.0" ;
+var VERSION = "1.0.0" ;
 
 export { RowaKitTable, SmartTable, VERSION, col };
 //# sourceMappingURL=index.js.map