@dreamtree-org/twreact-ui 1.0.76 → 1.0.77

package/dist/index.esm.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import React__default, { forwardRef, createElement, useId, useRef, useState, useEffect, useImperativeHandle, useMemo, useCallback, useLayoutEffect, createContext, useContext, cloneElement, PureComponent } from 'react';
+import React__default, { forwardRef, createElement, useId, useRef, useState, useEffect, useImperativeHandle, useMemo, useLayoutEffect, useCallback, createContext, useContext, cloneElement, PureComponent } from 'react';
 import ReactDOM, { createPortal } from 'react-dom';
 
 function _extends() {
@@ -256,26 +256,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" }],
   [
@@ -3886,98 +3866,6 @@ var Select = /*#__PURE__*/React__default.forwardRef(function (_ref, forwardedRef
 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"];
 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
-var DEFAULT_ACTIONS = [{
-  name: "edit",
-  label: "Edit",
-  onClick: function onClick() {
-    console.log("Edit action clicked");
-  },
-  icon: /*#__PURE__*/React__default.createElement(PenSquare, {
-    size: 16
-  })
-}, {
-  name: "delete",
-  label: "Delete",
-  onClick: function onClick() {
-    console.log("Delete action clicked");
-  },
-  icon: /*#__PURE__*/React__default.createElement(Trash, {
-    size: 16
-  })
-}, {
-  name: "view",
-  label: "View",
-  onClick: function onClick() {
-    console.log("View action clicked");
-  },
-  icon: /*#__PURE__*/React__default.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__default.createElement("div", {
-    className: "flex flex-col items-center gap-2"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "text-gray-400"
-  }, /*#__PURE__*/React__default.createElement(List, {
-    className: "h-8 w-8"
-  })), /*#__PURE__*/React__default.createElement("span", {
-    className: "text-sm text-gray-500"
-  }, "No results found."));
-};
-var LoadingState = function LoadingState() {
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: "flex flex-col items-center gap-2"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "h-6 w-6 animate-spin rounded-full border-2 border-primary-600 border-t-transparent"
-  }), /*#__PURE__*/React__default.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,
@@ -4033,9 +3921,9 @@ var Table = function Table(_ref) {
     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);
+    pageNumber = _ref.pageNumber;
+    _ref.onPageChange;
+    var props = _objectWithoutProperties$1(_ref, _excluded$k);
   // State for responsive view
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -4043,16 +3931,14 @@ var Table = function Table(_ref) {
     setIsMobileView = _useState2[1];
 
   // Keep original table data / loading
-  var _useState3 = useState(function () {
-      return Array.isArray(data) ? data : [];
-    }),
+  var _useState3 = useState(Array.isArray(data) ? data : []),
     _useState4 = _slicedToArray(_useState3, 2),
     tableData = _useState4[0],
     setTableData = _useState4[1];
   var _useState5 = useState(false),
     _useState6 = _slicedToArray(_useState5, 2),
     loading = _useState6[0],
-    _setLoading = _useState6[1];
+    setLoading = _useState6[1];
 
   // Column visibility state
   var _useState7 = useState(function () {
@@ -4064,26 +3950,10 @@ var Table = function Table(_ref) {
     columnsState = _useState8[0],
     setColumnsState = _useState8[1];
   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;
-      });
-    }
+    // Sync when prop changes
+    setColumnsState(Array.isArray(columns) ? columns.map(function (c) {
+      return _objectSpread$9({}, c);
+    }) : []);
   }, [columns]);
 
   // Popover state for column toggler
@@ -4143,44 +4013,39 @@ var Table = function Table(_ref) {
     _useState28 = _slicedToArray(_useState27, 2),
     openActionKey = _useState28[0],
     setOpenActionKey = _useState28[1];
+  var openRef = useRef(null);
   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]);
   useEffect(function () {
     setLimit(pageSize);
   }, [pageSize]);
 
-  // Check if mobile view with debouncing
+  // Check if mobile view
   useEffect(function () {
-    var timeoutId;
     var checkMobile = function checkMobile() {
       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);
+    // Add event listener
+    window.addEventListener("resize", checkMobile);
     return function () {
-      clearTimeout(timeoutId);
-      window.removeEventListener("resize", debouncedCheck);
+      window.removeEventListener("resize", checkMobile);
     };
   }, [responsiveBreakpoint]);
+  var isValidList = function isValidList(d) {
+    return Array.isArray(d);
+  };
 
   // Close column menu when clicking outside
   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)) {
+      if (showColumnMenu && columnMenuRef.current && !columnMenuRef.current.contains(e.target) && columnToggleBtnRef.current && !columnToggleBtnRef.current.contains(e.target)) {
         setShowColumnMenu(false);
       }
     };
