@dreamtree-org/twreact-ui 1.0.77 → 1.0.78

package/dist/index.js

@@ -3883,279 +3883,372 @@ 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; }
-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,
+
+// Move static default actions outside component to prevent recreation
+var DEFAULT_ACTIONS = [{
+  name: "edit",
+  label: "Edit",
+  onClick: function onClick() {
+    return console.log("Edit action clicked");
+  },
+  icon: /*#__PURE__*/React.createElement(PenSquare, {
+    size: 16
+  })
+}, {
+  name: "delete",
+  label: "Delete",
+  onClick: function onClick() {
+    return console.log("Delete action clicked");
+  },
+  icon: /*#__PURE__*/React.createElement(Trash, {
+    size: 16
+  })
+}, {
+  name: "view",
+  label: "View",
+  onClick: function onClick() {
+    return console.log("View action clicked");
+  },
+  icon: /*#__PURE__*/React.createElement(Eye, {
+    size: 16
+  })
+}];
+
+// 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;
-    _ref.onPageChange;
-    var 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(Array.isArray(data) ? data : []),
+// 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),
-    tableData = _useState4[0],
-    setTableData = _useState4[1];
-  var _useState5 = React.useState(false),
+    isMobileView = _useState4[0],
+    setIsMobileView = _useState4[1];
+  var _useState5 = React.useState(function () {
+      return Array.isArray(data) ? data : [];
+    }),
     _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
-    setColumnsState(Array.isArray(columns) ? columns.map(function (c) {
-      return _objectSpread$9({}, c);
-    }) : []);
-  }, [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];
-  var openRef = React.useRef(null);
+  // 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);
     }
-  }, [pageNumber]);
+  }, [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]);
 
-  // Check if mobile view
+  // 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]);
+
+  // Mobile view detection
   React.useEffect(function () {
     var checkMobile = function checkMobile() {
-      setIsMobileView(window.innerWidth < responsiveBreakpoint);
+      return setIsMobileView(window.innerWidth < responsiveBreakpoint);
     };
-
-    // Initial check
     checkMobile();
-
-    // Add event listener
     window.addEventListener("resize", checkMobile);
     return function () {
-      window.removeEventListener("resize", checkMobile);
+      return window.removeEventListener("resize", checkMobile);
     };
   }, [responsiveBreakpoint]);
-  var isValidList = function isValidList(d) {
-    return Array.isArray(d);
-  };
 
-  // Close column menu when clicking outside
-  React.useEffect(function () {
-    var onDocClick = function onDocClick(e) {
-      if (showColumnMenu && 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]);
-
-  // Close per-row actionmenu when clicking outside
-  React.useEffect(function () {
-    var handler = function handler(e) {
-      if (openActionKey && openRef.current && !openRef.current.contains(e.target)) {
-        setOpenActionKey(null);
-      }
-    };
-    document.addEventListener("click", handler);
-    return function () {
-      return document.removeEventListener("click", handler);
-    };
-  }, [openActionKey]);
+  // 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]);
-  var toggleColumnVisibility = function toggleColumnVisibility(key) {
-    setColumnsState(function (prev) {
-      return prev.map(function (c) {
-        return c.key === key ? _objectSpread$9(_objectSpread$9({}, c), {}, {
-          isVisible: !(c.isVisible !== false)
-        }) : c;
-      });
-    });
-    setCurrentPage(1);
-  };
 
-  // Handle actions
-  var handleOnAction = function handleOnAction(action, row) {
-    var _action$onClick;
-    (_action$onClick = action.onClick) === null || _action$onClick === void 0 || _action$onClick.call(action, {
-      action: action,
-      row: row
-    });
-    onAction && onAction({
-      action: action,
-      row: row
-    });
-    setOpenActionKey(null);
-    setActionAnchor(null);
-  };
-  var defaultActions = [{
-    name: "edit",
-    label: "Edit",
-    onClick: function onClick() {
-      console.log("Edit action clicked");
-    },
-    icon: /*#__PURE__*/React.createElement(PenSquare, {
-      size: 16
-    })
-  }, {
-    name: "delete",
-    label: "Delete",
-    onClick: function onClick() {
-      console.log("Delete action clicked");
-    },
-    icon: /*#__PURE__*/React.createElement(Trash, {
-      size: 16
-    })
-  }, {
-    name: "view",
-    label: "View",
-    onClick: function onClick() {
-      console.log("View action clicked");
-    },
-    icon: /*#__PURE__*/React.createElement(Eye, {
-      size: 16
-    })
-  }];
-  var actionsToUse = actions !== undefined ? actions : defaultActions;
-  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);
-  };
-
-  // Sorting
+  // Sorted data (memoized)
   var sortedData = React.useMemo(function () {
     if (serverSide || !sortConfig.key) return tableData;
     var key = sortConfig.key,
@@ -4164,12 +4257,14 @@ 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();
@@ -4179,131 +4274,170 @@ var Table = function Table(_ref) {
       });
     });
   }, [sortedData, filters, filterable, serverSide]);
