@dreamtree-org/twreact-ui 1.0.72 → 1.0.74

package/dist/index.js

@@ -276,6 +276,26 @@ const ChevronUp = createLucideIcon$1("ChevronUp", [
  */
 
 
+const ChevronsLeft = createLucideIcon$1("ChevronsLeft", [
+  ["path", { d: "m11 17-5-5 5-5", key: "13zhaf" }],
+  ["path", { d: "m18 17-5-5 5-5", key: "h8a8et" }]
+]);
+
+/**
+ * lucide-react v0.0.1 - ISC
+ */
+
+
+const ChevronsRight = createLucideIcon$1("ChevronsRight", [
+  ["path", { d: "m6 17 5-5-5-5", key: "xnjwq" }],
+  ["path", { d: "m13 17 5-5-5-5", key: "17xmmf" }]
+]);
+
+/**
+ * lucide-react v0.0.1 - ISC
+ */
+
+
 const EyeOff = createLucideIcon$1("EyeOff", [
   ["path", { d: "M9.88 9.88a3 3 0 1 0 4.24 4.24", key: "1jxqfv" }],
   [
@@ -4146,9 +4166,10 @@ var Table = function Table(_ref) {
   React.useEffect(function () {
     if (typeof pageNumber === "number" && pageNumber !== currentPage) {
       setCurrentPage(pageNumber);
-      onPageChange === null || onPageChange === void 0 || onPageChange(pageNumber);
+      // Note: onPageChange is intentionally not called here to avoid loops
+      // Parent should handle page changes via controlled component pattern
     }
-  }, [pageNumber, currentPage, onPageChange]);
+  }, [pageNumber, currentPage]);
   React.useEffect(function () {
     setLimit(pageSize);
   }, [pageSize]);
@@ -4214,6 +4235,12 @@ var Table = function Table(_ref) {
     });
     return map;
   }, [filteredData]);
+
+  // Wrapper for setCurrentPage that also calls onPageChange
+  var handlePageChange = React.useCallback(function (newPage) {
+    setCurrentPage(newPage);
+    onPageChange === null || onPageChange === void 0 || onPageChange(newPage);
+  }, [onPageChange]);
   var toggleColumnVisibility = React.useCallback(function (key) {
     setColumnsState(function (prev) {
       return prev.map(function (c) {
@@ -4222,8 +4249,8 @@ var Table = function Table(_ref) {
         }) : c;
       });
     });
-    setCurrentPage(1);
-  }, []);
+    handlePageChange(1);
+  }, [handlePageChange]);
 
   // Handle actions
   var handleOnAction = React.useCallback(function (action, row) {
@@ -4257,13 +4284,26 @@ var Table = function Table(_ref) {
   // Filtering
   var filteredData = React.useMemo(function () {
     if (serverSide || !filterable || !Object.keys(filters).length) return sortedData;
-    var q = (filters.global || "").toLowerCase();
     return sortedData.filter(function (row) {
-      return Object.values(row || {}).some(function (v) {
-        return String(v).toLowerCase().includes(q);
+      // Apply global search filter if present
+      if (filters.global) {
+        var q = filters.global.toLowerCase();
+        var matchesGlobal = Object.values(row || {}).some(function (v) {
+          return String(v).toLowerCase().includes(q);
+        });
+        if (!matchesGlobal) return false;
+      }
+
+      // Apply column-specific filters
+      return visibleColumns.every(function (column) {
+        var columnFilter = filters[column.key];
+        if (!columnFilter) return true; // No filter for this column
+
+        var cellValue = row === null || row === void 0 ? void 0 : row[column.key];
+        return String(cellValue || "").toLowerCase().includes(columnFilter.toLowerCase());
       });
     });
-  }, [sortedData, filters, filterable, serverSide]);
+  }, [sortedData, filters, filterable, serverSide, visibleColumns]);
 
   // Pagination indices - memoized
   var _useMemo = React.useMemo(function () {
@@ -4350,8 +4390,8 @@ var Table = function Table(_ref) {
       onFilterChange === null || onFilterChange === void 0 || onFilterChange(newFilters);
       return newFilters;
     });
-    setCurrentPage(1);
-  }, [onFilter, onFilterChange]);
+    handlePageChange(1);
+  }, [onFilter, onFilterChange, handlePageChange]);
   var renderCell = React.useCallback(function (column, row, globalIndex) {
     if (column.render) return column.render(row, globalIndex);
     return row === null || row === void 0 ? void 0 : row[column.key];
@@ -4380,9 +4420,9 @@ var Table = function Table(_ref) {
       setActionAnchor(null);
     };
     var onScrollResize = function onScrollResize() {
-      setOpenActionKey(function (k) {
-        return k ? k : null;
-      });
+      // Close menu on scroll/resize to prevent positioning issues
+      setOpenActionKey(null);
+      setActionAnchor(null);
     };
     window.addEventListener("click", onDocClick);
     window.addEventListener("scroll", onScrollResize, true);
@@ -4399,6 +4439,7 @@ var Table = function Table(_ref) {
   var isFetchingRef = React.useRef(false);
   var isMountedRef = React.useRef(true);
   var onFetchRef = React.useRef(onFetch);
+  var activeFetchIdRef = React.useRef(0);
 
   // Keep ref in sync with onFetch
   React.useEffect(function () {
@@ -4414,7 +4455,7 @@ var Table = function Table(_ref) {
     };
   }, []);
 
-  // Serialize fetch params for comparison
+  // Serialize fetch params for comparison - serialize filters to avoid object reference issues
   var fetchParams = React.useMemo(function () {
     return {
       filters: filters,
@@ -4436,36 +4477,59 @@ var Table = function Table(_ref) {
       if (!isFetchingRef.current && prevFetchParamsRef.current !== fetchParamsString) {
         prevFetchParamsRef.current = fetchParamsString;
         isFetchingRef.current = true;
-        currentOnFetch({
-          setData: function setData(rows) {
-            // Only update if component is still mounted
-            if (isMountedRef.current && isFetchingRef.current) {
-              setTableData(Array.isArray(rows) ? rows : []);
-              isFetchingRef.current = false;
+
+        // Track fetch ID to prevent race conditions
+        var fetchId = Date.now();
+        activeFetchIdRef.current = fetchId;
+        try {
+          var result = currentOnFetch({
+            setData: function setData(rows) {
+              // Only update if component is still mounted and this is the active fetch
+              if (isMountedRef.current && activeFetchIdRef.current === fetchId) {
+                setTableData(Array.isArray(rows) ? rows : []);
+                // Don't set isFetchingRef to false here - let setLoading handle it
+              }
+            },
+            setLoading: function setLoading(loading) {
+              // Only update if component is still mounted and this is the active fetch
+              if (isMountedRef.current && activeFetchIdRef.current === fetchId) {
+                _setLoading(loading);
+                if (!loading) {
+                  isFetchingRef.current = false;
+                }
+              }
+            },
+            filters: fetchParams.filters,
+            page: fetchParams.page,
+            limit: fetchParams.limit,
+            sort: {
+              key: fetchParams.sortKey,
+              direction: fetchParams.sortDirection
             }
-          },
-          setLoading: function setLoading(loading) {
-            // Only update if component is still mounted
-            if (isMountedRef.current) {
-              _setLoading(loading);
-              if (!loading && isFetchingRef.current) {
+          });
+
+          // Handle promise if onFetch returns one
+          if (result && typeof result.then === "function") {
+            result["catch"](function (error) {
+              console.error("Table onFetch error:", error);
+              if (isMountedRef.current && activeFetchIdRef.current === fetchId) {
+                _setLoading(false);
                 isFetchingRef.current = false;
               }
-            }
-          },
-          filters: fetchParams.filters,
-          page: fetchParams.page,
-          limit: fetchParams.limit,
-          sort: {
-            key: fetchParams.sortKey,
-            direction: fetchParams.sortDirection
+            });
           }
-        });
+        } catch (error) {
+          console.error("Table onFetch error:", error);
+          if (isMountedRef.current && activeFetchIdRef.current === fetchId) {
+            _setLoading(false);
+            isFetchingRef.current = false;
+          }
+        }
       }
     } else if (!serverSide && Array.isArray(data)) {
       setTableData(data);
     }
-  }, [serverSide, data, fetchParamsString, fetchParams]);
+  }, [serverSide, data, fetchParamsString]);
 
   // Global search
   React.useEffect(function () {
@@ -4484,9 +4548,9 @@ var Table = function Table(_ref) {
     var parsed = Number(nextLimit);
     if (!Number.isFinite(parsed) || parsed <= 0) return;
     setLimit(parsed);
-    setCurrentPage(1);
+    handlePageChange(1);
     onLimitChange === null || onLimitChange === void 0 || onLimitChange(parsed);
-  }, [onLimitChange]);
+  }, [onLimitChange, handlePageChange]);
 
   // Memoize limit options
   var limitOptionsMemo = React.useMemo(function () {
@@ -4523,9 +4587,9 @@ var Table = function Table(_ref) {
     var _getRowMetadata = getRowMetadata(row, rowIndexInPage),
       globalIndex = _getRowMetadata.globalIndex,
       key = _getRowMetadata.key,
-      actionCellKey = _getRowMetadata.actionCellKey;
-      _getRowMetadata.extraRowClass;
-      var stripeBg = _getRowMetadata.stripeBg;
+      actionCellKey = _getRowMetadata.actionCellKey,
+      extraRowClass = _getRowMetadata.extraRowClass,
+      stripeBg = _getRowMetadata.stripeBg;
     return /*#__PURE__*/React.createElement("div", {
       key: key,
       style: stripeBg ? {
@@ -4535,7 +4599,7 @@ var Table = function Table(_ref) {
         "cursor-pointer": !!onRowClick,
         "bg-primary-50 border-primary-200": selectedRows.has(key),
         "hover:shadow-md": !selectedRows.has(key)
-      }, safeExtraRowClass),
+      }, extraRowClass),
       onClick: function onClick() {
         return onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(row, globalIndex);
       }
@@ -4612,10 +4676,10 @@ var Table = function Table(_ref) {
       row: row,
       index: globalIndex
     })));
-  }, [getRowMetadata, hasDetails, selectable, showSerial, withAction, expandedRows, selectedRows, onRowClick, visibleColumns, renderCell, cellClass, DetailsComponent, actionsToUse, actionAnchor, openActionKey, handleOnAction, actionMenuRef]);
+  }, [getRowMetadata, hasDetails, selectable, showSerial, withAction, expandedRows, selectedRows, onRowClick, visibleColumns, renderCell, cellClass, DetailsComponent, actionsToUse, actionAnchor, openActionKey, handleOnAction, actionMenuRef, toggleActions, toggleExpandRow, handleSelectRow]);
 
   // Render mobile filters