@@ -4190,38 +4055,26 @@ var Table = function Table(_ref) {
     };
   }, [showColumnMenu]);
 
+  // Close per-row actionmenu when clicking outside
+  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]);
+
   // Visible columns derived from columnsState
   var visibleColumns = useMemo(function () {
     return columnsState.filter(function (col) {
       return col.isVisible !== false;
     });
   }, [columnsState]);
-
-  // Memoize actions
-  var actionsToUse = useMemo(function () {
-    return actions !== null && actions !== void 0 ? actions : DEFAULT_ACTIONS;
-  }, [actions]);
-
-  // Memoize visible count
-  var visibleCount = 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 = 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 = useCallback(function (newPage) {
-    setCurrentPage(newPage);
-    onPageChange === null || onPageChange === void 0 || onPageChange(newPage);
-  }, [onPageChange]);
-  var toggleColumnVisibility = useCallback(function (key) {
+  var toggleColumnVisibility = function toggleColumnVisibility(key) {
     setColumnsState(function (prev) {
       return prev.map(function (c) {
         return c.key === key ? _objectSpread$9(_objectSpread$9({}, c), {}, {
@@ -4229,23 +4082,58 @@ var Table = function Table(_ref) {
         }) : c;
       });
     });
-    handlePageChange(1);
-  }, [handlePageChange]);
+    setCurrentPage(1);
+  };
 
   // Handle actions
-  var handleOnAction = useCallback(function (action, row) {
+  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 === null || onAction === void 0 || onAction({
+    onAction && onAction({
       action: action,
       row: row
     });
     setOpenActionKey(null);
     setActionAnchor(null);
-  }, [onAction]);
+  };
+  var defaultActions = [{
+    name: "edit",
+    label: "Edit",
+    onClick: function onClick() {
+      console.log("Edit action clicked");
+    },
+    icon: /*#__PURE__*/React__default.createElement(PenSquare, {
+      size: 16
+    })
+  }, {
+    name: "delete",
+    label: "Delete",
+    onClick: function onClick() {
+      console.log("Delete action clicked");
+    },
+    icon: /*#__PURE__*/React__default.createElement(Trash, {
+      size: 16
+    })
+  }, {
+    name: "view",
+    label: "View",
+    onClick: function onClick() {
+      console.log("View action clicked");
+    },
+    icon: /*#__PURE__*/React__default.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
   var sortedData = useMemo(function () {
@@ -4264,38 +4152,16 @@ var Table = function Table(_ref) {
   // Filtering
   var filteredData = 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]);
-
-  // Pagination indices - memoized
-  var _useMemo = useMemo(function () {
-      var start = pagination ? (currentPage - 1) * limit : 0;
-      var end = pagination ? start + limit : filteredData.length;
-      return {
-        startIndex: start,
-        endIndex: end
-      };
-    }, [pagination, currentPage, limit, filteredData.length]),
-    startIndex = _useMemo.startIndex,
-    endIndex = _useMemo.endIndex;
+  }, [sortedData, filters, filterable, serverSide]);
+  // Pagination indices
+  var startIndex = pagination ? (currentPage - 1) * limit : 0;
+  var endIndex = pagination ? startIndex + limit : filteredData.length;
 
   // Paginated view
   var paginatedData = useMemo(function () {
@@ -4309,7 +4175,7 @@ var Table = function Table(_ref) {
   }, [pagination, serverSide, totalRecords, filteredData.length, limit]);
 
   // Sorting handler
-  var handleSort = useCallback(function (key) {
+  var handleSort = function handleSort(key) {
     if (!sortable) return;
     var direction = sortConfig.key === key && sortConfig.direction === "asc" ? "desc" : "asc";
     setSortConfig({
@@ -4317,10 +4183,10 @@ var Table = function Table(_ref) {
       direction: direction
     });
     onSort === null || onSort === void 0 || onSort(key, direction);
-  }, [sortable, sortConfig, onSort]);
+  };
 
-  // Selection handlers - optimized with memoized keyToRowMap
-  var handleSelectAll = useCallback(function () {
+  // Selection handlers
+  var handleSelectAll = function handleSelectAll() {
     var newSelection = new Set(selectedRows);
     var pageRowKeys = paginatedData.map(function (r, i) {
       return getRowKey(r, startIndex + i);
@@ -4338,45 +4204,50 @@ var Table = function Table(_ref) {
       });
     }
     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 keyToRowMap.get(k);
+      return keyToRow.get(k);
     }).filter(Boolean);
     onSelectionChange === null || onSelectionChange === void 0 || onSelectionChange(selectedData);
-  }, [selectedRows, paginatedData, startIndex, keyToRowMap, onSelectionChange]);
-  var handleSelectRow = useCallback(function (row, rowIndexInPage) {
+  };
+  var handleSelectRow = function handleSelectRow(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 keyToRowMap.get(k);
+      return keyToRow.get(k);
     }).filter(Boolean);
     onSelectionChange === null || onSelectionChange === void 0 || onSelectionChange(selectedData);
-  }, [startIndex, selectedRows, keyToRowMap, onSelectionChange]);
-  var toggleExpandRow = useCallback(function (row, rowIndexInPage) {
+  };
+  var toggleExpandRow = function toggleExpandRow(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);
-      return newExpanded;
-    });
-  }, [startIndex]);
-  var handleFilter = 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 = useCallback(function (column, 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];
-  }, []);
-  var toggleActions = useCallback(function (e, actionCellKey, row) {
+  };
+
+  // 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) {
     e.stopPropagation();
     if (actionAnchor && actionAnchor.key === actionCellKey) {
       setOpenActionKey(null);
@@ -4389,7 +4260,7 @@ var Table = function Table(_ref) {
         row: row
       });
     }
