@dreamtree-org/twreact-ui 1.0.76 → 1.0.78

package/dist/index.js

@@ -276,26 +276,6 @@ 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" }],
   [
@@ -3903,16 +3883,16 @@ var Select = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
   }, error));
 });
 
-var _excluded$k = ["data", "columns", "sortable", "filterable", "selectable", "pagination", "pageSize", "onSort", "onFilter", "onFetch", "onFilterChange", "onSelectionChange", "onRowClick", "hasDetails", "DetailsComponent", "className", "withAction", "onAction", "actions", "showSerial", "cellClass", "rowClass", "globalSearch", "limitOptions", "showLimitSelector", "onLimitChange", "showReloadButton", "renderReloadButton", "onReload", "stripedRows", "stripedColors", "responsiveBreakpoint", "serverSide", "totalRecords", "pageNumber", "onPageChange"];
+var _excluded$k = ["data", "columns", "sortable", "filterable", "selectable", "pagination", "pageSize", "onSort", "onFilter", "onFetch", "onFilterChange", "onSelectionChange", "onRowClick", "hasDetails", "DetailsComponent", "className", "withAction", "onAction", "actions", "showSerial", "cellClass", "rowClass", "globalSearch", "limitOptions", "showLimitSelector", "onLimitChange", "showReloadButton", "renderReloadButton", "onReload", "stripedRows", "stripedColors", "responsiveBreakpoint", "serverSide", "totalRecords", "pageNumber"];
 function ownKeys$9(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$9(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$9(Object(t), true).forEach(function (r) { _defineProperty$4(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$9(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 
-// Constants moved outside component
+// Move static default actions outside component to prevent recreation
 var DEFAULT_ACTIONS = [{
   name: "edit",
   label: "Edit",
   onClick: function onClick() {
-    console.log("Edit action clicked");
+    return console.log("Edit action clicked");
   },
   icon: /*#__PURE__*/React.createElement(PenSquare, {
     size: 16
@@ -3921,7 +3901,7 @@ var DEFAULT_ACTIONS = [{
   name: "delete",
   label: "Delete",
   onClick: function onClick() {
-    console.log("Delete action clicked");
+    return console.log("Delete action clicked");
   },
   icon: /*#__PURE__*/React.createElement(Trash, {
     size: 16
@@ -3930,344 +3910,345 @@ var DEFAULT_ACTIONS = [{
   name: "view",
   label: "View",
   onClick: function onClick() {
-    console.log("View action clicked");
+    return console.log("View action clicked");
   },
   icon: /*#__PURE__*/React.createElement(Eye, {
     size: 16
   })
 }];
-var RESIZE_DEBOUNCE_MS = 150;
-var MENU_PLACEMENT_THRESHOLD = 160;
-
-// Helper functions
-var getRowKey = function getRowKey(row, globalIndex) {
-  if ((row === null || row === void 0 ? void 0 : row.id) != null) return String(row.id);
-  if ((row === null || row === void 0 ? void 0 : row._id) != null) return String(row._id);
-  return String(globalIndex);
-};
-
-// Calculate pagination numbers
-var getPaginationNumbers = function getPaginationNumbers(currentPage, totalPages) {
-  var maxVisible = 5;
-  if (totalPages <= maxVisible) {
-    return Array.from({
-      length: totalPages
-    }, function (_, i) {
-      return i + 1;
-    });
-  }
-  if (currentPage <= 3) {
-    return Array.from({
-      length: maxVisible
-    }, function (_, i) {
-      return i + 1;
-    });
-  }
-  if (currentPage >= totalPages - 2) {
-    return Array.from({
-      length: maxVisible
-    }, function (_, i) {
-      return totalPages - 4 + i;
-    });
-  }
-  return Array.from({
-    length: maxVisible
-  }, function (_, i) {
-    return currentPage - 2 + i;
-  });
-};
 
-// Empty and Loading state components
-var EmptyState = function EmptyState() {
-  return /*#__PURE__*/React.createElement("div", {
-    className: "flex flex-col items-center gap-2"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "text-gray-400"
-  }, /*#__PURE__*/React.createElement(List, {
-    className: "h-8 w-8"
-  })), /*#__PURE__*/React.createElement("span", {
-    className: "text-sm text-gray-500"
-  }, "No results found."));
-};
-var LoadingState = function LoadingState() {
-  return /*#__PURE__*/React.createElement("div", {
-    className: "flex flex-col items-center gap-2"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "h-6 w-6 animate-spin rounded-full border-2 border-primary-600 border-t-transparent"
-  }), /*#__PURE__*/React.createElement("span", {
-    className: "text-sm text-gray-500"
-  }, "Loading..."));
-};
-var Table = function Table(_ref) {
-  var _ref$data = _ref.data,
-    data = _ref$data === void 0 ? [] : _ref$data,
-    _ref$columns = _ref.columns,
-    columns = _ref$columns === void 0 ? [] : _ref$columns,
-    _ref$sortable = _ref.sortable,
-    sortable = _ref$sortable === void 0 ? true : _ref$sortable,
-    _ref$filterable = _ref.filterable,
-    filterable = _ref$filterable === void 0 ? false : _ref$filterable,
-    _ref$selectable = _ref.selectable,
-    selectable = _ref$selectable === void 0 ? false : _ref$selectable,
-    _ref$pagination = _ref.pagination,
-    pagination = _ref$pagination === void 0 ? false : _ref$pagination,
-    _ref$pageSize = _ref.pageSize,
-    pageSize = _ref$pageSize === void 0 ? 25 : _ref$pageSize,
-    onSort = _ref.onSort,
-    onFilter = _ref.onFilter,
-    onFetch = _ref.onFetch,
-    onFilterChange = _ref.onFilterChange,
-    onSelectionChange = _ref.onSelectionChange,
-    onRowClick = _ref.onRowClick,
-    _ref$hasDetails = _ref.hasDetails,
-    hasDetails = _ref$hasDetails === void 0 ? false : _ref$hasDetails,
-    _ref$DetailsComponent = _ref.DetailsComponent,
-    DetailsComponent = _ref$DetailsComponent === void 0 ? null : _ref$DetailsComponent,
-    className = _ref.className,
-    _ref$withAction = _ref.withAction,
-    withAction = _ref$withAction === void 0 ? true : _ref$withAction,
+// Memoized ActionMenuPortal to prevent unnecessary re-renders
+var ActionMenuPortal = /*#__PURE__*/React.memo(function ActionMenuPortal(_ref) {
+  var anchorElem = _ref.anchorElem,
+    _ref$actions = _ref.actions,
+    actions = _ref$actions === void 0 ? [] : _ref$actions,
+    anchorRow = _ref.anchorRow,
     onAction = _ref.onAction,
-    actions = _ref.actions,
-    _ref$showSerial = _ref.showSerial,
-    showSerial = _ref$showSerial === void 0 ? true : _ref$showSerial,
-    cellClass = _ref.cellClass,
-    rowClass = _ref.rowClass,
-    _ref$globalSearch = _ref.globalSearch,
-    globalSearch = _ref$globalSearch === void 0 ? false : _ref$globalSearch,
-    _ref$limitOptions = _ref.limitOptions,
-    limitOptions = _ref$limitOptions === void 0 ? [10, 25, 50, 100] : _ref$limitOptions,
-    _ref$showLimitSelecto = _ref.showLimitSelector,
-    showLimitSelector = _ref$showLimitSelecto === void 0 ? true : _ref$showLimitSelecto,
-    onLimitChange = _ref.onLimitChange,
-    _ref$showReloadButton = _ref.showReloadButton,
-    showReloadButton = _ref$showReloadButton === void 0 ? true : _ref$showReloadButton,
-    renderReloadButton = _ref.renderReloadButton,
-    onReload = _ref.onReload,
-    _ref$stripedRows = _ref.stripedRows,
-    stripedRows = _ref$stripedRows === void 0 ? true : _ref$stripedRows,
-    _ref$stripedColors = _ref.stripedColors,
-    stripedColors = _ref$stripedColors === void 0 ? ["#ffffff", "#f7fafc"] : _ref$stripedColors,
-    _ref$responsiveBreakp = _ref.responsiveBreakpoint,
-    responsiveBreakpoint = _ref$responsiveBreakp === void 0 ? 768 : _ref$responsiveBreakp,
-    _ref$serverSide = _ref.serverSide,
-    serverSide = _ref$serverSide === void 0 ? false : _ref$serverSide,
-    _ref$totalRecords = _ref.totalRecords,
-    totalRecords = _ref$totalRecords === void 0 ? 0 : _ref$totalRecords,
-    pageNumber = _ref.pageNumber,
-    onPageChange = _ref.onPageChange,
-    props = _objectWithoutProperties$1(_ref, _excluded$k);
-  // State for responsive view
-  var _useState = React.useState(false),
+    menuRef = _ref.menuRef;
+  var _useState = React.useState({
+      left: 0,
+      top: 0,
+      transformOrigin: "top right",
+      maxHeight: 300,
+      width: 180,
+      opacity: 0
+    }),
     _useState2 = _slicedToArray(_useState, 2),
-    isMobileView = _useState2[0],
-    setIsMobileView = _useState2[1];
+    style = _useState2[0],
+    setStyle = _useState2[1];
+  var menuWidth = 180;
+  var maxMenuHeight = 320;
+  var margin = 8;
+  var minMenuHeight = 80;
+  React.useLayoutEffect(function () {
+    if (!anchorElem) return;
+    var computePosition = function computePosition() {
+      var rect = anchorElem.getBoundingClientRect();
+      var scrollY = window.scrollY || window.pageYOffset;
+      var scrollX = window.scrollX || window.pageXOffset;
+      var spaceBelow = window.innerHeight - rect.bottom;
+      var spaceAbove = rect.top;
+      var placement = "bottom";
+      var allowedMaxHeight;
+      if (spaceBelow < 160 && spaceAbove > spaceBelow) {
+        placement = "top";
+        allowedMaxHeight = Math.min(maxMenuHeight, Math.max(minMenuHeight, spaceAbove - margin));
+      } else {
+        allowedMaxHeight = Math.min(maxMenuHeight, Math.max(minMenuHeight, spaceBelow - margin));
+      }
+      var measuredMenuHeight = allowedMaxHeight;
+      var menuEl = menuRef === null || menuRef === void 0 ? void 0 : menuRef.current;
+      if (menuEl) {
+        var contentHeight = menuEl.scrollHeight || menuEl.offsetHeight || allowedMaxHeight;
+        measuredMenuHeight = Math.min(contentHeight, allowedMaxHeight);
+      }
+      var top = placement === "top" ? rect.top + scrollY - measuredMenuHeight - margin : rect.bottom + scrollY + margin;
+      var minTop = margin + scrollY;
+      var maxTop = window.innerHeight + scrollY - measuredMenuHeight - margin;
+      top = Math.max(minTop, Math.min(top, maxTop));
+      var left = rect.right + scrollX - menuWidth;
+      left = Math.max(margin, Math.min(left, window.innerWidth - menuWidth - margin));
+      setStyle({
+        left: left,
+        top: top,
+        transformOrigin: placement === "bottom" ? "top right" : "bottom right",
+        maxHeight: allowedMaxHeight,
+        width: menuWidth,
+        opacity: 1
+      });
+    };
+    computePosition();
+    var onScrollOrResize = function onScrollOrResize() {
+      window.requestAnimationFrame(computePosition);
+    };
+    window.addEventListener("resize", onScrollOrResize);
+    window.addEventListener("scroll", onScrollOrResize, true);
+    return function () {
+      window.removeEventListener("resize", onScrollOrResize);
+      window.removeEventListener("scroll", onScrollOrResize, true);
+    };
+  }, [anchorElem, menuRef]);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: menuRef,
+    style: {
+      position: "absolute",
+      top: style.top,
+      left: style.left,
+      width: style.width,
+      maxHeight: style.maxHeight,
+      transformOrigin: style.transformOrigin,
+      opacity: style.opacity
+    },
+    className: "absolute z-50 bg-white rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 overflow-y-auto transition-opacity duration-150 ease-out",
+    onClick: function onClick(e) {
+      return e.stopPropagation();
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "p-1"
+  }, actions.length === 0 ? /*#__PURE__*/React.createElement("div", {
+    className: "px-3 py-2 text-sm text-gray-500"
+  }, "No actions") : actions.map(function (action) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: action.name,
+      className: "px-1"
+    }, /*#__PURE__*/React.createElement("button", {
+      className: "w-full text-left px-3 py-2 text-sm hover:bg-gray-100 flex items-center gap-2 rounded-md",
+      onClick: function onClick(e) {
+        e.stopPropagation();
+        onAction === null || onAction === void 0 || onAction(action, anchorRow);
+      }
+    }, action.render ? action.render(anchorRow) : /*#__PURE__*/React.createElement(React.Fragment, null, action.icon && /*#__PURE__*/React.createElement("span", {
+      className: "inline-flex"
+    }, action.icon), /*#__PURE__*/React.createElement("span", null, action.label))));
+  })));
+});
 
-  // Keep original table data / loading
-  var _useState3 = React.useState(function () {
+// Custom hook for click-outside detection (consolidates 3 handlers into 1)
+function useClickOutside(refs, isActive, onClickOutside) {
+  React.useEffect(function () {
+    if (!isActive) return;
+    var handler = function handler(e) {
+      var isOutside = refs.every(function (ref) {
+        return !ref.current || !ref.current.contains(e.target);
+      });
+      if (isOutside) onClickOutside();
+    };
+    document.addEventListener("click", handler);
+    return function () {
+      return document.removeEventListener("click", handler);
+    };
+  }, [refs, isActive, onClickOutside]);
+}
+
+// Helper to get row key - stable function
+var getRowKey = function getRowKey(row, globalIndex) {
+  if (row == null) return String(globalIndex);
+  if (row.id !== undefined && row.id !== null) return String(row.id);
+  if (row._id !== undefined && row._id !== null) return String(row._id);
+  return String(globalIndex);
+};
+var Table = function Table(_ref2) {
+  var _ref2$data = _ref2.data,
+    data = _ref2$data === void 0 ? [] : _ref2$data,
+    _ref2$columns = _ref2.columns,
+    columns = _ref2$columns === void 0 ? [] : _ref2$columns,
+    _ref2$sortable = _ref2.sortable,
+    sortable = _ref2$sortable === void 0 ? true : _ref2$sortable,
+    _ref2$filterable = _ref2.filterable,
+    filterable = _ref2$filterable === void 0 ? false : _ref2$filterable,
+    _ref2$selectable = _ref2.selectable,
+    selectable = _ref2$selectable === void 0 ? false : _ref2$selectable,
+    _ref2$pagination = _ref2.pagination,
+    pagination = _ref2$pagination === void 0 ? false : _ref2$pagination,
+    _ref2$pageSize = _ref2.pageSize,
+    pageSize = _ref2$pageSize === void 0 ? 25 : _ref2$pageSize,
+    onSort = _ref2.onSort,
+    onFilter = _ref2.onFilter,
+    onFetch = _ref2.onFetch,
+    onFilterChange = _ref2.onFilterChange,
+    onSelectionChange = _ref2.onSelectionChange,
+    onRowClick = _ref2.onRowClick,
+    _ref2$hasDetails = _ref2.hasDetails,
+    hasDetails = _ref2$hasDetails === void 0 ? false : _ref2$hasDetails,
+    _ref2$DetailsComponen = _ref2.DetailsComponent,
+    DetailsComponent = _ref2$DetailsComponen === void 0 ? null : _ref2$DetailsComponen,
+    className = _ref2.className,
+    _ref2$withAction = _ref2.withAction,
+    withAction = _ref2$withAction === void 0 ? true : _ref2$withAction,
+    onAction = _ref2.onAction,
+    actions = _ref2.actions,
+    _ref2$showSerial = _ref2.showSerial,
+    showSerial = _ref2$showSerial === void 0 ? true : _ref2$showSerial,
+    cellClass = _ref2.cellClass,
+    rowClass = _ref2.rowClass,
+    _ref2$globalSearch = _ref2.globalSearch,
+    globalSearch = _ref2$globalSearch === void 0 ? false : _ref2$globalSearch,
+    _ref2$limitOptions = _ref2.limitOptions,
+    limitOptions = _ref2$limitOptions === void 0 ? [10, 25, 50, 100] : _ref2$limitOptions,
+    _ref2$showLimitSelect = _ref2.showLimitSelector,
+    showLimitSelector = _ref2$showLimitSelect === void 0 ? true : _ref2$showLimitSelect,
+    onLimitChange = _ref2.onLimitChange,
+    _ref2$showReloadButto = _ref2.showReloadButton,
+    showReloadButton = _ref2$showReloadButto === void 0 ? true : _ref2$showReloadButto,
+    renderReloadButton = _ref2.renderReloadButton,
+    onReload = _ref2.onReload,
+    _ref2$stripedRows = _ref2.stripedRows,
+    stripedRows = _ref2$stripedRows === void 0 ? true : _ref2$stripedRows,
+    _ref2$stripedColors = _ref2.stripedColors,
+    stripedColors = _ref2$stripedColors === void 0 ? ["#ffffff", "#f7fafc"] : _ref2$stripedColors,
+    _ref2$responsiveBreak = _ref2.responsiveBreakpoint,
+    responsiveBreakpoint = _ref2$responsiveBreak === void 0 ? 768 : _ref2$responsiveBreak,
+    _ref2$serverSide = _ref2.serverSide,
+    serverSide = _ref2$serverSide === void 0 ? false : _ref2$serverSide,
+    _ref2$totalRecords = _ref2.totalRecords,
+    totalRecords = _ref2$totalRecords === void 0 ? 0 : _ref2$totalRecords,
+    pageNumber = _ref2.pageNumber,
+    props = _objectWithoutProperties$1(_ref2, _excluded$k);
+  // Core state
+  var _useState3 = React.useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isMobileView = _useState4[0],
+    setIsMobileView = _useState4[1];
+  var _useState5 = React.useState(function () {
       return Array.isArray(data) ? data : [];
     }),
-    _useState4 = _slicedToArray(_useState3, 2),
-    tableData = _useState4[0],
-    setTableData = _useState4[1];
-  var _useState5 = React.useState(false),
     _useState6 = _slicedToArray(_useState5, 2),
-    loading = _useState6[0],
-    _setLoading = _useState6[1];
+    tableData = _useState6[0],
+    setTableData = _useState6[1];
+  var _useState7 = React.useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    loading = _useState8[0],
+    setLoading = _useState8[1];
+  var _useState9 = React.useState(pageSize),
+    _useState0 = _slicedToArray(_useState9, 2),
+    limit = _useState0[0],
+    setLimit = _useState0[1];
+  var _useState1 = React.useState(function () {
+      return typeof pageNumber === "number" ? pageNumber : 1;
+    }),
+    _useState10 = _slicedToArray(_useState1, 2),
+    currentPage = _useState10[0],
+    setCurrentPage = _useState10[1];
 
-  // Column visibility state
-  var _useState7 = React.useState(function () {
+  // Column state
+  var _useState11 = React.useState(function () {
       return Array.isArray(columns) ? columns.map(function (c) {
         return _objectSpread$9({}, c);
       }) : [];
     }),
-    _useState8 = _slicedToArray(_useState7, 2),
-    columnsState = _useState8[0],
-    setColumnsState = _useState8[1];
-  React.useEffect(function () {
-    // Sync when prop changes - only update if columns actually changed
-    if (Array.isArray(columns)) {
-      setColumnsState(function (prev) {
-        var prevKeys = new Set(prev.map(function (c) {
-          return c.key;
-        }));
-        var newKeys = new Set(columns.map(function (c) {
-          return c.key;
-        }));
-        var keysChanged = prevKeys.size !== newKeys.size || _toConsumableArray$1(prevKeys).some(function (k) {
-          return !newKeys.has(k);
-        });
-        if (keysChanged) {
-          return columns.map(function (c) {
-            return _objectSpread$9({}, c);
-          });
-        }
-        return prev;
-      });
-    }
-  }, [columns]);
-
-  // Popover state for column toggler
-  var _useState9 = React.useState(false),
-    _useState0 = _slicedToArray(_useState9, 2),
-    showColumnMenu = _useState0[0],
-    setShowColumnMenu = _useState0[1];
-  var columnMenuRef = React.useRef(null);
-  var columnToggleBtnRef = React.useRef(null);
-  var _useState1 = React.useState(pageSize),
-    _useState10 = _slicedToArray(_useState1, 2),
-    limit = _useState10[0],
-    setLimit = _useState10[1];
+    _useState12 = _slicedToArray(_useState11, 2),
+    columnsState = _useState12[0],
+    setColumnsState = _useState12[1];
+  var _useState13 = React.useState(false),
+    _useState14 = _slicedToArray(_useState13, 2),
+    showColumnMenu = _useState14[0],
+    setShowColumnMenu = _useState14[1];
 
-  // Other states
-  var _useState11 = React.useState({
+  // Sorting/filtering state
+  var _useState15 = React.useState({
       key: null,
       direction: "asc"
     }),
-    _useState12 = _slicedToArray(_useState11, 2),
-    sortConfig = _useState12[0],
-    setSortConfig = _useState12[1];
-  var _useState13 = React.useState(new Set()),
-    _useState14 = _slicedToArray(_useState13, 2),
-    selectedRows = _useState14[0],
-    setSelectedRows = _useState14[1];
-  var _useState15 = React.useState(new Set()),
     _useState16 = _slicedToArray(_useState15, 2),
-    expandedRows = _useState16[0],
-    setExpandedRows = _useState16[1];
-  var _useState17 = React.useState(typeof pageNumber === "number" ? pageNumber : 1),
+    sortConfig = _useState16[0],
+    setSortConfig = _useState16[1];
+  var _useState17 = React.useState({}),
     _useState18 = _slicedToArray(_useState17, 2),
-    currentPage = _useState18[0],
-    setCurrentPage = _useState18[1];
-  var _useState19 = React.useState({}),
+    filters = _useState18[0],
+    setFilters = _useState18[1];
+  var _useState19 = React.useState(""),
     _useState20 = _slicedToArray(_useState19, 2),
-    filters = _useState20[0],
-    setFilters = _useState20[1];
-  var _useState21 = React.useState(filters.global || ""),
+    searchInput = _useState20[0],
+    setSearchInput = _useState20[1];
+
+  // Selection/expansion state
+  var _useState21 = React.useState(function () {
+      return new Set();
+    }),
     _useState22 = _slicedToArray(_useState21, 2),
-    searchInput = _useState22[0],
-    setSearchInput = _useState22[1];
-  var _useState23 = React.useState(false),
+    selectedRows = _useState22[0],
+    setSelectedRows = _useState22[1];
+  var _useState23 = React.useState(function () {
+      return new Set();
+    }),
     _useState24 = _slicedToArray(_useState23, 2),
-    showMobileFilters = _useState24[0],
-    setShowMobileFilters = _useState24[1];
+    expandedRows = _useState24[0],
+    setExpandedRows = _useState24[1];
 
-  // Popover per-row
+  // Action menu state
   var _useState25 = React.useState(null),
     _useState26 = _slicedToArray(_useState25, 2),
     actionAnchor = _useState26[0],
     setActionAnchor = _useState26[1];
+  var _useState27 = React.useState(false),
+    _useState28 = _slicedToArray(_useState27, 2),
+    showMobileFilters = _useState28[0],
+    setShowMobileFilters = _useState28[1];
+
+  // Refs
+  var columnMenuRef = React.useRef(null);
+  var columnToggleBtnRef = React.useRef(null);
   var actionMenuRef = React.useRef(null);
 
-  // Per-row action menu open key
-  var _useState27 = React.useState(null),
-    _useState28 = _slicedToArray(_useState27, 2),
-    openActionKey = _useState28[0],
-    setOpenActionKey = _useState28[1];
+  // Actions to use (memoized)
+  var actionsToUse = React.useMemo(function () {
+    return actions !== undefined ? actions : DEFAULT_ACTIONS;
+  }, [actions]);
+
+  // Sync external props
   React.useEffect(function () {
     if (typeof pageNumber === "number" && pageNumber !== currentPage) {
       setCurrentPage(pageNumber);
-      // Note: onPageChange is intentionally not called here to avoid loops
-      // Parent should handle page changes via controlled component pattern
     }
-  }, [pageNumber, currentPage]);
+  }, [pageNumber]); // eslint-disable-line react-hooks/exhaustive-deps
+
   React.useEffect(function () {
     setLimit(pageSize);
   }, [pageSize]);
+  React.useEffect(function () {
+    setColumnsState(Array.isArray(columns) ? columns.map(function (c) {
+      return _objectSpread$9({}, c);
+    }) : []);
+  }, [columns]);
+
+  // Single effect for data sync (consolidated from 3 effects)
+  React.useEffect(function () {
+    if (serverSide || onFetch) return;
+    if (Array.isArray(data)) {
+      setTableData(data);
+    }
+  }, [data, serverSide, onFetch]);
 
-  // Check if mobile view with debouncing
+  // Mobile view detection
   React.useEffect(function () {
-    var timeoutId;
     var checkMobile = function checkMobile() {
-      setIsMobileView(window.innerWidth < responsiveBreakpoint);
+      return setIsMobileView(window.innerWidth < responsiveBreakpoint);
     };
-    var debouncedCheck = function debouncedCheck() {
-      clearTimeout(timeoutId);
-      timeoutId = setTimeout(checkMobile, RESIZE_DEBOUNCE_MS);
-    };
-
-    // Initial check
     checkMobile();
-
-    // Add event listener with debouncing
-    window.addEventListener("resize", debouncedCheck);
+    window.addEventListener("resize", checkMobile);
     return function () {
-      clearTimeout(timeoutId);
-      window.removeEventListener("resize", debouncedCheck);
+      return window.removeEventListener("resize", checkMobile);
     };
   }, [responsiveBreakpoint]);
 
-  // Close column menu when clicking outside
-  React.useEffect(function () {
-    if (!showColumnMenu) return;
-    var onDocClick = function onDocClick(e) {
-      if (columnMenuRef.current && !columnMenuRef.current.contains(e.target) && columnToggleBtnRef.current && !columnToggleBtnRef.current.contains(e.target)) {
-        setShowColumnMenu(false);
-      }
-    };
-    document.addEventListener("click", onDocClick);
-    return function () {
-      return document.removeEventListener("click", onDocClick);
-    };
-  }, [showColumnMenu]);
+  // Click-outside handlers (using consolidated hook)
+  var closeColumnMenu = React.useCallback(function () {
+    return setShowColumnMenu(false);
+  }, []);
+  var closeActionMenu = React.useCallback(function () {
+    return setActionAnchor(null);
+  }, []);
+  useClickOutside([columnMenuRef, columnToggleBtnRef], showColumnMenu, closeColumnMenu);
+  useClickOutside([actionMenuRef], !!actionAnchor, closeActionMenu);
 
-  // Visible columns derived from columnsState
+  // Visible columns (memoized)
   var visibleColumns = React.useMemo(function () {
     return columnsState.filter(function (col) {
       return col.isVisible !== false;
     });
   }, [columnsState]);
 
-  // Memoize actions
-  var actionsToUse = React.useMemo(function () {
-    return actions !== null && actions !== void 0 ? actions : DEFAULT_ACTIONS;
-  }, [actions]);
-
-  // Memoize visible count
-  var visibleCount = React.useMemo(function () {
-    return (showSerial ? 1 : 0) + visibleColumns.length + (selectable ? 1 : 0) + (hasDetails ? 1 : 0) + (withAction ? 1 : 0);
-  }, [showSerial, visibleColumns.length, selectable, hasDetails, withAction]);
-
-  // Memoize key-to-row mapping for selection
-  var keyToRowMap = React.useMemo(function () {
-    var map = new Map();
-    filteredData.forEach(function (row, i) {
-      map.set(getRowKey(row, i), row);
-    });
-    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) {
-        return c.key === key ? _objectSpread$9(_objectSpread$9({}, c), {}, {
-          isVisible: !(c.isVisible !== false)
-        }) : c;
-      });
-    });
-    handlePageChange(1);
-  }, [handlePageChange]);
-
-  // Handle actions
-  var handleOnAction = React.useCallback(function (action, row) {
-    var _action$onClick;
-    (_action$onClick = action.onClick) === null || _action$onClick === void 0 || _action$onClick.call(action, {
-      action: action,
-      row: row
-    });
-    onAction === null || onAction === void 0 || onAction({
-      action: action,
-      row: row
-    });
-    setOpenActionKey(null);
-    setActionAnchor(null);
-  }, [onAction]);
-
-  // Sorting
+  // Sorted data (memoized)
   var sortedData = React.useMemo(function () {
     if (serverSide || !sortConfig.key) return tableData;
     var key = sortConfig.key,
@@ -4276,265 +4257,173 @@ var Table = function Table(_ref) {
       var av = a === null || a === void 0 ? void 0 : a[key];
       var bv = b === null || b === void 0 ? void 0 : b[key];
       if (av == null || bv == null) return 0;
-      if (typeof av === "number") return direction === "asc" ? av - bv : bv - av;
+      if (typeof av === "number") {
+        return direction === "asc" ? av - bv : bv - av;
+      }
       return direction === "asc" ? String(av).localeCompare(String(bv)) : String(bv).localeCompare(String(av));
     });
   }, [tableData, sortConfig, serverSide]);
 
-  // Filtering
+  // Filtered data (memoized)
   var filteredData = React.useMemo(function () {
     if (serverSide || !filterable || !Object.keys(filters).length) return sortedData;
+    var q = (filters.global || "").toLowerCase();
     return sortedData.filter(function (row) {
-      // 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());
+      return Object.values(row || {}).some(function (v) {
+        return String(v).toLowerCase().includes(q);
       });
     });
-  }, [sortedData, filters, filterable, serverSide, visibleColumns]);
+  }, [sortedData, filters, filterable, serverSide]);
 
-  // Pagination indices - memoized
+  // Pagination calculations (memoized)
   var _useMemo = React.useMemo(function () {
       var start = pagination ? (currentPage - 1) * limit : 0;
       var end = pagination ? start + limit : filteredData.length;
+      var paginated = !pagination || serverSide ? filteredData : filteredData.slice(start, start + limit);
+      var pages = !pagination ? 1 : serverSide ? Math.max(1, Math.ceil((totalRecords || 0) / limit)) : Math.max(1, Math.ceil(filteredData.length / limit));
       return {
         startIndex: start,
-        endIndex: end
+        endIndex: end,
+        paginatedData: paginated,
+        totalPages: pages
       };
-    }, [pagination, currentPage, limit, filteredData.length]),
+    }, [filteredData, pagination, serverSide, currentPage, limit, totalRecords]),
     startIndex = _useMemo.startIndex,
-    endIndex = _useMemo.endIndex;
-
-  // Paginated view
-  var paginatedData = React.useMemo(function () {
-    if (!pagination || serverSide) return filteredData;
-    var start = (currentPage - 1) * limit;
-    return filteredData.slice(start, start + limit);
-  }, [filteredData, pagination, serverSide, currentPage, limit]);
-  var totalPages = React.useMemo(function () {
-    if (!pagination) return 1;
-    return serverSide ? Math.max(1, Math.ceil((totalRecords || 0) / limit)) : Math.max(1, Math.ceil(filteredData.length / limit));
-  }, [pagination, serverSide, totalRecords, filteredData.length, limit]);
-
-  // Sorting handler
+    endIndex = _useMemo.endIndex,
+    paginatedData = _useMemo.paginatedData,
+    totalPages = _useMemo.totalPages;
+
+  // Column count for colspan (memoized)
+  var visibleCount = React.useMemo(function () {
+    return (showSerial ? 1 : 0) + visibleColumns.length + (selectable ? 1 : 0) + (hasDetails ? 1 : 0) + (withAction ? 1 : 0) + 1;
+  },
+  // column toggler
+  [showSerial, visibleColumns.length, selectable, hasDetails, withAction]);
+
+  // Row key map for selection (memoized per filtered data)
+  var rowKeyMap = React.useMemo(function () {
+    return new Map(filteredData.map(function (r, i) {
+      return [getRowKey(r, i), r];
+    }));
+  }, [filteredData]);
+
+  // Callbacks (memoized to prevent child re-renders)
+  var toggleColumnVisibility = React.useCallback(function (key) {
+    setColumnsState(function (prev) {
+      return prev.map(function (c) {
+        return c.key === key ? _objectSpread$9(_objectSpread$9({}, c), {}, {
+          isVisible: !(c.isVisible !== false)
+        }) : c;
+      });
+    });
+  }, []);
   var handleSort = React.useCallback(function (key) {
     if (!sortable) return;
-    var direction = sortConfig.key === key && sortConfig.direction === "asc" ? "desc" : "asc";
-    setSortConfig({
-      key: key,
-      direction: direction
-    });
-    onSort === null || onSort === void 0 || onSort(key, direction);
-  }, [sortable, sortConfig, onSort]);
-
-  // Selection handlers - optimized with memoized keyToRowMap
-  var handleSelectAll = React.useCallback(function () {
-    var newSelection = new Set(selectedRows);
-    var pageRowKeys = paginatedData.map(function (r, i) {
-      return getRowKey(r, startIndex + i);
+    setSortConfig(function (prev) {
+      var direction = prev.key === key && prev.direction === "asc" ? "desc" : "asc";
+      onSort === null || onSort === void 0 || onSort(key, direction);
+      return {
+        key: key,
+        direction: direction
+      };
     });
-    var allSelected = pageRowKeys.every(function (k) {
-      return newSelection.has(k);
+  }, [sortable, onSort]);
+  var handleFilter = React.useCallback(function (key, value) {
+    setFilters(function (prev) {
+      var newFilters = _objectSpread$9(_objectSpread$9({}, prev), {}, _defineProperty$4({}, key, value));
+      onFilter === null || onFilter === void 0 || onFilter(newFilters);
+      onFilterChange === null || onFilterChange === void 0 || onFilterChange(newFilters);
+      return newFilters;
     });
-    if (allSelected) {
-      pageRowKeys.forEach(function (k) {
-        return newSelection["delete"](k);
+    setCurrentPage(1);
+  }, [onFilter, onFilterChange]);
+  var handleSelectAll = React.useCallback(function () {
+    setSelectedRows(function (prev) {
+      var newSelection = new Set(prev);
+      var pageRowKeys = paginatedData.map(function (r, i) {
+        return getRowKey(r, startIndex + i);
       });
-    } else {
-      pageRowKeys.forEach(function (k) {
-        return newSelection.add(k);
+      var allSelected = pageRowKeys.every(function (k) {
+        return newSelection.has(k);
       });
-    }
-    setSelectedRows(newSelection);
-    var selectedData = Array.from(newSelection).map(function (k) {
-      return keyToRowMap.get(k);
-    }).filter(Boolean);
-    onSelectionChange === null || onSelectionChange === void 0 || onSelectionChange(selectedData);
-  }, [selectedRows, paginatedData, startIndex, keyToRowMap, onSelectionChange]);
+      if (allSelected) {
+        pageRowKeys.forEach(function (k) {
+          return newSelection["delete"](k);
+        });
+      } else {
+        pageRowKeys.forEach(function (k) {
+          return newSelection.add(k);
+        });
+      }
+
+      // Notify parent
+      var selectedData = Array.from(newSelection).map(function (k) {
+        return rowKeyMap.get(k);
+      }).filter(Boolean);
+      onSelectionChange === null || onSelectionChange === void 0 || onSelectionChange(selectedData);
+      return newSelection;
+    });
+  }, [paginatedData, startIndex, rowKeyMap, onSelectionChange]);
   var handleSelectRow = React.useCallback(function (row, rowIndexInPage) {
     var globalIndex = startIndex + rowIndexInPage;
     var key = getRowKey(row, globalIndex);
-    var newSelection = new Set(selectedRows);
-    if (newSelection.has(key)) newSelection["delete"](key);else newSelection.add(key);
-    setSelectedRows(newSelection);
-    var selectedData = Array.from(newSelection).map(function (k) {
-      return keyToRowMap.get(k);
-    }).filter(Boolean);
-    onSelectionChange === null || onSelectionChange === void 0 || onSelectionChange(selectedData);
-  }, [startIndex, selectedRows, keyToRowMap, onSelectionChange]);
+    setSelectedRows(function (prev) {
+      var newSelection = new Set(prev);
+      if (newSelection.has(key)) {
+        newSelection["delete"](key);
+      } else {
+        newSelection.add(key);
+      }
+      var selectedData = Array.from(newSelection).map(function (k) {
+        return rowKeyMap.get(k);
+      }).filter(Boolean);
+      onSelectionChange === null || onSelectionChange === void 0 || onSelectionChange(selectedData);
+      return newSelection;
+    });
+  }, [startIndex, rowKeyMap, onSelectionChange]);
   var toggleExpandRow = React.useCallback(function (row, rowIndexInPage) {
     var globalIndex = startIndex + rowIndexInPage;
     var key = getRowKey(row, globalIndex);
     setExpandedRows(function (prev) {
       var newExpanded = new Set(prev);
-      if (newExpanded.has(key)) newExpanded["delete"](key);else newExpanded.add(key);
+      if (newExpanded.has(key)) {
+        newExpanded["delete"](key);
+      } else {
+        newExpanded.add(key);
+      }
       return newExpanded;
     });
   }, [startIndex]);
-  var handleFilter = React.useCallback(function (key, value) {
-    setFilters(function (prev) {
-      var newFilters = _objectSpread$9(_objectSpread$9({}, prev), {}, _defineProperty$4({}, key, value));
-      onFilter === null || onFilter === void 0 || onFilter(newFilters);
-      onFilterChange === null || onFilterChange === void 0 || onFilterChange(newFilters);
-      return newFilters;
-    });
-    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];
-  }, []);
   var toggleActions = React.useCallback(function (e, actionCellKey, row) {
     e.stopPropagation();
-    if (actionAnchor && actionAnchor.key === actionCellKey) {
-      setOpenActionKey(null);
-      setActionAnchor(null);
-    } else {
-      setOpenActionKey(actionCellKey);
-      setActionAnchor({
+    setActionAnchor(function (prev) {
+      if (prev && prev.key === actionCellKey) return null;
+      return {
         elem: e.currentTarget,
         key: actionCellKey,
         row: row
-      });
-    }
-  }, [actionAnchor]);
-  React.useEffect(function () {
-    if (!actionAnchor) return;
-    var onDocClick = function onDocClick(ev) {
-      if (actionMenuRef.current && (actionMenuRef.current.contains(ev.target) || actionAnchor.elem && actionAnchor.elem.contains(ev.target))) {
-        return;
-      }
-      setOpenActionKey(null);
-      setActionAnchor(null);
-    };
-    var onScrollResize = function onScrollResize() {
-      // Close menu on scroll/resize to prevent positioning issues
-      setOpenActionKey(null);
-      setActionAnchor(null);
-    };
-    window.addEventListener("click", onDocClick);
-    window.addEventListener("scroll", onScrollResize, true);
-    window.addEventListener("resize", onScrollResize);
-    return function () {
-      window.removeEventListener("click", onDocClick);
-      window.removeEventListener("scroll", onScrollResize, true);
-      window.removeEventListener("resize", onScrollResize);
-    };
-  }, [actionAnchor]);
-
-  // Track previous fetch params to prevent unnecessary calls
-  var prevFetchParamsRef = React.useRef(null);
-  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 () {
-    onFetchRef.current = onFetch;
-  }, [onFetch]);
-
-  // Track mount status
-  React.useEffect(function () {
-    isMountedRef.current = true;
-    return function () {
-      isMountedRef.current = false;
-      isFetchingRef.current = false;
-    };
+      };
+    });
   }, []);
-
-  // Serialize fetch params for comparison - serialize filters to avoid object reference issues
-  var fetchParams = React.useMemo(function () {
-    return {
-      filters: filters,
-      page: currentPage,
-      limit: limit,
-      sortKey: sortConfig.key,
-      sortDirection: sortConfig.direction
-    };
-  }, [filters, currentPage, limit, sortConfig.key, sortConfig.direction]);
-  var fetchParamsString = React.useMemo(function () {
-    return JSON.stringify(fetchParams);
-  }, [fetchParams]);
-
-  // Consolidated data sync effect
-  React.useEffect(function () {
-    var currentOnFetch = onFetchRef.current;
-    if (currentOnFetch) {
-      // Only fetch if params actually changed and not already fetching
-      if (!isFetchingRef.current && prevFetchParamsRef.current !== fetchParamsString) {
-        prevFetchParamsRef.current = fetchParamsString;
-        isFetchingRef.current = true;
-
-        // 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
-            }
-          });
-
-          // 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;
-              }
-            });
-          }
-        } 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]);
-
-  // Global search
-  React.useEffect(function () {
-    setSearchInput(filters.global || "");
-  }, [filters.global]);
+  var handleOnAction = React.useCallback(function (action, row) {
+    var _action$onClick;
+    (_action$onClick = action.onClick) === null || _action$onClick === void 0 || _action$onClick.call(action, {
+      action: action,
+      row: row
+    });
+    onAction === null || onAction === void 0 || onAction({
+      action: action,
+      row: row
+    });
+    setActionAnchor(null);
+  }, [onAction]);
+  var handleLimitChange = React.useCallback(function (nextLimit) {
+    var parsed = Number(nextLimit);
+    if (!Number.isFinite(parsed) || parsed <= 0) return;
+    setLimit(parsed);
+    setCurrentPage(1);
+    onLimitChange === null || onLimitChange === void 0 || onLimitChange(parsed);
+  }, [onLimitChange]);
   var applyGlobalSearch = React.useCallback(function () {
     handleFilter("global", searchInput);
   }, [handleFilter, searchInput]);