-  var renderMobileFilters = function renderMobileFilters() {
+  var renderMobileFilters = React.useCallback(function () {
     return /*#__PURE__*/React.createElement("div", {
       className: "mb-4 p-3 bg-gray-50 rounded-lg"
     }, /*#__PURE__*/React.createElement("div", {
@@ -4657,7 +4721,7 @@ var Table = function Table(_ref) {
         }
       }));
     })));
-  };
+  }, [showMobileFilters, globalSearch, searchInput, onGlobalKeyDown, filterable, visibleColumns, filters, handleFilter, setShowMobileFilters, setSearchInput]);
 
   // Render
   return /*#__PURE__*/React.createElement("div", {
@@ -4700,24 +4764,42 @@ var Table = function Table(_ref) {
     className: "rounded-lg md:rounded-md border border-gray-300 p-2 disabled:opacity-50 hover:bg-gray-50",
     disabled: currentPage === 1,
     onClick: function onClick() {
-      return setCurrentPage(function (p) {
-        return Math.max(1, p - 1);
-      });
+      return handlePageChange(1);
+    },
+    "aria-label": "First page",
+    title: "First page"
+  }, /*#__PURE__*/React.createElement(ChevronsLeft, {
+    className: "size-4 md:size-5 text-gray-800"
+  })), /*#__PURE__*/React.createElement("button", {
+    className: "rounded-lg md:rounded-md border border-gray-300 p-2 disabled:opacity-50 hover:bg-gray-50",
+    disabled: currentPage === 1,
+    onClick: function onClick() {
+      return handlePageChange(Math.max(1, currentPage - 1));
     },
-    "aria-label": "Previous page"
+    "aria-label": "Previous page",
+    title: "Previous page"
   }, /*#__PURE__*/React.createElement(ChevronLeft, {
     className: "size-4 md:size-5 text-gray-800"
   })), /*#__PURE__*/React.createElement("button", {
     className: "rounded-lg md:rounded-md border border-gray-300 p-2 disabled:opacity-50 hover:bg-gray-50",
     disabled: currentPage === totalPages,
     onClick: function onClick() {
-      return setCurrentPage(function (p) {
-        return Math.min(totalPages, p + 1);
-      });
+      return handlePageChange(Math.min(totalPages, currentPage + 1));
     },
-    "aria-label": "Next page"
+    "aria-label": "Next page",
+    title: "Next page"
   }, /*#__PURE__*/React.createElement(ChevronRight, {
     className: "size-4 md:size-5 text-gray-800"
+  })), /*#__PURE__*/React.createElement("button", {
+    className: "rounded-lg md:rounded-md border border-gray-300 p-2 disabled:opacity-50 hover:bg-gray-50",
+    disabled: currentPage === totalPages,
+    onClick: function onClick() {
+      return handlePageChange(totalPages);
+    },
+    "aria-label": "Last page",
+    title: "Last page"
+  }, /*#__PURE__*/React.createElement(ChevronsRight, {
+    className: "size-4 md:size-5 text-gray-800"
   })))))), globalSearch && /*#__PURE__*/React.createElement("div", {
     className: "p-4 border-b"
   }, /*#__PURE__*/React.createElement("div", {
@@ -4967,12 +5049,21 @@ var Table = function Table(_ref) {
   }, "Page ", currentPage, " of ", totalPages), /*#__PURE__*/React.createElement("div", {
     className: "flex items-center gap-2"
   }, /*#__PURE__*/React.createElement("button", {
+    className: "rounded-lg md:rounded-md border border-gray-300 px-3 py-2 text-sm disabled:opacity-50 hover:bg-gray-50 flex items-center gap-1",
+    disabled: currentPage === 1,
+    onClick: function onClick() {
+      return handlePageChange(1);
+    },
+    title: "First page"
+  }, /*#__PURE__*/React.createElement(ChevronsLeft, {
+    className: "size-4"
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "hidden sm:inline"
+  }, "First")), /*#__PURE__*/React.createElement("button", {
     className: "rounded-lg md:rounded-md border border-gray-300 px-4 py-2 text-sm disabled:opacity-50 hover:bg-gray-50",
     disabled: currentPage === 1,
     onClick: function onClick() {
-      return setCurrentPage(function (p) {
-        return Math.max(1, p - 1);
-      });
+      return handlePageChange(Math.max(1, currentPage - 1));
     }
   }, "Previous"), /*#__PURE__*/React.createElement("div", {
     className: "flex items-center gap-1"
@@ -4984,18 +5075,27 @@ var Table = function Table(_ref) {
         "border border-gray-300 hover:bg-gray-50": pageNum !== currentPage
       }),
       onClick: function onClick() {
-        return setCurrentPage(pageNum);
+        return handlePageChange(pageNum);
       }
     }, pageNum);
   })), /*#__PURE__*/React.createElement("button", {
     className: "rounded-lg md:rounded-md border border-gray-300 px-4 py-2 text-sm disabled:opacity-50 hover:bg-gray-50",
     disabled: currentPage === totalPages,
     onClick: function onClick() {
-      return setCurrentPage(function (p) {
-        return Math.min(totalPages, p + 1);
-      });
+      return handlePageChange(Math.min(totalPages, currentPage + 1));
     }
-  }, "Next")))));
+  }, "Next"), /*#__PURE__*/React.createElement("button", {
+    className: "rounded-lg md:rounded-md border border-gray-300 px-3 py-2 text-sm disabled:opacity-50 hover:bg-gray-50 flex items-center gap-1",
+    disabled: currentPage === totalPages,
+    onClick: function onClick() {
+      return handlePageChange(totalPages);
+    },
+    title: "Last page"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "hidden sm:inline"
+  }, "Last"), /*#__PURE__*/React.createElement(ChevronsRight, {
+    className: "size-4"
+  }))))));
 };
 
 // ActionMenuPortal constants
@@ -5109,7 +5209,8 @@ function ActionMenuPortal(_ref2) {
       window.removeEventListener("scroll", onScrollOrResize, true);
     };
     // Recompute when anchor element changes or actions change (content height may change).
-  }, [anchorElem, actions, menuRef]);
+    // Note: menuRef is a ref object and never changes, so it's safe to include
+  }, [anchorElem, actions]);
   return /*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/React.createElement("div", {
     ref: menuRef,
     style: {