-  }, [actionAnchor]);
+  };
   useEffect(function () {
     if (!actionAnchor) return;
     var onDocClick = function onDocClick(ev) {
@@ -4400,9 +4271,9 @@ var Table = function Table(_ref) {
       setActionAnchor(null);
     };
     var onScrollResize = function onScrollResize() {
-      // Close menu on scroll/resize to prevent positioning issues
-      setOpenActionKey(null);
-      setActionAnchor(null);
+      setOpenActionKey(function (k) {
+        return k ? k : null;
+      });
     };
     window.addEventListener("click", onDocClick);
     window.addEventListener("scroll", onScrollResize, true);
@@ -4413,163 +4284,58 @@ var Table = function Table(_ref) {
       window.removeEventListener("resize", onScrollResize);
     };
   }, [actionAnchor]);
-
-  // Track previous fetch params to prevent unnecessary calls
-  var prevFetchParamsRef = useRef(null);
-  var isFetchingRef = useRef(false);
-  var isMountedRef = useRef(true);
-  var onFetchRef = useRef(onFetch);
-  var activeFetchIdRef = useRef(0);
-
-  // Keep ref in sync with onFetch
   useEffect(function () {
-    onFetchRef.current = onFetch;
-  }, [onFetch]);
-
-  // Track mount status
-  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 = useMemo(function () {
-    return {
+    if (!onFetch) return;
+    onFetch({
+      setData: function setData(rows) {
+        return setTableData(Array.isArray(rows) ? rows : []);
+      },
+      setLoading: setLoading,
       filters: filters,
       page: currentPage,
       limit: limit,
-      sortKey: sortConfig.key,
-      sortDirection: sortConfig.direction
-    };
-  }, [filters, currentPage, limit, sortConfig.key, sortConfig.direction]);
-  var fetchParamsString = useMemo(function () {
-    return JSON.stringify(fetchParams);
-  }, [fetchParams]);
-
-  // Consolidated data sync effect
+      sort: sortConfig
+    });
+  }, [onFetch, filters, currentPage, limit, sortConfig]);
   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]);
+    if (!serverSide) setTableData(data);
+  }, [data, serverSide]);
+  useEffect(function () {
+    if (!onFetch && isValidList(data)) setTableData(data);
+  }, [data, onFetch]);
 
   // Global search
   useEffect(function () {
     setSearchInput(filters.global || "");
   }, [filters.global]);