-  // Pagination indices
-  var startIndex = pagination ? (currentPage - 1) * limit : 0;
-  var endIndex = pagination ? startIndex + limit : filteredData.length;
-
-  // 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
-  var handleSort = function handleSort(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);
-  };
 
-  // Selection handlers
-  var handleSelectAll = function handleSelectAll() {
-    var newSelection = new Set(selectedRows);
-    var pageRowKeys = paginatedData.map(function (r, i) {
-      return getRowKey(r, startIndex + i);
+  // 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,
+        paginatedData: paginated,
+        totalPages: pages
+      };
+    }, [filteredData, pagination, serverSide, currentPage, limit, totalRecords]),
+    startIndex = _useMemo.startIndex,
+    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;
+    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 keyToRow = new Map(filteredData.map(function (r, i) {
-      return [getRowKey(r, i), r];
-    }));
-    var selectedData = Array.from(newSelection).map(function (k) {
-      return keyToRow.get(k);
-    }).filter(Boolean);
-    onSelectionChange === null || onSelectionChange === void 0 || onSelectionChange(selectedData);
-  };
-  var handleSelectRow = function handleSelectRow(row, rowIndexInPage) {
+      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 keyToRow = new Map(filteredData.map(function (r, i) {
-      return [getRowKey(r, i), r];
-    }));
-    var selectedData = Array.from(newSelection).map(function (k) {
-      return keyToRow.get(k);
-    }).filter(Boolean);
-    onSelectionChange === null || onSelectionChange === void 0 || onSelectionChange(selectedData);
-  };
-  var toggleExpandRow = function toggleExpandRow(row, rowIndexInPage) {
+    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);
-    var newExpanded = new Set(expandedRows);
-    if (newExpanded.has(key)) newExpanded["delete"](key);else newExpanded.add(key);
-    setExpandedRows(newExpanded);
-  };
-  var handleFilter = function handleFilter(key, value) {
-    var newFilters = _objectSpread$9(_objectSpread$9({}, filters), {}, _defineProperty$4({}, key, value));
-    setFilters(newFilters);
-    onFilter === null || onFilter === void 0 || onFilter(newFilters);
-    onFilterChange === null || onFilterChange === void 0 || onFilterChange(newFilters);
-    setCurrentPage(1);
-  };
-  var renderCell = function renderCell(column, row, globalIndex) {
-    if (column.render) return column.render(row, globalIndex);
-    return row === null || row === void 0 ? void 0 : row[column.key];
-  };
-
-  // UI counts
-  var visibleCount = (showSerial ? 1 : 0) + visibleColumns.length + (selectable ? 1 : 0) + (hasDetails ? 1 : 0) + (withAction ? 1 : 0);
-  var toggleActions = function toggleActions(e, actionCellKey, row) {
+    setExpandedRows(function (prev) {
+      var newExpanded = new Set(prev);
+      if (newExpanded.has(key)) {
+        newExpanded["delete"](key);
+      } else {
+        newExpanded.add(key);
+      }
+      return newExpanded;
+    });
+  }, [startIndex]);
+  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
-      });
+      };
+    });
+  }, []);
+  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]);
+  var onGlobalKeyDown = React.useCallback(function (e) {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      applyGlobalSearch();
     }
-  };
-  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() {
-      setOpenActionKey(function (k) {
-        return k ? k : 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]);
+  }, [applyGlobalSearch]);
+  var handlePageChange = React.useCallback(function (newPage) {
+    setCurrentPage(newPage);
+  }, []);
+
+  // Data fetching effect
   React.useEffect(function () {
     if (!onFetch) return;
     onFetch({
@@ -4317,45 +4451,31 @@ var Table = function Table(_ref) {
       sort: sortConfig
     });
   }, [onFetch, filters, currentPage, limit, sortConfig]);
-  React.useEffect(function () {
-    if (!serverSide) setTableData(data);
-  }, [data, serverSide]);
-  React.useEffect(function () {
-    if (!onFetch && isValidList(data)) setTableData(data);
-  }, [data, onFetch]);
 
-  // Global search
+  // Sync searchInput with filters.global
   React.useEffect(function () {
     setSearchInput(filters.global || "");
   }, [filters.global]);
-  var applyGlobalSearch = function applyGlobalSearch() {
-    handleFilter("global", searchInput);
-  };
-  var onGlobalKeyDown = function onGlobalKeyDown(e) {
-    if (e.key === "Enter") {
-      e.preventDefault();
-      applyGlobalSearch();
-    }
-  };
-  var handleLimitChange = function handleLimitChange(nextLimit) {
-    var parsed = Number(nextLimit);
-    if (!Number.isFinite(parsed) || parsed <= 0) return;
-    setLimit(parsed);
-    setCurrentPage(1);
-    onLimitChange === null || onLimitChange === void 0 || onLimitChange(parsed);
-  };
+
+  // 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 = function renderMobileCard(row, rowIndexInPage) {
+  var renderMobileCard = React.useCallback(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 && !selectedRows.has(key) ? stripedColors[globalIndex % stripedColors.length] : undefined;
+    var stripeBg = stripedRows && !isSelected ? stripedColors[globalIndex % stripedColors.length] : undefined;
     return /*#__PURE__*/React.createElement("div", {
       key: key,
       style: stripeBg ? {
@@ -4363,8 +4483,8 @@ 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)
+        "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);
@@ -4378,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);
@@ -4397,26 +4517,19 @@ 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", {
@@ -4437,16 +4550,16 @@ var Table = function Table(_ref) {
       }, 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
     })));