@@ -4544,52 +4433,49 @@ var Table = function Table(_ref) {
       applyGlobalSearch();
     }
   }, [applyGlobalSearch]);
-  var handleLimitChange = React.useCallback(function (nextLimit) {
-    var parsed = Number(nextLimit);
-    if (!Number.isFinite(parsed) || parsed <= 0) return;
-    setLimit(parsed);
-    handlePageChange(1);
-    onLimitChange === null || onLimitChange === void 0 || onLimitChange(parsed);
-  }, [onLimitChange, handlePageChange]);
+  var handlePageChange = React.useCallback(function (newPage) {
+    setCurrentPage(newPage);
+  }, []);
 
-  // Memoize limit options
-  var limitOptionsMemo = React.useMemo(function () {
-    var opts = Array.isArray(limitOptions) && limitOptions.length > 0 ? limitOptions : [25, 50, 100];
-    return opts.map(function (opt) {
-      return {
-        label: String(opt),
-        value: opt
-      };
+  // Data fetching effect
+  React.useEffect(function () {
+    if (!onFetch) return;
+    onFetch({
+      setData: function setData(rows) {
+        return setTableData(Array.isArray(rows) ? rows : []);
+      },
+      setLoading: setLoading,
+      filters: filters,
+      page: currentPage,
+      limit: limit,
+      sort: sortConfig
     });
-  }, [limitOptions]);
+  }, [onFetch, filters, currentPage, limit, sortConfig]);
+
+  // Sync searchInput with filters.global
+  React.useEffect(function () {
+    setSearchInput(filters.global || "");
+  }, [filters.global]);
 
-  // Extract row metadata computation
-  var getRowMetadata = React.useCallback(function (row, rowIndexInPage) {
+  // Render cell helper
+  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];
+  }, []);
+
+  // Render mobile card
+  var renderMobileCard = React.useCallback(function (row, rowIndexInPage) {
     var globalIndex = startIndex + rowIndexInPage;
     var key = getRowKey(row, globalIndex);
     var actionCellKey = "actions-".concat(key);
-    var extraRowClass = typeof rowClass === "function" ? (rowClass({
+    var isSelected = selectedRows.has(key);
+    var isExpanded = expandedRows.has(key);
+    var extraRowClass = typeof rowClass === "function" ? rowClass({
       row: row,
       rowIndex: globalIndex
-    }) || "").trim() : "";
-    var stripeBg = stripedRows && !selectedRows.has(key) ? stripedColors[globalIndex % stripedColors.length] : undefined;
-    return {
-      globalIndex: globalIndex,
-      key: key,
-      actionCellKey: actionCellKey,
-      extraRowClass: extraRowClass,
-      stripeBg: stripeBg
-    };
-  }, [startIndex, rowClass, stripedRows, selectedRows, stripedColors]);
-
-  // Render mobile card
-  var renderMobileCard = React.useCallback(function (row, rowIndexInPage) {
-    var _getRowMetadata = getRowMetadata(row, rowIndexInPage),
-      globalIndex = _getRowMetadata.globalIndex,
-      key = _getRowMetadata.key,
-      actionCellKey = _getRowMetadata.actionCellKey,
-      extraRowClass = _getRowMetadata.extraRowClass,
-      stripeBg = _getRowMetadata.stripeBg;
+    }) : "";
+    var safeExtraRowClass = typeof extraRowClass === "string" ? extraRowClass.trim() : "";
+    var stripeBg = stripedRows && !isSelected ? stripedColors[globalIndex % stripedColors.length] : undefined;
     return /*#__PURE__*/React.createElement("div", {
       key: key,
       style: stripeBg ? {
@@ -4597,9 +4483,9 @@ var Table = function Table(_ref) {
       } : undefined,
       className: cn$1("border rounded-lg mb-3 shadow-sm overflow-hidden transition-all duration-200", {
         "cursor-pointer": !!onRowClick,
-        "bg-primary-50 border-primary-200": selectedRows.has(key),
-        "hover:shadow-md": !selectedRows.has(key)
-      }, extraRowClass),
+        "bg-primary-50 border-primary-200": isSelected,
+        "hover:shadow-md": !isSelected
+      }, safeExtraRowClass),
       onClick: function onClick() {
         return onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(row, globalIndex);
       }
@@ -4612,12 +4498,12 @@ var Table = function Table(_ref) {
         e.stopPropagation();
         toggleExpandRow(row, rowIndexInPage);
       },
-      "aria-expanded": expandedRows.has(key),
+      "aria-expanded": isExpanded,
       className: "p-1 rounded hover:bg-gray-200"
-    }, expandedRows.has(key) ? "▾" : "▸"), selectable && /*#__PURE__*/React.createElement("input", {
+    }, isExpanded ? "▾" : "▸"), selectable && /*#__PURE__*/React.createElement("input", {
       type: "checkbox",
       className: "rounded border-gray-300 h-4 w-4",
-      checked: selectedRows.has(key),
+      checked: isSelected,
       onChange: function onChange(e) {
         e.stopPropagation();
         handleSelectRow(row, rowIndexInPage);
@@ -4631,52 +4517,46 @@ var Table = function Table(_ref) {
       className: "relative"
     }, /*#__PURE__*/React.createElement("button", {
       onClick: function onClick(e) {
-        e.stopPropagation();
-        toggleActions(e, actionCellKey, row);
+        return toggleActions(e, actionCellKey, row);
       },
-      "aria-expanded": openActionKey === actionCellKey,
+      "aria-expanded": (actionAnchor === null || actionAnchor === void 0 ? void 0 : actionAnchor.key) === actionCellKey,
       className: "p-1.5 rounded hover:bg-gray-200",
       title: "Actions"
     }, /*#__PURE__*/React.createElement(MoreVertical, {
       className: "h-4 w-4"
-    })), actionAnchor && actionAnchor.key === actionCellKey && /*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/React.createElement(ActionMenuPortal, {
+    })), (actionAnchor === null || actionAnchor === void 0 ? void 0 : actionAnchor.key) === actionCellKey && /*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/React.createElement(ActionMenuPortal, {
       anchorElem: actionAnchor.elem,
       anchorRow: actionAnchor.row,
       actions: actionsToUse,
-      onClose: function onClose() {
-        setOpenActionKey(null);
-        setActionAnchor(null);
-      },
       onAction: function onAction(action) {
-        handleOnAction(action, row);
-        setOpenActionKey(null);
-        setActionAnchor(null);
+        return handleOnAction(action, row);
       },
       menuRef: actionMenuRef
     }), document.body))), /*#__PURE__*/React.createElement("div", {
       className: "p-4"
     }, visibleColumns.map(function (column, colIndex) {
-      var extraCellClass = typeof cellClass === "function" ? (cellClass({
+      var extraCellClass = typeof cellClass === "function" ? cellClass({
         row: row,
         rowIndex: globalIndex,
         column: column,
         columnIndex: colIndex
-      }) || "").trim() : "";
+      }) : "";
+      var safeExtraCellClass = typeof extraCellClass === "string" ? extraCellClass.trim() : "";
       return /*#__PURE__*/React.createElement("div", {
         key: column.key,
-        className: cn$1("flex justify-between items-center flex-row py-2 border-b last:border-b-0", extraCellClass)
+        className: cn$1("flex justify-between items-center flex-row py-2 border-b last:border-b-0", safeExtraCellClass)
       }, /*#__PURE__*/React.createElement("div", {
         className: "text-xs font-medium text-gray-500 uppercase tracking-wide mb-1 sm:mb-0 sm:w-1/3 sm:pr-2"
       }, column.label), /*#__PURE__*/React.createElement("div", {
         className: "text-sm text-gray-900 sm:w-2/3 sm:pl-2 break-words"
       }, renderCell(column, row, globalIndex)));
-    })), hasDetails && expandedRows.has(key) && DetailsComponent && /*#__PURE__*/React.createElement("div", {
+    })), hasDetails && isExpanded && DetailsComponent && /*#__PURE__*/React.createElement("div", {
       className: "border-t bg-gray-50 p-4"
     }, /*#__PURE__*/React.createElement(DetailsComponent, {
       row: row,
       index: globalIndex
     })));
-  }, [getRowMetadata, hasDetails, selectable, showSerial, withAction, expandedRows, selectedRows, onRowClick, visibleColumns, renderCell, cellClass, DetailsComponent, actionsToUse, actionAnchor, openActionKey, handleOnAction, actionMenuRef, toggleActions, toggleExpandRow, handleSelectRow]);
+  }, [startIndex, selectedRows, expandedRows, rowClass, stripedRows, stripedColors, onRowClick, hasDetails, selectable, showSerial, withAction, visibleColumns, cellClass, DetailsComponent, actionsToUse, actionAnchor, toggleExpandRow, handleSelectRow, toggleActions, handleOnAction, renderCell]);
 
   // Render mobile filters
   var renderMobileFilters = React.useCallback(function () {
@@ -4688,12 +4568,14 @@ var Table = function Table(_ref) {
       className: "text-sm font-medium text-gray-700"
     }, "Filters"), /*#__PURE__*/React.createElement("button", {
       onClick: function onClick() {
-        return setShowMobileFilters(!showMobileFilters);
+        return setShowMobileFilters(function (s) {
+          return !s;
+        });
       },
       className: "text-xs text-gray-500 hover:text-gray-700"
     }, showMobileFilters ? "Hide" : "Show")), showMobileFilters && /*#__PURE__*/React.createElement("div", {
       className: "space-y-3"
-    }, globalSearch && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    }, globalSearch && /*#__PURE__*/React.createElement("div", {
       className: "relative"
     }, /*#__PURE__*/React.createElement("input", {
       type: "text",
@@ -4706,7 +4588,7 @@ var Table = function Table(_ref) {
       onKeyDown: onGlobalKeyDown
     }), /*#__PURE__*/React.createElement(Search, {
       className: "absolute right-3 top-2.5 h-4 w-4 text-gray-400"
-    }))), filterable && visibleColumns.map(function (column) {
+    })), filterable && visibleColumns.map(function (column) {
       return /*#__PURE__*/React.createElement("div", {
         key: column.key
       }, /*#__PURE__*/React.createElement("label", {
@@ -4721,9 +4603,26 @@ var Table = function Table(_ref) {
         }
       }));
     })));