-  var applyGlobalSearch = useCallback(function () {
+  var applyGlobalSearch = function applyGlobalSearch() {
     handleFilter("global", searchInput);
-  }, [handleFilter, searchInput]);
-  var onGlobalKeyDown = useCallback(function (e) {
+  };
+  var onGlobalKeyDown = function onGlobalKeyDown(e) {
     if (e.key === "Enter") {
       e.preventDefault();
       applyGlobalSearch();
     }
-  }, [applyGlobalSearch]);
-  var handleLimitChange = useCallback(function (nextLimit) {
+  };
+  var handleLimitChange = function handleLimitChange(nextLimit) {
     var parsed = Number(nextLimit);
     if (!Number.isFinite(parsed) || parsed <= 0) return;
     setLimit(parsed);
-    handlePageChange(1);
+    setCurrentPage(1);
     onLimitChange === null || onLimitChange === void 0 || onLimitChange(parsed);
-  }, [onLimitChange, handlePageChange]);
-
-  // Memoize limit options
-  var limitOptionsMemo = 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]);
+  };
 
-  // Extract row metadata computation
-  var getRowMetadata = useCallback(function (row, rowIndexInPage) {
+  // Render mobile card
+  var renderMobileCard = function renderMobileCard(row, rowIndexInPage) {
     var globalIndex = startIndex + rowIndexInPage;
     var key = getRowKey(row, globalIndex);
     var actionCellKey = "actions-".concat(key);
-    var extraRowClass = typeof rowClass === "function" ? (rowClass({
+    var extraRowClass = typeof rowClass === "function" ? rowClass({
       row: row,
       rowIndex: globalIndex
-    }) || "").trim() : "";
+    }) : "";
+    var safeExtraRowClass = typeof extraRowClass === "string" ? extraRowClass.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 = useCallback(function (row, rowIndexInPage) {
-    var _getRowMetadata = getRowMetadata(row, rowIndexInPage),
-      globalIndex = _getRowMetadata.globalIndex,
-      key = _getRowMetadata.key,
-      actionCellKey = _getRowMetadata.actionCellKey,
-      extraRowClass = _getRowMetadata.extraRowClass,
-      stripeBg = _getRowMetadata.stripeBg;
     return /*#__PURE__*/React__default.createElement("div", {
       key: key,
       style: stripeBg ? {
@@ -4579,7 +4345,7 @@ var Table = function Table(_ref) {
         "cursor-pointer": !!onRowClick,
         "bg-primary-50 border-primary-200": selectedRows.has(key),
         "hover:shadow-md": !selectedRows.has(key)
-      }, extraRowClass),
+      }, safeExtraRowClass),
       onClick: function onClick() {
         return onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(row, globalIndex);
       }
@@ -4636,15 +4402,16 @@ var Table = function Table(_ref) {
     }), document.body))), /*#__PURE__*/React__default.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__default.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__default.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__default.createElement("div", {
@@ -4656,10 +4423,10 @@ var Table = function Table(_ref) {
       row: row,
       index: globalIndex
     })));
-  }, [getRowMetadata, hasDetails, selectable, showSerial, withAction, expandedRows, selectedRows, onRowClick, visibleColumns, renderCell, cellClass, DetailsComponent, actionsToUse, actionAnchor, openActionKey, handleOnAction, actionMenuRef, toggleActions, toggleExpandRow, handleSelectRow]);
+  };
 
   // Render mobile filters
-  var renderMobileFilters = useCallback(function () {
+  var renderMobileFilters = function renderMobileFilters() {
     return /*#__PURE__*/React__default.createElement("div", {
       className: "mb-4 p-3 bg-gray-50 rounded-lg"
     }, /*#__PURE__*/React__default.createElement("div", {
@@ -4701,7 +4468,7 @@ var Table = function Table(_ref) {
         }
       }));
     })));
-  }, [showMobileFilters, globalSearch, searchInput, onGlobalKeyDown, filterable, visibleColumns, filters, handleFilter, setShowMobileFilters, setSearchInput]);
+  };
 
   // Render
   return /*#__PURE__*/React__default.createElement("div", {
@@ -4724,11 +4491,23 @@ var Table = function Table(_ref) {
     htmlFor: "pagination-limit",
     className: "text-sm text-gray-600 whitespace-nowrap"
   }, "Show"), /*#__PURE__*/React__default.createElement(Select, {
-    options: limitOptionsMemo,
+    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
+      };
+    }),
     value: limit,
     allowClear: false,
     placeholder: "",