-  };
+  }, [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 = 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", {
@@ -4455,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",
@@ -4473,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", {
@@ -4488,9 +4603,26 @@ var Table = function Table(_ref) {
         }
       }));
     })));
-  };
+  }, [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", {
@@ -4511,23 +4643,11 @@ var Table = function Table(_ref) {
     htmlFor: "pagination-limit",
     className: "text-sm text-gray-600 whitespace-nowrap"
   }, "Show"), /*#__PURE__*/React.createElement(Select, {
-    options: Array.isArray(limitOptions) && limitOptions.length > 0 ? limitOptions.map(function (opt) {
-      return {
-        label: String(opt),
-        value: opt
-      };
-    }) : [25, 50, 100].map(function (opt) {
-      return {
-        label: String(opt),
-        value: opt
-      };
-    }),
+    options: limitOptionsForSelect,
     value: limit,
     allowClear: false,
     placeholder: "",
-    onChange: function onChange(e) {
-      return handleLimitChange(e);
-    },
+    onChange: handleLimitChange,
     className: "w-20 md:w-30"
   }), /*#__PURE__*/React.createElement("p", {
     className: "text-sm text-gray-600 whitespace-nowrap"
@@ -4535,17 +4655,13 @@ 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 setCurrentPage(function (p) {
-        return Math.max(1, p - 1);
-      });
+      return handlePageChange(Math.max(1, currentPage - 1));
     },
     "aria-label": "Previous page"
   }, /*#__PURE__*/React.createElement(ChevronLeft, {
@@ -4554,14 +4670,12 @@ 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 === 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"
   }, /*#__PURE__*/React.createElement(ChevronRight, {
     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"
@@ -4627,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", {
@@ -4720,12 +4832,14 @@ var Table = function Table(_ref) {
     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 && !selectedRows.has(key) ? stripedColors[globalIndex % stripedColors.length] : undefined;
+    var stripeBg = stripedRows && !isSelected ? stripedColors[globalIndex % stripedColors.length] : undefined;
     return /*#__PURE__*/React.createElement(React.Fragment, {
       key: key
     }, /*#__PURE__*/React.createElement("tr", {
@@ -4734,7 +4848,7 @@ var Table = function Table(_ref) {
       } : undefined,
       className: cn$1("hover:bg-gray-50", {
         "cursor-pointer": !!onRowClick,
-        "bg-primary-50": selectedRows.has(key)
+        "bg-primary-50": isSelected
       }, safeExtraRowClass),
       onClick: function onClick() {
         return onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(row, globalIndex);
@@ -4746,19 +4860,19 @@ 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);
       }
@@ -4774,6 +4888,8 @@ var Table = function Table(_ref) {
         key: column.key,
         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) {
@@ -4785,32 +4901,26 @@ 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", {
@@ -4845,9 +4955,7 @@ var Table = function Table(_ref) {
     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"
@@ -4871,170 +4979,17 @@ 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")))));
 };
-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: 180,
-      opacity: 0
-    }),
-    _useState30 = _slicedToArray(_useState29, 2),
-    style = _useState30[0],
-    setStyle = _useState30[1];
-  var menuWidth = 180;
-  var maxMenuHeight = 320;
-  var margin = 8;
-  var minMenuHeight = 80;
-
-  // 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(maxMenuHeight, Math.max(minMenuHeight, Math.max(spaceBelow - margin, spaceAbove - margin)));
-
-    // choose placement by comparing actual available spaces
-    var placement = "bottom";
-    if (spaceBelow < 160 && spaceAbove > spaceBelow) {
-      placement = "top";
-      // when placing on top we should cap allowedMaxHeight by spaceAbove
-      allowedMaxHeight = Math.min(maxMenuHeight, Math.max(minMenuHeight, spaceAbove - margin));
-    } else {
-      // placing bottom: cap by spaceBelow
-      allowedMaxHeight = Math.min(maxMenuHeight, Math.max(minMenuHeight, spaceBelow - 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 - margin;
-    } else {
-      // place menu just below the anchor (rect.bottom + margin)
-      top = rect.bottom + scrollY + margin;
-    }
-
-    // clamp top to viewport (so it never goes off-screen)
-    var minTop = margin + scrollY;
-    var maxTop = window.innerHeight + scrollY - measuredMenuHeight - margin;
-    if (top < minTop) top = minTop;
-    if (top > maxTop) top = maxTop;
-
-    // compute left and clamp horizontally
-    var left = rect.right + scrollX - menuWidth;
-    if (left < margin) left = margin;
-    if (left + menuWidth > window.innerWidth - margin) {
-      left = Math.max(margin, window.innerWidth - menuWidth - 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: menuWidth,
-      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).
-  }, [anchorElem, actions, menuRef]);
-  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';