-  }, [showMobileFilters, globalSearch, searchInput, onGlobalKeyDown, filterable, visibleColumns, filters, handleFilter, setShowMobileFilters, setSearchInput]);
+  }, [showMobileFilters, globalSearch, searchInput, onGlobalKeyDown, filterable, visibleColumns, filters, handleFilter]);
+
+  // Check if all page rows are selected
+  var allPageSelected = React.useMemo(function () {
+    if (paginatedData.length === 0) return false;
+    return paginatedData.every(function (r, i) {
+      return selectedRows.has(getRowKey(r, startIndex + i));
+    });
+  }, [paginatedData, selectedRows, startIndex]);
 
-  // Render
+  // Limit options for selector
+  var limitOptionsForSelect = React.useMemo(function () {
+    var opts = Array.isArray(limitOptions) && limitOptions.length > 0 ? limitOptions : [25, 50, 100];
+    return opts.map(function (opt) {
+      return {
+        label: String(opt),
+        value: opt
+      };
+    });
+  }, [limitOptions]);
   return /*#__PURE__*/React.createElement("div", {
     className: "w-full border rounded-lg md:rounded-md bg-white"
   }, /*#__PURE__*/React.createElement("div", {
@@ -4744,7 +4643,7 @@ var Table = function Table(_ref) {
     htmlFor: "pagination-limit",
     className: "text-sm text-gray-600 whitespace-nowrap"
   }, "Show"), /*#__PURE__*/React.createElement(Select, {
-    options: limitOptionsMemo,
+    options: limitOptionsForSelect,
     value: limit,
     allowClear: false,
     placeholder: "",
@@ -4756,28 +4655,15 @@ var Table = function Table(_ref) {
     className: "flex flex-col sm:flex-row items-start sm:items-center gap-3 w-full md:w-auto"
   }, /*#__PURE__*/React.createElement("div", {
     className: "text-sm text-gray-700 whitespace-nowrap"
-  }, filteredData.length === 0 ? 0 : startIndex + 1, " -", " ", Math.min(endIndex, filteredData.length), " of ", filteredData.length, " ", "results"), pagination && /*#__PURE__*/React.createElement("div", {
+  }, filteredData.length === 0 ? 0 : startIndex + 1, " -", " ", Math.min(endIndex, filteredData.length), " of ", filteredData.length, " results"), pagination && /*#__PURE__*/React.createElement("div", {
     className: "flex items-center gap-1"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "flex gap-1"
   }, /*#__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(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",
-    title: "Previous page"
+    "aria-label": "Previous page"
   }, /*#__PURE__*/React.createElement(ChevronLeft, {
     className: "size-4 md:size-5 text-gray-800"
   })), /*#__PURE__*/React.createElement("button", {
@@ -4786,21 +4672,10 @@ var Table = function Table(_ref) {
     onClick: function onClick() {
       return handlePageChange(Math.min(totalPages, currentPage + 1));
     },
-    "aria-label": "Next page",
-    title: "Next page"
+    "aria-label": "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", {
+  }))))), globalSearch && /*#__PURE__*/React.createElement("div", {
     className: "p-4 border-b"
   }, /*#__PURE__*/React.createElement("div", {
     className: "flex flex-col sm:flex-row items-start sm:items-center gap-2"
@@ -4866,9 +4741,7 @@ var Table = function Table(_ref) {
   }, /*#__PURE__*/React.createElement("input", {
     type: "checkbox",
     className: "rounded border-gray-300",
-    checked: paginatedData.length > 0 && paginatedData.every(function (r, i) {
-      return selectedRows.has(getRowKey(r, startIndex + i));
-    }),
+    checked: allPageSelected,
     onChange: handleSelectAll
   })), visibleColumns.map(function (column) {
     return /*#__PURE__*/React.createElement("th", {
@@ -4938,16 +4811,35 @@ var Table = function Table(_ref) {
   }, loading ? /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
     colSpan: visibleCount,
     className: "px-6 py-8 text-center"
-  }, /*#__PURE__*/React.createElement(LoadingState, null))) : paginatedData.length === 0 ? /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-col items-center gap-2"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "h-6 w-6 animate-spin rounded-full border-2 border-primary-600 border-t-transparent"
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "text-sm text-gray-500"
+  }, "Loading...")))) : paginatedData.length === 0 ? /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
     colSpan: visibleCount,
     className: "px-6 py-8 text-center"