-    onChange: handleLimitChange,
+    onChange: function onChange(e) {
+      return handleLimitChange(e);
+    },
     className: "w-20 md:w-30"
   }), /*#__PURE__*/React__default.createElement("p", {
     className: "text-sm text-gray-600 whitespace-nowrap"
@@ -4744,42 +4523,24 @@ var Table = function Table(_ref) {
     className: "rounded-lg md:rounded-md border border-gray-300 p-2 disabled:opacity-50 hover:bg-gray-50",
     disabled: currentPage === 1,
     onClick: function onClick() {
-      return handlePageChange(1);
-    },
-    "aria-label": "First page",
-    title: "First page"
-  }, /*#__PURE__*/React__default.createElement(ChevronsLeft, {
-    className: "size-4 md:size-5 text-gray-800"
-  })), /*#__PURE__*/React__default.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));
+      return setCurrentPage(function (p) {
+        return Math.max(1, p - 1);
+      });
     },
-    "aria-label": "Previous page",
-    title: "Previous page"
+    "aria-label": "Previous page"
   }, /*#__PURE__*/React__default.createElement(ChevronLeft, {
     className: "size-4 md:size-5 text-gray-800"
   })), /*#__PURE__*/React__default.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(Math.min(totalPages, currentPage + 1));
+      return setCurrentPage(function (p) {
+        return Math.min(totalPages, p + 1);
+      });
     },
-    "aria-label": "Next page",
-    title: "Next page"
+    "aria-label": "Next page"
   }, /*#__PURE__*/React__default.createElement(ChevronRight, {
     className: "size-4 md:size-5 text-gray-800"
-  })), /*#__PURE__*/React__default.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__default.createElement(ChevronsRight, {
-    className: "size-4 md:size-5 text-gray-800"
   })))))), globalSearch && /*#__PURE__*/React__default.createElement("div", {
     className: "p-4 border-b"
   }, /*#__PURE__*/React__default.createElement("div", {
@@ -4918,16 +4679,33 @@ var Table = function Table(_ref) {
   }, loading ? /*#__PURE__*/React__default.createElement("tr", null, /*#__PURE__*/React__default.createElement("td", {
     colSpan: visibleCount,
     className: "px-6 py-8 text-center"
-  }, /*#__PURE__*/React__default.createElement(LoadingState, null))) : paginatedData.length === 0 ? /*#__PURE__*/React__default.createElement("tr", null, /*#__PURE__*/React__default.createElement("td", {
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "flex flex-col items-center gap-2"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "h-6 w-6 animate-spin rounded-full border-2 border-primary-600 border-t-transparent"
+  }), /*#__PURE__*/React__default.createElement("span", {
+    className: "text-sm text-gray-500"
+  }, "Loading...")))) : paginatedData.length === 0 ? /*#__PURE__*/React__default.createElement("tr", null, /*#__PURE__*/React__default.createElement("td", {
     colSpan: visibleCount,
     className: "px-6 py-8 text-center"
-  }, /*#__PURE__*/React__default.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__default.createElement("div", {
+    className: "flex flex-col items-center gap-2"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "text-gray-400"
+  }, /*#__PURE__*/React__default.createElement(List, {
+    className: "h-8 w-8"
+  })), /*#__PURE__*/React__default.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 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;
     return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
       key: key
     }, /*#__PURE__*/React__default.createElement("tr", {
@@ -4937,7 +4715,7 @@ var Table = function Table(_ref) {
       className: cn$1("hover:bg-gray-50", {
         "cursor-pointer": !!onRowClick,
         "bg-primary-50": selectedRows.has(key)
-      }, extraRowClass),
+      }, safeExtraRowClass),
       onClick: function onClick() {
         return onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(row, globalIndex);
       }
@@ -4965,15 +4743,16 @@ var Table = function Table(_ref) {
         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__default.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));
     }), withAction && /*#__PURE__*/React__default.createElement("td", {
       className: "px-4 py-4 text-sm text-right",
@@ -5016,9 +4795,23 @@ var Table = function Table(_ref) {
     className: "p-4"
   }, loading ? /*#__PURE__*/React__default.createElement("div", {
     className: "py-8 text-center"
-  }, /*#__PURE__*/React__default.createElement(LoadingState, null)) : paginatedData.length === 0 ? /*#__PURE__*/React__default.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "flex flex-col items-center gap-2"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "h-6 w-6 animate-spin rounded-full border-2 border-primary-600 border-t-transparent"
+  }), /*#__PURE__*/React__default.createElement("span", {
+    className: "text-sm text-gray-500"
+  }, "Loading..."))) : paginatedData.length === 0 ? /*#__PURE__*/React__default.createElement("div", {
     className: "py-8 text-center"
-  }, /*#__PURE__*/React__default.createElement(EmptyState, null)) : paginatedData.map(function (row, rowIndexInPage) {
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "flex flex-col items-center gap-2"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "text-gray-400"
+  }, /*#__PURE__*/React__default.createElement(List, {
+    className: "h-8 w-8"
+  })), /*#__PURE__*/React__default.createElement("span", {
+    className: "text-sm text-gray-500"
+  }, "No results found."))) : paginatedData.map(function (row, rowIndexInPage) {
     return renderMobileCard(row, rowIndexInPage);
   })), pagination && /*#__PURE__*/React__default.createElement("div", {
     className: "p-4 border-t"
@@ -5029,25 +4822,28 @@ var Table = function Table(_ref) {
   }, "Page ", currentPage, " of ", totalPages), /*#__PURE__*/React__default.createElement("div", {
     className: "flex items-center gap-2"
   }, /*#__PURE__*/React__default.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__default.createElement(ChevronsLeft, {
-    className: "size-4"
-  }), /*#__PURE__*/React__default.createElement("span", {
-    className: "hidden sm:inline"
-  }, "First")), /*#__PURE__*/React__default.createElement("button", {
     className: "rounded-lg md:rounded-md border border-gray-300 px-4 py-2 text-sm disabled:opacity-50 hover:bg-gray-50",
     disabled: currentPage === 1,
     onClick: function onClick() {
-      return handlePageChange(Math.max(1, currentPage - 1));
+      return setCurrentPage(function (p) {
+        return Math.max(1, p - 1);
+      });
     }
   }, "Previous"), /*#__PURE__*/React__default.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__default.createElement("button", {
       key: pageNum,
       className: cn$1("h-8 w-8 rounded-lg md:rounded-md text-sm", {
@@ -5055,34 +4851,19 @@ var Table = function Table(_ref) {
         "border border-gray-300 hover:bg-gray-50": pageNum !== currentPage
       }),
       onClick: function onClick() {
-        return handlePageChange(pageNum);
+        return setCurrentPage(pageNum);
       }
     }, pageNum);
   })), /*#__PURE__*/React__default.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 handlePageChange(Math.min(totalPages, currentPage + 1));