-  }, /*#__PURE__*/React.createElement(EmptyState, null))) : paginatedData.map(function (row, rowIndexInPage) {
-    var _getRowMetadata2 = getRowMetadata(row, rowIndexInPage),
-      globalIndex = _getRowMetadata2.globalIndex,
-      key = _getRowMetadata2.key,
-      actionCellKey = _getRowMetadata2.actionCellKey,
-      extraRowClass = _getRowMetadata2.extraRowClass,
-      stripeBg = _getRowMetadata2.stripeBg;
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-col items-center gap-2"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "text-gray-400"
+  }, /*#__PURE__*/React.createElement(List, {
+    className: "h-8 w-8"
+  })), /*#__PURE__*/React.createElement("span", {
+    className: "text-sm text-gray-500"
+  }, "No results found.")))) : paginatedData.map(function (row, rowIndexInPage) {
+    var globalIndex = startIndex + rowIndexInPage;
+    var key = getRowKey(row, globalIndex);
+    var actionCellKey = "actions-".concat(key);
+    var isSelected = selectedRows.has(key);
+    var isExpanded = expandedRows.has(key);
+    var extraRowClass = typeof rowClass === "function" ? rowClass({
+      row: row,
+      rowIndex: globalIndex
+    }) : "";
+    var safeExtraRowClass = typeof extraRowClass === "string" ? extraRowClass.trim() : "";
+    var stripeBg = stripedRows && !isSelected ? stripedColors[globalIndex % stripedColors.length] : undefined;
     return /*#__PURE__*/React.createElement(React.Fragment, {
       key: key
     }, /*#__PURE__*/React.createElement("tr", {
@@ -4956,8 +4848,8 @@ var Table = function Table(_ref) {
       } : undefined,
       className: cn$1("hover:bg-gray-50", {
         "cursor-pointer": !!onRowClick,
-        "bg-primary-50": selectedRows.has(key)
-      }, extraRowClass),
+        "bg-primary-50": isSelected
+      }, safeExtraRowClass),
       onClick: function onClick() {
         return onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(row, globalIndex);
       }
@@ -4968,33 +4860,36 @@ var Table = function Table(_ref) {
         e.stopPropagation();
         toggleExpandRow(row, rowIndexInPage);
       },
-      "aria-expanded": expandedRows.has(key),
+      "aria-expanded": isExpanded,
       className: "p-1 rounded hover:bg-gray-100"
-    }, expandedRows.has(key) ? "▾" : "▸")), showSerial && /*#__PURE__*/React.createElement("td", {
+    }, isExpanded ? "▾" : "▸")), showSerial && /*#__PURE__*/React.createElement("td", {
       className: "px-4 py-4 whitespace-nowrap text-sm text-gray-900"
     }, globalIndex + 1), selectable && /*#__PURE__*/React.createElement("td", {
       className: "px-6 py-4",
       onClick: function onClick(e) {
-        e.stopPropagation();
+        return e.stopPropagation();
       }
     }, /*#__PURE__*/React.createElement("input", {
       type: "checkbox",
       className: "rounded border-gray-300",
-      checked: selectedRows.has(key),
+      checked: isSelected,
       onChange: function onChange() {
         return handleSelectRow(row, rowIndexInPage);
       }
     })), visibleColumns.map(function (column, columnIndex) {
-      var extraCellClass = typeof cellClass === "function" ? (cellClass({
+      var extraCellClass = typeof cellClass === "function" ? cellClass({
         row: row,
         rowIndex: globalIndex,
         column: column,
         columnIndex: columnIndex
-      }) || "").trim() : "";
+      }) : "";
+      var safeExtraCellClass = typeof extraCellClass === "string" ? extraCellClass.trim() : "";
       return /*#__PURE__*/React.createElement("td", {
         key: column.key,
-        className: cn$1("px-6 py-4 whitespace-nowrap text-sm text-gray-900", extraCellClass)
+        className: cn$1("px-6 py-4 whitespace-nowrap text-sm text-gray-900", safeExtraCellClass)
       }, renderCell(column, row, globalIndex));
+    }), /*#__PURE__*/React.createElement("td", {
+      className: "px-4 py-4"
     }), withAction && /*#__PURE__*/React.createElement("td", {
       className: "px-4 py-4 text-sm text-right",
       onClick: function onClick(e) {
@@ -5006,39 +4901,47 @@ var Table = function Table(_ref) {
       onClick: function onClick(e) {
         return toggleActions(e, actionCellKey, row);
       },
-      "aria-expanded": openActionKey === actionCellKey,
+      "aria-expanded": (actionAnchor === null || actionAnchor === void 0 ? void 0 : actionAnchor.key) === actionCellKey,
       className: "p-1 rounded hover:bg-gray-100",
       title: "Actions"
     }, /*#__PURE__*/React.createElement(MoreVertical, {
       className: "h-4 w-4"
-    }))), actionAnchor && actionAnchor.key === actionCellKey && /*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/React.createElement(ActionMenuPortal, {
+    }))), (actionAnchor === null || actionAnchor === void 0 ? void 0 : actionAnchor.key) === actionCellKey && /*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/React.createElement(ActionMenuPortal, {
       anchorElem: actionAnchor.elem,
       anchorRow: actionAnchor.row,
       actions: actionsToUse,
-      onClose: function onClose() {
-        setOpenActionKey(null);
-        setActionAnchor(null);
-      },
       onAction: function onAction(action) {
-        handleOnAction(action, row);
-        setOpenActionKey(null);
-        setActionAnchor(null);
+        return handleOnAction(action, row);
       },
       menuRef: actionMenuRef
-    }), document.body))), hasDetails && expandedRows.has(key) && DetailsComponent && /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
+    }), document.body))), hasDetails && isExpanded && DetailsComponent && /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
       colSpan: visibleCount,
       className: "px-6 py-4 bg-gray-50"
-    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(DetailsComponent, {
+    }, /*#__PURE__*/React.createElement(DetailsComponent, {
       row: row,
       index: globalIndex
-    })))));
+    }))));
   })))), isMobileView && /*#__PURE__*/React.createElement("div", {
     className: "p-4"
   }, loading ? /*#__PURE__*/React.createElement("div", {
     className: "py-8 text-center"
-  }, /*#__PURE__*/React.createElement(LoadingState, null)) : paginatedData.length === 0 ? /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-col items-center gap-2"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "h-6 w-6 animate-spin rounded-full border-2 border-primary-600 border-t-transparent"
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "text-sm text-gray-500"
+  }, "Loading..."))) : paginatedData.length === 0 ? /*#__PURE__*/React.createElement("div", {
     className: "py-8 text-center"
-  }, /*#__PURE__*/React.createElement(EmptyState, null)) : paginatedData.map(function (row, rowIndexInPage) {
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-col items-center gap-2"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "text-gray-400"
+  }, /*#__PURE__*/React.createElement(List, {
+    className: "h-8 w-8"
+  })), /*#__PURE__*/React.createElement("span", {
+    className: "text-sm text-gray-500"
+  }, "No results found."))) : paginatedData.map(function (row, rowIndexInPage) {
     return renderMobileCard(row, rowIndexInPage);
   })), pagination && /*#__PURE__*/React.createElement("div", {
     className: "p-4 border-t"
@@ -5049,17 +4952,6 @@ 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() {
@@ -5067,7 +4959,19 @@ var Table = function Table(_ref) {
     }
   }, "Previous"), /*#__PURE__*/React.createElement("div", {
     className: "flex items-center gap-1"
-  }, getPaginationNumbers(currentPage, totalPages).map(function (pageNum) {
+  }, Array.from({
+    length: Math.min(5, totalPages)
+  }, function (_, i) {
+    var pageNum;
+    if (totalPages <= 5) {
+      pageNum = i + 1;
+    } else if (currentPage <= 3) {
+      pageNum = i + 1;
+    } else if (currentPage >= totalPages - 2) {
+      pageNum = totalPages - 4 + i;
+    } else {
+      pageNum = currentPage - 2 + i;
+    }
     return /*#__PURE__*/React.createElement("button", {
       key: pageNum,
       className: cn$1("h-8 w-8 rounded-lg md:rounded-md text-sm", {
@@ -5084,174 +4988,9 @@ var Table = function Table(_ref) {
     onClick: function onClick() {
       return handlePageChange(Math.min(totalPages, currentPage + 1));
     }
-  }, "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"
-  }))))));
+  }, "Next")))));
 };
 