+      return setCurrentPage(function (p) {
+        return Math.min(totalPages, p + 1);
+      });
     }
-  }, "Next"), /*#__PURE__*/React__default.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__default.createElement("span", {
-    className: "hidden sm:inline"
-  }, "Last"), /*#__PURE__*/React__default.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,
@@ -5096,12 +4877,16 @@ function ActionMenuPortal(_ref2) {
       top: 0,
       transformOrigin: "top right",
       maxHeight: 300,
-      width: MENU_WIDTH,
+      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() {
@@ -5113,17 +4898,17 @@ function ActionMenuPortal(_ref2) {
     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)));
+    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 < MENU_PLACEMENT_THRESHOLD && spaceAbove > spaceBelow) {
+    if (spaceBelow < 160 && 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));
+      allowedMaxHeight = Math.min(maxMenuHeight, Math.max(minMenuHeight, spaceAbove - margin));
     } else {
       // placing bottom: cap by spaceBelow
-      allowedMaxHeight = Math.min(MAX_MENU_HEIGHT, Math.max(MIN_MENU_HEIGHT, spaceBelow - MENU_MARGIN));
+      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.
@@ -5140,23 +4925,23 @@ function ActionMenuPortal(_ref2) {
     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;
+      top = rect.top + scrollY - measuredMenuHeight - margin;
     } else {
       // place menu just below the anchor (rect.bottom + margin)
-      top = rect.bottom + scrollY + MENU_MARGIN;
+      top = rect.bottom + scrollY + margin;
     }
 
     // clamp top to viewport (so it never goes off-screen)
-    var minTop = MENU_MARGIN + scrollY;
-    var maxTop = window.innerHeight + scrollY - measuredMenuHeight - MENU_MARGIN;
+    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 - 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 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";
 
@@ -5166,7 +4951,7 @@ function ActionMenuPortal(_ref2) {
       top: top,
       transformOrigin: transformOrigin,
       maxHeight: allowedMaxHeight,
-      width: MENU_WIDTH,
+      width: menuWidth,
       opacity: 1
     });
   };
@@ -5189,8 +4974,7 @@ function ActionMenuPortal(_ref2) {
       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]);
+  }, [anchorElem, actions, menuRef]);
   return /*#__PURE__*/createPortal(/*#__PURE__*/React__default.createElement("div", {
     ref: menuRef,
     style: {