-// ActionMenuPortal constants
-var MENU_WIDTH = 180;
-var MAX_MENU_HEIGHT = 320;
-var MENU_MARGIN = 8;
-var MIN_MENU_HEIGHT = 80;
-function ActionMenuPortal(_ref2) {
-  var anchorElem = _ref2.anchorElem,
-    anchorRow = _ref2.anchorRow,
-    _ref2$actions = _ref2.actions,
-    actions = _ref2$actions === void 0 ? [] : _ref2$actions;
-    _ref2.onClose;
-    var onAction = _ref2.onAction,
-    menuRef = _ref2.menuRef;
-  var _useState29 = React.useState({
-      left: 0,
-      top: 0,
-      transformOrigin: "top right",
-      maxHeight: 300,
-      width: MENU_WIDTH,
-      opacity: 0
-    }),
-    _useState30 = _slicedToArray(_useState29, 2),
-    style = _useState30[0],
-    setStyle = _useState30[1];
-
-  // compute position using actual menu height (if available) and layout measurements
-  var computePosition = function computePosition() {
-    if (!anchorElem) return;
-    var rect = anchorElem.getBoundingClientRect();
-    var scrollY = window.scrollY || window.pageYOffset;
-    var scrollX = window.scrollX || window.pageXOffset;
-    var spaceBelow = window.innerHeight - rect.bottom;
-    var spaceAbove = rect.top;
-
-    // allowed max height based on available space
-    var allowedMaxHeight = Math.min(MAX_MENU_HEIGHT, Math.max(MIN_MENU_HEIGHT, Math.max(spaceBelow - MENU_MARGIN, spaceAbove - MENU_MARGIN)));
-
-    // choose placement by comparing actual available spaces
-    var placement = "bottom";
-    if (spaceBelow < MENU_PLACEMENT_THRESHOLD && spaceAbove > spaceBelow) {
-      placement = "top";
-      // when placing on top we should cap allowedMaxHeight by spaceAbove
-      allowedMaxHeight = Math.min(MAX_MENU_HEIGHT, Math.max(MIN_MENU_HEIGHT, spaceAbove - MENU_MARGIN));
-    } else {
-      // placing bottom: cap by spaceBelow
-      allowedMaxHeight = Math.min(MAX_MENU_HEIGHT, Math.max(MIN_MENU_HEIGHT, spaceBelow - MENU_MARGIN));
-    }
-
-    // measure the menu's content height if we can, and compute the actual menu height we'll use.
-    var measuredMenuHeight = allowedMaxHeight;
-    var menuEl = menuRef === null || menuRef === void 0 ? void 0 : menuRef.current;
-    if (menuEl) {
-      // scrollHeight is the content height; offsetHeight may reflect current rendered height.
-      var contentHeight = menuEl.scrollHeight || menuEl.offsetHeight || allowedMaxHeight;
-      // actual height will be min(contentHeight, allowedMaxHeight)
-      measuredMenuHeight = Math.min(contentHeight, allowedMaxHeight);
-    }
-
-    // compute top according to placement and measuredMenuHeight
-    var top;
-    if (placement === "top") {
-      // place menu so its bottom sits just above the anchor (rect.top - margin)
-      top = rect.top + scrollY - measuredMenuHeight - MENU_MARGIN;
-    } else {
-      // place menu just below the anchor (rect.bottom + margin)
-      top = rect.bottom + scrollY + MENU_MARGIN;
-    }
-
-    // clamp top to viewport (so it never goes off-screen)
-    var minTop = MENU_MARGIN + scrollY;
-    var maxTop = window.innerHeight + scrollY - measuredMenuHeight - MENU_MARGIN;
-    if (top < minTop) top = minTop;
-    if (top > maxTop) top = maxTop;
-
-    // compute left and clamp horizontally
-    var left = rect.right + scrollX - MENU_WIDTH;
-    if (left < MENU_MARGIN) left = MENU_MARGIN;
-    if (left + MENU_WIDTH > window.innerWidth - MENU_MARGIN) {
-      left = Math.max(MENU_MARGIN, window.innerWidth - MENU_WIDTH - MENU_MARGIN);
-    }
-    var transformOrigin = placement === "bottom" ? "top right" : "bottom right";
-
-    // set style (opacity 1 to fade-in)
-    setStyle({
-      left: left,
-      top: top,
-      transformOrigin: transformOrigin,
-      maxHeight: allowedMaxHeight,
-      width: MENU_WIDTH,
-      opacity: 1
-    });
-  };
-
-  // useLayoutEffect so the position is measured & applied before paint
-  React.useLayoutEffect(function () {
-    // compute once after mount
-    computePosition();
-    var onScrollOrResize = function onScrollOrResize() {
-      // using requestAnimationFrame to avoid layout thrash on fast scroll/resize
-      window.requestAnimationFrame(function () {
-        return computePosition();
-      });
-    };
-    window.addEventListener("resize", onScrollOrResize);
-    // capture scrolls (true) so position updates even when scrolling ancestor elements
-    window.addEventListener("scroll", onScrollOrResize, true);
-    return function () {
-      window.removeEventListener("resize", onScrollOrResize);
-      window.removeEventListener("scroll", onScrollOrResize, true);
-    };
-    // Recompute when anchor element changes or actions change (content height may change).
-    // 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: {
-      position: "absolute",
-      top: style.top,
-      left: style.left,
-      width: style.width,
-      maxHeight: style.maxHeight,
-      transformOrigin: style.transformOrigin,
-      opacity: style.opacity
-    },
-    className: "absolute z-50 bg-white rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 overflow-y-auto transition-opacity duration-150 ease-out",
-    onClick: function onClick(e) {
-      return e.stopPropagation();
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "p-1"
-  }, actions.length === 0 ? /*#__PURE__*/React.createElement("div", {
-    className: "px-3 py-2 text-sm text-gray-500"
-  }, "No actions") : actions.map(function (action) {
-    return /*#__PURE__*/React.createElement("div", {
-      key: action.name,
-      className: "px-1"
-    }, action.render ? /*#__PURE__*/React.createElement("button", {
-      className: "w-full text-left px-3 py-2 text-sm hover:bg-gray-100 flex items-center gap-2 rounded-md",
-      onClick: function onClick(e) {
-        e.stopPropagation();
-        onAction === null || onAction === void 0 || onAction(action, anchorRow);
-      }
-    }, action.render(anchorRow)) : /*#__PURE__*/React.createElement("button", {
-      className: "w-full text-left px-3 py-2 text-sm hover:bg-gray-100 flex items-center gap-2 rounded-md",
-      onClick: function onClick(e) {
-        e.stopPropagation();
-        onAction === null || onAction === void 0 || onAction(action, anchorRow);
-      }
-    }, action.icon && /*#__PURE__*/React.createElement("span", {
-      className: "inline-flex"
-    }, action.icon), /*#__PURE__*/React.createElement("span", null, action.label)));
-  }))), document.body);
-}
-
 var isCheckBoxInput = (element) => element.type === 'checkbox';
 
 var isDateObject = (value) => value instanceof Date;